Filter.tsx
4.21 KB
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
import React, { useCallback, useEffect, useState } from "react";
import { Button, Row, Select, Input, Col } from "antd";
import { useStore } from "../index";
import { debounce } from "lodash";
import { CapitalAccountTypeEnum, ConfigType } from "@/pages/finance/entitys";
const { Option } = Select;
const Search = Input.Search;
export default function AccountList() {
const { triggerModal, brands, financeList, setInvestList, companys, dealers } = useStore();
// 存储删选条件
const [filterParams, setFilterParams] = useState({});
useEffect(() => {
let originList = financeList;
let res = [];
if (filterParams.brandId) {
//删选品牌
originList = originList.filter((item) => item.brandId === filterParams.brandId);
}
if (filterParams.mefCompId) {
//删选主机厂
originList = originList.filter((item) => item.mefCompId === filterParams.mefCompId);
}
if (filterParams.includeId) {
//删选包含商家 includeId
originList = originList.filter((item) => item.includeDealers?.find((y) => y.id === filterParams.includeId));
}
if (filterParams.creditDealerId) {
//删选授信商家 creditDealerId
originList = originList.filter((item) => item.creditDealerId === filterParams.creditDealerId);
}
if (filterParams.name) {
// 筛选投资主体 name
originList = originList.filter((item) => item.name?.indexOf(filterParams.name) >= 0);
}
res = originList;
setInvestList([...res]);
}, [filterParams]);
return (
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 20,
}}
>
<div>
<Row justify="space-between" style={{ flexWrap: "nowrap" }}>
<Select
allowClear
placeholder="请选择品牌"
style={{ width: 200 }}
showSearch
optionFilterProp="children"
onChange={(brandId) => {
setFilterParams({ ...filterParams, brandId });
}}
>
{brands.map((brand) => (
<Option key={brand.id} value={brand.id}>
{brand.name}
</Option>
))}
</Select>
<Select
allowClear
placeholder="请选择主机厂"
style={{ width: 200, marginLeft: 50 }}
showSearch
optionFilterProp="children"
onChange={(mefCompId) => {
setFilterParams({ ...filterParams, mefCompId });
}}
>
{companys.map((comp) => (
<Option key={comp.id} value={comp.id}>
{comp.name}
</Option>
))}
</Select>
<Input
placeholder="请输入投资主体"
style={{ width: 200, marginLeft: 50 }}
onChange={(e) => {
setFilterParams({ ...filterParams, name: e.target.value });
}}
/>
</Row>
<Row style={{ flexWrap: "nowrap", marginTop: 10 }}>
<Select
allowClear
placeholder="请选择包含商家"
style={{ width: 200 }}
showSearch
optionFilterProp="children"
onChange={(includeId) => {
setFilterParams({ ...filterParams, includeId });
}}
>
{dealers.map((dealer) => (
<Option key={dealer.id} value={dealer.id}>
{dealer.name}
</Option>
))}
</Select>
<Select
allowClear
placeholder="请选择授信商家"
style={{ width: 200,marginLeft:50 }}
showSearch
optionFilterProp="children"
onChange={(creditDealerId) => {
setFilterParams({ ...filterParams, creditDealerId });
}}
>
{dealers.map((dealer) => (
<Option key={dealer.id} value={dealer.id}>
{dealer.name}
</Option>
))}
</Select>
</Row>
</div>
<Button type="primary" onClick={() => triggerModal({}, true)}>
新增
</Button>
</div>
);
}