@aimake/form

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

Usage no npm install needed!

<script type="module">
  import aimakeForm from 'https://cdn.skypack.dev/@aimake/form';
</script>

README

@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+)?quot;,
    "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 }, } }; 表单项内部显示比例