chore: Optimizing Microservices

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

@@ -6,7 +6,6 @@
     :showCancelBtn="false"
     :showOkBtn="false"
     @register="registerModal"
-    @visible-change="handleVisibleChange"
   >
     <div id="formDesign"/>
     <template #centerFooter>
@@ -17,7 +16,7 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { reactive } from 'vue';
+  import { reactive, onBeforeUnmount } from 'vue';
   import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
   import { loadMicroApp, MicroApp } from 'qiankun';
   import { getSubDefineProps } from '/@/qiankun/state';
@@ -54,18 +53,20 @@
   const emit = defineEmits(['success', 'register']);
   const microAppStore = useMicroAppStore();
   const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
-    changeLoading();
+    if (!state.formDesignApp || state.formDesignApp.getStatus() === 'NOT_MOUNTED') {
-    state.formDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'form-design'), {
+      changeLoading();
-      container: '#formDesign',
+      state.formDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'form-design'), {
-      props: {
+        container: '#formDesign',
-        ...getSubDefineProps(),
+        props: {
-        // 表单设计器props
+          ...getSubDefineProps(),
-        [GlStateEnum.FORM_DESIGN_APP_PROPS_KEY]: formDesignProps
+          // 表单设计器props
-      }
+          [GlStateEnum.FORM_DESIGN_APP_PROPS_KEY]: formDesignProps
-    }), { sandbox: { experimentalStyleIsolation: true }});
+        }
-    state.formDesignApp.mountPromise.then(() => {
+      }), { sandbox: { experimentalStyleIsolation: true }});
-      changeLoading(false);
+      state.formDesignApp.mountPromise.then(() => {
-    });
+        changeLoading(false);
+      });
+    }
     // 处理清除脏数据
     formDesignProps.options = {};
     const id = data.id;
@@ -78,9 +79,9 @@
     setModalProps(props);
   });
 
-  function handleVisibleChange(visible: boolean) {
+  onBeforeUnmount(() => {
-    !visible && state.formDesignApp?.unmount();
+    state.formDesignApp?.getStatus() === 'MOUNTED' && state.formDesignApp.unmount();
-  }
+  });
 
   /** 处理弹出框提交 */
   async function handleSubmitForm(status: string) {