From 2f8a6b4b8420c29888f47e6a2136c583186fb039 Mon Sep 17 00:00:00 2001
From: AN <1983933789@qq.com>
Date: Sat, 21 Jun 2025 13:48:11 +0800
Subject: [PATCH] =?UTF-8?q?optimize(projects):=20=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E7=BB=84=E4=BB=B6=E6=96=B9=E6=B3=95=E6=8A=BD?=
 =?UTF-8?q?=E5=8F=96=E4=B8=BA=E5=85=AC=E5=85=B1=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/common.ts                           | 29 +++++++++++++++++++
 src/views/workflow/process-instance/index.vue | 23 ++++-----------
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/utils/common.ts b/src/utils/common.ts
index 497a9b9a..8e98b642 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,5 +1,7 @@
+import { defineAsyncComponent, markRaw } from 'vue';
 import { AcceptType } from '@/enum/business';
 import { $t } from '@/locales';
+
 /**
  * Transform record to option
  *
@@ -76,6 +78,33 @@ export function humpToLine(str: string, line: string = '-') {
   return temp;
 }
 
+/** 动态加载组件 */
+export async function loadDynamicComponent<T extends object = any>(
+  modules: Record<string, () => Promise<any>>,
+  formPath: string,
+  options?: {
+    delay?: number;
+    timeout?: number;
+  }
+) {
+  const expectedPathSuffix = `${humpToLine(formPath)}.vue`;
+
+  const matchedKey = Object.keys(modules).find(path => path.endsWith(expectedPathSuffix));
+
+  if (!matchedKey) {
+    window.$message?.error('组件不存在');
+    throw new Error(`组件不存在: ${expectedPathSuffix}`);
+  }
+
+  return markRaw(
+    defineAsyncComponent({
+      loader: async () => (await modules[matchedKey]()) as T,
+      delay: options?.delay ?? 200,
+      timeout: options?.timeout ?? 3000
+    })
+  );
+}
+
 /** 判断是否为空 */
 export function isNotNull(value: any) {
   return value !== undefined && value !== null && value !== '' && value !== 'undefined' && value !== 'null';
diff --git a/src/views/workflow/process-instance/index.vue b/src/views/workflow/process-instance/index.vue
index d887128d..571a1060 100644
--- a/src/views/workflow/process-instance/index.vue
+++ b/src/views/workflow/process-instance/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="tsx">
-import type { AsyncComponentLoader } from 'vue';
-import { computed, defineAsyncComponent, markRaw, reactive, ref, shallowRef, watch } from 'vue';
+import { computed, reactive, ref, shallowRef, watch } from 'vue';
 import { NButton, NDivider, NEmpty, NInput, NRadioButton, NRadioGroup, NSpin, NTag } from 'naive-ui';
 import { useBoolean, useLoading } from '@sa/hooks';
 import { workflowActivityStatusRecord } from '@/constants/workflow';
@@ -14,7 +13,7 @@ import {
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { useDict } from '@/hooks/business/dict';
-import { humpToLine } from '@/utils/common';
+import { loadDynamicComponent } from '@/utils/common';
 import DictTag from '@/components/custom/dict-tag.vue';
 import { $t } from '@/locales';
 import ButtonIcon from '@/components/custom/button-icon.vue';
@@ -322,26 +321,14 @@ async function handleShowVariable(id: CommonType.IdType) {
 const modules = import.meta.glob('@/components/custom/workflow/**/*.vue');
 const businessId = ref<CommonType.IdType>();
 
+/** 流程预览，动态加载组件 */
 async function handlePreview(row: Api.Workflow.ProcessInstance) {
   businessId.value = row.businessId;
   const formPath = row.formPath;
   if (formPath) {
-    const url = `/src/components/custom${humpToLine(formPath)}.vue`;
-    const loader = modules[url];
-    if (!loader) {
-      window.$message?.error('组件不存在');
-      return;
-    }
-
-    dynamicComponent.value = markRaw(
-      defineAsyncComponent({
-        loader: async () => (await modules[url]()) as AsyncComponentLoader<any>,
-        delay: 200,
-        timeout: 3000
-      })
-    );
+    dynamicComponent.value = await loadDynamicComponent(modules, formPath);
+    showPreviewDrawer();
   }
-  showPreviewDrawer();
 }
 </script>