JCSS / jcss-miniprogram

  <template>

    <view class="page-container">

      <view class="work-order-form-content commonPageLRpadding">

        <up-form label-position="left" :model="workOrderForm" ref="workOrderFormRef" labelWidth="200rpx">

          <!-- 业务线单选框 -->

          <up-form-item label="业务线" prop="busiLineCn" border-bottom required>
            <up-radio-group v-model="workOrderForm.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>

          <!-- 1. 工单位置（地图选择） -->

          <up-form-item label="工单位置" prop="workLocation" border-bottom required
            @click="chooseWorkLocation(); hideKeyboard()">
            <up-input v-model="workOrderForm.workLocation" border="none" readonly suffix-icon="map-fill"
              placeholder="点击选择工单位置"></up-input>

          </up-form-item>

          <!-- 2. 道路名称（下拉框action-sheet，保留不变） -->

          <up-form-item label="道路名称" prop="roadName" border-bottom required
            @click="handleActionSheetOpen('roadName'); hideKeyboard()">
            <up-input v-model="workOrderForm.roadName" readonly disabled-color="#ffffff" placeholder="请先选择工单位置"
              border="none"></up-input>

            <template #right>

              <up-icon name="arrow-right" size="16"></up-icon>

            </template>
          </up-form-item>

          <!-- 3. 问题类型 级联选择器【对齐参考页面】 -->
          <up-form-item label="问题类型" prop="orderName" border-bottom required @click="openCascader(); hideKeyboard()">

            <up-input v-model="workOrderForm.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 label="紧急程度" prop="pressingTypeName" border-bottom required
            @click="handleActionSheetOpen('pressingType'); hideKeyboard()">
            <up-input v-model="workOrderForm.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>

          <!-- 4. 情况描述（文本域） -->

          <up-form-item label="情况描述" prop="problemDesc" required>
            <up-textarea placeholder="请输入情况描述（最多200字）" v-model.trim="workOrderForm.problemDesc" count maxlength="200"

              rows="4" @blur="() => workOrderFormRef.value?.validateField('problemDesc')"></up-textarea>

          </up-form-item>

          <!-- 问题照片 -->

          <up-form-item label="问题照片" prop="problemImgs" border-bottom required>

            <up-upload :file-list="problemImgs.imgList.value || []" @after-read="problemImgs.uploadImgs"
              @delete="problemImgs.deleteImg" multiple :width="70" :height="70"
              :max-count="problemImgs.uploadConfig.maxCount" :upload-text="problemImgs.uploadConfig.uploadText"
              :size-type="problemImgs.uploadConfig.sizeType"></up-upload>

          </up-form-item>

          <!-- 完成时间 -->

          <up-form-item label="希望完成时间" prop="expectedFinishDate" @click="show = true; hideKeyboard()">
            <up-input v-model="workOrderForm.expectedFinishDate" border="none" readonly placeholder="点击选择时间"></up-input>

            <template #right>

              <view v-if="workOrderForm.expectedFinishDate" @click.stop>

                <up-icon name="close" size="20" @click.stop="clearExpectedFinishDate"></up-icon>

              </view>
              <up-icon name="arrow-right" size="16" v-else></up-icon>

            </template>
          </up-form-item>

          <!-- 重点巡检区域 -->
          <up-form-item label="重点巡检区域" prop="keyInspection" border-bottom required>
            <up-radio-group v-model="workOrderForm.keyInspection" @change="groupChange">
              <up-radio
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in keyInspectionOptions"
                :key="index"
                :label="item.name"
                :name="item.name"
              >
              </up-radio>
            </up-radio-group>
          </up-form-item>

        </up-form>
      </view>

      <!-- 底部提交按钮 -->
      <view class="fixed-bottom-btn-wrap">

        <up-button type="primary" text="提交工单" @click="submitWorkOrder"></up-button>

      </view>

      <!-- 通用下拉弹窗：道路名称、紧急程度保留 -->

      <up-action-sheet :show="showActionSheet" :actions="currentActionSheetData.list"
        :title="currentActionSheetData.title" @close="handleActionSheetClose"
        @select="handleActionSheetSelect"></up-action-sheet>

      <!-- 级联选择器 up-cascader【对齐参考页面写法】 -->
      <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="expectedFinishDate" mode="datetime" :min-date="new Date()"
        @cancel="show = false" @confirm="expectedFinishDateConfirm"></up-datetime-picker>

    </view>
  </template>

  <script setup>

  import { ref, reactive } from 'vue'

  import { onReady, onShow, onLoad } from '@dcloudio/uni-app';

  import { useUploadImgs } from '@/common/utils/useUploadImgs'

  import { getRoadListByLatLng, getProblemListByType } from '@/api/common'

  import { universalApproval, workorderCreate } from '@/api/work-order-manage/work-order-manage'

  import { timeFormat } from '@/uni_modules/uview-plus'

  import { nextStepMap } from '@/common/utils/common'

  import { useUserStore } from '@/pinia/user';

  import { getDictLabel, getDictValue } from '@/common/utils/dict';

  const userStore = useUserStore();

  const BUSI_LINE_DICT_TYPE = 'business_line';

  const CJK_RE = /[一-龥]/;

  const busiLineOptions = ref([]);

  const formatBusiLineOptions = () => {
    if (!userStore.userInfo?.user?.busiLine) {
      busiLineOptions.value = [];
      return;
    }

    const rawBusiLines = userStore.userInfo.user.busiLine.split(',');

    busiLineOptions.value = rawBusiLines.map(item => ({

      name: getBusiLineCnByEn(item.trim())

    }));

  };

  const keyInspectionOptions = reactive([

    { name: '否', disabled: false },
    { name: '是', disabled: false },

  ]);

  const groupChange = (n) => {
    console.log('groupChange', n);
  };

  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;

  };

  // ========== 级联选择器变量（和参考页面对齐） ==========
  const showCascader = ref(false);
  const cascaderValue = ref([]);
  const cascaderOptions = ref([]);

  // 打开级联弹窗
  const openCascader = () => {
    console.log('312321dasd')
    const busiLineEn = getBusiLineEnByCn(workOrderForm.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) => {
    console.log('最终选中值数组：', selectedArr);
    // 递归拼接多级label，用 / 分隔
    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);
    workOrderForm.orderName = fullLabel;
    workOrderForm.orderCode = selectedArr.at(-1);
    cascaderValue.value = selectedArr;
    workOrderFormRef.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 = []
    }
  }
  
  // 表单Ref
  const workOrderFormRef = ref(null)

  const problemImgs = useUploadImgs({
    maxCount: 3,
    uploadText: '选择问题照片',
    sizeType: ['compressed'],
    formRef: workOrderFormRef,
    fieldName: 'problemImgs'
  })

  if (!Array.isArray(problemImgs.rawImgList.value)) {
    problemImgs.rawImgList.value = [];
  }

  const showActionSheet = ref(false)

  const currentActionSheetData = reactive({
    type: '',
    list: [],
    title: ''
  })

  const show = ref(false)

  const expectedFinishDate = ref(Date.now())

  const isRenew = ref(false);
  const renewOrderData = ref(null);

  const roadNameList = ref([])

  const pressingTypeList = ref([])
  

  // ========== 表单数据 ==========

  const workOrderForm = reactive({

    busiLineCn: '',
    roadId: 0,
    roadName: '',
    workLocation: '',
    orderName: '',
    orderCode: '',
    pressingType: '',
    pressingTypeName: '',
    problemDesc: '',
    lat: 0,
    lon: 0,
    expectedFinishDate: '',

    keyInspection: '否'

  })

  // 表单校验规则：prop改成 orderName，对齐参考页面

  const workOrderFormRules = reactive({

    busiLineCn: [

      { type: 'string', required: true, message: '请选择业务线', trigger: ['change', 'blur'] }
    ],

    workLocation: [
      { type: 'string', required: true, message: '请选择工单位置', trigger: ['change', 'blur'] }

    ],

    roadName: [
      { type: 'string', required: true, message: '请选择道路名称', trigger: ['change', 'blur'] }
    ],
    orderName: [

      { type: 'string', required: true, message: '请选择问题类型', trigger: 'change' }

    ],
    pressingTypeName: [
      { type: 'string', required: true, message: '请选择紧急程度', trigger: ['change'] }
    ],
    problemDesc: [
      { type: 'string', required: true, message: '请输入情况描述', trigger: ['change', 'blur'] },
      { type: 'string', min: 3, max: 200, message: '情况描述需3-200字', trigger: ['change', 'blur'] }
    ],

    problemImgs: [problemImgs.imgValidateRule]

  })

  onLoad((options) => {

    formatBusiLineOptions();

    if (busiLineOptions.value.length > 0) {
      workOrderForm.busiLineCn = busiLineOptions.value[0].name;

      const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn)
      loadProblemCascader(busiLineEn)

    }

    console.log(options)

    if (options.isRenew == 1 && options.tempKey) {

      isRenew.value = true;
      const tempKey = options.tempKey;

      try {
        const orderData = uni.getStorageSync(tempKey);
        if (orderData && typeof orderData === 'object') {
          renewOrderData.value = orderData;

          echoOrderData(renewOrderData.value);
        } else {
          uni.showToast({ title: '工单数据不存在，无法重新提交', icon: 'none' });

          setTimeout(() => uni.navigateBack(), 1000);
          return;
        }
      } catch (error) {
        console.error('读取工单数据失败：', error);
        uni.showToast({ title: '数据读取异常，无法重新提交', icon: 'none' });
        setTimeout(() => uni.navigateBack(), 1000);
        return;
      } finally {

        uni.removeStorageSync(tempKey);
      }
    }
  });

  onReady(() => {

    if (workOrderFormRef.value) {
      workOrderFormRef.value.setRules(workOrderFormRules)
    }

    console.log('工单表单规则初始化完成')

  })

  onShow(() => {

    pressingTypeList.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('workorder_pressing_type'))
    console.log('紧急程度列表：', pressingTypeList.value)

  })

  // 回显工单数据【重点对齐参考页面的递归查找级联路径】
  const echoOrderData = async (orderItem) => {
    const busiCode = orderItem.busiLine || '';
    if (busiCode) {
      workOrderForm.busiLineCn = getBusiLineCnByEn(busiCode);

    }

    workOrderForm.roadId = orderItem.roadId || 0;
    workOrderForm.roadName = orderItem.roadName || '';
    workOrderForm.workLocation = orderItem.lonLatAddress || orderItem.roadName || '';
    workOrderForm.orderName = orderItem.orderName || '';

    workOrderForm.orderCode = orderItem.orderCode || '';

    workOrderForm.pressingType = orderItem.pressingType || '';
    workOrderForm.pressingTypeName = uni.$dict.getDictLabel('workorder_pressing_type', orderItem.pressingType) || '';
    workOrderForm.problemDesc = orderItem.remark || '';
    workOrderForm.lat = orderItem.lat || 0;
    workOrderForm.lon = orderItem.lon || 0;

    workOrderForm.expectedFinishDate = orderItem.expectedFinishDate ? timeFormat(orderItem.expectedFinishDate, 'yyyy-mm-dd hh:MM:ss') : '';

    if (orderItem.keyInspection !== undefined) {
      workOrderForm.keyInspection = orderItem.keyInspection === 1 ? '是' : '否'
    }

    if (orderItem.problemsImgs && Array.isArray(orderItem.problemsImgs) && orderItem.problemsImgs.length > 0) {
      const imgList = orderItem.problemsImgs.map((imgUrl, index) => ({
        url: imgUrl,
        name: `renew_img_${index}`,

        status: 'success'

      }));

      problemImgs.imgList.value = imgList;

      problemImgs.rawImgList.value = imgList;
    }
  

    // ========= 回显核心：加载级联树，递归找到选中路径，赋值 cascaderValue =========
    if (busiCode) {
      await loadProblemCascader(busiCode);
      const targetCode = orderItem.orderCode
      if (targetCode && cascaderOptions.value.length) {
        const findCascaderPath = (list, targetVal, path = []) => {
          for (const node of list) {
            const newPath = [...path, node.value]
            if (node.value === targetVal) {
              return newPath
            }
            if (node.children && node.children.length) {
              const res = findCascaderPath(node.children, targetVal, newPath)
              if (res) return res
            }
          }
          return null
        }
        const selectPath = findCascaderPath(cascaderOptions.value, targetCode)
        if (selectPath) {
          cascaderValue.value = selectPath
        }
      }
    }
  

    if (orderItem.lat && orderItem.lon) {

      getRoadListByBusiLine();

    }
  };
  

  /**

   * 业务线切换：清空道路、问题类型级联数据，重新加载级联树

   */
  const handleBusiLineChange = () => {

    // 清空道路

    workOrderForm.roadName = '';
    workOrderForm.roadId = 0;

    roadNameList.value = [];

    // 清空问题类型
    workOrderForm.orderName = ''
    workOrderForm.orderCode = ''
    cascaderValue.value = []
    cascaderOptions.value = []
    const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn)
    loadProblemCascader(busiLineEn)

    if (workOrderForm.workLocation) {
      getRoadListByBusiLine();
    }
  };
  

  const getRoadListByBusiLine = async () => {
    if (!workOrderForm.lat || !workOrderForm.lon) {
      return;
    }

    const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn);
    if (!busiLineEn) {
      uni.showToast({ title: '业务线标识异常', icon: 'none' });
      return;
    }

    try {
      uni.showLoading({ title: '获取道路名称中...' });
      const roadRes = await getRoadListByLatLng({

        busiLine: busiLineEn,

        latitude: workOrderForm.lat,
        longitude: workOrderForm.lon
      });
      uni.hideLoading();
      if (Array.isArray(roadRes)) {
        roadNameList.value = roadRes.map((item) => ({
          name: item.roadName || '',
          code: item.roadCode || '',
          id: item.roadId || 0
        }));
      } else {
        roadNameList.value = [{ name: '未查询到道路名称', code: '', id: 0 }];
        uni.showToast({ title: '未查询到该位置的道路信息', icon: 'none' });
      }
    } catch (err) {
      uni.hideLoading();
      console.error('获取道路名称失败：', err);
      uni.showToast({ title: '获取道路名称失败，请重试', icon: 'none' });
      roadNameList.value = [{ name: '获取失败，请重新选择位置', code: '', id: 0 }];
    }
  };
  

  // 通用action-sheet方法

  const handleActionSheetOpen = (type) => {

    if (type === 'roadName' && !workOrderForm.workLocation) {
      uni.showToast({ title: '请先选择工单位置', icon: 'none' })

      return
    }

    const configMap = {

      roadName: {
        title: '请选择道路名称',
        list: roadNameList.value
      },

      pressingType: {
        title: '请选择紧急程度',
        list: pressingTypeList.value

      }

    }

    currentActionSheetData.type = type
    currentActionSheetData.title = configMap[type].title
    currentActionSheetData.list = configMap[type].list
    showActionSheet.value = true
  }

  const handleActionSheetClose = () => {
    showActionSheet.value = false

    currentActionSheetData.type = ''
    currentActionSheetData.list = []
    currentActionSheetData.title = ''
  }

  const handleActionSheetSelect = (e) => {

    const { type } = currentActionSheetData

    switch (type) {
      case 'roadName':
        workOrderForm.roadName = e.name
        workOrderForm.roadId = e.code
        workOrderFormRef.value?.validateField('roadName')
        break

      case 'pressingType':

        workOrderForm.pressingType = e.value

        workOrderForm.pressingTypeName = e.name

        workOrderFormRef.value?.validateField('pressingTypeName')

        break

    }

    showActionSheet.value = false
  }

  const navigateBack = () => {

    uni.reLaunch({

      url: '/pages-sub/problem/work-order-manage/index',

      fail: () => {

        uni.navigateBack({ delta: 2 });
      }
    });
  }

  const clearExpectedFinishDate = () => {

    workOrderForm.expectedFinishDate = ''

  }

  const chooseWorkLocation = () => {
    uni.chooseLocation({
      success: async (res) => {
        workOrderForm.roadName = ''
        workOrderForm.roadId = 0
        roadNameList.value = []

        workOrderForm.workLocation = res.name
        workOrderForm.lat = res.latitude
        workOrderForm.lon = res.longitude

        workOrderFormRef.value?.validateField('workLocation')
        workOrderFormRef.value?.validateField('roadName')

        await getRoadListByBusiLine();

      },
      fail: (err) => {
        console.error('选择位置失败：', err)
        uni.showToast({ title: '选择位置失败：' + err.errMsg, icon: 'none' })
      }
    })
  }

  const expectedFinishDateConfirm = (e) => {

    console.log('选择的完成时间：', e)

    workOrderForm.expectedFinishDate = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')

    show.value = false
  }

  const hideKeyboard = () => {
    uni.hideKeyboard()
  }

  const submitWorkOrder = async () => {
    try {

      await workOrderFormRef.value.validate()

      const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn);
      if (!busiLineEn) {
        uni.showToast({ title: '业务线选择异常，请重新选择', icon: 'none' });
        return;
      }

      const keyInspectionVal = workOrderForm.keyInspection === '是' ? 1 : 0

      const commonSubmitData = {

        roadId: workOrderForm.roadId,
        roadName: workOrderForm.roadName,

        problemsImgs: problemImgs.getSuccessImgUrls(),

        remark: workOrderForm.problemDesc.trim(),
        latLonType: 2,
        lat: workOrderForm.lat,
        lon: workOrderForm.lon,
        lonLatAddress: workOrderForm.workLocation,
        pressingType: workOrderForm.pressingType,
        orderName: workOrderForm.orderName,

        orderCode: workOrderForm.orderCode,

        keyInspection: keyInspectionVal,

        expectedFinishDate: workOrderForm.expectedFinishDate == "" ? "" : new Date(workOrderForm.expectedFinishDate).getTime(),

        sourceId: 1,

        sourceName: workOrderForm.busiLineCn,
        busiLine: busiLineEn

      }

      console.log(commonSubmitData)

      uni.showLoading({ title: '提交中...' })

      let res

      if (isRenew.value) {

        const renewSubmitData = {

          workerDataId: renewOrderData.value.id,
          taskKey: renewOrderData.value.taskKey,
          taskId: renewOrderData.value.taskId,
          operateType: nextStepMap[renewOrderData.value.taskKey]?.operateTypeRenew || '',
          agree: 0,

          reason: workOrderForm.problemDesc.trim(),

          ...commonSubmitData
        }
        res = await universalApproval(renewSubmitData)
      } else {

        res = await workorderCreate(commonSubmitData)
      }

      uni.hideLoading()
      uni.showToast({

        title: isRenew.value ? '重新提交成功' : '工单提交成功',

        icon: 'success',
        duration: 1000
      })

      setTimeout(() => {

        uni.reLaunch({

          url: '/pages-sub/problem/work-order-manage/index'

        })
      }, 1000)
    } catch (error) {

      uni.hideLoading()

      if (!Array.isArray(error)) {

        console.error(isRenew.value ? '工单重新提交失败：' : '工单提交失败：', error)

        uni.showToast({

          title: error.msg || '请求异常',

          icon: 'none',
          duration: 2000
        })

      }
    }

  }

  </script>

  <style lang="scss" scoped>

  .page-container {

    min-height: 100vh;

    padding-bottom: 100rpx;

  }

  .work-order-form-content {
    background: #fff;

  }

  </style>