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,8 +42,16 @@
         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') {
+        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',
@@ -58,8 +68,10 @@
       state.loading = false;
     });
   }
-    } else createMessage.error('无法打开流程图,没有关联流程图ID!');
+
-  }
+  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,7 +95,16 @@
       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') {
+        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',
@@ -112,8 +123,10 @@
       state.loading = false;
     });
   }
-    } else createMessage.info('没有关联流程表单!');
+
-  }
+  onDeactivated(() => {
+    state.formDesignApp?.getStatus() === 'MOUNTED' && state.formDesignApp.unmount();
+  });
 
   onBeforeUnmount(() => {
     state.formDesignApp?.getStatus() === 'MOUNTED' && state.formDesignApp.unmount();