import React from 'react';
|
import { Input, Button, Space, Select, DatePicker } from 'antd';
|
import Http from '@/utils/http';
|
import moment from 'moment';
|
|
const NONE_OPTION = -9999;
|
const DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
|
|
const TextFilter = (props) => {
|
const [condition, setCondition] = React.useState('');
|
|
return (
|
<div style={{ padding: 8 }}>
|
<Input
|
style={{ width: 188, marginBottom: 8, display: 'block' }}
|
placeholder="请输入"
|
value={condition}
|
onChange={e => {
|
props.setSelectedKeys(e.target.value ? [e.target.value] : []);
|
setCondition(e.target.value)
|
}}
|
/>
|
<Space>
|
<Button
|
type="primary"
|
onClick={() => {
|
props.confirm();
|
if (condition === '' || condition === null || condition === undefined) {
|
props.setSearchParam(prevState => {
|
const state = { ...prevState };
|
delete state[props.name];
|
return state;
|
})
|
} else {
|
props.setSearchParam(prevState => ({
|
...prevState,
|
[props.name]: condition
|
}));
|
}
|
props.actionRef.current?.reload();
|
}}
|
size="small"
|
style={{ width: 90 }}
|
>
|
确定
|
</Button>
|
<Button
|
onClick={() => {
|
setCondition('')
|
props.setSelectedKeys([]);
|
props.clearFilters()
|
|
props.confirm();
|
props.setSearchParam(prevState => {
|
const state = { ...prevState };
|
delete state[props.name];
|
return state;
|
})
|
props.actionRef.current?.reload();
|
}}
|
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();
|
|
props.confirm();
|
props.setSearchParam(prevState => {
|
const state = { ...prevState };
|
delete state[props.name];
|
return state;
|
})
|
props.actionRef.current?.reload();
|
}}
|
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 = moment(changeDates[0]).format(DATE_FORMAT);
|
setStartDate(changeStartStr);
|
const changeEndStr = moment(changeDates[1]).format(DATE_FORMAT);
|
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();
|
|
props.confirm();
|
props.setSearchParam(prevState => {
|
const nextState = { ...prevState };
|
delete nextState[props.name + 'Range'];
|
return nextState;
|
});
|
props.actionRef.current?.reload();
|
}}
|
size="small"
|
>
|
重置
|
</Button>
|
</Space>
|
</Space>
|
</div>
|
</div>
|
);
|
}
|
|
const LinkFilter = (props) => {
|
const [currentOption, setCurrentOption] = React.useState();
|
const [options, setOptions] = React.useState([]);
|
|
const fetchData = async (value) => {
|
return await Http.doPostForm(`api/${props.major}/query`, { condition: value });
|
}
|
|
async function initOptions(value) {
|
const { data } = await fetchData(value);
|
setOptions(data);
|
}
|
|
React.useEffect(() => {
|
initOptions()
|
}, []);
|
|
const handleSearch = (value) => {
|
initOptions(value)
|
}
|
|
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}
|
options={options.map(item => ({ value: item.value, label: item.label }))}
|
filterOption={false}
|
showSearch={true}
|
>
|
</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();
|
initOptions()
|
|
props.confirm();
|
props.setSearchParam(prevState => {
|
const state = { ...prevState };
|
delete state[props.name];
|
return state;
|
})
|
props.actionRef.current?.reload();
|
}}
|
size="small"
|
style={{ width: 90 }}
|
>
|
重置
|
</Button>
|
</Space>
|
</div>
|
);
|
}
|
|
|
export { TextFilter, SelectFilter, DatetimeRangeFilter, LinkFilter };
|
