6dd7c44e
莫红玲
领用授权
|
1
2
|
import usePagination from '@/hooks/usePagination';
import { getListApi } from '@/pages/capital/StandardMange/api';
|
c38a106f
莫红玲
add资产管理按门店、岗位维度授权
|
3
|
import { Button, Input, Modal, Popover, Row, Table, Tag } from 'antd';
|
7ad981a6
莫红玲
物品维度授权编辑modal
|
4
|
import type { ColumnsType } from 'antd/es/table';
|
6dd7c44e
莫红玲
领用授权
|
5
6
|
import { debounce } from 'lodash';
import React, { useEffect, useState } from 'react';
|
c38a106f
莫红玲
add资产管理按门店、岗位维度授权
|
7
|
import { AssetTypeEnum } from '@/pages/capital/entity';
|
7ad981a6
莫红玲
物品维度授权编辑modal
|
8
|
|
6dd7c44e
莫红玲
领用授权
|
9
10
11
|
interface Props {
visible: boolean;
onCancel: () => void;
|
c38a106f
莫红玲
add资产管理按门店、岗位维度授权
|
12
13
14
|
onChange?: Function;
value?: any;
multiple?: boolean;
|
7ad981a6
莫红玲
物品维度授权编辑modal
|
15
16
|
}
|
736e34b6
莫红玲
按物品维度授权领用
|
17
|
const columns: ColumnsType<StanderList.ListVO> = [
|
7ad981a6
莫红玲
物品维度授权编辑modal
|
18
|
{
|
6dd7c44e
莫红玲
领用授权
|
19
|
title: '物品名称',
|
7ad981a6
莫红玲
物品维度授权编辑modal
|
20
|
dataIndex: 'name',
|
c38a106f
莫红玲
add资产管理按门店、岗位维度授权
|
21
22
23
24
25
26
27
28
|
render: (text: string, row: StanderList.ListVO) => {
return (
<>
<div>{text}</div>
<Tag style={{ fontSize: 12 }}>{row.type && AssetTypeEnum[row.type]}</Tag>
</>
);
}
|
7ad981a6
莫红玲
物品维度授权编辑modal
|
29
30
|
},
{
|
6dd7c44e
莫红玲
领用授权
|
31
32
|
title: '物品编码',
dataIndex: 'code',
|
7ad981a6
莫红玲
物品维度授权编辑modal
|
33
34
|
},
{
|
6dd7c44e
莫红玲
领用授权
|
35
36
37
|
title: '规格型号',
dataIndex: 'specList',
render: (text, record) => {
|
736e34b6
莫红玲
按物品维度授权领用
|
38
|
const items = (text || []).map(i => `${i.standardSpecName}:${i.specDetails}`);
|
6dd7c44e
莫红玲
领用授权
|
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
return (
<Popover
placement="topLeft"
content={<div style={{ maxWidth: 260 }}>{items.join(';')}</div>}
>
<div>
{items.slice(0, 3).map((i: string) => {
return (
<p key={i} style={{ margin: 0, fontSize: 12 }}>{i}</p>
);
})}
{items.length > 3 ? (<span>...</span>) : null}
</div>
</Popover>
);
},
}];
|
7ad981a6
莫红玲
物品维度授权编辑modal
|
56
|
|
6dd7c44e
莫红玲
领用授权
|
57
|
const SelectGoodsTable = (props: Props) => {
|
c38a106f
莫红玲
add资产管理按门店、岗位维度授权
|
58
|
const { visible, onCancel, onChange, multiple = true, value = [] } = props;
|
6dd7c44e
莫红玲
领用授权
|
59
|
const { list, paginationConfig, loading, setLoading, setParams } = usePagination(getListApi, { status: 1 });
|
736e34b6
莫红玲
按物品维度授权领用
|
60
|
const [selectedRow, setSelectedRow] = useState<StanderList.ListVO[]>([]);
|
7ad981a6
莫红玲
物品维度授权编辑modal
|
61
|
|
6dd7c44e
莫红玲
领用授权
|
62
63
64
65
66
|
useEffect(() => {
if (value.length > 0) {
setSelectedRow([...value]);
}
}, [value]);
|
7ad981a6
莫红玲
物品维度授权编辑modal
|
67
68
69
70
|
const start = () => {
setLoading(true);
// ajax request after empty completing
setTimeout(() => {
|
6dd7c44e
莫红玲
领用授权
|
71
|
setSelectedRow([]);
|
7ad981a6
莫红玲
物品维度授权编辑modal
|
72
73
74
75
|
setLoading(false);
}, 1000);
};
|
6dd7c44e
莫红玲
领用授权
|
76
|
function saveDate() {
|
77d91ab9
莫红玲
实物兑换券整合办公用品模块“市场物...
|
77
78
|
console.log("🚀 ~ file: SelectGoodsTable.tsx:80 ~ saveDate ~ selectedRow:", selectedRow);
|
6dd7c44e
莫红玲
领用授权
|
79
80
81
82
83
84
85
|
onChange && onChange(selectedRow);
onCancel();
}
const onFilter = debounce((v: string) => {
setParams({ keywords: v }, true);
}, 600);
|
7ad981a6
莫红玲
物品维度授权编辑modal
|
86
87
|
const rowSelection = {
|
c38a106f
莫红玲
add资产管理按门店、岗位维度授权
|
88
|
type: multiple ? "checkbox" : "radio",
|
6dd7c44e
莫红玲
领用授权
|
89
90
91
|
selectedRowKeys: selectedRow.map(row => row.code),
onSelect: (row: any, _selected: boolean) => {
const index = selectedRow.findIndex((_row) => _row.code == row.code);
|
77d91ab9
莫红玲
实物兑换券整合办公用品模块“市场物...
|
92
93
94
95
|
if (!multiple) {
setSelectedRow([row]);
return;
}
|
6dd7c44e
莫红玲
领用授权
|
96
|
if (_selected) {
|
77d91ab9
莫红玲
实物兑换券整合办公用品模块“市场物...
|
97
|
selectedRow.unshift(row);
|
6dd7c44e
莫红玲
领用授权
|
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
} else if (index > -1) {
selectedRow.splice(index, 1);
}
setSelectedRow([...selectedRow]);
},
onSelectAll: (selected, selectedRows, changeRows) => {
const changedKeys = changeRows.map((row) => row.code);
let newData = [...selectedRow];
// 全选
if (selected) {
// 过滤掉已选的
newData = selectedRow.concat(changeRows.filter((row: any) => !selectedRow.some((item) => item.code == row.code)));
} else {
// 全不选 - 去掉已选的
newData = selectedRow.filter((row) => !changedKeys.includes(row.code));
}
setSelectedRow(newData);
},
|
7ad981a6
莫红玲
物品维度授权编辑modal
|
116
|
};
|
6dd7c44e
莫红玲
领用授权
|
117
|
const hasSelected = selectedRow.length > 0;
|
7ad981a6
莫红玲
物品维度授权编辑modal
|
118
119
|
return (
|
6dd7c44e
莫红玲
领用授权
|
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
<Modal
visible={visible}
onCancel={onCancel}
onOk={saveDate}
centered
title="选择规格型号标准"
width={650}
>
<Row style={{ marginBottom: 16, alignItems: "center" }} justify="space-between">
<Input
allowClear
style={{ width: 230 }}
placeholder="搜索型号名称"
onChange={(e) => onFilter(e.target.value)}
/>
|
8b30d635
莫红玲
资产名称标准编辑优化
|
135
136
137
138
139
140
141
142
143
144
|
{!!multiple && (
<div>
<Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
重置
</Button>
<span style={{ marginLeft: 8 }}>
{hasSelected ? `已选择 ${selectedRow.length} 项` : ''}
</span>
</div>
)}
|
6dd7c44e
莫红玲
领用授权
|
145
146
147
148
149
150
151
152
|
</Row>
<Table
loading={loading}
rowKey="code"
pagination={paginationConfig}
rowSelection={rowSelection}
columns={columns}
dataSource={list}
|
c38a106f
莫红玲
add资产管理按门店、岗位维度授权
|
153
|
size="small"
|
6dd7c44e
莫红玲
领用授权
|
154
155
|
/>
</Modal>
|
7ad981a6
莫红玲
物品维度授权编辑modal
|
156
157
158
159
|
);
};
export default SelectGoodsTable;
|