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" 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.id}_${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">
                <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 u-flex common-justify-between common-item-center mt-20">
                <up-button type="warning" size="mini" @click="handleReject(item)" v-show="nextStepMap[item.taskKey].backShow">回退</up-button>
                <up-button type="success" size="mini" @click="handleRenew(item)" v-show="nextStepMap[item.taskKey].renewShow">重新提交</up-button>
                <up-button type="primary" size="mini" @click="handleProcess(item)">{{ nextStepMap[item.taskKey].btnText }}</up-button>
                <up-button type="info" size="mini" @click="handleDetail(item)">详情</up-button>
              </view>
            </view>
          </template>
        </up-card>

        <!-- 已办工单卡片和我发起的 -->
        <up-card
            v-if="activeTab === 1 || activeTab === 2"
            :border="false"
            :foot-border-top="false"
            v-for="(item, index) in orderList"
            :key="`done_${item.id}_${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">
                <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>
                  <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 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>
  </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 { 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 = 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 pagingRef = ref(null);
const orderList = ref([]);

// ========== 角色权限计算属性 (修复核心bug: 原代码取反逻辑写反) ==========
const isAi = computed(() => {
  // AI工单派发人员 不显示新增按钮，其他角色显示
  return !USER_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'
})

// ========== 公共封装方法 (核心优化：消灭重复代码) ==========
/**
 * 生成统一的临时存储key
 * @param {String} prefix 前缀标识
 * @returns {String} 唯一key
 */
const generateTempKey = (prefix = 'order') => {
  return `${prefix}_${Date.now()}_${Math.floor(Math.random() * 10000)}`;
};

/**
 * 存储工单数据到本地缓存
 * @param {Object} item 工单数据
 * @param {String} prefix key前缀
 * @returns {String|null} 成功返回key，失败返回null
 */
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);
    uni.showToast({title: '数据存储异常，请重试', icon: 'none'});
    return null;
  }
};

/**
 * 获取分页请求公共参数
 * @param {Number} pageNo 页码
 * @param {Number} pageSize 页大小
 * @returns {Object} 请求参数
 */
const getQueryParams = (pageNo, pageSize) => {
  return {
    searchContent: searchValue.value.trim() || '',
    pageNo,
    pageSize,
    type: selectedSortValue.value
  };
};

/**
 * 统一调用审批接口
 * @param {Object} params 请求参数
 * @param {String} taskKey 工单任务key
 * @returns {Promise} 接口请求Promise
 */
const callApprovalApi = async (params, taskKey) => {
  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);
};

/**
 * 统一跳转工单页面
 * @param {String} path 页面路径
 * @param {Object} query 拼接参数
 */
const navToOrderPage = (path, query = {}) => {
  const queryStr = Object.keys(query).map(k => `${k}=${query[k]}`).join('&');
  uni.navigateTo({ url: `${path}${queryStr ? '?' + queryStr : ''}` });
};

/**
 * 刷新列表 - 统一封装，避免空指针
 */
const refreshOrderList = () => {
  pagingRef.value && pagingRef.value.reload();
};

// ========== 业务核心方法 ==========
// 分页查询列表
const queryList = async (pageNo, pageSize) => {
  try {
    const params = getQueryParams(pageNo, pageSize);
    let res;
    if (activeTab.value === 0) res = await todoBuzSimplePage(params);
    else if (activeTab.value === 1) res = await myBuzSimplePage(params);
    else res = await doneBuzSimplePage(params);
    pagingRef.value.complete(res?.list || [], res?.total || 0);
  } catch (error) {
    console.error('加载工单失败：', error);
    pagingRef.value?.complete(false);
    uni.showToast({title: '加载失败，请重试', icon: 'none'});
  }
};

// 标签页切换
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 uni.showToast({title: '工单信息异常', icon: 'none'});
  navToOrderPage('/pages-sub/problem/regional-order-manage/order-detail', {
    taskId: item.taskId,
    activeTab: activeTab.value,
    processInstanceId: item.processInstanceId
  }, {
    needRefresh: () => refreshOrderList()
  });
};

// 重新提交工单
const handleRenew = (item) => {
  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 handleProcess = async (item) => {
  if (!item) return uni.showToast({title: '工单信息异常', icon: 'none'});
  const stepName = nextStepMap[item.taskKey]?.name;

  try {
    // 大区经理分配
    if (stepName === '大区经理分配') {
      const tempKey = setOrderStorage(item, 'distribute_order');
      tempKey && navToOrderPage('/pages-sub/problem/regional-order-manage/distribution-order', { tempKey });
    }
    // 督察员单子大区经理分配
    else if (stepName === '督察员单子大区经理分配') {
      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);
      uni.showToast({title: '分配成功', icon: '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);
            uni.showToast({title: '结束成功', icon: 'success'});
            refreshOrderList();
          }
        }
      });
    }
  } catch (error) {
    console.error('处理工单失败：', error);
    uni.showToast({title: '处理失败，请重试', icon: 'none'});
  }
};

// 回退工单-打开弹窗
const handleReject = (item) => {
  if (!item?.id) return uni.showToast({title: '工单信息异常，无法回退', icon: 'none'});
  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 uni.showToast({title: '请填写回退原因', icon: 'none'});
  const item = currentRejectItem.value;
  if (!item?.id) return uni.showToast({title: '工单信息异常', icon: 'none'});

  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);
    uni.showToast({title: '回退成功', icon: 'success'});
    handleRejectModalCancel();
    refreshOrderList();
  } catch (error) {
    console.error('回退工单失败：', error);
    uni.showToast({title: '回退失败，请重试', icon: 'none'});
  } 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 uni.showToast({title: '请填写验收原因', icon: 'none'});
  if (reason.length > 200) return uni.showToast({title: '验收原因最多200字', icon: 'none'});

  const item = currentAcceptItem.value;
  if (!item?.id) return uni.showToast({title: '工单信息异常', icon: 'none'});

  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);
    uni.showToast({title: '提交成功', icon: 'success'});
    handleAcceptModalCancel();
    refreshOrderList();
  } catch (error) {
    console.error('验收失败：', error);
    uni.showToast({title: '验收提交失败，请重试', icon: 'none'});
  }
};

// ========== 页面生命周期 ==========
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;
  }
}

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

// 弹窗公共样式
.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>