zhxy-jsd/src/pages/view/hr/jsQj/components/progressList.vue

<template>
  <view class="approval-progress">
    <view class="progress-title">
      <!-- <image src="/static/icons/approval.png" class="title-icon"></image> -->
      <text class="applicant-name">审批进度</text>
    </view>
    <view class="divider"></view>
    <view class="progress-list">
      <view class="progress-item" v-for="(task, index) in taskList" :key="index">
        <view class="progress-item-row">
          <view class="item-avatar">
            <image
              :src="task.avatar || '/static/base/home/11222.png'"
              class="w-full h-full"
            ></image>
          </view>
          <view class="item-middle">
            <text class="item-name">{{ task.name }}</text>
            <text class="item-detail">{{ task.assignee || '' }}</text>
          </view>
          <view class="item-right">
            <text class="item-time" v-if="task.endTime">{{ task.endTime }}</text>
            <text class="item-status" v-else>待处理</text>
          </view>
        </view>
        <view class="progress-item-line" v-if="index < taskList.length - 1"></view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getQjActivitiHistoryApi } from "@/api/base/jsQjApi";
// 接收外部传入属性
const props = withDefaults(defineProps<{
  procInstId: string
}>(), {
  procInstId: ''
});

// 工作流
const taskList = ref<any[]>([]);

const loadList = async (procInstId: string) => {
  const res = await getQjActivitiHistoryApi({ processInstanceId: procInstId });
  const list = res.result || [];
  // list反向
  taskList.value = list.reverse();
}

watch(() => props.procInstId, (newVal, oldVal) => {
  // 添加回调函数处理逻辑
  console.log('procInstId changed:', newVal, oldVal);
  if (newVal) {
    loadList(newVal);
  }
});

if (props.procInstId) {
  loadList(props.procInstId);
}
</script>

<style lang="scss" scoped>
.approval-progress {
  margin: 15px;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

  .progress-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;

    .title-icon {
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }

    .applicant-name {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }

  .divider {
    height: 1px;
    background-color: #eee;
    margin-bottom: 15px;
  }

  .progress-list {
    display: flex;
    flex-direction: column;

    .progress-item {
      .progress-item-row { 
        display: flex;
        align-items: center;
        .item-avatar {
          flex: 0 0 40px;
          height: 40px;
        }

        .item-middle {
          margin-left: 16px;
          display: flex;
          flex-direction: column;
        }

        .item-right {
          flex: 1 0 1px;
          display: flex;
          align-items: flex-end;
        }
      }
      .progress-item-line {
        width: 1px;
        height: 30px;
        background-color: #999;
        margin: 10px 20px;
      }
    }


    .item-name {
      font-size: 16px;
      font-weight: bold;
    }

    .item-detail {
      font-size: 14px;
      color: #666;
    }

    .item-time,
    .item-status {
      font-size: 14px;
      color: #999;
      margin-left: auto;
    }
  }
}
</style>