JCSS / jcss-miniprogram

  <template>
    <view class="page-container">
      <!-- 页面级加载组件 -->
      <up-loading-page
          v-if="loading"
          :loading="true"
          title="加载中..."
          color="#3c9cff"
      ></up-loading-page>
  
      <!-- 主内容容器 -->
      <view v-else class="main-content">
        <!-- 顶部固定Tabs -->

        <up-sticky :bgColor="'#fff'">
          <up-tabs
              v-model="activeTopTab"
              :list="topTabList"
              :scrollable="false"
              sticky
              active-color="#3c9cff"
              inactive-color="#666"
              class="top-tabs"
              @click="activeTopTabClick"
          ></up-tabs>
        </up-sticky>
  

  
        <!-- 顶部Tab内容区 -->
        <view class="tab-content">
          <!-- 1. 工单详情Tab -->
          <view v-show="activeTopTab == 0" class="detail-content">

            <up-cell-group :border="false" class="detail-cell-group">

              <!-- 工单编号 -->
              <up-cell title="工单编号" :value="orderDetail.orderNo || '--'" align="middle"></up-cell>

              <!-- 工单位置 -->
              <up-cell align="middle">

                <template #title>

                  <view style="min-width: 200rpx">工单位置</view>

                </template>
                <template #value>
                  <view class="common-text-color up-line-1">{{ orderDetail.roadName || '--' }}</view>
                </template>
              </up-cell>

              <!-- 工单名称 -->
              <up-cell title="工单名称" :value="orderDetail.orderName || '--'" align="middle"></up-cell>

              <!-- 情况描述 -->

              <up-cell>

                <template #title>

                  <view style="min-width: 200rpx">情况描述</view>

                </template>
                <template #value>
                  <view class="common-text-color up-line-1">{{ orderDetail.remark || '--' }}</view>
                </template>
              </up-cell>

              <!-- 紧急程度 -->
              <up-cell
                  title="紧急程度"
                  :value="uni.$dict.getDictLabel('workorder_pressing_type', orderDetail.pressingType) || '--'"
                  align="middle"
              ></up-cell>
  

              <!-- 提交人 -->
              <up-cell title="提交人" :value="orderDetail.userName || '--'" align="middle"></up-cell>
  
              <!-- 提交时间 -->
              <up-cell
                  title="提交时间"
                  :value="timeFormat(orderDetail.createTime, 'yyyy-mm-dd hh:MM:ss') || '--'"
                  align="middle"
              ></up-cell>
  
              <!-- 处理结果 -->
              <up-cell>
                <template #title>
                  <view style="min-width: 200rpx">处理结果</view>
                </template>
                <template #value>
                  <view class="common-text-color up-line-1">{{ orderDetail.handleResult || '--' }}</view>
                </template>
              </up-cell>
  
              <!-- 街道名称 -->
              <up-cell title="街道名称" :value="orderDetail.streetName || '--'" align="middle"></up-cell>
  

              <!-- 问题照片 -->
              <up-cell title="问题照片">
                <template #value>
                  <view class="cell-content-wrap">
                    <up-album

                        v-if="!!orderDetail.problemsImgs?.length"
                        :urls="orderDetail.problemsImgs.slice(0, 3)"

                        singleSize="70"
                        :preview-full-image="true"
                    ></up-album>
                    <text v-else class="empty-text">暂无问题照片</text>
                  </view>
                </template>
              </up-cell>

              <!-- 希望完成时间 -->
              <up-cell
                  title="希望完成时间"

                  :value="orderDetail.finishDate === 0 ? '未设置' : timeFormat(orderDetail.finishDate, 'yyyy-mm-dd hh:MM:ss')"

                  align="middle"
                  :border="false"
              ></up-cell>
            </up-cell-group>
  

            <!-- 图片分类Tabs区块 -->

            <view class="img-tabs-block" v-if="orderDetail.startImgs.length>0">
              <up-cell-group :border="false">
                <up-cell>
                <template #title>
                  <view style="min-width: 200rpx">共同处理人</view>
                </template>
                <template #value>
                  <view class="common-text-color up-line-1">{{ orderDetail.coHandlersName || '--' }}</view>
                </template>
                </up-cell>
              </up-cell-group>
              <!--            coHandlersName-->

              <up-tabs

                  @change='imgTabChange'

                  v-model="activeImgTab"
                  :list="imgTabList"
                  :scrollable="false"
                  active-color="#3c9cff"
                  inactive-color="#666"
                  class="img-tabs"
              ></up-tabs>
  
              <!-- 图片Tab内容区 -->
              <view class="img-tab-content">
                <up-album
                    v-if="currentImgList.length"
                    :urls="currentImgList.slice(0, 3)"
                    singleSize="80"
                    multipleSize="80"
                    :preview-full-image="true"
                    class="img-album"
                ></up-album>
                <text v-else class="empty-img-text">暂无图片</text>
              </view>
            </view>

          </view>
  
          <!-- 2. 流程节点Tab -->
          <view v-show="activeTopTab == 1" class="process-content">

            <!--          <up-empty-->
            <!--              mode="data"-->
            <!--          ></up-empty>-->
            <!--          &lt;!&ndash; 可根据实际需求补充流程节点展示逻辑 &ndash;&gt;-->

          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script setup lang="ts">

  import {ref, computed} from 'vue';
  import {onLoad, onShow} from '@dcloudio/uni-app';
  import {timeFormat} from '@/uni_modules/uview-plus';
  import {
    getMyTaskDetail,
    getDoneTaskDetail,
    getTodoTaskDetail,
    getApprovalDetail
  } from '@/api/work-order-manage/work-order-manage';

  
  // 状态管理
  const loading = ref(true);
  const activeTopTab = ref(0); // 顶部Tab激活索引
  const activeImgTab = ref(0); // 图片分类Tab激活索引
  
  // 顶部Tab列表
  const topTabList = ref([

    {name: '工单详情'},
    {name: '流程节点'}

  ]);
  

  const activeTopTabClick = async (item: any) => {

    console.log(item)
    activeTopTab.value = item.index

    if (activeTopTab.value == 1) {

      let getData = {

        processInstanceId: processInstanceId.value,

      }

      const res = await getApprovalDetail(getData)

      console.log(res)
    }

  }
  
  // 图片分类Tab列表（带角标配置）
  const imgTabList = ref([

    {name: '开始', badge: {isDot: true}},
    {name: '进行中'},
    {name: '结束', badge: {isDot: true}},
    {name: '人员'},
    {name: '材料'}

  ]);
  

  // 工单详情数据（初始化赋值，可被接口数据覆盖）
  const orderDetail = ref<any>({
    id: 0,
    busiLine: '',
    orderNo: '',
    orderName: '',
    sourceId: 0,
    sourceName: '',
    roadId: 0,
    roadName: '',
    streetId: '',
    streetName: '',
    curingLevelId: 0,
    curingLevelName: '',
    commitDate: 0,
    finishDate: 0,
    pressingType: 0,
    userId: 0,
    userName: '',
    companyId: 0,
    latLonType: 0,
    lat: 0,
    lon: 0,
    lonLatAddress: '',
    thirdWorkNo: '',
    thirdPushState: 0,
    buzStatus: null,
    status: 0,
    processInstanceId: '',
    remark: '',
    handleResult: '',
    createTime: 0,
    fileNames: null,
    coHandlers: null,
    coHandlersName: null,
    companyName: null,
    userMobile: null,
    taskId: '',
    taskName: '',
    taskKey: '',
    processDefinitionName: '',
    startTime: 0,
    endTime: 0,
    key_: '',
    problemsImgs: [],
    startImgs: [],
    processingImgs: [],
    endImgs: [],
    personImgs: [],
    materialImgs: []
  });

  
  /**

   * 当前激活的图片列表（无需函数调用，直接访问）

   */

  const currentImgList = ref([])
  
  const tabKeyMap = ['startImgs', 'processingImgs', 'endImgs', 'personImgs', 'materialImgs'];

  const imgTabChange = (({index}) => {

    console.log(index)
    const currentKey = tabKeyMap[index]
    console.log(currentKey)
    console.log(orderDetail.value[currentKey])
    currentImgList.value = orderDetail.value[currentKey]
  })
  

  
  /**
   * 获取工单详情
   */

  const DetailQuery = async (taskIdStr: string) => {
    console.log('当前工单ID：', taskIdStr)

    try {
      loading.value = true;

      // 转换activeTab为数字类型，避免类型不一致导致接口调用失败
      const tabType = Number(activeTab.value);
      let res: any;
  
      if (tabType === 0) {

        res = await getTodoTaskDetail({taskId: taskIdStr});

      } else if (tabType === 1) {

        res = await getMyTaskDetail({taskId: taskIdStr});

      } else if (tabType === 2) {

        res = await getDoneTaskDetail({taskId: taskIdStr});

      } else {

        uni.showToast({title: '无效的工单类型', icon: 'none'});

        return;

      }

      // 覆盖工单详情数据
      if (res) {
        orderDetail.value = res;

        currentImgList.value = orderDetail.value.startImgs

      }

    } catch (error) {
      console.error('获取工单详情失败：', error);

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

    } finally {
      loading.value = false;
    }
  };
  

  // 页面加载参数

  const taskId = ref('')
  const activeTab = ref('')

  const processInstanceId = ref('')
  onLoad((options: any) => {
    console.log('页面入参：', options)

    const {taskId: taskIdOpt, activeTab: activeTabOpt, processInstanceId: processInstanceIdOpt} = options;

    // 0-待办 1-我发起的 2-已办
    taskId.value = taskIdOpt || '';
    activeTab.value = activeTabOpt || '0';

    processInstanceId.value = processInstanceIdOpt;
    DetailQuery(taskId.value);

  });

  onShow(() => {

    // if (taskId.value) {
    //   DetailQuery(taskId.value);
    // } else {
    //   loading.value = false;
    //   uni.showToast({title: '缺少工单ID参数', icon: 'none'});
    // }

  });

  </script>
  
  <style scoped lang="scss">
  // 全局样式
  .page-container {
    min-height: 100vh;

  }
  
  // 主内容容器
  .main-content {
    padding-bottom: 20rpx;
  }
  
  // 顶部Tabs
  .top-tabs {
    //background-color: #fff;
  }
  
  // Tab内容区
  .tab-content {

    //padding: 16rpx;

  }
  
  // 工单详情内容
  .detail-content {
    .detail-cell-group {
      background-color: #fff;

      margin-bottom: 20rpx;
    }
  

    .cell-content-wrap {

      // 保持原有样式，兼容up-album布局

    }
  

    .empty-text {
      color: #999;
      font-size: 26rpx;
    }

  }
  
  // 图片分类Tabs区块
  .img-tabs-block {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 16rpx;
  

    //// 图片Tabs样式（平均分配空间）
    //.img-tabs {
    //  --u-tabs-item-flex: 1; // 平均分配空间
    //  --u-tabs-item-font-size: 26rpx;
    //  --u-tabs-item-height: 72rpx;
    //  margin-bottom: 16rpx;
    //}

  
    // 图片内容区
    .img-tab-content {
      padding: 10rpx 0;
      min-height: 120rpx;
      display: flex;
      align-items: center;
      justify-content: center;
  
      .img-album {
        width: 100%;
      }
  

      .empty-img-text {
        height: 100px;
        line-height: 100px;
        color: #999;
        font-size: 28rpx;
      }

    }
  }
  
  // 流程节点空状态
  .process-content {

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400rpx;
  

    .empty-process {
      margin-top: 100rpx;
    }
  }
  </style>