chore: Optimizing Microservices

src/views/workflow/task/TaskForm.vue

@@ -5,7 +5,6 @@
       <ATables v-model:activeKey="state.taskSelectedTab"
                class="bg-white"
                :tab-bar-style="{ 'padding-left': '13px' }"
-               @tab-click="handleTabsClick"
       >
         <ATabPane key="formInfo">
           <template #tab>
@@ -34,7 +33,7 @@
           </template>
           <WorkflowTimeLine :history-flow-change-list="state.historyFlowChangeList"/>
         </ATabPane>
-        <ATabPane key="processChart">
+        <ATabPane key="processChart" forceRender>
           <template #tab>
             <span>
               <Icon icon="fa-solid:image"/>流程图
@@ -352,6 +351,7 @@
       if (state.processInsId) {
         state.historyFlowChangeList = await listHistoryFlowChange(state.processInsId);
       }
+      workflowChart.value.init(state.processInsId, state.processDefId);
     });
   });
 
@@ -658,16 +658,6 @@
     };
   });
 
-  function handleTabsClick(activeKey: string, event: MouseEvent) {
-    // fixme: tabs组件首次加载不能初始化未激活的tab中的组件
-    if (activeKey === 'processChart' && !workflowChart.value) {
-      setTimeout(() => {
-        // 获取流程图数据
-        workflowChart.value.init(state.processInsId, state.processDefId);
-      }, 100);
-    }
-  }
-
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-task-form';

src/views/workflow/task/TaskFormView.vue

@@ -9,7 +9,6 @@
       <ATables v-model:activeKey="state.taskSelectedTab"
                class="bg-white"
                :tab-bar-style="{ 'padding-left': '13px' }"
-               @tab-click="handleTabsClick"
       >
         <ATabPane key="formInfo">
           <template #tab>
@@ -40,7 +39,7 @@
           </template>
           <WorkflowTimeLine :history-flow-change-list="state.historyFlowChangeList"/>
         </ATabPane>
-        <ATabPane key="processChart">
+        <ATabPane key="processChart" forceRender>
           <template #tab>
             <span>
               <Icon icon="fa-solid:image"/>流程图
@@ -206,6 +205,7 @@
         }
         state.historyFlowChangeList = await listHistoryFlowChange(state.processInsId);
       }
+      workflowChart.value.init(state.processInsId, state.processDefId);
     });
   });
 
@@ -222,16 +222,6 @@
     state.formReadOnly = query.formReadOnly === 'true';
   }
 
-  function handleTabsClick(activeKey: string, event: MouseEvent) {
-    // fixme: tabs组件首次加载不能初始化未激活的tab中的组件
-    if (activeKey === 'processChart' && !workflowChart.value) {
-      setTimeout(() => {
-        // 获取流程图数据
-        workflowChart.value.init(state.processInsId, state.processDefId);
-      }, 100);
-    }
-  }
-
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-task-form-view';

src/views/workflow/task/WorkflowChartModel.vue

@@ -2,7 +2,7 @@
   <div id="workflowChart" v-loading="state.loading"/>
 </template>
 <script lang="ts" setup>
-  import { reactive, onDeactivated } from 'vue';
+  import { reactive, onBeforeUnmount } from 'vue';
   import { loadMicroApp, MicroApp } from 'qiankun';
   import { getSubDefineProps } from '/@/qiankun/state';
   import { GlStateEnum, WORKFLOW_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum';
@@ -14,14 +14,16 @@
 
   interface WindowState {
     workflowDesignApp: MicroApp;
+    workflowRef: Recordable;
     loading: boolean;
     bpmnData: Recordable;
   }
 
   const state = reactive<WindowState>({
     workflowDesignApp: undefined!,
+    workflowRef: undefined!,
     loading: false,
-    bpmnData: {}
+    bpmnData: {},
   });
   const workflowDesignProps = {
     style: { 'min-height': '100vh' },
@@ -31,16 +33,16 @@
 
   async function init(processInsId: string, processDefId: string) {
     if (processInsId || processDefId) {
-      state.loading = true;
       // 处理流程图xml数据
-      try {
       if (processInsId) {
         state.bpmnData = await getProcessInsFlowChart(processInsId);
       } else {
         const bpmnXml = await getProcessDefFlowChart(processDefId);
         state.bpmnData = { bpmnXml };
       }
-        state.workflowDesignApp?.unmount();
+      state.workflowRef?.setHighlightImportDiagram(state.bpmnData);
+      if (!state.workflowDesignApp || state.workflowDesignApp.getStatus() === 'NOT_MOUNTED') {
+        state.loading = true;
         state.workflowDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'workflow-design'), {
           container: '#workflowChart',
           props: {
@@ -48,22 +50,19 @@
             mountApp: WORKFLOW_DESIGN_APP_COMPONENTS.CHART,
             [GlStateEnum.WORKFLOW_DESIGN_APP_PROPS_KEY]: workflowDesignProps
           }
-        }), { sandbox: { experimentalStyleIsolation: true }});
+        }), { sandbox: { experimentalStyleIsolation: true } });
         state.workflowDesignApp.mountPromise.then(() => {
-          const workflowChartApp: Recordable = microAppStore.getWorkflowDesignApp(WORKFLOW_DESIGN_APP_COMPONENTS.CHART),
-                workflowRef: Recordable = workflowChartApp.getRef().$refs['workflow-chart'];
-          workflowRef.setHighlightImportDiagram(state.bpmnData);
+          const workflowChartApp: Recordable = microAppStore.getWorkflowDesignApp(WORKFLOW_DESIGN_APP_COMPONENTS.CHART);
+          state.workflowRef = workflowChartApp.getRef().$refs['workflow-chart'];
+          state.workflowRef.setHighlightImportDiagram(state.bpmnData);
           state.loading = false;
         });
-      } catch(e: any) {
-        createMessage.error(e);
-        state.loading = false;
       }
     } else createMessage.error('无法打开流程图,没有关联流程图ID!');
   }
 
-  onDeactivated(() => {
-    state.workflowDesignApp?.unmount();
+  onBeforeUnmount(() => {
+    state.workflowDesignApp?.getStatus() === 'MOUNTED' && state.workflowDesignApp.unmount();
   });
 
   defineExpose({