| | |
| | | import React from 'react'; |
| | | import { Input, Button, Space, Select, DatePicker } from 'antd'; |
| | | import { FormattedMessage, useIntl } from '@umijs/max'; |
| | | 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 intl = useIntl(); |
| | | const [condition, setCondition] = React.useState(''); |
| | | |
| | | return ( |
| | | <div style={{ padding: 8 }}> |
| | | <Input |
| | | style={{ width: 188, marginBottom: 8, display: 'block' }} |
| | | placeholder={intl.formatMessage({ id: 'commont.enter', defaultMessage: '请输入' })} |
| | | 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 }} |
| | | > |
| | | <FormattedMessage id='common.submit' defaultMessage='确定' /> |
| | | </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 }} |
| | | > |
| | | <FormattedMessage id='common.reset' defaultMessage='重置' /> |
| | | </Button> |
| | | </Space> |
| | | </div> |
| | | ); |
| | | } |
| | | |
| | | const SelectFilter = (props) => { |
| | | const intl = useIntl(); |
| | | const [currentOption, setCurrentOption] = React.useState(); |
| | | |
| | | return ( |
| | | <div style={{ padding: 8 }}> |
| | | <div> |
| | | <Select |
| | | style={{ width: 188, marginBottom: 8, display: 'block' }} |
| | | placeholder={intl.formatMessage({ id: 'commont.select', defaultMessage: '请选择' })} |
| | | 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 }} |
| | | > |
| | | <FormattedMessage id='common.submit' defaultMessage='确定' /> |
| | | </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 }} |
| | | > |
| | | <FormattedMessage id='common.reset' defaultMessage='重置' /> |
| | | </Button> |
| | | </Space> |
| | | </div> |
| | | ); |
| | | } |
| | | |
| | | const DatetimeRangeFilter = (props) => { |
| | | const intl = useIntl(); |
| | | 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" |
| | | > |
| | | <FormattedMessage id='common.submit' defaultMessage='确定' /> |
| | | </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" |
| | | > |
| | | <FormattedMessage id='common.reset' defaultMessage='重置' /> |
| | | </Button> |
| | | </Space> |
| | | </Space> |
| | | </div> |
| | | </div> |
| | | ); |
| | | } |
| | | |
| | | const LinkFilter = (props) => { |
| | | const intl = useIntl(); |
| | | 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={intl.formatMessage({ id: 'commont.select', defaultMessage: '请选择' })} |
| | | 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 }} |
| | | > |
| | | <FormattedMessage id='common.submit' defaultMessage='确定' /> |
| | | </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 }} |
| | | > |
| | | <FormattedMessage id='common.reset' defaultMessage='重置' /> |
| | | </Button> |
| | | </Space> |
| | | </div> |
| | | ); |
| | | } |
| | | |
| | | |
| | | import React from 'react';
|
| | | import { Input, Button, Space, Select, DatePicker } from 'antd';
|
| | | import { FormattedMessage, useIntl } from '@umijs/max';
|
| | | 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 intl = useIntl();
|
| | | const [condition, setCondition] = React.useState('');
|
| | |
|
| | | return (
|
| | | <div style={{ padding: 8 }}>
|
| | | <Input
|
| | | style={{ width: 188, marginBottom: 8, display: 'block' }}
|
| | | placeholder={intl.formatMessage({ id: 'commont.enter', defaultMessage: '请输入' })}
|
| | | 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 }}
|
| | | >
|
| | | <FormattedMessage id='common.submit' defaultMessage='确定' />
|
| | | </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 }}
|
| | | >
|
| | | <FormattedMessage id='common.reset' defaultMessage='重置' />
|
| | | </Button>
|
| | | </Space>
|
| | | </div>
|
| | | );
|
| | | }
|
| | |
|
| | | const SelectFilter = (props) => {
|
| | | const intl = useIntl();
|
| | | const [currentOption, setCurrentOption] = React.useState();
|
| | |
|
| | | return (
|
| | | <div style={{ padding: 8 }}>
|
| | | <div>
|
| | | <Select
|
| | | style={{ width: 188, marginBottom: 8, display: 'block' }}
|
| | | placeholder={intl.formatMessage({ id: 'commont.select', defaultMessage: '请选择' })}
|
| | | 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 }}
|
| | | >
|
| | | <FormattedMessage id='common.submit' defaultMessage='确定' />
|
| | | </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 }}
|
| | | >
|
| | | <FormattedMessage id='common.reset' defaultMessage='重置' />
|
| | | </Button>
|
| | | </Space>
|
| | | </div>
|
| | | );
|
| | | }
|
| | |
|
| | | const DatetimeRangeFilter = (props) => {
|
| | | const intl = useIntl();
|
| | | 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"
|
| | | >
|
| | | <FormattedMessage id='common.submit' defaultMessage='确定' />
|
| | | </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"
|
| | | >
|
| | | <FormattedMessage id='common.reset' defaultMessage='重置' />
|
| | | </Button>
|
| | | </Space>
|
| | | </Space>
|
| | | </div>
|
| | | </div>
|
| | | );
|
| | | }
|
| | |
|
| | | const LinkFilter = (props) => {
|
| | | const intl = useIntl();
|
| | | 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={intl.formatMessage({ id: 'commont.select', defaultMessage: '请选择' })}
|
| | | 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 }}
|
| | | >
|
| | | <FormattedMessage id='common.submit' defaultMessage='确定' />
|
| | | </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 }}
|
| | | >
|
| | | <FormattedMessage id='common.reset' defaultMessage='重置' />
|
| | | </Button>
|
| | | </Space>
|
| | | </div>
|
| | | );
|
| | | }
|
| | |
|
| | |
|
| | | export { TextFilter, SelectFilter, DatetimeRangeFilter, LinkFilter }; |