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">
                <view class="u-body-item-title">工单位置：</view>
                <view class="u-line-1 u-body-value">{{ item.roadName || '-' }}</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 == 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="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.roadName || '-' }}</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"
        />
<!--        &lt;!&ndash; 上传图片（选填）- 按照参考页面改造 &ndash;&gt;-->
<!--        <view class="upload-wrap mt-20">-->
<!--          <view class="upload-title">上传图片（选填）</view>-->
<!--          <up-upload-->
<!--              :file-list="rejectImgs.imgList"-->
<!--              @after-read="rejectImgs.uploadImgs"-->
<!--              @delete="rejectImgs.deleteImg"-->
<!--              multiple-->
<!--              :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="acceptModalShow=false"
        @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>
    </up-modal>
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { onReady, onShow } from '@dcloudio/uni-app';
import { timeFormat } from '@/uni_modules/uview-plus';
import {
  myBuzSimplePage,
  todoBuzSimplePage,
  doneBuzSimplePage,
  universalApproval
} from '@/api/work-order-manage/work-order-manage'
// 假设从用户store获取角色信息
import { useUserStore } from '@/pinia/user';
import { nextStepMap, buzStatusMap } 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(() => {
  // 增加可选链，避免用户信息不存在报错
  return userStore.userInfo?.roles?.includes('yl_inspector') || false;
});
// 回退弹窗相关（核心改造：使用useUploadImgs替代原始图片管理）
const rejectModalShow = ref(false); // 回退modal显示开关
const rejectReason = ref(''); // 回退原因
const currentRejectItem = ref(null); // 当前回退工单

// ========== 核心改造：回退图片上传配置（与参考页面风格一致） ==========
const rejectImgs = useUploadImgs({
  maxCount: 3, // 最多上传3张，与原有逻辑一致
  uploadText: '选择回退图片', // 自定义上传提示文字
  sizeType: ['compressed'], // 仅上传压缩图，优化性能
  formRef: null, // 该弹窗无表单校验，传null即可
  fieldName: 'rejectImgs' // 自定义字段名，用于标识该上传实例
})

// 监听上传实例响应式变化，解决u-upload不刷新问题（与参考页面一致）
watch(() => rejectImgs.rawImgList.value, (newVal) => {
  rejectImgs.imgList = newVal
}, { deep: true })

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

// 分页查询列表
const queryList = async (pageNo, pageSize) => {
  try {
    const apiParams = {
      searchContent: searchValue.value.trim() || '',
      pageNo,
      pageSize,
      type: selectedSortValue.value // 1-位置 2-工单名称 3-情况描述 4-工单编号
    };
    let res;
    if (activeTab.value == 0) {
      // 待办工单
      res = await todoBuzSimplePage(apiParams);
    } else if (activeTab.value == 1) {
      // 我发起的任务
      res = await myBuzSimplePage(apiParams);
    } else {
      // 已办工单
      res = await doneBuzSimplePage(apiParams);
    }
    // 适配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) => {
  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 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}`
  });
};

// 生成临时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 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}`
      })
    }
    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}`
      })

      // uni.navigateTo({
      //   url: `/pages-sub/problem/work-order-manage/add-maintain-order?taskId=${item.taskId}&id=${item.id}&orderNo=${item.orderNo}`
      // })
    }
    // 养护组长验收 - 打开弹窗
    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: '处理失败，请重试', 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: 2000});
    return;
  }
  // 校验当前工单有效性
  if (!currentRejectItem.value || !currentRejectItem.value.id) {
    uni.showToast({title: '工单信息异常，无法提交', icon: 'none', duration: 2000});
    rejectModalShow.value = false;
    return;
  }
  try {
    // 显示加载中，防止重复提交
    uni.showLoading({title: '提交中...', mask: true});

    // 构建请求参数
    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;
    paging.value?.reload(); // 刷新列表
  } catch (error) {
    console.error('回退工单失败：', error);
    uni.showToast({title: '网络异常，回退失败', icon: 'none', duration: 1000});
  } finally {
    // 隐藏加载中
    uni.hideLoading();
  }
};

// 新增工单
const handleAddOrder = () => {
  uni.navigateTo({
    url: '/pages-sub/problem/work-order-manage/add-order'
  });
};

// ========== 验收弹窗事件 ==========
// 验收弹窗 - 确定按钮（含表单校验）
const handleAcceptModalConfirm = async () => {
  // 1. 校验验收原因是否为空
  if (!acceptReason.value.trim()) {
    uni.showToast({title: '请填写验收原因', icon: 'none', duration: 2000});
    return;
  }
  // 2. 校验验收原因长度
  if (acceptReason.value.length > 200) {
    uni.showToast({title: '验收原因最多200字', icon: 'none', duration: 2000});
    return;
  }
  try {
    // 3. 调用验收接口
    console.log(currentAcceptItem.value)
    let postData = {}
    if (currentAcceptItem.value?.taskKey == 'ylTeamLeaderConfirm') {   // 养护组长验收
      postData = {
        "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 = {
        "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. 操作成功处理
    uni.showToast({title: '提交成功', icon: 'success', duration: 1500});
    acceptModalShow.value = false;
    acceptReason.value = ''; // 清空验收原因
    paging.value?.reload(); // 刷新工单列表
  } catch (error) {
    // 5. 操作失败处理
    console.error('养护组长验收失败：', error);
    uni.showToast({title: '验收提交失败，请重试', icon: 'none', duration: 2000});
  }
};

// 页面初始化
onShow(() => {
  // 初始化加载列表
  paging.value?.reload();
});
</script>

<style scoped lang="scss">
.page-container {
  min-height: 100vh;
  background-color: #fafafa;
}

// 顶部固定区域
.header-wrap {
  background-color: #fff;
  //box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

// 搜索栏样式
.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);
}

.card-body {

}


// 回退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;
  }
}

.reject-textarea {
  font-size: 28rpx;
  padding: 16rpx;
  border: 1rpx solid #e4e7ed;
  border-radius: 8rpx;
}

.upload-wrap {
  margin-top: 20rpx;

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

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

// 养护组长验收弹窗样式
.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>