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="190rpx"

        >

          <!-- 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. 道路名称（下拉框） -->
          <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="handleActionSheetOpen('orderName'); 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.validateField('problemDesc')"

            ></up-textarea>
          </up-form-item>

  
          <!-- 问题照片（核心修复：绑定纯数组） -->
          <up-form-item label="问题照片" prop="problemImgs" required>
            <up-upload
                :file-list="problemImgs.imgList"
                @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>
              <up-icon name="arrow-right" size="16"></up-icon>
            </template>
          </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-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, watch } from 'vue'

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

  import { useUploadImgs } from '@/common/utils/useUploadImgs' // 引入改造后的上传逻辑
  import { getRoadListByLatLng } 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'

  // ========== 表单Ref ==========
  const workOrderFormRef = ref(null)

  
  // ========== 公共上传逻辑复用 ==========
  const problemImgs = useUploadImgs({
    maxCount: 3,
    uploadText: '选择问题照片',
    sizeType: ['compressed'],
    formRef: workOrderFormRef,
    fieldName: 'problemImgs'
  })
  
  // 核心修复：监听响应式数组变化，同步更新纯数组（解决u-upload不刷新问题）
  watch(() => problemImgs.rawImgList.value, (newVal) => {
    problemImgs.imgList = newVal
  }, { deep: true })
  

  // ========== 页面状态 ==========

  // 通用弹窗控制

  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 orderNameList = ref([])
  const pressingTypeList = ref([])
  
  // ========== 工单表单数据 ==========

  const workOrderForm = reactive({

    roadId: 0,                     // 道路ID
    roadName: '',                  // 道路名称
    workLocation: '',              // 工单位置
    orderName: '',                 // 工单名称
    pressingType: '',               // 紧急程度值（提交接口用）
    pressingTypeName: '',          // 紧急程度名称（显示用）
    problemDesc: '',               // 情况描述
    lat: 0,                        // 纬度
    lon: 0,                        // 经度

    expectedFinishDate: '',                // 希望完成时间

  })

  
  // ========== 表单校验规则 ==========

  const workOrderFormRules = reactive({

    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', 'blur'] }
    ],
    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) => {
    // 判断是否为重新提交状态
    console.log('434')
    console.log(options)
    if (options.isRenew ==1 && options.tempKey) {
      isRenew.value = true;
      const tempKey = options.tempKey;
  
      // 1. 从本地同步存储中读取完整工单数据
      try {
        const orderData = uni.getStorageSync(tempKey);
        if (orderData && typeof orderData === 'object') {
          renewOrderData.value = orderData;
  
          console.log('123213')
          console.log(orderData)
          // 2. 回显工单数据到表单
          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 {
        // 3. 关键：用完即删，避免本地冗余存储和数据泄露
        uni.removeStorageSync(tempKey);
      }
    }
  });
  

  onReady(() => {
    // 设置表单校验规则
    if (workOrderFormRef.value) {
      workOrderFormRef.value.setRules(workOrderFormRules)
    }

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

  })

  onShow(() => {

    console.log(uni.$dict.getDictLabel('ai_image_status', 20))
    console.log(uni.$dict.getDictSimpleList('work_name'))
  
    // 初始化工单名称列表
    orderNameList.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('work_name'))
    console.log('工单名称列表：', orderNameList.value)
  
    // 初始化紧急程度列表
    pressingTypeList.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('workorder_pressing_type'))
    console.log('紧急程度列表：', pressingTypeList.value)

  })

  // ========== 核心方法：工单数据回显 ==========
  const echoOrderData = (orderItem) => {
    // 1. 基础表单字段回显（适配工单字段与表单字段映射）
    workOrderForm.roadId = orderItem.roadId || 0;
    workOrderForm.roadName = orderItem.roadName || '';
    workOrderForm.workLocation = orderItem.lonLatAddress || orderItem.roadName || '';
    workOrderForm.orderName = orderItem.orderName || '';
    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(new Date(), 'yyyy-mm-dd hh:MM:ss');

  
    // 2. 上传图片回显（兼容useUploadImgs格式）
    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 = imgList;
      problemImgs.rawImgList.value = imgList;
    }
  
    // 3. 自动获取道路列表（保证下拉框正常使用）
    if (orderItem.lat && orderItem.lon) {
      getRoadListByLatLng({
        companyCode: 'sls',
        latitude: orderItem.lat,
        longitude: orderItem.lon
      }).then((roadRes) => {
        if (Array.isArray(roadRes)) {
          roadNameList.value = roadRes.map((item) => ({
            name: item.roadName || '',
            code: item.roadCode || '',
            id: item.roadId || 0
          }));
        }
      }).catch(err => console.error('回显道路列表失败：', err));
    }
  };
  

  // ========== 方法定义 ==========
  /**

   * 打开通用下拉弹窗

   */
  const handleActionSheetOpen = (type) => {

    // 道路名称需先校验工单位置是否选择
    if (type === 'roadName' && !workOrderForm.workLocation) {
      uni.showToast({ title: '请先选择工单位置', icon: 'none' })

      return
    }

  
    // 配置当前弹窗参数

    const configMap = {

      roadName: {
        title: '请选择道路名称',
        list: roadNameList.value
      },
      orderName: {
        title: '请选择工单名称',
        list: orderNameList.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 'orderName':
        workOrderForm.orderName = e.name
        workOrderFormRef.value?.validateField('orderName')
        break
      case 'pressingType':
        console.log(e)

        workOrderForm.pressingType = e.value

        workOrderForm.pressingTypeName = e.name

        workOrderFormRef.value?.validateField('pressingTypeName')

        break

    }

    // 关闭弹窗

    showActionSheet.value = false
  }

  
  /**
   * 返回上一页
   */
  const navigateBack = () => {
    uni.navigateBack()
  }
  
  /**
   * 选择工单位置
   */
  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')
  
        try {
          uni.showLoading({ title: '获取道路名称中...' })
          const roadRes = await getRoadListByLatLng({
            companyCode: 'sls',
            latitude: res.latitude,
            longitude: res.longitude
          })
          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 }]
        }
      },
      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 commonSubmitData = {

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

        problemsImgs: problemImgs.getSuccessImgUrls(), // 复用上传逻辑的URL获取方法

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

        expectedFinishDate: workOrderForm.expectedFinishDate,

        sourceId: 1,
        sourceName: '园林',
        busiLine: 'yl'

      }

  
      // 显示加载中
      uni.showLoading({ title: '提交中...' })

      let res
  
      // 核心：根据状态区分接口调用
      if (isRenew.value) {
        // 重新提交：调用 universalApproval 接口
        const renewSubmitData = {
          // 原有工单必要参数
          workerDataId: renewOrderData.value.id,
          taskKey: renewOrderData.value.taskKey,
          taskId: renewOrderData.value.taskId,
          operateType: nextStepMap[renewOrderData.value.taskKey]?.operateTypeRenew || '',
          agree: 0,
          reason: '重新提交工单',
          // 新编辑的工单数据
          ...commonSubmitData
        }
        res = await universalApproval(renewSubmitData)
      } else {
        // 新增工单：调用原有 workorderCreate 接口（不影响原有功能）
        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: isRenew.value ? '重新提交失败，请重试' : '提交失败，请重试',

          icon: 'none',
          duration: 2000
        })

      }
    }

  }

  </script>

  <style lang="scss" scoped>
  // 全局页面样式

  .page-container {

    min-height: 100vh;
    padding-bottom: 100rpx; // 给底部按钮留空间

  }
  

  // 工单表单内容容器

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

  }
  

  </style>