chore: Optimizing Microservices

src/views/workflow/task/popups/WorkflowChartModal.vue

@@ -12,7 +12,7 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { reactive } from 'vue';
+  import { onBeforeUnmount, reactive } from 'vue';
   import { loadMicroApp, MicroApp } from 'qiankun';
   import { getSubDefineProps } from '/@/qiankun/state';
   import { GlStateEnum, WORKFLOW_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum';
@@ -26,11 +26,13 @@
   interface WindowState {
     workflowDesignApp: MicroApp;
     bpmnData: Recordable;
+    workflowRef: Recordable;
   }
 
   const state = reactive<WindowState>({
     workflowDesignApp: undefined!,
     bpmnData: {},
+    workflowRef: undefined!
   });
 
   const workflowDesignProps = {
@@ -44,13 +46,13 @@
     const { processInsId, processDefId } = data.record || {};
     if (processInsId || processDefId) {
       changeLoading();
-      try {
       if (processInsId) {
         state.bpmnData = await getProcessInsFlowChart(processInsId);
       } else {
         const bpmnXml = await getProcessDefFlowChart(processDefId);
         state.bpmnData = { bpmnXml };
       }
+      if (!state.workflowDesignApp || state.workflowDesignApp.getStatus() === 'NOT_MOUNTED') {
         state.workflowDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'workflow-design'), {
           container: '#workflowChart',
           props: {
@@ -60,14 +62,11 @@
           }
         }), { sandbox: { experimentalStyleIsolation: true }});
         state.workflowDesignApp.mountPromise.then(() => {
-          const workflowChartApp: Recordable = microAppStore.getWorkflowDesignApp(WORKFLOW_DESIGN_APP_COMPONENTS.CHART),
+          const workflowChartApp: Recordable = microAppStore.getWorkflowDesignApp(WORKFLOW_DESIGN_APP_COMPONENTS.CHART);
-                workflowRef: Recordable = workflowChartApp.getRef().$refs['workflow-chart'];
+          state.workflowRef = workflowChartApp.getRef().$refs['workflow-chart'];
-          workflowRef.setHighlightImportDiagram(state.bpmnData);
+          state.workflowRef.setHighlightImportDiagram(state.bpmnData);
           changeLoading(false);
         });
-      } catch(e: any) {
-        createMessage.error(e);
-        changeLoading(false);
       }
     } else createMessage.error('无法打开流程图,没有关联流程图ID!');
     setModalProps(props);
@@ -77,6 +76,10 @@
     !visible && state.workflowDesignApp?.unmount();
   }
 
+  onBeforeUnmount(() => {
+    state.workflowDesignApp?.getStatus() === 'MOUNTED' && state.workflowDesignApp.unmount();
+  });
+
 </script>
 <style lang="less">
   .ant-modal {