• 查询表单


    布局规则

    查询表单 每行 三个字段

    1. 如果只有一个字段 使用 OneSearchForm 布局
    2. 如果有 OptionInput 字段, 使用 StrangeSearchForm 布局
    3. 如果字段低于一行, 使用 LineSearchForm 布局
    4. 如果字段多于一行、少于五行, 使用 MultiLineSearchForm 布局
    5. 如果字段多于五行, 使用 DrawerearchForm 布局

    效果

    演示视频

    演示视频

    只有一个字段的查询表单

    import React from 'react';
    import PropTypes from 'prop-types';
    import { Form, Input, Button } from 'hzero-ui';
    import { Bind } from 'lodash-decorators';
    
    import intl from 'utils/intl';
    
    @Form.create({fieldNameProp: null})
    export default class SearchForm extends React.Component {
      static propTypes = {
        onSearch: PropTypes.func.isRequired,
      };
    
      @Bind()
      handleResetBtnClick(e) {
        e.preventDefault();
        const { form } = this.props;
        form.resetFields();
      }
    
      @Bind()
      handleSearchBtnClick(e) {
        e.preventDefault();
        const { onSearch } = this.props;
        onSearch();
      }
    
      render() {
        const { form } = this.props;
        return (
          <Form layout="inline">
            <Form.Item label={intl.get('module.service.model.modelName.name').d('名称')}>
              {form.getFieldDecorator('name')(<Input />)}
            </Form.Item>
            <Form.Item>
              <Button onClick={this.handleResetBtnClick} style={{ marginRight: '8px' }}>
                {intl.get('hzero.common.button.reset').d('重置')}
              </Button>
              <Button htmlType="submit" type="primary" onClick={this.handleSearchBtnClick}>
                {intl.get('hzero.common.button.search').d('查询')}
              </Button>
            </Form.Item>
          </Form>
        );
      }
    }
    

    特殊字段的查询表单

    import React from 'react';
    import PropTypes from 'prop-types';
    import { Form, Button, Row, Col } from 'hzero-ui';
    import { Bind } from 'lodash-decorators';
    
    import OptionInput from 'components/OptionInput';
    
    import intl from 'utils/intl';
    import {
      SEARCH_FORM_CLASSNAME,
      SEARCH_COL_CLASSNAME,
      SEARCH_FORM_ROW_LAYOUT,
      FORM_COL_4_LAYOUT,
    } from 'utils/constants';
    
    @Form.create({ fieldNameProp: null })
    export default class SearchForm extends React.Component {
      static propTypes = {
        onSearch: PropTypes.func.isRequired,
      };
    
      @Bind()
      handleResetBtnClick(e) {
        e.preventDefault();
        const { form } = this.props;
        form.resetFields();
      }
    
      @Bind()
      handleSearchBtnClick(e) {
        e.preventDefault();
        const { onSearch } = this.props;
        onSearch();
      }
    
      render() {
        const { form } = this.props;
        const bankQueryArray = [
          {
            queryLabel: intl.get('hpfm.bank.model.bank.bankCode').d('银行代码'),
            queryName: 'bankCode',
            inputProps: {
              trim: true,
              typeCase: 'upper',
              inputChinese: false,
            },
          },
          {
            queryLabel: intl.get('hpfm.bank.model.bank.bankName').d('银行名称'),
            queryName: 'bankName',
          },
          {
            queryLabel: intl.get('hpfm.bank.model.bank.bankShortName').d('银行简称'),
            queryName: 'bankShortName',
          },
        ];
        const employeeQueryArray = [
          {
            queryLabel: intl.get('entity.employee.code').d('员工编码'),
            queryName: 'employeeNum',
            inputProps: {
              trim: true,
              typeCase: 'upper',
              inputChinese: false,
            },
          },
          {
            queryLabel: intl.get('entity.employee.name').d('员工姓名'),
            queryName: 'name',
          },
        ];
        return (
          <Form className={SEARCH_FORM_CLASSNAME}>
            <Row {...SEARCH_FORM_ROW_LAYOUT}>
              <Col {...FORM_COL_4_LAYOUT}>
                <Form.Item>
                  {form.getFieldDecorator('bankOptions')(
                    <OptionInput style={{ width: '300px' }} queryArray={bankQueryArray} />
                  )}
                </Form.Item>
              </Col>
              <Col {...FORM_COL_4_LAYOUT}>
                <Form.Item>
                  {form.getFieldDecorator('employeeOptions')(
                    <OptionInput style={{ width: '300px' }} queryArray={employeeQueryArray} />
                  )}
                </Form.Item>
              </Col>
              <Col {...FORM_COL_4_LAYOUT} className={SEARCH_COL_CLASSNAME}>
                <Form.Item>
                  <Button onClick={this.handleResetBtnClick}>
                    {intl.get('hzero.common.button.reset').d('重置')}
                  </Button>
                  <Button htmlType="submit" type="primary" onClick={this.handleSearchBtnClick}>
                    {intl.get('hzero.common.button.search').d('查询')}
                  </Button>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        );
      }
    }
    

    多于一个少于四个字段的查询表单

    以二个字段的查询表单举例

    import React from 'react';
    import PropTypes from 'prop-types';
    import { Form, Input, Button, Row, Col } from 'hzero-ui';
    import { Bind } from 'lodash-decorators';
    
    import intl from 'utils/intl';
    import {
      SEARCH_FORM_CLASSNAME,
      SEARCH_COL_CLASSNAME,
      SEARCH_FORM_ROW_LAYOUT,
      FORM_COL_4_LAYOUT,
      SEARCH_FORM_ITEM_LAYOUT,
    } from 'utils/constants';
    
    @Form.create({ fieldNameProp: null })
    export default class SearchForm extends React.Component {
      static propTypes = {
        onSearch: PropTypes.func.isRequired,
      };
    
      @Bind()
      handleResetBtnClick(e) {
        e.preventDefault();
        const { form } = this.props;
        form.resetFields();
      }
    
      @Bind()
      handleSearchBtnClick(e) {
        e.preventDefault();
        const { onSearch } = this.props;
        onSearch();
      }
    
      render() {
        const { form } = this.props;
        return (
          <Form className={SEARCH_FORM_CLASSNAME}>
            <Row {...SEARCH_FORM_ROW_LAYOUT}>
              <Col {...FORM_COL_4_LAYOUT}>
                <Form.Item
                  {...SEARCH_FORM_ITEM_LAYOUT}
                  label={intl.get('module.service.model.modelName.code').d('编码')}
                >
                  {form.getFieldDecorator('code')(<Input />)}
                </Form.Item>
              </Col>
              <Col {...FORM_COL_4_LAYOUT}>
                <Form.Item
                  {...SEARCH_FORM_ITEM_LAYOUT}
                  label={intl.get('module.service.model.modelName.name').d('名称')}
                >
                  {form.getFieldDecorator('name')(<Input />)}
                </Form.Item>
              </Col>
              <Col {...FORM_COL_4_LAYOUT} className={SEARCH_COL_CLASSNAME}>
                <Form.Item>
                  <Button onClick={this.handleResetBtnClick}>
                    {intl.get('hzero.common.button.reset').d('重置')}
                  </Button>
                  <Button htmlType="submit" type="primary" onClick={this.handleSearchBtnClick}>
                    {intl.get('hzero.common.button.search').d('查询')}
                  </Button>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        );
      }
    }
    

    多于三个少于十五个字段的查询表单

    import React from "react";
    import PropTypes from "prop-types";
    import moment from "moment";
    import { Form, Input, Button, Row, Col, DatePicker } from "hzero-ui";
    import { Bind } from "lodash-decorators";
    
    import intl from "utils/intl";
    import {
      SEARCH_FORM_CLASSNAME,
      SEARCH_COL_CLASSNAME,
      SEARCH_FORM_ROW_LAYOUT,
      FORM_COL_3_LAYOUT,
      FORM_COL_3_4_LAYOUT,
      FORM_COL_4_LAYOUT,
      SEARCH_FORM_ITEM_LAYOUT,
      DEFAULT_TIME_FORMAT,
    } from "utils/constants";
    import { getDateFormat, getDateTimeFormat } from "utils/utils";
    
    const expandFormStyle = {
      display: "block",
    };
    const noExpandFormStyle = {
      display: "none",
    };
    
    @Form.create({ fieldNameProp: null })
    export default class SearchForm extends React.Component {
      static propTypes = {
        onSearch: PropTypes.func.isRequired,
      };
    
      constructor(props) {
        super(props);
        this.state = {
          expandForm: false,
        };
      }
    
      @Bind()
      handleResetBtnClick(e) {
        e.preventDefault();
        const { form } = this.props;
        form.resetFields();
      }
    
      @Bind()
      handleSearchBtnClick(e) {
        e.preventDefault();
        const { onSearch } = this.props;
        onSearch();
        // 注意 在 父组件 获取表单数据提交前 需要对 时间格式化
        // const fieldsValue = this.searchFormRef.props.form.getFieldsValue();
        // fieldsValue.creationDateFrom = fieldsValue.creationDateFrom ? fieldsValue.creationDateFrom.format(DEFAULT_DATE_FORMAT): undefined;
        // fieldsValue.creationDateTo = fieldsValue.creationDateTo ? fieldsValue.creationDateTo.format(DEFAULT_DATE_FORMAT): undefined;
        // fieldsValue.updateTimeFrom = fieldsValue.updateTimeFrom ? fieldsValue.updateTimeFrom.format(DEFAULT_DATE_FORMAT): undefined;
        // fieldsValue.updateTimeTo = fieldsValue.updateTimeTo ? fieldsValue.updateTimeTo.format(DEFAULT_DATE_FORMAT): undefined;
      }
    
      @Bind()
      handleToggleForm() {
        const { expandForm = false } = this.state;
        this.setState({
          expandForm: !expandForm,
        });
      }
    
      render() {
        const { form } = this.props;
        const { expandForm = false } = this.state;
        const dateFormat = getDateFormat();
        const dateTimeFormat = getDateTimeFormat();
        return (
          <Form className={SEARCH_FORM_CLASSNAME}>
            <Row {...SEARCH_FORM_ROW_LAYOUT}>
              <Col {...FORM_COL_3_4_LAYOUT}>
                <Row {...SEARCH_FORM_ROW_LAYOUT}>
                  <Col {...FORM_COL_3_LAYOUT}>
                    <Form.Item
                      {...SEARCH_FORM_ITEM_LAYOUT}
                      label={intl
                        .get("module.service.model.modelName.code")
                        .d("编码")}
                    >
                      {form.getFieldDecorator("code")(<Input />)}
                    </Form.Item>
                  </Col>
                  <Col {...FORM_COL_3_LAYOUT}>
                    <Form.Item
                      {...SEARCH_FORM_ITEM_LAYOUT}
                      label={intl
                        .get("module.service.model.modelName.name")
                        .d("名称")}
                    >
                      {form.getFieldDecorator("name")(<Input />)}
                    </Form.Item>
                  </Col>
                  <Col {...FORM_COL_3_LAYOUT}>
                    <Form.Item
                      {...SEARCH_FORM_ITEM_LAYOUT}
                      label={intl
                        .get("module.service.model.modelName.description")
                        .d("描述")}
                    >
                      {form.getFieldDecorator("description")(<Input />)}
                    </Form.Item>
                  </Col>
                </Row>
                <Row
                  {...SEARCH_FORM_ROW_LAYOUT}
                  style={expandForm ? expandFormStyle : noExpandFormStyle}
                >
                  <Col {...FORM_COL_3_LAYOUT}>
                    <Form.Item
                      {...SEARCH_FORM_ITEM_LAYOUT}
                      label={intl
                        .get("module.service.model.modelName.creationDateFrom")
                        .d("创建日期从")}
                    >
                      {form.getFieldDecorator("creationDateFrom")(
                        <DatePicker
                          placeholder=""
                          format={dateFormat}
                          disabledDate={currentDate =>
                            form.getFieldValue("creationDateTo") &&
                            moment(form.getFieldValue("creationDateTo")).isBefore(
                              currentDate
                            )
                          }
                        />
                      )}
                    </Form.Item>
                  </Col>
                  <Col {...FORM_COL_3_LAYOUT}>
                    <Form.Item
                      {...SEARCH_FORM_ITEM_LAYOUT}
                      label={intl
                        .get("module.service.model.modelName.creationDateTo")
                        .d("创建时间至")}
                    >
                      {form.getFieldDecorator("creationDateTo")(
                        <DatePicker
                          placeholder=""
                          format={dateFormat}
                          disabledDate={currentDate =>
                            form.getFieldValue("creationDateFrom") &&
                            moment(form.getFieldValue("creationDateFrom")).isAfter(
                              currentDate
                            )
                          }
                        />
                      )}
                    </Form.Item>
                  </Col>
                </Row>
                <Row
                  {...SEARCH_FORM_ROW_LAYOUT}
                  style={expandForm ? expandFormStyle : noExpandFormStyle}
                >
                  <Col {...FORM_COL_3_LAYOUT}>
                    <Form.Item
                      {...SEARCH_FORM_ITEM_LAYOUT}
                      label={intl
                        .get("module.service.model.modelName.updateTimeFrom")
                        .d("更新时间从")}
                    >
                      {form.getFieldDecorator("updateTimeFrom")(
                        <DatePicker
                          placeholder=""
                          format={dateTimeFormat}
                          showTime={{
                            defaultValue: moment("00:00:00", DEFAULT_TIME_FORMAT),
                          }}
                          disabledDate={currentDate =>
                            form.getFieldValue("updateTimeTo") &&
                            moment(form.getFieldValue("updateTimeTo")).isBefore(
                              currentDate
                            )
                          }
                        />
                      )}
                    </Form.Item>
                  </Col>
                  <Col {...FORM_COL_3_LAYOUT}>
                    <Form.Item
                      {...SEARCH_FORM_ITEM_LAYOUT}
                      label={intl
                        .get("module.service.model.modelName.updateTimeTo")
                        .d("更新时间至")}
                    >
                      {form.getFieldDecorator("updateTimeTo")(
                        <DatePicker
                          placeholder=""
                          format={dateTimeFormat}
                          showTime={{
                            defaultValue: moment("00:00:00", DEFAULT_TIME_FORMAT),
                          }}
                          disabledDate={currentDate =>
                            form.getFieldValue("updateTimeFrom") &&
                            moment(form.getFieldValue("updateTimeFrom")).isAfter(
                              currentDate
                            )
                          }
                        />
                      )}
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col {...FORM_COL_4_LAYOUT} className={SEARCH_COL_CLASSNAME}>
                <Form.Item>
                  <Button onClick={this.handleToggleForm}>
                    {expandForm
                      ? intl.get("hzero.common.button.collected").d("收起查询")
                      : intl.get("hzero.common.button.viewMore").d("更多查询")}
                  </Button>
                  <Button onClick={this.handleResetBtnClick}>
                    {intl.get("hzero.common.button.reset").d("重置")}
                  </Button>
                  <Button
                    htmlType="submit"
                    type="primary"
                    onClick={this.handleSearchBtnClick}
                  >
                    {intl.get("hzero.common.button.search").d("查询")}
                  </Button>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        );
      }
    }
    

    多于十五个字段的查询表单

    import React from 'react';
    import PropTypes from 'prop-types';
    import { Form, Input, Button, Row, Col, Modal } from 'hzero-ui';
    import { Bind } from 'lodash-decorators';
    
    import intl from 'utils/intl';
    import {
      SEARCH_FORM_CLASSNAME,
      SEARCH_COL_CLASSNAME,
      SEARCH_FORM_ROW_LAYOUT,
      FORM_COL_4_LAYOUT,
      SEARCH_FORM_ITEM_LAYOUT,
      MODAL_FORM_ITEM_LAYOUT,
    } from 'utils/constants';
    
    @Form.create({ fieldNameProp: null })
    export default class SearchForm extends React.Component {
      static propTypes = {
        onSearch: PropTypes.func.isRequired,
      };
    
      constructor(props) {
        super(props);
        this.state = {
          expandForm: false,
        };
      }
    
      @Bind()
      handleResetBtnClick(e) {
        e.preventDefault();
        const { form } = this.props;
        form.resetFields();
      }
    
      @Bind()
      handleSearchBtnClick(e) {
        e.preventDefault();
        const { onSearch } = this.props;
        onSearch();
      }
    
      @Bind()
      handleExpandForm() {
        this.setState({
          expandForm: true,
        });
      }
    
      @Bind()
      handleCollectForm() {
        this.setState({
          expandForm: false,
        });
      }
    
      renderCodeFormItem(formItemLayout = SEARCH_FORM_ITEM_LAYOUT) {
        const { form } = this.props;
        return (
          <Form.Item
            {...formItemLayout}
            label={intl.get('module.service.model.modelName.code').d('编码')}
          >
            {form.getFieldDecorator('code')(<Input />)}
          </Form.Item>
        );
      }
    
      renderNameFormItem(formItemLayout = SEARCH_FORM_ITEM_LAYOUT) {
        const { form } = this.props;
        return (
          <Form.Item
            {...formItemLayout}
            label={intl.get('module.service.model.modelName.name').d('名称')}
          >
            {form.getFieldDecorator('name')(<Input />)}
          </Form.Item>
        );
      }
    
      renderDescriptionFormItem(formItemLayout = SEARCH_FORM_ITEM_LAYOUT) {
        const { form } = this.props;
        return (
          <Form.Item
            {...formItemLayout}
            label={intl.get('module.service.model.modelName.description').d('描述')}
          >
            {form.getFieldDecorator('description')(<Input />)}
          </Form.Item>
        );
      }
    
      render() {
        const { form } = this.props;
        const { expandForm = false } = this.state;
        return (
          <Form className={SEARCH_FORM_CLASSNAME}>
            <Row {...SEARCH_FORM_ROW_LAYOUT}>
              <Col {...FORM_COL_4_LAYOUT}>
                {this.renderCodeFormItem()}
              </Col>
              <Col {...FORM_COL_4_LAYOUT}>
                {this.renderNameFormItem()}
              </Col>
              <Col {...FORM_COL_4_LAYOUT}>
                {this.renderDescriptionFormItem()}
              </Col>
              <Col {...FORM_COL_4_LAYOUT} className={SEARCH_COL_CLASSNAME}>
                <Form.Item>
                  <Button onClick={this.handleExpandForm}>
                    {intl.get('hzero.common.button.viewMore').d('更多查询')}
                  </Button>
                  <Button onClick={this.handleResetBtnClick}>
                    {intl.get('hzero.common.button.reset').d('重置')}
                  </Button>
                  <Button htmlType="submit" type="primary" onClick={this.handleSearchBtnClick}>
                    {intl.get('hzero.common.button.submit').d('提交')}
                  </Button>
                </Form.Item>
              </Col>
            </Row>
            <Modal
              maskClosable
              width={520}
              title={intl.get('hzero.common.button.viewMore').d('更多查询')}
              visible={expandForm}
              wrapClassName="ant-modal-sidebar-right"
              transitionName="move-right"
              onCancel={this.handleCollectForm}
              footer={
                [
                  <Button
                    onClick={this.handleCollectForm}
                  >
                    {intl.get('hzero.common.button.collected').d('收起查询')}
                  </Button>,
                  <Button
                    onClick={this.handleResetBtnClick}
                  >
                    {intl.get('hzero.common.button.reset').d('重置')}
                  </Button>,
                  <Button
                    type="primary"
                    htmlType="submit"
                    onClick={this.handleSearchBtnClick}
                  >
                    {intl.get('hzero.common.button.search').d('查询')}
                  </Button>,
                ]
              }
            >
              <Row {...SEARCH_FORM_ROW_LAYOUT}>
                <Col>
                  {this.renderCodeFormItem(MODAL_FORM_ITEM_LAYOUT)}
                </Col>
                <Col>
                  {this.renderNameFormItem(MODAL_FORM_ITEM_LAYOUT)}
                </Col>
                <Col>
                  {this.renderDescriptionFormItem(MODAL_FORM_ITEM_LAYOUT)}
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field4').d('字段4')}
                  >
                    {form.getFieldDecorator('field4')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field5').d('字段5')}
                  >
                    {form.getFieldDecorator('field5')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field6').d('字段6')}
                  >
                    {form.getFieldDecorator('field6')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field7').d('字段7')}
                  >
                    {form.getFieldDecorator('field7')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field8').d('字段8')}
                  >
                    {form.getFieldDecorator('field8')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field9').d('字段9')}
                  >
                    {form.getFieldDecorator('field9')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field10').d('字段10')}
                  >
                    {form.getFieldDecorator('field10')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field11').d('字段11')}
                  >
                    {form.getFieldDecorator('field11')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field12').d('字段12')}
                  >
                    {form.getFieldDecorator('field12')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field13').d('字段13')}
                  >
                    {form.getFieldDecorator('field13')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field14').d('字段14')}
                  >
                    {form.getFieldDecorator('field14')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field15').d('字段15')}
                  >
                    {form.getFieldDecorator('field15')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field16').d('字段16')}
                  >
                    {form.getFieldDecorator('field16')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field17').d('字段17')}
                  >
                    {form.getFieldDecorator('field17')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field18').d('字段18')}
                  >
                    {form.getFieldDecorator('field18')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field19').d('字段19')}
                  >
                    {form.getFieldDecorator('field19')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field20').d('字段20')}
                  >
                    {form.getFieldDecorator('field20')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field21').d('字段21')}
                  >
                    {form.getFieldDecorator('field21')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field22').d('字段22')}
                  >
                    {form.getFieldDecorator('field22')(<Input />)}
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item
                    {...MODAL_FORM_ITEM_LAYOUT}
                    label={intl.get('module.service.model.modelName.field23').d('字段23')}
                  >
                    {form.getFieldDecorator('field23')(<Input />)}
                  </Form.Item>
                </Col>
              </Row>
            </Modal>
          </Form>
        );
      }
    }
    

    汇总演示界面

    import React from 'react';
    import { Bind } from 'lodash-decorators';
    
    import { Header, Content } from 'components/Page';
    
    import {
      DEFAULT_DATE_FORMAT,
      DEFAULT_DATETIME_FORMAT,
    } from 'utils/constants';
    
    import OneSearchForm from './OneSearchForm';
    import LineSearchForm from './LineSearchForm';
    import MultiLineSearchForm from './MultiLineSearchForm';
    import DrawerSearchForm from './DrawerSearchForm';
    import StrangeSearchForm from './StrangeSearchForm';
    
    function getRefFieldsValue(ref) {
      if(ref.current) {
        return ref.current.props.form.getFieldsValue();
      }
      return {};
    }
    
    export default class DemoSearchForm extends React.Component {
      constructor(props) {
        super(props);
        this.oneSearchFormRef = React.createRef();
        this.lineSearchFormRef = React.createRef();
        this.multiLineSearchFormRef = React.createRef();
        this.drawerSearchFormRef = React.createRef();
        this.strangeSearchFormRef = React.createRef();
      }
    
      @Bind()
      handleOneSearchFormSearch() {
        const fieldsValue = getRefFieldsValue(this.oneSearchFormRef);
        console.debug(fieldsValue);
      }
    
      @Bind()
      handleStrangeSearchFormSearch() {
        const {bankOptions, employeeOptions, ...fieldsValue} = getRefFieldsValue(this.strangeSearchFormRef);
        Object.assign(fieldsValue, bankOptions, employeeOptions);
        console.debug(fieldsValue);
      }
    
      @Bind()
      handleLineSearchFormSearch() {
        const fieldsValue = getRefFieldsValue(this.lineSearchFormRef);
        console.debug(fieldsValue);
      }
    
      @Bind()
      handleMultiLineSearchFormSearch() {
        const fieldsValue = getRefFieldsValue(this.multiLineSearchFormRef);
        fieldsValue.creationDateFrom = fieldsValue.creationDateFrom ? fieldsValue.creationDateFrom.format(DEFAULT_DATE_FORMAT): undefined;
        fieldsValue.creationDateTo = fieldsValue.creationDateTo ? fieldsValue.creationDateTo.format(DEFAULT_DATE_FORMAT): undefined;
        fieldsValue.updateTimeFrom = fieldsValue.updateTimeFrom ? fieldsValue.updateTimeFrom.format(DEFAULT_DATETIME_FORMAT): undefined;
        fieldsValue.updateTimeTo = fieldsValue.updateTimeTo ? fieldsValue.updateTimeTo.format(DEFAULT_DATETIME_FORMAT): undefined;
        console.debug(fieldsValue);
      }
    
      @Bind()
      handleDrawerSearchFormSearch() {
        const fieldsValue = getRefFieldsValue(this.drawerSearchFormRef);
        console.debug(fieldsValue);
      }
    
      render() {
        return (
          <React.Fragment>
            <Header />
            <Content>
              <OneSearchForm
                wrappedComponentRef={this.oneSearchFormRef}
                onSearch={this.handleOneSearchFormSearch}
              />
              <br />
              <hr />
              <StrangeSearchForm
                wrappedComponentRef={this.strangeSearchFormRef}
                onSearch={this.handleStrangeSearchFormSearch}
              />
              <br />
              <hr />
              <LineSearchForm
                wrappedComponentRef={this.lineSearchFormRef}
                onSearch={this.handleLineSearchFormSearch}
              />
              <br />
              <hr />
              <MultiLineSearchForm
                wrappedComponentRef={this.multiLineSearchFormRef}
                onSearch={this.handleMultiLineSearchFormSearch}
              />
              <br />
              <hr />
              <DrawerSearchForm
                wrappedComponentRef={this.drawerSearchFormRef}
                onSearch={this.handleDrawerSearchFormSearch}
              />
              <br />
              <hr />
            </Content>
          </React.Fragment>
        );
    
      }
    }
    

    演示路由配置

    module.exports = [
      {
        path: '/demo/one-search-form',
        title: '查询表单-单个字段',
        authorized: true,
        component: "DemoSearchForm/OneSearchForm",
      },
      {
        path: '/demo/strange-search-form',
        title: '查询表单-特例查询',
        authorized: true,
        component: "DemoSearchForm/StrangeSearchForm",
      },
      {
        path: '/demo/line-search-form',
        title: '查询表单-单行查询',
        authorized: true,
        component: "DemoSearchForm/LineSearchForm",
      },
      {
        path: '/demo/multi-line-search-form',
        title: '查询表单-多行查询',
        authorized: true,
        component: "DemoSearchForm/MultiLineSearchForm",
      },
      {
        path: '/demo/drawer-search-form',
        title: '查询表单-模态框查询',
        authorized: true,
        component: "DemoSearchForm/DrawerSearchForm",
      },
      {
        path: '/demo/all-search-form',
        title: '查询表单-查询表单集成',
        authorized: true,
        component: "DemoSearchForm",
      },
    ];