chore: Optimizing Microservices

src/views/workflow/task/WorkflowPreviewForm.vue

@@ -2,7 +2,7 @@
   <div id="formPreview" v-loading="state.loading"/>
 </template>
 <script lang="ts" setup>
-  import { PropType, reactive, onDeactivated } from 'vue';
+  import { PropType, reactive, onBeforeUnmount, watch } from 'vue';
   import { loadMicroApp, MicroApp } from 'qiankun';
   import { getSubDefineProps } from '/@/qiankun/state';
   import { GlStateEnum } from '/@/enums/microAppEnum';
@@ -34,13 +34,19 @@
     formData: Recordable;
     options: Recordable;
     loading: boolean;
+    disableIds: string[];
+    showIds: string[];
+    formRef: Recordable;
   }
 
   const state = reactive<WindowState>({
     formDesignApp: undefined!,
     loading: false,
     formData: {},
-    options: {}
+    options: {},
+    disableIds: [],
+    showIds: [],
+    formRef: undefined!,
   });
   const formDesignProps = {
     style: { 'min-height': '50px' },
@@ -48,36 +54,47 @@
     disabled: props.disabled,
     readonly: props.readonly,
     value: state.formData,
-    handleValueChange: (formData: Recordable) =>
-        formDesignProps.value = state.formData = formData
+    handleValueChange: (formData: Recordable) => formDesignProps.value = state.formData = formData
   };
   const microAppStore = useMicroAppStore();
   const { createMessage } = useMessage();
 
-  async function init(formJsonId: string) {
-    if (formJsonId) {
-      state.loading = true;
-      state.formData = {};
-      // 处理表单json数据渲染
-      try {
-        const data = await getFormDefinitionJson(formJsonId);
-        if (!data.json) throw Error('当前数据没有json结构体');
-        formDesignProps.options = eval('(' + data.json + ')');
-        const disableIds: string[] = [], showIds: string[] = [];
-        props.taskFormData.forEach((item) => {
+  watch(() => props.taskFormData, (taskFormData: Recordable[]) => {
+    taskFormData.forEach((item) => {
       if (item.value !== undefined) {
         state.formData[item.id] = item.value;
       }
       if (item.readable === true) {
-            showIds.push(item.id);
+        state.showIds.push(item.id);
       }
       if (item.writable === false) {
-            disableIds.push(item.id);
+        state.disableIds.push(item.id);
       }
     });
-        // todo: 待优化
     formDesignProps.value = state.formData;
-        state.formDesignApp?.unmount();
+    if (state.formRef) {
+      state.formRef.setShowIds(state.showIds);
+      state.formRef.setDisableIds(state.disableIds);
+    }
+  });
+
+  watch(() => props.disabled, (disabled: boolean) => {
+    formDesignProps.disabled = disabled;
+  });
+
+  watch(() => props.readonly, (readonly: boolean) => {
+    formDesignProps.readonly = readonly;
+  });
+
+  async function init(formJsonId: string) {
+    if (formJsonId) {
+      state.formData = {};
+      // 处理表单json数据渲染
+      const data = await getFormDefinitionJson(formJsonId);
+      if (!data.json) return createMessage.error('当前数据没有json结构体');
+      formDesignProps.options = eval('(' + data.json + ')');
+      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: {
@@ -88,21 +105,18 @@
           }
         }), { sandbox: { experimentalStyleIsolation: true } });
         state.formDesignApp.mountPromise.then(() => {
-          const formPreviewApp: Recordable = microAppStore.getFormDesignApp(FORM_DESIGN_APP_COMPONENTS.PREVIEW),
-                formRef: Recordable = formPreviewApp.getRef().$refs['form-preview'];
-          formRef.setShowIds(showIds);
-          formRef.setDisableIds(disableIds);
+          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;
         });
-      } catch(e: any) {
-        createMessage.error(e);
-        state.loading = false;
       }
     } else createMessage.info('没有关联流程表单!');
   }
 
-  onDeactivated(() => {
-    state.formDesignApp?.unmount();
+  onBeforeUnmount(() => {
+    state.formDesignApp?.getStatus() === 'MOUNTED' && state.formDesignApp.unmount();
   });
 
   async function startFormProcessDefinition(data: Partial<Workflow>, callback: Fn) {