labsop_scientific_h5/pages/project/components/detail/FlowTable.vue

<template>
  <view class="container">
    <ApprovalFlow
      :list="groupedNodes"
      :currentNode="flowStore.currentNode"
      :loading="flowStore.fetchFlowLoading"
    />
  </view>
</template>

<script setup lang="ts">
import { watch, computed } from 'vue';
import { useFlowStore } from '@/store/modules/flow';
import ApprovalFlow from '@/components/ApprovalFlow.vue';

/**
 * 接收来自父组件的流程属性配置
 */
const props = defineProps({
  id: { type: Number, default: 0 },
  businessCode: { type: String, default: '' },
  defCode: { type: String, default: '' },
  memberList: { type: Array, default: () => [] }
});

// 引入统一的状态管理
const flowStore = useFlowStore();

// 将原始审批记录按节点分组
const groupedNodes = computed(() => {
  const list = flowStore.apprList || [];
  if (!list.length) return [];
  const map: Record<string, any> = {};
  list.forEach((item: any) => {
    const key = item.nodeId || `node_${item.nodeTitle || ''}`;
    if (!map[key]) {
      map[key] = {
        nodeId: item.nodeId,
        nodeTitle: item.nodeTitle,
        nodeType: item.nodeType,
        nodeModel: item.nodeModel,
        items: [] as any[]
      };
    }
    map[key].items.push(item);
  });
  return Object.values(map);
});

/**
 * 监听属性变化并在有传入的时候触发拉取审批流信息
 */
watch(
  () => props.id,
  (val) => {
    if (val) {
      flowStore.fetchFlowInstance(val, props.businessCode, props.defCode, props.memberList);
    }
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.container {
  padding: 0 10rpx;
}
</style>