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="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. 道路名称（下拉框） -->

          <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 } 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();
  
  // ========== 业务线相关状态（核心改造：已整合到workOrderForm中，删除冗余selectedBusiLine） ==========
  // 业务线映射表（键：英文标识，值：中文名称；新增反向映射：中文->英文）
  const busiLineMap = ref({
    'yl': '园林',

    'sz': '市政',
    'wy': '物业',
    'zx': '秩序管理',
    'hj': '环境卫生',
    'yw': '常规运维',
    '园林': 'yl',
    '市政': 'sz',
    '物业': 'wy',
    '秩序管理': 'zx',
    '环境卫生': 'hj',
    '常规运维': 'yw'

  });
  
  // 业务线选项列表（仅保留name字段=中文名称，适配单选框配置）
  const busiLineOptions = ref([]);
  // 格式化业务线选项（兼容1个/2个/3个的情况，生成中文名称列表）
  const formatBusiLineOptions = () => {
    if (!userStore.userInfo?.user?.busiLine) {
      busiLineOptions.value = [];
      return;
    }
    const rawBusiLines = userStore.userInfo.user.busiLine.split(','); // 拆分字符串为数组 ["yl", "sz", "wy"]
    console.log(rawBusiLines)
    // 核心改造：仅生成name字段（值为中文名称），适配单选框:label="item.name"
    busiLineOptions.value = rawBusiLines.map(item => ({
      name: busiLineMap.value[item.trim()] // name=中文名称（园林/市政/物业）
    }));
    console.log(busiLineOptions.value)
  };
  
  // ========== 工具方法：通过中文名称获取对应的英文标识 ==========
  const getBusiLineEnByCn = (cnName) => {
    return busiLineMap.value[cnName] || '';
  };

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

  
  // ========== 公共上传逻辑复用 ==========
  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([])
  

  // ========== 工单表单数据（核心调整：新增busiLineCn字段，绑定业务线） ==========

  const workOrderForm = reactive({

    busiLineCn: '', // 新增：业务线中文名称（用于form绑定、校验、回显）
    roadId: 0,                     // 原有字段
    roadName: '',                  // 原有字段
    workLocation: '',              // 原有字段
    orderName: '',                 // 原有字段
    pressingType: '',              // 原有字段
    pressingTypeName: '',          // 原有字段
    problemDesc: '',               // 原有字段
    lat: 0,                        // 原有字段
    lon: 0,                        // 原有字段
    expectedFinishDate: '',        // 原有字段

  })

  // ========== 表单校验规则（核心调整：新增busiLineCn校验规则） ==========

  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', '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] // 复用上传校验规则

  })

  // ========== 生命周期 ==========

  // 页面加载：读取本地存储的工单数据（适配workOrderForm.busiLineCn）

  onLoad((options) => {

    // 初始化业务线选项
    formatBusiLineOptions();
    // 默认选中第一个业务线（赋值给workOrderForm.busiLineCn，核心调整）
    if (busiLineOptions.value.length > 0) {
      workOrderForm.busiLineCn = busiLineOptions.value[0].name;
    }
  

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

    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)

  })

  // ========== 核心方法：工单数据回显（适配workOrderForm.busiLineCn） ==========

  const echoOrderData = (orderItem) => {

    // 1. 回显业务线：将工单的英文busiLine转为中文名称，赋值给workOrderForm.busiLineCn（核心调整）
    if (orderItem.busiLine) {
      workOrderForm.busiLineCn = busiLineMap.value[orderItem.busiLine]; // 英文->中文（如wy->物业）
    }
  
    // 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(); // 改用封装后的方法，自动携带选中的业务线

    }
  };
  

  // ========== 业务线相关方法（适配workOrderForm.busiLineCn） ==========
  /**
   * 业务线切换事件：清空道路信息 + 重新请求道路列表
   */
  const handleBusiLineChange = () => {
    // 1. 清空已渲染的道路名称和表单字段
    workOrderForm.roadName = '';
    workOrderForm.roadId = 0;
    // 2. 清空道路名称列表数据
    roadNameList.value = [];
    // 3. 若已选择工单位置，重新请求对应业务线的道路列表
    if (workOrderForm.workLocation) {
      getRoadListByBusiLine();
    }
  };
  
  /**
   * 封装：根据当前选中业务线（中文）获取英文标识，再请求道路列表
   */
  const getRoadListByBusiLine = async () => {
    if (!workOrderForm.lat || !workOrderForm.lon) {
      return;
    }
    // 核心：从workOrderForm.busiLineCn获取中文名称，转为英文标识（核心调整）
    const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn);
    if (!busiLineEn) {
      uni.showToast({ title: '业务线标识异常', icon: 'none' });
      return;
    }
  
    try {
      uni.showLoading({ title: '获取道路名称中...' });
      const roadRes = await getRoadListByLatLng({
        busiLine: busiLineEn, // 传递英文标识（yl/sz/wy），接口正常使用
        // companyCode: 'sls', // 传递英文标识（yl/sz/wy），接口正常使用
        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 = ''
    // 清除后触发一次字段校验，确保校验状态更新
    // this.$refs.inspectFormRef.validateField('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()
  }

  /**

   * 提交工单（区分新增/重新提交，接口隔离：从workOrderForm.busiLineCn取值）

   */
  const submitWorkOrder = async () => {
    try {

      // 先执行表单校验（包含业务线校验）

      await workOrderFormRef.value.validate()

      // 核心：从workOrderForm.busiLineCn获取中文名称，转为英文标识（核心调整）
      const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn);
      if (!busiLineEn) {
        uni.showToast({ title: '业务线选择异常，请重新选择', icon: 'none' });
        return;
      }

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

      // 构建公共提交数据
      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 == "" ? "" : new Date(workOrderForm.expectedFinishDate).getTime(),

        sourceId: 1,

        sourceName: workOrderForm.busiLineCn, // 从form字段获取业务线中文名称
        busiLine: busiLineEn // 传递英文标识（yl/sz/wy），接口正常使用

      }

      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: isRenew.value ? error.msg : 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>