Merge pull request #8374 from ascend13/fix-dialog-variable

fix:修复组件特性动作无法选中弹窗之外组件的兼容

packages/amis-editor-core/src/util.ts

@@ -897,15 +897,20 @@ function applyChange(target: any, source: any, change: DiffChange) {
  * 遍历 schema
  * @param json
  * @param mapper
+ * @param ignore
  */
 export function JSONTraverse(
   json: any,
-  mapper: (value: any, key: string | number, host: Object) => any
+  mapper: (value: any, key: string | number, host: Object) => any,
+  ignore?: (value: any, key: string | number) => boolean | void
 ) {
   Object.keys(json).forEach(key => {
     const value: any = json[key];
+    if (ignore?.(value, key)) {
+      return;
+    }
     if (isPlainObject(value) || Array.isArray(value)) {
-      JSONTraverse(value, mapper);
+      JSONTraverse(value, mapper, ignore);
     } else {
       mapper(value, key, json);
     }
@@ -1296,7 +1301,9 @@ export const getDialogActions = (
   filterId?: string
 ) => {
   let dialogActions: any[] = [];
-  JSONTraverse(schema, (value: any, key: string, object: any) => {
+  JSONTraverse(
+    schema,
+    (value: any, key: string, object: any) => {
       // definitions中的弹窗
       if (key === 'type' && value === 'page') {
         const definitions = object.definitions;
@@ -1380,7 +1387,9 @@ export const getDialogActions = (
           }
         }
       }
-  });
+    },
+    (value, key) => key.toString().startsWith('__')
+  );
   return dialogActions;
 };
 

packages/amis-editor/src/renderer/event-control/action-config-panel.tsx

@@ -11,8 +11,14 @@ import {Button} from 'amis';
 
 export default class ActionConfigPanel extends React.Component<RendererProps> {
   render() {
-    const {data, onBulkChange, render, pluginActions, actionConfigItemsMap} =
+    const {
-      this.props;
+      data,
+      onBulkChange,
+      render,
+      pluginActions,
+      actionConfigItemsMap,
+      manager
+    } = this.props;
     const actionType = data.__subActions ? data.groupType : data.actionType;
     const commonActionConfig = {
       ...COMMON_ACTION_SCHEMA_MAP,
@@ -26,7 +32,13 @@ export default class ActionConfigPanel extends React.Component<RendererProps> {
         pluginActions?.[data.__rendererName]?.find(
           (item: RendererPluginAction) => item.actionType === data.groupType
         )?.schema ?? commonActionConfig[data.groupType]?.schema;
-      const baseSchema = renderCmptActionSelect('选择组件', true);
+      const baseSchema = renderCmptActionSelect(
+        '选择组件',
+        true,
+        () => {},
+        data.componentId === 'customCmptId' ? true : false,
+        manager
+      );
       // 追加到基础配置
       schema = [
         ...(Array.isArray(baseSchema) ? baseSchema : [baseSchema]),

packages/amis-editor/src/renderer/event-control/comp-action-select.tsx

@@ -30,7 +30,8 @@ export default class CmptActionSelect extends React.Component<RendererProps> {
           ...BASE_ACTION_PROPS,
           'componentId',
           '__rendererName',
-          '__cmptTreeSource'
+          '__cmptTreeSource',
+          '__cmptId'
         ].includes(key)
       ) {
         removeKeys[key] = undefined;

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

@@ -9,8 +9,7 @@ import {
   getFixDialogType,
   getSchemaTpl,
   JsonGenerateID,
-  JSONPipeIn,
+  JSONGetById,
-  JSONPipeOut,
   PluginActions,
   RendererPluginAction,
   RendererPluginEvent,
@@ -819,7 +818,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                   <div>
                     显示
                     <span className="variable-left variable-right">
-                      {info?.rendererLabel || '-'}
+                      {info?.rendererLabel || info.componentId || '-'}
                     </span>
                     组件
                   </div>
@@ -833,7 +832,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                   <div>
                     隐藏
                     <span className="variable-left variable-right">
-                      {info?.rendererLabel || '-'}
+                      {info?.rendererLabel || info.componentId || '-'}
                     </span>
                     组件
                   </div>
@@ -847,7 +846,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                   <div>
                     组件
                     <span className="variable-left variable-right">
-                      {info?.rendererLabel || '-'}
+                      {info?.rendererLabel || info.componentId || '-'}
                     </span>
                     表达式已配置
                   </div>
@@ -858,6 +857,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
           supportComponents: '*',
           schema: [
             ...renderCmptSelect('目标组件', true),
+            renderCmptIdInput(),
             {
               type: 'radios',
               label: '条件',
@@ -922,7 +922,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                   <div>
                     启用
                     <span className="variable-left variable-right">
-                      {info?.rendererLabel || '-'}
+                      {info?.rendererLabel || info.componentId || '-'}
                     </span>
                     组件
                   </div>
@@ -936,7 +936,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                   <div>
                     禁用
                     <span className="variable-left variable-right">
-                      {info?.rendererLabel || '-'}
+                      {info?.rendererLabel || info.componentId || '-'}
                     </span>
                     组件
                   </div>
@@ -950,7 +950,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                   <div>
                     组件
                     <span className="variable-left variable-right">
-                      {info?.rendererLabel || '-'}
+                      {info?.rendererLabel || info.componentId || '-'}
                     </span>
                     表达式已配置
                   </div>
@@ -965,6 +965,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
           ],
           schema: [
             ...renderCmptSelect('目标组件', true),
+            renderCmptIdInput(),
             {
               type: 'radios',
               label: '条件',
@@ -1027,7 +1028,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                 return (
                   <div>
                     <span className="variable-right">
-                      {info?.rendererLabel}
+                      {info?.rendererLabel || info.componentId}
                     </span>
                     组件切换为静态
                   </div>
@@ -1040,7 +1041,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                 return (
                   <div>
                     <span className="variable-right">
-                      {info?.rendererLabel}
+                      {info?.rendererLabel || info.componentId}
                     </span>
                     组件切换为输入态
                   </div>
@@ -1051,6 +1052,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
           supportComponents: ['form', ...SUPPORT_STATIC_FORMITEM_CMPTS],
           schema: [
             ...renderCmptSelect('选择组件', true),
+            renderCmptIdInput(),
             {
               type: 'radios',
               label: '组件状态',
@@ -1083,7 +1085,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
               <div>
                 刷新
                 <span className="variable-left variable-right">
-                  {info?.rendererLabel || '-'}
+                  {info?.rendererLabel || info.componentId || '-'}
                 </span>
                 组件
               </div>
@@ -1091,6 +1093,11 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
           },
           supportComponents: 'byComponent',
           schema: [
+            {
+              type: 'wrapper',
+              size: 'sm',
+              visibleOn: 'data.componentId === "customCmptId"',
+              body: [
                 ...renderCmptSelect(
                   '目标组件',
                   true,
@@ -1099,6 +1106,47 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                     form.setValueByName('__addParam', false);
                     form.setValueByName('__containerType', 'all');
                     form.setValueByName('__reloadParam', []);
+                  },
+                  true
+                )
+              ]
+            },
+            {
+              type: 'wrapper',
+              size: 'sm',
+              visibleOn: 'data.componentId !== "customCmptId"',
+              body: [
+                ...renderCmptSelect(
+                  '目标组件',
+                  true,
+                  (value: string, oldVal: any, data: any, form: any) => {
+                    form.setValueByName('args.resetPage', true);
+                    form.setValueByName('__addParam', false);
+                    form.setValueByName('__containerType', 'all');
+                    form.setValueByName('__reloadParam', []);
+                  }
+                )
+              ]
+            },
+            renderCmptIdInput(
+              (value: string, oldVal: any, data: any, form: any) => {
+                // 找到组件并设置相关的属性
+                let schema = JSONGetById(manager.store.schema, value, 'id');
+                if (schema) {
+                  let __isScopeContainer = !!manager.dataSchema.getScope(
+                    `${schema.$$id}-${schema.type}`
+                  );
+                  let __rendererName = schema.type;
+                  form.setValues({
+                    __isScopeContainer,
+                    __rendererName
+                  });
+                } else {
+                  form.setValues({
+                    __isScopeContainer: false,
+                    __rendererName: ''
+                  });
+                }
               }
             ),
             {
@@ -1242,7 +1290,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                   <>
                     设置组件「
                     <span className="variable-left variable-right">
-                      {info?.rendererLabel || '-'}
+                      {info?.rendererLabel || info.componentId || '-'}
                     </span>
                     」的数据
                   </>
@@ -1288,6 +1336,11 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
             {
               type: 'container',
               visibleOn: '__actionSubType === "cmpt"',
+              body: [
+                {
+                  type: 'wrapper',
+                  size: 'sm',
+                  visibleOn: 'data.componentId === "customCmptId"',
                   body: [
                     ...renderCmptActionSelect(
                       '目标组件',
@@ -1295,6 +1348,45 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                       (value: string, oldVal: any, data: any, form: any) => {
                         form.setValueByName('args.__containerType', 'all');
                         form.setValueByName('args.__comboType', 'all');
+                      },
+                      true
+                    )
+                  ]
+                },
+                {
+                  type: 'wrapper',
+                  visibleOn: 'data.componentId !== "customCmptId"',
+                  size: 'sm',
+                  body: [
+                    ...renderCmptActionSelect(
+                      '目标组件',
+                      true,
+                      (value: string, oldVal: any, data: any, form: any) => {
+                        form.setValueByName('args.__containerType', 'all');
+                        form.setValueByName('args.__comboType', 'all');
+                      }
+                    )
+                  ]
+                },
+                renderCmptIdInput(
+                  (value: string, oldVal: any, data: any, form: any) => {
+                    // 找到组件并设置相关的属性
+                    let schema = JSONGetById(manager.store.schema, value, 'id');
+                    if (schema) {
+                      let __isScopeContainer = !!manager.dataSchema.getScope(
+                        `${schema.$$id}-${schema.type}`
+                      );
+                      let __rendererName = schema.type;
+                      form.setValues({
+                        __isScopeContainer,
+                        __rendererName
+                      });
+                    } else {
+                      form.setValues({
+                        __isScopeContainer: false,
+                        __rendererName: ''
+                      });
+                    }
                   }
                 ),
                 getArgsWrapper({
@@ -1534,7 +1626,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
               <div>
                 提交
                 <span className="variable-left variable-right">
-                  {info?.rendererLabel || '-'}
+                  {info?.rendererLabel || info.componentId || '-'}
                 </span>
                 的数据
               </div>
@@ -1543,6 +1635,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
           supportComponents: 'form',
           schema: [
             ...renderCmptSelect('目标组件', true),
+            renderCmptIdInput(),
             {
               name: 'outputVar',
               type: 'input-text',
@@ -1590,14 +1683,14 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
               <div>
                 清空
                 <span className="variable-left variable-right">
-                  {info?.rendererLabel || '-'}
+                  {info?.rendererLabel || info.componentId || '-'}
                 </span>
                 的数据
               </div>
             );
           },
           supportComponents: 'form',
-          schema: renderCmptSelect('目标组件', true)
+          schema: [...renderCmptSelect('目标组件', true), renderCmptIdInput()]
         },
         {
           actionLabel: '重置表单',
@@ -1608,14 +1701,14 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
               <div>
                 重置
                 <span className="variable-left variable-right">
-                  {info?.rendererLabel || '-'}
+                  {info?.rendererLabel || info.componentId || '-'}
                 </span>
                 的数据
               </div>
             );
           },
           supportComponents: 'form',
-          schema: renderCmptSelect('目标组件', true)
+          schema: [...renderCmptSelect('目标组件', true), renderCmptIdInput()]
         },
         {
           actionLabel: '校验表单',
@@ -1626,7 +1719,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
               <div>
                 校验
                 <span className="variable-left variable-right">
-                  {info?.rendererLabel || '-'}
+                  {info?.rendererLabel || info.componentId || '-'}
                 </span>
                 的数据
               </div>
@@ -1635,6 +1728,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
           supportComponents: 'form',
           schema: [
             ...renderCmptSelect('目标组件', true),
+            renderCmptIdInput(),
             {
               name: 'outputVar',
               type: 'input-text',
@@ -1813,8 +1907,28 @@ doAction({
 export const renderCmptSelect = (
   componentLabel: string,
   required: boolean,
-  onChange?: (value: string, oldVal: any, data: any, form: any) => void
+  onChange?: (value: string, oldVal: any, data: any, form: any) => void,
+  hideAutoFill?: boolean
 ) => {
+  if (hideAutoFill) {
+    return [
+      {
+        type: 'tree-select',
+        name: 'componentId',
+        label: componentLabel || '选择组件',
+        showIcon: false,
+        searchable: true,
+        required,
+        selfDisabledAffectChildren: false,
+        size: 'lg',
+        source: '${__cmptTreeSource}',
+        mode: 'horizontal',
+        onChange: async (value: string, oldVal: any, data: any, form: any) => {
+          onChange?.(value, oldVal, data, form);
+        }
+      }
+    ];
+  } else {
     return [
       {
         type: 'tree-select',
@@ -1839,13 +1953,16 @@ export const renderCmptSelect = (
         }
       }
     ];
+  }
 };
 
 // 渲染组件特性动作配置项
 export const renderCmptActionSelect = (
   componentLabel: string,
   required: boolean,
-  onChange?: (value: string, oldVal: any, data: any, form: any) => void
+  onChange?: (value: string, oldVal: any, data: any, form: any) => void,
+  hideAutoFill?: boolean,
+  manager?: EditorManager
 ) => {
   return [
     ...renderCmptSelect(
@@ -1880,8 +1997,31 @@ export const renderCmptActionSelect = (
         }
         form.setValueByName('groupType', '');
         onChange?.(value, oldVal, data, form);
-      }
+      },
+      hideAutoFill
     ),
+    {
+      type: 'input-text',
+      name: '__cmptId',
+      mode: 'horizontal',
+      size: 'lg',
+      required: true,
+      label: '组件id',
+      visibleOn:
+        'data.componentId === "customCmptId" && data.actionType === "component"',
+      onChange: async (value: string, oldVal: any, data: any, form: any) => {
+        let schema = JSONGetById(manager!.store.schema, value, 'id');
+        if (schema) {
+          form.setValues({
+            __rendererName: schema.type
+          });
+        } else {
+          form.setValues({
+            __rendererName: ''
+          });
+        }
+      }
+    },
     {
       asFormItem: true,
       label: '组件动作',
@@ -1895,6 +2035,23 @@ export const renderCmptActionSelect = (
   ];
 };
 
+export const renderCmptIdInput = (
+  onChange?: (value: string, oldVal: any, data: any, form: any) => void
+) => {
+  return {
+    type: 'input-text',
+    name: '__cmptId',
+    mode: 'horizontal',
+    size: 'lg',
+    required: true,
+    label: '组件id',
+    visibleOn: 'data.componentId === "customCmptId"',
+    onChange: async (value: string, oldVal: any, data: any, form: any) => {
+      onChange?.(value, oldVal, data, form);
+    }
+  };
+};
+
 // 动作配置项schema map
 export const COMMON_ACTION_SCHEMA_MAP: {
   [propName: string]: RendererPluginAction;
@@ -2739,6 +2896,10 @@ export const getEventControlConfig = (
         1,
         true
       );
+      result.unshift({
+        label: '输入组件id',
+        value: 'customCmptId'
+      });
       return result;
     },
     actionConfigInitFormatter: async (action: ActionConfig) => {
@@ -2854,6 +3015,46 @@ export const getEventControlConfig = (
         }
       }
 
+      // 如果不在可以选择的组件范围，设置一下自定义输入组件数据
+      if (
+        [
+          'setValue',
+          'static',
+          'nonstatic',
+          'show',
+          'visibility',
+          'hidden',
+          'enabled',
+          'disabled',
+          'usability',
+          'reload',
+          'submit',
+          'clear',
+          'reset',
+          'validate'
+        ].includes(action.actionType)
+      ) {
+        const node = findTree(
+          allComponents ?? [],
+          item => item.value === config.componentId
+        );
+        if (!node) {
+          config.__cmptId = config.componentId;
+          config.componentId = 'customCmptId';
+        }
+
+        if (['setValue'].includes(action.actionType)) {
+          let schema = JSONGetById(manager.store.schema, config.__cmptId, 'id');
+          if (schema) {
+            let __isScopeContainer = !!manager.dataSchema.getScope(
+              `${schema.$$id}-${schema.type}`
+            );
+            config.__isScopeContainer = __isScopeContainer;
+            config.__rendererName = schema.type;
+          }
+        }
+      }
+
       delete config.data;
 
       // 处理下 addItem 的初始化
@@ -3170,6 +3371,30 @@ export const getEventControlConfig = (
         }
       }
 
+      if (
+        [
+          'setValue',
+          'static',
+          'nonstatic',
+          'show',
+          'visibility',
+          'hidden',
+          'enabled',
+          'disabled',
+          'usability',
+          'reload',
+          'submit',
+          'clear',
+          'reset',
+          'validate'
+        ].includes(action.actionType)
+      ) {
+        // 处理一下自行输入组件id的转换
+        if (action.componentId === 'customCmptId') {
+          action.componentId = action.__cmptId;
+        }
+      }
+
       if (
         action.actionType === 'addItem' &&
         action.__rendererName === 'combo'