ztxkui 4.3.17 → 4.3.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/TableDemo/EditableTable.d.ts +14 -0
- package/dist/TableDemo/EditableTable.js +212 -294
- package/dist/TableDemo/data.js +2 -2
- package/dist/components/Table/hooks/useColumns.js +4 -2
- package/dist/components/Table/table-enhance-cell.js +1 -0
- package/dist/components/Table/table.js +4 -1
- package/package.json +1 -1
|
@@ -3,5 +3,19 @@
|
|
|
3
3
|
* @description 可编辑表格
|
|
4
4
|
*/
|
|
5
5
|
import React from 'react';
|
|
6
|
+
declare type numType = number | string;
|
|
7
|
+
/**
|
|
8
|
+
* 精确加法
|
|
9
|
+
*/
|
|
10
|
+
export declare function plus(num1: numType, num2: numType, ...others: numType[]): number;
|
|
11
|
+
/**
|
|
12
|
+
* 精确减法
|
|
13
|
+
*/
|
|
14
|
+
export declare function minus(num1: numType, num2: numType, ...others: numType[]): number;
|
|
15
|
+
/**
|
|
16
|
+
* 精确乘法
|
|
17
|
+
*/
|
|
18
|
+
export declare function times(num1: numType, num2: numType, ...others: numType[]): number;
|
|
19
|
+
export declare function divide(num1: numType, num2: numType, ...others: numType[]): number;
|
|
6
20
|
declare const EditableTable: React.FC;
|
|
7
21
|
export default EditableTable;
|
|
@@ -45,12 +45,16 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
45
45
|
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from) {
|
|
49
|
+
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
|
|
50
|
+
to[j] = from[i];
|
|
51
|
+
return to;
|
|
52
|
+
};
|
|
48
53
|
/**
|
|
49
54
|
* @author 陈亚雄
|
|
50
55
|
* @description 可编辑表格
|
|
51
56
|
*/
|
|
52
57
|
import React, { useState, useCallback, useRef, useEffect } from 'react';
|
|
53
|
-
import { unstable_batchedUpdates } from 'react-dom';
|
|
54
58
|
// redux
|
|
55
59
|
// ztxkui公共组件
|
|
56
60
|
import { Table, EnhanceSelect, Button, message } from '../index';
|
|
@@ -58,71 +62,116 @@ import { Table, EnhanceSelect, Button, message } from '../index';
|
|
|
58
62
|
// store
|
|
59
63
|
// 自定义组件
|
|
60
64
|
// 其他文件
|
|
61
|
-
import {
|
|
62
|
-
// times,
|
|
63
|
-
exactRound, toThousand,
|
|
64
|
-
// plus,
|
|
65
|
-
// minus,
|
|
66
|
-
divide, } from 'ztxkutils/dist/tools';
|
|
65
|
+
import { times as _times, exactRound, toThousand, plus as _plus, minus as _minus, divide as _divide, } from 'ztxkutils/dist/tools';
|
|
67
66
|
import update from 'immutability-helper';
|
|
68
|
-
import { dataSource,
|
|
67
|
+
import { dataSource, list1 } from './data';
|
|
68
|
+
/**
|
|
69
|
+
* 精确加法
|
|
70
|
+
*/
|
|
71
|
+
export function plus(num1, num2) {
|
|
72
|
+
var others = [];
|
|
73
|
+
for (var _i = 2; _i < arguments.length; _i++) {
|
|
74
|
+
others[_i - 2] = arguments[_i];
|
|
75
|
+
}
|
|
76
|
+
try {
|
|
77
|
+
var _num1 = isNaN(Number(num1)) ? num1 : Number(num1);
|
|
78
|
+
var _num2 = isNaN(Number(num2)) ? num2 : Number(num2);
|
|
79
|
+
var _others = Array.isArray(others)
|
|
80
|
+
? others === null || others === void 0 ? void 0 : others.map(function (item) { return (isNaN(Number(item)) ? item : Number(item)); })
|
|
81
|
+
: [];
|
|
82
|
+
return _plus.apply(void 0, __spreadArray([_num1, _num2], _others));
|
|
83
|
+
}
|
|
84
|
+
catch (err) {
|
|
85
|
+
console.log(err);
|
|
86
|
+
return 0;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
/**
|
|
90
|
+
* 精确减法
|
|
91
|
+
*/
|
|
92
|
+
export function minus(num1, num2) {
|
|
93
|
+
var others = [];
|
|
94
|
+
for (var _i = 2; _i < arguments.length; _i++) {
|
|
95
|
+
others[_i - 2] = arguments[_i];
|
|
96
|
+
}
|
|
97
|
+
try {
|
|
98
|
+
var _num1 = isNaN(Number(num1)) ? num1 : Number(num1);
|
|
99
|
+
var _num2 = isNaN(Number(num2)) ? num2 : Number(num2);
|
|
100
|
+
var _others = Array.isArray(others)
|
|
101
|
+
? others === null || others === void 0 ? void 0 : others.map(function (item) { return (isNaN(Number(item)) ? item : Number(item)); })
|
|
102
|
+
: [];
|
|
103
|
+
return _minus.apply(void 0, __spreadArray([_num1, _num2], _others));
|
|
104
|
+
}
|
|
105
|
+
catch (err) {
|
|
106
|
+
console.log(err);
|
|
107
|
+
return 0;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
/**
|
|
111
|
+
* 精确乘法
|
|
112
|
+
*/
|
|
113
|
+
export function times(num1, num2) {
|
|
114
|
+
var others = [];
|
|
115
|
+
for (var _i = 2; _i < arguments.length; _i++) {
|
|
116
|
+
others[_i - 2] = arguments[_i];
|
|
117
|
+
}
|
|
118
|
+
try {
|
|
119
|
+
var _num1 = isNaN(Number(num1)) ? num1 : Number(num1);
|
|
120
|
+
var _num2 = isNaN(Number(num2)) ? num2 : Number(num2);
|
|
121
|
+
var _others = Array.isArray(others)
|
|
122
|
+
? others === null || others === void 0 ? void 0 : others.map(function (item) { return (isNaN(Number(item)) ? item : Number(item)); })
|
|
123
|
+
: [];
|
|
124
|
+
return _times.apply(void 0, __spreadArray([_num1, _num2], _others));
|
|
125
|
+
}
|
|
126
|
+
catch (err) {
|
|
127
|
+
console.log(err);
|
|
128
|
+
return 0;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
export function divide(num1, num2) {
|
|
132
|
+
var others = [];
|
|
133
|
+
for (var _i = 2; _i < arguments.length; _i++) {
|
|
134
|
+
others[_i - 2] = arguments[_i];
|
|
135
|
+
}
|
|
136
|
+
try {
|
|
137
|
+
var _num1 = isNaN(Number(num1)) ? num1 : Number(num1);
|
|
138
|
+
var _num2 = isNaN(Number(num2)) ? num2 : Number(num2);
|
|
139
|
+
var _others = Array.isArray(others)
|
|
140
|
+
? others === null || others === void 0 ? void 0 : others.map(function (item) { return (isNaN(Number(item)) ? item : Number(item)); })
|
|
141
|
+
: [];
|
|
142
|
+
return _divide.apply(void 0, __spreadArray([_num1, _num2], _others));
|
|
143
|
+
}
|
|
144
|
+
catch (err) {
|
|
145
|
+
console.log(err);
|
|
146
|
+
return 0;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
69
149
|
var EditableTable = function () {
|
|
70
|
-
console.log('父组件 rerender');
|
|
71
150
|
var _a = useState(dataSource), records = _a[0], setRecords = _a[1];
|
|
72
151
|
var recordsRef = useRef([]);
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
var
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}, []);
|
|
80
|
-
var getRefreshScuCell = useCallback(function () {
|
|
81
|
-
if (tableSCURefreshRef.current) {
|
|
82
|
-
if (timeOutRef.current) {
|
|
83
|
-
clearTimeout(timeOutRef.current);
|
|
84
|
-
timeOutRef.current = null;
|
|
85
|
-
}
|
|
86
|
-
timeOutRef.current = setTimeout(function () {
|
|
87
|
-
console.log('设置');
|
|
88
|
-
tableSCURefreshRef.current = false;
|
|
89
|
-
});
|
|
90
|
-
return true;
|
|
91
|
-
}
|
|
92
|
-
return false;
|
|
93
|
-
}, []);
|
|
152
|
+
// 初始化渲染，针对配置了editable、editableConfig的列配置
|
|
153
|
+
var _b = useState(false), firstRender = _b[0], setFirstRender = _b[1];
|
|
154
|
+
// 新增删除行改变
|
|
155
|
+
var _c = useState(false), lengthChange = _c[0], setLengthChange = _c[1];
|
|
156
|
+
// 表格行拖拽改变
|
|
157
|
+
var _d = useState(false), moveChange = _d[0], setMoveChange = _d[1];
|
|
94
158
|
// 表格
|
|
95
159
|
var tableHandleRef = useRef({});
|
|
96
160
|
// 表格配置
|
|
97
|
-
var
|
|
161
|
+
var _e = useState({
|
|
98
162
|
test1: { isChangeable: 1, isDisplay: 1, isRequired: 1 },
|
|
99
163
|
test2: { isChangeable: 1, isDisplay: 1, isRequired: 1 },
|
|
100
|
-
})[0];
|
|
164
|
+
}), tableConfig = _e[0], setTableConfig = _e[1];
|
|
101
165
|
useEffect(function () {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
// setTimeout(() => {
|
|
111
|
-
// setRecords(dataSource);
|
|
112
|
-
// }, 1000);
|
|
166
|
+
setTimeout(function () {
|
|
167
|
+
setTableConfig({
|
|
168
|
+
test1: { isChangeable: 1, isDisplay: 1, isRequired: 1 },
|
|
169
|
+
test111: { isChangeable: 1, isDisplay: 1, isRequired: 1 },
|
|
170
|
+
test2: { isChangeable: 1, isDisplay: 1, isRequired: 1 },
|
|
171
|
+
test3: { isChangeable: 1, isDisplay: 1, isRequired: 1 },
|
|
172
|
+
});
|
|
173
|
+
}, 5000);
|
|
113
174
|
}, []);
|
|
114
|
-
// 表格数据改变相关
|
|
115
|
-
var onEditableSaveHandle = useCallback(function (record, index, _dataIndex) {
|
|
116
|
-
var _a;
|
|
117
|
-
if (_dataIndex === void 0) { _dataIndex = ''; }
|
|
118
|
-
if (typeof index === 'number') {
|
|
119
|
-
var newRecords = recordsRef.current.slice();
|
|
120
|
-
var item = newRecords[index];
|
|
121
|
-
newRecords.splice(index, 1, _dataIndex
|
|
122
|
-
? __assign(__assign(__assign({}, record), item), (_a = {}, _a[_dataIndex] = record[_dataIndex], _a)) : __assign(__assign({}, item), record));
|
|
123
|
-
setRecords(newRecords);
|
|
124
|
-
}
|
|
125
|
-
}, [setRecords]);
|
|
126
175
|
var columns = [
|
|
127
176
|
{
|
|
128
177
|
title: '序号',
|
|
@@ -132,60 +181,24 @@ var EditableTable = function () {
|
|
|
132
181
|
render: function (_text, _record, index) { return "" + (index + 1); },
|
|
133
182
|
},
|
|
134
183
|
{
|
|
135
|
-
title: '测试
|
|
136
|
-
width: 100,
|
|
137
|
-
dataIndex: 'test1231212',
|
|
138
|
-
key: 'test1231212',
|
|
139
|
-
editable: true,
|
|
140
|
-
showCopy: true,
|
|
141
|
-
validate: {},
|
|
142
|
-
shouldCellUpdate: function (record, preRecord) {
|
|
143
|
-
if (getRefreshScuCell()) {
|
|
144
|
-
return true;
|
|
145
|
-
}
|
|
146
|
-
return record.test1231212 !== preRecord.test1231212;
|
|
147
|
-
},
|
|
148
|
-
},
|
|
149
|
-
{
|
|
150
|
-
title: '测试1212',
|
|
184
|
+
title: '测试1',
|
|
151
185
|
width: 100,
|
|
152
|
-
dataIndex: '
|
|
153
|
-
key: '
|
|
186
|
+
dataIndex: 'test1',
|
|
187
|
+
key: 'test1',
|
|
154
188
|
editable: true,
|
|
155
189
|
showCopy: true,
|
|
156
190
|
validate: {},
|
|
157
191
|
shouldCellUpdate: function (record, preRecord) {
|
|
158
|
-
if (
|
|
192
|
+
if (firstRender) {
|
|
193
|
+
setFirstRender(false);
|
|
159
194
|
return true;
|
|
160
195
|
}
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
},
|
|
164
|
-
{
|
|
165
|
-
title: '测试1',
|
|
166
|
-
width: 100,
|
|
167
|
-
dataIndex: 'test1122',
|
|
168
|
-
key: 'test1122',
|
|
169
|
-
editable: true,
|
|
170
|
-
showCopy: true,
|
|
171
|
-
validate: {},
|
|
172
|
-
shouldCellUpdate: function (record, preRecord) {
|
|
173
|
-
if (getRefreshScuCell()) {
|
|
196
|
+
if (lengthChange) {
|
|
197
|
+
setLengthChange(false);
|
|
174
198
|
return true;
|
|
175
199
|
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
},
|
|
179
|
-
{
|
|
180
|
-
title: '测试1',
|
|
181
|
-
width: 100,
|
|
182
|
-
dataIndex: 'test1',
|
|
183
|
-
key: 'test1',
|
|
184
|
-
editable: true,
|
|
185
|
-
showCopy: true,
|
|
186
|
-
validate: {},
|
|
187
|
-
shouldCellUpdate: function (record, preRecord) {
|
|
188
|
-
if (getRefreshScuCell()) {
|
|
200
|
+
if (moveChange) {
|
|
201
|
+
setMoveChange(false);
|
|
189
202
|
return true;
|
|
190
203
|
}
|
|
191
204
|
return record.test1 !== preRecord.test1;
|
|
@@ -206,7 +219,16 @@ var EditableTable = function () {
|
|
|
206
219
|
},
|
|
207
220
|
validate: {},
|
|
208
221
|
shouldCellUpdate: function (record, preRecord) {
|
|
209
|
-
if (
|
|
222
|
+
if (firstRender) {
|
|
223
|
+
setFirstRender(false);
|
|
224
|
+
return true;
|
|
225
|
+
}
|
|
226
|
+
if (lengthChange) {
|
|
227
|
+
setLengthChange(false);
|
|
228
|
+
return true;
|
|
229
|
+
}
|
|
230
|
+
if (moveChange) {
|
|
231
|
+
setMoveChange(false);
|
|
210
232
|
return true;
|
|
211
233
|
}
|
|
212
234
|
return record.test111 !== preRecord.test111;
|
|
@@ -224,9 +246,6 @@ var EditableTable = function () {
|
|
|
224
246
|
min: 0,
|
|
225
247
|
precision: 2,
|
|
226
248
|
formatterType: 'currency',
|
|
227
|
-
disabledHandle: function (record) {
|
|
228
|
-
return record.test3 === 'test3-0';
|
|
229
|
-
},
|
|
230
249
|
},
|
|
231
250
|
required: true,
|
|
232
251
|
showCopy: true,
|
|
@@ -246,10 +265,19 @@ var EditableTable = function () {
|
|
|
246
265
|
},
|
|
247
266
|
},
|
|
248
267
|
shouldCellUpdate: function (record, preRecord) {
|
|
249
|
-
if (
|
|
268
|
+
if (firstRender) {
|
|
269
|
+
setFirstRender(false);
|
|
250
270
|
return true;
|
|
251
271
|
}
|
|
252
|
-
|
|
272
|
+
if (lengthChange) {
|
|
273
|
+
setLengthChange(false);
|
|
274
|
+
return true;
|
|
275
|
+
}
|
|
276
|
+
if (moveChange) {
|
|
277
|
+
setMoveChange(false);
|
|
278
|
+
return true;
|
|
279
|
+
}
|
|
280
|
+
return record.test2 !== preRecord.test2;
|
|
253
281
|
},
|
|
254
282
|
},
|
|
255
283
|
{
|
|
@@ -260,7 +288,12 @@ var EditableTable = function () {
|
|
|
260
288
|
align: 'center',
|
|
261
289
|
editable: false,
|
|
262
290
|
shouldCellUpdate: function (record, preRecord) {
|
|
263
|
-
if (
|
|
291
|
+
if (lengthChange) {
|
|
292
|
+
setLengthChange(false);
|
|
293
|
+
return true;
|
|
294
|
+
}
|
|
295
|
+
if (moveChange) {
|
|
296
|
+
setMoveChange(false);
|
|
264
297
|
return true;
|
|
265
298
|
}
|
|
266
299
|
return (record.test111 !== preRecord.test111 ||
|
|
@@ -270,9 +303,8 @@ var EditableTable = function () {
|
|
|
270
303
|
// const value =
|
|
271
304
|
// Number(record?.orderPurchasePrice) * Number(record?.orderQuantity);
|
|
272
305
|
var value = divide((record === null || record === void 0 ? void 0 : record.test2) || 0, (record === null || record === void 0 ? void 0 : record.test111) || 0);
|
|
306
|
+
console.log(record === null || record === void 0 ? void 0 : record.test111, record === null || record === void 0 ? void 0 : record.test2, value);
|
|
273
307
|
return React.createElement("div", null, toThousand(exactRound(value || 0, 2)));
|
|
274
|
-
// const value = record?.test2 / record?.test111;
|
|
275
|
-
// return <div>{toThousand(value.toFixed(2))}</div>;
|
|
276
308
|
},
|
|
277
309
|
},
|
|
278
310
|
{
|
|
@@ -281,35 +313,18 @@ var EditableTable = function () {
|
|
|
281
313
|
dataIndex: 'test3',
|
|
282
314
|
key: 'test3',
|
|
283
315
|
shouldCellUpdate: function (record, preRecord) {
|
|
284
|
-
if (
|
|
316
|
+
if (lengthChange) {
|
|
317
|
+
setLengthChange(false);
|
|
318
|
+
return true;
|
|
319
|
+
}
|
|
320
|
+
if (moveChange) {
|
|
321
|
+
setMoveChange(false);
|
|
285
322
|
return true;
|
|
286
323
|
}
|
|
287
324
|
return record.test3 !== preRecord.test3;
|
|
288
325
|
},
|
|
289
326
|
validate: {},
|
|
290
327
|
render: function (text, record, index) {
|
|
291
|
-
// return (
|
|
292
|
-
// <Select
|
|
293
|
-
// value={text}
|
|
294
|
-
// onChange={(value, option) => {
|
|
295
|
-
// tableHandleRef.current.clearErrorClass(index);
|
|
296
|
-
// let newRecord = {
|
|
297
|
-
// test3: value,
|
|
298
|
-
// test3Name: 'asd',
|
|
299
|
-
// };
|
|
300
|
-
// const realyIndex = tableHandleRef.current?.getRealyIndex?.(index);
|
|
301
|
-
// onEditableSaveHandle(newRecord, realyIndex);
|
|
302
|
-
// }}
|
|
303
|
-
// >
|
|
304
|
-
// {list1.map((item) => {
|
|
305
|
-
// return (
|
|
306
|
-
// <Select.Option key={item.id} title={item.name}>
|
|
307
|
-
// {item.name}
|
|
308
|
-
// </Select.Option>
|
|
309
|
-
// );
|
|
310
|
-
// })}
|
|
311
|
-
// </Select>
|
|
312
|
-
// );
|
|
313
328
|
return (React.createElement(EnhanceSelect, { value: text, list: list1, dataKey: "id", titleKey: "name", dropdownMatchSelectWidth: 130, onChange: function (value, option, fullData) {
|
|
314
329
|
var _a, _b;
|
|
315
330
|
tableHandleRef.current.clearErrorClass(index);
|
|
@@ -322,112 +337,12 @@ var EditableTable = function () {
|
|
|
322
337
|
} }));
|
|
323
338
|
},
|
|
324
339
|
},
|
|
325
|
-
{
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
if (getRefreshScuCell()) {
|
|
332
|
-
return true;
|
|
333
|
-
}
|
|
334
|
-
return record.test31 !== preRecord.test31;
|
|
335
|
-
},
|
|
336
|
-
validate: {},
|
|
337
|
-
render: function (text, record, index) {
|
|
338
|
-
return (React.createElement(EnhanceSelect, { value: text, list: list1, dataKey: "id", titleKey: "name", dropdownMatchSelectWidth: 130, onChange: function (value, option, fullData) {
|
|
339
|
-
var _a, _b;
|
|
340
|
-
tableHandleRef.current.clearErrorClass(index);
|
|
341
|
-
var newRecord = {
|
|
342
|
-
test31: value,
|
|
343
|
-
test31Name: fullData === null || fullData === void 0 ? void 0 : fullData.name,
|
|
344
|
-
};
|
|
345
|
-
var realyIndex = (_b = (_a = tableHandleRef.current) === null || _a === void 0 ? void 0 : _a.getRealyIndex) === null || _b === void 0 ? void 0 : _b.call(_a, index);
|
|
346
|
-
onEditableSaveHandle(newRecord, realyIndex);
|
|
347
|
-
} }));
|
|
348
|
-
},
|
|
349
|
-
},
|
|
350
|
-
{
|
|
351
|
-
title: '测试32',
|
|
352
|
-
width: 100,
|
|
353
|
-
dataIndex: 'test32',
|
|
354
|
-
key: 'test32',
|
|
355
|
-
shouldCellUpdate: function (record, preRecord) {
|
|
356
|
-
if (getRefreshScuCell()) {
|
|
357
|
-
return true;
|
|
358
|
-
}
|
|
359
|
-
return record.test32 !== preRecord.test32;
|
|
360
|
-
},
|
|
361
|
-
validate: {},
|
|
362
|
-
render: function (text, record, index) {
|
|
363
|
-
return (React.createElement(EnhanceSelect, { value: text, list: list1, dataKey: "id", titleKey: "name", dropdownMatchSelectWidth: 130, onChange: function (value, option, fullData) {
|
|
364
|
-
var _a, _b;
|
|
365
|
-
tableHandleRef.current.clearErrorClass(index);
|
|
366
|
-
var newRecord = {
|
|
367
|
-
test32: value,
|
|
368
|
-
test32Name: fullData === null || fullData === void 0 ? void 0 : fullData.name,
|
|
369
|
-
};
|
|
370
|
-
var realyIndex = (_b = (_a = tableHandleRef.current) === null || _a === void 0 ? void 0 : _a.getRealyIndex) === null || _b === void 0 ? void 0 : _b.call(_a, index);
|
|
371
|
-
onEditableSaveHandle(newRecord, realyIndex);
|
|
372
|
-
} }));
|
|
373
|
-
},
|
|
374
|
-
},
|
|
375
|
-
{
|
|
376
|
-
title: '测试33',
|
|
377
|
-
width: 100,
|
|
378
|
-
dataIndex: 'test33',
|
|
379
|
-
key: 'test33',
|
|
380
|
-
shouldCellUpdate: function (record, preRecord) {
|
|
381
|
-
if (getRefreshScuCell()) {
|
|
382
|
-
return true;
|
|
383
|
-
}
|
|
384
|
-
return record.test33 !== preRecord.test33;
|
|
385
|
-
},
|
|
386
|
-
validate: {},
|
|
387
|
-
render: function (text, record, index) {
|
|
388
|
-
return (React.createElement(EnhanceSelect, { value: text, list: list1, dataKey: "id", titleKey: "name", dropdownMatchSelectWidth: 130, onChange: function (value, option, fullData) {
|
|
389
|
-
var _a, _b;
|
|
390
|
-
tableHandleRef.current.clearErrorClass(index);
|
|
391
|
-
var newRecord = {
|
|
392
|
-
test33: value,
|
|
393
|
-
test33Name: fullData === null || fullData === void 0 ? void 0 : fullData.name,
|
|
394
|
-
};
|
|
395
|
-
var realyIndex = (_b = (_a = tableHandleRef.current) === null || _a === void 0 ? void 0 : _a.getRealyIndex) === null || _b === void 0 ? void 0 : _b.call(_a, index);
|
|
396
|
-
onEditableSaveHandle(newRecord, realyIndex);
|
|
397
|
-
} }));
|
|
398
|
-
},
|
|
399
|
-
},
|
|
400
|
-
{
|
|
401
|
-
title: '测试34',
|
|
402
|
-
width: 100,
|
|
403
|
-
dataIndex: 'test34',
|
|
404
|
-
key: 'test34',
|
|
405
|
-
shouldCellUpdate: function (record, preRecord) {
|
|
406
|
-
if (getRefreshScuCell()) {
|
|
407
|
-
return true;
|
|
408
|
-
}
|
|
409
|
-
return record.test34 !== preRecord.test34;
|
|
410
|
-
},
|
|
411
|
-
validate: {},
|
|
412
|
-
render: function (text, record, index) {
|
|
413
|
-
return (React.createElement(EnhanceSelect, { value: text, list: list1, dataKey: "id", titleKey: "name", dropdownMatchSelectWidth: 130, onChange: function (value, option, fullData) {
|
|
414
|
-
var _a, _b;
|
|
415
|
-
tableHandleRef.current.clearErrorClass(index);
|
|
416
|
-
var newRecord = {
|
|
417
|
-
test34: value,
|
|
418
|
-
test34Name: fullData === null || fullData === void 0 ? void 0 : fullData.name,
|
|
419
|
-
};
|
|
420
|
-
var realyIndex = (_b = (_a = tableHandleRef.current) === null || _a === void 0 ? void 0 : _a.getRealyIndex) === null || _b === void 0 ? void 0 : _b.call(_a, index);
|
|
421
|
-
onEditableSaveHandle(newRecord, realyIndex);
|
|
422
|
-
} }));
|
|
423
|
-
},
|
|
424
|
-
},
|
|
425
|
-
{
|
|
426
|
-
title: '测试4',
|
|
427
|
-
width: 100,
|
|
428
|
-
dataIndex: 'test4',
|
|
429
|
-
key: 'test4',
|
|
430
|
-
},
|
|
340
|
+
// {
|
|
341
|
+
// title: '测试4',
|
|
342
|
+
// width: 100,
|
|
343
|
+
// dataIndex: 'test4',
|
|
344
|
+
// key: 'test4',
|
|
345
|
+
// },
|
|
431
346
|
// {
|
|
432
347
|
// title: '测试5',
|
|
433
348
|
// // width: 100,
|
|
@@ -448,51 +363,65 @@ var EditableTable = function () {
|
|
|
448
363
|
// },
|
|
449
364
|
// ],
|
|
450
365
|
// },
|
|
451
|
-
{
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
},
|
|
457
|
-
{
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
},
|
|
463
|
-
{
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
},
|
|
469
|
-
{
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
},
|
|
475
|
-
{
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
},
|
|
366
|
+
// {
|
|
367
|
+
// title: '测试6',
|
|
368
|
+
// width: 100,
|
|
369
|
+
// dataIndex: 'test6',
|
|
370
|
+
// key: 'test6',
|
|
371
|
+
// },
|
|
372
|
+
// {
|
|
373
|
+
// title: '测试7',
|
|
374
|
+
// width: 100,
|
|
375
|
+
// dataIndex: 'test7',
|
|
376
|
+
// key: 'test7',
|
|
377
|
+
// },
|
|
378
|
+
// {
|
|
379
|
+
// title: '测试8',
|
|
380
|
+
// width: 100,
|
|
381
|
+
// dataIndex: 'test8',
|
|
382
|
+
// key: 'test8',
|
|
383
|
+
// },
|
|
384
|
+
// {
|
|
385
|
+
// title: '测试9',
|
|
386
|
+
// width: 100,
|
|
387
|
+
// dataIndex: 'test9',
|
|
388
|
+
// key: 'test9',
|
|
389
|
+
// },
|
|
390
|
+
// {
|
|
391
|
+
// title: '测试10',
|
|
392
|
+
// width: 100,
|
|
393
|
+
// dataIndex: 'test10',
|
|
394
|
+
// key: 'test10',
|
|
395
|
+
// },
|
|
481
396
|
];
|
|
397
|
+
// 初始化渲染，针对配置了editable、editableConfig的列配置
|
|
398
|
+
useEffect(function () {
|
|
399
|
+
setFirstRender(true);
|
|
400
|
+
}, []);
|
|
482
401
|
// 将表格最新数据赋值给ref引用
|
|
483
402
|
useEffect(function () {
|
|
484
403
|
recordsRef.current = records;
|
|
485
404
|
}, [records]);
|
|
405
|
+
// 表格数据改变相关
|
|
406
|
+
var onEditableSaveHandle = useCallback(function (record, index, _dataIndex) {
|
|
407
|
+
var _a;
|
|
408
|
+
if (_dataIndex === void 0) { _dataIndex = ''; }
|
|
409
|
+
if (typeof index === 'number') {
|
|
410
|
+
var newRecords = recordsRef.current.slice();
|
|
411
|
+
var item = newRecords[index];
|
|
412
|
+
newRecords.splice(index, 1, _dataIndex
|
|
413
|
+
? __assign(__assign(__assign({}, record), item), (_a = {}, _a[_dataIndex] = record[_dataIndex], _a)) : __assign(__assign({}, item), record));
|
|
414
|
+
setRecords(newRecords);
|
|
415
|
+
}
|
|
416
|
+
}, [setRecords]);
|
|
486
417
|
// 新增删除行
|
|
487
418
|
var onAddAndDelHandle = useCallback(function (type, index) {
|
|
488
419
|
var newRecords = recordsRef.current.slice();
|
|
489
420
|
if (type === 'add') {
|
|
490
421
|
var newItem = __assign(__assign({}, newRecords[index]), { _isNewData: true, id: Date.now() + "-" + index });
|
|
491
422
|
newRecords.splice(index + 1, 0, newItem);
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
setRecords(newRecords);
|
|
495
|
-
});
|
|
423
|
+
setLengthChange(true);
|
|
424
|
+
setRecords(newRecords);
|
|
496
425
|
}
|
|
497
426
|
else if (type === 'del') {
|
|
498
427
|
if (newRecords.length === 1) {
|
|
@@ -504,12 +433,10 @@ var EditableTable = function () {
|
|
|
504
433
|
else {
|
|
505
434
|
newRecords.splice(index, 1);
|
|
506
435
|
}
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
setRecords(newRecords);
|
|
510
|
-
});
|
|
436
|
+
setLengthChange(true);
|
|
437
|
+
setRecords(newRecords);
|
|
511
438
|
}
|
|
512
|
-
}, [setRecords
|
|
439
|
+
}, [setRecords]);
|
|
513
440
|
// 表格拖拽排序功能函数
|
|
514
441
|
var onMoveRowHandle = useCallback(function (dragIndex, hoverIndex) {
|
|
515
442
|
console.log(dragIndex, hoverIndex);
|
|
@@ -521,11 +448,9 @@ var EditableTable = function () {
|
|
|
521
448
|
[hoverIndex, 0, dragRow],
|
|
522
449
|
],
|
|
523
450
|
});
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
});
|
|
528
|
-
}, [setRecords, refreshScuCell]);
|
|
451
|
+
setMoveChange(true);
|
|
452
|
+
setRecords(newDataSource);
|
|
453
|
+
}, [setRecords]);
|
|
529
454
|
// 表格改变
|
|
530
455
|
var onTableChange = useCallback(function (changeRecords, startIndex) {
|
|
531
456
|
console.log(changeRecords);
|
|
@@ -600,15 +525,8 @@ var EditableTable = function () {
|
|
|
600
525
|
} }, "\u9A8C\u8BC1"),
|
|
601
526
|
React.createElement(Button, { onClick: function () {
|
|
602
527
|
console.log(records);
|
|
603
|
-
|
|
528
|
+
console.log(tableHandleRef.current.getColumns());
|
|
604
529
|
} }, "\u83B7\u53D6\u6570\u636E"),
|
|
605
|
-
React.createElement(Button, { onClick: function () {
|
|
606
|
-
setNum(num + 1);
|
|
607
|
-
setRecords(dataSource1);
|
|
608
|
-
// console.log(tableHandleRef.current.getColumns());
|
|
609
|
-
} },
|
|
610
|
-
"\u8BBE\u7F6E\u6570\u636E",
|
|
611
|
-
num),
|
|
612
530
|
React.createElement(Table, { dataSource: records, columns: columns, rowKey: "id",
|
|
613
531
|
// 表格项可输入
|
|
614
532
|
onEditableSave: onEditableSaveHandle,
|
|
@@ -619,12 +537,12 @@ var EditableTable = function () {
|
|
|
619
537
|
// tableValidate
|
|
620
538
|
tableHandleRef: tableHandleRef, tableName: "\u6211\u662F\u4E00\u4E2A\u8868\u683C",
|
|
621
539
|
// 显隐配置
|
|
622
|
-
configInfo: tableConfig,
|
|
623
|
-
// hiddenColumnDynamicIcon
|
|
624
|
-
showColumnDynamic: true, showColumnDynamicKey: "test-o-0011", onTableChange: onTableChange, showInnerPagination: true, defaultInnerPageSize: 10, expandable: {
|
|
540
|
+
configInfo: tableConfig, showColumnDynamic: true, showColumnDynamicKey: "test-o-0011", onTableChange: onTableChange, showInnerPagination: true, expandable: {
|
|
625
541
|
expandedRowRender: function (record) { return React.createElement("p", { style: { margin: 0 } }, "111"); },
|
|
626
542
|
rowExpandable: function (record) { return true; },
|
|
627
|
-
},
|
|
543
|
+
},
|
|
544
|
+
// scroll={{ x: 1000, y: 200 }}
|
|
545
|
+
showDelAllBtn: true, delAllChange: onDelAllChange, rowSelection: {
|
|
628
546
|
type: 'checkbox',
|
|
629
547
|
}, summaryConfig: [
|
|
630
548
|
{
|
package/dist/TableDemo/data.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export var dataSource = new Array(
|
|
1
|
+
export var dataSource = new Array(1).fill(1).map(function (item, index) {
|
|
2
2
|
return {
|
|
3
3
|
id: "test-" + index,
|
|
4
4
|
test1: "test1-" + index,
|
|
@@ -20,7 +20,7 @@ export var dataSource = new Array(50).fill(1).map(function (item, index) {
|
|
|
20
20
|
test10: "test10-" + index,
|
|
21
21
|
};
|
|
22
22
|
});
|
|
23
|
-
export var dataSource1 = new Array(
|
|
23
|
+
export var dataSource1 = new Array(1).fill(1).map(function (item, newIndex) {
|
|
24
24
|
var index = newIndex + 1;
|
|
25
25
|
return {
|
|
26
26
|
id: "test1-" + index,
|
|
@@ -344,8 +344,10 @@ function useColumns(props) {
|
|
|
344
344
|
}, [delAllChange, showDelAllBtn]);
|
|
345
345
|
// 增减行回调
|
|
346
346
|
var onAddAndDelHandleMemo = useCallback(function (type, index) {
|
|
347
|
-
|
|
348
|
-
|
|
347
|
+
unstable_batchedUpdates(function () {
|
|
348
|
+
var innerIndex = getInnerIndex(currentPage, index);
|
|
349
|
+
onAddAndDelHandle && onAddAndDelHandle(type, innerIndex);
|
|
350
|
+
});
|
|
349
351
|
},
|
|
350
352
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
351
353
|
[onAddAndDelHandle]);
|
|
@@ -96,6 +96,7 @@ var TableEnhanceCell = function (_a) {
|
|
|
96
96
|
// form?.setFieldsValue({ [dataIndex]: record[dataIndex] });
|
|
97
97
|
// form?.setFieldValue(dataIndex, record[dataIndex]);
|
|
98
98
|
setVal(record[dataIndex]);
|
|
99
|
+
valueRef.current[dataIndex] = record[dataIndex];
|
|
99
100
|
}
|
|
100
101
|
}, [dataIndex, record]);
|
|
101
102
|
/**
|
|
@@ -62,6 +62,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
|
|
|
62
62
|
return to;
|
|
63
63
|
};
|
|
64
64
|
import React, { useCallback, memo, useState, useEffect, useRef, useMemo, useImperativeHandle, } from 'react';
|
|
65
|
+
import { unstable_batchedUpdates } from 'react-dom';
|
|
65
66
|
import { Table as AntTable } from 'antd';
|
|
66
67
|
import { message } from '../../index';
|
|
67
68
|
import { ERROR_TD_CLASSNAME } from './';
|
|
@@ -307,7 +308,9 @@ function Table(props) {
|
|
|
307
308
|
if (innerDragIndex === innerHoverIndex) {
|
|
308
309
|
return;
|
|
309
310
|
}
|
|
310
|
-
|
|
311
|
+
unstable_batchedUpdates(function () {
|
|
312
|
+
onMoveRow && onMoveRow(innerDragIndex, innerHoverIndex);
|
|
313
|
+
});
|
|
311
314
|
// if (dataSource) {
|
|
312
315
|
// const dragRow = dataSource[dragIndex];
|
|
313
316
|
// const newDataSource = update(dataSource, {
|