chore: Optimizing Microservices

src/views/workflow/extension/form/helper/WorkflowFormDesign.vue

@@ -26,7 +26,7 @@
   import { addFormDefinitionJson, editFormDefinitionJson, getFormDefinitionJson } from '/@/api/platform/workflow/extension/controller/formDefinitionJson';
   import { FormDefinitionJson } from '/@/api/platform/workflow/extension/entity/formDefinitionJson';
   import { FORM_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum';
-  import {useMessage} from '/@/hooks/web/useMessage';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
   interface TableState {
     formDesignApp: MicroApp;
@@ -74,7 +74,7 @@
           // 表单设计器props
           [GlStateEnum.FORM_DESIGN_APP_PROPS_KEY]: formDesignProps
         }
-      }), { sandbox: { experimentalStyleIsolation: true }});
+      }), { sandbox: { experimentalStyleIsolation: true } });
       state.formDesignApp.mountPromise.then(() => {
         changeLoading(false);
       });

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 (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),
-                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);
           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 {