#

pang.jiabao

2025-03-01 bb28c2f09f7fa36b8b80f9d19f23631623b80d1c

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

@@ -1,163 +1,308 @@
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 };
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 };