安装

npm install ant-design-form

yarn add ant-design-form

使用

import {FormView} from 'ant-design-form'
ReactDOM.render(<FormView />, mountNode);

可能需要引入ant-design的样式

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

说明

Ant-Design是React一个非常好用的UI库。几乎涉猎了所有场景，但是在B端。对于增删改查，更多的会用到表单。但是表单的创建或者说使用又比较繁琐，比如校验规则、与特定ID绑定等等。

比如

<Form.Item label="Select[multiple]">
    {getFieldDecorator('select-multiple', {
        rules: [
            { required: true, message: 'Please select your favourite colors!', type: 'array' },
        ],
    })(
        <Select mode="multiple" placeholder="Please select favourite colors">
            <Option value="red">Red</Option>
            <Option value="green">Green</Option>
            <Option value="blue">Blue</Option>
        </Select>,
    )}
</Form.Item>

这样的<Form.Item>你一定写过不少。

但是，"ant-design-form"来了。

暂时支持三个组件。

SearchView
FormView
ModalView

SearchView

Demo

<SearchView
    data={
      [{
        label: '所有订单',
        key: 'pharmacyType',
        type: 'select',
        defaultValue: '所有订单',
        option: [
            { severKey: 'allList', showValue: '所有订单' }, 
            { severKey: 'unpay', showValue: '待付款订单' }, 
            { severKey: 'cancel', showValue: '订单取消' }, 
            { severKey: 'returnGoods', showValue: '退订/退货' }, 
            { severKey: 'success', showValue: '交易成功' }, 
            { severKey: 'paid', showValue: '已付款' }
        ],
      }, {
        label: '开始时间',
        key: 'startTime',
        type: 'datePicker',
        Message: '请选择时间',
      }, {
        label: '结束时间',
        key: 'endTime',
        type: 'datePicker',
        Message: '请选择时间',
      }, {
        label: '关键字',
        key: 'keywords',
        type: 'input',
        Message: '请输入商品名称',
      }]
  }
  searchFun={(params) => {console.log(params)}}
 />

demo

点击搜索之后：

参数名	说明	数据类型
searchFun	用于与服务端交互的一个函数，点击查询之后会回调。会返回data中所设置的key	function
data	用于设置显示的样式（调用ant-design中的某个组件）	array< object >

SearchView-data

参数名	说明	数据类型
label	前端通知用户，组件类型（暂时只支持展示dataPicker，后续会做成自适应的	string
key	回调函数返回的 Json 里面的key	string
type	展示定制的组件（基本上都是从ant-design里面选取的）（可以是输入框，选择框等）	string
Message	placeholder展示的文案	string
defaultValue	默认值	根据组件来判断（如果是日期类型是moment，一般来说是string
option	用于select组件中的可选项。	array
additional	可以给组件加样式	object

SearchView-data-type

参数名	说明	数据类型
input	文本输入框	string
select	选择框	string
datePicker	日期选择框(返回moment)	string
rangePicker	日期联级选择框（返回是[moment,moment]	string

SearchView-data-option

参数名	说明	数据类型
severKey	select的Value值	string
showValue	select用于前端展示的文案	string

FormView

Demo

点击提交之后

<FormView
    formData={[
        {
            label:'select',
            key:'select',
            type:'select',
            option: [
                { severKey: '1', showValue: '处方药' }, 
                { severKey: '0', showValue:'非处方药' }
            ],
            Message: '请选择select',
        }, {
            label:'input',
            key:'input',
            type:'input',
            Message: '输入input',
        }
    ]}
    submitText="提交"
/>

参数名	说明	数据类型
formData	用于设置显示的样式（调用ant-design中的某个组件）	array< object >
showData	初始参数，key对应formData，value是初始值	object
selectSearch	使用selectSearch这个组件时的查询函数	function
selectSearchOption	使用selectSearch这个组件时显示的下拉框	array< object >
selectSearchCallBack	使用selectSearch这个组件时点击选中的回调函数，默认返回选中的key	function
imgUploadUrl	使用imgUpload这个组件时的上传地址，默认返回的是res.data[0]（暂时不支持定制，可能要提前和后端的同事协调好）	string
imgUploadHeaders	使用imgUpload这个组件时的上传header	object
submitText	提交按钮的文案	string
cascaderOption	联级选择器Cascader的下拉框	array< object >

FormView-formData

参数名	说明	数据类型
label	前端显示的文案，表示这个地方要输入什么	string
key	与服务端交互的key	string
type	展示定制的组件（基本上都是从ant-design里面选取的）（可以是输入框，选择框等）	string
Message	placeholder展示的文案，表单错误的时候出现的文案	string
option	用于select组件中的可选项。	array< object >
additional	可以给组件加样式	object

FormView-formData-type

参数名	说明	数据类型
input	文本输入框	string
select	选择框	string
datePicker	日期选择框(返回moment)	string
rangePicker	日期联级选择框（返回是[moment,moment]	string
radioGroup	单选框	string
richTextEditor	富文本编辑器	string
imageUploadList	图片上传（多张	string
textArea	长文本输入框	string
selectSearch	带搜索的选择框	string
imageUpload	图片上传（单张	string
cascader	联级选择	string

FormView-formData-option

参数名	说明	数据类型
severKey	select的Value值	string
showValue	select用于前端展示的文案	string

ModalView

Demo

点击新增

点击查看

点击编辑

点击（编辑或者新增）的确定

Markdown

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    id: 'asd111asd111',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    id: 'asd222asd222',
  },
];
 
class ReactDemo extends PureComponent {
  state = {
    visible: false,
    showData: {},
    category: 'check',
  }
 
  clickModal = (category, showData) =>{
    this.setState({
      visible: true,
      category,
      showData
    });
  }
 
  hideModal = () => {
    this.setState({visible: false})
  }
 
  columns = () => [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '操作',
      render: (text, record) => <>
        <Button onClick={() => this.clickModal('check', record)} type="primary">查看</Button>
        <Divider type="vertical" />
        <Button onClick={() => this.clickModal('edit', record)}>编辑</Button>
      </>
    }
  ];
 
  render(){
    const {visible, category, showData} = this.state;
    return (
      <Card title="ModalViewDemo">
        <Button onClick={() => this.clickModal('create', {})}>我是新增</Button>
        <ModalView
          onOk={params => {console.log(params); this.setState({visible: false})}}
          onCancel={() => {this.setState({visible: false})}}
          show={visible}
          category={category}
          data={[
            {
              label: 'ID（无需录入）',
              key: 'id',
              type: 'input',
              Message: 'ID自动录入无需您操心~',
              disabled: true,
            },
            {
              label: '姓名',
              key: 'name',
              type: 'input',
              Message: '请输入姓名',
            },
            {
              label: '年龄',
              key: 'age',
              type: 'select',
              Message: '请选择年龄',
              option: [
                { severKey: '32', showValue: '12岁' }, 
                { severKey: '42', showValue: '13岁' },
              ],
            },
          ]}
          showData={showData}
        />
        <Table dataSource={dataSource} columns={this.columns()} />
      </Card>
    );
  }
}

参数名	说明	数据类型
onOk	点击弹窗的确定之后的会调用的函数	function
onCancel	隐藏弹框之后会调用的函数（点击右上角X，点击非弹出的地方）	function
show	是否显示弹窗	boolean
category	弹窗的类型（与弹窗的title绑定）（暂时只支持'check','edit','create','import'）	string
data	弹窗显示的数据类型	array< object >
showData	查看或者编辑时的默认数据	object
importCallBack	导入之后，点击确定的回调函数	function
importColumns	导入时候显示表格的表头(与Table的columns相同)	array< object >
downloadUrl	导入表格的下载地址	string
imgUploadHeaders	图片上传组件的请求header	object
imgUploadUrl	图片上传组件的请求地址	string
fileUploadHeaders	文件（暂时只支持excel）上传地址	string
fileUploadUrl	文件（暂时只支持excel）上传header	string
cascaderOption	联级选择组件（cascader）的option	array< object >
selectSearch	使用selectSearch这个组件时的查询函数	function
selectSearchOption	使用selectSearch这个组件时显示的下拉框	array< object >
selectSearchCallBack	使用selectSearch这个组件时点击选中的回调函数，默认返回选中的key	function

ModalView-data

参数名	说明	数据类型
label	前端显示的文案，表示这个地方要输入什么	string
key	与服务端交互的key	string
type	展示定制的组件（基本上都是从ant-design里面选取的）（可以是输入框，选择框等）	string
Message	placeholder展示的文案，表单错误的时候出现的文案	string
option	用于select组件中的可选项。	array< object >
additional	可以给组件加样式	object

ModalView-data-type

参数名	说明	数据类型
input	文本输入框	string
select	选择框	string
datePicker	日期选择框(返回moment)	string
rangePicker	日期联级选择框（返回是[moment,moment]	string
radioGroup	单选框	string
richTextEditor	富文本编辑器	string
imageUploadList	图片上传（多张	string
textArea	长文本输入框	string
selectSearch	带搜索的选择框	string
imageUpload	图片上传（单张	string
cascader	联级选择	string

ModalView-data-option

参数名	说明	数据类型
severKey	select的Value值	string
showValue	select用于前端展示的文案	string

ant-design-form

安装

使用

说明

SearchView

Demo

FormView

Demo

ModalView

Demo

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

ant-design-form

安装

使用

说明

SearchView

Demo

FormView

Demo

ModalView

Demo

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads