chore: 表单设计器微应用集成完毕

src/qiankun/index.ts

@@ -8,6 +8,7 @@
 import { registerMicroApps, start, runAfterFirstMounted, addGlobalUncaughtErrorHandler, MicroAppStateActions } from 'qiankun';
 import { apps } from './apps';
 import { getSubDefineProps, initGlState } from './state';
+import { GlStateEnum } from '/@/enums/microAppEnum';
 
 export let microState: MicroAppStateActions;
 
@@ -52,7 +53,12 @@ function registerApps() {
   // 全局的未捕获异常处理器
   addGlobalUncaughtErrorHandler((event) => console.log(event));
   // 初始化全局通信
-  microState = initGlState({ foo: 'bar' });
+  microState = initGlState({
+    [GlStateEnum.FORM_DESIGN_PROPS_KEY]: {},
+    [GlStateEnum.FORM_DESIGN_EMIT_KEY]: {},
+    [GlStateEnum.WORKFLOW_DESIGN_PROPS_KEY]: {},
+    [GlStateEnum.WORKFLOW_DESIGN_EMIT_KEY]: {},
+  });
   // 启动qiankun
   start({
     sandbox: { experimentalStyleIsolation: true }

src/qiankun/state.ts

@@ -26,16 +26,17 @@ export function getSubDefineProps() {
 
 /**
  * 初始化全局通信状态
- * @param state 主应用穿的公共数据
+ * @param state 主应穿透子应用的定义数据（必须声明）
+ * 不声明会导致修改state检查不到当前声明的对象属性发生改变，无法触发监听事件
+ * https://qiankun.umijs.org/api#initglobalstatestate
  */
-export function initGlState(state = {}): MicroAppStateActions {
+export function initGlState(state?: Recordable): MicroAppStateActions {
   const microAppStore = useMicroAppStore();
   const actions = initGlobalState(state);
   actions.onGlobalStateChange((newState, prev) => {
-    debugger
     const { [GlStateEnum.FORM_DESIGN_EMIT_KEY]: formDesignEmit, [GlStateEnum.WORKFLOW_DESIGN_EMIT_KEY]: workflowDesignEmit } = newState;
     formDesignEmit && microAppStore.setFormDesignApp(formDesignEmit);
     workflowDesignEmit && microAppStore.setWorkflowDesignApp(workflowDesignEmit);
-  });
+  }, true);
   return actions;
 }

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

@@ -6,16 +6,15 @@
               @ok="handleSubmit"
   >
     <div id="formDesign"/>
-    <a-button @click="test">测试</a-button>
   </BasicModal>
 </template>
 <script lang="ts" setup>
   import { reactive } from 'vue';
   import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
   import { loadMicroApp } from 'qiankun';
-  import { microState } from '/@/qiankun';
   import { getSubDefineProps } from '/@/qiankun/state';
   import { GlStateEnum } from '/@/enums/microAppEnum';
+  import { useMicroAppStore } from '/@/store/modules/microApp';
 
   interface TableState {
     tag: string;
@@ -31,6 +30,7 @@
     toolbar: ['clear', 'preview']
   };
   const emit = defineEmits(['success', 'register']);
+  const microAppStore = useMicroAppStore();
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
     loadMicroApp({
       name: 'formDesign',
@@ -56,14 +56,6 @@
     setModalProps(props);
   });
 
-  // todo:待删除
-  function test(){
-    console.log(10101);
-    microState.setGlobalState({
-      [GlStateEnum.FORM_DESIGN_PROPS_KEY]: 'barbar'
-    });
-  }
-
   /** 处理弹出框提交 */
   async function handleSubmit() {
     try {