#

luxiaotao1123

2024-04-11 12bea86c9cb51f98fd5f2de904bb6a8d30e9e0e8

 zy-asrs-flow/src/components/TableSearch/index.jsx

@@ -1,84 +1,308 @@
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 Main = () => {
    const [searchText, setSearchText] = useState('');
    const [searchedColumn, setSearchedColumn] = useState('');
    const searchInput = useRef(null);
    const getColumnSearchProps = (dataIndex) => ({
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
            <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
                <Input
                    ref={searchInput}
                    placeholder={`Search ${dataIndex}`}
                    value={selectedKeys[0]}
                    onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                    onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
                    style={{ marginBottom: 8, display: 'block' }}
                />
                <Space>
                    <Button
                        type="primary"
                        onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
                        icon={<SearchOutlined />}
                        size="small"
                        style={{ width: 90 }}
                    >
                        Search
                    </Button>
                    <Button
                        onClick={() => clearFilters && handleReset(clearFilters)}
                        size="small"
                        style={{ width: 90 }}
                    >
                        Reset
                    </Button>
                    <Button
                        type="link"
                        size="small"
                        onClick={() => {
                            confirm({ closeDropdown: false });
                            setSearchText((selectedKeys)[0]);
                            setSearchedColumn(dataIndex);
                        }}
                    >
                        Filter
                    </Button>
                    <Button
                        type="link"
                        size="small"
                        onClick={() => {
                            close();
                        }}
                    >
                        close
                    </Button>
                </Space>
            </div>
        ),
        filterIcon: (filtered) => (
            <SearchOutlined style={{ color: filtered ? '#1677ff' : undefined }} />
        ),
        onFilter: (value, record) =>
            record[dataIndex]
                .toString()
                .toLowerCase()
                .includes((value).toLowerCase()),
        onFilterDropdownOpenChange: (visible) => {
            if (visible) {
                setTimeout(() => searchInput.current?.select(), 100);
            }
        },
        render: (text) =>
            searchedColumn === dataIndex ? (
                <Highlighter
                    highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                    searchWords={[searchText]}
                    autoEscape
                    textToHighlight={text ? text.toString() : ''}
                />
            ) : (
                text
            ),
    });
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>
    );
}

export default Main;
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 };