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  align="middle">
              <template #title>
                <view style="min-width: 200rpx">工单名称</view>
              </template>
              <template #value>
                <view class="common-text-color up-line-1">{{ orderDetail.orderName || '--' }}</view>
              </template>
            </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
                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.join(',') || '--' }}</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"
          >
            <template >
              <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]?.returnImgs && item.tasks[0].returnImgs.length"
                          :urls="item.tasks[0].returnImgs.slice(0, 3)"
                          singleSize="70"
                          multipleSize="70"
                          :preview-full-image="true"
                          class="step-album"
                      ></up-album>
                    </view>
                  </view>
                </template>
              </up-steps-item>
            </template>

          </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) {
      // 1. 先过滤：剔除 name 为 "结束" 的节点
      const filteredActivityNodes = res.activityNodes.filter(node => {
        // 返回 true 保留节点，返回 false 剔除节点
        return node.name !== '结束';
      });
      const formatActivityNodes = filteredActivityNodes.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;

  // item.tasks && item.tasks[0]?.assigneeUser?.nickname
  // 1. 查找第一个状态为1（处理中）的节点，即为当前步骤
  // const processingNodeIndex = activityNodes.findIndex(node => node.name === '结束');
  // console.log(processingNodeIndex)
  // if (processingNodeIndex !== -1) {
  //   return activityNodes.length - 2
  // }else{
  //   return activityNodes.length - 1
  // }

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