JCSS / jcss-miniprogram

  <template>
    <view class="page-container">
      <!-- 顶部固定区域 -->
      <up-sticky>
        <view class="header-wrap">

          <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="pagingRef"

          v-model="orderList"
          @query="queryList"
          :auto-show-system-loading="true"

      >
        <template #empty>

          <empty-view />

        </template>
  

        <view class="common-card-list">

          <up-card

              :border="false"
              :foot-border-top="false"
              v-for="(item, index) in orderList"

              :key="item.id || index"

              :show-head="false"
              class="order-card"
          >
            <template #body>
              <view class="card-body">

  <!--              <view v-if="activeTab !== 0" class="ml-10">-->
  <!--                <up-button type="primary" size="mini" @click="handleDetail(item)">工单详情</up-button>-->
  <!--              </view>-->
  
                <view class="common-custom-btn " v-if="activeTab !== 0"  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">
                  <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="u-line-1 u-body-value flex-1 text-right">-->
  <!--                  {{ uni.$dict.getDictLabel('workorder_pressing_type', item.pressingType) || '-' }}-->
  <!--                </view>-->
                  <!-- 只有 我发起的(1)、已办(2) 显示该行的详情按钮 -->

  <!--                <view v-if="activeTab !== 0" class="ml-10">-->
  <!--                  <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">{{ item.createTime ? timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') : '-' }}</view>

                </view>

  
                <!-- 待办工单(0) 保留原来的操作按钮区 不变 -->

                <view v-if="activeTab === 0" class="u-body-item u-body-item-btn-wrap u-flex common-justify-between common-item-center mt-20">

                  <up-button type="warning" size="large" @click="handleUnifiedReject(item)" v-show="nextStepMap[item.taskKey].backShow">回退</up-button>

                  <up-button type="success" size="large" @click="handleRenew(item)" v-show="nextStepMap[item.taskKey].renewShow">重新提交</up-button>

                  <up-button type="primary" size="large" @click="handleUnifiedProcess(item)">{{ nextStepMap[item.taskKey].btnText }}</up-button>

                  <up-button type="info" size="large" @click="handleDetail(item)">详情</up-button>

                </view>

                <!-- 已删除：原来单独的【我发起的/已办】按钮区，不需要了 -->

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

      <!-- 底部新增工单按钮 -->

      <view class="fixed-bottom-btn-wrap" v-if="isAi">

        <up-button type="primary" size="large" @click="handleAddOrder">新增工单</up-button>

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

          <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 } from 'vue';

  import { onShow, onLoad } from '@dcloudio/uni-app';
  import { timeFormat } from '@/uni_modules/uview-plus';
  import {
    myBuzSimplePage,
    todoBuzSimplePage,
    doneBuzSimplePage,

    qyUniversalApproval,
    daquUniversalApproval,

    dcyUniversalApproval,
    aiUniversalApproval

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

  import { getTaskActions } from '@/api/work-order-manage/work-order-manage'

  import { useUserStore } from '@/pinia/user';
  import { nextStepMap, buzStatusMap } from '@/common/utils/common'

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

  
  // ========== 全局实例 & 常量 ==========

  const userStore = useUserStore();

  const USER_ROLES = userStore.userInfo?.roles || [];
  
  // ========== 基础状态 (按模块分组，语义化更强) ==========
  // tab切换

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

  const tabList = [{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 pagingRef = ref(null);

  const orderList = ref([]);

  // ========== 角色权限计算属性 ==========

  const isAi = computed(() => {

    const roles = USER_ROLES || [];

    // AI工单派发人员 不显示新增按钮，其他角色显示

    return !roles.includes('AI_dispatcher');

  });

  
  // ========== 回退弹窗相关 ==========
  const rejectModalShow = ref(false);
  const rejectReason = ref('');
  const currentRejectItem = ref(null);

  const rejectImgs = useUploadImgs({

    maxCount: 3, uploadText: '选择回退图片', sizeType: ['compressed'], formRef: null, fieldName: 'rejectImgs'

  })

  
  // ========== 验收弹窗相关 ==========
  const acceptModalShow = ref(false);
  const acceptRadioValue = ref('0'); // 默认通过
  const acceptReason = ref('');
  const currentAcceptItem = ref(null);

  const acceptImgs = useUploadImgs({

    maxCount: 3, uploadText: '选择验收图片', sizeType: ['compressed'], formRef: null, fieldName: 'acceptImgs'

  })

  
  // ========== 公共封装方法 (核心优化：消灭重复代码) ==========
  /**

   * 统一提示方法
   */
  const showToast = (title, icon = 'none', duration = 2000) => {
    uni.showToast({ title, icon, duration });
  };
  
  /**
   * z-paging 统一操作，处理空指针
   */
  const pagingHandle = (method, ...args) => {
    const paging = pagingRef.value;
    if (paging && typeof paging[method] === 'function') {
      paging[method](...args);
    }
  };
  
  /**

   * 生成统一的临时存储key

   */
  const generateTempKey = (prefix = 'order') => {
    return `${prefix}_${Date.now()}_${Math.floor(Math.random() * 10000)}`;
  };
  
  /**
   * 存储工单数据到本地缓存

   */
  const setOrderStorage = (item, prefix) => {
    if (!item?.id) return null;
    const tempKey = generateTempKey(prefix);
    try {
      uni.setStorageSync(tempKey, item);
      return tempKey;
    } catch (error) {
      console.error('存储工单数据失败：', error);

      showToast('数据存储异常，请重试');

      return null;
    }
  };
  
  /**
   * 获取分页请求公共参数

   */
  const getQueryParams = (pageNo, pageSize) => {
    return {
      searchContent: searchValue.value.trim() || '',
      pageNo,
      pageSize,
      type: selectedSortValue.value
    };
  };
  
  /**
   * 统一调用审批接口

   */
  const callApprovalApi = async (params, taskKey) => {

    if (taskKey === 'aiRegionManager') return await aiUniversalApproval(params);

    if (taskKey === 'shRegionManager') return await dcyUniversalApproval(params);
    if (taskKey === 'regionManager') return await qyUniversalApproval(params);

    if (USER_ROLES.includes('regional_manager')) return await daquUniversalApproval(params);
    if (USER_ROLES.includes('Inspector_global')) return await dcyUniversalApproval(params);
    if (USER_ROLES.includes('patrol_global')) return await qyUniversalApproval(params);

    // if (USER_ROLES.includes('AI_dispatcher')) return await  aiUniversalApproval(params);

    throw new Error('未匹配到对应的审批接口，请检查角色或工单taskKey');

  };
  
  /**

   * 统一跳转工单页面 (支持携带回调事件)

   */

  const navToOrderPage = (path, query = {}, events = {}) => {
    const queryStr = Object.keys(query).map(k => `${k}=${encodeURIComponent(query[k])}`).join('&');
    const url = `${path}${queryStr ? '?' + queryStr : ''}`;
    if(Object.keys(events).length) {
      uni.navigateTo({ url, events });
    } else {
      uni.redirectTo({ url });
    }

  };
  
  /**

   * 刷新列表

   */

  const refreshOrderList = () => pagingHandle('reload');

  
  // ========== 业务核心方法 ==========

  // 分页查询列表
  const queryList = async (pageNo, pageSize) => {
    try {

      const params = getQueryParams(pageNo, pageSize);

      let res;

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

      if (activeTab.value === 0) res = await todoBuzSimplePage(params);

      else if (activeTab.value === 2) res = await myBuzSimplePage(params);

      else res = await doneBuzSimplePage(params);

      pagingHandle('complete', res?.list || [], res?.total || 0);

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

      pagingHandle('complete', false);
      showToast('加载失败，请重试');

    }
  };

  // 标签页切换
  const handleTabChange = (item) => {

    activeTab.value = item.index;

    orderList.value = [];
    refreshOrderList();

  };

  // 排序变更
  const handleSortChange = (val) => {
    selectedSortValue.value = val.id;
    searchValue.value = '';

    refreshOrderList();

  };

  // 搜索
  const handleSearch = (val) => {
    searchValue.value = val;

    refreshOrderList();

  };

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

    if (!item?.taskId) return showToast('工单信息异常');
    navToOrderPage('/pages-sub/problem/regional-order-manage/order-detail', {
      taskId: item.taskId,
      activeTab: activeTab.value,
      processInstanceId: item.processInstanceId
    }, {
      needRefresh: () => {
        console.log('详情页返回，触发工单列表刷新');
        refreshOrderList();

      }
    });

  };

  
  // 重新提交工单

  const handleRenew = (item) => {

    if (!item?.id) return showToast('工单信息异常，无法重新提交');

    const tempKey = setOrderStorage(item, 'renew_order');
    if (!tempKey) return;

    const pageUrl = USER_ROLES.includes('patrol_global')
        ? '/pages-sub/problem/regional-order-manage/add-patrol-order'
        : '/pages-sub/problem/regional-order-manage/add-order';

    navToOrderPage(pageUrl, { isRenew: 1, 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 handleUnifiedProcess = async (item) => {
    const actions = await queryUnifiedActions(item)
    if (actions) {
      unifiedActionsRef.value?.open(item, actions)
      return
    }
    handleProcess(item)
  }
  
  /** 待办-回退：已配置统一动作时走新逻辑，否则回退原有弹窗 */
  const handleUnifiedReject = async (item) => {
    const actions = 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 = () => {
    pagingHandle('reload')
  }
  

  const handleProcess = async (item) => {

    if (!item) return showToast('工单信息异常');

    const stepName = nextStepMap[item.taskKey]?.name;

    if (!stepName) return showToast('暂无处理权限或工单状态异常');

    try {

      // 大区经理分配
      if (stepName === '大区经理分配') {
        const tempKey = setOrderStorage(item, 'distribute_order');
        tempKey && navToOrderPage('/pages-sub/problem/regional-order-manage/distribution-order', { tempKey });

      }

      // 督察员单子大区经理分配
      else if (stepName === '督察员单子大区经理分配') {

        uni.showModal({
          title: "分配工单",
          content: "请确定是否分配工单？",
          success: async (res) => {
            if (res.confirm) {
              const postData = { taskKey: item.taskKey, taskId: item.taskId, operateType:60, workerDataId:item.id, agree:0, reason:item.remark, roadId:item.roadId, roadName:item.roadName, pressingType:item.pressingType, orderName:item.orderName, expectedFinishDate: item.expectedFinishDate, busiLine:item.busiLine };
              await dcyUniversalApproval(postData);
              showToast('分配成功', 'success');
              refreshOrderList();
            }
          }
        });
  

      }

      // ai单子大区经理分配
      else if (stepName === 'ai单子大区经理分配') {
        uni.showModal({
          title: "分配工单",
          content: "请确定是否分配工单？",
          success: async (res) => {
            if (res.confirm) {
              const postData = { taskKey: 'shRegionManager', taskId: item.taskId, operateType:40, workerDataId:item.id, agree:0, reason:item.remark, roadId:item.roadId, roadName:item.roadName, pressingType:item.pressingType, orderName:item.orderName, expectedFinishDate: item.expectedFinishDate, busiLine:item.busiLine };
              await aiUniversalApproval(postData);
              showToast('分配成功', 'success');
              refreshOrderList();
            }
          }
        });
      }
  
  

      // 验收弹窗
      else if (['巡查员验收', '养护组长验收'].includes(stepName)) {
        currentAcceptItem.value = item;
        acceptReason.value = '';
        acceptRadioValue.value = '0';
        acceptModalShow.value = true;

      }

      // 发起人确认-结束工单
      else if (stepName === '发起人确认') {

        uni.showModal({
          title: "结束工单",
          content: "请确定是否结束工单？",

          success: async (res) => {

            if (res.confirm) {

              const requestData = {

                workerDataId: item.id, taskKey: 'ylInspectorStart', taskId: item.taskId,
                operateType: 200, agree: 1, reason: '结束工单'

              };

              await callApprovalApi(requestData, item.taskKey);

              showToast('结束成功', 'success');

              refreshOrderList();

            }

          }

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

      showToast(error.msg || error.message || '处理失败，请重试');

    }
  };

  
  // 回退工单-打开弹窗

  const handleReject = (item) => {

    if (!item?.id) return showToast('工单信息异常，无法回退');

    currentRejectItem.value = item;

    rejectReason.value = '';
    rejectImgs.clearImgs();
    rejectModalShow.value = true;

  };

  
  // 关闭回退弹窗-重置状态

  const handleRejectModalCancel = () => {
    rejectModalShow.value = false;
    rejectReason.value = '';

    rejectImgs.clearImgs();

  };

  // 确认回退工单
  const confirmReject = async () => {

    const reason = rejectReason.value.trim();

    if (!reason) return showToast('请填写回退原因');

    const item = currentRejectItem.value;

    if (!item?.id) return showToast('工单信息异常');

  
    uni.showLoading({title: '提交中...', mask: true});

    try {

      const requestData = {

        returnImgs: rejectImgs.getSuccessImgUrls(), workerDataId: item.id, taskKey: item.taskKey,
        taskId: item.taskId, operateType: nextStepMap[item.taskKey].operateTypeNoPass, agree:1, reason

      };

      await callApprovalApi(requestData, item.taskKey);

      showToast('回退成功', 'success');

      handleRejectModalCancel();
      refreshOrderList();

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

      showToast(error.msg || error.message || '回退失败，请重试');

    } finally {

      uni.hideLoading();
    }
  };

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

    const pageUrl = USER_ROLES.includes('patrol_global')
        ? '/pages-sub/problem/regional-order-manage/add-patrol-order'
        : '/pages-sub/problem/regional-order-manage/add-order';
    navToOrderPage(pageUrl);

  };

  
  // 关闭验收弹窗-重置状态

  const handleAcceptModalCancel = () => {
    acceptModalShow.value = false;

    acceptReason.value = '';
    acceptRadioValue.value = '0';
    acceptImgs.clearImgs();

  };

  
  // 验收提交

  const handleAcceptModalConfirm = async () => {

    const reason = acceptReason.value.trim();

    if (!reason) return showToast('请填写验收原因');
    if (reason.length > 200) return showToast('验收原因最多200字');

  
    const item = currentAcceptItem.value;

    if (!item?.id) return showToast('工单信息异常');

    uni.showLoading({title: '提交中...', mask: true});

    try {
      const postData = {
        returnImgs: acceptImgs.getSuccessImgUrls(), taskKey: item.taskKey, workerDataId: item.id,
        taskId: item.taskId, agree: acceptRadioValue.value, reason,
        operateType: acceptRadioValue.value === '0' ? nextStepMap[item.taskKey].operateTypePass : nextStepMap[item.taskKey].operateTypeNoPass
      };
      await callApprovalApi(postData, item.taskKey);

      showToast('提交成功', 'success');

      handleAcceptModalCancel();
      refreshOrderList();

    } catch (error) {

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

      showToast(error.msg || error.message || '验收提交失败，请重试');
    } finally {
      uni.hideLoading();

    }
  };

  
  // ========== 页面生命周期 ==========

  onLoad(() => {

    refreshOrderList();

  });
  </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), :deep(.u-input__placeholder) {

        width: 100%;
        font-size: 28rpx;
      }

    }
  
    .search-input-wrap {
      flex: 1;
    }
  }
  

  // 工单列表样式
  .common-card-list {
    padding: calc(var(--status-bar-height) + 140rpx) 0 30rpx;
    box-sizing: border-box;
  }
  

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

  .u-body-item-btn-wrap :deep(.u-button--large){
    height: 28px;
  }
  
  

  // 新增样式：解决按钮和文字间距、排版问题
  .flex-1 { flex: 1; }
  .text-right { text-align: right; }
  .ml-10 { margin-left: 10rpx; }
  

  // 弹窗公共样式
  .reject-modal-content, .accept-modal-content {

    width: 100%;
    box-sizing: border-box;
    padding: 10rpx 0;
  }
  

  .upload-wrap {

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

  // 验收弹窗单选框样式

  .radio-group-wrap {
    display: flex;
    align-items: center;

    gap: 40rpx;

    font-size: 28rpx;
    margin-bottom: 20rpx;
  }
  
  .textarea-wrap {
    width: 100%;

  }

  // 间距公共样式
  .mt-20 { margin-top: 20rpx; }
  .mt-30 { margin-top: 30rpx; }

  </style>