chore: 审批附件

apps/web-antd/src/api/system/oss/index.ts

@@ -18,7 +18,7 @@ export function ossList(params?: PageQuery) {
 }
 
 export function ossInfo(ossIds: IDS) {
-  return requestClient.get<OssFile>(`${Api.ossInfo}/${ossIds}`);
+  return requestClient.get<OssFile[]>(`${Api.ossInfo}/${ossIds}`);
 }
 
 /**

apps/web-antd/src/api/workflow/instance/model.d.ts

@@ -25,7 +25,7 @@ export interface Flow {
   flowTaskStatus?: any;
   flowStatusName?: any;
   message: string;
-  ext?: any;
+  ext: null | string;
   createBy?: any;
   formCustom: string;
   formPath: string;

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

@@ -22,14 +22,14 @@ defineOptions({
 const props = defineProps<{ task?: TaskInfo }>();
 
 const currentFlowInfo = ref<FlowInfoResponse>();
-watch(
-  () => props.task,
-  async (task) => {
-    if (!task) return null;
-    const resp = await flowInfo(task.businessId);
-    currentFlowInfo.value = resp;
-  },
-);
+
+async function handleLoadInfo(task: TaskInfo | undefined) {
+  if (!task) return null;
+  const resp = await flowInfo(task.businessId);
+  currentFlowInfo.value = resp;
+}
+
+watch(() => props.task, handleLoadInfo);
 
 onUnmounted(() => (currentFlowInfo.value = undefined));
 </script>
@@ -42,6 +42,13 @@ onUnmounted(() => (currentFlowInfo.value = undefined));
     class="thin-scrollbar flex-1 overflow-y-hidden"
     size="small"
   >
+    <template #extra>
+      <a-button size="small" @click="() => handleLoadInfo(task)">
+        <div class="flex items-center justify-center">
+          <span class="icon-[material-symbols--refresh] size-24px"></span>
+        </div>
+      </a-button>
+    </template>
     <div class="flex flex-col gap-5 p-4">
       <div class="flex flex-col gap-3">
         <div class="flex items-center gap-2">

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

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { Flow } from '#/api/workflow/instance/model';
+
+import { onMounted, ref } from 'vue';
+
+import { VbenAvatar } from '@vben/common-ui';
+import { DictEnum } from '@vben/constants';
+
+import { TimelineItem } from 'ant-design-vue';
+
+import { ossInfo } from '#/api/system/oss';
+import { renderDict } from '#/utils/render';
+
+defineOptions({
+  name: 'ApprovalTimelineItem',
+  inheritAttrs: false,
+});
+
+const props = defineProps<{ item: Flow }>();
+
+interface AttachmentInfo {
+  ossId: string;
+  url: string;
+  name: string;
+}
+
+/**
+ * 处理附件信息
+ */
+const attachmentInfo = ref<AttachmentInfo[]>([]);
+onMounted(async () => {
+  if (!props.item.ext) {
+    return null;
+  }
+  const resp = await ossInfo(props.item.ext.split(','));
+  attachmentInfo.value = resp.map((item) => ({
+    ossId: item.ossId,
+    url: item.url,
+    name: item.originalName,
+  }));
+});
+</script>
+
+<template>
+  <TimelineItem :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 v-if="attachmentInfo.length > 0" class="flex flex-wrap gap-2">
+        <!-- 这里下载的文件名不是原始文件名 -->
+        <a
+          v-for="attachment in attachmentInfo"
+          :key="attachment.ossId"
+          :href="attachment.url"
+          class="text-primary"
+        >
+          {{ attachment.name }}
+        </a>
+      </div>
+    </div>
+  </TimelineItem>
+</template>

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>