/** 表单搜索组件 */
|
import React, { Component } from 'react';
|
import { Row, Col, Form, Input, Button, Select, DatePicker, Divider, Card, Cascader } from 'antd';
|
import region from './regionSelect';
|
import moment from 'moment';
|
import 'moment/locale/zh-cn';
|
import locale from 'antd/lib/locale/zh_CN';
|
import './index.less';
|
|
const { RangePicker } = DatePicker;
|
// data参数：数据模板
|
// [
|
// { type: 'input', name: '姓名', label: '姓名', key: 'name' }, //inpu类型
|
// {
|
// type: 'select',
|
// name: '所属部门',
|
// label: '所属部门',
|
// key: 'deptId',
|
// desc: 'deptName',
|
// list: [{ name: '1', value: '选项1' }, { name: '2', value: '选项2' }],
|
// }, //select 类型
|
// { type: 'district', name: '辖区', label: '辖区', key: 'code' }, //地区三级联动
|
// {
|
// type: 'rangePicker',
|
// label: '时间范围',
|
// name: JSON.stringify(['开始时间', '结束时间']),
|
// key: JSON.stringify(['startTime', 'endTime']),
|
// keylistName: 'rangeTimelist',
|
// }, //时间范围选择器
|
// {
|
// type: 'datePicker',
|
// label: '指定时间',
|
// name: '指定日期',
|
// key: 'date'
|
// } //时间选择器
|
// ]
|
|
export default class SearchFormView extends Component {
|
constructor(props) {
|
super(props);
|
this.config = {};
|
this.state = {};
|
}
|
|
UNSAFE_componentWillMount() {}
|
|
componentDidMount() {}
|
|
onClick = (type) => {
|
const { pathName } = this.props;
|
let data;
|
switch (type) {
|
case 'search':
|
data = { ...this.props.formData, __key: Date.now(), page: 1 };
|
this.props.setFormData(data);
|
return;
|
case 'reset':
|
data = { __key: Date.now(), page: 1, size: 10 };
|
this.props.setFormData(data, { reset: true });
|
return;
|
case 'build':
|
return;
|
}
|
};
|
|
//各类型表单元素触发事件
|
// input输入类型
|
handleInput = ({ target: { name, value } }) => {
|
let { formData } = this.props;
|
this.props.setFormData({
|
...this.props.formData,
|
[name]: value ? value.replace(/\s+/g, '') : undefined,
|
});
|
};
|
|
// 时间段区域选择
|
rangePickerChange = (name, key, m, d) => {
|
let { formData } = this.props;
|
if (m) {
|
this.props.setFormData({
|
...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) => {
|
let { formData } = this.props;
|
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">
|
<Card bordered={false}>
|
<Form labelAlign="right">
|
<Row gutter={[24, 16]}>
|
{data.length > 0 &&
|
data.map((item, idx) => (
|
<Col key={idx} span={8} style={{ width: '20%' }} hoverable={false}>
|
{(() => {
|
switch (item.type) {
|
case 'select':
|
return (
|
<Form.Item label={item.label}>
|
<Select
|
style={{ width: '100%' }}
|
placeholder={'请选择' + item.name}
|
value={formData[item.key]}
|
allowClear
|
onChange={(v, option) => {
|
this.handleInput({ target: { name: item.key, value: v } });
|
// item.desc && this.handleInput({ target: { name: item.desc, value: option.props.children}})
|
}}
|
>
|
{item.list &&
|
item.list.map((item) => (
|
<Select.Option value={item.value} key={item.value}>
|
{item.label}
|
</Select.Option>
|
))}
|
</Select>
|
</Form.Item>
|
);
|
case 'input':
|
return (
|
<Form.Item label={item.label}>
|
<Input placeholder={'请输入' + item.name} name={item.key} value={formData[item.key]} onChange={this.handleInput} />
|
</Form.Item>
|
);
|
case 'datePicker':
|
return (
|
<Form.Item label={item.label}>
|
<DatePicker
|
size="small"
|
placeholder={item.name}
|
onChange={this.datePickerChange}
|
// value={formData[item.key] ? moment(formData[item.key], 'YYYY-MM-DD') : undefined}
|
/>
|
</Form.Item>
|
);
|
case 'rangePicker':
|
return (
|
<Form.Item label={item.label}>
|
<RangePicker
|
style={{ width: '100%' }}
|
locale={locale}
|
allowClear
|
ranges={{
|
'今天': [moment(), moment()],
|
'本月': [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>
|
);
|
case 'district':
|
return (
|
<Form.Item label={item.label}>
|
<Cascader
|
size="small"
|
options={region}
|
fieldNames={{
|
label: 'name',
|
value: 'code',
|
children: 'area',
|
}}
|
onChange={(value, selectedOptions) => {
|
this.handleInput({ target: { name: item.key, value: value[value.length - 1] } });
|
}}
|
value={formData[item.key] ? districtSplitByCode(formData[item.key]) : []}
|
></Cascader>
|
</Form.Item>
|
);
|
|
default:
|
return null;
|
}
|
})()}
|
</Col>
|
))}
|
</Row>
|
</Form>
|
|
<Row justify="end">
|
<Col>
|
<Button
|
onClick={() => {
|
this.onClick('reset');
|
}}
|
>
|
重置
|
</Button>
|
</Col>
|
<Col style={{ marginLeft: '12px' }}>
|
<Button
|
type="primary"
|
onClick={() => {
|
this.onClick('search');
|
}}
|
>
|
搜索
|
</Button>
|
</Col>
|
|
{children && <Col>{children}</Col>}
|
</Row>
|
</Card>
|
</div>
|
{/* <Divider /> */}
|
</div>
|
);
|
}
|
}
|
|
function districtSplitByCode(code) {
|
let code1 = code.slice(0, 2) + '0000';
|
let code2 = code.slice(0, 4) + '00';
|
let code3 = code.slice(0);
|
return [code1, code2, code3];
|
}
|
