From 54bf58c035f63533cabc570b57f20101f61430bc Mon Sep 17 00:00:00 2001
From: wangxiang <1827945911@qq.com>
Date: Wed, 25 Oct 2023 12:56:00 +0800
Subject: [PATCH] chore: Optimizing Microservices

---
 .../form/helper/WorkflowFormDesign.vue        | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/views/workflow/extension/form/helper/WorkflowFormDesign.vue b/src/views/workflow/extension/form/helper/WorkflowFormDesign.vue
index 678cdcc..3d87289 100644
--- a/src/views/workflow/extension/form/helper/WorkflowFormDesign.vue
+++ b/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();
-    state.formDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'form-design'), {
-      container: '#formDesign',
-      props: {
-        ...getSubDefineProps(),
-        // 表单设计器props
-        [GlStateEnum.FORM_DESIGN_APP_PROPS_KEY]: formDesignProps
-      }
-    }), { sandbox: { experimentalStyleIsolation: true }});
-    state.formDesignApp.mountPromise.then(() => {
-      changeLoading(false);
-    });
+    if (!state.formDesignApp || state.formDesignApp.getStatus() === 'NOT_MOUNTED') {
+      changeLoading();
+      state.formDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'form-design'), {
+        container: '#formDesign',
+        props: {
+          ...getSubDefineProps(),
+          // 表单设计器props
+          [GlStateEnum.FORM_DESIGN_APP_PROPS_KEY]: formDesignProps
+        }
+      }), { sandbox: { experimentalStyleIsolation: true }});
+      state.formDesignApp.mountPromise.then(() => {
+        changeLoading(false);
+      });
+    }
     // 处理清除脏数据
     formDesignProps.options = {};
     const id = data.id;
@@ -78,9 +79,9 @@
     setModalProps(props);
   });
 
-  function handleVisibleChange(visible: boolean) {
-    !visible && state.formDesignApp?.unmount();
-  }
+  onBeforeUnmount(() => {
+    state.formDesignApp?.getStatus() === 'MOUNTED' && state.formDesignApp.unmount();
+  });
 
   /** 处理弹出框提交 */
   async function handleSubmitForm(status: string) {