@para-ui/core 4.0.87 → 4.0.88
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/Checkbox/index.d.ts +1 -0
- package/Checkbox/index.js +37 -12
- package/ComboSelect/index.js +3 -3
- package/DynamicMultiBox/index.js +3 -3
- package/Form/index.js +3 -3
- package/FormItem/index.js +3 -3
- package/OperateBtn/index.js +2 -2
- package/README.md +7 -0
- package/Radio/index.d.ts +1 -0
- package/Radio/index.js +31 -9
- package/Selector/index.js +280 -222
- package/SelectorPicker/index.js +2 -2
- package/Switch/index.js +2 -2
- package/Table/index.js +432 -496
- package/Tabs/index.js +2 -2
- package/Tree/index.js +2 -2
- package/index.js +2 -2
- package/package.json +1 -1
- package/umd/Checkbox.js +1 -1
- package/umd/CheckboxGroup.js +1 -1
- package/umd/ComboSelect.js +1 -1
- package/umd/DynamicMultiBox.js +1 -1
- package/umd/Form.js +3 -3
- package/umd/FormItem.js +1 -1
- package/umd/QuickReply.js +1 -1
- package/umd/Radio.js +3 -3
- package/umd/RadioGroup.js +1 -1
- package/umd/Selector.js +3 -3
- package/umd/SelectorPicker.js +1 -1
- package/umd/Table.js +1 -1
- package/umd/Tabs.js +1 -1
- package/umd/Tree.js +1 -1
- /package/_verture/{index-0fafedf4.js → index-32a8f7db.js} +0 -0
- /package/_verture/{index-dfb6ceb9.js → index-62845506.js} +0 -0
package/Table/index.js
CHANGED
|
@@ -2,8 +2,6 @@ import { _ as __rest, a as __awaiter } from '../_verture/tslib.es6-55ed4bd2.js';
|
|
|
2
2
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import { useRef, useState, useEffect, useMemo, useCallback, Fragment as Fragment$1 } from 'react';
|
|
4
4
|
import { Get, Post, DeepClone, GetBrowserClass, Cancel, ArrayToObject, UUID } from '@paraview/lib';
|
|
5
|
-
import { _ as _typeof, a as _defineProperty } from '../_verture/defineProperty-f0e15205.js';
|
|
6
|
-
import { _ as _slicedToArray } from '../_verture/slicedToArray-61604a6c.js';
|
|
7
5
|
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
|
|
8
6
|
import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
|
|
9
7
|
import { Popover } from '../Popover/index.js';
|
|
@@ -66,23 +64,25 @@ import '@para-ui/icons/DoubleRight';
|
|
|
66
64
|
* 发送请求
|
|
67
65
|
* @param obj {ReqProps} 请求信息
|
|
68
66
|
*/
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
67
|
+
const requestFunc = obj => {
|
|
68
|
+
const {
|
|
69
|
+
method,
|
|
70
|
+
url,
|
|
71
|
+
ctx,
|
|
72
|
+
data
|
|
73
|
+
} = obj,
|
|
74
74
|
otherProps = __rest(obj, ["method", "url", "ctx", "data"]);
|
|
75
75
|
if (method === 'Get') {
|
|
76
76
|
return Get(Object.assign({
|
|
77
77
|
url: url,
|
|
78
|
-
ctx
|
|
78
|
+
ctx
|
|
79
79
|
}, otherProps));
|
|
80
80
|
}
|
|
81
81
|
if (method === 'Post') {
|
|
82
82
|
return Post(Object.assign({
|
|
83
83
|
url: url,
|
|
84
|
-
ctx
|
|
85
|
-
data
|
|
84
|
+
ctx,
|
|
85
|
+
data
|
|
86
86
|
}, otherProps));
|
|
87
87
|
}
|
|
88
88
|
};
|
|
@@ -91,23 +91,23 @@ var requestFunc = function requestFunc(obj) {
|
|
|
91
91
|
* @param obj {ReqProps} 请求信息
|
|
92
92
|
* @return string get请求地址参数
|
|
93
93
|
*/
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
for (
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
if (
|
|
94
|
+
const handGetReqParams = obj => {
|
|
95
|
+
let str = obj.url;
|
|
96
|
+
const params = obj.data || {};
|
|
97
|
+
const arrKey = Object.keys(params);
|
|
98
|
+
const paramsArr = [];
|
|
99
|
+
for (let i = 0, l = arrKey.length; i < l; i++) {
|
|
100
|
+
const key = arrKey[i];
|
|
101
|
+
let val = params[key];
|
|
102
|
+
if (typeof val === 'object') {
|
|
103
103
|
val = encodeURIComponent(JSON.stringify(val));
|
|
104
104
|
} else {
|
|
105
105
|
val = encodeURIComponent(val);
|
|
106
106
|
}
|
|
107
107
|
paramsArr.push("".concat(key, "=").concat(val));
|
|
108
108
|
}
|
|
109
|
-
|
|
110
|
-
|
|
109
|
+
const paramsStr = paramsArr.join('&');
|
|
110
|
+
const pos = str.indexOf('?');
|
|
111
111
|
if (pos !== -1) {
|
|
112
112
|
str += (pos === str.length - 1 ? '' : '&') + paramsStr;
|
|
113
113
|
} else {
|
|
@@ -118,9 +118,9 @@ var handGetReqParams = function handGetReqParams(obj) {
|
|
|
118
118
|
/**
|
|
119
119
|
* 提取字符串里面的数字
|
|
120
120
|
* */
|
|
121
|
-
|
|
121
|
+
const getStringInNumber = str => {
|
|
122
122
|
if (typeof str === 'number') return str;
|
|
123
|
-
|
|
123
|
+
const strHand = str.replace(/[^0-9$]/gi, '');
|
|
124
124
|
return Number(strHand);
|
|
125
125
|
};
|
|
126
126
|
/**
|
|
@@ -128,23 +128,23 @@ var getStringInNumber = function getStringInNumber(str) {
|
|
|
128
128
|
* @param key {string} 键值
|
|
129
129
|
* @param num {number} 过期天数
|
|
130
130
|
* */
|
|
131
|
-
|
|
131
|
+
const getLocalStorageSelectHead = (key, num) => {
|
|
132
132
|
//debugger
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
for (
|
|
137
|
-
|
|
138
|
-
|
|
133
|
+
const headJsonStr = window.localStorage.getItem('_paraui_table_head') || '{}';
|
|
134
|
+
const headJson = JSON.parse(headJsonStr);
|
|
135
|
+
const headJsonArr = Object.keys(headJson);
|
|
136
|
+
for (let i = 0, l = headJsonArr.length; i < l; i++) {
|
|
137
|
+
const keyStr = headJsonArr[i];
|
|
138
|
+
const item = headJson[i];
|
|
139
139
|
if (!item) continue;
|
|
140
|
-
|
|
141
|
-
|
|
140
|
+
const newDate = new Date().getTime(); // 当前时间
|
|
141
|
+
const endTime = item.storageTime + item.validity; // 过期时间
|
|
142
142
|
// 过期时间 小于 当前时间, 说明已经过期了, 删除当前表格列数据
|
|
143
143
|
if (endTime < newDate) {
|
|
144
144
|
delete headJson[keyStr];
|
|
145
145
|
}
|
|
146
146
|
}
|
|
147
|
-
|
|
147
|
+
const headJsonItem = headJson[key];
|
|
148
148
|
// 重置过期时间
|
|
149
149
|
if (headJsonItem) {
|
|
150
150
|
headJsonItem.storageTime = new Date().getTime();
|
|
@@ -157,9 +157,9 @@ var getLocalStorageSelectHead = function getLocalStorageSelectHead(key, num) {
|
|
|
157
157
|
* @param key {string} 键值
|
|
158
158
|
* @param val {HeadLocalStorageItem} 保存值
|
|
159
159
|
* */
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
160
|
+
const setLocalStorageSelectHead = (key, val) => {
|
|
161
|
+
const headJsonStr = window.localStorage.getItem('_paraui_table_head') || '{}';
|
|
162
|
+
const headJson = JSON.parse(headJsonStr);
|
|
163
163
|
headJson[key] = val;
|
|
164
164
|
window.localStorage.setItem('_paraui_table_head', JSON.stringify(headJson));
|
|
165
165
|
};
|
|
@@ -168,8 +168,8 @@ var setLocalStorageSelectHead = function setLocalStorageSelectHead(key, val) {
|
|
|
168
168
|
* @param el 当前元素
|
|
169
169
|
* @param selector 查找元素class
|
|
170
170
|
*/
|
|
171
|
-
|
|
172
|
-
|
|
171
|
+
const closest = (el, selector) => {
|
|
172
|
+
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
|
|
173
173
|
while (el) {
|
|
174
174
|
if (matchesSelector.call(el, selector)) {
|
|
175
175
|
break;
|
|
@@ -365,70 +365,50 @@ var zh = {
|
|
|
365
365
|
};
|
|
366
366
|
|
|
367
367
|
var localeJson = {
|
|
368
|
-
zh
|
|
369
|
-
en
|
|
368
|
+
zh,
|
|
369
|
+
en
|
|
370
370
|
};
|
|
371
371
|
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
headData =
|
|
375
|
-
sortTable
|
|
376
|
-
filter
|
|
377
|
-
expandable
|
|
378
|
-
check
|
|
379
|
-
radio
|
|
380
|
-
onRequestSort
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
checked = _useState4[0],
|
|
413
|
-
setChecked = _useState4[1]; // 选中
|
|
414
|
-
var _useState5 = useState(null),
|
|
415
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
416
|
-
anchorElColums = _useState6[0],
|
|
417
|
-
setAnchorElColums = _useState6[1]; // 显示列定位元素
|
|
418
|
-
var _useState7 = useState({}),
|
|
419
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
420
|
-
headDataJson = _useState8[0],
|
|
421
|
-
setHeadDataJson = _useState8[1]; // 显示列json
|
|
422
|
-
var _useState9 = useState({}),
|
|
423
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
424
|
-
filterHead = _useState10[0],
|
|
425
|
-
setFilterHead = _useState10[1]; // 过滤项当前表头数据
|
|
426
|
-
var _useState11 = useState({}),
|
|
427
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
428
|
-
selectFilterCom = _useState12[0],
|
|
429
|
-
setSelectFilterCom = _useState12[1]; // 过滤项当前选中值
|
|
430
|
-
var intl = useFormatMessage('Table', localeJson);
|
|
431
|
-
useEffect(function () {
|
|
372
|
+
const TableHead$1 = props => {
|
|
373
|
+
const {
|
|
374
|
+
headData = [],
|
|
375
|
+
sortTable,
|
|
376
|
+
filter,
|
|
377
|
+
expandable,
|
|
378
|
+
check,
|
|
379
|
+
radio,
|
|
380
|
+
onRequestSort,
|
|
381
|
+
orderFieldArr = [],
|
|
382
|
+
orderTypeArr = [],
|
|
383
|
+
selectAll,
|
|
384
|
+
selectStatus,
|
|
385
|
+
align,
|
|
386
|
+
showList = [],
|
|
387
|
+
changeShowList,
|
|
388
|
+
selectFilter,
|
|
389
|
+
changeFilter,
|
|
390
|
+
operate,
|
|
391
|
+
showColumns,
|
|
392
|
+
fixedTable,
|
|
393
|
+
fixedColumn,
|
|
394
|
+
posFixed,
|
|
395
|
+
beyondText,
|
|
396
|
+
lineWidth,
|
|
397
|
+
dragColumn,
|
|
398
|
+
dragRow,
|
|
399
|
+
changeColumnWidth,
|
|
400
|
+
headDataConfig,
|
|
401
|
+
getPopupContainer,
|
|
402
|
+
tipMaxWidth
|
|
403
|
+
} = props;
|
|
404
|
+
const [indeterminate, setIndeterminate] = useState(false); // 半选中
|
|
405
|
+
const [checked, setChecked] = useState(false); // 选中
|
|
406
|
+
const [anchorElColums, setAnchorElColums] = useState(null); // 显示列定位元素
|
|
407
|
+
const [headDataJson, setHeadDataJson] = useState({}); // 显示列json
|
|
408
|
+
const [filterHead, setFilterHead] = useState({}); // 过滤项当前表头数据
|
|
409
|
+
const [selectFilterCom, setSelectFilterCom] = useState({}); // 过滤项当前选中值
|
|
410
|
+
const intl = useFormatMessage('Table', localeJson);
|
|
411
|
+
useEffect(() => {
|
|
432
412
|
// 全选
|
|
433
413
|
if (selectStatus === 'all') {
|
|
434
414
|
setChecked(true);
|
|
@@ -445,17 +425,17 @@ var TableHead$1 = function TableHead(props) {
|
|
|
445
425
|
setIndeterminate(false);
|
|
446
426
|
}
|
|
447
427
|
}, [selectStatus]);
|
|
448
|
-
useEffect(
|
|
428
|
+
useEffect(() => {
|
|
449
429
|
if (headData) {
|
|
450
|
-
|
|
451
|
-
for (
|
|
452
|
-
|
|
430
|
+
const json = [];
|
|
431
|
+
for (let i = 0, l = headData.length; i < l; i++) {
|
|
432
|
+
const item = headData[i];
|
|
453
433
|
json[item.name] = item;
|
|
454
434
|
}
|
|
455
435
|
setHeadDataJson(json);
|
|
456
436
|
}
|
|
457
437
|
}, [headData]);
|
|
458
|
-
useEffect(
|
|
438
|
+
useEffect(() => {
|
|
459
439
|
if (selectFilter) setSelectFilterCom(DeepClone(selectFilter));
|
|
460
440
|
}, [selectFilter]);
|
|
461
441
|
/**
|
|
@@ -463,30 +443,28 @@ var TableHead$1 = function TableHead(props) {
|
|
|
463
443
|
* @param name 排序列
|
|
464
444
|
* @param event 当前排序元素
|
|
465
445
|
*/
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
if (onRequestSort) onRequestSort(event, name);
|
|
471
|
-
};
|
|
446
|
+
const createSortHandler = (name, item) => event => {
|
|
447
|
+
// 不存在排序,不触发事件
|
|
448
|
+
if (!(sortTable && item.name && item.sort !== false)) return;
|
|
449
|
+
if (onRequestSort) onRequestSort(event, name);
|
|
472
450
|
};
|
|
473
451
|
/**
|
|
474
452
|
* 全选 / 全不选
|
|
475
453
|
* @param event 操作元素
|
|
476
454
|
* @param bol 选中 / 不选中
|
|
477
455
|
*/
|
|
478
|
-
|
|
456
|
+
const onSelectAll = (event, bol) => {
|
|
479
457
|
if (selectAll) selectAll(event, bol);
|
|
480
458
|
};
|
|
481
459
|
/**
|
|
482
460
|
* 点击显示选择列
|
|
483
461
|
* @param event 点击元素
|
|
484
462
|
*/
|
|
485
|
-
|
|
463
|
+
const clickShowColums = event => {
|
|
486
464
|
setAnchorElColums(event.currentTarget);
|
|
487
465
|
};
|
|
488
466
|
// 点击隐藏选择列
|
|
489
|
-
|
|
467
|
+
const clickHideColums = bol => {
|
|
490
468
|
if (bol) return;
|
|
491
469
|
setAnchorElColums(null);
|
|
492
470
|
};
|
|
@@ -494,29 +472,27 @@ var TableHead$1 = function TableHead(props) {
|
|
|
494
472
|
* 点击显示列 列表
|
|
495
473
|
* @param item 详细
|
|
496
474
|
*/
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
arr1.push(headDataJson[_name]);
|
|
510
|
-
}
|
|
511
|
-
changeShowList && changeShowList(arr1, false, item);
|
|
512
|
-
} else {
|
|
513
|
-
headData.push(item);
|
|
514
|
-
changeShowList && changeShowList(headData, false, item);
|
|
475
|
+
const clickColumsList = item => () => {
|
|
476
|
+
if (item.disabledSelection) return;
|
|
477
|
+
const name = item.name;
|
|
478
|
+
const itemHead = headDataJson[name];
|
|
479
|
+
if (itemHead) {
|
|
480
|
+
// 取消勾选
|
|
481
|
+
delete headDataJson[name];
|
|
482
|
+
const arr = Object.keys(headDataJson);
|
|
483
|
+
const arr1 = [];
|
|
484
|
+
for (let i = 0, l = arr.length; i < l; i++) {
|
|
485
|
+
const name = arr[i];
|
|
486
|
+
arr1.push(headDataJson[name]);
|
|
515
487
|
}
|
|
516
|
-
|
|
488
|
+
changeShowList && changeShowList(arr1, false, item);
|
|
489
|
+
} else {
|
|
490
|
+
headData.push(item);
|
|
491
|
+
changeShowList && changeShowList(headData, false, item);
|
|
492
|
+
}
|
|
517
493
|
};
|
|
518
494
|
// 重置显示列
|
|
519
|
-
|
|
495
|
+
const resetShowList = () => {
|
|
520
496
|
changeShowList && changeShowList(headData, true);
|
|
521
497
|
};
|
|
522
498
|
/**
|
|
@@ -524,69 +500,63 @@ var TableHead$1 = function TableHead(props) {
|
|
|
524
500
|
* @param headCell 当前列信息
|
|
525
501
|
* @param event 元素
|
|
526
502
|
*/
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
setSelectFilterCom(Object.assign({}, selectFilter));
|
|
531
|
-
};
|
|
503
|
+
const clickShowFilter = headCell => event => {
|
|
504
|
+
setFilterHead(headCell);
|
|
505
|
+
setSelectFilterCom(Object.assign({}, selectFilter));
|
|
532
506
|
};
|
|
533
507
|
// 点击隐藏过滤
|
|
534
|
-
|
|
508
|
+
const clickHideFilter = bol => {
|
|
535
509
|
if (bol) return;
|
|
536
510
|
setFilterHead({});
|
|
537
511
|
setSelectFilterCom(Object.assign({}, selectFilter));
|
|
538
512
|
};
|
|
539
513
|
// 点击过滤
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
filterValue = [filterValue[num]];
|
|
558
|
-
}
|
|
514
|
+
const clickFilter = item => () => {
|
|
515
|
+
const name = filterHead.name;
|
|
516
|
+
let filterValue = DeepClone(selectFilterCom[name] || []);
|
|
517
|
+
const index = filterValue.indexOf(item.value);
|
|
518
|
+
if (index !== -1) {
|
|
519
|
+
// 勾选 -> 不勾选
|
|
520
|
+
filterValue.splice(index, 1);
|
|
521
|
+
} else {
|
|
522
|
+
// 不勾选 -> 勾选
|
|
523
|
+
filterValue.push(item.value);
|
|
524
|
+
}
|
|
525
|
+
const filterRadio = filterHead.filterRadio;
|
|
526
|
+
if (filterRadio) {
|
|
527
|
+
// 过滤单个
|
|
528
|
+
const num = filterValue.indexOf(item.value);
|
|
529
|
+
if (num !== -1) {
|
|
530
|
+
filterValue = [filterValue[num]];
|
|
559
531
|
}
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
};
|
|
532
|
+
}
|
|
533
|
+
selectFilterCom[name] = filterValue;
|
|
534
|
+
setSelectFilterCom(Object.assign({}, selectFilterCom));
|
|
563
535
|
};
|
|
564
536
|
/**
|
|
565
537
|
* 重置 / 确定过滤
|
|
566
538
|
* @param type {'reset' | 'confirm'} 重置 / 确定过滤
|
|
567
539
|
*/
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
}
|
|
582
|
-
};
|
|
540
|
+
const filterFunc = type => () => {
|
|
541
|
+
if (type === 'confirm') {
|
|
542
|
+
// 确定
|
|
543
|
+
changeFilter && changeFilter(Object.assign({}, selectFilterCom));
|
|
544
|
+
setFilterHead({});
|
|
545
|
+
} else {
|
|
546
|
+
// 重置
|
|
547
|
+
const json = DeepClone(selectFilterCom);
|
|
548
|
+
delete json[filterHead.name];
|
|
549
|
+
setSelectFilterCom(json);
|
|
550
|
+
changeFilter && changeFilter(Object.assign({}, json));
|
|
551
|
+
setFilterHead({});
|
|
552
|
+
}
|
|
583
553
|
};
|
|
584
554
|
/**
|
|
585
555
|
* 自定义过滤确定
|
|
586
556
|
* @param val {[name: string]: any[]}
|
|
587
557
|
* */
|
|
588
|
-
|
|
589
|
-
|
|
558
|
+
const filterCustomConfirm = function () {
|
|
559
|
+
let val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
590
560
|
changeFilter && changeFilter(Object.assign({}, val));
|
|
591
561
|
setFilterHead({});
|
|
592
562
|
};
|
|
@@ -594,12 +564,12 @@ var TableHead$1 = function TableHead(props) {
|
|
|
594
564
|
* 处理TableCell
|
|
595
565
|
* @param item 当前列信息
|
|
596
566
|
*/
|
|
597
|
-
|
|
598
|
-
|
|
567
|
+
const handCellClass = item => {
|
|
568
|
+
let str = 'table-header-box';
|
|
599
569
|
// 排序
|
|
600
570
|
if (sortTable && item.name && item.sort !== false) {
|
|
601
571
|
str += ' table-header-box-sort';
|
|
602
|
-
|
|
572
|
+
const index = orderFieldArr.indexOf(item.name);
|
|
603
573
|
if (index !== -1) {
|
|
604
574
|
// 升序
|
|
605
575
|
if (orderTypeArr[index] === 'asc') {
|
|
@@ -618,10 +588,10 @@ var TableHead$1 = function TableHead(props) {
|
|
|
618
588
|
return str;
|
|
619
589
|
};
|
|
620
590
|
// 复选框memo
|
|
621
|
-
|
|
591
|
+
const TableCheckMemo = useMemo(() => {
|
|
622
592
|
if (check) {
|
|
623
|
-
|
|
624
|
-
|
|
593
|
+
const handCls = () => {
|
|
594
|
+
let str = 'table-checkbox table-head-btn';
|
|
625
595
|
if (fixedColumn) {
|
|
626
596
|
str += ' table-fixed-dom-left';
|
|
627
597
|
// 左边没有定位,且没有单选,没有嵌套表格
|
|
@@ -649,10 +619,10 @@ var TableHead$1 = function TableHead(props) {
|
|
|
649
619
|
}
|
|
650
620
|
}, [check, indeterminate, checked, selectAll, posFixed, radio, expandable, fixedColumn]);
|
|
651
621
|
// 单选框memo
|
|
652
|
-
|
|
622
|
+
const TableRadioMemo = useMemo(() => {
|
|
653
623
|
if (radio) {
|
|
654
|
-
|
|
655
|
-
|
|
624
|
+
const handCls = () => {
|
|
625
|
+
let str = 'table-radio table-head-btn';
|
|
656
626
|
if (fixedColumn) {
|
|
657
627
|
str += ' table-fixed-dom-left';
|
|
658
628
|
// 左边没有定位,没有嵌套表格
|
|
@@ -674,10 +644,10 @@ var TableHead$1 = function TableHead(props) {
|
|
|
674
644
|
}
|
|
675
645
|
}, [radio, posFixed, expandable, fixedColumn]);
|
|
676
646
|
// 嵌套表格memo
|
|
677
|
-
|
|
647
|
+
const TableExpandableMemo = useMemo(() => {
|
|
678
648
|
if (expandable) {
|
|
679
|
-
|
|
680
|
-
|
|
649
|
+
const handCls = () => {
|
|
650
|
+
let str = 'table-expandable table-head-btn';
|
|
681
651
|
if (fixedColumn) {
|
|
682
652
|
str += ' table-fixed-dom-left';
|
|
683
653
|
// 左边没有定位,没有嵌套表格
|
|
@@ -699,21 +669,21 @@ var TableHead$1 = function TableHead(props) {
|
|
|
699
669
|
}
|
|
700
670
|
}, [expandable, posFixed, fixedColumn]);
|
|
701
671
|
// 过滤弹窗内容
|
|
702
|
-
|
|
703
|
-
|
|
672
|
+
const filterPopoverContent = () => {
|
|
673
|
+
const name = filterHead.name;
|
|
704
674
|
if (!name) return;
|
|
705
|
-
|
|
675
|
+
const filterValue = selectFilterCom[name] || [];
|
|
706
676
|
if (filterHead.filterRender) {
|
|
707
677
|
// 自定义渲染过滤
|
|
708
678
|
return filterHead.filterRender({
|
|
709
|
-
filterValue
|
|
679
|
+
filterValue,
|
|
710
680
|
selectFilter: selectFilterCom,
|
|
711
|
-
filterHead
|
|
681
|
+
filterHead,
|
|
712
682
|
setFilter: filterCustomConfirm
|
|
713
683
|
});
|
|
714
684
|
}
|
|
715
|
-
|
|
716
|
-
|
|
685
|
+
const arr = filterHead.enums || [];
|
|
686
|
+
let str = 'filter-select';
|
|
717
687
|
if (arr.length === 0) str += ' filter-select-none';
|
|
718
688
|
return jsx("div", Object.assign({
|
|
719
689
|
className: str
|
|
@@ -728,8 +698,8 @@ var TableHead$1 = function TableHead(props) {
|
|
|
728
698
|
children: [jsx("div", Object.assign({
|
|
729
699
|
className: "filter-select-box"
|
|
730
700
|
}, {
|
|
731
|
-
children: arr.map(
|
|
732
|
-
|
|
701
|
+
children: arr.map((item, index) => {
|
|
702
|
+
const checked = filterValue.indexOf(item.value) !== -1;
|
|
733
703
|
return jsxs("div", Object.assign({
|
|
734
704
|
onClick: clickFilter(item),
|
|
735
705
|
className: checked ? 'filter-select-item filter-select-item-select' : 'filter-select-item'
|
|
@@ -768,30 +738,28 @@ var TableHead$1 = function TableHead(props) {
|
|
|
768
738
|
}));
|
|
769
739
|
};
|
|
770
740
|
// 表格列拖拽放下
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
changeColumnWidth && changeColumnWidth(headCell, result);
|
|
774
|
-
};
|
|
741
|
+
const onDragDown = headCell => result => {
|
|
742
|
+
changeColumnWidth && changeColumnWidth(headCell, result);
|
|
775
743
|
};
|
|
776
744
|
// 获取宽度
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
745
|
+
const getWidth = item => {
|
|
746
|
+
let w = item.width || '';
|
|
747
|
+
const name = item.name || '';
|
|
748
|
+
const wDrag = headDataConfig[name] && headDataConfig[name].width;
|
|
781
749
|
if (wDrag) w = "".concat(wDrag, "px");
|
|
782
750
|
return w;
|
|
783
751
|
};
|
|
784
752
|
// 内容列memo
|
|
785
|
-
|
|
753
|
+
const TableContentMemo = useMemo(() => {
|
|
786
754
|
// 处理过滤的class
|
|
787
|
-
|
|
788
|
-
|
|
755
|
+
const handFilterClass = item => {
|
|
756
|
+
let str = 'table-header-filter';
|
|
789
757
|
if (filterHead.name === item.name) str += ' table-header-filter-show';
|
|
790
758
|
if (item.name && selectFilterCom[item.name] && selectFilterCom[item.name].length > 0) str += ' table-header-filter-select';
|
|
791
759
|
return str;
|
|
792
760
|
};
|
|
793
|
-
|
|
794
|
-
|
|
761
|
+
const handCls = item => {
|
|
762
|
+
let str = '';
|
|
795
763
|
if (item.className) str += item.className;
|
|
796
764
|
if (fixedColumn && item.fixed) {
|
|
797
765
|
str += " table-fixed-dom-".concat(item.fixed);
|
|
@@ -806,8 +774,8 @@ var TableHead$1 = function TableHead(props) {
|
|
|
806
774
|
}
|
|
807
775
|
return str;
|
|
808
776
|
};
|
|
809
|
-
|
|
810
|
-
|
|
777
|
+
const handStyle = item => {
|
|
778
|
+
const json = {
|
|
811
779
|
width: getWidth(item)
|
|
812
780
|
};
|
|
813
781
|
if (fixedColumn && item.fixed && item.width) {
|
|
@@ -821,13 +789,13 @@ var TableHead$1 = function TableHead(props) {
|
|
|
821
789
|
return Object.assign(Object.assign({}, json), item.style);
|
|
822
790
|
};
|
|
823
791
|
// 处理拖拽
|
|
824
|
-
|
|
792
|
+
const handDrag = item => {
|
|
825
793
|
if (item.name === 'table-serial-number') return false; // 序号不拖拽
|
|
826
794
|
if (dragColumn && item.drag !== false) return true;
|
|
827
795
|
return false;
|
|
828
796
|
};
|
|
829
|
-
return headData.map(
|
|
830
|
-
|
|
797
|
+
return headData.map((headCell, index) => {
|
|
798
|
+
let str = "".concat($prefixCls, "-filter-popover ").concat($prefixCls, "-scrollbar-small");
|
|
831
799
|
if (!headCell.filterRender) str += " ".concat($prefixCls, "-filter-popover-default");
|
|
832
800
|
return jsx(ThElement, Object.assign({
|
|
833
801
|
className: handCls(headCell),
|
|
@@ -847,9 +815,7 @@ var TableHead$1 = function TableHead(props) {
|
|
|
847
815
|
content: headCell.name !== undefined && filterHead.name === headCell.name && filterPopoverContent(),
|
|
848
816
|
onVisibleChange: clickHideFilter,
|
|
849
817
|
overlayClassName: str,
|
|
850
|
-
getPopupContainer: getPopupContainer ? getPopupContainer :
|
|
851
|
-
return document.body;
|
|
852
|
-
},
|
|
818
|
+
getPopupContainer: getPopupContainer ? getPopupContainer : () => document.body,
|
|
853
819
|
maxWidth: headCell.filterMaxWidth
|
|
854
820
|
}, {
|
|
855
821
|
children: jsxs("div", Object.assign({
|
|
@@ -894,10 +860,10 @@ var TableHead$1 = function TableHead(props) {
|
|
|
894
860
|
});
|
|
895
861
|
}, [headData, sortTable, filter, orderFieldArr, orderTypeArr, align, filterHead, selectFilterCom, beyondText, selectFilter, fixedColumn, lineWidth, dragColumn, changeColumnWidth, headDataConfig, getPopupContainer, tipMaxWidth]);
|
|
896
862
|
// 操作栏memo
|
|
897
|
-
|
|
863
|
+
const TableOperateMemo = useMemo(() => {
|
|
898
864
|
if (operate) {
|
|
899
|
-
|
|
900
|
-
|
|
865
|
+
const handCls = () => {
|
|
866
|
+
let str = 'table-operate';
|
|
901
867
|
if (operate.operateBtnRender) str += ' table-operate-small';
|
|
902
868
|
if (showColumns === false) str += ' table-operate-not-columns';
|
|
903
869
|
if (dragRow) str += ' table-operate-drag-row';
|
|
@@ -910,8 +876,8 @@ var TableHead$1 = function TableHead(props) {
|
|
|
910
876
|
}
|
|
911
877
|
return str;
|
|
912
878
|
};
|
|
913
|
-
|
|
914
|
-
|
|
879
|
+
const handStyle = () => {
|
|
880
|
+
const json = {
|
|
915
881
|
width: operate.width
|
|
916
882
|
};
|
|
917
883
|
if (fixedColumn) {
|
|
@@ -947,16 +913,16 @@ var TableHead$1 = function TableHead(props) {
|
|
|
947
913
|
}
|
|
948
914
|
}, [operate, align, posFixed, showColumns, posFixed, beyondText, fixedColumn, tipMaxWidth, dragRow]);
|
|
949
915
|
// 显示列弹窗内容
|
|
950
|
-
|
|
916
|
+
const showListContent = () => {
|
|
951
917
|
return jsxs("div", Object.assign({
|
|
952
918
|
className: "show-colums-select"
|
|
953
919
|
}, {
|
|
954
920
|
children: [jsx("div", Object.assign({
|
|
955
921
|
className: "show-colums-select-box"
|
|
956
922
|
}, {
|
|
957
|
-
children: showList.map(
|
|
958
|
-
|
|
959
|
-
|
|
923
|
+
children: showList.map((item, index) => {
|
|
924
|
+
const checked = Boolean(headDataJson[item.name]);
|
|
925
|
+
let str = 'show-colums-select-item';
|
|
960
926
|
if (checked) str += ' show-colums-select-item-select';
|
|
961
927
|
if (item.disabledSelection) str += ' show-colums-select-item-disabled';
|
|
962
928
|
return jsxs("div", Object.assign({
|
|
@@ -990,9 +956,9 @@ var TableHead$1 = function TableHead(props) {
|
|
|
990
956
|
}));
|
|
991
957
|
};
|
|
992
958
|
// 显示列memo
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
959
|
+
const TableShowList = useMemo(() => {
|
|
960
|
+
const handCls = () => {
|
|
961
|
+
let str = 'show-colums table-fixed-dom-right';
|
|
996
962
|
// 没有固定列参数 或者 没有操作栏且没有右侧固定列
|
|
997
963
|
if (!fixedColumn || !operate && !(posFixed === null || posFixed === void 0 ? void 0 : posFixed.rightBol)) {
|
|
998
964
|
str += ' table-fixed-dom-right-first';
|
|
@@ -1005,9 +971,7 @@ var TableHead$1 = function TableHead(props) {
|
|
|
1005
971
|
content: showListContent(),
|
|
1006
972
|
onVisibleChange: clickHideColums,
|
|
1007
973
|
overlayClassName: "".concat($prefixCls, "-table-show-colums-popover ").concat($prefixCls, "-scrollbar-small"),
|
|
1008
|
-
getPopupContainer: getPopupContainer ? getPopupContainer :
|
|
1009
|
-
return document.body;
|
|
1010
|
-
}
|
|
974
|
+
getPopupContainer: getPopupContainer ? getPopupContainer : () => document.body
|
|
1011
975
|
}, {
|
|
1012
976
|
children: jsx(ThElement, Object.assign({
|
|
1013
977
|
align: "center",
|
|
@@ -1024,10 +988,10 @@ var TableHead$1 = function TableHead(props) {
|
|
|
1024
988
|
}));
|
|
1025
989
|
}, [showColumns, posFixed, operate, anchorElColums, showList, headDataJson, getPopupContainer, tipMaxWidth]);
|
|
1026
990
|
// 拖动行
|
|
1027
|
-
|
|
991
|
+
const TbaleDragRow = useMemo(() => {
|
|
1028
992
|
if (!dragRow || operate || showColumns === 'inside') return null;
|
|
1029
|
-
|
|
1030
|
-
|
|
993
|
+
const handCls = () => {
|
|
994
|
+
let str = 'drag-row table-fixed-dom-right';
|
|
1031
995
|
// 没有固定列参数 或者 没有操作栏且没有右侧固定列
|
|
1032
996
|
if (!fixedColumn || !operate && !(posFixed === null || posFixed === void 0 ? void 0 : posFixed.rightBol)) {
|
|
1033
997
|
str += ' table-fixed-dom-right-first';
|
|
@@ -1041,8 +1005,8 @@ var TableHead$1 = function TableHead(props) {
|
|
|
1041
1005
|
});
|
|
1042
1006
|
}, [operate, showColumns, fixedColumn, posFixed, dragRow]);
|
|
1043
1007
|
// 处理class
|
|
1044
|
-
|
|
1045
|
-
|
|
1008
|
+
const handClass = () => {
|
|
1009
|
+
let str = 'table-head';
|
|
1046
1010
|
if (showColumns === 'inside') str += ' table-head-inside';
|
|
1047
1011
|
if (!fixedTable) str += ' table-head-scroll'; // 防止长度过长
|
|
1048
1012
|
// 没有 复选框,单选框,展开 按钮
|
|
@@ -1120,100 +1084,76 @@ var TdElement = function TdElement(props) {
|
|
|
1120
1084
|
}));
|
|
1121
1085
|
};
|
|
1122
1086
|
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
rowData =
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
onDragRow = props.onDragRow,
|
|
1182
|
-
virtualIndex = props.virtualIndex,
|
|
1183
|
-
virtual = props.virtual;
|
|
1184
|
-
var _useState = useState(0),
|
|
1185
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
1186
|
-
expandableColSpan = _useState2[0],
|
|
1187
|
-
setExpandableColSpan = _useState2[1]; // 嵌套表格合并列数
|
|
1188
|
-
var _useState3 = useState({}),
|
|
1189
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
1190
|
-
expandableRow = _useState4[0],
|
|
1191
|
-
setExpandableRow = _useState4[1]; // 当前哪行展开表格嵌套
|
|
1192
|
-
var _useState5 = useState(true),
|
|
1193
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
1194
|
-
showMoreBtn = _useState6[0],
|
|
1195
|
-
setShowMoreBtn = _useState6[1]; // 加载更多
|
|
1196
|
-
var _useState7 = useState({}),
|
|
1197
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
1198
|
-
disabledExpandJson = _useState8[0],
|
|
1199
|
-
setDisabledExpand = _useState8[1]; // 禁用加减部分嵌套
|
|
1200
|
-
var _useState9 = useState(false),
|
|
1201
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
1202
|
-
dragBol = _useState10[0],
|
|
1203
|
-
setDragBol = _useState10[1];
|
|
1204
|
-
var intl = useFormatMessage('Table', localeJson);
|
|
1087
|
+
const TableBody = props => {
|
|
1088
|
+
const {
|
|
1089
|
+
url,
|
|
1090
|
+
emptyProps,
|
|
1091
|
+
rowData = [],
|
|
1092
|
+
rowKey = 'key',
|
|
1093
|
+
check,
|
|
1094
|
+
radio,
|
|
1095
|
+
tableCell,
|
|
1096
|
+
expandable,
|
|
1097
|
+
headData = [],
|
|
1098
|
+
disabledJson = {},
|
|
1099
|
+
disabledArrStatus,
|
|
1100
|
+
checkJson = {},
|
|
1101
|
+
radioValue,
|
|
1102
|
+
selectCheck,
|
|
1103
|
+
selectRadio,
|
|
1104
|
+
align,
|
|
1105
|
+
operate,
|
|
1106
|
+
showColumns,
|
|
1107
|
+
fixedTable,
|
|
1108
|
+
fixedColumn,
|
|
1109
|
+
formatter,
|
|
1110
|
+
orderFieldArr = [],
|
|
1111
|
+
orderTypeArr = [],
|
|
1112
|
+
sortTable,
|
|
1113
|
+
loadState,
|
|
1114
|
+
loadMore,
|
|
1115
|
+
loadMoreRender,
|
|
1116
|
+
onClickMore,
|
|
1117
|
+
total,
|
|
1118
|
+
page,
|
|
1119
|
+
currentRowsPerPage,
|
|
1120
|
+
changePage,
|
|
1121
|
+
loadMoreUrl,
|
|
1122
|
+
expandMultiple = false,
|
|
1123
|
+
expandValue = [],
|
|
1124
|
+
disabledExpand = [],
|
|
1125
|
+
defaultExpandAllRows = false,
|
|
1126
|
+
onExpand,
|
|
1127
|
+
onRefresh,
|
|
1128
|
+
posFixed,
|
|
1129
|
+
beyondText,
|
|
1130
|
+
onClickRow,
|
|
1131
|
+
rowClassMapping,
|
|
1132
|
+
tipMaxWidth,
|
|
1133
|
+
lineHeight,
|
|
1134
|
+
dragRow,
|
|
1135
|
+
onDragRow,
|
|
1136
|
+
virtualIndex,
|
|
1137
|
+
virtual
|
|
1138
|
+
} = props;
|
|
1139
|
+
const [expandableColSpan, setExpandableColSpan] = useState(0); // 嵌套表格合并列数
|
|
1140
|
+
const [expandableRow, setExpandableRow] = useState({}); // 当前哪行展开表格嵌套
|
|
1141
|
+
const [showMoreBtn, setShowMoreBtn] = useState(true); // 加载更多
|
|
1142
|
+
const [disabledExpandJson, setDisabledExpand] = useState({}); // 禁用加减部分嵌套
|
|
1143
|
+
const [dragBol, setDragBol] = useState(false);
|
|
1144
|
+
const intl = useFormatMessage('Table', localeJson);
|
|
1205
1145
|
// 默认是否展开所有
|
|
1206
|
-
useEffect(
|
|
1146
|
+
useEffect(() => {
|
|
1207
1147
|
if (!defaultExpandAllRows) {
|
|
1208
1148
|
setExpandableRow({});
|
|
1209
1149
|
return;
|
|
1210
1150
|
}
|
|
1211
|
-
|
|
1212
|
-
for (
|
|
1213
|
-
|
|
1214
|
-
|
|
1151
|
+
const json = {};
|
|
1152
|
+
for (let i = 0, l = rowData.length; i < l; i++) {
|
|
1153
|
+
const item = rowData[i] || {};
|
|
1154
|
+
const id = item[rowKey];
|
|
1215
1155
|
json[id] = {
|
|
1216
|
-
id
|
|
1156
|
+
id,
|
|
1217
1157
|
status: 'develop'
|
|
1218
1158
|
};
|
|
1219
1159
|
}
|
|
@@ -1221,41 +1161,41 @@ var TableBody = function TableBody(props) {
|
|
|
1221
1161
|
}, [defaultExpandAllRows, rowData, rowKey]);
|
|
1222
1162
|
// 监听展开表格
|
|
1223
1163
|
// 如果直接写expandMultiple, expandValue会死循环
|
|
1224
|
-
useEffect(
|
|
1164
|
+
useEffect(() => {
|
|
1225
1165
|
if (props.expandValue === undefined) return;
|
|
1226
|
-
|
|
1227
|
-
|
|
1166
|
+
const json = {};
|
|
1167
|
+
let expandValueHand = expandValue;
|
|
1228
1168
|
// 只展开一个,去第一个值
|
|
1229
1169
|
if (!expandMultiple && expandValue.length > 0) {
|
|
1230
1170
|
expandValueHand = [expandValue[0]];
|
|
1231
1171
|
}
|
|
1232
|
-
for (
|
|
1233
|
-
|
|
1172
|
+
for (let i = 0, l = expandValueHand.length; i < l; i++) {
|
|
1173
|
+
const id = expandValueHand[i];
|
|
1234
1174
|
json[id] = {
|
|
1235
|
-
id
|
|
1175
|
+
id,
|
|
1236
1176
|
status: 'develop'
|
|
1237
1177
|
};
|
|
1238
1178
|
}
|
|
1239
1179
|
setExpandableRow(json);
|
|
1240
1180
|
}, [props.expandMultiple, props.expandValue, rowData]);
|
|
1241
1181
|
// 监听禁用嵌套 props.disabledExpand 防止死循环
|
|
1242
|
-
useEffect(
|
|
1243
|
-
|
|
1244
|
-
for (
|
|
1245
|
-
|
|
1182
|
+
useEffect(() => {
|
|
1183
|
+
const json = {};
|
|
1184
|
+
for (let i = 0, l = disabledExpand.length; i < l; i++) {
|
|
1185
|
+
const id = disabledExpand[i];
|
|
1246
1186
|
json[id] = true;
|
|
1247
1187
|
}
|
|
1248
1188
|
setDisabledExpand(json);
|
|
1249
1189
|
}, [props.disabledExpand]);
|
|
1250
|
-
useEffect(
|
|
1190
|
+
useEffect(() => {
|
|
1251
1191
|
if (loadMoreUrl) {
|
|
1252
|
-
|
|
1192
|
+
const bol = Number(total) > Number(page) * Number(currentRowsPerPage);
|
|
1253
1193
|
setShowMoreBtn(bol);
|
|
1254
1194
|
}
|
|
1255
1195
|
}, [loadMoreUrl, total, page, currentRowsPerPage]);
|
|
1256
1196
|
// 处理嵌套表格合并列数
|
|
1257
|
-
useEffect(
|
|
1258
|
-
|
|
1197
|
+
useEffect(() => {
|
|
1198
|
+
let num = headData.length;
|
|
1259
1199
|
if (expandable) num += 1;
|
|
1260
1200
|
if (check) num += 1;
|
|
1261
1201
|
if (radio) num += 1;
|
|
@@ -1264,55 +1204,55 @@ var TableBody = function TableBody(props) {
|
|
|
1264
1204
|
setExpandableColSpan(num);
|
|
1265
1205
|
}, [headData, expandable, check, radio]);
|
|
1266
1206
|
// 展开/收起嵌套表格
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
status: status
|
|
1276
|
-
};
|
|
1277
|
-
if (expandMultiple) {
|
|
1278
|
-
// 展开多个
|
|
1279
|
-
expandableRow[id] = expandItem;
|
|
1280
|
-
setExpandableRow(Object.assign({}, expandableRow));
|
|
1281
|
-
} else {
|
|
1282
|
-
// 展开一个
|
|
1283
|
-
setExpandableRow(_defineProperty({}, id, expandItem));
|
|
1284
|
-
}
|
|
1285
|
-
onExpand && onExpand(row, status);
|
|
1286
|
-
event.stopPropagation();
|
|
1207
|
+
const handClickNestTable = row => event => {
|
|
1208
|
+
const id = row[rowKey];
|
|
1209
|
+
let expandItem = expandableRow[id] || {};
|
|
1210
|
+
let status = 'develop';
|
|
1211
|
+
if (expandItem.status === 'develop') status = 'retract';
|
|
1212
|
+
expandItem = {
|
|
1213
|
+
id,
|
|
1214
|
+
status
|
|
1287
1215
|
};
|
|
1216
|
+
if (expandMultiple) {
|
|
1217
|
+
// 展开多个
|
|
1218
|
+
expandableRow[id] = expandItem;
|
|
1219
|
+
setExpandableRow(Object.assign({}, expandableRow));
|
|
1220
|
+
} else {
|
|
1221
|
+
// 展开一个
|
|
1222
|
+
setExpandableRow({
|
|
1223
|
+
[id]: expandItem
|
|
1224
|
+
});
|
|
1225
|
+
}
|
|
1226
|
+
onExpand && onExpand(row, status);
|
|
1227
|
+
event.stopPropagation();
|
|
1288
1228
|
};
|
|
1289
1229
|
// 处理class
|
|
1290
|
-
|
|
1291
|
-
|
|
1230
|
+
const handClass = () => {
|
|
1231
|
+
let str = 'table-body';
|
|
1292
1232
|
if (!fixedTable) str += ' table-body-scroll';
|
|
1293
1233
|
// 没有 复选框,单选框,展开 按钮
|
|
1294
1234
|
if (!check && !radio && !expandable) str += ' table-body-no-btn';
|
|
1295
1235
|
return str;
|
|
1296
1236
|
};
|
|
1297
1237
|
// 处理嵌套表格class
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1238
|
+
const handExpandClass = row => {
|
|
1239
|
+
const id = row[rowKey];
|
|
1240
|
+
const expandItem = expandableRow[id] || {};
|
|
1241
|
+
let str = 'retract';
|
|
1302
1242
|
if (expandItem.status === 'develop') {
|
|
1303
1243
|
str = 'expand';
|
|
1304
1244
|
}
|
|
1305
1245
|
return str;
|
|
1306
1246
|
};
|
|
1307
1247
|
// 点击加载更多
|
|
1308
|
-
|
|
1248
|
+
const clickMore = () => {
|
|
1309
1249
|
if (loadMoreUrl) changePage && changePage();
|
|
1310
1250
|
onClickMore && onClickMore();
|
|
1311
1251
|
};
|
|
1312
1252
|
// 暂无数据memo
|
|
1313
|
-
|
|
1253
|
+
const NodataMemo = useMemo(() => {
|
|
1314
1254
|
// 处理刷新按钮
|
|
1315
|
-
|
|
1255
|
+
const handRefreshBtn = () => {
|
|
1316
1256
|
if ((emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.showRefresh) !== undefined) {
|
|
1317
1257
|
return emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.showRefresh;
|
|
1318
1258
|
}
|
|
@@ -1322,7 +1262,7 @@ var TableBody = function TableBody(props) {
|
|
|
1322
1262
|
return false;
|
|
1323
1263
|
};
|
|
1324
1264
|
// 处理非首页非空状态
|
|
1325
|
-
|
|
1265
|
+
const handleDescription = () => {
|
|
1326
1266
|
if (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.description) return emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.description;
|
|
1327
1267
|
if (Number(page) > 1) {
|
|
1328
1268
|
return jsxs("div", Object.assign({
|
|
@@ -1340,7 +1280,7 @@ var TableBody = function TableBody(props) {
|
|
|
1340
1280
|
children: jsx(Button, Object.assign({
|
|
1341
1281
|
variant: "text",
|
|
1342
1282
|
size: "small",
|
|
1343
|
-
onClick:
|
|
1283
|
+
onClick: () => {
|
|
1344
1284
|
changePage && changePage(Number(page) - 1);
|
|
1345
1285
|
}
|
|
1346
1286
|
}, {
|
|
@@ -1353,8 +1293,8 @@ var TableBody = function TableBody(props) {
|
|
|
1353
1293
|
}
|
|
1354
1294
|
};
|
|
1355
1295
|
// 处理className
|
|
1356
|
-
|
|
1357
|
-
|
|
1296
|
+
const handClassNoData = () => {
|
|
1297
|
+
let str = 'table-no-data';
|
|
1358
1298
|
if (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.size) str += " table-no-data-".concat(emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.size);
|
|
1359
1299
|
return str;
|
|
1360
1300
|
};
|
|
@@ -1368,24 +1308,24 @@ var TableBody = function TableBody(props) {
|
|
|
1368
1308
|
children: jsx(Empty, Object.assign({}, emptyProps, {
|
|
1369
1309
|
description: handleDescription(),
|
|
1370
1310
|
showRefresh: handRefreshBtn(),
|
|
1371
|
-
onRefresh:
|
|
1311
|
+
onRefresh: event => {
|
|
1372
1312
|
if (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.onRefresh) {
|
|
1373
1313
|
emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.onRefresh(event);
|
|
1374
1314
|
return;
|
|
1375
1315
|
}
|
|
1376
|
-
|
|
1316
|
+
onRefresh && onRefresh();
|
|
1377
1317
|
}
|
|
1378
1318
|
}))
|
|
1379
1319
|
}), expandableColSpan)
|
|
1380
1320
|
}));
|
|
1381
|
-
}, [expandableColSpan, emptyProps, url,
|
|
1321
|
+
}, [expandableColSpan, emptyProps, url, onRefresh, page, changePage]);
|
|
1382
1322
|
// 复选框useCallback
|
|
1383
|
-
|
|
1323
|
+
const TableCheckCallback = useCallback(row => {
|
|
1384
1324
|
if (check) {
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1325
|
+
const handId = row[rowKey];
|
|
1326
|
+
const disabledHand = Boolean(disabledJson[handId]);
|
|
1327
|
+
let checkHand = checkJson[handId] || false;
|
|
1328
|
+
let showCheck = true;
|
|
1389
1329
|
if (disabledHand && disabledArrStatus) {
|
|
1390
1330
|
// 选中
|
|
1391
1331
|
if (disabledArrStatus[handId] === true) {
|
|
@@ -1400,8 +1340,8 @@ var TableBody = function TableBody(props) {
|
|
|
1400
1340
|
showCheck = false;
|
|
1401
1341
|
}
|
|
1402
1342
|
}
|
|
1403
|
-
|
|
1404
|
-
|
|
1343
|
+
const handCls = () => {
|
|
1344
|
+
let str = 'table-checkbox table-body-btn';
|
|
1405
1345
|
if (fixedColumn) {
|
|
1406
1346
|
str += ' table-fixed-dom-left';
|
|
1407
1347
|
// 左边没有定位,且没有单选,没有嵌套表格
|
|
@@ -1418,7 +1358,7 @@ var TableBody = function TableBody(props) {
|
|
|
1418
1358
|
children: showCheck && jsx(Checkbox, {
|
|
1419
1359
|
disabled: disabledHand,
|
|
1420
1360
|
checked: checkHand,
|
|
1421
|
-
onChange:
|
|
1361
|
+
onChange: (event, bol) => {
|
|
1422
1362
|
event.stopPropagation();
|
|
1423
1363
|
selectCheck && selectCheck(event, bol, row[rowKey]);
|
|
1424
1364
|
}
|
|
@@ -1427,12 +1367,12 @@ var TableBody = function TableBody(props) {
|
|
|
1427
1367
|
}
|
|
1428
1368
|
}, [check, disabledJson, rowKey, checkJson, selectCheck, disabledArrStatus, posFixed, expandable, radio, fixedColumn]);
|
|
1429
1369
|
// 单选框useCallback
|
|
1430
|
-
|
|
1370
|
+
const TableRadioCallback = useCallback(row => {
|
|
1431
1371
|
if (radio) {
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1372
|
+
const handId = row[rowKey];
|
|
1373
|
+
const disabledHand = Boolean(disabledJson[handId]);
|
|
1374
|
+
let checkHand = radioValue === row[rowKey];
|
|
1375
|
+
let showRadio = true;
|
|
1436
1376
|
if (disabledHand && disabledArrStatus) {
|
|
1437
1377
|
// 选中
|
|
1438
1378
|
if (disabledArrStatus[handId] === true) {
|
|
@@ -1447,8 +1387,8 @@ var TableBody = function TableBody(props) {
|
|
|
1447
1387
|
showRadio = false;
|
|
1448
1388
|
}
|
|
1449
1389
|
}
|
|
1450
|
-
|
|
1451
|
-
|
|
1390
|
+
const handCls = () => {
|
|
1391
|
+
let str = 'table-radio table-body-btn';
|
|
1452
1392
|
if (fixedColumn) {
|
|
1453
1393
|
str += ' table-fixed-dom-left';
|
|
1454
1394
|
// 左边没有定位,没有嵌套表格
|
|
@@ -1465,7 +1405,7 @@ var TableBody = function TableBody(props) {
|
|
|
1465
1405
|
children: showRadio && jsx(Radio, {
|
|
1466
1406
|
disabled: disabledHand,
|
|
1467
1407
|
checked: checkHand,
|
|
1468
|
-
onChange:
|
|
1408
|
+
onChange: event => {
|
|
1469
1409
|
event.stopPropagation();
|
|
1470
1410
|
selectRadio && selectRadio(event, row[rowKey]);
|
|
1471
1411
|
}
|
|
@@ -1474,13 +1414,13 @@ var TableBody = function TableBody(props) {
|
|
|
1474
1414
|
}
|
|
1475
1415
|
}, [radio, disabledJson, radioValue, rowKey, selectRadio, disabledArrStatus, expandable, posFixed, fixedColumn]);
|
|
1476
1416
|
// 嵌套加减useCallback
|
|
1477
|
-
|
|
1417
|
+
const TableExpandableMemo = useCallback(row => {
|
|
1478
1418
|
if (!expandable) return null;
|
|
1479
|
-
|
|
1419
|
+
const expandableDemo = expandable(row);
|
|
1480
1420
|
// 禁用一行表格展开 或者 展开表格返回值为false,返回空列
|
|
1481
1421
|
if (disabledExpandJson[row[rowKey]] || expandableDemo === false) return jsx(TdElement, {});
|
|
1482
|
-
|
|
1483
|
-
|
|
1422
|
+
const handCls = () => {
|
|
1423
|
+
let str = 'table-expandable table-body-btn';
|
|
1484
1424
|
if (fixedColumn) {
|
|
1485
1425
|
str += ' table-fixed-dom-left';
|
|
1486
1426
|
// 左边没有定位,没有嵌套表格
|
|
@@ -1501,17 +1441,17 @@ var TableBody = function TableBody(props) {
|
|
|
1501
1441
|
}));
|
|
1502
1442
|
}, [expandable, expandableRow, rowKey, disabledExpandJson, onExpand, fixedColumn]);
|
|
1503
1443
|
// 表格一行内容useCallback
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
orderFieldArr
|
|
1507
|
-
orderTypeArr
|
|
1444
|
+
const TableContentUseCallback = useCallback((row, rowIndex) => {
|
|
1445
|
+
const params = {
|
|
1446
|
+
orderFieldArr,
|
|
1447
|
+
orderTypeArr
|
|
1508
1448
|
};
|
|
1509
|
-
|
|
1510
|
-
|
|
1449
|
+
const handContentClass = item => {
|
|
1450
|
+
let str = 'table-content-columms';
|
|
1511
1451
|
if (item.className) str += " ".concat(item.className);
|
|
1512
1452
|
// 排序
|
|
1513
1453
|
if (sortTable && item.name && item.sort !== false) {
|
|
1514
|
-
|
|
1454
|
+
const index = orderFieldArr.indexOf(item.name);
|
|
1515
1455
|
if (index !== -1) {
|
|
1516
1456
|
// 升序
|
|
1517
1457
|
if (orderTypeArr[index] === 'asc') {
|
|
@@ -1536,8 +1476,8 @@ var TableBody = function TableBody(props) {
|
|
|
1536
1476
|
}
|
|
1537
1477
|
return str;
|
|
1538
1478
|
};
|
|
1539
|
-
|
|
1540
|
-
|
|
1479
|
+
const handStyle = item => {
|
|
1480
|
+
const json = {};
|
|
1541
1481
|
if (fixedColumn && item.fixed && item.width) {
|
|
1542
1482
|
if (item.fixed === 'left') {
|
|
1543
1483
|
json.left = "".concat(item.paraui_left_width, "px");
|
|
@@ -1548,12 +1488,12 @@ var TableBody = function TableBody(props) {
|
|
|
1548
1488
|
}
|
|
1549
1489
|
return json;
|
|
1550
1490
|
};
|
|
1551
|
-
return tableCell ? tableCell(row, params) : headData.map(
|
|
1552
|
-
|
|
1553
|
-
|
|
1491
|
+
return tableCell ? tableCell(row, params) : headData.map((item, index) => {
|
|
1492
|
+
let text = row[item.name];
|
|
1493
|
+
let colSpan = 1;
|
|
1554
1494
|
if (item.render) text = item.render(row, item, row[item.name], index, rowIndex);
|
|
1555
1495
|
if (formatter) text = formatter(row, item, row[item.name], index, rowIndex);
|
|
1556
|
-
|
|
1496
|
+
const itemStyle = handStyle(item);
|
|
1557
1497
|
// 存在显示列,最后一列占两格
|
|
1558
1498
|
if (showColumns === 'inside' && !operate && index === headData.length - 1 && !dragRow) {
|
|
1559
1499
|
colSpan = 2;
|
|
@@ -1577,25 +1517,25 @@ var TableBody = function TableBody(props) {
|
|
|
1577
1517
|
});
|
|
1578
1518
|
}, [tableCell, headData, align, formatter, orderFieldArr, orderTypeArr, sortTable, showColumns, operate, beyondText, fixedColumn, tipMaxWidth, dragRow]);
|
|
1579
1519
|
// 操作栏useCallback
|
|
1580
|
-
|
|
1520
|
+
const TableOperateUseCallback = useCallback((row, rowIndex) => {
|
|
1581
1521
|
if (operate || dragRow) {
|
|
1582
|
-
|
|
1522
|
+
let colSpan = 1;
|
|
1583
1523
|
if (showColumns === 'inside' && operate) colSpan = 2;
|
|
1584
|
-
|
|
1524
|
+
const handOperate = () => {
|
|
1585
1525
|
if (operate === null || operate === void 0 ? void 0 : operate.render) return operate.render(row);
|
|
1586
1526
|
if (operate === null || operate === void 0 ? void 0 : operate.operateBtnRender) {
|
|
1587
|
-
|
|
1527
|
+
const operateConfig = operate.operateBtnRender(row, rowIndex);
|
|
1588
1528
|
return jsx(OperateBtn, Object.assign({}, operateConfig));
|
|
1589
1529
|
}
|
|
1590
1530
|
};
|
|
1591
|
-
|
|
1592
|
-
|
|
1531
|
+
const handStyle = () => {
|
|
1532
|
+
const json = {
|
|
1593
1533
|
right: '0'
|
|
1594
1534
|
};
|
|
1595
1535
|
return json;
|
|
1596
1536
|
};
|
|
1597
|
-
|
|
1598
|
-
|
|
1537
|
+
const handCls = () => {
|
|
1538
|
+
let str = 'table-operate';
|
|
1599
1539
|
if (!operate) str += ' table-operate-center';
|
|
1600
1540
|
if (fixedColumn) {
|
|
1601
1541
|
str += ' table-fixed-dom-right';
|
|
@@ -1636,11 +1576,11 @@ var TableBody = function TableBody(props) {
|
|
|
1636
1576
|
}
|
|
1637
1577
|
}, [operate, align, showColumns, posFixed, fixedColumn, dragRow, onDragRow, dragBol]);
|
|
1638
1578
|
// 嵌套表格useCallback
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1579
|
+
const TableExpandableContentUseCallback = useCallback(row => {
|
|
1580
|
+
const id = row[rowKey];
|
|
1581
|
+
const expandItem = expandableRow[id] || {};
|
|
1642
1582
|
if (expandable && expandItem.status === 'develop') {
|
|
1643
|
-
|
|
1583
|
+
const expandableDemo = expandable(row);
|
|
1644
1584
|
if (expandableDemo === false) return null; // 展开表格返回值为false,不展示这一行
|
|
1645
1585
|
return jsx(TrElement, Object.assign({
|
|
1646
1586
|
className: "table-body-expand-row"
|
|
@@ -1655,7 +1595,7 @@ var TableBody = function TableBody(props) {
|
|
|
1655
1595
|
}
|
|
1656
1596
|
}, [expandable, expandableRow, expandableColSpan, rowKey]);
|
|
1657
1597
|
// 加载更多
|
|
1658
|
-
|
|
1598
|
+
const MoreMemo = useMemo(() => {
|
|
1659
1599
|
if (!loadMore || !showMoreBtn) return null;
|
|
1660
1600
|
return jsx(TrElement, Object.assign({
|
|
1661
1601
|
className: "more-table-row",
|
|
@@ -1678,25 +1618,25 @@ var TableBody = function TableBody(props) {
|
|
|
1678
1618
|
}))
|
|
1679
1619
|
}));
|
|
1680
1620
|
}, [expandableColSpan, loadMore, loadMoreRender, onClickMore, showMoreBtn, changePage, loadMoreUrl, lineHeight]);
|
|
1681
|
-
|
|
1682
|
-
|
|
1621
|
+
const TableBodySubjectContentMemo = useMemo(() => {
|
|
1622
|
+
let rowDataCom = rowData;
|
|
1683
1623
|
if (virtual) {
|
|
1684
1624
|
rowDataCom = rowDataCom.slice(virtualIndex[0], virtualIndex[1]);
|
|
1685
1625
|
}
|
|
1686
1626
|
return jsx(Fragment, {
|
|
1687
|
-
children: rowDataCom.map(
|
|
1688
|
-
|
|
1627
|
+
children: rowDataCom.map((row, idx) => {
|
|
1628
|
+
let str = 'table-body-row';
|
|
1689
1629
|
if (rowClassMapping && rowClassMapping[row[rowKey]]) {
|
|
1690
1630
|
str += " ".concat(rowClassMapping[row[rowKey]]);
|
|
1691
1631
|
}
|
|
1692
|
-
|
|
1632
|
+
const index = idx + virtualIndex[0];
|
|
1693
1633
|
return jsxs(Fragment$1, {
|
|
1694
1634
|
children: [jsxs(TrElement, Object.assign({
|
|
1695
1635
|
className: str,
|
|
1696
1636
|
style: {
|
|
1697
1637
|
height: "".concat(lineHeight, "px")
|
|
1698
1638
|
},
|
|
1699
|
-
onClick:
|
|
1639
|
+
onClick: e => {
|
|
1700
1640
|
onClickRow && onClickRow(row, e);
|
|
1701
1641
|
}
|
|
1702
1642
|
}, {
|
|
@@ -1707,7 +1647,7 @@ var TableBody = function TableBody(props) {
|
|
|
1707
1647
|
});
|
|
1708
1648
|
}, [rowData, rowKey, disabledJson, checkJson, radio, radioValue, expandable, expandableRow, tableCell, headData, align, operate, expandableColSpan, selectCheck, selectRadio, disabledExpandJson, onExpand, disabledArrStatus, showColumns, onClickRow, rowClassMapping, tipMaxWidth, lineHeight, dragRow, onDragRow, dragBol, virtualIndex, virtual]);
|
|
1709
1649
|
// 内容memo
|
|
1710
|
-
|
|
1650
|
+
const TableBodyContentMemo = useMemo(() => {
|
|
1711
1651
|
return jsxs(Fragment$1, {
|
|
1712
1652
|
children: [TableBodySubjectContentMemo, MoreMemo, virtual && jsx(TrElement, {
|
|
1713
1653
|
className: 'virtual-scroll-height'
|
|
@@ -1715,31 +1655,31 @@ var TableBody = function TableBody(props) {
|
|
|
1715
1655
|
});
|
|
1716
1656
|
}, [rowData, rowKey, disabledJson, checkJson, radio, radioValue, expandable, expandableRow, tableCell, headData, align, operate, expandableColSpan, selectCheck, selectRadio, loadMore, loadMoreRender, onClickMore, changePage, loadMoreUrl, disabledExpandJson, onExpand, showMoreBtn, disabledArrStatus, showColumns, onClickRow, rowClassMapping, tipMaxWidth, lineHeight, dragRow, onDragRow, dragBol, virtualIndex, virtual]);
|
|
1717
1657
|
// 处理内容
|
|
1718
|
-
|
|
1658
|
+
const handContent = () => {
|
|
1719
1659
|
// 无数据,且不再请求,显示暂无数据
|
|
1720
1660
|
if (rowData.length === 0 && !loadState) return NodataMemo;
|
|
1721
1661
|
return TableBodyContentMemo;
|
|
1722
1662
|
};
|
|
1723
|
-
|
|
1724
|
-
|
|
1663
|
+
const handleRowData = () => {
|
|
1664
|
+
const arr = [];
|
|
1725
1665
|
if (dragRow) {
|
|
1726
|
-
rowData.forEach(
|
|
1727
|
-
|
|
1666
|
+
rowData.forEach(item => {
|
|
1667
|
+
const obj = {};
|
|
1728
1668
|
obj[rowKey] = item[rowKey];
|
|
1729
1669
|
arr.push(obj);
|
|
1730
1670
|
});
|
|
1731
1671
|
}
|
|
1732
1672
|
return arr;
|
|
1733
1673
|
};
|
|
1734
|
-
|
|
1674
|
+
const onChoose = () => {
|
|
1735
1675
|
setDragBol(true);
|
|
1736
1676
|
};
|
|
1737
|
-
|
|
1677
|
+
const onDragRowCom = evt => {
|
|
1738
1678
|
setDragBol(false);
|
|
1739
1679
|
onDragRow && onDragRow(evt);
|
|
1740
1680
|
};
|
|
1741
|
-
|
|
1742
|
-
|
|
1681
|
+
const handleStyle = () => {
|
|
1682
|
+
const obj = {};
|
|
1743
1683
|
if (virtual) {
|
|
1744
1684
|
obj.height = rowData.length * lineHeight + 'px';
|
|
1745
1685
|
obj.position = 'relative';
|
|
@@ -1760,36 +1700,30 @@ var TableBody = function TableBody(props) {
|
|
|
1760
1700
|
}));
|
|
1761
1701
|
};
|
|
1762
1702
|
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
checkNumber =
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
setIndeterminate = _useState2[1]; // 半选中
|
|
1788
|
-
var _useState3 = useState(false),
|
|
1789
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
1790
|
-
checked = _useState4[0],
|
|
1791
|
-
setChecked = _useState4[1]; // 选中
|
|
1792
|
-
useEffect(function () {
|
|
1703
|
+
const TableHead = props => {
|
|
1704
|
+
const {
|
|
1705
|
+
paginationType,
|
|
1706
|
+
flippingArrow,
|
|
1707
|
+
autoPagination,
|
|
1708
|
+
total,
|
|
1709
|
+
page,
|
|
1710
|
+
rowsPerPage,
|
|
1711
|
+
currentRowsPerPage,
|
|
1712
|
+
changePage,
|
|
1713
|
+
changeRowsPerPage,
|
|
1714
|
+
refreshInside,
|
|
1715
|
+
checkCount,
|
|
1716
|
+
onRefresh,
|
|
1717
|
+
selectAll,
|
|
1718
|
+
selectStatus,
|
|
1719
|
+
checkNumber = 0,
|
|
1720
|
+
currentPageTotal = 0,
|
|
1721
|
+
resizePaginationLine
|
|
1722
|
+
} = props;
|
|
1723
|
+
const intl = useFormatMessage('Table', localeJson);
|
|
1724
|
+
const [indeterminate, setIndeterminate] = useState(false); // 半选中
|
|
1725
|
+
const [checked, setChecked] = useState(false); // 选中
|
|
1726
|
+
useEffect(() => {
|
|
1793
1727
|
// 全选
|
|
1794
1728
|
if (selectStatus === 'all') {
|
|
1795
1729
|
setChecked(true);
|
|
@@ -1811,23 +1745,23 @@ var TableHead = function TableHead(props) {
|
|
|
1811
1745
|
* @param event 操作元素
|
|
1812
1746
|
* @param bol 选中 / 不选中
|
|
1813
1747
|
*/
|
|
1814
|
-
|
|
1748
|
+
const onSelectAll = (event, bol) => {
|
|
1815
1749
|
if (selectAll) selectAll(event, bol);
|
|
1816
1750
|
};
|
|
1817
1751
|
// 改变页面
|
|
1818
|
-
|
|
1752
|
+
const changePageCom = num => {
|
|
1819
1753
|
changePage && changePage(num);
|
|
1820
1754
|
};
|
|
1821
1755
|
// 改变每页显示条数
|
|
1822
|
-
|
|
1756
|
+
const changeRowsPerPageCom = num => {
|
|
1823
1757
|
changeRowsPerPage && changeRowsPerPage(num);
|
|
1824
1758
|
};
|
|
1825
1759
|
// 刷新
|
|
1826
|
-
|
|
1760
|
+
const clickRefresh = () => {
|
|
1827
1761
|
onRefresh && onRefresh();
|
|
1828
1762
|
};
|
|
1829
1763
|
// 处理分页右侧
|
|
1830
|
-
|
|
1764
|
+
const handlePaginationRight = () => {
|
|
1831
1765
|
if (!checkCount) return null;
|
|
1832
1766
|
return jsxs("div", Object.assign({
|
|
1833
1767
|
className: 'table-pagination-right'
|
|
@@ -1850,8 +1784,8 @@ var TableHead = function TableHead(props) {
|
|
|
1850
1784
|
}));
|
|
1851
1785
|
};
|
|
1852
1786
|
// 处理样式
|
|
1853
|
-
|
|
1854
|
-
|
|
1787
|
+
const handleClass = () => {
|
|
1788
|
+
const str = 'table-pagination';
|
|
1855
1789
|
return str;
|
|
1856
1790
|
};
|
|
1857
1791
|
return jsxs("div", Object.assign({
|
|
@@ -1869,9 +1803,7 @@ var TableHead = function TableHead(props) {
|
|
|
1869
1803
|
currentRowsPerPage: currentRowsPerPage,
|
|
1870
1804
|
changePage: changePageCom,
|
|
1871
1805
|
changeRowsPerPage: changeRowsPerPageCom,
|
|
1872
|
-
getPopupContainer:
|
|
1873
|
-
return document.body;
|
|
1874
|
-
},
|
|
1806
|
+
getPopupContainer: () => document.body,
|
|
1875
1807
|
resizeLine: resizePaginationLine
|
|
1876
1808
|
}), refreshInside && jsx(Button.IconButton, Object.assign({
|
|
1877
1809
|
className: 'refresh-btn',
|
|
@@ -1886,14 +1818,16 @@ var TableHead = function TableHead(props) {
|
|
|
1886
1818
|
var css_248z$2 = ".table-container {\n overflow-x: auto;\n}";
|
|
1887
1819
|
styleInject(css_248z$2);
|
|
1888
1820
|
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1821
|
+
const TableContainer = props => {
|
|
1822
|
+
const {
|
|
1823
|
+
cRef,
|
|
1824
|
+
className,
|
|
1825
|
+
style,
|
|
1826
|
+
children
|
|
1827
|
+
} = props,
|
|
1894
1828
|
otherProps = __rest(props, ["cRef", "className", "style", "children"]);
|
|
1895
|
-
|
|
1896
|
-
|
|
1829
|
+
const handClass = () => {
|
|
1830
|
+
let str = 'table-container';
|
|
1897
1831
|
if (className) str += " ".concat(className);
|
|
1898
1832
|
return str;
|
|
1899
1833
|
};
|
|
@@ -1909,15 +1843,17 @@ var TableContainer = function TableContainer(props) {
|
|
|
1909
1843
|
var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.table-element {\n width: 100%;\n display: table;\n border-collapse: separate;\n border-spacing: 0;\n}\n.table-element.table-element-fixed-column > .table-body-element > .tr-element > .td-element {\n position: sticky;\n}\n.table-element > .table-head-element > .tr-element > .th-element {\n position: sticky;\n top: 0;\n z-index: 10;\n}\n.table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-left.table-fixed-dom-left-last::after {\n height: 100%;\n width: 30px;\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(100%);\n content: \"\";\n transition: box-shadow 0.3s;\n pointer-events: none;\n}\n.table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-right.table-fixed-dom-right-first::after {\n height: 100%;\n width: 30px;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(-100%);\n content: \"\";\n transition: box-shadow 0.3s;\n pointer-events: none;\n}\n.table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-left {\n z-index: 11;\n}\n.table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-right {\n z-index: 11;\n}\n.table-element > .table-body-element > .tr-element > .td-element {\n z-index: 1;\n}\n.table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-left.table-fixed-dom-left-last::after {\n height: 100%;\n width: 30px;\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(100%);\n content: \"\";\n transition: box-shadow 0.3s;\n pointer-events: none;\n}\n.table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-right.table-fixed-dom-right-first::after {\n height: 100%;\n width: 30px;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(-100%);\n content: \"\";\n transition: box-shadow 0.3s;\n pointer-events: none;\n}\n.table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-left {\n z-index: 2;\n}\n.table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-right {\n z-index: 2;\n}\n\n.table-scroll-left .table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-right.table-fixed-dom-right-first::after {\n box-shadow: inset -10px 0 10px -8px rgb(234, 236, 241);\n}\n.table-scroll-left .table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-right.table-fixed-dom-right-first::after {\n box-shadow: inset -10px 0 10px -8px rgb(234, 236, 241);\n}\n\n.table-scroll-right .table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-left.table-fixed-dom-left-last::after {\n box-shadow: inset 10px 0 10px -8px rgb(234, 236, 241);\n}\n.table-scroll-right .table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-left.table-fixed-dom-left-last::after {\n box-shadow: inset 10px 0 10px -8px rgb(234, 236, 241);\n}\n\n.table-scroll-middle .table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-left.table-fixed-dom-left-last::after {\n box-shadow: inset 10px 0 10px -8px rgb(234, 236, 241);\n}\n.table-scroll-middle .table-element > .table-head-element > .tr-element > .th-element.table-fixed-dom-right.table-fixed-dom-right-first::after {\n box-shadow: inset -10px 0 10px -8px rgb(234, 236, 241);\n}\n.table-scroll-middle .table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-left.table-fixed-dom-left-last::after {\n box-shadow: inset 10px 0 10px -8px rgb(234, 236, 241);\n}\n.table-scroll-middle .table-element > .table-body-element > .tr-element > .td-element.table-fixed-dom-right.table-fixed-dom-right-first::after {\n box-shadow: inset -10px 0 10px -8px rgb(234, 236, 241);\n}";
|
|
1910
1844
|
styleInject(css_248z$1);
|
|
1911
1845
|
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1846
|
+
const TableElement = props => {
|
|
1847
|
+
const {
|
|
1848
|
+
className,
|
|
1849
|
+
style,
|
|
1850
|
+
fixedColumn,
|
|
1851
|
+
children,
|
|
1852
|
+
cRef
|
|
1853
|
+
} = props,
|
|
1918
1854
|
otherProps = __rest(props, ["className", "style", "fixedColumn", "children", "cRef"]);
|
|
1919
|
-
|
|
1920
|
-
|
|
1855
|
+
const handClass = () => {
|
|
1856
|
+
let str = 'table-element';
|
|
1921
1857
|
if (fixedColumn) str += ' table-element-fixed-column';
|
|
1922
1858
|
if (className) str += " ".concat(className);
|
|
1923
1859
|
return str;
|