[amis-saas-7667]:调用组件特性动作配置完成提交后右侧面板报错

Change-Id: I88f27dc5dfbeadeaebcfa0cfad87ba0bd7b444ac

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

@@ -1341,7 +1341,7 @@ export class CRUDPlugin extends BasePlugin {
     //   actionType: 'resetQuery',
     //   actionLabel: '重置查询',
     //   description: '重新恢复查询条件为初始值',
-    //   desc: (info: any) => {
+    //   descDetail: (info: any) => {
     //     return (
     //       <div>
     //         <span className="variable-right">{info?.__rendererLabel}</span>

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

@@ -87,13 +87,12 @@ export class TabsPlugin extends BasePlugin {
   actions = [
     {
       actionType: 'changeActiveKey',
-      actionLabel: '修改激活tab值',
+      actionLabel: '激活指定选项卡',
       description: '修改当前激活tab项的key',
       config: ['activeKey'],
-      desc: (info: any) => {
+      descDetail: (info: any) => {
         return (
           <div>
-            <span className="variable-right">{info?.__rendererLabel}</span>
             激活第
             <span className="variable-left variable-right">
               {info?.args?.activeKey}

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

@@ -704,10 +704,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
               }
             }
           ],
-          supportComponents: [
+          supportComponents: ['form', ...SUPPORT_STATIC_FORMITEM_CMPTS],
-            'form',
-            ...SUPPORT_STATIC_FORMITEM_CMPTS
-          ],
           schema: [
             ...renderCmptSelect('选择组件', true),
             {
@@ -755,7 +752,8 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
               (value: string, oldVal: any, data: any, form: any) => {
                 form.setValueByName('args.resetPage', true);
                 form.setValueByName('__addParam', true);
-                form.setValueByName('__addParamType', 'default');
+                form.setValueByName('__customData', false);
+                form.setValueByName('__containerType', 'all');
                 form.setValueByName('__reloadParam', []);
               }
             ),
@@ -794,54 +792,59 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
               visibleOn: `data.actionType === "reload" &&  ${IS_DATA_CONTAINER}`
             },
             {
-              type: 'radios',
+              type: 'switch',
-              name: 'dataMergeMode',
+              name: '__customData',
-              mode: 'horizontal',
+              label: '自定义数据',
-              label: '追加方式',
               labelRemark: {
                 className: 'm-l-xs',
                 icon: 'fa fa-question-circle',
                 rootClose: true,
-                content: `选择“合并”时，会将数据合并到目标组件的数据域。<br/>选择“覆盖”时，数据会直接覆盖目标组件的数据域。`,
+                content: `数据默认为源组件所在数据域，开启“自定义”可以定制所需数据`,
                 placement: 'top'
               },
-              pipeIn: defaultValue('merge'),
+              onText: '是',
+              offText: '否',
+              mode: 'horizontal',
+              pipeIn: defaultValue(true),
               visibleOn: `data.__addParam && data.actionType === "reload" && ${IS_DATA_CONTAINER}`,
-              options: [
+              onChange: (value: string, oldVal: any, data: any, form: any) => {
-                {
+                form.setValueByName('__containerType', 'all');
-                  label: '合并',
-                  value: 'merge'
-                },
-                {
-                  label: '覆盖',
-                  value: 'override'
               }
-              ]
             },
             {
               type: 'radios',
-              name: '__addParamType',
+              name: '__containerType',
               mode: 'horizontal',
-              label: '数据配置',
+              label: '',
-              labelRemark: {
+              pipeIn: defaultValue('all'),
-                className: 'm-l-xs',
+              visibleOn: `data.__addParam && data.__customData && data.actionType === "reload" && ${IS_DATA_CONTAINER}`,
-                icon: 'fa fa-question-circle',
-                rootClose: true,
-                content: `数据默认为源组件所在数据域，可以选择“自定义”来定制所需数据`,
-                placement: 'top'
-              },
-              pipeIn: defaultValue('default'),
-              visibleOn: `data.__addParam && data.actionType === "reload" && ${IS_DATA_CONTAINER}`,
               options: [
                 {
-                  label: '源组件所在数据域',
+                  label: '直接赋值',
-                  value: 'default'
+                  value: 'all'
                 },
                 {
-                  label: '自定义',
+                  label: '成员赋值',
-                  value: 'custom'
+                  value: 'appoint'
                 }
-              ]
+              ],
+              onChange: (value: string, oldVal: any, data: any, form: any) => {
+                form.setValueByName('__reloadParams', []);
+                form.setValueByName('__valueInput', undefined);
+              }
+            },
+            {
+              name: '__valueInput',
+              type: 'input-formula',
+              variables: '${variables}',
+              evalMode: false,
+              required: true,
+              variableMode: 'tabs',
+              inputMode: 'input-group',
+              label: '',
+              size: 'lg',
+              mode: 'horizontal',
+              visibleOn: `data.__addParam && data.__customData && data.__containerType === "all" && data.actionType === "reload" && ${IS_DATA_CONTAINER}`
             },
             {
               type: 'combo',
@@ -873,7 +876,32 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                   inputMode: 'input-group'
                 }
               ],
-              visibleOn: `data.__addParam && data.__addParamType === "custom" && data.actionType === "reload" && ${IS_DATA_CONTAINER}`
+              visibleOn: `data.__addParam && data.__customData && data.__containerType === "appoint" && data.actionType === "reload" && ${IS_DATA_CONTAINER}`
+            },
+            {
+              type: 'radios',
+              name: 'dataMergeMode',
+              mode: 'horizontal',
+              label: '追加方式',
+              labelRemark: {
+                className: 'm-l-xs',
+                icon: 'fa fa-question-circle',
+                rootClose: true,
+                content: `选择“合并”时，会将数据合并到目标组件的数据域。<br/>选择“覆盖”时，数据会直接覆盖目标组件的数据域。`,
+                placement: 'top'
+              },
+              pipeIn: defaultValue('merge'),
+              visibleOn: `data.__addParam && data.actionType === "reload" && ${IS_DATA_CONTAINER}`,
+              options: [
+                {
+                  label: '合并',
+                  value: 'merge'
+                },
+                {
+                  label: '覆盖',
+                  value: 'override'
+                }
+              ]
             }
           ]
         },

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

@@ -12,7 +12,7 @@ import {
   RendererPluginEvent,
   SubRendererPluginAction
 } from 'amis-editor-core';
-import {ActionConfig, ContextVariables} from './types';
+import {ActionConfig, ComponentInfo, ContextVariables} from './types';
 import {
   DataSchema,
   filterTree,
@@ -118,7 +118,9 @@ export const FORMITEM_CMPTS = [
   'uuid'
 ];
 
-export const SUPPORT_STATIC_FORMITEM_CMPTS = without(FORMITEM_CMPTS, ...[
+export const SUPPORT_STATIC_FORMITEM_CMPTS = without(
+  FORMITEM_CMPTS,
+  ...[
     'button-toolbar',
     'condition-builder',
     'diff-editor',
@@ -136,7 +138,8 @@ export const SUPPORT_STATIC_FORMITEM_CMPTS = without(FORMITEM_CMPTS, ...[
     'input-table',
     'picker',
     'uuid'
-]);
+  ]
+);
 
 export const SUPPORT_DISABLED_CMPTS = [
   'button-group',
@@ -483,12 +486,19 @@ export const getPropOfAcion = (
   propName: string,
   actionTree: RendererPluginAction[],
   pluginActions: PluginActions,
-  commonActions?: {[propName: string]: RendererPluginAction}
+  commonActions?: {[propName: string]: RendererPluginAction},
+  allComponents?: ComponentInfo[]
 ): any => {
   let prop: any = null;
   if (action.componentId) {
     // 优先从组件特性动作中找
-    pluginActions[action.__rendererName]?.find(
+    const node = findTree(
+      allComponents ?? [],
+      item => item.value === action.componentId
+    );
+    prop =
+      node &&
+      pluginActions[node.type]?.find(
         (item: RendererPluginAction) => item.actionType === action.actionType
       )?.[propName as keyof RendererPluginAction];
   }
@@ -1183,6 +1193,7 @@ export const getEventControlConfig = (
       if (config.actionType === 'reload') {
         config.__resetPage = config.args?.resetPage;
         config.__addParam = config.data === undefined || !!config.data;
+        config.__customData = !!config.data;
 
         if (
           (config.data && typeof config.data === 'object') ||
@@ -1190,15 +1201,18 @@ export const getEventControlConfig = (
             !Object.keys(config.args).length &&
             config.data === undefined)
         ) {
-          config.__addParamType = 'custom';
+          config.__customData = true;
+          config.__containerType = 'appoint';
         }
 
-        if (
+        if (config.__addParam && config.__customData && config.data) {
-          config.__addParam &&
+          if (typeof config.data === 'string') {
-          config.__addParamType === 'custom' &&
+            config.__containerType = 'all';
-          config.data
+            config.__valueInput = config.data;
-        ) {
+          } else {
+            config.__containerType = 'appoint';
             config.__reloadParams = objectToComboArray(config.data);
+          }
         } else if (
           config.args &&
           !Object.keys(config.args).length &&
@@ -1318,8 +1332,11 @@ export const getEventControlConfig = (
         if (config.__addParam) {
           action.dataMergeMode = config.dataMergeMode || 'merge';
           action.data = undefined;
-          if (config.__addParamType === 'custom') {
+          if (config.__customData) {
-            action.data = comboArrayToObject(config.__reloadParams || []);
+            action.data =
+              config.__containerType === 'all'
+                ? config.__valueInput
+                : comboArrayToObject(config.__reloadParams || []);
           }
         }
       }

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

@@ -416,7 +416,8 @@ export class EventControl extends React.Component<
     >
   ) {
     const {events, onEvent} = this.state;
-    const {actionTree, pluginActions, commonActions} = this.props;
+    const {actionTree, pluginActions, commonActions, allComponents} =
+      this.props;
     // 收集当前事件已有ajax动作的请求返回结果作为事件变量
     let oldActions = onEvent[activeData.actionData!.eventKey].actions;
     if (activeData.type === 'update') {
@@ -432,14 +433,16 @@ export class EventControl extends React.Component<
           'actionLabel',
           actionTree,
           pluginActions,
-          commonActions
+          commonActions,
+          allComponents
         );
         const dataSchemaJson = getPropOfAcion(
           item,
           'outputVarDataSchema',
           actionTree,
           pluginActions,
-          commonActions
+          commonActions,
+          allComponents
         );
         const dataSchema = new DataSchema(dataSchemaJson || []);
         return {
@@ -575,14 +578,16 @@ export class EventControl extends React.Component<
       actions: pluginActions,
       actionTree,
       commonActions,
-      getComponents
+      getComponents,
+      allComponents
     } = this.props;
     const desc = getPropOfAcion(
       action,
       'descDetail',
       actionTree,
       pluginActions,
-      commonActions
+      commonActions,
+      allComponents
     );
     let info = {...action};
     // 根据子动作类型获取动作树节点的配置
@@ -618,8 +623,9 @@ export class EventControl extends React.Component<
     } else if (type === 'update') {
       this.updateAction?.(config.eventKey, config.actionIndex, action);
     }
-    this.setState({actionData: undefined});
+
     this.setState({showAcionDialog: false});
+    this.setState({actionData: undefined});
   }
 
   @autobind
@@ -633,6 +639,7 @@ export class EventControl extends React.Component<
       actions: pluginActions,
       commonActions,
       getComponents,
+      allComponents,
       render
     } = this.props;
     const {
@@ -781,7 +788,8 @@ export class EventControl extends React.Component<
                                       'actionLabel',
                                       actionTree,
                                       pluginActions,
-                                      commonActions
+                                      commonActions,
+                                      allComponents
                                     ) || action.actionType}
                                   </div>
                                 </div>