Filter.tsx
3.24 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
import React, { useEffect, useState } from 'react';
import { Input } from 'antd';
import { useStore } from '../index';
import debounce from 'lodash/debounce';
import { planPoolTypeData, getUrl } from '@/pages/pms/entity';
import usePagination from "@/hooks/usePagination";
import {getStoragePage} from "@/pages/pms/storage/StorageManage/api";
import useInitail from "@/hooks/useInitail";
import * as api from "@/pages/pms/storage/partShop/api";
import PmsSelect from '@/pages/pms/comonents/PmsSelect';
const { Search } = Input;
export default function Filter() {
const { list: storages } = usePagination<PartStorageSpace.PageVO>(getStoragePage, {pageSize: 1000});
const { data: shops } = useInitail<PmsStoragePartShop.Option[], {}>(api.getShopApi, [], {});
const { dfParams, setDfParams, partTypeData } = useStore();
const [url, setUrl] = useState('/api/pms/erp/plan/pool/export');
useEffect(() => {
setUrl(getUrl('/api/pms/erp/plan/pool/export', dfParams));
}, [dfParams]);
const handleChangeKeywords = debounce((value: string) => {
setDfParams({ ...dfParams, current: 1, keywords: value });
}, 500);
return (
<div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start', marginBottom: 10, alignItems: 'center'}}>
<PmsSelect
style={{ width: 200, marginRight: 10}}
allowClear
value={dfParams.shopId}
onChange={value => {
const st: any = storages.find(it => it.shopId == value) || {};
setDfParams({ ...dfParams, current: 1, shopId: value, storageId: st.id });
}}
placeholder="请选择服务站"
options={shops
.filter(it => (dfParams.shopId && it.id == dfParams.shopId) || !dfParams.shopId)
.map((item: PmsStoragePartShop.Option) => ({value: item.id, label: item.name}))}
/>
<PmsSelect
style={{ width: 200, marginRight: 10}}
allowClear
value={dfParams.storageId}
onChange={value => {
const st: any = storages.find(it => it.id == value) || {};
setDfParams({ ...dfParams, current: 1, storageId: value, shopId: st.shopId });
}}
placeholder="请选择库房"
options={storages
.filter(it => (dfParams.shopId && it.shopId == dfParams.shopId) || !dfParams.shopId)
.map((item: PartStorageSpace.PageVO) => ({value: item.id, label: item.storageName}))}
/>
<PmsSelect
allowClear
style={{ width: 200, marginRight: 10}}
onChange={(poolType) => {
setDfParams({ ...dfParams, current: 1, poolType });
}}
placeholder="请选择来源类型"
options={planPoolTypeData.map(i => ({value: i.value, label: i.label}))}
/>
<PmsSelect
allowClear
style={{ width: 200, marginRight: 10}}
onChange={(partType) => setDfParams({ ...dfParams, current: 1, partType })}
placeholder="请选择配件类型"
options={partTypeData.map(i => ({value: i.value, label: i.label}))}
/>
<Search
style={{ width: 200, marginRight: 10}}
allowClear
enterButton
placeholder="配件编码|名称"
onSearch={v => handleChangeKeywords(v)}
/>
<a
href={url}
>
导出计划池表格
</a>
</div>
);
}