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>

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

            <!-- 竖向步骤条：动态绑定current属性 -->
            <up-steps
                v-if="processData.activityNodes && processData.activityNodes.length"
                :list="processData.activityNodes"
                :current="getCurrentStepIndex()"
            direction="column"
            active-color="#3c9cff"
            inactive-color="#999"
            class="vertical-steps"
            >
            <up-steps-item
                v-for="(item, index) in processData.activityNodes"
                :key="`${item.id}_${index}`"
            >
              <!-- 唯一自定义模板：content，包含标题、描述、相册所有内容 -->
              <template #content>
                <view class="step-content-wrap">
                  <!-- 1. 原标题内容：节点名称 + 操作人 -->
                  <view class="step-title">
                    {{ item.name }}
                    <text class="operator-name">
                      {{ item.tasks && item.tasks[0]?.assigneeUser?.nickname ? '（' + item.tasks[0].assigneeUser.nickname + '）' : '（未知操作人）' }}
                    </text>
                  </view>
  
                  <!-- 2. 原描述内容：时间 + 处理说明（最多200字） -->
                  <view class="step-desc">
                    <!-- 时间行 -->
                    <view class="time-line">
                      处理时间：{{ timeFormat(item.startTime, 'yyyy-mm-dd hh:MM:ss') }}
                      <text v-if="item.endTime"> - {{ timeFormat(item.endTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
                      <text v-else class="processing-tag">（处理中）</text>
                    </view>
                    <!-- 原因行 -->
                    <view class="reason-line up-line-2" v-if="item.tasks && item.tasks[0]?.reason">
                      描述：{{ getLimitReason(item.tasks && item.tasks[0]?.reason) }}
                    </view>
                  </view>
  
                  <!-- 3. 原相册内容：预留up-album -->
                  <view class="step-album-wrap">
                    <up-album
                        v-if="item.tasks && item.tasks[0]?.signPicUrl && item.tasks[0].signPicUrl.length"
                        :urls="item.tasks[0].signPicUrl.slice(0, 3)"
                        singleSize="60"
                        multipleSize="60"
                        :preview-full-image="true"
                        class="step-album"
                    ></up-album>
                  </view>
                </view>
              </template>
            </up-steps-item>
            </up-steps>
  
            <!-- 流程节点为空时的提示 -->
            <up-empty
                v-else
                mode="data"
                title="暂无流程节点数据"
                class="empty-process"
            ></up-empty>

          </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 processData = ref<any>({
    status: 2,
    activityNodes: [],
    formFieldsPermission: null,
    todoTask: null
  });
  

  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)

      // 关键：格式化数据，补充up-steps要求的title字段
      if (res && res.activityNodes && res.activityNodes.length) {
        const formatActivityNodes = res.activityNodes.map(node => ({
          ...node,
          title: node.name // 补充强制字段，满足3.3.48版本组件要求
        }));
        processData.value = {
          ...res,
          activityNodes: formatActivityNodes
        };
      } else {
        processData.value = 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]
  })
  

  /**
   * 截取reason最多200字
   * @param reason 处理说明
   * @returns 截取后的字符串
   */
  const getLimitReason = (reason: string | null | undefined) => {
    if (!reason) return '无处理说明';
    if (reason.length <= 200) return reason;
    return reason.substring(0, 200) + '...';
  }
  
  /**
   * 动态获取当前步骤索引（核心：根据接口数据的status字段判断）
   * status=1：当前步骤（处理中）
   * status=2：已完成步骤
   * @returns {number} 当前激活的步骤索引（从0开始）
   */
  const getCurrentStepIndex = () => {
    const { activityNodes } = processData.value;
    if (!activityNodes || !activityNodes.length) return 0;
  
    // 1. 查找第一个状态为1（处理中）的节点，即为当前步骤
    const processingNodeIndex = activityNodes.findIndex(node => node.status === 1);
    if (processingNodeIndex !== -1) {
      return processingNodeIndex;
    }
  
    // 2. 若没有处理中的节点（全部已完成），则激活最后一个节点
    return activityNodes.length - 1;
  }

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

  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(() => {

    // 注释原有逻辑，避免重复加载

  });

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

  
    // 图片内容区
    .img-tab-content {

      padding: 20rpx 15px ;

      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 {

    //padding: 16rpx;
    //min-height: 400rpx;

    .empty-process {
      margin-top: 100rpx;
    }

  
    // 竖向步骤条容器样式
    .vertical-steps {
      //width: 100%;
      background-color: #fff;
      padding: 20rpx;
      border-radius: 12rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx; // 步骤项间距
    }
  
    // 自定义内容容器样式
    .step-content-wrap {
      width: 100%;
      //padding: 10rpx 0;
      box-sizing: border-box;
  
      // 节点标题 + 操作人样式
      .step-title {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 12rpx;
  
        .operator-name {
          font-size: 30rpx;
          font-weight: 600;
          color: #333;
          margin-left: 20rpx;
        }
      }
  
      // 描述（时间 + 处理说明）样式
      .step-desc {
        font-size: 24rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 12rpx;
  
        .time-line {
          margin-bottom: 8rpx;
  
          .processing-tag {
            color: #f59e0b;
            margin-left: 10rpx;
          }
        }
  
        .reason-line {
          word-break: break-all; // 长文本自动换行
        }
      }
  
      // 相册容器样式
      .step-album-wrap {
        padding: 10rpx 0;
  
        .step-album {
          width: 100%;
          max-width: 300rpx;
        }
  
        .no-img-tip {
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
        }
      }
    }

  }
  </style>