JCSS / jcss-miniprogram

  <template>
    <view class="page-container">
      <!-- 顶部固定区域 -->
      <up-sticky>
        <view class="header-wrap">
          <!-- 第一行：u-tabs 待办/已办切换  :scrollable="false"-->
          <up-tabs
              v-model="activeTab"
              :list="tabList"
              active-color="#1989fa"
              inactive-color="#666"
              font-size="30rpx"

              @click="handleTabChange"

          />
  
          <!-- 第二行：下拉框 + 搜索框 -->
          <view class="search-header">
            <!-- 左侧下拉框 -->

            <view class="select-wrap common-text-color">

              <up-select
                  v-model:current="selectedSortValue"
                  :options="sortOptions"
                  :showOptionsLabel="true"
                  @select="handleSortChange"
                  border="surround"
                  :style="{ flex: 1 }"
              />
            </view>
  
            <!-- 右侧搜索框 -->
            <view class="search-input-wrap">
              <up-search
                  v-model="searchValue"
                  placeholder="请输入关键字"
                  @search="handleSearch"
                  bg-color="#f5f5f5"
                  :clearabled="false"
                  :show-action="true"
                  actionText="搜索"
                  :animation="true"
                  @custom="handleSearch"
              />
            </view>
          </view>
        </view>
      </up-sticky>
  
      <!-- 列表容器 -->
      <z-paging
          ref="paging"
          v-model="orderList"
          @query="queryList"
          :auto-show-system-loading="true"

      >

        <template #empty>
          <empty-view/>
        </template>
  
        <view class="common-card-list" style="padding-top: 200rpx;padding-bottom: 30rpx">
          <!-- 待办工单卡片 -->
          <up-card
              v-if="activeTab == 0"
              :border="false"
              :foot-border-top="false"
              v-for="(item, index) in orderList"
              :key="`todo_${item.orderNo}_${index}`"
              :show-head="false"
              class="order-card"
          >
            <template #body>
              <view class="card-body">
                <view class="u-body-item u-flex">
                  <view class="u-body-item-title">工单编号：</view>
                  <view class="u-line-1 u-body-value">{{ item.orderNo || '-' }}</view>
                </view>

                <view class="u-body-item u-flex" @click="openMapNav(item)">

                  <view class="u-body-item-title">工单位置：</view>

                  <view class="u-line-1 u-body-value">{{ item.lonLatAddress || '-' }}</view>

                </view>
                <view class="u-body-item u-flex">
                  <view class="u-body-item-title">工单名称：</view>
                  <view class="u-line-1 u-body-value">{{ item.orderName || '未填写' }}</view>
                </view>
                <view class="u-body-item u-flex">
                  <view class="u-body-item-title">情况描述：</view>
                  <view class="u-line-1 u-body-value">{{ item.remark || '无' }}</view>
                </view>
                <view class="u-body-item u-flex  common-item-center common-justify-between">
                  <view class="u-body-item-title">紧急程度：</view>
                  <view class="u-line-1 u-body-value">
                    {{ uni.$dict.getDictLabel('workorder_pressing_type', item.pressingType) }}
                  </view>
                </view>
                <view class="u-body-item u-flex">

                  <view class="u-body-item-title">工单状态：</view>
                  <view class="u-line-1 u-body-value">{{buzStatusMap[item.buzStatus] }}</view>
                </view>
                <view class="u-body-item u-flex">

                  <view class="u-body-item-title">提交时间：</view>
                  <view class="u-line-1 u-body-value">{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
                </view>
                <!-- 操作按钮行 -->

                <view class="u-body-item task-btn-row mt-20">
                  <!-- 已配置工作流动作：按配置逐个渲染按钮，点击直接执行对应动作，不再弹「请选择操作」 -->
                  <template v-if="hasConfiguredActions(item)">
                    <view
                        v-for="action in item.configuredActions"
                        :key="action.code"
                        :class="['task-btn', 'task-btn--' + getActionButtonType(action.code)]"
                        @click.stop="handleUnifiedProcess(item, action)"
                    >{{ action.name }}</view>
                    <view class="task-btn task-btn--info" @click.stop="handleDetail(item)">详情</view>
                  </template>
                  <!-- 未配置：沿用原有节点按钮 -->
                  <template v-else>
                    <view v-if="showRejectButton(item)" class="task-btn task-btn--warning"
                          @click.stop="handleUnifiedReject(item)">回退</view>
                    <view v-if="nextStepMap[item.taskKey]?.renewShow" class="task-btn task-btn--success"
                          @click.stop="handleRenew(item)">重新提交</view>
                    <view class="task-btn task-btn--primary"
                          @click.stop="handleUnifiedProcess(item)">{{ getProcessButtonText(item) }}</view>
                    <view class="task-btn task-btn--info" @click.stop="handleDetail(item)">详情</view>
                  </template>

                </view>
              </view>

            </template>
          </up-card>
  
          <!-- 已办工单卡片和我发起的 -->
          <up-card
              v-if="activeTab == 2||activeTab == 1"
              :border="false"
              :foot-border-top="false"
              v-for="(item, index) in orderList"
              :key="`done_${item.orderNo}_${index}`"
              :show-head="false"
              class="order-card"
          >
            <template #body>
              <view class="card-body">

  
  <!--              <view class=" ">-->
  <!--                <up-button type="primary" size="mini" @click="handleDetail(item)">工单详情</up-button>-->
  <!--              </view>-->
                <view class="common-custom-btn " style="--btn-top: 130px;"  @click="handleDetail(item)">
                  工单详情
                </view>
  

                <view class="u-body-item u-flex">
                  <view class="u-body-item-title">工单编号：</view>
                  <view class="u-line-1 u-body-value">{{ item.orderNo || '-' }}</view>
                </view>

                <view class="u-body-item u-flex" @click="openMapNav(item)">

                  <view class="u-body-item-title">工单位置：</view>

                  <view class="u-line-1 u-body-value">{{ item.lonLatAddress || '-' }}</view>

                </view>
                <view class="u-body-item u-flex">
                  <view class="u-body-item-title">工单名称：</view>
                  <view class="u-line-1 u-body-value">{{ item.orderName || '未填写' }}</view>
                </view>
                <view class="u-body-item u-flex">
                  <view class="u-body-item-title">情况描述：</view>
                  <view class="u-line-1 u-body-value">{{ item.remark || '无' }}</view>
                </view>

                <view class="u-body-item u-flex common-justify-between common-item-center">

                  <view class="u-body-item-title">紧急程度：{{ uni.$dict.getDictLabel('workorder_pressing_type', item.pressingType) }}

                  </view>

  <!--                <view class=" ">-->
  <!--                  <up-button type="primary" size="mini" @click="handleDetail(item)">工单详情</up-button>-->
  <!--                </view>-->

                </view>
                <view class="u-body-item u-flex">

                  <view class="u-body-item-title">工单状态：</view>
                  <view class="u-line-1 u-body-value">{{buzStatusMap[item.buzStatus] }}</view>
                </view>
                <view class="u-body-item u-flex">

                  <view class="u-body-item-title">提交时间：</view>
                  <view class="u-line-1 u-body-value">{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
                </view>

              </view>

            </template>
          </up-card>
        </view>

      </z-paging>
  
      <!-- 底部新增工单按钮（仅巡查员显示） -->
      <view v-if="isInspector" class="fixed-bottom-btn-wrap">
        <up-button type="primary" size="large" @click="handleAddOrder">
          新增工单
        </up-button>
      </view>
  

      <!-- 回退原因弹窗：替换为up-modal（核心修改） -->
      <up-modal
          :show="rejectModalShow"
          title="回退原因"
          :closeOnClickOverlay="false"
          :showConfirmButton="true"
          :showCancelButton="true"
          @cancel="handleRejectModalCancel"
          @confirm="confirmReject"
      >
        <view class="reject-modal-content">
          <!-- 回退原因 必填textarea -->

          <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（含图片上传） -->

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

  
      <!-- 统一节点动作弹窗（工作流配置化，未配置时回退原有逻辑） -->
      <unified-task-actions ref="unifiedActionsRef" @success="handleUnifiedSuccess" />

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

  import { ref, computed, watch } from 'vue';

  import { onShow, onLoad, onUnload } from '@dcloudio/uni-app';

  import { timeFormat } from '@/uni_modules/uview-plus';

  import {
    myBuzSimplePage,
    todoBuzSimplePage,
    doneBuzSimplePage,

    universalApproval,
    getTaskActions

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

  // 从用户store获取角色信息

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

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

  // 引入图片上传组合式函数（与参考页面一致）
  import { useUploadImgs } from '@/common/utils/useUploadImgs'
  

  // ========== 状态管理 ==========
  const userStore = useUserStore();
  // 标签页切换

  const activeTab = ref(0); //0-待办 1-已办 2-我发起的任务

  const tabList = ref([

    {name: '待办'},

    {name: '已办'},

    {name: '我发起的'}

  ]);
  // 排序下拉框
  const selectedSortValue = ref(1);
  const sortOptions = ref([

    {name: '位置', id: 1},
    {name: '名称', id: 2},
    {name: '描述', id: 3},
    {name: '编号', id: 4},

  ]);
  // 搜索
  const searchValue = ref('');
  // 分页
  const paging = ref(null);
  const orderList = ref([]);
  // 角色控制（巡查员显示新增按钮）
  const isInspector = computed(() => {

    // 增加可选链，避免用户信息不存在报错

    // patrol_global  全域巡查员
    // regional_manager  大区经理
  

    return ['yl_inspector', 'zxgl_inspector', 'hjws_inspector'].some(role => userStore.userInfo?.roles?.includes(role)) || false;

  });

  // 回退弹窗相关

  const rejectModalShow = ref(false); // 回退modal显示开关
  const rejectReason = ref(''); // 回退原因

  const currentRejectItem = ref(null); // 当前回退工单

  // 回退图片上传配置（与参考页面风格一致）

  const rejectImgs = useUploadImgs({

    maxCount: 3, // 最多上传3张

    uploadText: '选择回退图片', // 自定义上传提示文字

    sizeType: ['compressed'], // 仅上传压缩图
    formRef: null, // 该弹窗无表单校验
    fieldName: 'rejectImgs' // 自定义字段名

  })
  

  // ========== 验收弹窗相关状态（含图片上传） ==========

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

  // 验收图片上传配置（独立实例，参考回退弹窗）
  const acceptImgs = useUploadImgs({
    maxCount: 3, // 最多上传3张，与回退弹窗一致
    uploadText: '选择验收图片', // 自定义上传提示文字
    sizeType: ['compressed'], // 仅上传压缩图，优化性能
    formRef: null, // 验收弹窗无表单校验
    fieldName: 'acceptImgs' // 自定义字段名，区分回退图片
  })
  

  // 打开地图导航
  const openMapNav = (item) => {
    // 校验经纬度
    // if (!item.lat || !item.lon) {
    //   uni.showToast({ title: "该工单无经纬度，无法导航", icon: "none" });
    //   return;
    // }
    // const latitude = Number(item.lat);
    // const longitude = Number(item.lon);
    // const addressName = item.lonLatAddress || "工单位置";
  
    // uni.openLocation({
    //   latitude,
    //   longitude,
    //   name: addressName, // 终点名称
    //   address: addressName, // 地址描述
    //   scale: 16, // 地图缩放级别
    //   success: () => {
    //     // 唤起地图选择弹窗成功，用户可以选择高德/百度地图进行导航
    //   },
    //   fail: (err) => {
    //     console.error("打开地图失败", err);
    //     uni.showToast({ title: "打开地图失败", icon: "none" });
    //   }
    // });
  };
  
  

  // 分页查询列表
  const queryList = async (pageNo, pageSize) => {
    try {
      const apiParams = {
        searchContent: searchValue.value.trim() || '',
        pageNo,
        pageSize,

        type: selectedSortValue.value // 1-位置 2-问题类型 3-情况描述 4-工单编号

      };

      let res;

      // 0-待办 1-已办 2-我发起的任务

      if (activeTab.value == 0) {

        // 待办工单

        res = await todoBuzSimplePage(apiParams);

      } else if (activeTab.value == 2) {

        // 我发起的任务
        res = await myBuzSimplePage(apiParams);

      } else {

        // 已办工单

        res = await doneBuzSimplePage(apiParams);

      }

      // 待办列表：预取各任务的统一动作配置，供底部按钮显隐使用
      if (activeTab.value == 0) {
        await attachConfiguredActions(res.list);
      }

      // 适配z-paging分页
      paging.value.complete(res.list, res.total);
    } catch (error) {
      console.error('加载工单失败：', error);
      paging.value?.complete(false);

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

    }
  };

  // ========== 事件处理 ==========
  // 标签页切换

  const handleTabChange = (item) => {

    orderList.value = [];

    console.log(item)
    activeTab.value = item.index;

    paging.value?.reload(); // 切换标签页刷新列表
  };

  // 排序变更
  const handleSortChange = (val) => {
    selectedSortValue.value = val.id;
    searchValue.value = '';
    paging.value?.reload(); // 排序变更刷新列表
  };

  // 搜索
  const handleSearch = (val) => {
    searchValue.value = val;
    paging.value?.reload(); // 搜索刷新列表
  };

  // const isRefreshing = ref(false);
  // const refreshList = () => {
  //   if (isRefreshing.value) return;
  //   isRefreshing.value = true;
  //   paging.value?.reload().finally(() => {
  //     setTimeout(() => {
  //       isRefreshing.value = false;
  //     }, 500);
  //   });
  // };

  // 工单详情
  const handleDetail = (item) => {

    // 0-待办 1-已办 2-我发起的任务

    uni.navigateTo({

      url: `/pages-sub/problem/work-order-manage/order-detail?taskId=${item.taskId}&activeTab=${activeTab.value}&processInstanceId=${item.processInstanceId}`,
      events: {
        // 自定义事件名：needRefresh（与详情页保持一致）
        needRefresh: () => {
          console.log('详情页返回，触发工单列表刷新');
          if (paging.value) {
            paging.value.reload(); // 刷新z-paging列表
          }
        }
      }

    });
  };

  // 生成临时key

  const generateTempKey = () => {
    return 'renew_order_' + Date.now() + '_' + Math.floor(Math.random() * 10000);
  };
  
  // 待办-重新提交工单（改造后：大数据存本地，仅传唯一标识）
  const handleRenew = (item) => {
    // 校验工单有效性
    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}`
    });
  };
  

  // ========== 统一节点动作（工作流配置化） ==========
  const unifiedActionsRef = ref(null)
  
  /** 查询当前任务是否已配置统一动作；未配置或接口异常时返回 null，回退原有逻辑 */
  const queryUnifiedActions = async (item) => {
    if (!item || !item.taskId) return null
    try {
      const data = await getTaskActions(item.taskId)
      if (data && data.configured && Array.isArray(data.actions) && data.actions.length > 0) {
        return data.actions
      }
    } catch (e) {
      console.warn('查询统一节点动作失败，回退原有逻辑', e)
    }
    return null
  }
  

  /** 待办列表：批量预取统一动作配置，挂在行数据上供按钮显隐复用 */
  const attachConfiguredActions = async (list) => {
    if (!Array.isArray(list) || list.length === 0) return
    await Promise.all(list.map(async (item) => {
      item.configuredActions = await queryUnifiedActions(item)
    }))
  }
  
  /** 驳回类动作编码：只有配置了这些动作，才展示「回退」按钮 */
  const REJECT_ACTION_CODES = ['REJECT', 'RETURN', 'RETURN_PREV']
  
  /** 回退按钮显隐：已配置统一动作时以配置为准，未配置时沿用原有节点规则 */
  const showRejectButton = (item) => {
    if (Array.isArray(item?.configuredActions)) {
      return item.configuredActions.some((action) => REJECT_ACTION_CODES.includes(action.code))
    }
    return !!nextStepMap[item.taskKey]?.backShow
  }
  
  /** 主按钮文案：已配置统一动作时取配置的动作名称，未配置时沿用原有节点规则 */
  const getProcessButtonText = (item) => {
    const actions = item?.configuredActions
    if (Array.isArray(actions) && actions.length > 0) {
      return actions[0].name || actions[0].code
    }
    return nextStepMap[item.taskKey]?.btnText
  }
  

  /** 是否已配置统一动作（配置后按配置逐个渲染动作按钮） */
  const hasConfiguredActions = (item) =>
      Array.isArray(item?.configuredActions) && item.configuredActions.length > 0
  
  /** 待办-处理工单：已配置统一动作时直接执行点击的配置动作，否则回退原有处理 */
  const handleUnifiedProcess = async (item, action = null) => {

    const actions = Array.isArray(item?.configuredActions)
        ? item.configuredActions
        : await queryUnifiedActions(item)

    if (actions) {

      // 传入的动作即用户点击的配置按钮，直接执行该动作，不再弹「请选择操作」二次选择
      unifiedActionsRef.value?.open(item, [action || actions[0]])

      return
    }
    handleProcess(item)
  }
  
  /** 待办-回退：已配置统一动作时走新逻辑，否则回退原有弹窗 */
  const handleUnifiedReject = async (item) => {

    const actions = Array.isArray(item?.configuredActions)
        ? item.configuredActions
        : await queryUnifiedActions(item)

    if (actions) {
      const rejectActions = actions.filter((action) =>
          ['REJECT', 'RETURN', 'RETURN_PREV'].includes(action.code)
      )
      if (rejectActions.length > 0) {
        unifiedActionsRef.value?.open(item, rejectActions)
      } else {
        uni.showToast({ title: '当前节点未配置回退动作', icon: 'none' })
      }
      return
    }
    handleReject(item)
  }
  
  /** 统一动作执行成功后刷新列表 */
  const handleUnifiedSuccess = () => {
    paging.value?.reload()
  }
  

  // 待办-处理工单
  const handleProcess = async (item) => {

    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}&busiLine=${item.busiLine}`

        })
      }

      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'; // 重置默认选中“通过”
        acceptModalShow.value = true; // 显示验收弹窗
      }

      // 巡查员验收 - 打开弹窗

      if (nextStepMap[item.taskKey]?.name == '巡查员验收') {

        currentAcceptItem.value = item; // 存储当前工单信息
        acceptReason.value = ''; // 清空上次的验收原因
        acceptRadioValue.value = '0'; // 重置默认选中“通过”
        acceptModalShow.value = true; // 显示验收弹窗
      }
  

      // 发起人确认
      if (nextStepMap[item.taskKey]?.name == '发起人确认') {
        console.log(item)

        uni.showModal({
          title: "结束工单",
          content: "请确定是否结束工单？",
          success: async function (res) {
            if (res.confirm) {
              // 构建请求参数
              const requestData = {

                "returnImgs": rejectImgs.getSuccessImgUrls(), // 改造后：获取上传成功的图片URL

                "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});
              rejectModalShow.value = false;
              paging.value?.reload(); // 刷新列表
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      }

    } catch (error) {
      console.error('处理工单失败：', error);

      uni.showToast({title: error.msg||'处理失败，请重试', icon: 'none'});

    }
  };

  // 待办-回退工单（打开回退modal）

  const handleReject = (item) => {

    console.log('123213')
    // 校验工单有效性
    if (!item || !item.id) {
      uni.showToast({title: '工单信息异常，无法回退', icon: 'none'});
      return;
    }

    currentRejectItem.value = item;

    rejectReason.value = ''; // 清空上次输入

    rejectImgs.clearImgs(); // 改造后：使用组合式函数的清空方法

    rejectModalShow.value = true; // 显示回退modal
  };

  // 回退modal - 取消按钮
  const handleRejectModalCancel = () => {
    rejectModalShow.value = false;

    rejectReason.value = '';

    rejectImgs.clearImgs(); // 改造后：使用组合式函数的清空方法

  };

  // 确认回退工单
  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});

      console.log( currentRejectItem.value.roadId)

      // 构建请求参数
      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,
        "roadId": currentRejectItem.value.roadId,   //  给督察员回退的 要加上

      };

      // 调用回退工单接口

      const res = await universalApproval(requestData);
      uni.showToast({title: '回退成功', icon: 'success', duration: 1000});
      rejectModalShow.value = false;

      paging.value?.reload(); // 刷新列表
    } catch (error) {
      console.error('回退工单失败：', error);

      uni.showToast({title:  error.msg||'回退失败', icon: 'none', duration: 1000});

    } finally {
      // 隐藏加载中
      uni.hideLoading();

    }
  };

  // 新增工单
  const handleAddOrder = () => {
    uni.navigateTo({

      url: '/pages-sub/problem/work-order-manage/add-order'

    });
  };

  // 验收弹窗 - 取消按钮（清空状态）
  const handleAcceptModalCancel = () => {
    acceptModalShow.value = false;
    acceptReason.value = ''; // 清空验收原因
    acceptRadioValue.value = '0'; // 重置单选框为“通过”
    acceptImgs.clearImgs(); // 清空验收图片
  };
  
  // 验收弹窗 - 确定按钮（含returnImgs传参）

  const handleAcceptModalConfirm = async () => {
    // 1. 校验验收原因是否为空

    if (acceptRadioValue.value == 1 && !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. 构建请求参数（含returnImgs）

      console.log(currentAcceptItem.value)
      let postData = {}

      if (currentAcceptItem.value?.taskKey == 'ylTeamLeaderConfirm') {   // 养护组长验收

        postData = {

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

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

          "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. 操作成功处理

      uni.showToast({title: '提交成功', icon: 'success', duration: 1000});

      handleAcceptModalCancel(); // 清空状态

      paging.value?.reload(); // 刷新工单列表
    } catch (error) {
      // 5. 操作失败处理

      console.error('验收失败：', error);

      uni.showToast({title: error.msg||'验收提交失败，请重试', icon: 'none', duration: 1000});

    }
  };

  // 页面初始化

  onLoad(() => {

    // 初始化加载列表
    paging.value?.reload();

    uni.$on('refreshWorkOrderList', () => {
      console.log('监听到工单刷新事件，执行列表刷新');
      if (paging.value) {
        paging.value.reload(); // 刷新z-paging列表
      }
    });
  });
  onUnload(() => {
    uni.$off('refreshWorkOrderList');

  });
  </script>
  
  <style scoped lang="scss">
  .page-container {
    min-height: 100vh;

    background-color: #fafafa;

  }
  
  // 顶部固定区域
  .header-wrap {
    background-color: #fff;

  }
  
  // 搜索栏样式
  .search-header {
    display: flex;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;
  
    .select-wrap {
      width: 120rpx;
      margin-right: 20rpx;
  
      :deep(.u-select) {
        width: 100%;
        font-size: 28rpx;
      }
  
      :deep(.u-input__placeholder) {
        font-size: 28rpx;
      }
    }
  
    .search-input-wrap {
      flex: 1;
    }
  }
  

  // 工单卡片样式
  .order-card {
    margin: 0 20rpx 20rpx;
    background: #fff;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  }

  // 卡片操作按钮：自动换行、右对齐，动作多时每行 3~4 个，不再整行铺满
  .task-btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: -10rpx;
  }
  
  .task-btn {
    box-sizing: border-box;
    height: 56rpx;
    line-height: 56rpx;
    padding: 0 24rpx;
    margin: 0 0 10rpx 12rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #fff;
    white-space: nowrap;
  }
  
  .task-btn--primary {
    background-color: #3c9cff;
  }
  
  .task-btn--success {
    background-color: #5ac725;
  }
  
  .task-btn--warning {
    background-color: #f9ae3d;
  }
  
  .task-btn--error {
    background-color: #f56c6c;
  }

  .task-btn--info {
    background-color: #909399;

  }

  // 回退modal样式
  .reject-modal-content {
    width: 100%;
    box-sizing: border-box;
    padding: 10rpx 0;
  }
  
  .textarea-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
  
    .required-mark {
      color: #f56c6c;
      margin-left: 4rpx;
    }
  }
  

  .upload-wrap {
    margin-top: 20rpx;
  
    .upload-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
    }
  }
  
  .mt-20 {
    margin-top: 20rpx;
  }
  

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

  // 养护组长验收弹窗样式

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

  }

  .modal-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10rpx;
  }

  </style>