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="coProcessorName"
            border-bottom
            @click="handleActionSheetOpen('coProcessor'); hideKeyboard()"
        >
          <up-input
              v-model="workOrderForm.coProcessorName"
              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>

        <!-- 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.imgList"
                    @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.imgList"
                    @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.imgList"
                    @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.imgList"
                    @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.imgList"
                    @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>
  </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 { nextStepMap } from '@/common/utils/common'
import { useUserStore } from '@/pinia/user';
const userStore = useUserStore();

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

// 页面状态
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([])

// 工单表单数据（仅保留需要的字段）
const workOrderForm = reactive({
  workerDataId:'',
  taskId:'', // 任务id
  orderNo: '',                  // 工单编号
  coProcessorId: '',            // 共同处理人ID数组（多选）
  coProcessorName: '',          // 共同处理人名称数组（多选）
  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'] }
  ]
})

// 生命周期 - 从本地缓存获取完整工单数据
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异常：工单缓存数据为空');
      // 可选：返回上一页
      // setTimeout(() => uni.navigateBack(), 1500);
      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 || ''; // 处理情况回显

    // 共同处理人（如有数据则回显）
    if (orderItem.coHandlers && orderItem.coHandlersName) {
      workOrderForm.coProcessorId = orderItem.coHandlers;
      workOrderForm.coProcessorName = orderItem.coHandlersName;
    } 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);
    // 可选：返回上一页
    // setTimeout(() => uni.navigateBack(), 1500);
  }
})

// 生命周期 - 初始化表单规则
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: 'yl',
      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: 2000
      });
      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 = ''
}

// 下拉弹窗选择事件（仅处理共同处理人多选）
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') {
    workOrderForm.coProcessorName = e.name
    workOrderForm.coProcessorId = e.id
    // 校验表单实例是否存在，再执行字段校验
    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()
}

// 提交工单（整合所有图片URL，增加开始/结束图片必填校验）
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.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() || []
    }

    // 构造提交参数
    const submitData = {
      taskId: workOrderForm.taskId,
      taskKey:'ylWorker',
      operateType: nextStepMap['ylWorker']?.operateTypePass || '', // 兜底：防止nextStepMap缺失属性
      workerDataId: Number(workOrderForm.workerDataId) || '',
      handleResult: workOrderForm.reason.trim(),
      coHandlers: workOrderForm.coProcessorId ? [String(workOrderForm.coProcessorId)] : [],
      startImgs: allImgs.startImgs,
      processingImgs: allImgs.processingImgs,
      endImgs: allImgs.endImgs,
      personImgs: allImgs.personImgs,
      materialImgs: allImgs.materialImgs,
      problemsImgs:[]
    }

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

    uni.showLoading({ title: '提交中...' })
    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.redirectTo({
        url: '/pages-sub/problem/work-order-manage/index'
      })
    }, 1000)
  } catch (error) {
    uni.hideLoading()

    // 区分校验失败和接口失败，仅接口失败时提示（校验失败已有内置提示）
    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;
}

.tab-text {
  font-size: 28rpx;
}
</style>