JCSS / jcss-miniprogram

  <template>
    <view class="page-container">
      <!-- 页面级加载组件 -->
      <up-loading-page
          v-if="loading"
          :loading="true"
          title="加载中..."
          color="#3c9cff"
      ></up-loading-page>
  
      <!-- 主内容容器 -->
      <view v-else class="main-content">
        <!-- 顶部固定Tabs -->

        <up-sticky :bgColor="'#fff'">
          <up-tabs
              v-model="activeTopTab"
              :list="topTabList"
              :scrollable="false"
              sticky
              active-color="#3c9cff"
              inactive-color="#666"
              class="top-tabs"
              @click="activeTopTabClick"
          ></up-tabs>
        </up-sticky>
  

        <!-- 顶部Tab内容区 -->
        <view class="tab-content">
          <!-- 1. 工单详情Tab -->
          <view v-show="activeTopTab == 0" class="detail-content">

            <up-cell-group :border="false" class="detail-cell-group">

              <!-- 工单编号 -->
              <up-cell title="工单编号" :value="orderDetail.orderNo || '--'" align="middle"></up-cell>

              <!-- 工单位置 -->
              <up-cell align="middle">

                <template #title>

                  <view style="min-width: 200rpx">工单位置</view>

                </template>
                <template #value>

                  <view class="common-text-color up-line-1">{{ orderDetail.lonLatAddress || '--' }}</view>

                </template>
              </up-cell>

              <!-- 工单名称 -->

              <up-cell align="middle">

                <template #title>
                  <view style="min-width: 200rpx">工单名称</view>
                </template>
                <template #value>
                  <view class="common-text-color up-line-1">{{ orderDetail.orderName || '--' }}</view>
                </template>
              </up-cell>

              <!-- 情况描述 -->

              <up-cell>

                <template #title>

                  <view style="min-width: 200rpx">情况描述</view>

                </template>
                <template #value>
                  <view class="common-text-color up-line-1">{{ orderDetail.remark || '--' }}</view>
                </template>
              </up-cell>

              <!-- 紧急程度 -->
              <up-cell
                  title="紧急程度"
                  :value="uni.$dict.getDictLabel('workorder_pressing_type', orderDetail.pressingType) || '--'"
                  align="middle"
              ></up-cell>
  

              <!-- 提交人 -->
              <up-cell title="提交人" :value="orderDetail.userName || '--'" align="middle"></up-cell>
  
              <!-- 提交时间 -->
              <up-cell
                  title="提交时间"
                  :value="timeFormat(orderDetail.createTime, 'yyyy-mm-dd hh:MM:ss') || '--'"
                  align="middle"
              ></up-cell>
  
              <!-- 处理结果 -->

              <up-cell v-if="orderDetail.handleResult">

                <template #title>
                  <view style="min-width: 200rpx">处理结果</view>
                </template>
                <template #value>
                  <view class="common-text-color up-line-1">{{ orderDetail.handleResult || '--' }}</view>
                </template>
              </up-cell>
  
              <!-- 街道名称 -->
              <up-cell title="街道名称" :value="orderDetail.streetName || '--'" align="middle"></up-cell>
  

              <!-- 问题照片 -->
              <up-cell title="问题照片">
                <template #value>
                  <view class="cell-content-wrap">
                    <up-album

                        v-if="!!orderDetail.problemsImgs?.length"
                        :urls="orderDetail.problemsImgs.slice(0, 3)"

                        :singleSize="70"
                        :multipleSize="70"
  

                        :preview-full-image="true"
                    ></up-album>
                    <text v-else class="empty-text">暂无问题照片</text>
                  </view>
                </template>
              </up-cell>

              <!-- 希望完成时间 -->
              <up-cell

                  v-if="orderDetail.expectedFinishDate"

                  title="希望完成时间"

                  :value="timeFormat(orderDetail.expectedFinishDate, 'yyyy-mm-dd hh:MM:ss')"

                  align="middle"
                  :border="false"
              ></up-cell>

  
              <up-cell

                  v-if="orderDetail.finishDate"

                  title="工单完结时间"

                  :value="timeFormat(orderDetail.finishDate, 'yyyy-mm-dd hh:MM:ss')"

                  align="middle"
                  :border="false"
              ></up-cell>

            </up-cell-group>
  

            <!-- 图片分类Tabs区块 -->

            <view class="img-tabs-block" v-if="orderDetail.startImgs.length>0">
              <up-cell-group :border="false">
                <up-cell>

                  <template #title>
                    <view style="min-width: 200rpx">共同处理人</view>
                  </template>
                  <template #value>

                    <view class="common-text-color up-line-1">

                      {{
                        Array.isArray(orderDetail.coHandlersName) && orderDetail.coHandlersName.length > 0 ? orderDetail.coHandlersName.join(',') : '--'
                      }}

                    </view>

                  </template>

                </up-cell>
              </up-cell-group>

              <up-tabs

                  @change='imgTabChange'

                  v-model="activeImgTab"
                  :list="imgTabList"
                  :scrollable="false"
                  active-color="#3c9cff"
                  inactive-color="#666"
                  class="img-tabs"
              ></up-tabs>
  
              <!-- 图片Tab内容区 -->
              <view class="img-tab-content">
                <up-album
                    v-if="currentImgList.length"
                    :urls="currentImgList.slice(0, 3)"

                    :singleSize="70"
                    :multipleSize="70"

                    :preview-full-image="true"

                    class="img-album custom-album"

                ></up-album>

                <text v-else class="empty-img-text">养护员未上传图片</text>

              </view>
            </view>

          </view>
  
          <!-- 2. 流程节点Tab -->
          <view v-show="activeTopTab == 1" class="process-content">

            <!-- 竖向步骤条：动态绑定current属性 -->
            <up-steps
                v-if="processData.activityNodes && processData.activityNodes.length"
                :list="processData.activityNodes"
                :current="getCurrentStepIndex()"

                direction="column"
                active-color="#3c9cff"
                inactive-color="#999"
                class="vertical-steps"

            >

              <template>

                <up-steps-item
                    v-for="(item, index) in processData.activityNodes"
                    :key="`${item.id}_${index}`"
                >
                  <!-- 唯一自定义模板：content，包含标题、描述、相册所有内容 -->
                  <template #content>

                    <view class="step-content-wrap">

                      <!-- 1. 原标题内容：节点名称 + 操作人 -->
                      <view class="step-title">
                        {{ item.name }}
                        <text class="operator-name">

                          {{
                            item.tasks && item.tasks[0]?.assigneeUser?.nickname ? '（' + item.tasks[0].assigneeUser.nickname + '）' : '（未知操作人）'
                          }}

                        </text>
                      </view>

                      <!-- 2. 原描述内容：时间 + 处理说明（最多200字） -->
                      <view class="step-desc">
                        <!-- 时间行 -->
                        <view class="time-line">
                          处理时间：{{ timeFormat(item.startTime, 'yyyy-mm-dd hh:MM:ss') }}

                          <text v-if="item.endTime"> 至 {{ timeFormat(item.endTime, 'yyyy-mm-dd hh:MM:ss') }}</text>

                          <text v-else class="processing-tag">（处理中）</text>
                        </view>

  
                        <view class="reason-line up-line-1" v-if="index!==0&&item.endTime">

                          总耗时：{{ calculateFormatTimeDiff(item.startTime, item.endTime) }}

                        </view>
  

                        <!-- 原因行 -->
                        <view class="reason-line up-line-2" v-if="item.tasks && item.tasks[0]?.reason">
                          描述：{{ getLimitReason(item.tasks && item.tasks[0]?.reason) }}
                        </view>
                      </view>

                      <!-- 3. 原相册内容：预留up-album -->
                      <view class="step-album-wrap">
                        <up-album

                            v-if="item.tasks && item.tasks[0]?.attattmentUrls && item.tasks[0].attattmentUrls.length"
                            :urls="item.tasks[0].attattmentUrls.slice(0, 3)"

                            :singleSize="70"
                            :multipleSize="70"
  

                            :preview-full-image="true"
                            class="step-album"
                        ></up-album>
                      </view>
                    </view>
                  </template>
                </up-steps-item>

              </template>

            </up-steps>
  
            <!-- 流程节点为空时的提示 -->
            <up-empty
                v-else
                mode="data"
                title="暂无流程节点数据"
                class="empty-process"
            ></up-empty>

          </view>
        </view>
      </view>

  
      <!-- activeTab==0的时候才出现， 也就是待办 -->
      <view v-if="activeTab==0&&nextStepMap[orderDetail.taskKey]" class="fixed-bottom-btn-wrap">
        <view class="u-body-item u-flex common-justify-between common-item-center ">
          <up-button type="warning" size="normal" @click="handleReject(orderDetail)"
                     v-show="nextStepMap[orderDetail.taskKey].backShow">回退
          </up-button>
  
          <up-button type="success" size="normal" @click="handleRenew(orderDetail)"
                     v-show="nextStepMap[orderDetail.taskKey].renewShow">重新提交
          </up-button>
  
          <up-button type="primary" size="normal" @click="handleProcess(orderDetail)">{{
              nextStepMap[orderDetail.taskKey].btnText
            }}
          </up-button>
  
        </view>
      </view>
  

      <!-- 回退原因弹窗（新增图片上传） -->

      <up-modal
          :show="rejectModalShow"
          title="回退原因"
          :closeOnClickOverlay="false"
          :showConfirmButton="true"
          :showCancelButton="true"
          @cancel="handleRejectModalCancel"
          @confirm="confirmReject"
      >
        <view class="reject-modal-content">
          <up-textarea
              v-model.trim="rejectReason"
              placeholder="请输入回退原因（必填）"
              rows="6"
              :count="200"
              maxlength="200"
              class="reject-textarea"
          />

          <!-- 新增：回退图片上传（选填） -->
          <view class="upload-wrap mt-20">
            <view class="upload-title">上传回退图片（选填）</view>
            <up-upload

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

                @after-read="rejectImgs.uploadImgs"
                @delete="rejectImgs.deleteImg"
                multiple
                width="70"
                height="70"
                :max-count="rejectImgs.uploadConfig.maxCount"
                :upload-text="rejectImgs.uploadConfig.uploadText"
                :size-type="rejectImgs.uploadConfig.sizeType"
            />
          </view>

        </view>
      </up-modal>
  

      <!-- 验收弹窗（新增图片上传） -->

      <up-modal
          :show="acceptModalShow"
          title="验收"
          :closeOnClickOverlay="false"
          :showConfirmButton="true"
          :showCancelButton="true"

          @cancel="handleAcceptModalCancel"

          @confirm="handleAcceptModalConfirm"
      >
        <view class="accept-modal-content">
          <!-- 第一行：单选框（通过/不通过，默认通过） -->
          <view class="radio-group-wrap">
            <up-radio-group v-model="acceptRadioValue">
              <up-radio name="0" label="通过"></up-radio>
              <up-radio name="1" label="不通过"></up-radio>
            </up-radio-group>
          </view>
  
          <!-- 第二行：必填textarea，最多200字 -->
          <view class="textarea-wrap mt-30">
            <up-textarea
                v-model.trim="acceptReason"
                placeholder="请输入验收原因（必填，最多200字）"
                :required="true"
                maxlength="200"
                rows="5"
                count
            />
          </view>

  
          <!-- 新增：验收图片上传（选填） -->
          <view class="upload-wrap mt-20">
            <view class="upload-title">上传验收图片（选填）</view>
            <up-upload

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

                @after-read="acceptImgs.uploadImgs"
                @delete="acceptImgs.deleteImg"
                multiple
                width="70"
                height="70"
                :max-count="acceptImgs.uploadConfig.maxCount"
                :upload-text="acceptImgs.uploadConfig.uploadText"
                :size-type="acceptImgs.uploadConfig.sizeType"
            />
          </view>

        </view>
      </up-modal>
  

    </view>
  </template>
  
  <script setup lang="ts">

  import {ref, watch} from 'vue';

  import {onLoad, onShow} from '@dcloudio/uni-app';
  import {timeFormat} from '@/uni_modules/uview-plus';
  import {
    getMyTaskDetail,
    getDoneTaskDetail,
    getTodoTaskDetail,

    getApprovalDetail,
    universalApproval

  } from '@/api/work-order-manage/work-order-manage';

  import {nextStepMap, buzStatusMap, calculateFormatTimeDiff} from '@/common/utils/common'

  // 引入图片上传组合式函数

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

  
  // 状态管理
  const loading = ref(true);
  const activeTopTab = ref(0); // 顶部Tab激活索引
  const activeImgTab = ref(0); // 图片分类Tab激活索引
  
  // 顶部Tab列表
  const topTabList = ref([

    {name: '工单详情'},
    {name: '流程节点'}

  ]);
  

  // 流程节点数据（初始化适配接口格式）
  const processData = ref<any>({
    status: 2,
    activityNodes: [],
    formFieldsPermission: null,
    todoTask: null
  });
  

  // 图片分类Tab列表（带角标配置）
  const imgTabList = ref([

    {name: '开始', badge: {isDot: true}},
    {name: '进行中'},
    {name: '结束', badge: {isDot: true}},
    {name: '人员'},
    {name: '材料'}

  ]);
  

  // 工单详情数据（初始化赋值，可被接口数据覆盖）
  const orderDetail = ref<any>({
    id: 0,
    busiLine: '',
    orderNo: '',
    orderName: '',
    sourceId: 0,
    sourceName: '',
    roadId: 0,
    roadName: '',
    streetId: '',
    streetName: '',
    curingLevelId: 0,
    curingLevelName: '',
    commitDate: 0,
    finishDate: 0,

    expectedFinishDate: 0,

    pressingType: 0,
    userId: 0,
    userName: '',
    companyId: 0,
    latLonType: 0,
    lat: 0,
    lon: 0,
    lonLatAddress: '',
    thirdWorkNo: '',
    thirdPushState: 0,
    buzStatus: null,
    status: 0,
    processInstanceId: '',
    remark: '',
    handleResult: '',
    createTime: 0,
    fileNames: null,
    coHandlers: null,
    coHandlersName: null,
    companyName: null,
    userMobile: null,
    taskId: '',
    taskName: '',
    taskKey: '',
    processDefinitionName: '',
    startTime: 0,
    endTime: 0,
    key_: '',
    problemsImgs: [],
    startImgs: [],
    processingImgs: [],
    endImgs: [],
    personImgs: [],
    materialImgs: []
  });

  
  /**

   * 当前激活的图片列表（无需函数调用，直接访问）

   */

  const currentImgList = ref([])
  
  const tabKeyMap = ['startImgs', 'processingImgs', 'endImgs', 'personImgs', 'materialImgs'];

  const imgTabChange = (({index}: { index: number }) => {

    console.log(index)
    const currentKey = tabKeyMap[index]
    console.log(currentKey)
    console.log(orderDetail.value[currentKey])
    currentImgList.value = orderDetail.value[currentKey]
  })
  

  /**
   * 截取reason最多200字
   * @param reason 处理说明
   * @returns 截取后的字符串
   */
  const getLimitReason = (reason: string | null | undefined) => {
    if (!reason) return '无处理说明';
    if (reason.length <= 200) return reason;
    return reason.substring(0, 200) + '...';
  }
  
  /**
   * 动态获取当前步骤索引（核心：根据接口数据的status字段判断）
   * status=1：当前步骤（处理中）
   * status=2：已完成步骤
   * @returns {number} 当前激活的步骤索引（从0开始）
   */
  const getCurrentStepIndex = () => {

    const {activityNodes} = processData.value;

    if (!activityNodes || !activityNodes.length) return 0;
  

    // 2. 若没有处理中的节点（全部已完成），则激活最后一个节点
    return activityNodes.length - 1;
  }

  
  /**
   * 获取工单详情
   */

  const DetailQuery = async (taskIdStr: string) => {
    console.log('当前工单ID：', taskIdStr)

    try {
      loading.value = true;

      // 转换activeTab为数字类型，避免类型不一致导致接口调用失败
      const tabType = Number(activeTab.value);
      let res: any;
  
      if (tabType === 0) {

        res = await getTodoTaskDetail({taskId: taskIdStr});

      } else if (tabType === 1) {

        res = await getMyTaskDetail({taskId: taskIdStr});

      } else if (tabType === 2) {

        res = await getDoneTaskDetail({taskId: taskIdStr});

      } else {

        uni.showToast({title: '无效的工单类型', icon: 'none'});

        return;

      }

      // 覆盖工单详情数据
      if (res) {
        orderDetail.value = res;

        currentImgList.value = orderDetail.value.startImgs

      }

    } catch (error) {
      console.error('获取工单详情失败：', error);

      uni.showToast({title: '加载失败，请重试', icon: 'none'});

    } finally {
      loading.value = false;
    }
  };
  

  // 页面加载参数

  const taskId = ref('')
  const activeTab = ref('')

  const processInstanceId = ref('')

  
  const activeTopTabClick = async (item: any) => {
    console.log(item)
    activeTopTab.value = item.index
    if (activeTopTab.value == 1) {
      let getData = {
        processInstanceId: processInstanceId.value,
      }
      const res = await getApprovalDetail(getData)
      console.log(res)
      // 关键：格式化数据，补充up-steps要求的title字段
      if (res && res.activityNodes && res.activityNodes.length) {
        // 1. 先过滤：剔除 name 为 "结束" 的节点
        const filteredActivityNodes = res.activityNodes.filter(node => {
          // 返回 true 保留节点，返回 false 剔除节点
          return node.name !== '结束';
        });
        const formatActivityNodes = filteredActivityNodes.map(node => ({
          ...node,
          title: node.name // 补充强制字段，满足3.3.48版本组件要求
        }));
        processData.value = {
          ...res,
          activityNodes: formatActivityNodes
        };
      } else {
        processData.value = res;
      }
    }
  }
  

  // ========== 回退弹窗相关状态（新增图片上传实例） ==========

  const rejectModalShow = ref(false); // 回退modal显示开关
  const rejectReason = ref(''); // 回退原因
  const currentRejectItem = ref<any>(null); // 当前回退工单
  // 回退图片上传配置
  const rejectImgs = useUploadImgs({
    maxCount: 3,
    uploadText: '选择回退图片',
    sizeType: ['compressed'],
    formRef: null,
    fieldName: 'rejectImgs'
  })

  // ========== 验收弹窗相关状态（新增图片上传实例） ==========

  const acceptModalShow = ref(false); // 验收弹窗显示开关
  const acceptRadioValue = ref('0'); // 单选框值，默认0（通过）
  const acceptReason = ref(''); // 验收原因
  const currentAcceptItem = ref<any>(null); // 当前验收的工单项

  // 验收图片上传配置
  const acceptImgs = useUploadImgs({
    maxCount: 3,
    uploadText: '选择验收图片',
    sizeType: ['compressed'],
    formRef: null,
    fieldName: 'acceptImgs'
  })

  // ========== 生成临时key ==========

  const generateTempKey = () => {
    return 'renew_order_' + Date.now() + '_' + Math.floor(Math.random() * 10000);
  };
  

  // ========== handleRenew 重新提交工单 ==========

  const handleRenew = (item: any) => {
    // 校验工单有效性
    if (!item || !item.id) {
      uni.showToast({title: '工单信息异常，无法重新提交', icon: 'none'});
      return;
    }
  
    // 1. 生成唯一临时标识
    const tempKey = generateTempKey();
  
    // 2. 将完整工单数据存入本地临时存储（同步存储，确保数据立即生效）
    try {
      uni.setStorageSync(tempKey, item);
    } catch (error) {
      console.error('存储工单数据失败：', error);
      uni.showToast({title: '数据存储异常，无法重新提交', icon: 'none'});
      return;
    }
  
    // 3. URL 仅传递「唯一标识」和「重新提交标记」
    uni.navigateTo({
      url: `/pages-sub/problem/work-order-manage/add-order?isRenew=1&tempKey=${tempKey}`
    });
  };
  

  // ========== handleReject 打开回退弹窗 ==========

  const handleReject = (item: any) => {
    // 校验工单有效性
    if (!item || !item.id) {
      uni.showToast({title: '工单信息异常，无法回退', icon: 'none'});
      return;
    }
    currentRejectItem.value = item;
    rejectReason.value = ''; // 清空上次输入
    rejectImgs.clearImgs(); // 清空上传图片
    rejectModalShow.value = true; // 显示回退modal
  };
  

  // ========== 回退弹窗取消按钮 ==========

  const handleRejectModalCancel = () => {
    rejectModalShow.value = false;
    rejectReason.value = '';
    rejectImgs.clearImgs(); // 清空上传图片
  };
  

  // ========== 确认回退工单（新增returnImgs传参） ==========

  const confirmReject = async () => {
    // 严格校验回退原因（去除首尾空格）
    const rejectReasonTrim = rejectReason.value.trim();
    if (!rejectReasonTrim) {
      uni.showToast({title: '请填写回退原因', icon: 'none', duration: 1000});
      return;
    }
    // 校验当前工单有效性
    if (!currentRejectItem.value || !currentRejectItem.value.id) {
      uni.showToast({title: '工单信息异常，无法提交', icon: 'none', duration: 1000});
      rejectModalShow.value = false;
      return;
    }
    try {
      // 显示加载中，防止重复提交
      uni.showLoading({title: '提交中...', mask: true});
  

      // 构建请求参数（新增returnImgs）

      const requestData = {

        "returnImgs": rejectImgs.getSuccessImgUrls(), // 回退图片URL数组

        "workerDataId": currentRejectItem.value.id,
        "taskKey": currentRejectItem.value.taskKey,
        "taskId": currentRejectItem.value.taskId,
        "operateType": nextStepMap[currentRejectItem.value.taskKey].operateTypeNoPass,
        "agree": 1,
        "reason": rejectReasonTrim
      };
      // 调用回退工单接口
      const res = await universalApproval(requestData);
      uni.showToast({title: '回退成功', icon: 'success', duration: 1000});

      rejectModalShow.value = false;
      // 重新获取工单详情，刷新页面

      // await DetailQuery(taskId.value);
      uni.reLaunch({
        url: `/pages-sub/problem/work-order-manage/index`
      });

    } catch (error) {
      console.error('回退工单失败：', error);
      uni.showToast({title: '网络异常，回退失败', icon: 'none', duration: 1000});
    } finally {
      // 隐藏加载中
      uni.hideLoading();
    }
  };
  

  // ========== handleProcess 处理工单 ==========

  const handleProcess = async (item: any) => {
    console.log(nextStepMap[item.taskKey]?.name)
    try {
      if (nextStepMap[item.taskKey]?.name == '养护组长分配') {
        uni.navigateTo({
          url: `/pages-sub/problem/work-order-manage/distribution-order?taskId=${item.taskId}&orderNo=${item.orderNo}&id=${item.id}`
        })
      }
      if (nextStepMap[item.taskKey]?.name == '养护员待实施') {
        // ① 生成唯一临时key
        const tempKey = `maintain_order_${Date.now()}_${Math.floor(Math.random() * 10000)}`;
  
        // ② 存储完整item到本地缓存
        try {
          uni.setStorageSync(tempKey, item);
        } catch (error) {
          console.error('存储养护工单数据失败：', error);
          uni.showToast({title: '数据存储异常，无法跳转', icon: 'none'});
          return;
        }
  
        // ③ URL仅传递临时key
        uni.navigateTo({
          url: `/pages-sub/problem/work-order-manage/add-maintain-order?tempKey=${tempKey}`
        })
      }
      // 养护组长验收 - 打开弹窗
      if (nextStepMap[item.taskKey]?.name == '养护组长验收') {
        currentAcceptItem.value = item; // 存储当前工单信息
        acceptReason.value = ''; // 清空上次的验收原因
        acceptRadioValue.value = '0'; // 重置默认选中“通过”

        acceptImgs.clearImgs(); // 清空验收图片

        acceptModalShow.value = true; // 显示验收弹窗
      }
      // 巡查员验收 - 打开弹窗
      if (nextStepMap[item.taskKey]?.name == '巡查员验收') {
        currentAcceptItem.value = item; // 存储当前工单信息
        acceptReason.value = ''; // 清空上次的验收原因
        acceptRadioValue.value = '0'; // 重置默认选中“通过”

        acceptImgs.clearImgs(); // 清空验收图片

        acceptModalShow.value = true; // 显示验收弹窗
      }
  
      // 发起人确认
      if (nextStepMap[item.taskKey]?.name == '发起人确认') {
        console.log(item)
        uni.showModal({
          title: "结束工单",
          content: "请确定是否结束工单？",
          success: async function (res) {
            if (res.confirm) {

              // 构建请求参数（携带returnImgs）

              const requestData = {
                "returnImgs": rejectImgs.getSuccessImgUrls(),
                "workerDataId": item.id,

                "taskKey": 'ylInspectorStart',

                "taskId": item.taskId,
                "operateType": 200,
                "agree": 1,
                "reason": '结束工单'
              };
              // 调用回退工单接口
              const res = await universalApproval(requestData);
              uni.showToast({title: '结束成功', icon: 'success', duration: 1000});
              // 重新获取工单详情，刷新页面
              await DetailQuery(taskId.value);
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      }
    } catch (error) {
      console.error('处理工单失败：', error);
      uni.showToast({title: '处理失败，请重试', icon: 'none'});
    }
  };
  

  // ========== 验收弹窗取消按钮（新增清空图片） ==========
  const handleAcceptModalCancel = () => {
    acceptModalShow.value = false;
    acceptReason.value = '';
    acceptRadioValue.value = '0';
    acceptImgs.clearImgs(); // 清空验收图片
  };
  
  // ========== 验收弹窗确认按钮（新增returnImgs传参） ==========

  const handleAcceptModalConfirm = async () => {
    // 1. 校验验收原因是否为空
    if (!acceptReason.value.trim()) {
      uni.showToast({title: '请填写验收原因', icon: 'none', duration: 1000});
      return;
    }
    // 2. 校验验收原因长度
    if (acceptReason.value.length > 200) {
      uni.showToast({title: '验收原因最多200字', icon: 'none', duration: 1000});
      return;
    }
    try {
      // 3. 调用验收接口
      console.log(currentAcceptItem.value)
      let postData: any = {}
      if (currentAcceptItem.value?.taskKey == 'ylTeamLeaderConfirm') {   // 养护组长验收
        postData = {

          "returnImgs": acceptImgs.getSuccessImgUrls(), // 验收图片URL数组

          "taskKey": currentAcceptItem.value.taskKey, // ylTeamLeaderConfirm
          "workerDataId": currentAcceptItem.value.id,
          "taskId": currentAcceptItem.value.taskId,
          "operateType": acceptRadioValue.value == 0 ? nextStepMap[currentAcceptItem.value.taskKey].operateTypePass : nextStepMap[currentAcceptItem.value.taskKey].operateTypeNoPass,
          "reason": acceptReason.value.trim()
        }
      }
      if (currentAcceptItem.value?.taskKey == 'ylInspector') {   // 巡查员验收
        postData = {

          "returnImgs": acceptImgs.getSuccessImgUrls(), // 验收图片URL数组

          "taskKey": currentAcceptItem.value.taskKey,  //ylInspector
          "taskId": currentAcceptItem.value.taskId,
          "workerDataId": currentAcceptItem.value.id,
          "operateType": acceptRadioValue.value == 0 ? nextStepMap[currentAcceptItem.value.taskKey].operateTypePass : nextStepMap[currentAcceptItem.value.taskKey].operateTypeNoPass,
          "reason": acceptReason.value.trim(),
          "agree": acceptRadioValue.value
        }
      }
      const acceptRes = await universalApproval(postData);
      // 4. 操作成功处理

      handleAcceptModalCancel(); // 清空状态

      // 重新获取工单详情，刷新页面

      // await DetailQuery(taskId.value);

      // uni.reLaunch({
      //   url: `/pages-sub/problem/work-order-manage/index`
      // });
      eventChannel.emit('needRefresh');
      // 4. 返回列表页
      uni.navigateBack({delta: 1});
      uni.showToast({title: '提交成功', icon: 'success', duration: 1000});

    } catch (error) {
      // 5. 操作失败处理
      console.error('验收失败：', error);
      uni.showToast({title: '验收提交失败，请重试', icon: 'none', duration: 1000});
    }
  };
  

  onLoad((options: any) => {
    console.log('页面入参：', options)

    const {taskId: taskIdOpt, activeTab: activeTabOpt, processInstanceId: processInstanceIdOpt} = options;

    // 0-待办 1-我发起的 2-已办
    taskId.value = taskIdOpt || '';
    activeTab.value = activeTabOpt || '0';

    processInstanceId.value = processInstanceIdOpt;
    DetailQuery(taskId.value);

  });

  onShow(() => {

    // 注释原有逻辑，避免重复加载

  });

  </script>
  
  <style scoped lang="scss">
  // 全局样式
  .page-container {
    min-height: 100vh;

  }
  
  // 主内容容器
  .main-content {

    padding-bottom: 80rpx;

  }
  
  // 顶部Tabs
  .top-tabs {
    //background-color: #fff;
  }
  
  // Tab内容区
  .tab-content {

    //padding: 16rpx;

  }
  
  // 工单详情内容
  .detail-content {
    .detail-cell-group {
      background-color: #fff;

      margin-bottom: 20rpx;
    }
  

    .cell-content-wrap {

      // 保持原有样式，兼容up-album布局

    }
  

    .empty-text {
      color: #999;
      font-size: 26rpx;
    }

  }
  
  // 图片分类Tabs区块
  .img-tabs-block {
    background-color: #fff;

    //border-radius: 12rpx;
    //padding: 16rpx;

  
    // 图片内容区
    .img-tab-content {

      padding: 20rpx 15px ;

      text-align: center;

      //min-height: 120rpx;
      //display: flex;
      //align-items: center;
      //justify-content: center;
      //

      .img-album {

        //width: 100%;
  

      }
  

      .empty-img-text {

        height: 75px;
        line-height: 75px;

        color: #999;
        font-size: 28rpx;
      }

    }
  }
  

  // 流程节点区域（完整样式，确保内容可见）

  .process-content {

    //padding: 16rpx;
    //min-height: 400rpx;

    .empty-process {
      margin-top: 100rpx;
    }

  
    // 竖向步骤条容器样式
    .vertical-steps {
      //width: 100%;
      background-color: #fff;
      padding: 20rpx;
      border-radius: 12rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx; // 步骤项间距
    }
  
    // 自定义内容容器样式
    .step-content-wrap {
      width: 100%;
      //padding: 10rpx 0;
      box-sizing: border-box;
  
      // 节点标题 + 操作人样式
      .step-title {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 12rpx;
  
        .operator-name {
          font-size: 30rpx;
          font-weight: 600;
          color: #333;
          margin-left: 20rpx;
        }
      }
  
      // 描述（时间 + 处理说明）样式
      .step-desc {
        font-size: 24rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 12rpx;
  
        .time-line {
          margin-bottom: 8rpx;
  
          .processing-tag {
            color: #f59e0b;
            margin-left: 10rpx;
          }
        }
  
        .reason-line {
          word-break: break-all; // 长文本自动换行
        }
      }
  
      // 相册容器样式
      .step-album-wrap {
        padding: 10rpx 0;
  
        .step-album {

          //width: 100%;

        }
  
        .no-img-tip {
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
        }
      }
    }

  }

  // 上传图片通用样式
  .upload-wrap {
    margin-top: 20rpx;
  
    .upload-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
    }
  }

  .mt-20 {
    margin-top: 20rpx;
  }

  
  // 回退弹窗样式
  .reject-modal-content {
    width: 100%;
    box-sizing: border-box;
    padding: 10rpx 0;
  }
  

  .reject-textarea {
    width: 100%;
  }

  
  // 验收弹窗样式
  .accept-modal-content {
    width: 100%;
    box-sizing: border-box;
  }
  
  .radio-group-wrap {
    display: flex;
    align-items: center;
    gap: 40rpx;
    font-size: 28rpx;
    margin-bottom: 20rpx;
  }
  
  .textarea-wrap {
    width: 100%;
    margin-top: 30rpx;
  }
  

  .mt-30 {
    margin-top: 30rpx;
  }

  // 针对 up-album 单图容器的样式（穿透 scoped 限制）
  :deep .u-album__row__wrapper image {
    width: 70px !important;  // 与多图保持一致
    height: 70px !important;
  }
  
  

  </style>