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">

          <!-- 业务线单选框：移入form内，作为第一个表单项（核心调整） -->

          <up-form-item label="业务线" prop="busiLine" border-bottom required>
            <up-radio-group v-model="busiLineDisplay" placement="row" @change="handleBusiLineChange">
              <up-radio v-for="item in busiLineOptions" :key="item.value" :label="item.label"
                :name="item.label"></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. 道路名称（下拉框） -->

          <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" 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包裹图标，添加双重@click.stop -->
              <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>
      </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, computed } 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'

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

  // ========== 状态管理 ==========
  const userStore = useUserStore();

  // 业务线选项，直接从pinia dictList拿
  const busiLineOptions = computed(() => {
    return userStore.dictList || []
  })

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

  // 业务线单选框展示用（存中文label）
  const busiLineDisplay = ref('')

  // ========== 公共上传逻辑复用 ==========
  const problemImgs = useUploadImgs({
    maxCount: 3,
    uploadText: '选择问题照片',
    sizeType: ['compressed'],
    formRef: workOrderFormRef,
    fieldName: 'problemImgs'
  })

  // 无需再手动初始化普通数组，直接使用 ref 响应式数据
  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 orderNameList = ref([])
  const pressingTypeList = ref([])

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

  const workOrderForm = reactive({

    busiLine: '', // 业务线value，yl / sz / wy

    roadId: 0,                     // 原有字段
    roadName: '',                  // 原有字段
    workLocation: '',              // 原有字段
    orderName: '',                 // 原有字段
    pressingType: '',              // 原有字段
    pressingTypeName: '',          // 原有字段
    problemDesc: '',               // 原有字段
    lat: 0,                        // 原有字段
    lon: 0,                        // 原有字段
    expectedFinishDate: '',        // 原有字段

  })

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

  const workOrderFormRules = reactive({

    busiLine: [

      { 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', '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) => {

    // 默认选中第一个业务线

    if (busiLineOptions.value.length > 0) {

      // ✅ 业务线：表单存value，单选展示中文label
      workOrderForm.busiLine = busiLineOptions.value[0].value
      busiLineDisplay.value = busiLineOptions.value[0].label

    }

    // 判断是否为重新提交状态

    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(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) => {

    // 业务线回显，后端给的是value，需要自动找到中文赋值给单选框

    if (orderItem.busiLine) {

      workOrderForm.busiLine = orderItem.busiLine;
      const findItem = busiLineOptions.value.find(item => item.value === orderItem.busiLine)
      if (findItem) {
        busiLineDisplay.value = findItem.label
      }

    }

    // 2. 原有基础表单字段回显

    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(orderItem.expectedFinishDate, 'yyyy-mm-dd hh:MM:ss') : '';

    // 3. 上传图片回显（兼容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.value = imgList;

      problemImgs.rawImgList.value = imgList;
    }

    // 4. 自动获取道路列表

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

      getRoadListByBusiLine();

    }
  };

  // ========== 业务线相关方法 ==========

  /**
   * 业务线切换事件：清空道路信息 + 重新请求道路列表

   * selectedLabel 是选中的中文label

   */

  const handleBusiLineChange = (selectedLabel) => {
    // 根据中文label反向找到对应的value存入表单
    const selectedItem = busiLineOptions.value.find(item => item.label === selectedLabel)
    if (selectedItem) {
      workOrderForm.busiLine = selectedItem.value
    }

    // 1. 清空已渲染的道路名称和表单字段
    workOrderForm.roadName = '';
    workOrderForm.roadId = 0;
    // 2. 清空道路名称列表数据
    roadNameList.value = [];
    // 3. 若已选择工单位置，重新请求对应业务线的道路列表
    if (workOrderForm.workLocation) {
      getRoadListByBusiLine();
    }
  };

  /**

   * 封装：根据当前选中业务线，请求道路列表

   */
  const getRoadListByBusiLine = async () => {

    if (!workOrderForm.lat || !workOrderForm.lon || !workOrderForm.busiLine) {

      return;
    }

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

        busiLine: workOrderForm.busiLine,

        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 }];
    }
  };

  // ========== 通用弹窗方法 ==========

  /**

   * 打开通用下拉弹窗

   */
  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.reLaunch({
      url: '/pages-sub/problem/work-order-manage/index', // 列表页路径
      fail: () => {
        // 兜底：若 reLaunch 失败，返回2层（跳过提交页）
        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()

      if (!workOrderForm.busiLine) {

        uni.showToast({ title: '业务线选择异常，请重新选择', icon: 'none' });
        return;
      }

      console.log('完成时间：' + workOrderForm.expectedFinishDate)

      // 构建公共提交数据
      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,

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

        sourceId: 1,

        sourceName: busiLineOptions.value.find(item => item.value === workOrderForm.busiLine)?.label || '',
        busiLine: workOrderForm.busiLine

      }

      console.log('工单数据')

      console.log('完成时间：' + workOrderForm.expectedFinishDate)

      console.log(commonSubmitData)

      // 显示加载中
      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: workOrderForm.problemDesc.trim(),

          ...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: 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>