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">{{ 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)">回退</up-button>
                <up-button type="primary" size="mini" @click="handleProcess(item)">处理</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">{{ 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-popup v-model="rejectPopupShow" mode="center" :close-on-click-overlay="false">
        <view class="reject-popup">
          <view class="popup-title">回退原因</view>
          <up-textarea
              v-model="rejectReason"
              placeholder="请输入回退原因（必填）"
              :required="true"
              maxlength="-1"
              rows="4"
              class="mt-20"
          />
          <view class="upload-wrap mt-20">
            <view class="upload-title">上传图片（选填）</view>
            <up-upload
                :action="uploadUrl"
                :file-list="rejectFileList"
                @after-read="handleAfterRead"
                @delete="handleDeleteFile"
                multiple
                max-count="3"
            />
          </view>
          <view class="popup-btn-wrap mt-40">
            <up-button type="default" size="medium" @click="rejectPopupShow = false" class="mr-20">取消</up-button>
            <up-button type="primary" size="medium" @click="confirmReject">确认提交</up-button>
          </view>
        </view>
      </up-popup>
    </view>
  </template>
  
  <script setup>

  import { ref, computed } from 'vue';
  import { onReady, onShow } from '@dcloudio/uni-app';

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

  import { myBuzSimplePage, todoBuzSimplePage, doneBuzSimplePage } from '@/api/work-order-manage/work-order-manage'

  // 假设从用户store获取角色信息
  import { useUserStore } from '@/pinia/user';

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

  
  // ========== 状态管理 ==========
  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(() => {
    // 假设用户角色字段为role，巡查员标识为inspector

    return userStore.userInfo.roles.includes('yl_inspector')

  });
  // 回退弹窗相关
  const rejectPopupShow = ref(false);
  const rejectReason = ref('');
  const rejectFileList = ref([]);
  const currentRejectItem = ref(null);
  // 上传地址（根据实际接口配置）
  const uploadUrl = ref('https://xxx.com/upload');
  

  
  // 分页查询列表
  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}`

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

    console.log(nextStepMap)

    try {

      if(nextStepMap[item.taskKey] == '养护组长分配'){
        uni.navigateTo({
          url: `/pages-sub/problem/work-order-manage/add-order?taskId=${item.taskId}&orderNo=${item.orderNo}`
        })
      }
  
      if(nextStepMap[item.taskKey] == '养护员待实施'){
        uni.navigateTo({
          url: `/pages-sub/problem/work-order-manage/add-maintain-order?taskId=${item.taskId}&orderNo=${item.orderNo}`
        })

      }
    } catch (error) {
      console.error('处理工单失败：', error);
      uni.showToast({ title: '处理失败，请重试', icon: 'none' });
    }
  };
  
  // 待办-回退工单
  const handleReject = (item) => {
    currentRejectItem.value = item;
    rejectReason.value = '';
    rejectFileList.value = [];
    rejectPopupShow.value = true;
  };
  
  // 确认回退工单
  const confirmReject = async () => {
    if (!rejectReason.value.trim()) {
      uni.showToast({ title: '请填写回退原因', icon: 'none' });
      return;
    }
  
    try {
      // 调用回退工单接口
      await uni.request({
        url: '/api/order/reject',
        method: 'POST',
        data: {
          orderId: currentRejectItem.value.id,
          reason: rejectReason.value,
          fileUrls: rejectFileList.value.map(file => file.url)
        }
      });
  
      uni.showToast({ title: '回退成功', icon: 'success' });
      rejectPopupShow.value = false;
      paging.value?.reload(); // 刷新列表
    } catch (error) {
      console.error('回退工单失败：', error);
      uni.showToast({ title: '回退失败，请重试', icon: 'none' });
    }
  };
  
  // 新增工单
  const handleAddOrder = () => {
    uni.navigateTo({

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

    });
  };
  

  
  // 上传图片-读取后
  const handleAfterRead = (file) => {
    rejectFileList.value.push(file);
  };
  
  // 上传图片-删除
  const handleDeleteFile = (index) => {
    rejectFileList.value.splice(index, 1);
  };
  
  // 页面初始化

  onShow(() => {

    // 初始化加载列表
    paging.value?.reload();
  });
  </script>
  
  <style scoped lang="scss">
  .page-container {
    min-height: 100vh;

  }
  
  // 顶部固定区域
  .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;
    }
  }
  

  </style>