feat:补充page/service/wizard的异步变量&优化事件面板上下文获取

Change-Id: I4bd19ec28df657ba2991564b9b154b79f8991e5b

packages/amis-editor/src/plugin/Form/Form.tsx

@@ -889,8 +889,8 @@ export class FormPlugin extends BasePlugin {
         ...jsonToJsonSchema(data)
       };
 
-      scope.removeSchema(jsonschema.$id);
+      scope?.removeSchema(jsonschema.$id);
-      scope.addSchema(jsonschema);
+      scope?.addSchema(jsonschema);
     }
   }
 }

packages/amis-editor/src/plugin/Page.tsx

@@ -5,6 +5,7 @@ import {getSchemaTpl} from 'amis-editor-core';
 import {getEventControlConfig} from '../renderer/event-control/helper';
 import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
 import type {SchemaObject} from 'amis/lib/Schema';
+import {jsonToJsonSchema, EditorNodeType} from 'amis-editor-core';
 
 export class PagePlugin extends BasePlugin {
   // 关联渲染器名字
@@ -388,6 +389,19 @@ export class PagePlugin extends BasePlugin {
       ])
     ];
   };
+
+  rendererBeforeDispatchEvent(node: EditorNodeType, e: any, data: any) {
+    if (e === 'inited') {
+      const scope = this.manager.dataSchema.getScope(`${node.id}-${node.type}`);
+      const jsonschema: any = {
+        $id: 'pageInitedData',
+        ...jsonToJsonSchema(data)
+      };
+
+      scope?.removeSchema(jsonschema.$id);
+      scope?.addSchema(jsonschema);
+    }
+  }
 }
 
 registerEditorPlugin(PagePlugin);

packages/amis-editor/src/plugin/Service.tsx

@@ -1,6 +1,6 @@
 import {Button} from 'amis';
 import React from 'react';
-import {registerEditorPlugin} from 'amis-editor-core';
+import {EditorNodeType, jsonToJsonSchema, registerEditorPlugin} from 'amis-editor-core';
 import {BaseEventContext, BasePlugin, RegionConfig} from 'amis-editor-core';
 import {getSchemaTpl} from 'amis-editor-core';
 import {getEventControlConfig} from '../renderer/event-control/helper';
@@ -222,6 +222,19 @@ export class ServicePlugin extends BasePlugin {
       }
     ]);
   };
+
+  rendererBeforeDispatchEvent(node: EditorNodeType, e: any, data: any) {
+    if (e === 'fetchInited') {
+      const scope = this.manager.dataSchema.getScope(`${node.id}-${node.type}`);
+      const jsonschema: any = {
+        $id: 'serviceFetchInitedData',
+        ...jsonToJsonSchema(data)
+      };
+
+      scope?.removeSchema(jsonschema.$id);
+      scope?.addSchema(jsonschema);
+    }
+  }
 }
 
 registerEditorPlugin(ServicePlugin);

packages/amis-editor/src/plugin/Wizard.tsx

@@ -1,4 +1,4 @@
-import {registerEditorPlugin} from 'amis-editor-core';
+import {EditorNodeType, jsonToJsonSchema, registerEditorPlugin} from 'amis-editor-core';
 import {
   BaseEventContext,
   BasePlugin,
@@ -939,6 +939,19 @@ export class WizardPlugin extends BasePlugin {
       );
     }
   };
+
+  rendererBeforeDispatchEvent(node: EditorNodeType, e: any, data: any) {
+    if (e === 'inited') {
+      const scope = this.manager.dataSchema.getScope(`${node.id}-${node.type}`);
+      const jsonschema: any = {
+        $id: 'wizardInitedData',
+        ...jsonToJsonSchema(data)
+      };
+
+      scope?.removeSchema(jsonschema.$id);
+      scope?.addSchema(jsonschema);
+    }
+  }
 }
 
 registerEditorPlugin(WizardPlugin);

packages/amis-editor/src/renderer/event-control/helper.tsx

@@ -1149,7 +1149,7 @@ export const getEventControlConfig = (
           'id'
         );
         const dataSchema: any = await manager.getContextSchemas(
-          schema.$$id,
+          schema?.$$id,
           true
         );
         const dataSchemaIns = new DataSchema(dataSchema || []);

packages/amis-editor/src/renderer/event-control/index.tsx

@@ -83,7 +83,6 @@ interface EventControlState {
       }
     | undefined;
   type: 'update' | 'add';
-  rawVariables: ContextVariables[]; // 外部获取的上下文变量
 }
 
 export class EventControl extends React.Component<
@@ -95,7 +94,6 @@ export class EventControl extends React.Component<
     [prop: string]: Sortable;
   } = {};
   drag?: HTMLElement | null;
-  isUnmount: boolean;
 
   constructor(props: EventControlProps) {
     super(props);
@@ -110,23 +108,16 @@ export class EventControl extends React.Component<
       eventPanelActive[event.eventName] = true;
     });
 
-    this.isUnmount = false;
-
     this.state = {
       onEvent: value ?? this.generateEmptyDefault(pluginEvents),
       events: pluginEvents,
       eventPanelActive,
       showAcionDialog: false,
       actionData: undefined,
-      rawVariables: [],
       type: 'add'
     };
   }
 
-  componentDidMount() {
-    this.loadContextVariables();
-  }
-
   componentDidUpdate(
     prevProps: EventControlProps,
     prevState: EventControlState
@@ -142,26 +133,6 @@ export class EventControl extends React.Component<
     }
   }
 
-  componentWillUnmount() {
-    this.isUnmount = true;
-  }
-
-  /**
-   * 获取上下文变量
-   */
-  async loadContextVariables() {
-    const {getContextSchemas} = this.props;
-
-    // 获取上下文变量
-    if (getContextSchemas) {
-      const dataSchemaIns = await getContextSchemas();
-      const variables = dataSchemaIns?.getDataPropsAsOptions();
-      if (!this.isUnmount) {
-        this.setState({rawVariables: variables});
-      }
-    }
-  }
-
   generateEmptyDefault(events: RendererPluginEvent[]) {
     const onEvent: ActionEventConfig = {};
     events.forEach((event: RendererPluginEvent) => {
@@ -510,7 +481,14 @@ export class EventControl extends React.Component<
       actionTree,
       allComponents
     } = this.props;
-    const {rawVariables} = this.state;
+
+    let rawVariables = [];
+    // 获取绑定事件的组件上下文变量
+    if (getContextSchemas) {
+      const dataSchemaIns = await getContextSchemas();
+      rawVariables = dataSchemaIns?.getDataPropsAsOptions();
+    }
+
     // 收集事件变量
     const eventVariables = this.getEventVariables(data);
     const variables = [...eventVariables, ...rawVariables];
@@ -533,7 +511,7 @@ export class EventControl extends React.Component<
             item => item.label === `${rendererName}变量`
           );
           setValueDs = curVariable?.children?.filter(
-            item => item.value !== '$$id'
+            (item: ContextVariables) => item.value !== '$$id'
           );
         }
       };

packages/amis-editor/src/tpl/common.tsx

@@ -148,7 +148,7 @@ setSchemaTpl('labelHide', () =>
     pipeIn: (value: any) => value === false,
     pipeOut: (value: any) => (value === true ? false : ''),
     visibleOn:
-      '__props__.formMode === "horizontal" || data.mode === "horizontal" || data.label === false'
+      'this.__props__ && this.__props__.formMode === "horizontal" || data.mode === "horizontal" || data.label === false'
   })
 );