chore(amis-editor): form & dialog 的操作按钮在没有设置的情况下也可以点选 (#7608)

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

@@ -13,7 +13,7 @@ import {EditorDNDManager} from './dnd';
 import React from 'react';
 import {DiffChange} from './util';
 import find from 'lodash/find';
-import type {RendererConfig} from 'amis-core';
+import type {RendererConfig, Schema} from 'amis-core';
 import type {MenuDivider, MenuItem} from 'amis-ui/lib/components/ContextMenu';
 import type {BaseSchema, SchemaCollection} from 'amis';
 import type {AsyncLayerOptions} from './component/AsyncLayer';
@@ -926,6 +926,19 @@ export interface PluginInterface
     data: any
   ) => void;
 
+  /**
+   * 给 schema 打补丁，纠正一下 schema 配置。
+   * @param schema
+   * @param renderer
+   * @param props
+   * @returns
+   */
+  patchSchema?: (
+    schema: Schema,
+    renderer: RendererConfig,
+    props?: any
+  ) => Schema | void;
+
   dispose?: () => void;
 }
 

packages/amis-editor-core/src/store/node.ts

@@ -649,9 +649,19 @@ export const EditorNode = types
           );
         }
 
+        // 调用 amis 纠错补丁
         patched = filterSchema(patched, {
           component: info.renderer.component
         } as any);
+        // 调用插件上的补丁
+        patched =
+          info.plugin?.patchSchema?.(
+            patched,
+            {
+              component: info.renderer.component
+            },
+            component?.props
+          ) || patched;
         patched = JSONPipeIn(patched);
         if (patched !== schema) {
           root.changeValueById(info.id, patched, undefined, true, true);

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

@@ -14,6 +14,7 @@ import {
 } from 'amis-editor-core';
 import {getEventControlConfig} from '../renderer/event-control/helper';
 import omit from 'lodash/omit';
+import type {RendererConfig, Schema} from 'amis-core';
 
 export class DialogPlugin extends BasePlugin {
   static id = 'DialogPlugin';
@@ -349,6 +350,35 @@ export class DialogPlugin extends BasePlugin {
       properties: dataSchema
     };
   }
+
+  /**
+   * 为了让 dialog 的按钮可以点击编辑
+   */
+  patchSchema(schema: Schema, info: RendererConfig, props?: any) {
+    if (Array.isArray(schema.actions)) {
+      return;
+    }
+
+    return {
+      ...schema,
+      actions: [
+        {
+          type: 'button',
+          actionType: 'cancel',
+          label: '取消'
+        },
+
+        props?.confirm
+          ? {
+              type: 'button',
+              actionType: 'confirm',
+              label: '确定',
+              primary: true
+            }
+          : null
+      ].filter((item: any) => item)
+    };
+  }
 }
 
 registerEditorPlugin(DialogPlugin);

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

@@ -15,7 +15,7 @@ import {defaultValue, getSchemaTpl} from 'amis-editor-core';
 import {jsonToJsonSchema} from 'amis-editor-core';
 import {EditorNodeType} from 'amis-editor-core';
 import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
-import {setVariable, someTree} from 'amis-core';
+import {RendererConfig, Schema, setVariable, someTree} from 'amis-core';
 import {getEventControlConfig} from '../../renderer/event-control/helper';
 
 // 用于脚手架的常用表单控件
@@ -980,6 +980,40 @@ export class FormPlugin extends BasePlugin {
       scope?.addSchema(jsonschema);
     }
   }
+
+  /**
+   * 为了让 form 的按钮可以点击编辑
+   */
+  patchSchema(schema: Schema, info: RendererConfig, props: any) {
+    if (
+      Array.isArray(schema.actions) ||
+      schema.wrapWithPanel === false ||
+      (Array.isArray(schema.body) &&
+        schema.body.some(
+          (item: any) =>
+            item &&
+            !!~['submit', 'button', 'button-group', 'reset'].indexOf(
+              (item as any)?.body?.[0]?.type ||
+                (item as any)?.body?.type ||
+                (item as any).type
+            )
+        ))
+    ) {
+      return;
+    }
+
+    return {
+      ...schema,
+      actions: [
+        {
+          type: 'submit',
+          label:
+            props?.translate(props?.submitText) || schema.submitText || '提交',
+          primary: true
+        }
+      ]
+    };
+  }
 }
 
 registerEditorPlugin(FormPlugin);

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

@@ -325,6 +325,9 @@ export class DateRangeControlPlugin extends BasePlugin {
                 getSchemaTpl('formItemName', {
                   required: true
                 }),
+
+                getSchemaTpl('formItemExtraName'),
+
                 getSchemaTpl('label'),
                 getSchemaTpl('selectDateRangeType', {
                   value: this.scaffold.type,

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

@@ -79,6 +79,28 @@ setSchemaTpl('formItemName', {
   // validateOnChange: false
 });
 
+setSchemaTpl('formItemExtraName', {
+  className: 'mb-3',
+  type: 'fieldset',
+  body: [
+    getSchemaTpl('formItemName', {
+      required: true,
+      label: '额外字段',
+      name: 'extraName',
+      visibleOn: 'typeof this.extraName === "string"'
+    }),
+
+    {
+      type: 'switch',
+      label: tipedLabel('存成两个字段', '开启后将选中范围分别存成两个字段'),
+      name: 'extraName',
+      pipeIn: (value: any) => typeof value === 'string',
+      pipeOut: (value: any) => (value ? '' : undefined),
+      inputClassName: 'is-inline'
+    }
+  ]
+});
+
 setSchemaTpl(
   'formItemMode',
   (config: {