改绝对路径

zrch-risk-client-39/src/views/project/problemCheck/StProblemIndex.vue

@@ -15,73 +15,109 @@
 
 <script lang="ts" name="problem-stProblemCheck" setup>
   import { ref, nextTick, onMounted, defineAsyncComponent, h } from 'vue';
-  import { useRoute } from 'vue-router';
   import { getNodesByTableName } from '/@/components/Process/api/definition';
   
-  const route = useRoute();
   const workflowNodes = ref<any[]>([]);
   const activeTab = ref(1);
   
   // 组件缓存，避免重复加载
   const componentCache = new Map();
   
+  // 使用 import.meta.glob 预加载所有可能的组件，使用 /@/ 格式
+  const modules = import.meta.glob('@/views/**/*.vue');
+  
   function handleTabChange(key) {
     activeTab.value = key;
   }
   
-  // 将formListurl转换为正确的导入路径并动态加载组件
-  function loadComponent(formListurl: string) {
-    console.log('开始加载组件，formListurl:', formListurl);
+  // 将URL转换为正确的导入路径并动态加载组件
+  function loadComponent(url: string) {
+    console.log('开始加载组件，URL:', url);
     
-    if (componentCache.has(formListurl)) {
-      console.log('从缓存加载组件:', formListurl);
-      return componentCache.get(formListurl);
+    if (componentCache.has(url)) {
+      console.log('从缓存加载组件:', url);
+      return componentCache.get(url);
     }
     
-    // 解析formListurl，提取组件路径
-    // formListurl格式：/project/problemCheck/StProblemCheckList
-    // 转换为：./StProblemCheckList.vue
-    const pathParts = formListurl.split('/');
-    console.log('路径分割结果:', pathParts);
+    // 构建使用 /@/ 格式的组件路径
+    let componentPath = '';
     
-    // 获取最后一个部分作为组件名
-    const componentName = pathParts[pathParts.length - 1];
-    console.log('提取的组件名:', componentName);
+    // 检查url是否已包含/views
+    if (url.includes('/views')) {
+      // 如果已包含/views，直接使用 /@/ 前缀
+      componentPath = `/src${url}`;
+    } else {
+      // 否则添加 /@/views 前缀
+      componentPath = `/src/views${url}`;
+    }
     
-    // 构建导入路径
-    const importPath = `./${componentName}.vue`;
+    // 检查是否已有文件后缀
+    if (!componentPath.match(/\.(vue|js|ts|jsx|tsx)$/)) {
+      // 如果没有文件后缀，添加.vue
+      componentPath += '.vue';
+    }
     
-    console.log('生成的导入路径:', importPath);
+    console.log('生成的组件路径:', componentPath);
+    console.log('所有可用的组件路径示例:', Object.keys(modules).slice(0, 10));
     
-    const AsyncComponent = defineAsyncComponent({
-      loader: async () => {
-        try {
-          const module = await import(importPath);
-          return module.default || module;
-        } catch (error) {
-          console.error(`加载组件失败 (${formListurl}):`, error);
-          return { render: () => h('div', '组件加载失败') };
+    // 从预加载的 modules 中获取加载器
+    let loader = modules[componentPath];
+    
+    if (!loader) {
+      console.error('未找到组件:', componentPath);
+      console.log('包含 problemCheck 的路径:', Object.keys(modules).filter(key => key.includes('problemCheck')));
+      
+      // 返回错误组件
+      const ErrorComponent = { 
+        render: () => h('div', { style: 'color: red; padding: 20px;' }, `组件未找到: ${componentPath}`) 
+      };
+      componentCache.set(url, ErrorComponent);
+      return ErrorComponent;
     }
-      },
     
-      loadingComponent: { render: () => h('div', '加载中...') },
-      errorComponent: { render: () => h('div', '组件加载失败') },
-      // 延迟显示加载组件的时间（毫秒）
+    // 创建异步组件
+    const AsyncComponent = defineAsyncComponent({
+     loader: () => loader() as Promise<{ default: any }>,
+      loadingComponent: { 
+        render: () => h('div', { style: 'text-align: center; padding: 20px;' }, '加载中...') 
+      },
+      errorComponent: { 
+        render: () => h('div', { style: 'color: red; padding: 20px;' }, '组件加载失败，请刷新页面重试') 
+      },
       delay: 200,
-      // 超时时间（毫秒）
-      timeout: 3000
+      timeout: 3000,
+      onError(error) {
+        console.error('异步组件加载错误:', error);
+      }
     });
     
-    componentCache.set(formListurl, AsyncComponent);
+    componentCache.set(url, AsyncComponent);
     return AsyncComponent;
   }
   
   onMounted(async () => {
     await nextTick();
     try {
+      console.log('开始获取工作流节点...');
       const nodes = await getNodesByTableName("st_problem_check");
-        const nodeData = nodes?.data?.records || nodes?.records || nodes || [];
-        workflowNodes.value = nodeData;
+      workflowNodes.value = nodes;
+      console.log('获取到的工作流节点:', workflowNodes.value);
+      
+      // 打印每个节点的 formListUrl
+      workflowNodes.value.forEach((node, index) => {
+        console.log(`节点${index + 1}:`, node.name, 'formListUrl:', node.formListUrl);
+      });
+      
+      // 预加载所有节点的组件
+      if (workflowNodes.value && workflowNodes.value.length > 0) {
+        console.log('开始预加载组件...');
+        workflowNodes.value.forEach(node => {
+          if (node.formListUrl) {
+            console.log('预加载组件 URL:', node.formListUrl);
+            loadComponent(node.formListUrl);
+          }
+        });
+      }
     } catch (error) {
       console.error('获取工作流节点失败:', error);
     }