react ts 封装搜索条件

封装

import React, { ReactNode, useImperativeHandle, forwardRef } from 'react';
import { Card, Form, Input, Button, Row, Col } from 'antd';

interface Iprops {
    formItem: any,
    getParams: (params: any) => void,
    reset?: () => void | undefined,
    isButton?: boolean,
    buttons?: ReactNode
}

/**
 *查询条件组件
 *
 * @param  formItem any 条件列表
 * @param  getParams function 查询
 * @param  reset function 重置
 * @param  isButton boolean 是否自定义按钮
 * @param  buttons Html 按钮
 * @return {*}
 */
const SearchFormBar = ({ formItem, getParams, reset, isButton, buttons }: Iprops, ref: any) => {
    const [form] = Form.useForm();


    const setItemStyle = formItem.length >= 4 ? { flexBasis: '30%', marginBottom: 16, marginRight: '1%' } : { flex: 1 };

    const resetForm = () => {
        form.resetFields();
        reset && reset();
    };

    const getFormParams = () => {
        const params = form.getFieldsValue();
        getParams(params);

    };

    useImperativeHandle(ref, () => ({
        getFormParams: () => {
            return form.getFieldsValue();
        }
    }));

    return <>
        <Card>
            <div className="flex">
                <div className="flex flex-1">
                    <Form layout="inline" form={form} style={{ width: '100%' }}>
                        <div style={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
                            {formItem.map((item: any, index: number) => (
                                <div key={index} style={{ ...setItemStyle }}>
                                    <Form.Item label={item.label} name={item.name}>
                                        {item.Component}
                                    </Form.Item>
                                </div>
                            ))}
                        </div>
                    </Form>
                </div>
                <div className='flex' style={{ alignItems: 'center' }}>
                    {
                        isButton && <>{buttons}</>
                    }
                    {
                        !isButton && <>
                            <Button onClick={resetForm}>重置</Button>
                            <Button type="primary" onClick={getFormParams} style={{ marginLeft: 10 }}>查询</Button>
                        </>
                    }

                </div>
            </div>
        </Card>
    </>;
};

export default forwardRef(SearchFormBar);

使用

const getSearchFormItem = () => {
        return [
            {
                label: '关键字1',
                name: 'name',

                Component: <Input maxLength={150} allowClear placeholder="请输入" />,

            },
            {
                label: '数据形态1',
                name: 'status',
                Component: <Select allowClear placeholder="请选择" options={[{ label: 1, value: 1 }]} />,
                col: 5
            },
            {
                label: '数据形态2',
                name: 'status',
                Component: <Select allowClear placeholder="请选择" options={[{ label: 1, value: 1 }]} />,

            },
            {
                label: '数据形态3',
                name: 'status',
                Component: <Input maxLength={150} allowClear placeholder="请输入" />,

            }
        ];
    }


<SearchFormBar formItem={getSearchFormItem()} getParams={getParams} />