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

        >

          <!-- 1. 工单编号（只读展示，从缓存获取） -->

          <up-form-item
              label="工单编号"
              border-bottom
          >
            <up-input
                v-model="workOrderForm.orderNo"
                border="none"
                readonly
                placeholder="暂无工单编号"
            ></up-input>
          </up-form-item>
  

          <!-- 2. 作业类型（决定加载哪套动态字段配置：数据中心/业务类型字段配置 配置归属=工单） -->
          <up-form-item
              label="作业类型"
              prop="workTypeName"
              required
              border-bottom
              @click="openWorkTypeSheet(); hideKeyboard()"
          >
            <up-input
                v-model="workOrderForm.workTypeName"
                disabled
                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="coProcessorName"
              border-bottom
              @click="handleActionSheetOpen('coProcessor'); hideKeyboard()"
          >
            <up-input

                v-model="workOrderForm.coProcessorNameStr"

                disabled
                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="reason"
              required
          >
            <up-textarea

                placeholder="请输入处理情况描述（必填，最多200字）"

                v-model.trim="workOrderForm.reason"
                count
                maxlength="200"

                rows="5"

                @blur="() => workOrderFormRef.validateField('reason')"
            ></up-textarea>
          </up-form-item>
  

          <!-- 4. 动态字段：按「业务类型(busiLine) + 作业类型」加载数据中心配置的工单填报项 -->
          <view class="dynamic-field-block" v-if="workOrderForm.workTypeId">
            <view class="dynamic-field-title">作业填报</view>
            <work-field-form
                ref="workFieldFormRef"
                :business-type="workOrderForm.businessType"
                :biz-type="1"
                :work-type-id="workOrderForm.workTypeId"
                @loaded="onDynamicFieldsLoaded"
            ></work-field-form>
            <view class="dynamic-field-empty" v-if="dynamicFieldCount === 0">
              <text>该作业类型暂无需填报项</text>
            </view>
          </view>
  

          <!-- Tabs标签栏（图片切换：开始、进行中、结束、人员、材料）- 改造后 -->
          <view class="tabs-wrap " style="margin-top: 30rpx;">
            <up-tabs
                v-model="activeTab"
                :list="tabList"
                line-width="40rpx"
                active-color="#1989fa"
                inactive-color="#666666"
                @change = "imgTabChange"

            >
              <!-- 使用content插槽自定义每个tab的内容，添加红色*号 -->
              <template #content="{ item, index }">
                <view class="tab-item-content">
                  <!-- 给索引0（开始）和索引2（结束）添加红色*号 -->
                  <text v-if="index === 0 || index === 2" class="required-star">*</text>
                  <text class="tab-text">{{ item.name }}</text>
                </view>
              </template>
            </up-tabs>
            <view class="tab-content" style="padding-top: 20rpx; background: #fff; padding-bottom: 20rpx;">
              <!-- 开始阶段图片上传 -->
              <view v-if="activeTab == 0">
                <up-form-item  prop="startImgs">
                  <up-upload

                      :file-list="startImgs.rawImgList.value|| []"

                      @after-read="startImgs.uploadImgs"
                      @delete="startImgs.deleteImg"
                      multiple
                      :max-count="startImgs.uploadConfig.maxCount"
                      :upload-text="startImgs.uploadConfig.uploadText"
                      :size-type="startImgs.uploadConfig.sizeType"
                  ></up-upload>
                </up-form-item>
              </view>
              <!-- 进行中阶段图片上传 -->
              <view v-if="activeTab == 1">
                <up-form-item  prop="processingImgs">
                  <up-upload

                      :file-list="processingImgs.rawImgList.value|| []"

                      @after-read="processingImgs.uploadImgs"
                      @delete="processingImgs.deleteImg"
                      multiple
                      :max-count="processingImgs.uploadConfig.maxCount"
                      :upload-text="processingImgs.uploadConfig.uploadText"
                      :size-type="processingImgs.uploadConfig.sizeType"
                  ></up-upload>
                </up-form-item>
              </view>
              <!-- 结束阶段图片上传 -->
              <view v-if="activeTab == 2">
                <up-form-item  prop="endImgs">
                  <up-upload

                      :file-list="endImgs.rawImgList.value|| []"

                      @after-read="endImgs.uploadImgs"
                      @delete="endImgs.deleteImg"
                      multiple
                      :max-count="endImgs.uploadConfig.maxCount"
                      :upload-text="endImgs.uploadConfig.uploadText"
                      :size-type="endImgs.uploadConfig.sizeType"
                  ></up-upload>
                </up-form-item>
              </view>
              <!-- 人员配置图片上传 -->
              <view v-if="activeTab == 3">
                <up-form-item  prop="personImgs">
                  <up-upload

                      :file-list="personImgs.rawImgList.value|| []"

                      @after-read="personImgs.uploadImgs"
                      @delete="personImgs.deleteImg"
                      multiple
                      :max-count="personImgs.uploadConfig.maxCount"
                      :upload-text="personImgs.uploadConfig.uploadText"
                      :size-type="personImgs.uploadConfig.sizeType"
                  ></up-upload>
                </up-form-item>
              </view>
              <!-- 材料使用图片上传 -->
              <view v-if="activeTab == 4">
                <up-form-item  prop="materialImgs">
                  <up-upload

                      :file-list="materialImgs.rawImgList.value|| []"

                      @after-read="materialImgs.uploadImgs"
                      @delete="materialImgs.deleteImg"
                      multiple
                      :max-count="materialImgs.uploadConfig.maxCount"
                      :upload-text="materialImgs.uploadConfig.uploadText"
                      :size-type="materialImgs.uploadConfig.sizeType"
                  ></up-upload>
                </up-form-item>
              </view>

            </view>

          </view>

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

  
      <!-- 作业类型选择弹窗（字典 maintain_type） -->
      <up-action-sheet
          :show="showWorkTypeSheet"
          :actions="workTypeOptions"
          title="请选择作业类型"
          cancel-text="取消"
          @close="showWorkTypeSheet = false"
          @select="onWorkTypeSelect"
      ></up-action-sheet>

    </view>
  </template>
  
  <script setup>

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

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

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

  import { workRecordSubmit } from '@/api/common'

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

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

  const userStore = useUserStore();

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

  // 作业填报动态表单Ref（components/work-field-form）
  const workFieldFormRef = ref(null)
  
  // 作业类型选择弹窗
  const showWorkTypeSheet = ref(false)
  // 作业类型选项：字典 maintain_type（打开弹窗时取，避免字典异步加载导致首次为空）
  const workTypeOptions = ref([])
  
  // 当前作业类型下的动态字段数量（0 时给「无需填报」提示）
  const dynamicFieldCount = ref(0)
  
  // 动态字段提交幂等流水号：同一页面生命周期内保持不变，网络重试只落一条记录
  let workRecordClientSeq = ''
  

  // 页面状态

  const showActionSheet = ref(false)
  const currentActionSheetData = reactive({
    type: '',
    list: [],

    title: '',

  })

  // Tabs配置（图片切换用）
  const activeTab = ref(0)

  const tabList = ref([
    { name: '开始' },
    { name: '进行中' },
    { name: '结束' },
    { name: '人员' },
    { name: '材料' }
  ])
  

  // 共同处理人列表
  const coProcessorList = ref([])

  // 工单表单数据（修改：新增coProcessorName数组，coProcessorNameStr用于页面展示）

  const workOrderForm = reactive({

    busiLine:'',

    businessType:'',              // 业务类型（由 busiLine 首段得出，用于加载动态字段配置）
    workTypeId:'',                // 作业类型ID（字典 maintain_type，用于加载动态字段配置）
    workTypeName:'',              // 作业类型名称（页面展示）

    workerDataId:'',
    taskId:'', // 任务id

    orderNo: '',                  // 工单编号

    coProcessorId: [],            // 共同处理人ID数组（多选，改为数组格式）
    coProcessorName: [],          // 共同处理人名称数组（多选，数组格式，用于提交）
    coProcessorNameStr: '',       // 共同处理人名称字符串（用于页面输入框展示）

    reason: '',                   // 处理情况描述
  })
  
  // ========== 图片上传配置（5个Tab分别配置，均限制3张，与参考示例一致） ==========
  // 开始阶段图片
  const startImgs = useUploadImgs({
    maxCount: 3,

    uploadText: '选择开始照片',

    sizeType: ['compressed'],
    formRef: workOrderFormRef,
    fieldName: 'startImgs'
  })
  // 进行中阶段图片
  const processingImgs = useUploadImgs({
    maxCount: 3,

    uploadText: '选择进行中照片',

    sizeType: ['compressed'],
    formRef: workOrderFormRef,
    fieldName: 'processingImgs'
  })
  // 结束阶段图片
  const endImgs = useUploadImgs({
    maxCount: 3,

    uploadText: '选择结束照片',

    sizeType: ['compressed'],
    formRef: workOrderFormRef,
    fieldName: 'endImgs'

  })

  // 人员配置图片
  const personImgs = useUploadImgs({
    maxCount: 3,

    uploadText: '选择人员照片',

    sizeType: ['compressed'],
    formRef: workOrderFormRef,
    fieldName: 'personImgs'
  })
  // 材料使用图片
  const materialImgs = useUploadImgs({
    maxCount: 3,

    uploadText: '选择材料照片',

    sizeType: ['compressed'],
    formRef: workOrderFormRef,
    fieldName: 'materialImgs'
  })
  

  // // ========== 核心修复：监听每个上传实例的响应式数组变化，解决u-upload不刷新问题 ==========
  // watch(() => startImgs.rawImgList.value, (newVal) => {
  //   startImgs.imgList = newVal
  // }, { deep: true })
  //
  // watch(() => processingImgs.rawImgList.value, (newVal) => {
  //   processingImgs.imgList = newVal
  // }, { deep: true })
  //
  // watch(() => endImgs.rawImgList.value, (newVal) => {
  //   endImgs.imgList = newVal
  // }, { deep: true })
  //
  // watch(() => personImgs.rawImgList.value, (newVal) => {
  //   personImgs.imgList = newVal
  // }, { deep: true })
  //
  // watch(() => materialImgs.rawImgList.value, (newVal) => {
  //   materialImgs.imgList = newVal
  // }, { deep: true })

  // 表单校验规则（新增5个图片字段校验，复用上传校验规则）

  const workOrderFormRules = reactive({

    orderNo: [

      { type: 'string', trigger: ['change'] }
    ],

  
    reason: [
      { type: 'string', required: true, message: '请输入处理情况描述', trigger: ['change', 'blur'] },
      { type: 'string', max: 200, message: '处理情况描述最多200字', trigger: ['change', 'blur'] }

    ],
    workTypeName: [
      { type: 'string', required: true, message: '请选择作业类型', trigger: ['change'] }

    ]

  })
  

  // 生命周期 - 从本地缓存获取完整工单数据

  onLoad((options) => {

    try {
      // 1. 校验tempKey是否缺失
      if (!options || !options.tempKey) {
        uni.showToast({
          title: '缺失工单缓存Key，无法加载数据',
          icon: 'none',
          duration: 3000
        });
        console.error('onLoad异常：options或tempKey缺失');
        return;
      }

      const { tempKey } = options;
      let orderItem = {};
      // 2. 读取缓存并校验缓存数据是否有效
      orderItem = uni.getStorageSync(tempKey) || {};
      if (JSON.stringify(orderItem) === '{}') {
        uni.showToast({
          title: '工单缓存数据为空，请重新进入',
          icon: 'none',
          duration: 3000
        });
        console.error('onLoad异常：工单缓存数据为空');

        return;
      }

      // 可选：读取后移除缓存，避免冗余数据
      uni.removeStorageSync(tempKey);

      // 3. 填充基础表单数据（存在则赋值，不存在则提示）
      if (!orderItem.id) {
        uni.showToast({
          title: '缺失工单ID，数据异常',
          icon: 'none',
          duration: 2000
        });
        console.warn('工单数据缺失：id');
      }
      if (!orderItem.taskId) {
        uni.showToast({
          title: '缺失任务ID，提交可能失败',
          icon: 'none',
          duration: 2000
        });
        console.warn('工单数据缺失：taskId');
      }
      if (!orderItem.orderNo) {
        uni.showToast({
          title: '缺失工单编号，数据异常',
          icon: 'none',
          duration: 2000
        });
        console.warn('工单数据缺失：orderNo');
      }
  
      workOrderForm.workerDataId = orderItem.id || '';
      workOrderForm.taskId = orderItem.taskId || '';
      workOrderForm.orderNo = orderItem.orderNo || '';
      workOrderForm.reason = orderItem.handleResult || ''; // 处理情况回显

      workOrderForm.busiLine = orderItem.busiLine

      // 业务线可能是逗号分隔多值（如 "yl,hj"），字段配置按单值定位，取首段
      workOrderForm.businessType = String(orderItem.busiLine || '').split(',')[0].trim()
      // 来源数据若已带作业类型则回显（工单主表当前无该字段，通常为空，由用户手选）
      if (orderItem.workTypeId) {
        workOrderForm.workTypeId = orderItem.workTypeId
        workOrderForm.workTypeName = uni.$dict.getDictLabel('maintain_type', orderItem.workTypeId) || ''
      }

      // 共同处理人（如有数据则回显，转换为数组格式）

      if (orderItem.coHandlers && orderItem.coHandlersName) {

        // 处理ID：如果是字符串（逗号分隔），转为数组；本身是数组则直接赋值
        workOrderForm.coProcessorId = Array.isArray(orderItem.coHandlers)
            ? orderItem.coHandlers
            : (orderItem.coHandlers.split(',').filter(Boolean) || []);
        // 处理名称：同理，转为数组格式（用于提交），并拼接为字符串（用于展示）
        workOrderForm.coProcessorName = Array.isArray(orderItem.coHandlersName)
            ? orderItem.coHandlersName
            : (orderItem.coHandlersName.split(',').filter(Boolean) || []);
        // 拼接名称为字符串，用于输入框展示
        workOrderForm.coProcessorNameStr = workOrderForm.coProcessorName.join('，');

      } else {
        console.warn('工单数据提示：无共同处理人信息');
      }
  
      // 4. 回显各类图片：使用 useUploadImgs 内置 setImgList 方法（自动添加 status: 'success'）
      // 校验图片字段是否存在，不存在则赋值空数组，避免报错
      const startImgsArr = orderItem.startImgs || [];
      const processingImgsArr = orderItem.processingImgs || [];
      const endImgsArr = orderItem.endImgs || [];
      const personImgsArr = orderItem.personImgs || [];
      const materialImgsArr = orderItem.materialImgs || [];
  
      // 图片回显前校验数组有效性
      if (!Array.isArray(startImgsArr)) {
        uni.showToast({
          title: '开始图片数据格式异常',
          icon: 'none',
          duration: 2000
        });
        console.error('开始图片异常：非数组格式');
      }
      if (!Array.isArray(endImgsArr)) {
        uni.showToast({
          title: '结束图片数据格式异常',
          icon: 'none',
          duration: 2000
        });
        console.error('结束图片异常：非数组格式');
      }
  
      startImgs.setImgList(startImgsArr);
      processingImgs.setImgList(processingImgsArr);
      endImgs.setImgList(endImgsArr);
      personImgs.setImgList(personImgsArr);
      materialImgs.setImgList(materialImgsArr);
  
      // 5. 校验必填图片（开始/结束）是否为空，提前提示
      if (startImgsArr.length === 0) {
        uni.showToast({
          title: '开始图片为空，请补充上传',
          icon: 'none',
          duration: 2000
        });
        console.warn('工单提示：开始图片数组为空');
      }
      if (endImgsArr.length === 0) {
        uni.showToast({
          title: '结束图片为空，请补充上传',
          icon: 'none',
          duration: 2000
        });
        console.warn('工单提示：结束图片数组为空');
      }
  
      console.log('工单数据初始化完成：', workOrderForm);
    } catch (error) {
      uni.showToast({
        title: '工单数据加载失败，请重试',
        icon: 'none',
        duration: 3000
      });
      console.error('获取工单缓存数据失败：', error);

    }

  })
  

  // 生命周期 - 初始化表单规则

  onReady(() => {

    // 校验表单实例是否存在
    if (!workOrderFormRef.value) {
      uni.showToast({
        title: '表单实例初始化失败',
        icon: 'none',
        duration: 2000
      });
      console.error('onReady异常：workOrderFormRef.value 为空');
      return;

    }

    workOrderFormRef.value.setRules(workOrderFormRules)

  })
  

  // 生命周期 - 加载共同处理人列表

  onShow(async () => {

    await loadCoProcessorList()
  })
  

  // 加载共同处理人列表

  const loadCoProcessorList = async () => {
    try {
      uni.showLoading({ title: '获取处理人列表中...' })

      const queryData = {

        // roleCode: 'yl_worker',
        busiLine: workOrderForm.busiLine,

        pageNo: 1,
        pageSize: 100
      }
      const res = await getYlWorkersPage(queryData)

  
      // 校验接口返回数据是否有效
      if (!res || !res.list) {
        uni.showToast({
          title: '获取处理人列表失败（无数据）',
          icon: 'none',
          duration: 2000
        });
        console.error('loadCoProcessorList异常：接口返回无有效数据');
        coProcessorList.value = [];
        uni.hideLoading();
        return;
      }
  

      uni.hideLoading()
  

      if (res.list && res.list.length > 0) {

        coProcessorList.value = res.list.map(item => {
          // 校验列表项是否含必填字段
          if (!item.id || !item.nickname) {
            console.warn('处理人列表项异常：缺失id或nickname', item);
            return null;
          }
          return {
            name: item.nickname,
            value: item.id,
            id: item.id
          }
        }).filter(Boolean); // 过滤null项

      } else {
        coProcessorList.value = []

        // uni.showToast({
        //   title: '暂无共同处理人数据',
        //   icon: 'none',
        //   duration: 1000
        // });

        console.warn('loadCoProcessorList提示：处理人列表为空');

      }
    } catch (err) {
      uni.hideLoading()

      uni.showToast({
        title: '获取处理人列表失败，请重试',
        icon: 'none',
        duration: 3000
      });

      console.error('获取共同处理人列表失败：', err)

      coProcessorList.value = []
    }
  }
  

  // 打开通用下拉弹窗（仅共同处理人）

  const handleActionSheetOpen = (type) => {

    // 校验弹窗类型是否为支持的类型
    if (type !== 'coProcessor') {
      uni.showToast({
        title: '不支持该弹窗类型',
        icon: 'none',
        duration: 2000
      });
      console.error('handleActionSheetOpen异常：不支持的弹窗类型', type);
      return;
    }
  
    // 共同处理人列表为空时，提示并返回

    if (type === 'coProcessor' && coProcessorList.value.length === 0) {

      uni.showToast({
        title: '暂无共同处理人可选',
        icon: 'none',
        duration: 2000
      });
      console.warn('handleActionSheetOpen提示：共同处理人列表为空');

      return
    }
  

    // 弹窗配置映射（仅保留共同处理人）

    const configMap = {
      coProcessor: {
        title: '请选择共同处理人',

        list: coProcessorList.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 = ''
  }
  

  // 下拉弹窗选择事件（修改：支持多选，存储名称和ID为数组）

  const handleActionSheetSelect = (e) => {

    // 校验事件参数是否有效
    if (!e || !e.name || !e.id) {
      uni.showToast({
        title: '选择处理人失败（参数异常）',
        icon: 'none',
        duration: 2000
      });
      console.error('handleActionSheetSelect异常：e参数缺失name或id', e);
      showActionSheet.value = false;
      return;
    }
  

    const { type } = currentActionSheetData

    // 多选场景（仅共同处理人，存储数组格式）

    if (type === 'coProcessor') {

      // 若已选中该处理人，移除（实现切换选择）；未选中则添加
      const idIndex = workOrderForm.coProcessorId.findIndex(id => id === e.id);
      if (idIndex > -1) {
        // 移除已选中的ID和名称
        workOrderForm.coProcessorId.splice(idIndex, 1);
        workOrderForm.coProcessorName.splice(idIndex, 1);
      } else {
        // 添加新选中的ID和名称（数组格式）
        workOrderForm.coProcessorId.push(e.id);
        workOrderForm.coProcessorName.push(e.name);
      }
  
      // 拼接名称数组为字符串，用于输入框展示
      workOrderForm.coProcessorNameStr = workOrderForm.coProcessorName.join('，');
  

      // 校验表单实例是否存在，再执行字段校验
      if (workOrderFormRef.value) {
        workOrderFormRef.value?.validateField('coProcessorName')
      } else {
        console.warn('handleActionSheetSelect提示：表单实例不存在，跳过字段校验');
      }

    }
    showActionSheet.value = false
  }
  

  // 图片切换选择
  const imgTabChange = (item)=> {

    // 校验切换参数是否有效
    if (!item || item.index === undefined || item.index === null) {
      uni.showToast({
        title: '图片标签切换失败（参数异常）',
        icon: 'none',
        duration: 2000
      });
      console.error('imgTabChange异常：item参数缺失index', item);
      return;
    }

    activeTab.value = item.index

  }
  

  // 隐藏键盘

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

  // 打开作业类型选择弹窗
  const openWorkTypeSheet = () => {
    // up-action-sheet 用 name 展示，value 作为回传值
    workTypeOptions.value = uni.$dict.getDictSimpleList('maintain_type')
      .map(item => ({ name: item.label, value: item.value }))
    if (workTypeOptions.value.length === 0) {
      uni.showToast({
        title: '暂无作业类型字典数据',
        icon: 'none',
        duration: 2000
      })
      return
    }
    showWorkTypeSheet.value = true
  }
  
  // 选择作业类型：驱动动态字段按「业务类型 + 作业类型」重新加载
  const onWorkTypeSelect = (e) => {
    showWorkTypeSheet.value = false
    if (!e || e.value === undefined || e.value === null || e.value === '') {
      return
    }
    workOrderForm.workTypeId = e.value
    workOrderForm.workTypeName = e.name
    dynamicFieldCount.value = 0
    if (workOrderFormRef.value) {
      workOrderFormRef.value.validateField('workTypeName')
    }
  }
  
  // 动态字段加载完成（count=0 时页面提示「暂无需填报项」）
  const onDynamicFieldsLoaded = (count) => {
    dynamicFieldCount.value = count || 0
  }
  
  // 动态字段提交幂等流水号（后端按 userId+clientSeq 去重）
  const genClientSeq = () => `${Date.now()}-${Math.random().toString(16).slice(2, 10)}`
  

  // 提交工单（修改：将coProcessorName数组一并传入提交参数）

  const submitWorkOrder = async () => {
    try {

      // ========== 前置校验：表单实例是否存在 ==========
      if (!workOrderFormRef.value) {
        uni.showToast({
          title: '表单实例异常，无法提交',
          icon: 'none',
          duration: 2000
        });
        console.error('submitWorkOrder异常：workOrderFormRef.value 为空');
        return;
      }
  
      // ========== 开始/结束图片必填校验 ==========

      const startImgUrls = startImgs.getSuccessImgUrls(); // 开始阶段图片URL数组
      const endImgUrls = endImgs.getSuccessImgUrls();     // 结束阶段图片URL数组
  

      // 打印日志验证（可选，用于排查）
      console.log('开始图片有效URL：', startImgUrls);
      console.log('结束图片有效URL：', endImgUrls);
  

      // 判断开始图片是否为空

      if (!Array.isArray(startImgUrls) || startImgUrls.length === 0) {

        uni.showToast({
          title: '请至少上传1张开始阶段图片',
          icon: 'none',
          duration: 2000
        });

        console.warn('submitWorkOrder校验失败：开始图片为空');

        return; // 终止提交流程
      }
  
      // 判断结束图片是否为空

      if (!Array.isArray(endImgUrls) || endImgUrls.length === 0) {

        uni.showToast({
          title: '请至少上传1张结束阶段图片',
          icon: 'none',
          duration: 2000
        });

        console.warn('submitWorkOrder校验失败：结束图片为空');

        return; // 终止提交流程
      }

      // ========== 处理情况必填校验（兜底，防止表单校验失效） ==========
      if (!workOrderForm.reason || workOrderForm.reason.trim().length === 0) {
        uni.showToast({
          title: '请输入处理情况描述',
          icon: 'none',
          duration: 2000
        });
        console.warn('submitWorkOrder校验失败：处理情况为空');
        return;
      }
      if (workOrderForm.reason.trim().length > 200) {
        uni.showToast({
          title: '处理情况描述不能超过200字',
          icon: 'none',
          duration: 2000
        });
        console.warn('submitWorkOrder校验失败：处理情况超过200字');
        return;
      }
  
      // ========== 原有表单校验 ==========

      await workOrderFormRef.value.validate()
  

      // ========== 作业类型 + 动态字段校验 ==========
      if (!workOrderForm.workTypeId) {
        uni.showToast({
          title: '请选择作业类型',
          icon: 'none',
          duration: 2000
        });
        console.warn('submitWorkOrder校验失败：作业类型为空');
        return;
      }
      let dynamicValues = []
      if (workFieldFormRef.value) {
        // 校验失败时 reject 字段数组（uview-plus 已提示），交给外层 catch 忽略
        await workFieldFormRef.value.validate()
        dynamicValues = workFieldFormRef.value.getValues()
      }
  

      // ========== 校验核心提交参数 ==========
      if (!workOrderForm.taskId) {
        uni.showToast({
          title: '缺失任务ID，无法提交',
          icon: 'none',
          duration: 2000
        });
        console.error('submitWorkOrder异常：taskId 为空');
        return;
      }
      if (!workOrderForm.workerDataId) {
        uni.showToast({
          title: '缺失工单ID，无法提交',
          icon: 'none',
          duration: 2000
        });
        console.error('submitWorkOrder异常：workerDataId 为空');
        return;
      }
  

      // 构造所有图片URL（原有代码不变）

      const allImgs = {

        startImgs: startImgUrls,
        processingImgs: processingImgs.getSuccessImgUrls() || [],
        endImgs: endImgUrls,
        personImgs: personImgs.getSuccessImgUrls() || [],
        materialImgs: materialImgs.getSuccessImgUrls() || []

      }
  

      // 构造提交参数（修改：添加coProcessorName数组一并提交）

      const submitData = {

        taskId: workOrderForm.taskId,
        taskKey:'ylWorker',

        operateType: nextStepMap['ylWorker']?.operateTypePass || '', // 兜底：防止nextStepMap缺失属性
        workerDataId: Number(workOrderForm.workerDataId) || '',

        handleResult: workOrderForm.reason.trim(),

        coHandlers: workOrderForm.coProcessorId || [], // ID数组
        coHandlersName: workOrderForm.coProcessorName || [], // 名称数组（一并提交）

        startImgs: allImgs.startImgs,
        processingImgs: allImgs.processingImgs,
        endImgs: allImgs.endImgs,
        personImgs: allImgs.personImgs,
        materialImgs: allImgs.materialImgs,

        problemsImgs:[]

      }

      // 打印提交参数，验证coProcessorName是否为数组
      console.log('提交参数（含名称数组）：', submitData);
  

      // 校验operateType是否有效
      if (!submitData.operateType) {
        uni.showToast({
          title: '提交类型异常，无法提交',
          icon: 'none',
          duration: 2000
        });
        console.error('submitWorkOrder异常：operateType 为空');
        return;
      }

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

  
      // ========== 先落作业填报（动态字段），再走审批流转 ==========
      // 值按「业务类型 + 作业类型」的字段配置落库；同一工单重复实施时后端按 (bizType,bizId) 覆盖原记录并红冲旧物料
      if (dynamicValues.length > 0) {
        if (!workRecordClientSeq) {
          workRecordClientSeq = genClientSeq()
        }
        await workRecordSubmit({
          businessType: workOrderForm.businessType,
          bizType: 1,
          bizId: Number(workOrderForm.workerDataId),
          workTypeId: Number(workOrderForm.workTypeId),
          clientSeq: workRecordClientSeq,
          remark: workOrderForm.reason.trim(),
          fields: dynamicValues
        })
      }
  

      const res = await universalApproval(submitData)

  
      // 校验接口返回结果
      if (!res) {
        uni.hideLoading();
        uni.showToast({
          title: '工单提交失败（接口无返回）',
          icon: 'none',
          duration: 3000
        });
        console.error('submitWorkOrder异常：universalApproval接口无有效返回');
        return;
      }
  

      uni.hideLoading()

      uni.showToast({
        title: '工单提交成功',
        icon: 'success',
        duration: 1000
      })
  
      // 延迟跳转
      setTimeout(() => {

        uni.reLaunch({

          url: '/pages-sub/problem/work-order-manage/index'
        })
      }, 1000)
    } catch (error) {
      uni.hideLoading()
  

      // 本次提交失败后重置流水号：下次重试允许按最新填报值覆盖原记录（后端按 bizType+bizId 覆盖，不会重复建单）
      workRecordClientSeq = ''
  

      // 区分校验失败和接口失败，仅接口失败时提示（校验失败已有内置提示）

      if (!Array.isArray(error)) {

        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none',
          duration: 2000

        });
        console.error('工单提交失败：', error)
      } else {
        console.warn('工单提交校验失败：', error);

      }
    }
  }
  </script>
  
  <style lang="scss" scoped>

  // 页面容器样式

  .page-container {
    min-height: 100vh;

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

  }
  

  // 表单内容容器

  .work-order-form-content {
    background: #fff;
    padding-bottom: 30rpx;
  }
  
  // Tabs容器样式
  .tabs-wrap {
    background: #fff;
  }
  

  // Tab自定义内容样式（红色*号）

  .tab-item-content {
    display: flex;
    align-items: center;
  }
  
  .required-star {
    color: #f53f3f; // 红色必填标识
    margin-right: 4rpx; // 与文字保持小间距
    font-weight: bold;
  }
  

  // 作业填报（动态字段）区块
  .dynamic-field-block {
    margin-top: 10rpx;
  
    .dynamic-field-title {
      padding: 20rpx 0 10rpx;
      font-size: 30rpx;
      font-weight: 600;
      color: #303133;
      border-bottom: 1rpx solid #f0f0f0;
    }
  
    .dynamic-field-empty {
      padding: 30rpx 0;
      text-align: center;
      font-size: 26rpx;
      color: #999;
    }
  }
  

  </style>