JCSS / jcss-miniprogram

<template>
  <view class="u-page">
    <!-- 原有模板内容不变，仅调整表单校验相关配置 -->
    <view class="inspect-form-content commonPageLRpadding">
      <up-form label-position="left" :model="inspectForm" ref="inspectFormRef" labelWidth="200rpx">
        <!-- 1. 巡查描述 -->
        <up-form-item label="巡查描述" prop="content" class="form-item" required>
          <up-textarea v-model.trim="inspectForm.content" placeholder="请输入巡查描述" maxlength="200" count></up-textarea>
        </up-form-item>
        <!-- 2. 上传图片 -->
        <up-form-item label="上传图片" prop="images" required border-bottom class="form-item">
          <up-upload :file-list="imagesList" @after-read="(event) => uploadImgs(event)"
            @delete="(event) => deleteImg(event)" @on-exceed="handleExceed" multiple :max-count="3" upload-text="选择图片"
            del-color="#ff4d4f" class="upload-wrap" width="70" height="70"></up-upload>
        </up-form-item>
        <!-- 3. 转为工单 -->
        <up-form-item label="转为工单" prop="isWorkOrder" required class="form-item">
          <up-radio-group v-model="inspectForm.isWorkOrder" active-color="#1989fa" direction="row" class="radio-group"
            @change="handleWorkOrderChange">
            <up-radio :custom-style="{ marginRight: '40rpx' }" v-for="(item, index) in radioList" :key="index"
              :label="item.label" :name="item.value">
              {{ item.label }}
            </up-radio>
          </up-radio-group>
        </up-form-item>
        <!-- ========== 【新增】业务线（单选框，对齐参考页面） ========== -->
        <up-form-item v-if="inspectForm.isWorkOrder === '2'" label="业务线" prop="busiLineCn" border-bottom required
          class="form-item">
          <up-radio-group v-model="inspectForm.busiLineCn" placement="row" @change="handleBusiLineChange">
            <up-radio v-for="item in busiLineOptions" :key="item.name" :label="item.name" :name="item.name"></up-radio>
          </up-radio-group>
        </up-form-item>
        <!-- ========== 【新增】问题类型（级联选择器，对齐参考页面） ========== -->
        <up-form-item v-if="inspectForm.isWorkOrder === '2'" label="问题类型" prop="orderName" border-bottom required
          class="form-item" @click="openCascader(); uni.hideKeyboard()">
          <up-input v-model="inspectForm.orderName" disabled disabled-color="#ffffff" placeholder="请选择问题类型"
            border="none"></up-input>
          <template #right>
            <up-icon name="arrow-right" size="16"></up-icon>
          </template>
        </up-form-item>
        <!-- 紧急程度（仍为必填） -->
        <up-form-item v-if="inspectForm.isWorkOrder === '2'" label="紧急程度" prop="pressingTypeName" border-bottom required
          class="form-item" @click="handleActionSheetOpen('pressingType')">
          <up-input v-model="inspectForm.pressingTypeName" disabled disabled-color="#ffffff" placeholder="请选择紧急程度"
            border="none"></up-input>
          <template #right>
            <up-icon name="arrow-right" size="16"></up-icon>
          </template>
        </up-form-item>
        <!-- 希望完成时间（移除 required 属性，改为非必填） -->
        <up-form-item v-if="inspectForm.isWorkOrder === '2'" label="希望完成时间" prop="expectedFinishDate" class="form-item"
          @click="show = true; uni.hideKeyboard()">
          <up-input v-model="inspectForm.expectedFinishDate" border="none" readonly placeholder="点击选择时间">
          </up-input>
          <template #right>
            <!-- 核心修复：用view包裹图标，添加双重@click.stop -->
            <view v-if="inspectForm.expectedFinishDate" @click.stop>
              <up-icon name="close" size="16" @click.stop="clearExpectedFinishDate"></up-icon>
            </view>
            <up-icon name="arrow-right" size="16" v-else></up-icon>
          </template>
        </up-form-item>
      </up-form>
    </view>
    <!-- 底部提交按钮 -->
    <view class="fixed-bottom-btn-wrap">
      <up-button type="primary" text="提交" @click="submitInspect"
        :style="{ width: '100%', height: '88rpx', fontSize: '32rpx', borderRadius: 0 }"></up-button>
    </view>
    <!-- 紧急程度下拉弹窗 -->
    <up-action-sheet :show="showActionSheet" :actions="pressingTypeList" title="请选择紧急程度" @close="handleActionSheetClose"
      @select="handlePressingTypeSelect"></up-action-sheet>
    <!-- ========== 新增级联选择器组件 ========== -->
    <up-cascader v-model:show="showCascader" v-model="cascaderValue" :data="cascaderOptions" title="选择问题类型"
      :auto-close="false" @confirm="cascaderConfirm"></up-cascader>
    <!-- 完成时间选择器 -->
    <up-datetime-picker :show="show" v-model="datetimeValue" mode="datetime" :min-date="new Date()"
      @cancel="show = false" @confirm="expectedFinishDateConfirm"></up-datetime-picker>
  </view>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import type { UniFormRef } from '@/uni_modules/uview-plus/types'
import { useUserStore } from '@/pinia/user';
import { getDictLabel, getDictValue } from '@/common/utils/dict';
import { getProblemListByType } from '@/api/common'
const { proxy } = getCurrentInstance()!
const inspectFormRef = ref<UniFormRef>(null)
const userStore = useUserStore();
const BUSI_LINE_DICT_TYPE = 'business_line';
const CJK_RE = /[一-龥]/;

// 级联选择器变量
const showCascader = ref(false);
const cascaderValue = ref([]);
const cascaderOptions = ref([]);

// 打开级联弹窗
const openCascader = () => {
  const busiLineEn = getBusiLineEnByCn(proxy.$data.inspectForm.busiLineCn)
  if (!busiLineEn) {
    uni.showToast({ title: '请先选择业务线', icon: 'none' })
    return
  }
  if (!cascaderOptions.value || cascaderOptions.value.length === 0) {
    uni.showToast({ title: '正在加载问题类型，请稍等', icon: 'none' });
    loadProblemCascader(busiLineEn);
    return;
  }
  cascaderValue.value = [];
  showCascader.value = true;
};

// 级联确认回调
const cascaderConfirm = (selectedArr) => {
  const getLabelByValueList = (list, valList) => {
    const labelArr = [];
    let currentList = list;
    for (const val of valList) {
      const target = currentList.find(item => item.value === val);
      if (!target) break;
      labelArr.push(target.label);
      currentList = target.children || [];
    }
    return labelArr.join('/');
  };
  const fullLabel = getLabelByValueList(cascaderOptions.value, selectedArr);
  proxy.$data.inspectForm.orderName = fullLabel;
  proxy.$data.inspectForm.orderCode = selectedArr.at(-1);
  cascaderValue.value = selectedArr;
  inspectFormRef.value?.validateField('orderName');
};

// 加载级联树形数据
const loadProblemCascader = async (parentCode) => {
  if (!parentCode) {
    cascaderOptions.value = []
    return
  }
  try {
    uni.showLoading({ title: '加载类型中...' })
    const res = await getProblemListByType({ parentCode })
    uni.hideLoading()
    cascaderOptions.value = res || []
  } catch (err) {
    uni.hideLoading()
    console.error('获取问题类型失败', err)
    uni.showToast({ title: '获取问题类型失败', icon: 'none' })
    cascaderOptions.value = []
  }
}

const getBusiLineCnByEn = (busiLineEn) => {
  if (!busiLineEn) return '';
  return getDictLabel(BUSI_LINE_DICT_TYPE, busiLineEn) || busiLineEn;
};
const getBusiLineEnByCn = (cnName) => {
  if (!cnName) return '';
  const code = getDictValue(BUSI_LINE_DICT_TYPE, cnName);
  if (code) return code;
  return CJK_RE.test(cnName) ? '' : cnName;
};

// 暴露给选项式访问
proxy.$setupCtx = {
  loadProblemCascader,
  getBusiLineEnByCn,
  cascaderOptions,
  cascaderValue
}
</script>
<script lang="ts">
import { uploadImages } from '@/common/utils/upload';
import { inspectionCreate } from "@/api/patrol-manage/patrol-plan";
import { timeFormat } from '@/uni_modules/uview-plus'
import { useUserStore } from '@/pinia/user';
import { getDictLabel } from '@/common/utils/dict';
export default {
  data() {
    return {
      imagesList: [],
      radioList: [
        { label: '否', value: '1' },
        { label: '是', value: '2' }
      ],
      pressingTypeList: [],
      busiLineOptions: [], // 业务线移到data，不再放在setup
      inspectForm: {
        content: '',
        isWorkOrder: '1',
        pressingTypeName: '',
        pressingType: '',
        busiLineCn: '',
        orderName: '',
        orderCode: '',
        expectedFinishDate: '' // 非必填，可空
      },
      paramsOptins: {},
      showActionSheet: false,
      show: false,
      datetimeValue: Date.now(),
      inspectFormRules: {
        images: [
          {
            required: true,
            message: '请上传图片',
            trigger: 'change',
            validator: (rule, value, callback) => {
              const hasSuccessImg = this.imagesList.some(item => item.status === 'success')
              const imgCount = this.imagesList.filter(item => item.status === 'success').length
              if (!hasSuccessImg || imgCount < 1) {
                callback(new Error('最少需要上传1张图片'))
              } else if (imgCount > 3) {
                callback(new Error('最多只能上传3张图片'))
              } else {
                callback()
              }
            }
          }
        ],
        content: [
          { type: 'string', required: true, message: '请输入巡查描述', trigger: ['change'] }
        ],
        isWorkOrder: [
          { type: 'string', required: true, message: '请选择是否转为工单', trigger: ['change'] }
        ],
        pressingTypeName: [
          {
            required: true,
            message: '请选择紧急程度',
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (this.inspectForm.isWorkOrder === '2' && !value) {
                callback(new Error('请选择紧急程度'))
              } else {
                callback()
              }
            }
          }
        ],
        busiLineCn: [
          {
            required: true,
            message: '请选择业务线',
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (this.inspectForm.isWorkOrder === '2' && !value) {
                callback(new Error('请选择业务线'))
              } else {
                callback()
              }
            }
          }
        ],
        orderName: [
          {
            required: true,
            message: '请选择问题类型',
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (this.inspectForm.isWorkOrder === '2' && !value) {
                callback(new Error('请选择问题类型'))
              } else {
                callback()
              }
            }
          }
        ],
        expectedFinishDate: [
          {
            message: '请选择有效的希望完成时间',
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (value && !/^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/.test(value)) {
                callback(new Error('请选择有效的希望完成时间'))
              } else {
                callback()
              }
            }
          }
        ]
      }
    }
  },
  onLoad(option) {
    this.paramsOptins = option
    // 初始化业务线选项
    const userStore = useUserStore();
    if (userStore.userInfo?.user?.busiLine) {
      const rawBusiLines = userStore.userInfo.user.busiLine.split(',');
      this.busiLineOptions = rawBusiLines.map(item => ({
        name: getDictLabel('business_line', item.trim()) || item.trim()
      }));
    }
  },
  onReady() {
    this.$refs.inspectFormRef.setRules(this.inspectFormRules)
  },
  onShow() {
    this.pressingTypeList = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('workorder_pressing_type'))
  },
  methods: {
    handleWorkOrderChange() {
      if (this.inspectForm.isWorkOrder === '1') {
        this.inspectForm.pressingTypeName = ''
        this.inspectForm.pressingType = ''
        this.inspectForm.busiLineCn = ''
        this.inspectForm.orderName = ''
        this.inspectForm.orderCode = ''
        this.$setupCtx.cascaderOptions.value = []
        this.$setupCtx.cascaderValue.value = []
        this.inspectForm.expectedFinishDate = ''
        this.$refs.inspectFormRef.validateField(['pressingTypeName', 'busiLineCn', 'orderName', 'expectedFinishDate'])
      } else {
        // 修复点：直接读取data中的 busiLineOptions，不再访问setup
        const busiOpts = this.busiLineOptions
        if (busiOpts.length > 0) {
          this.inspectForm.busiLineCn = busiOpts[0].name
          this.handleBusiLineChange()
        }
      }
    },
    handleBusiLineChange() {
      this.inspectForm.orderName = ''
      this.inspectForm.orderCode = ''
      this.$setupCtx.cascaderValue.value = []
      this.$setupCtx.cascaderOptions.value = []
      const busiLineEn = this.$setupCtx.getBusiLineEnByCn(this.inspectForm.busiLineCn)
      this.$setupCtx.loadProblemCascader(busiLineEn)
      this.$refs.inspectFormRef.validateField('busiLineCn')
    },
    handleActionSheetOpen(type) {
      uni.hideKeyboard()
      if (type === 'pressingType') {
        this.showActionSheet = true
      }
    },
    handleActionSheetClose() {
      this.showActionSheet = false
    },
    handlePressingTypeSelect(e) {
      this.inspectForm.pressingTypeName = e.name
      this.inspectForm.pressingType = e.value
      this.showActionSheet = false
      this.$refs.inspectFormRef.validateField('pressingTypeName')
    },
    expectedFinishDateConfirm(e) {
      this.inspectForm.expectedFinishDate = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
      this.show = false
      this.$refs.inspectFormRef.validateField('expectedFinishDate')
    },
    clearExpectedFinishDate() {
      this.inspectForm.expectedFinishDate = ''
      this.$refs.inspectFormRef.validateField('expectedFinishDate')
    },
    deleteImg(event) {
      this.imagesList.splice(event.index, 1)
      this.$refs.inspectFormRef.validateField('images')
      uni.showToast({ title: '图片删除成功', icon: 'success' })
    },
    async uploadImgs(event) {
      const fileList = Array.isArray(event.file) ? event.file : [event.file]
      const targetImgList = this.imagesList
      const filePaths = fileList.map(item => item.url)
      const tempItems = fileList.map(item => ({
        ...item,
        status: 'uploading',
        message: '上传中'
      }))
      const startIndex = targetImgList.length
      targetImgList.push(...tempItems)
      try {
        const uploadResultUrls = await uploadImages({
          filePaths: filePaths,
          ignoreError: true
        })
        uploadResultUrls.forEach((url, index) => {
          if (targetImgList[startIndex + index]) {
            targetImgList.splice(startIndex + index, 1, {
              ...fileList[index],
              status: 'success',
              message: '',
              url: url
            })
          }
        })
        if (uploadResultUrls.length < fileList.length) {
          const failCount = fileList.length - uploadResultUrls.length
          uni.showToast({ title: `成功上传${uploadResultUrls.length}张，失败${failCount}张`, icon: 'none' })
        } else {
          uni.showToast({ title: `成功上传${fileList.length}张图片`, icon: 'success' })
        }
        this.$refs.inspectFormRef.validateField('images')
      } catch (err) {
        console.error('图片上传失败：', err)
        for (let i = 0; i < fileList.length; i++) {
          if (targetImgList[startIndex + i]) {
            targetImgList.splice(startIndex + i, 1, {
              ...fileList[i],
              status: 'failed',
              message: '上传失败'
            })
          }
        }
        uni.showToast({ title: '图片上传失败，请重试', icon: 'none' })
        this.$refs.inspectFormRef.validateField('images')
      }
    },
    handleExceed() {
      uni.showToast({ title: '最多只能上传3张图片', icon: 'none' })
    },
    getImgUrlList(imgList) {
      return imgList.filter(item => item.status === 'success').map(item => item.url)
    },
    async submitInspect() {
      console.log('当前选择是否转为工单：', this.inspectForm.isWorkOrder)
      try {
        await this.$refs.inspectFormRef.validate()
        console.log(this.imagesList)
        const baseSubmitData = {
          "batchNo": this.paramsOptins.batchNo,
          "planNo": this.paramsOptins.planNo,
          "imgHost": "1",
          "imgList": this.getImgUrlList(this.imagesList),
          "inspectionState": this.inspectForm.isWorkOrder,
          "transState": this.inspectForm.isWorkOrder === '1' ? '1' : '2',
          "transWorkNo": "default'",
          "remark": this.inspectForm.content.trim()
        }
        let submitData = { ...baseSubmitData }
        if (this.inspectForm.isWorkOrder === '2') {
          submitData.pressingType = this.inspectForm.pressingType
          const busiLineEn = this.$setupCtx.getBusiLineEnByCn(this.inspectForm.busiLineCn)
          submitData.busiLine = busiLineEn
          submitData.orderName = this.inspectForm.orderName
          submitData.orderCode = this.inspectForm.orderCode
          if (this.inspectForm.expectedFinishDate) {
            submitData.expectedFinishDate = new Date(this.inspectForm.expectedFinishDate).getTime()
          }
        }
        uni.showLoading({ title: '提交中...' })
        await inspectionCreate(submitData)
        uni.hideLoading()
        uni.showToast({
          title: '提交成功',
          icon: 'success',
          duration: 1000
        })
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages-sub/daily/patrol-manage/index'
          })
        }, 1000)
      } catch (error) {
        uni.hideLoading()
        if (!Array.isArray(error)) {
          console.error('巡查表单提交失败：', error)
          uni.showToast({
            title: error.msg,
            icon: 'none',
            duration: 2000
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.u-page {
  min-height: 100vh;
}

.inspect-form-content {
  background: #fff;
  padding: 20rpx;
}

.form-item {
  margin-bottom: 20rpx;
}
</style>