Merge pull request #10602 from hzh11012/master

feat: 配置面板-规则项支持自定义schema

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

@@ -392,7 +392,14 @@ export class DateControlPlugin extends BasePlugin {
             },
             getSchemaTpl('status', {isFormItem: true}),
             getSchemaTpl('validation', {
-              tag: ValidatorTag.Date
+              tag: ValidatorTag.Date,
+              rendererSchema: (schema: Schema) => {
+                return {
+                  ...schema,
+                  label: '值内容',
+                  validateName: 'equals'
+                };
+              }
             })
           ],
           {...context?.schema, configTitle: 'props'}

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

@@ -506,7 +506,14 @@ export class DateRangeControlPlugin extends BasePlugin {
             },
             getSchemaTpl('status', {isFormItem: true}),
             getSchemaTpl('validation', {
-              tag: ValidatorTag.Date
+              tag: ValidatorTag.Date,
+              rendererSchema: (schema: Schema) => {
+                return {
+                  ...schema,
+                  label: '值内容',
+                  validateName: 'equals'
+                };
+              }
             })
           ],
           {...context?.schema, configTitle: 'props'}

packages/amis-editor/src/renderer/ValidationControl.tsx

@@ -5,10 +5,12 @@
 import React, {ReactNode} from 'react';
 import groupBy from 'lodash/groupBy';
 import remove from 'lodash/remove';
+import omit from 'lodash/omit';
 import cx from 'classnames';
 import {ConditionBuilderFields, FormItem, flattenTree} from 'amis';
 
 import {
+  JSONPipeOut,
   autobind,
   getConditionVariables,
   isObjectShallowModified
@@ -295,6 +297,10 @@ export default class ValidationControl extends React.Component<
    * 规则列表
    */
   renderValidaton() {
+    const _rendererSchema = ValidationControl.getRendererSchemaFromProps(
+      this.props
+    );
+    const rendererSchema = this.filterCustomRendererProps(_rendererSchema);
     const classPrefix = this.props?.env?.theme?.classPrefix;
     let {
       avaliableValids: {defaultValidators, moreValidators, builtInValidators},
@@ -308,6 +314,7 @@ export default class ValidationControl extends React.Component<
       const data = remove(validators, v => v.name === validName);
       rules.push(
         <ValidationItem
+          rendererSchema={rendererSchema}
           fields={fields}
           key={validName}
           validator={defaultValidators[validName]}
@@ -325,6 +332,7 @@ export default class ValidationControl extends React.Component<
       const data = remove(validators, v => v.name === validName);
       rules.push(
         <ValidationItem
+          rendererSchema={rendererSchema}
           fields={fields}
           key={validName}
           validator={builtInValidators[validName]}
@@ -352,6 +360,7 @@ export default class ValidationControl extends React.Component<
         }
         rules.push(
           <ValidationItem
+            rendererSchema={rendererSchema}
             fields={fields}
             key={valid.name}
             data={valid}
@@ -373,6 +382,94 @@ export default class ValidationControl extends React.Component<
     );
   }
 
+  // 剔除掉一些用不上的属性
+  @autobind
+  filterCustomRendererProps(rendererSchema: any) {
+    const {
+      data,
+      name,
+      placeholder,
+      rendererSchema: _rendererSchema
+    } = this.props;
+
+    let curRendererSchema: any = rendererSchema;
+    if (rendererSchema && typeof _rendererSchema === 'function') {
+      curRendererSchema = Object.assign({}, rendererSchema, {
+        type: rendererSchema.type ?? data.type,
+        popOverContainer: () => document.body,
+        name: 'value'
+      });
+
+      // 默认要剔除的字段
+      const deleteProps = [
+        'id',
+        '$$id',
+        'className',
+        'style',
+        'readOnly',
+        'horizontal',
+        'size',
+        'remark',
+        'labelRemark',
+        'static',
+        'staticOn',
+        'hidden',
+        'hiddenOn',
+        'visible',
+        'visibleOn',
+        'disabled',
+        'disabledOn',
+        'required',
+        'requiredOn',
+        'className',
+        'labelClassName',
+        'labelAlign',
+        'inputClassName',
+        'description',
+        'autoUpdate',
+        'prefix',
+        'suffix',
+        'unitOptions',
+        'keyboard',
+        'kilobitSeparator',
+        'value',
+        'inputControlClassName',
+        'css',
+        'validateApi',
+        'validations',
+        'themeCss',
+        'onEvent',
+        'embed'
+      ];
+
+      curRendererSchema = omit(curRendererSchema, deleteProps);
+      // 设置可清空
+      curRendererSchema.clearable = true;
+
+      if (placeholder) {
+        curRendererSchema.placeholder = placeholder;
+      }
+    }
+
+    JSONPipeOut(curRendererSchema);
+
+    return curRendererSchema;
+  }
+
+  /**
+   * 获取rendererSchema的值
+   */
+  static getRendererSchemaFromProps(props: ValidationControlProps) {
+    let rendererSchema = props.rendererSchema;
+
+    if (typeof rendererSchema === 'function') {
+      const schema = props.data ? {...props.data} : undefined;
+      return rendererSchema(schema);
+    } else {
+      return rendererSchema;
+    }
+  }
+
   render() {
     const {className} = this.props;
 
@@ -392,6 +489,15 @@ export default class ValidationControl extends React.Component<
 @FormItem({
   type: 'ae-validationControl',
   renderLabel: false,
-  strictMode: false
+  strictMode: false,
+  shouldComponentUpdate: (
+    props: ValidationControlProps,
+    nextProps: ValidationControlProps
+  ) => {
+    const rendererSchema = ValidationControl.getRendererSchemaFromProps(props);
+    const newRendererSchema =
+      ValidationControl.getRendererSchemaFromProps(nextProps);
+    return isObjectShallowModified(rendererSchema, newRendererSchema);
+  }
 })
 export class ValidationControlRenderer extends ValidationControl {}

packages/amis-editor/src/renderer/ValidationItem.tsx

@@ -9,7 +9,7 @@ import {render, Button, Switch} from 'amis';
 import {autobind, getI18nEnabled} from 'amis-editor-core';
 import {Validator} from '../validator';
 import {tipedLabel} from 'amis-editor-core';
-import type {ConditionBuilderFields, SchemaCollection} from 'amis';
+import type {ConditionBuilderFields, Schema, SchemaCollection} from 'amis';
 
 export type ValidatorData = {
   name: string;
@@ -38,6 +38,8 @@ export interface ValidationItemProps {
 
   fields?: ConditionBuilderFields;
 
+  rendererSchema?: Schema | Schema[];
+
   onEdit?: (data: ValidatorData) => void;
   onDelete?: (name: string) => void;
   onSwitch?: (checked: boolean, data?: ValidatorData) => void;
@@ -136,7 +138,7 @@ export default class ValidationItem extends React.Component<
 
   renderInputControl() {
     const {value, message, checked} = this.state;
-    const {fields} = this.props;
+    const {fields, rendererSchema} = this.props;
     const i18nEnabled = getI18nEnabled();
     let control: any = [];
 
@@ -144,7 +146,16 @@ export default class ValidationItem extends React.Component<
       return null;
     }
 
-    if (this.validator.schema) {
+    if (rendererSchema) {
+      let rendererSchemaArr = Array.isArray(rendererSchema)
+        ? rendererSchema
+        : [rendererSchema];
+      rendererSchemaArr.forEach(item => {
+        if (item.validateName === this.validator.name) {
+          control = control.concat(item as SchemaCollection);
+        }
+      });
+    } else if (this.validator.schema) {
       control = control.concat(this.validator.schema as SchemaCollection);
     }
 

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

@@ -6,7 +6,7 @@ import {
   getI18nEnabled
 } from 'amis-editor-core';
 import {ValidationOptions} from '../component/BaseControl';
-import {str2rules} from 'amis';
+import {Schema, str2rules} from 'amis';
 import {ValidatorTag} from '../validator';
 
 import find from 'lodash/find';
@@ -551,7 +551,10 @@ setSchemaTpl('validateOnChange', {
 
 setSchemaTpl(
   'validation',
-  (config: {tag: ValidatorTag | ((ctx: any) => ValidatorTag)}) => {
+  (config: {
+    tag: ValidatorTag | ((ctx: any) => ValidatorTag);
+    rendererSchema?: (schema: Schema) => void | Schema | Schema[];
+  }) => {
     let a = {
       title: '校验',
       body: [