chore: 审批附件

apps/web-antd/src/views/workflow/components/approval-timeline.vue

@@ -1,15 +1,9 @@
 <script setup lang="ts">
 import type { Flow } from '#/api/workflow/instance/model';
 
-import { Timeline, TimelineItem } from 'ant-design-vue';
+import { Timeline } from 'ant-design-vue';
 
-/**
- * TODO: 仅为demo 后期会替换
- */
-import { VbenAvatar } from '@vben/common-ui';
-import { DictEnum } from '@vben/constants';
-
-import { renderDict } from '#/utils/render';
+import ApprovalTimelineItem from './approval-timeline-item.vue';
 
 const props = defineProps<{
   list: Flow[];
@@ -17,26 +11,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <Timeline>
-    <TimelineItem v-for="item in props.list" :key="item.id">
-      <template #dot>
-        <div class="relative rounded-full border">
-          <VbenAvatar :alt="item.approveName" class="size-[36px]" src="" />
-        </div>
-      </template>
-      <div class="ml-2 flex flex-col gap-0.5">
-        <div class="flex items-center gap-1">
-          <div class="font-bold">{{ item.nodeName }}</div>
-          <component
-            :is="renderDict(item.flowStatus, DictEnum.WF_TASK_STATUS)"
-          />
-        </div>
-        <div>{{ item.approveName }}</div>
-        <div>{{ item.updateTime }}</div>
-        <div v-if="item.message" class="rounded-lg border p-1">
-          <span class="opacity-70">{{ item.message }}</span>
-        </div>
-      </div>
-    </TimelineItem>
+  <Timeline v-if="props.list.length > 0">
+    <ApprovalTimelineItem
+      v-for="(item, index) in props.list"
+      :key="index"
+      :item="item"
+    />
   </Timeline>
 </template>