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