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

Change-Id: I88f27dc5dfbeadeaebcfa0cfad87ba0bd7b444ac
2024-12-15 09:21:13 +08:00 · 2022-10-24 16:02:17 +08:00 · 2022-10-24 16:02:17 +08:00 · b5bf21baf0
commit b5bf21baf0
parent acd613ced6
5 changed files with 134 additions and 82 deletions
--- a/packages/amis-editor/src/plugin/CRUD2.tsx
+++ b/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>
--- a/packages/amis-editor/src/plugin/Tabs.tsx
+++ b/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}
--- a/packages/amis-editor/src/renderer/event-control/actions.tsx
+++ b/packages/amis-editor/src/renderer/event-control/actions.tsx
@ -704,10 +704,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
              }
            }
          ],
-          supportComponents: [
-            'form',
-            ...SUPPORT_STATIC_FORMITEM_CMPTS
-          ],
+          supportComponents: ['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',
-              name: 'dataMergeMode',
-              mode: 'horizontal',
-              label: '追加方式',
+              type: 'switch',
+              name: '__customData',
+              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: [
-                {
-                  label: '合并',
-                  value: 'merge'
-                },
-                {
-                  label: '覆盖',
-                  value: 'override'
+              onChange: (value: string, oldVal: any, data: any, form: any) => {
+                form.setValueByName('__containerType', 'all');
              }
-              ]
            },
            {
              type: 'radios',
-              name: '__addParamType',
+              name: '__containerType',
              mode: 'horizontal',
-              label: '数据配置',
-              labelRemark: {
-                className: 'm-l-xs',
-                icon: 'fa fa-question-circle',
-                rootClose: true,
-                content: `数据默认为源组件所在数据域，可以选择“自定义”来定制所需数据`,
-                placement: 'top'
-              },
-              pipeIn: defaultValue('default'),
-              visibleOn: `data.__addParam && data.actionType === "reload" && ${IS_DATA_CONTAINER}`,
+              label: '',
+              pipeIn: defaultValue('all'),
+              visibleOn: `data.__addParam && data.__customData && data.actionType === "reload" && ${IS_DATA_CONTAINER}`,
              options: [
                {
-                  label: '源组件所在数据域',
-                  value: 'default'
+                  label: '直接赋值',
+                  value: 'all'
                },
                {
-                  label: '自定义',
-                  value: 'custom'
+                  label: '成员赋值',
+                  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'
+                }
+              ]
            }
          ]
        },
--- a/packages/amis-editor/src/renderer/event-control/helper.tsx
+++ b/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 (
-          config.__addParam &&
-          config.__addParamType === 'custom' &&
-          config.data
-        ) {
+        if (config.__addParam && config.__customData && config.data) {
+          if (typeof config.data === 'string') {
+            config.__containerType = 'all';
+            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') {
-            action.data = comboArrayToObject(config.__reloadParams || []);
+          if (config.__customData) {
+            action.data =
+              config.__containerType === 'all'
+                ? config.__valueInput
+                : comboArrayToObject(config.__reloadParams || []);
          }
        }
      }
--- a/packages/amis-editor/src/renderer/event-control/index.tsx
+++ b/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>