feat(components): 面板添加流程图

src/components/custom/workflow/approval-info-panel.vue

@@ -20,7 +20,7 @@ const props = defineProps<Props>();
 
 useDict('wf_task_status');
 
-const activeTab = ref('info');
+const activeTab = ref('image');
 
 const { loading, startLoading, endLoading } = useLoading();
 
@@ -155,8 +155,9 @@ const hisTask = ref<Api.Workflow.HisTask[]>([]);
 
 /** 初始化数据 */
 async function initData() {
+  activeTab.value = 'image';
+  instanceId.value = undefined;
   hisTask.value = [];
-  if (loading.value) return;
   startLoading();
   try {
     await getData();
@@ -166,16 +167,20 @@ async function initData() {
 }
 
 async function getData() {
+  startLoading();
   const { error, data } = await fetchGetFlowHisTaskList(props.businessId);
   if (error) {
     window.$message?.error(error.message);
     return;
   }
   instanceId.value = data?.instanceId || '';
-  hisTask.value = data?.list || [];
 
-  // 并行加载所有附件数据
+  const rawList = data?.list || [];
-  const promises = hisTask.value.map(async item => {
+  if (rawList.length === 0) {
+    hisTask.value = [];
+    return;
+  }
+  const promises = rawList.map(async item => {
     if (item.ext) {
       const { error: err, data: ossList } = await fetchGetOssListByIds(item.ext.split(','));
       if (!err) {
@@ -183,8 +188,9 @@ async function getData() {
       }
     }
   });
-
   await Promise.all(promises);
+  hisTask.value = rawList;
+  endLoading();
 }
 
 defineExpose({
@@ -196,23 +202,11 @@ defineExpose({
   <NDivider />
   <div>
     <NTabs v-model:value="activeTab" type="segment" animated>
-      <NTabPane bar-width="100px" name="info" tab="审批信息">
+      <NTabPane display-directive="show" bar-width="100px" name="image" tab="流程图">
-        <NDataTable
+        <FlowPreview v-if="instanceId" :instance-id="instanceId" />
-          size="small"
-          :scroll-x="760"
-          class="max-h-500px"
-          :columns="columns"
-          :data="hisTask"
-          :loading="loading"
-        />
       </NTabPane>
-      <NTabPane bar-width="100px" name="image" tab="流程图">
+      <NTabPane bar-width="100px" name="info" tab="审批信息">
-        "威尔！着火了！快来帮忙！"我听到女朋友大喊。现在一个难题在我面前——是恢复一个重要的 Amazon 服务，还是救公寓的火。
+        <NDataTable size="small" :scroll-x="760" :columns="columns" :data="hisTask" :loading="loading" />
-        <br />
-        <br />
-        我的脑海中忽然出现了 Amazon
-        著名的领导力准则"客户至上"，有很多的客户还依赖我们的服务，我不能让他们失望！所以着火也不管了，女朋友喊我也无所谓，我开始
-        debug 这个线上问题。
       </NTabPane>
     </NTabs>
   </div>

src/components/custom/workflow/flow-preview.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { stringify } from 'qs';
+import { getToken } from '@/store/modules/auth/shared';
+import { getServiceBaseURL } from '@/utils/service';
+
+defineOptions({
+  name: 'FlowPreview'
+});
+interface Props {
+  instanceId: CommonType.IdType;
+}
+const props = defineProps<Props>();
+
+const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y';
+const { baseURL } = getServiceBaseURL(import.meta.env, isHttpProxy);
+const urlParams = {
+  type: 'FlowChart',
+  id: props.instanceId,
+  Authorization: `Bearer ${getToken()}`,
+  clientid: import.meta.env.VITE_APP_CLIENT_ID || ''
+};
+
+const iframeUrl = `${baseURL}/warm-flow-ui/index.html?${stringify(urlParams)}`;
+</script>
+
+<template>
+  <div>
+    <iframe :src="iframeUrl" class="h-[400px] w-full" />
+  </div>
+</template>

src/components/custom/workflow/leave-edit/index.vue

@@ -233,7 +233,7 @@ onMounted(initializeData);
 </script>
 
 <template>
-  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="1100" class="max-w-90%">
+  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="1300" class="max-w-90%">
     <NDrawerContent :title="title" :native-scrollbar="false" closable>
       <NSpin :show="loading">
         <div :class="loading ? 'hidden' : ''">

src/typings/components.d.ts

@@ -24,6 +24,7 @@ declare module 'vue' {
     DictTag: typeof import('./../components/custom/dict-tag.vue')['default']
     ExceptionBase: typeof import('./../components/common/exception-base.vue')['default']
     FileUpload: typeof import('./../components/custom/file-upload.vue')['default']
+    FlowPreview: typeof import('./../components/custom/workflow/flow-preview.vue')['default']
     FormTip: typeof import('./../components/custom/form-tip.vue')['default']
     FullScreen: typeof import('./../components/common/full-screen.vue')['default']
     IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
@@ -61,7 +62,6 @@ declare module 'vue' {
     JsonPreview: typeof import('./../components/custom/json-preview.vue')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
     LeaveEdit: typeof import('./../components/custom/workflow/leave-edit/index.vue')['default']
-    LeaveForm: typeof import('../components/custom/workflow-leave-form.vue')['default']
     LookForward: typeof import('./../components/custom/look-forward.vue')['default']
     MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']
     MenuTree: typeof import('./../components/custom/menu-tree.vue')['default']
@@ -116,6 +116,7 @@ declare module 'vue' {
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NP: typeof import('naive-ui')['NP']
     NPopconfirm: typeof import('naive-ui')['NPopconfirm']
     NPopover: typeof import('naive-ui')['NPopover']
     NRadio: typeof import('naive-ui')['NRadio']