PartModal.tsx
3.65 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
import React, {useEffect, useState} from 'react';
import {Modal, Table, Input, message, Button} from 'antd';
import Column from 'antd/lib/table/Column';
import { debounce } from 'lodash';
import { PartVO } from '../partPlan/MinRatioPlan/api';
const Search = Input.Search;
interface Props {
onCancel: () => any,
visible: boolean,
parts: any[]
onOk: (parts: any[]) => any
}
export default function Index({ onCancel, visible, parts=[], onOk }: Props) {
const [selectedParts, setSelectedParts] = useState<PartVO[]>([]);
const [partList, setPartList] = useState(parts);
useEffect(() => {
if (!visible) {
setSelectedParts([]);
setPartList(parts);
}
}, [visible, parts]);
function handSave() {
if (selectedParts.length == 0) {
message.error("请选择配件");
return;
}
onOk && onOk(selectedParts);
onCancel && onCancel();
}
const handleChange = debounce((value) => {
setPartList(parts.filter(it => {
return (it.partCode || '').includes(value)
|| (it.partName || '').includes(value)
|| (it.supplierName || '').includes(value);
}));
}, 500);
return (
<Modal
width={800}
visible={visible}
title="配件采购品牌"
onCancel={onCancel}
footer={[
<Button key="cancel" onClick={onCancel}>取消</Button>,
<Button
key="submit"
disabled={selectedParts.length == 0}
onClick={handSave}
type="primary"
htmlType="submit"
>
确认
</Button>
]}
>
<Search
enterButton
allowClear
placeholder="请输入配件名称/编码"
onChange={e => handleChange(e.target.value)}
onSearch={handleChange}
style={{ maxWidth: 240, marginBottom: 20 }}
/>
<Table
dataSource={partList}
scroll={{y: 600}}
style={{width: '100%'}}
pagination={false}
rowSelection={{
type: "checkbox",
selectedRowKeys: selectedParts.map(part => `${part.partCode}-${part.storageId}`),
onSelect: (row: PartVO, _selected: boolean) => {
const index = selectedParts.findIndex(_row => _row.partCode == row.partCode && _row.storageId == row.storageId);
let newData = [...selectedParts];
if (_selected) {
newData.unshift(row);
} else if (index > -1) {
newData.splice(index, 1);
}
setSelectedParts([...newData]);
},
onSelectAll: (selected, selectedRows, changeRows) => {
const changedKeys = changeRows.map(row => `${row.partCode}-${row.storageId}`);
let newData = [...selectedParts];
// 全选
if (selected) {
// 过滤掉已选的
newData = selectedParts.concat(changeRows.filter(row => !selectedParts.some(item => item.partCode == row.partCode && item.storageId == row.storageId)),);
} else {
// 全不选 - 去掉已选的
newData = selectedParts.filter(row => !changedKeys.includes(`${row.partCode}-${row.storageId}`));
}
setSelectedParts(newData);
},
}}
rowKey={(record) => `${record.partCode}-${record.storageId}`}
>
<Column title="配件编码" dataIndex="partCode" />
<Column title="配件名称" dataIndex="partName" />
<Column title="库房名称" dataIndex="storageName" />
<Column title="门店名称" dataIndex="shopName" />
<Column title="配件数量" dataIndex="count" />
<Column title="上次采购供应商" dataIndex="supplierName" />
</Table>
</Modal>
);
}