next-formx

根据配置数据生成Form

API

Form

| 参数 | 说明 | 类型 | 默认值 | | :-----| :---- | :---- | :---- | | groupNumber | 每行分组数量 | number | 1 | formItems | formItem配置 | FormItem[] |

FormItem

更多参数配置，参考antd formItem配置

| 参数 | 说明 | 类型 | 默认值 | | :-----| :---- | :---- | :---- | | type | 类型 | FormItemTypes | input | ghost | 是否隐藏 | string boolean | | required | 是否必填 | string boolean | | options | 组件配置项，具体字段参考对应组件的配置 | object

FormItemTypes

| 属性 | 值 | 说明 | 配置项 | | :-----| :---- | :---- | :---- | | INPUT | input | 输入框 | 查看 | SWITCH | switch | 切换 | 查看 | SELECT | select | 下拉框 | 参考Select api | NUMBER | number | 数字输入框 | 参考Number api | DATE_PICKER | datePicker | 日期选择 | 查看 | RANGE_PICKER | rangePicker | 日期范围选择 | 查看 | CHECKBOX_GROUP | checkboxGroup | 多选 | 查看

Number

基于antd input-number封装，支持金额格式化、整数限制。更多API 请参考antd InputNumber

| 参数 | 说明 | 类型 | 默认值 | | :-----| :---- | :---- | :---- | | isAmount | 金额format | boolean | | isInteger | 整数限制，为true时只允许输入整数 | boolean |

Select

基于antd select封装，支持传入url获取数据。更多API 请参考antd Select

| 参数 | 说明 | 类型 | 默认值 | | :-----| :---- | :---- | :---- | | url | 获取数据url | string | | cacheKey | 缓存key，需全局唯一，只获取一次数据 | boolean | false | query | 查询参数 | object | extra | 客户扩展数据，被form嵌套下参数才生效 | string[] | fieldNames | label value显示的字段 | { label: string; value: string } | { label: 'label', value: 'value' }

示例

formItems配置项示例

import { FormItemTypes } from 'next-formx';

const formItems = [
  {
    name: 'uNm'
  },
  {
    name: 'age',
    type: FormItemTypes.NUMBER,
    required: '!!${uNm}', // 根据uNm 控制是否必填
    options: { // options 组件配置项
      isInteger: true
    }
  },
  {
    name: 'child',
    type: FormItemTypes.SELECT,
    options: {
      url: '/api/getUsers',
      query: '{"where":{"partner":${uNm}}}', // 基于其他字段动态生成query
      extra: ['sex','cunm=childName'] // 扩展出sex，childName并重命为cunm
    }
  }
]