@aimake/form NPM

@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）