/* eslint-disable */
|
/**柯礼钦
|
* 4/3/2020, 3:00:49 PM
|
* doc comment for the file goes here
|
*/
|
|
/** 表单搜索组件 */
|
import React, { ReactNode, ReactEventHandler, Component } from 'react';
|
import { Row, Col, Form, Input, Button, Select, DatePicker, Divider } from 'antd';
|
import moment from 'moment';
|
|
const { RangePicker } = DatePicker;
|
import './index.scss';
|
|
|
export default class SearchFormView extends Component {
|
constructor(props) {
|
super(props);
|
this.config = {
|
};
|
this.state = {
|
};
|
}
|
|
componentWillMount() { }
|
|
componentDidMount() { }
|
|
onClick = type => {
|
const { pathName } = this.props;
|
let data;
|
switch (type) {
|
case 'search':
|
data = { ...this.props.formData, __key: Date.now() };
|
this.props.setFormData(data);
|
return;
|
case 'reset':
|
data = { __key: Date.now(), page: 1, size: 10 };
|
this.props.setFormData(data);
|
return;
|
case 'build':
|
return;
|
}
|
};
|
|
//各类型表单元素触发事件
|
// input输入类型
|
handleInput = ({ target: { name, value } }) => {
|
this.props.setFormData({ ...this.props.formData, [name]: value });
|
};
|
|
// select下拉选择
|
handleSelectChange = name => {
|
return value => {
|
this.handleInput({ target: { name, value } });
|
};
|
};
|
|
// 时间段区域选择
|
rangePickerChange = (name, key, m, d) => {
|
if (m.length > 0) {
|
this.props.setFormData({
|
...this.props.formData,
|
[name]: d.join(','),
|
[JSON.parse(key)[0]]: d[0],
|
[JSON.parse(key)[1]]: d[1],
|
});
|
} else {
|
this.props.setFormData({
|
...this.props.formData,
|
[name]: undefined,
|
[JSON.parse(key)[0]]: '',
|
[JSON.parse(key)[1]]: '',
|
});
|
}
|
};
|
|
// 时间选择器
|
datePickerChange = (name, v) => {
|
this.props.setFormData({
|
...this.props.formData,
|
[name]: v,
|
});
|
};
|
|
|
render() {
|
const { formData = {}, data = [], children } = this.props;
|
|
return (
|
<div className="search-form-view-main">
|
<div className="search-form-view-main-margin-bottom">
|
<Row type="flex" align="middle" gutter={20}>
|
|
{data.length > 0 &&
|
data.map((item, idx) => (
|
<React.Fragment key={idx}>
|
{(() => {
|
switch (item.type) {
|
case 'select':
|
return (
|
<Col span={4}>
|
<Form.Item label={item.label}>
|
<Select
|
size="small"
|
style={{ width: '100%' }}
|
placeholder={item.name}
|
value={formData[item.key]}
|
allowClear
|
onChange={this.handleSelectChange(item.key)}>
|
{item.list &&
|
item.list.map(item => (
|
<Select.Option
|
value={item.id}
|
key={item.id}>
|
{item.name}
|
</Select.Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
);
|
case 'input':
|
return (
|
<Col span={4}>
|
<Form.Item label={item.label}>
|
<Input
|
size="small"
|
placeholder={item.name}
|
name={item.key}
|
value={formData[item.key]}
|
onChange={this.handleInput}
|
/>
|
</Form.Item>
|
</Col>
|
);
|
case 'datePicker':
|
return (
|
<Col span={4}>
|
<Form.Item label={item.label}>
|
<DatePicker
|
size="small"
|
style={{ width: '100%' }}
|
placeholder={item.name}
|
onChange={(date, dateString) => {
|
this.datePickerChange(item.key, dateString);
|
}}
|
value={formData[item.key] ? moment(formData[item.key], 'YYYY-MM-DD') : undefined}
|
/>
|
</Form.Item>
|
</Col>
|
);
|
case 'rangePicker':
|
return (
|
<Col span={6}>
|
<Form.Item label={item.label}>
|
<RangePicker
|
size="small"
|
ranges={{
|
Today: [moment(), moment()],
|
'This Month': [
|
moment().startOf('month'),
|
moment().endOf('month'),
|
],
|
}}
|
value={
|
item.keylistName &&
|
formData[item.keylistName] &&
|
typeof formData[item.keylistName] == 'string'
|
? formData[item.keylistName]
|
.split(',')
|
.map(item => moment(item, 'YYYY-MM-DD'))
|
: []
|
}
|
onChange={(date, dateString) => {
|
this.rangePickerChange(
|
item.keylistName,
|
item.key,
|
date,
|
dateString
|
);
|
}}
|
placeholder={JSON.parse(item.name)}
|
/>
|
</Form.Item>
|
</Col>
|
);
|
case 'br':
|
return (
|
<Col span={24} style={{ marginBottom: '10px' }} />
|
);
|
default:
|
return null;
|
}
|
})()}
|
</React.Fragment>
|
))}
|
|
<Col>
|
<Row type="flex" gutter={20} align="middle" align="middle">
|
<Col>
|
<Button
|
size="small"
|
type="primary"
|
onClick={() => {
|
this.onClick('search');
|
}}>
|
查询
|
</Button>
|
</Col>
|
<Col>
|
<Button
|
size="small"
|
onClick={() => {
|
this.onClick('reset');
|
}}>
|
重置
|
</Button>
|
</Col>
|
{
|
children &&
|
<Col>
|
{children}
|
</Col>
|
}
|
</Row>
|
</Col>
|
</Row>
|
|
</div>
|
|
<Divider />
|
</div>
|
)
|
}
|
}
|
