markdown antd form组件

Posted 2021-05-06

`antd form component`


```
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Spin, Modal, Form, Input, TreeSelect, InputNumber } from 'antd';

const FormItem = Form.Item;

class TaskTypeForm extends Component {
  static propTypes = {
    defaults: PropTypes.shape(),
    loading: PropTypes.bool,
    visible: PropTypes.bool,
    error: PropTypes.string,
    submit: PropTypes.func,
    closeModal: PropTypes.func,
    infoOptions: PropTypes.arrayOf(PropTypes.shape()),
    roleOptions: PropTypes.arrayOf(PropTypes.shape()),
  };

  constructor(props) {
    super(props);
    this.submit = this.submit.bind(this);
  }

  submit() {
    const defaults = this.props.defaults;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const command = {
          id: defaults.id,
          note: values.note,
          name: values.name,
          expireDays: values.expireDays,
          infoOptionIds: values.infoOptionIds ? values.infoOptionIds.join(',') : '',
          roleOptionIds: values.roleOptionIds ? values.roleOptionIds.join(',') : '',
        };
        this.props.submit(command);
      }
    });
  }

  render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 14 },
      },
    };
    const { getFieldDecorator } = this.props.form;
    const { loading, error, visible, closeModal, infoOptions, roleOptions } = this.props;
    const defaults = this.props.defaults;
    const infoOptionVal = defaults.infoOptionIds ? defaults.infoOptionIds.split(',') : [];
    const roleOptionVal = defaults.roleOptionIds ? defaults.roleOptionIds.split(',') : [];
    return (
      <Modal title={`${defaults.id ? '编辑' : '添加'}案件标签`} visible={visible} onOk={this.submit} okText="确定" cancelText="取消" onCancel={() => closeModal(defaults)} destroyOnClose maskClosable={false}>
        <Spin spinning={loading}>
          <Form>
            <FormItem {...formItemLayout} label="案件标签">
              {getFieldDecorator('name', { initialValue: defaults.name || '', rules: [{ required: true, message: '必填且不可修改,仅支持英文及数字和下划线_', pattern: /^[A-Za-z0-9\\_]+$/ }] })(<Input disabled={defaults.id}/>)}
            </FormItem>
            <FormItem {...formItemLayout} label="标签备注">
              {getFieldDecorator('note', { initialValue: defaults.note, rules: [{ required: true, message: '标签备注 必填' }] })(<Input />)}
            </FormItem>
            <FormItem {...formItemLayout} label="信息权限">
              {getFieldDecorator('infoOptionIds', { initialValue: infoOptionVal, rules: [{ required: true, message: '信息权限 必填' }] })(
                <TreeSelect multiple treeData={infoOptions} />)}
            </FormItem>
            <FormItem {...formItemLayout} label="功能权限">
              {getFieldDecorator('roleOptionIds', { initialValue: roleOptionVal, rules: [{ required: true, message: '功能权限 必填' }] })(
                <TreeSelect multiple treeData={roleOptions} />)}
            </FormItem>
            <FormItem {...formItemLayout} label="案件有效期">
              {getFieldDecorator('expireDays', { initialValue: defaults.expireDays, rules: [{ required: true, message: '案件有效期 必填' }] })(<InputNumber min={0} style={{ width: 284 }} />)}
            </FormItem>
            {error && <div className="ant-row ant-form-item has-error"><div className="ant-col-xs-offset-6 ant-col-xs-18 ant-form-explain">{error}</div></div>}
          </Form>
        </Spin>
      </Modal>
    );
  }
}


const Wrapped = Form.create()(TaskTypeForm);


export default Wrapped;



```