跳到主要内容

动态表单配置指南

· 阅读需 4 分钟
Quany
Quany
软件工程师

介绍​

配合异常自愈动作策略管理，其中有四类动作固定， 其余由动作表单动态配置，实现高度自由定义。

动作表单字段配置​

示例：

{
  "label": "测试", // 必填配置：名称
  "name": "test", // 必填配置：字段名
  "valueType": "string", // 必填配置：数据类型"string|boolean|int|nubmer|",
  "componentType": "input", // 必填配置：字段组件类型

  "placeholder": "提示语", // 可选配置：字段组件的提示语
  "defaultValue": "", // 可选配置：字段组件的默认值
  "maxLength": 1000, // 可选配置：字段组件的最大长度
  "fieldDesc": "测试描述", // 可选配置：字段组件的描述
  "hidden": false // 可选配置：字段组件是否隐藏
}

必填配置​

 "label": "测试", // 必填配置：名称
  "name": "test", // 必填配置：字段名
  "valueType": "string", // 必填配置：数据类型"string|boolean|int|nubmer|",
  "componentType": "input", // 必填配置：字段组件类型

注意componentType可配置的字段组件类型有以下：

export type ItemTypePropsMap = {
  'image-code': OmitProps<ImageCodeProps>;
  'message-code': OmitProps<MessageCodeProps>;
  'input': OmitProps<InputProps & { options?: SelectProps['options'] }>; // 一般输入框
  'hidden': OmitProps<InputProps>; // 隐藏
  'number': OmitProps<InputNumberProps>; // 数字
  'textarea': OmitProps<TextAreaProps>; // 文本域，后端大致长度是 200
  'password': OmitProps<PasswordProps>; // 密码
  'mobile': OmitProps<InputProps>; // 手机号
  'email': OmitProps<InputProps>; // 邮箱
  'select': OmitProps<SelectProps>; // 下拉选择框
  'select-tree': OmitProps<TreeSelectProps & { options?: TreeSelectProps['treeData'] }>;
  'checkbox': OmitProps<CheckboxProps>;
  'checkbox-group': OmitProps<CheckboxGroupProps>;
  'radio': OmitProps<RadioProps>;
  'radio-button': OmitProps<RadioButtonProps & { options?: SelectProps['options'] }>;
  'radio-group': OmitProps<RadioGroupProps>;
  'switch': OmitProps<SwitchProps>;
  'date': OmitProps<DatePickerProps & DatePickerCommonProps>;
  'date-long': OmitProps<DatePickerLongProps & DatePickerCommonProps>;
  'week': OmitProps<DatePickerProps & DatePickerCommonProps>;
  'month': OmitProps<DatePickerProps & DatePickerCommonProps>;
  'quarter': OmitProps<DatePickerProps & DatePickerCommonProps>;
  'year': OmitProps<DatePickerProps & DatePickerCommonProps>;
  'date-range': OmitProps<RangePickerProps & RangePickerCommonProps>;
  'week-range': OmitProps<RangePickerProps & RangePickerCommonProps>;
  'month-range': OmitProps<RangePickerProps & RangePickerCommonProps>;
  'quarter-range': OmitProps<RangePickerProps & RangePickerCommonProps>;
  'year-range': OmitProps<RangePickerProps & RangePickerCommonProps>;
  'time': OmitProps<TimePickerProps>;
  'time-range': OmitProps<TimeRangePickerProps>;
  'date-time-range': OmitProps<RangePickerProps & RangePickerCommonProps>;
  'date-time': OmitProps<DatePickerProps & DatePickerCommonProps>;
  'cascader': OmitProps<CascaderProps>;
  'transfer': OmitProps<TransferProps<any>>;
};

通用配置​

    placeholder: "提示语", // 可选配置：字段组件的提示语
    required: true, // 可选配置：字段是否必填
    maxLength?: number; // 可选配置：字段长度限制
    len?: number; // 可选配置：字段长度限制
    minLength?: number; // 可选配置：字段长度限制
    noSpace?: boolean; // 可选配置：是否有空隙
    pattern?: [RegExp, string?] | RegExp; // 可选配置：字段组件的校验正则
    span?: number | string; // 可选配置：字段组件的宽度
    col?: ColProps; // 可选配置：字段组件的列属性
    itemStyle?: CSSProperties; // 可选配置：字段组件的样式
    itemClassName?: string; // 可选配置：字段组件的类名
    itemProps?: any; // 可选配置：字段组件的属性
    className?: string; // 可选配置：字段组件的样式，支持 tws
    rootClassName?: string; // 可选配置：字段组件的根样式，支持 tws
    layout?: FormItemLayout; // 可选配置：字段组件的布局

组件类型配置（componentType）​

  • select: 下拉选择框
    options: {
      label: string;
      value: number | string;
    }[];
  • number: 数字输入框
   max: number; // 可选配置：最大值
   min: number; // 可选配置：最小值
  • date: 日期选择框
  dateFormat?: string;    // 日期必须配置：日期格式

属性列举​

    type?: Type;
    maxLength?: number;
    len?: number;
    minLength?: number;
    noSpace?: boolean;
    pattern?: [RegExp, string?] | RegExp;
    span?: number | string;
    col?: ColProps;
    itemStyle?: CSSProperties;
    itemClassName?: string;
    itemProps?: any;

    prefixCls?: string;
    noStyle?: boolean;
    style?: React.CSSProperties;
    className?: string;
    rootClassName?: string;
    children?: ChildrenType<Values>;
    id?: string;
    hasFeedback?: boolean | {
        icons: FeedbackIcons;
    };
    validateStatus?: ValidateStatus;
    required?: boolean;
    hidden?: boolean;
    initialValue?: any; // 可选配置：初始化值
    messageVariables?: Record<string, string>;
    tooltip?: LabelTooltipType;
    /** @deprecated No need anymore */
    fieldKey?: React.Key | React.Key[];
    layout?: FormItemLayout;

    labelCol?: ColProps;
    wrapperCol?: ColProps;
    extra?: React.ReactNode;
    status?: ValidateStatus;
    help?: React.ReactNode;
    fieldId?: string;
    label?: React.ReactNode;

微信公众号​

微信公众号