查询表单
布局规则
查询表单 每行 三个字段
- 如果只有
一个字段使用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",
},
];