import React from 'react';
|
import './style.scss';
|
import {
|
Row,
|
Col,
|
Form,
|
Input,
|
Button,
|
Select,
|
DatePicker,
|
|
} from 'antd';
|
const { RangePicker } = DatePicker;
|
import { FormComponentProps } from 'antd/lib/form';
|
import { RouteComponentProps } from 'react-router-dom';
|
import moment from 'moment';
|
|
class CommonSearchForm extends React.Component {
|
constructor(props) {
|
super(props);
|
this.state = {
|
showModal: false,
|
};
|
}
|
|
componentDidMount() {
|
// 回车事件
|
// document.addEventListener('keydown', this.onkeydown);
|
}
|
|
componentWillUnmount() {
|
// window.removeEventListener("keydown", this.onkeydown.bind(this));
|
}
|
|
onkeydown = (e) => {
|
if (e.keyCode === 13) {
|
this.onClick('search');
|
}
|
}
|
|
onClick = type => {
|
const { pathName } = this.props;
|
let data;
|
switch (type) {
|
case 'search':
|
data = { ...this.props.formData, __key: Date.now() };
|
this.props.searchonClick(data);
|
// if (pathName) {
|
// this.props.history.push(pathName + '?' + Object.entries(data)
|
// .map(([k, v]) => `${k}=${v}`)
|
// .join('&'));
|
// }
|
return;
|
case 'reset':
|
data = { __key: Date.now(), page: 1, size: 10 };
|
this.props.searchonClick(data);
|
if (pathName) {
|
this.props.history.push(pathName + '?' + Object.entries(data)
|
.map(([k, v]) => `${k}=${v}`)
|
.join('&'));
|
}
|
return;
|
case 'build':
|
return;
|
}
|
};
|
|
handleInput = ({ target: { name, value } }) => {
|
this.props.setFormData({ ...this.props.formData, [name]: value });
|
};
|
|
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;
|
console.log(formData)
|
console.log(data)
|
return (
|
<div className="common-search-form-main">
|
<Row type="flex" align="middle" gutter={20}>
|
{/* <Row type="flex" align="bottom"> */}
|
{/* <Col span={20}>
|
<Row gutter={20}> */}
|
{data.length > 0 &&
|
data.map(item => (
|
<React.Fragment>
|
{(() => {
|
switch (item.type) {
|
case 'select':
|
return (
|
<Col span={4}>
|
<Form.Item label={item.label}>
|
<Select
|
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
|
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
|
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
|
ranges={{
|
Today: [moment(), moment()],
|
'This Month': [
|
moment().startOf('month'),
|
moment().endOf('month'),
|
],
|
}}
|
// defaultValue={[moment(monthStartDate, 'YYYY/MM/DD'), moment(monthEndDate, 'YYYY/MM/DD')]}
|
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>
|
))}
|
{/* </Row> */}
|
{/* </Col> */}
|
|
<Col>
|
<Row type="flex" gutter={20} align="middle" style={{ marginBottom: 5 }}>
|
<Col>
|
<Button
|
type="primary"
|
onClick={() => {
|
this.onClick('search');
|
}}>
|
查询
|
</Button>
|
</Col>
|
<Col>
|
<Button
|
onClick={() => {
|
this.onClick('reset');
|
}}>
|
重置
|
</Button>
|
</Col>
|
{
|
children &&
|
<Col>
|
{children}
|
</Col>
|
}
|
</Row>
|
</Col>
|
</Row>
|
</div >
|
);
|
}
|
}
|
|
export default Form.create({
|
onValuesChange: (props, changed, values) => { },
|
})(CommonSearchForm);
|
