筛选组件
因为每个查询页面都有筛选项,所以考虑将顶部的筛选抽离成一个组件。该组件支持可配置,有新的筛选条件,只需要通过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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
其中的 SeverRoomChoose 组件是一个地市区局站机房的级联组件。
编辑 (opens new window)
上次更新: 2021/08/14, 19:30:57