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