import React from 'react';
|
import { Input, Button, Space, Select, DatePicker } from 'antd';
|
import Http from '@/utils/http';
|
|
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 [dates, setDates] = React.useState([null, null]);
|
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
|
value={dates}
|
onChange={changeDates => {
|
setDates(changeDates);
|
if (changeDates && changeDates[0] && changeDates[1]) {
|
const changeStartStr = changeDates[0]?.toISOString()
|
setStartDate(changeStartStr);
|
const changeEndStr = changeDates[1]?.toISOString()
|
setEndDate(changeEndStr);
|
props.setSelectedKeys([changeStartStr + '-' + changeEndStr]);
|
}
|
}}
|
/>
|
<Space>
|
<Button
|
type="primary"
|
onClick={() => {
|
props.confirm();
|
if (!dates[0] && !dates[1]) {
|
props.setSearchParam(prevState => {
|
const nextState = { ...prevState };
|
delete nextState[props.name + 'Range'];
|
return nextState;
|
});
|
} else {
|
props.setSearchParam(prevState => ({
|
...prevState,
|
[props.name + 'Range']: [startDate, endDate]
|
}));
|
}
|
props.actionRef.current?.reload();
|
}}
|
size="small"
|
>
|
确定
|
</Button>
|
<Button
|
onClick={() => {
|
setDates([null, null]);
|
setStartDate(null);
|
setEndDate(null);
|
props.setSelectedKeys([]);
|
props.clearFilters();
|
}}
|
size="small"
|
>
|
重置
|
</Button>
|
</Space>
|
</Space>
|
</div>
|
</div>
|
);
|
}
|
|
const LinkFilter = (props) => {
|
const [currentOption, setCurrentOption] = React.useState();
|
const [options, setOptions] = React.useState([]);
|
|
const fetchData = async (value) => {
|
const resp = await Http.doPostForm(`api/${props.name}/query`, { condition: value });
|
return resp.data;
|
}
|
|
React.useEffect(() => {
|
async function init() {
|
const data = await fetchData();
|
setOptions(data);
|
}
|
init()
|
}, []);
|
|
const handleSearch = async (value) => {
|
if (value) {
|
const data = await fetchData(value);
|
setOptions(data);
|
} else {
|
setOptions([]);
|
}
|
}
|
|
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] : []);
|
}}
|
onSearch={handleSearch}
|
showSearch={true}
|
>
|
{options.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>
|
);
|
}
|
|
|
export { TextFilter, SelectFilter, DatetimeRangeFilter, LinkFilter };
|
