@aimake/form

@aimake/form

@aimake/form 是一个基于 AntD Form 的表单组件，用于快速生成一个 PC 端的表单，和 AntD Form 不同，@aimake/form 中集成了 AntD 组件库中所有的 "数据录入"类型的组件，用户无需再引入这些表单组件，可以通过配置化的方式快速产出一个表单。除了默认已经记载了 AntD "数据输入" 组件，@aimake/form 还同时支持用户自定义组件，只需要用户遵守统一的属性和接口规范。

@aimake/form 将表单中的所有涉及到数据抽象成三个属性：config（定义表单项内容）、options（选择类组件的选项）、defaultValues（表单项初始值）。无论是哪种联动逻辑，无一例外均是对这三个属性的修改，可以通过 Form 组件的 onFieldsChange 函数监听用户操作，修改以上三个属性。

安装

npm install @aimake/form

配置文件范例

[
  {
    "label": "日期范围",
    "name": "range",
    "type": "RangePicker",
    "format": "YYYY/MM/DD HH:mm:ss"
  },
  {
    "label": "日期",
    "name": "date",
    "type": "DatePicker",
    "format": "YYYY/MM/DD HH:mm:ss"
  },
  {
    "label": "比对阈值",
    "name": "threshold",
    "type": "Input",
    "addonBefore": ">=",
    "pattern": "^\\d+(\\.\\d+)?$",
    "required": true
  },
  {
    "label": "门店",
    "name": "shopId",
    "type": "Select"
  },
  {
    "label": "线索",
    "name": "haveClue",
    "type": "Radio"
  },
  {
    "label": "年龄",
    "name": "age",
    "type": "Slider",
    "defaultValue": 50,
    "min": 0,
    "max": 120
  },
  {
    "label": "数量",
    "name": "count",
    "type": "InputNumber"
  },
  {
    "label": "开关",
    "name": "switch",
    "type": "Switch"
  },
  {
    "label": "邮箱",
    "name": "email",
    "type": "AutoComplete"
  }
]

代码范例

<AiMakeForm
    form={form}
    layout="horizontal"
    onSubmit={this.handleSubmit}
    config={formConfig}
    options={formOptions}
    defaultValues={formDefaultValue}
    submitText="搜索"
    formComponents={{"Uploader": Uploader}}
    clear
/>

详细代码可见 @aimake/form 下 examples 目录中的代码。运行方法：在 @aimake/form 目录下运行 npm run start，浏览器输入 localhost:8080，即可预览页面。（需要先绑定 127.0.0.1 localhost）

API

AiMakeForm

AiMakeForm 组件本身是对 AntD Form 组件的包装，接受 AntD Form 的所有属性，除此以外还有以下属性。

props:

属性名	类型	默认值	描述
form	object	必填项	由 AntD From 创建并传入，参考 AntD Form
config	array	[]	表单配置项数组，由于描述表单内容
children	element	null	表单子元素，可任意定义，会渲染在表单内容后面
span	number	8	分栏数，参考 AntD Col
options	object	{}	选择类组件的选项，通过字段名对应
defaultValues	object	{}	表单项初始值，通过字段名对应
formComponents	object	{}	自定义组件，可通过配置接入
submit	bool	true	是否需要提交按钮
submitText	string	'查询'	查询按钮文字
clear	bool	false	是否需要重置按钮
clearText	string	'重置'	重置按钮文字
cancel	bool	false	是否需要取消按钮
cancelText	string	'取消'	取消按钮文字
onCancel	func	()=>{}	取消按钮响应

组件配置项

每个表单项组件均是对 AntD "数据录入"类型组件的封装，接受该组件的全部属性，除此以外还有以下属性。

props:

属性名	类型	默认值	描述
label	string	''	表单项标签
name	string	必填项	表单字段的唯一标识，对应表单提交的字段名
required	bool	false	是否必填
requiredMsg	string	'请输入'|'请选择'	必填提示文字
hide	bool	false	是否隐藏
layout	object	{ labelCol: { xs: { span: 24 }, sm: { span: 6 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 18 }, } };	表单项内部显示比例