查询表单

布局规则

查询表单每行三个字段

如果只有一个字段 使用 OneSearchForm 布局
如果有 OptionInput 字段, 使用 StrangeSearchForm 布局
如果字段低于一行, 使用 LineSearchForm 布局
如果字段多于一行、少于五行, 使用 MultiLineSearchForm 布局
如果字段多于五行, 使用 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",
  },
];