|
1
|
import {
|
|
2
3
4
5
6
7
8
9
|
deleteOrderErpOrderZoNingDelete,
getOrderErpOrderZoNingSelectAll,
} from '@/services';
import type { ProColumns } from '@ant-design/pro-components';
import { EditableProTable } from '@ant-design/pro-components';
import { Button, Popconfirm, PopconfirmProps, message } from 'antd';
import React, { useRef, useState } from 'react';
import '../index.less';
|
|
10
11
12
13
14
15
16
17
18
19
20
|
import { zoningItem, zoningShowItem } from './constant';
import Modal from './modal';
const waitTime = (time: number = 100) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
});
};
|
|
21
22
23
24
25
26
27
28
29
30
31
32
|
function changeToShow(array: zoningItem[]) {
console.log(JSON.parse(localStorage.getItem('userInfo')).username);
const showArray: zoningShowItem[] = array.map((item) => {
let orderProvinceShowList = '';
let orderUserShowList = '';
let orderUserNumberShowList: number[] = [];
item.orderProvinceVoList.forEach((element, index) => {
orderProvinceShowList += element.province;
if (index < item.orderProvinceVoList.length - 1) {
orderProvinceShowList += '、';
}
});
|
|
33
|
|
|
34
35
36
37
38
39
40
|
item.orderUserVoList.forEach((event, index) => {
orderUserShowList += event.userName;
orderUserNumberShowList.push(event.uId);
if (index < item.orderUserVoList.length - 1) {
orderUserShowList += '、';
}
});
|
|
41
|
|
|
42
43
44
|
if (orderUserShowList === '') {
orderUserShowList = '全选';
orderUserNumberShowList.push(0);
|
|
45
46
|
}
|
|
47
48
49
50
51
52
53
|
return {
id: item.id,
zoning: item.zoning,
orderProvinceShowList,
orderUserShowList,
orderUserNumberShowList,
};
|
|
54
|
});
|
|
55
56
|
return showArray;
}
|
|
57
58
59
60
61
62
|
export default () => {
const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
const [dataSource, setDataSource] = useState<readonly zoningItem[]>([]);
const [position] = useState<'top' | 'bottom' | 'hidden'>('hidden');
|
|
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
|
interface ActionType {
reload: (resetPageIndex?: boolean) => void;
reloadAndRest: () => void;
reset: () => void;
clearSelected?: () => void;
startEditable: (rowKey: Key) => boolean;
cancelEditable: (rowKey: Key) => boolean;
}
const ref = useRef<ActionType>({
reload: () => {},
reloadAndRest: () => {},
reset: () => {},
startEditable: () => {},
cancelEditable: () => {},
});
function reload() {
ref.current.reload();
}
const confirm: PopconfirmProps['onConfirm'] = async (id) => {
await deleteOrderErpOrderZoNingDelete({
data: id,
});
reload();
message.success('删除成功');
};
const cancel: PopconfirmProps['onCancel'] = () => {
message.error('取消删除');
};
|
|
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
const columns: ProColumns<zoningItem>[] = [
{
title: '区域名称',
dataIndex: 'zoning',
width: 200,
},
{
title: '管辖省份',
dataIndex: 'orderProvinceShowList',
readonly: true,
width: 600,
},
{
title: '负责销售',
key: 'state',
dataIndex: 'orderUserShowList',
valueType: 'select',
|
|
113
|
ellipsis: true,
|
|
114
115
116
117
118
119
|
width: 200,
},
{
title: '操作',
valueType: 'option',
width: 200,
|
|
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
render: (text, record) => [
<>
<Modal
toReload={reload}
option={'编辑'}
needEditBody={record}
key={record.id}
/>
<Popconfirm
title="删除此项"
description="你确定你要删除此项吗?"
onConfirm={() => {
confirm(record.id);
}}
onCancel={cancel}
okText="确定"
cancelText="取消"
>
<Button>删除</Button>
</Popconfirm>
</>,
|
|
141
142
143
144
145
|
],
},
];
return (
|
|
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
<EditableProTable<zoningItem>
rowKey="id"
className="table-index"
deletePopconfirmMessage
actionRef={ref}
headerTitle={
<Modal toReload={reload} option={'新增区域'} needEditBody={{}}></Modal>
}
maxLength={5}
scroll={{
x: 960,
}}
recordCreatorProps={
position !== 'hidden'
? {
position: position as 'top',
record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
}
: false
}
loading={false}
columns={columns}
request={async () => {
const res = await getOrderErpOrderZoNingSelectAll();
if (res) {
const initDataSource = changeToShow(res.data);
return { data: initDataSource || [] };
|
|
173
|
}
|
|
174
175
176
177
178
179
180
181
182
183
184
185
186
|
}}
value={dataSource}
onChange={setDataSource}
editable={{
type: 'multiple',
editableKeys,
onSave: async (rowKey, data, row) => {
console.log(rowKey, data, row);
await waitTime(2000);
},
onChange: setEditableRowKeys,
}}
/>
|
|
187
188
|
);
};
|