import React from 'react';
|
import { Input, Button, Space, Select, DatePicker } from 'antd';
|
import moment from 'moment';
|
|
const NONE_OPTION = -9999;
|
|
const TextFilter = (props) => {
|
return (
|
<div style={{ padding: 8 }}>
|
<Input
|
style={{ width: 188, marginBottom: 8, display: 'block' }}
|
placeholder="请输入"
|
value={props.selectedKeys[0]}
|
onChange={e => {
|
props.setSelectedKeys(e.target.value ? [e.target.value] : [])
|
}}
|
/>
|
<Space>
|
<Button
|
type="primary"
|
onClick={() => {
|
props.confirm();
|
props.setSearchParam(prevState => ({
|
...prevState,
|
[props.name]: props.selectedKeys[0]
|
}));
|
props.actionRef.current?.reload();
|
}}
|
size="small"
|
style={{ width: 90 }}
|
>
|
确定
|
</Button>
|
<Button
|
onClick={() => props.clearFilters && props.clearFilters()}
|
size="small"
|
style={{ width: 90 }}
|
>
|
重置
|
</Button>
|
</Space>
|
</div>
|
);
|
}
|
|
const SelectFilter = (props) => {
|
const [currentOption, setCurrentOption] = React.useState();
|
|
return (
|
<div style={{ padding: 8 }}>
|
<div>
|
<Select
|
style={{ width: 188, marginBottom: 8, display: 'block' }}
|
placeholder="请选择"
|
value={currentOption === NONE_OPTION ? undefined : currentOption}
|
onChange={value => {
|
setCurrentOption(value)
|
props.setSelectedKeys(value !== undefined && value !== null ? [value] : []);
|
}}
|
>
|
{props.data.map(item => (
|
<Select.Option key={item.value} value={item.value}>
|
{item.label}
|
</Select.Option>
|
))}
|
</Select>
|
</div>
|
<Space>
|
<Button
|
type="primary"
|
onClick={() => {
|
props.confirm();
|
if (currentOption === NONE_OPTION) {
|
props.setSearchParam(prevState => {
|
const state = { ...prevState };
|
delete state[props.name];
|
return state;
|
})
|
} else {
|
props.setSearchParam(prevState => ({
|
...prevState,
|
[props.name]: currentOption
|
}));
|
}
|
props.actionRef.current?.reload();
|
}}
|
size="small"
|
style={{ width: 90 }}
|
>
|
确定
|
</Button>
|
<Button
|
onClick={() => {
|
setCurrentOption(NONE_OPTION)
|
props.setSelectedKeys([]);
|
props.clearFilters();
|
}}
|
size="small"
|
style={{ width: 90 }}
|
>
|
重置
|
</Button>
|
</Space>
|
</div>
|
);
|
}
|
|
const DatetimeRangeFilter = (props) => {
|
const [startDate, setStartDate] = React.useState(null);
|
const [endDate, setEndDate] = React.useState(null);
|
|
return (
|
<div style={{ padding: 8 }}>
|
<div>
|
<Space direction="vertical" size={12}>
|
<DatePicker.RangePicker
|
showTime
|
onChange={dates => {
|
setStartDate(dates[0]?.toISOString());
|
setEndDate(dates[1]?.toISOString());
|
}}
|
/>
|
<Space>
|
<Button
|
type="primary"
|
onClick={() => {
|
console.log(startDate, endDate);
|
props.confirm();
|
props.setSearchParam(prevState => ({
|
...prevState,
|
[props.name]: [startDate, endDate]
|
}));
|
props.actionRef.current?.reload();
|
}}
|
size="small"
|
>
|
确定
|
</Button>
|
<Button
|
onClick={() => {
|
setStartDate(null);
|
setEndDate(null);
|
props.setSelectedKeys([]);
|
props.setSearchParam(prevState => {
|
const nextState = { ...prevState };
|
delete nextState[props.name];
|
return nextState;
|
});
|
props.clearFilters();
|
}}
|
size="small"
|
>
|
重置
|
</Button>
|
</Space>
|
</Space>
|
</div>
|
</div>
|
);
|
}
|
|
|
export { TextFilter, SelectFilter, DatetimeRangeFilter };
|
