ant-design-form v0.4.2

安装

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"来了。

暂时支持三个组件。

1. SearchView
2. FormView
3. 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)}}
 />

​

点击搜索之后：

SearchView-data

SearchView-data-type

SearchView-data-option

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="提交"
/>

FormView-formData

FormView-formData-type

FormView-formData-option

ModalView

Demo

点击新增

点击查看

点击编辑

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

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>
    );
  }
}

ModalView-data

ModalView-data-type

ModalView-data-option