因为每个查询页面都有筛选项，所以考虑将顶部的筛选抽离成一个组件。该组件支持可配置，有新的筛选条件，只需要通过extraFilters以数组的方式传入即可。

import { useImperativeHandle, forwardRef } from "react";
import { Form, Row, Col, Button } from "antd";
import { Select } from "@/components/Antdd";
import SeverRoomChoose from "./SeverRoomChoose";
import { useSelector } from "react-redux";
import RangeTime from "@/components/RangeTime";

const FormItem = Form.Item;

const FilterComponent = (props, ref) => {
  const dict = useSelector(({ dict }) => dict);
  // 重置表单值
  const locationIfm = useSelector(({ location }) => location);
  const [form] = Form.useForm();

  useImperativeHandle(ref, () => ({
    formFields: form,
  }));

  const initialValues = props.initialValues ? props.initialValues : null;
  return (
    <Form
      layout="inline"
      onFinish={props.onFinish}
      form={form}
      initialValues={initialValues}
    >
      <Row gutter={[20, 20]} style={{ width: "100%" }}>
        {props.hiddenPlacePick ? null : (
          <Col span={24}>
            <SeverRoomChoose
              hiddenRoom={props.hiddenRoom}
              form={form}
              locationIfm={locationIfm}
            />
          </Col>
        )}
        {props.hiddenStatus ? null : (
          <Col span={4}>
            <FormItem name="approval_status">
              <Select
                options={dict.approval_status}
                placeholder="审批状态"
              ></Select>
            </FormItem>
          </Col>
        )}
        {props.extraFilters ? props.extraFilters.map((item) => item) : null}
        <RangeTime format={props.format} form={form} />
        <Col span={4}>
          <FormItem>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
  );
};

const WrappedForm = forwardRef(FilterComponent);

export default WrappedForm;

其中的 SeverRoomChoose 组件是一个地市区局站机房的级联组件。