index.js

import React from 'react';
import { Form, Input, Row, Col, Select } from 'antd';
import styles from './index.less';

const FormItem = Form.Item;

@Form.create()
class Search extends React.Component {
  componentDidMount() {}

  /**
   * 提交表单
   */
  onSubmitForm = onCallback => {
    const { form } = this.props;
    form.validateFields((err, values) => {
      if (!err && onCallback instanceof Function) {
        onCallback(values);
      }
    });
  };

  /**
   * 重置表单
   */
  onResetForm = () => {
    const { form } = this.props;
    form.resetFields();
  };

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Form layout="inline">
        <Row className={styles.root}>
          <Col span={8}>
            <FormItem label="参数模块">
              {getFieldDecorator('paramModule')(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="参数编码">
              {getFieldDecorator('paramCode')(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="参数值">
              {getFieldDecorator('paramValue')(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="参数状态">
              {getFieldDecorator('paramState', { initialValue: '' })(
                <Select placeholder="请选择">
                  <Select.Option value="">全部</Select.Option>
                  <Select.Option value="1">有效</Select.Option>
                  <Select.Option value="0">无效</Select.Option>
                </Select>,
              )}
            </FormItem>
          </Col>
        </Row>
      </Form>
    );
  }
}

export default Search;