amis-saas-8095 [Improvement.] 「动作配置」显隐/可用禁用分别合并

Change-Id: Ia58683f2d059aa561147fe03c4f7b90c3447f834

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

@@ -109,14 +109,13 @@ export default class ActionDialog extends React.Component<ActionDialogProp> {
         ) {
           groupType = 'closeDialog';
         }
-
+        if (value === 'visibility' && !['show', 'hidden', 'visibility'].includes(groupType)) {
-        if (value === 'visibility' && !['show', 'hidden'].includes(groupType)) {
           groupType = 'show';
         }
 
         if (
           value === 'usability' &&
-          !['enabled', 'disabled'].includes(groupType)
+          !['enabled', 'disabled', 'usability'].includes(groupType)
         ) {
           groupType = 'enabled';
         }

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

@@ -637,6 +637,20 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                   </div>
                 );
               }
+            },
+            {
+              actionType: 'visibility',
+              descDetail: (info: any) => {
+                return (
+                  <div>
+                    组件
+                    <span className="variable-left variable-right">
+                      {info?.rendererLabel || '-'}
+                    </span>
+                    表达式已配置
+                  </div>
+                );
+              }
             }
           ],
           supportComponents: '*',
@@ -644,13 +658,33 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
             ...renderCmptSelect('目标组件', true),
             {
               type: 'radios',
-              label: '显示/隐藏',
+              label: '条件',
               name: 'groupType',
               mode: 'horizontal',
+              value: 'static',
+              required: true,
+              inputClassName: 'event-action-radio',
+              options: [
+                {
+                  label: '静态',
+                  value: 'static'
+                },
+                {
+                  label: '表达式',
+                  value: 'visibility'
+                }
+              ]
+            },
+            {
+              type: 'radios',
+              label: '显示/隐藏',
+              name: '__statusType',
+              mode: 'horizontal',
               value: 'show',
               required: true,
               pipeIn: defaultValue('show'),
               inputClassName: 'event-action-radio',
+              visibleOn: "this.groupType === 'static'",
               options: [
                 {
                   label: '显示',
@@ -661,6 +695,17 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                   value: 'hidden'
                 }
               ]
+            },
+            {
+              type: 'ae-expressionFormulaControl',
+              mode: 'horizontal',
+              label: '表达式',
+              required: true,
+              size: 'lg',
+              variables: '${variables}',
+              evalMode: true,
+              name: '__actionExpression',
+              visibleOn: "this.groupType === 'visibility'"
             }
           ]
         },
@@ -696,6 +741,20 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                   </div>
                 );
               }
+            },
+            {
+              actionType: 'usability',
+              descDetail: (info: any) => {
+                return (
+                  <div>
+                    组件
+                    <span className="variable-left variable-right">
+                      {info?.rendererLabel || '-'}
+                    </span>
+                    表达式已配置
+                  </div>
+                );
+              }
             }
           ],
           supportComponents: [
@@ -707,13 +766,33 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
             ...renderCmptSelect('目标组件', true),
             {
               type: 'radios',
-              label: '启用/禁用',
+              label: '条件',
               name: 'groupType',
               mode: 'horizontal',
               inputClassName: 'event-action-radio',
+              value: 'static',
+              required: true,
+              options: [
+                {
+                  label: '静态',
+                  value: 'static'
+                },
+                {
+                  label: '表达式',
+                  value: 'usability'
+                }
+              ]
+            },
+            {
+              type: 'radios',
+              label: '启用/禁用',
+              name: '__statusType',
+              mode: 'horizontal',
+              inputClassName: 'event-action-radio',
               value: 'enabled',
               required: true,
               pipeIn: defaultValue('enabled'),
+              visibleOn: "this.groupType === 'static'",
               options: [
                 {
                   label: '启用',
@@ -724,6 +803,16 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                   value: 'disabled'
                 }
               ]
+            },
+            {
+              type: 'ae-expressionFormulaControl',
+              mode: 'horizontal',
+              label: '表达式',
+              required: true,
+              size: 'lg',
+              evalMode: true,
+              name: '__actionExpression',
+              visibleOn: "this.groupType === 'usability'"
             }
           ]
         },

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

@@ -1200,6 +1200,17 @@ export const getEventControlConfig = (
         }
       }
 
+      if (['show', 'hidden', 'enabled', 'disabled'].includes(action.actionType)) {
+        // 兼容老逻辑，初始化actionType
+        config.__statusType = action.actionType;
+        config.__actionType = 'static';
+      }
+
+      if (['usability', 'visibility'].includes(action.actionType)) {
+        // 初始化条件参数
+        config.__actionExpression = action.args?.value;
+      }
+
       if (
         action.actionType === 'ajax' &&
         typeof action?.args?.api === 'string'
@@ -1415,6 +1426,19 @@ export const getEventControlConfig = (
         }
       }
 
+      // 转换下格式
+      if (['visibility', 'usability'].includes(config.actionType)) {
+        action.args =
+          action.actionType !== 'static'
+            ? {
+                value: action.__actionExpression
+              }
+            : undefined;
+        action.actionType === 'static' && (action.actionType = config.__statusType);
+        delete action.__actionExpression;
+        delete action.__statusType;
+      };
+
       delete action.config;
 
       return action;

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

@@ -541,7 +541,7 @@ export class EventControl extends React.Component<
         getContextSchemas,
         rawVariables,
         ...actionConfig,
-        groupType: action.actionType,
+        groupType: actionConfig?.__actionType || action.actionType,
         __actionDesc: actionNode!.description!, // 树节点描述
         __actionSchema: actionNode!.schema, // 树节点schema
         __subActions: hasSubActionNode?.actions, // 树节点子动作