labsop_scientific_h5/pages/todo/components/ApprovalFlowTable.vue

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

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

const props = defineProps({
  id: { type: Number, default: 0 }
});

const flowStore = useApprovalFlowStore();

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,
        type: item.type,
        actType: item.actType,
        items: [] as any[]
      };
    }
    map[key].items.push(item);
  });
  return Object.values(map);
});

watch(() => props.id, (val) => {
  if (val) flowStore.fetchByProcInstId(val);
}, { immediate: true });
</script>

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