fix: workflow app error msg 31

src/views/workflow/task/WorkflowChartModel.vue

@@ -1,8 +1,10 @@
 <template>
-  <div id="workflowChart" v-loading="state.loading"/>
+  <div v-loading="state.loading">
+    <div id="workflowChart"/>
+  </div>
 </template>
 <script lang="ts" setup>
-  import { reactive, onBeforeUnmount } from 'vue';
+  import { reactive, onDeactivated, onBeforeUnmount, nextTick } from 'vue';
   import { loadMicroApp, MicroApp } from 'qiankun';
   import { getSubDefineProps } from '/@/qiankun/state';
   import { GlStateEnum, WORKFLOW_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum';
@@ -40,27 +42,37 @@
         const bpmnXml = await getProcessDefFlowChart(processDefId);
         state.bpmnData = { bpmnXml };
       }
-      state.workflowRef?.setHighlightImportDiagram(state.bpmnData);
+      // fixme: https://github.com/umijs/plugins/issues/817
       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: {
-            ...getSubDefineProps(),
-            mountApp: WORKFLOW_DESIGN_APP_COMPONENTS.CHART,
-            [GlStateEnum.WORKFLOW_DESIGN_APP_PROPS_KEY]: workflowDesignProps
-          }
-        }), { sandbox: { experimentalStyleIsolation: true } });
-        state.workflowDesignApp.mountPromise.then(() => {
-          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;
+        await nextTick(() => {
+          handleLoadMicroApp();
         });
       }
     } else createMessage.error('无法打开流程图,没有关联流程图ID!');
   }
 
+  function handleLoadMicroApp() {
+    state.loading = true;
+    state.workflowDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'workflow-design'), {
+      container: '#workflowChart',
+      props: {
+        ...getSubDefineProps(),
+        mountApp: WORKFLOW_DESIGN_APP_COMPONENTS.CHART,
+        [GlStateEnum.WORKFLOW_DESIGN_APP_PROPS_KEY]: workflowDesignProps
+      }
+    }), { sandbox: { experimentalStyleIsolation: true } });
+    state.workflowDesignApp.mountPromise.then(() => {
+      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;
+    });
+  }
+
+  onDeactivated(() => {
+    state.workflowDesignApp?.getStatus() === 'MOUNTED' && state.workflowDesignApp.unmount();
+  });
+
   onBeforeUnmount(() => {
     state.workflowDesignApp?.getStatus() === 'MOUNTED' && state.workflowDesignApp.unmount();
   });

src/views/workflow/task/WorkflowPreviewForm.vue

@@ -1,8 +1,10 @@
 <template>
-  <div id="formPreview" v-loading="state.loading"/>
+  <div v-loading="state.loading">
+    <div id="formPreview"/>
+  </div>
 </template>
 <script lang="ts" setup>
-  import { PropType, reactive, onBeforeUnmount, watch } from 'vue';
+  import {PropType, reactive, watch, nextTick, onDeactivated, onBeforeUnmount} from 'vue';
   import { loadMicroApp, MicroApp } from 'qiankun';
   import { getSubDefineProps } from '/@/qiankun/state';
   import { GlStateEnum } from '/@/enums/microAppEnum';
@@ -93,28 +95,39 @@
       const data = await getFormDefinitionJson(formJsonId);
       if (!data.json) return createMessage.error('当前数据没有json结构体');
       formDesignProps.options = eval('(' + data.json + ')');
+      // fixme: https://github.com/umijs/plugins/issues/817
       if (!state.formDesignApp || state.formDesignApp.getStatus() === 'NOT_MOUNTED') {
-        state.loading = true;
-        state.formDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'form-design'), {
-          container: '#formPreview',
-          props: {
-            ...getSubDefineProps(),
-            mountApp: FORM_DESIGN_APP_COMPONENTS.PREVIEW,
-            // 表单设计器props
-            [GlStateEnum.FORM_DESIGN_APP_PROPS_KEY]: formDesignProps
-          }
-        }), { sandbox: { experimentalStyleIsolation: true } });
-        state.formDesignApp.mountPromise.then(() => {
-          const formPreviewApp: Recordable = microAppStore.getFormDesignApp(FORM_DESIGN_APP_COMPONENTS.PREVIEW);
-          state.formRef = formPreviewApp.getRef().$refs['form-preview'];
-          state.formRef.setShowIds(state.showIds);
-          state.formRef.setDisableIds(state.disableIds);
-          state.loading = false;
+        await nextTick(() => {
+          handleLoadMicroApp();
         });
       }
     } else createMessage.info('没有关联流程表单!');
   }
 
+  function handleLoadMicroApp() {
+    state.loading = true;
+    state.formDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'form-design'), {
+      container: '#formPreview',
+      props: {
+        ...getSubDefineProps(),
+        mountApp: FORM_DESIGN_APP_COMPONENTS.PREVIEW,
+        // 表单设计器props
+        [GlStateEnum.FORM_DESIGN_APP_PROPS_KEY]: formDesignProps
+      }
+    }), { sandbox: { experimentalStyleIsolation: true } });
+    state.formDesignApp.mountPromise.then(() => {
+      const formPreviewApp: Recordable = microAppStore.getFormDesignApp(FORM_DESIGN_APP_COMPONENTS.PREVIEW);
+      state.formRef = formPreviewApp.getRef().$refs['form-preview'];
+      state.formRef.setShowIds(state.showIds);
+      state.formRef.setDisableIds(state.disableIds);
+      state.loading = false;
+    });
+  }
+
+  onDeactivated(() => {
+    state.formDesignApp?.getStatus() === 'MOUNTED' && state.formDesignApp.unmount();
+  });
+
   onBeforeUnmount(() => {
     state.formDesignApp?.getStatus() === 'MOUNTED' && state.formDesignApp.unmount();
   });