@tongdun/react-ui-form NPM

描述

基于react框架和antd组件库，实现通用form表单数据提交和精细化布局

Install

npm i @tongdun/react-ui-form

引入方式

import TdForm from '@tongdun/react-ui-form'

API

基础参数

参数	说明	类型	默认值
layout	表单布局	'horizontal','vertical','inline','grid'	'horizontal'
onSubmit	数据验证成功后回调事件	Function(values)
style	样式	object	{}
itemStyle	FormItem样式	object	{}
className	类名	string	''
cols	格栅布局列数（layout='grid'时有效）	number,string	1
formItemLayout	参考antd-form布局实例	object	{}
formConfig	表单配置	Array	[]

formConfig

数组元素对应页面上各个表单或者非表单的元素个体，每个个体参数配置规则：

参数	说明	类型	默认值
type	只有时间组件和button需要配置	'button','rangePicker','datePicker'，'monthPicker','timePicker','weekPicker'	''
name	表单提交的参数名（type=rangePicker时可为数组）	string，array	undefind
label	label 标签的文本	string,ReactNode
initialValue	子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 === 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量))
rules	校验规则，参考antd-form getFieldDecorator(id, options) 参数options.rules	string	''
options	会覆盖所有option配置（包括rules和initialValue）参考antd-form getFieldDecorator(id, options) 参数options.rules	object
format	时间控件数据返回格式	string	各个时间控件默认格式
itemCol	layout = gird时可配置各个元素宽度布局（24为100%）	number,string	24/cols
hasFormItem	是否包裹FormItem	boolean	true
formItemLayout	子元素自定义布局参考antd-form布局实例	object	{}
item	react组件或者元素，字符串	string,ReactNode
items	type=button时单独对button进行处理可定义多个按钮（也可以用item单独定义button）	array

items子元素配置

type=button时  formConfig子元素items配置规则：

参数	说明	类型	默认值
active	表单操作	'submit','reset'
callback	自定义点击回调	Function(e:Event)
value	值	string,ReactNode,number	''
props	button属性值可覆盖所有button属性	object

实例

表头inline布局

handleSubmit (params) {
    console.table(params)
    // TODO post
}
render () {
  // ...
   const formConfig = [
         {
           type: 'rangePicker',
           label: '时间范围',
           name: ['startDate', 'endDate'],
           initialValue: [moment().subtract(3, 'month'), moment()],
           item: <RangePicker showTime
                              style={{width: '100%'}}
                              format='YYYY-MM-DD'
                              ranges={{
                                '30天': [moment().subtract(30, 'days'), moment()]
                              }}/>
         }, {
           type: 'datePicker',
           label: '时间范围',
           name: 'time',
           format: 'YYYY-MM-DD HH:mm:ss',
           initialValue: moment(),
           item: <DatePicker showTime
                             style={{width: '100%'}}
                             format='YYYY-MM-DD'
           />
         }, {
           label: '测试1',
           name: 'text1',
           item: <Input type='text'/>
         }, {
           label: '测试2',
           name: 'text2',
           item: <Input type='text'/>
         }, {
           label: '测试3',
           name: 'text4',
           item: <Input type='text'/>
         }, {
           label: '测试4',
           name: '测试4',
           item: <Input type='text'/>
         }, {
           label: '测试5',
           name: 'text5',
           item: <Input type='text'/>
         }, {
           label: '测试6',
           name: 'text6',
           initialValue: '0',
           item:
             <Select style={{width: '100%'}}>
               <Option key={'0'} value={'0'}>请选择</Option>
               <Option key={'1'} value={'1'}>1</Option>
             </Select>
         }, {
           type: 'button',
           items: [
             {
               active: 'submit',
               value: '查询'
             },
             {
               active: 'reset',
               value: '重置'
             },
             {
               value: '跳转',
               callback: (e) => {
                 alert('do something')
               }
             }
           ]
         },
       ];
    // ...
    <TdForm
            layout='inline'
            formConfig={formConfig}
            onSubmit={this.handleSubmit}
          />

表头grid格栅布局

handleSubmit (params) {
    console.table(params)
    // TODO post
}
render () {
  // ...
const formConfig = [
      {
        type: 'rangePicker',
        label: '时间范围',
        name: ['startDate', 'endDate'],
        initialValue: [moment().subtract(3, 'month'), moment()],
        item: <RangePicker showTime
                           style={{width: '100%'}}
                           format='YYYY-MM-DD'
                           ranges={{
                             '30天': [moment().subtract(30, 'days'), moment()]
                           }}/>
      }, {
        type: 'datePicker',
        label: '时间范围',
        name: 'time',
        format: 'YYYY-MM-DD HH:mm:ss',
        initialValue: moment(),
        item: <DatePicker showTime
                          style={{width: '100%'}}
                          format='YYYY-MM-DD'
        />
      }, {
        label: '测试1',
        name: 'text1',
        item: <Input type='text'/>
      }, {
        label: '测试2',
        name: 'text2',
        item: <Input type='text'/>
      }, {
        label: '测试3',
        name: 'text4',
        item: <Input type='text'/>
      }, {
        label: '测试4',
        name: 'text4',
        item: <Input type='text'/>
      }, {
        label: '测试5',
        name: 'text5',
        item: <Input type='text'/>
      }, {
        label: '测试6',
        name: 'text6',
        initialValue: '0',
        item:
          <Select style={{width: '100%'}}>
            <Option key={'0'} value={'0'}>请选择</Option>
            <Option key={'1'} value={'1'}>1</Option>
          </Select>
      }, {
        type: 'button',
        formItemLayout: {
          wrapperCol: {
            sm: {
              span: 18,
              offset: 6,
            }
          }
        },
        items: [
          {
            active: 'submit',
            value: '查询'
          },
          {
            active: 'reset',
            value: '重置'
          }
        ]
      },
    ]
    // ...
    <TdForm
        cols={4}
        formItemLayout={{
          labelCol: {
            sm: {span: 6}
          },
          wrapperCol: {
            sm: {span: 18}
          },
        }}
        formConfig={formConfig}
        layout='grid'
        onSubmit={this.handleSubmit}
    />

normal Form布局

handleSubmit (params) {
    console.table(params)
    // TODO post
}
render () {
  // ...
  const formConfig = [
        {
          type: 'rangePicker',
          label: '时间范围',
          name: ['startDate', 'endDate'],
          rules: [{required: true}],
          initialValue: [moment().subtract(3, 'month'), moment()],
          item: <RangePicker showTime
                             style={{width: 350}}
                             format='YYYY-MM-DD'
                             ranges={{
                               '30天': [moment().subtract(30, 'days'), moment()]
                             }}/>
        }, {
          type: 'datePicker',
          label: '时间范围',
          name: 'time',
          rules: [{required: true}],
          format: 'YYYY-MM-DD HH:mm:ss',
          initialValue: moment(),
          item: <DatePicker showTime
                            style={{width: 350}}
                            format='YYYY-MM-DD'
          />
        }, {
          label: '测试1',
          rules: [{required: true}],
          name: 'text1',
          item: <Input type='text' style={{width: 350}}/>,
        }, {
          label: '测试2',
          name: 'text2',
          item: <Input type='text'/>,
          itemCol: 12,
          rules: [{required: true}],
          formItemLayout: {
            labelCol: {
              sm: {span: 12}
            },
            wrapperCol: {
              sm: {span: 12}
            }
          }
        }, {
          name: 'text3',
          item: <Input type='text'/>,
          itemCol: 4,
          rules: [{required: true}],
          formItemLayout: {
            wrapperCol: {
              sm: {span: 22, offset: 2}
            }
          }
        }, {
          item: <span style={{paddingLeft: 10, color: 'red'}}>提示说明内容</span>,
          itemCol: 8
        }, {
          name: 'text4',
          label: '测试4',
          initialValue: '192.168.11',
          item: '192.168.11',
          itemCol: 24
        }, {
          hasFormItem: false,
          name: 'xxxxxxxx',
          initialValue: '是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是',
          item: '我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述',
        }, {
          label: '描述',
          name: 'text5',
          item: <Input type='text'/>,
          rules: [{required: true}],
          formItemLayout: {
            labelCol: {
              sm: {span: 12}
            },
            wrapperCol: {
              sm: {span: 12}
            }
          },
          itemCol: 12
        }, {
          label: '测试6',
          name: 'text6',
          rules: [{required: true}],
          initialValue: '0',
          item:
            <Select style={{width: 350}}>
              <Option key={'0'} value={'0'}>请选择</Option>
              <Option key={'1'} value={'1'}>1</Option>
            </Select>
        }, {
          type: 'button',
          formItemLayout: {
            wrapperCol: {
              sm: {
                span: 18,
                offset: 6,
              }
            }
          },
          items: [
            {
              active: 'submit',
              value: '查询'
            }
          ]
        },
      ]
// ...
    <TdForm
        formItemLayout={{
          labelCol: {
            sm: {span: 6}
          },
          wrapperCol: {
            sm: {span: 18}
          },
        }}
        formConfig={formConfig}
        layout='grid'
        onSubmit={this.handleSubmit}
    />

modal Form布局

wrappedComponentRef={ref => this.formRef = ref} // this.formRef取得TdForm内部方法
this.formRef.handleSubmit() // 用外部主动触发TdForm内部handleSubmit函数校验并返回数据

handleSubmit (params) {
    console.table(params)
    // TODO post
}
render () {
  // ...
  const formConfig = [
  {
    type: 'rangePicker',
    label: '时间范围',
    name: ['startDate', 'endDate'],
    rules: [{ required: true }],
    initialValue: [moment().subtract(3, 'month'), moment()],
    item: <RangePicker showTime
                       style={{ width: 350 }}
                       format='YYYY-MM-DD'
                       ranges={{
                         '30天': [moment().subtract(30, 'days'), moment()]
                       }}/>
  }, {
    type: 'datePicker',
    label: '时间范围',
    name: 'time',
    rules: [{ required: true }],
    format: 'YYYY-MM-DD HH:mm:ss',
    initialValue: moment(),
    item: <DatePicker showTime
                      style={{ width: 350 }}
                      format='YYYY-MM-DD'
    />
  }, {
    label: '测试1',
    rules: [{ required: true }],
    name: 'text1',
    item: <Input type='text' style={{ width: 350 }}/>,
  }, {
    label: '测试2',
    name: 'text2',
    item: <Input type='text'/>,
    itemCol: 12,
    rules: [{ required: true }],
    formItemLayout: {
      labelCol: {
        sm: { span: 8 }
      },
      wrapperCol: {
        sm: { span: 16 }
      }
    }
  }, {
    name: 'text3',
    item: <Input type='text'/>,
    itemCol: 4,
    rules: [{ required: true }],
    formItemLayout: {
      wrapperCol: {
        sm: { span: 22, offset: 2 }
      }
    }
  }, {
    item: <span style={{ paddingLeft: 10, color: 'red' }}>提示说明内容</span>,
    itemCol: 8
  }, {
    name: 'text4',
    label: '测试4',
    initialValue: '192.168.11',
    item: '192.168.11',
    itemCol: 24
  }, {
    label: '测试6',
    name: 'text6',
    rules: [{ required: true }],
    initialValue: '0',
    item:
      <Select style={{ width: 350 }}>
        <Option key={'0'} value={'0'}>请选择</Option>
        <Option key={'1'} value={'1'}>1</Option>
      </Select>
  }
]
// ...
    <Modal // 外部引入的模态框
    title="Modal"
    visible={visible}
    onOk={() => {
      this.setState({ visible: false })
      this.formRef.handleSubmit() // 用外部的Modal内置Button 触发TdForm内部handleSubmit函数校验并返回数据
    }}
    onCancel={() => this.setState({ visible: false })}
    okText="确认"
    cancelText="取消">
    <TdForm
      wrappedComponentRef={ref => this.formRef = ref} // this.formRef取得TdForm内部方法
      formItemLayout={{
        labelCol: {
          sm: { span: 4 }
        },
        wrapperCol: {
          sm: { span: 20 }
        },
      }}
      formConfig={formConfig3}
      layout='grid'
      onSubmit={this.handleSubmit}
    />
  </Modal>

react antd form tongdun

antd classnames extract-text-webpack-plugin moment prop-types react react-dom

@everything-registry/sub-chunk-926 @tongdun/react-ui-table @zalastax/nolb-_ton

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago