@para-ui/core 4.0.0-rc.6 → 4.0.0
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/AutoTips/index.js +2 -2
- package/Cascader/index.js +4 -5
- package/ComboSelect/index.js +13 -15
- package/ComboSelect/lang/en_US.d.ts +1 -0
- package/ComboSelect/lang/index.d.ts +2 -0
- package/ComboSelect/lang/zh_CN.d.ts +1 -0
- package/CopyText/index.js +7 -5
- package/DatePicker/index.js +1 -3
- package/DatePicker/util.d.ts +6 -6
- package/DynamicMultiBox/index.js +7 -564
- package/Form/index.js +4 -8
- package/FormItem/index.js +4 -8
- package/FunctionModal/index.js +2 -2
- package/Menu/index.js +1 -1
- package/OperateBtn/index.js +8 -6
- package/Pagination/index.js +1 -1
- package/QuickReply/QuickReplyCode/index.d.ts +10 -0
- package/QuickReply/index.d.ts +87 -0
- package/QuickReply/index.js +550 -0
- package/QuickReply/lang/en_US.d.ts +14 -0
- package/QuickReply/lang/index.d.ts +29 -0
- package/QuickReply/lang/zh_CN.d.ts +14 -0
- package/README.md +2 -105
- package/Select/index.js +5 -3
- package/SelectInput/index.js +1 -1
- package/Selector/index.js +326 -3
- package/SelectorPicker/index.js +6 -5
- package/Stepper/index.js +1 -1
- package/Styles/theme.scss +1 -0
- package/Switch/index.js +6 -6
- package/Table/index.js +410 -472
- package/Tabs/index.js +3 -3
- package/Tag/index.js +55 -84
- package/TextEditor/index.js +3 -3
- package/TextField/index.js +1 -1
- package/TimePicker/index.js +1 -3
- package/Timeline/index.js +20 -14
- package/ToggleButton/index.js +26 -25
- package/Tooltip/index.js +27 -26
- package/Transfer/index.js +44 -49
- package/Tree/index.js +4 -8
- package/Upload/index.js +410 -627
- package/_verture/index-28a6bc3a.js +559 -0
- package/_verture/{index-3cdaba96.js → index-9784b09c.js} +18 -3
- package/_verture/{index-e0f9064d.js → index-bd14bb50.js} +1 -1
- package/_verture/{index-4fafd0a0.js → index-e3011376.js} +312 -394
- package/_verture/{slicedToArray-75fa4188.js → slicedToArray-8223a2ef.js} +1 -1
- package/index.d.ts +2 -0
- package/index.js +12 -10
- package/locale/en-US.d.ts +14 -0
- package/locale/index.d.ts +28 -0
- package/locale/index.js +30 -2
- package/locale/zh-CN.d.ts +14 -0
- package/package.json +3 -2
- package/umd/AutoTips.js +1 -1
- package/umd/Breadcrumbs.js +1 -1
- package/umd/Button.js +7 -7
- package/umd/ButtonGroup.js +1 -1
- package/umd/Cascader.js +1 -1
- package/umd/ComboSelect.js +4 -4
- package/umd/CopyText.js +2 -2
- package/umd/DatePicker.js +7 -7
- package/umd/Descriptions.js +1 -1
- package/umd/Desktop.js +1 -1
- package/umd/Drawer.js +1 -1
- package/umd/DynamicMultiBox.js +4 -4
- package/umd/Form.js +4 -4
- package/umd/FormItem.js +4 -4
- package/umd/FunctionModal.js +1 -1
- package/umd/InputLang.js +1 -1
- package/umd/Menu.js +1 -1
- package/umd/Modal.js +1 -1
- package/umd/MultiBox.js +1 -1
- package/umd/OperateBtn.js +2 -2
- package/umd/PageHeader.js +1 -1
- package/umd/Pagination.js +2 -2
- package/umd/PopConfirm.js +1 -1
- package/umd/QuickReply.js +55 -0
- package/umd/Search.js +1 -1
- package/umd/Select.js +2 -2
- package/umd/SelectInput.js +2 -2
- package/umd/Selector.js +1 -1
- package/umd/SelectorPicker.js +2 -2
- package/umd/SingleBox.js +1 -1
- package/umd/Stepper.js +1 -1
- package/umd/Switch.js +1 -1
- package/umd/Table.js +2 -2
- package/umd/Tabs.js +1 -1
- package/umd/Tag.js +1 -1
- package/umd/TextField.js +1 -1
- package/umd/TimePicker.js +5 -5
- package/umd/Title.js +1 -1
- package/umd/ToggleButton.js +1 -1
- package/umd/Transfer.js +1 -1
- package/umd/Tree.js +4 -4
- package/umd/Upload.js +1 -1
- package/umd/locale.js +1 -1
- package/_verture/index-d63bd287.js +0 -327
- package/_verture/toConsumableArray-c7a8028f.js +0 -19
- /package/_verture/{modalContext-8534f23d.js → modalContext-e4361800.js} +0 -0
- /package/_verture/{typeof-b240b062.js → typeof-c310ee4a.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 } from '@paraview/lib';
|
|
5
|
-
import { _ as _typeof } from '../_verture/typeof-adeedc13.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';
|
|
@@ -16,7 +14,6 @@ import SolidArrowDown from '@para-ui/icons/DownTriangleF';
|
|
|
16
14
|
import Panel from '@para-ui/icons/Panel';
|
|
17
15
|
import { u as useFormatMessage } from '../_verture/useFormatMessage-eb13cf56.js';
|
|
18
16
|
import Empty from '../Empty/index.js';
|
|
19
|
-
import { _ as _defineProperty } from '../_verture/defineProperty-1d116156.js';
|
|
20
17
|
import { Radio } from '../Radio/index.js';
|
|
21
18
|
import OperateBtn from '../OperateBtn/index.js';
|
|
22
19
|
import Down from '@para-ui/icons/Down';
|
|
@@ -62,23 +59,25 @@ import '@para-ui/icons/DoubleRight';
|
|
|
62
59
|
* 发送请求
|
|
63
60
|
* @param obj {ReqProps} 请求信息
|
|
64
61
|
*/
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
62
|
+
const requestFunc = obj => {
|
|
63
|
+
const {
|
|
64
|
+
method,
|
|
65
|
+
url,
|
|
66
|
+
ctx,
|
|
67
|
+
data
|
|
68
|
+
} = obj,
|
|
70
69
|
otherProps = __rest(obj, ["method", "url", "ctx", "data"]);
|
|
71
70
|
if (method === 'Get') {
|
|
72
71
|
return Get(Object.assign({
|
|
73
72
|
url: url,
|
|
74
|
-
ctx
|
|
73
|
+
ctx
|
|
75
74
|
}, otherProps));
|
|
76
75
|
}
|
|
77
76
|
if (method === 'Post') {
|
|
78
77
|
return Post(Object.assign({
|
|
79
78
|
url: url,
|
|
80
|
-
ctx
|
|
81
|
-
data
|
|
79
|
+
ctx,
|
|
80
|
+
data
|
|
82
81
|
}, otherProps));
|
|
83
82
|
}
|
|
84
83
|
};
|
|
@@ -87,23 +86,23 @@ var requestFunc = function requestFunc(obj) {
|
|
|
87
86
|
* @param obj {ReqProps} 请求信息
|
|
88
87
|
* @return string get请求地址参数
|
|
89
88
|
*/
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
for (
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
if (
|
|
89
|
+
const handGetReqParams = obj => {
|
|
90
|
+
let str = obj.url;
|
|
91
|
+
const params = obj.data || {};
|
|
92
|
+
const arrKey = Object.keys(params);
|
|
93
|
+
const paramsArr = [];
|
|
94
|
+
for (let i = 0, l = arrKey.length; i < l; i++) {
|
|
95
|
+
const key = arrKey[i];
|
|
96
|
+
let val = params[key];
|
|
97
|
+
if (typeof val === 'object') {
|
|
99
98
|
val = encodeURIComponent(JSON.stringify(val));
|
|
100
99
|
} else {
|
|
101
100
|
val = encodeURIComponent(val);
|
|
102
101
|
}
|
|
103
102
|
paramsArr.push("".concat(key, "=").concat(val));
|
|
104
103
|
}
|
|
105
|
-
|
|
106
|
-
|
|
104
|
+
const paramsStr = paramsArr.join('&');
|
|
105
|
+
const pos = str.indexOf('?');
|
|
107
106
|
if (pos !== -1) {
|
|
108
107
|
str += (pos === str.length - 1 ? '' : '&') + paramsStr;
|
|
109
108
|
} else {
|
|
@@ -114,9 +113,9 @@ var handGetReqParams = function handGetReqParams(obj) {
|
|
|
114
113
|
/**
|
|
115
114
|
* 提取字符串里面的数字
|
|
116
115
|
* */
|
|
117
|
-
|
|
116
|
+
const getStringInNumber = str => {
|
|
118
117
|
if (typeof str === 'number') return str;
|
|
119
|
-
|
|
118
|
+
const strHand = str.replace(/[^0-9$]/gi, '');
|
|
120
119
|
return Number(strHand);
|
|
121
120
|
};
|
|
122
121
|
/**
|
|
@@ -124,23 +123,23 @@ var getStringInNumber = function getStringInNumber(str) {
|
|
|
124
123
|
* @param key {string} 键值
|
|
125
124
|
* @param num {number} 过期天数
|
|
126
125
|
* */
|
|
127
|
-
|
|
126
|
+
const getLocalStorageSelectHead = (key, num) => {
|
|
128
127
|
//debugger
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
for (
|
|
133
|
-
|
|
134
|
-
|
|
128
|
+
const headJsonStr = window.localStorage.getItem('_paraui_table_head') || '{}';
|
|
129
|
+
const headJson = JSON.parse(headJsonStr);
|
|
130
|
+
const headJsonArr = Object.keys(headJson);
|
|
131
|
+
for (let i = 0, l = headJsonArr.length; i < l; i++) {
|
|
132
|
+
const keyStr = headJsonArr[i];
|
|
133
|
+
const item = headJson[i];
|
|
135
134
|
if (!item) continue;
|
|
136
|
-
|
|
137
|
-
|
|
135
|
+
const newDate = new Date().getTime(); // 当前时间
|
|
136
|
+
const endTime = item.storageTime + item.validity; // 过期时间
|
|
138
137
|
// 过期时间 小于 当前时间, 说明已经过期了, 删除当前表格列数据
|
|
139
138
|
if (endTime < newDate) {
|
|
140
139
|
delete headJson[keyStr];
|
|
141
140
|
}
|
|
142
141
|
}
|
|
143
|
-
|
|
142
|
+
const headJsonItem = headJson[key];
|
|
144
143
|
// 重置过期时间
|
|
145
144
|
if (headJsonItem) {
|
|
146
145
|
headJsonItem.storageTime = new Date().getTime();
|
|
@@ -153,9 +152,9 @@ var getLocalStorageSelectHead = function getLocalStorageSelectHead(key, num) {
|
|
|
153
152
|
* @param key {string} 键值
|
|
154
153
|
* @param val {HeadLocalStorageItem} 保存值
|
|
155
154
|
* */
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
155
|
+
const setLocalStorageSelectHead = (key, val) => {
|
|
156
|
+
const headJsonStr = window.localStorage.getItem('_paraui_table_head') || '{}';
|
|
157
|
+
const headJson = JSON.parse(headJsonStr);
|
|
159
158
|
headJson[key] = val;
|
|
160
159
|
window.localStorage.setItem('_paraui_table_head', JSON.stringify(headJson));
|
|
161
160
|
};
|
|
@@ -164,8 +163,8 @@ var setLocalStorageSelectHead = function setLocalStorageSelectHead(key, val) {
|
|
|
164
163
|
* @param el 当前元素
|
|
165
164
|
* @param selector 查找元素class
|
|
166
165
|
*/
|
|
167
|
-
|
|
168
|
-
|
|
166
|
+
const closest = (el, selector) => {
|
|
167
|
+
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
|
|
169
168
|
while (el) {
|
|
170
169
|
if (matchesSelector.call(el, selector)) {
|
|
171
170
|
break;
|
|
@@ -355,69 +354,49 @@ var zh = {
|
|
|
355
354
|
};
|
|
356
355
|
|
|
357
356
|
var localeJson = {
|
|
358
|
-
zh
|
|
359
|
-
en
|
|
357
|
+
zh,
|
|
358
|
+
en
|
|
360
359
|
};
|
|
361
360
|
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
headData =
|
|
365
|
-
sortTable
|
|
366
|
-
filter
|
|
367
|
-
expandable
|
|
368
|
-
check
|
|
369
|
-
radio
|
|
370
|
-
onRequestSort
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
checked = _useState4[0],
|
|
402
|
-
setChecked = _useState4[1]; // 选中
|
|
403
|
-
var _useState5 = useState(null),
|
|
404
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
405
|
-
anchorElColums = _useState6[0],
|
|
406
|
-
setAnchorElColums = _useState6[1]; // 显示列定位元素
|
|
407
|
-
var _useState7 = useState({}),
|
|
408
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
409
|
-
headDataJson = _useState8[0],
|
|
410
|
-
setHeadDataJson = _useState8[1]; // 显示列json
|
|
411
|
-
var _useState9 = useState({}),
|
|
412
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
413
|
-
filterHead = _useState10[0],
|
|
414
|
-
setFilterHead = _useState10[1]; // 过滤项当前表头数据
|
|
415
|
-
var _useState11 = useState({}),
|
|
416
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
417
|
-
selectFilterCom = _useState12[0],
|
|
418
|
-
setSelectFilterCom = _useState12[1]; // 过滤项当前选中值
|
|
419
|
-
var intl = useFormatMessage('Table', localeJson);
|
|
420
|
-
useEffect(function () {
|
|
361
|
+
const TableHead$1 = props => {
|
|
362
|
+
const {
|
|
363
|
+
headData = [],
|
|
364
|
+
sortTable,
|
|
365
|
+
filter,
|
|
366
|
+
expandable,
|
|
367
|
+
check,
|
|
368
|
+
radio,
|
|
369
|
+
onRequestSort,
|
|
370
|
+
orderFieldArr = [],
|
|
371
|
+
orderTypeArr = [],
|
|
372
|
+
selectAll,
|
|
373
|
+
selectStatus,
|
|
374
|
+
align,
|
|
375
|
+
showList = [],
|
|
376
|
+
changeShowList,
|
|
377
|
+
selectFilter,
|
|
378
|
+
changeFilter,
|
|
379
|
+
operate,
|
|
380
|
+
showColumns,
|
|
381
|
+
fixedTable,
|
|
382
|
+
fixedColumn,
|
|
383
|
+
posFixed,
|
|
384
|
+
beyondText,
|
|
385
|
+
lineWidth,
|
|
386
|
+
dragColumn,
|
|
387
|
+
changeColumnWidth,
|
|
388
|
+
headDataConfig,
|
|
389
|
+
getPopupContainer,
|
|
390
|
+
tipMaxWidth
|
|
391
|
+
} = props;
|
|
392
|
+
const [indeterminate, setIndeterminate] = useState(false); // 半选中
|
|
393
|
+
const [checked, setChecked] = useState(false); // 选中
|
|
394
|
+
const [anchorElColums, setAnchorElColums] = useState(null); // 显示列定位元素
|
|
395
|
+
const [headDataJson, setHeadDataJson] = useState({}); // 显示列json
|
|
396
|
+
const [filterHead, setFilterHead] = useState({}); // 过滤项当前表头数据
|
|
397
|
+
const [selectFilterCom, setSelectFilterCom] = useState({}); // 过滤项当前选中值
|
|
398
|
+
const intl = useFormatMessage('Table', localeJson);
|
|
399
|
+
useEffect(() => {
|
|
421
400
|
// 全选
|
|
422
401
|
if (selectStatus === 'all') {
|
|
423
402
|
setChecked(true);
|
|
@@ -434,17 +413,17 @@ var TableHead$1 = function TableHead(props) {
|
|
|
434
413
|
setIndeterminate(false);
|
|
435
414
|
}
|
|
436
415
|
}, [selectStatus]);
|
|
437
|
-
useEffect(
|
|
416
|
+
useEffect(() => {
|
|
438
417
|
if (headData) {
|
|
439
|
-
|
|
440
|
-
for (
|
|
441
|
-
|
|
418
|
+
const json = [];
|
|
419
|
+
for (let i = 0, l = headData.length; i < l; i++) {
|
|
420
|
+
const item = headData[i];
|
|
442
421
|
json[item.name] = item;
|
|
443
422
|
}
|
|
444
423
|
setHeadDataJson(json);
|
|
445
424
|
}
|
|
446
425
|
}, [headData]);
|
|
447
|
-
useEffect(
|
|
426
|
+
useEffect(() => {
|
|
448
427
|
if (selectFilter) setSelectFilterCom(DeepClone(selectFilter));
|
|
449
428
|
}, [selectFilter]);
|
|
450
429
|
/**
|
|
@@ -452,30 +431,28 @@ var TableHead$1 = function TableHead(props) {
|
|
|
452
431
|
* @param name 排序列
|
|
453
432
|
* @param event 当前排序元素
|
|
454
433
|
*/
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
if (onRequestSort) onRequestSort(event, name);
|
|
460
|
-
};
|
|
434
|
+
const createSortHandler = (name, item) => event => {
|
|
435
|
+
// 不存在排序,不触发事件
|
|
436
|
+
if (!(sortTable && item.name && item.sort !== false)) return;
|
|
437
|
+
if (onRequestSort) onRequestSort(event, name);
|
|
461
438
|
};
|
|
462
439
|
/**
|
|
463
440
|
* 全选 / 全不选
|
|
464
441
|
* @param event 操作元素
|
|
465
442
|
* @param bol 选中 / 不选中
|
|
466
443
|
*/
|
|
467
|
-
|
|
444
|
+
const onSelectAll = (event, bol) => {
|
|
468
445
|
if (selectAll) selectAll(event, bol);
|
|
469
446
|
};
|
|
470
447
|
/**
|
|
471
448
|
* 点击显示选择列
|
|
472
449
|
* @param event 点击元素
|
|
473
450
|
*/
|
|
474
|
-
|
|
451
|
+
const clickShowColums = event => {
|
|
475
452
|
setAnchorElColums(event.currentTarget);
|
|
476
453
|
};
|
|
477
454
|
// 点击隐藏选择列
|
|
478
|
-
|
|
455
|
+
const clickHideColums = bol => {
|
|
479
456
|
if (bol) return;
|
|
480
457
|
setAnchorElColums(null);
|
|
481
458
|
};
|
|
@@ -483,29 +460,27 @@ var TableHead$1 = function TableHead(props) {
|
|
|
483
460
|
* 点击显示列 列表
|
|
484
461
|
* @param item 详细
|
|
485
462
|
*/
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
arr1.push(headDataJson[_name]);
|
|
499
|
-
}
|
|
500
|
-
changeShowList && changeShowList(arr1, false, item);
|
|
501
|
-
} else {
|
|
502
|
-
headData.push(item);
|
|
503
|
-
changeShowList && changeShowList(headData, false, item);
|
|
463
|
+
const clickColumsList = item => () => {
|
|
464
|
+
if (item.disabledSelection) return;
|
|
465
|
+
const name = item.name;
|
|
466
|
+
const itemHead = headDataJson[name];
|
|
467
|
+
if (itemHead) {
|
|
468
|
+
// 取消勾选
|
|
469
|
+
delete headDataJson[name];
|
|
470
|
+
const arr = Object.keys(headDataJson);
|
|
471
|
+
const arr1 = [];
|
|
472
|
+
for (let i = 0, l = arr.length; i < l; i++) {
|
|
473
|
+
const name = arr[i];
|
|
474
|
+
arr1.push(headDataJson[name]);
|
|
504
475
|
}
|
|
505
|
-
|
|
476
|
+
changeShowList && changeShowList(arr1, false, item);
|
|
477
|
+
} else {
|
|
478
|
+
headData.push(item);
|
|
479
|
+
changeShowList && changeShowList(headData, false, item);
|
|
480
|
+
}
|
|
506
481
|
};
|
|
507
482
|
// 重置显示列
|
|
508
|
-
|
|
483
|
+
const resetShowList = () => {
|
|
509
484
|
changeShowList && changeShowList(headData, true);
|
|
510
485
|
};
|
|
511
486
|
/**
|
|
@@ -513,69 +488,63 @@ var TableHead$1 = function TableHead(props) {
|
|
|
513
488
|
* @param headCell 当前列信息
|
|
514
489
|
* @param event 元素
|
|
515
490
|
*/
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
setSelectFilterCom(Object.assign({}, selectFilter));
|
|
520
|
-
};
|
|
491
|
+
const clickShowFilter = headCell => event => {
|
|
492
|
+
setFilterHead(headCell);
|
|
493
|
+
setSelectFilterCom(Object.assign({}, selectFilter));
|
|
521
494
|
};
|
|
522
495
|
// 点击隐藏过滤
|
|
523
|
-
|
|
496
|
+
const clickHideFilter = bol => {
|
|
524
497
|
if (bol) return;
|
|
525
498
|
setFilterHead({});
|
|
526
499
|
setSelectFilterCom(Object.assign({}, selectFilter));
|
|
527
500
|
};
|
|
528
501
|
// 点击过滤
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
filterValue = [filterValue[num]];
|
|
547
|
-
}
|
|
502
|
+
const clickFilter = item => () => {
|
|
503
|
+
const name = filterHead.name;
|
|
504
|
+
let filterValue = DeepClone(selectFilterCom[name] || []);
|
|
505
|
+
const index = filterValue.indexOf(item.value);
|
|
506
|
+
if (index !== -1) {
|
|
507
|
+
// 勾选 -> 不勾选
|
|
508
|
+
filterValue.splice(index, 1);
|
|
509
|
+
} else {
|
|
510
|
+
// 不勾选 -> 勾选
|
|
511
|
+
filterValue.push(item.value);
|
|
512
|
+
}
|
|
513
|
+
const filterRadio = filterHead.filterRadio;
|
|
514
|
+
if (filterRadio) {
|
|
515
|
+
// 过滤单个
|
|
516
|
+
const num = filterValue.indexOf(item.value);
|
|
517
|
+
if (num !== -1) {
|
|
518
|
+
filterValue = [filterValue[num]];
|
|
548
519
|
}
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
};
|
|
520
|
+
}
|
|
521
|
+
selectFilterCom[name] = filterValue;
|
|
522
|
+
setSelectFilterCom(Object.assign({}, selectFilterCom));
|
|
552
523
|
};
|
|
553
524
|
/**
|
|
554
525
|
* 重置 / 确定过滤
|
|
555
526
|
* @param type {'reset' | 'confirm'} 重置 / 确定过滤
|
|
556
527
|
*/
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
}
|
|
571
|
-
};
|
|
528
|
+
const filterFunc = type => () => {
|
|
529
|
+
if (type === 'confirm') {
|
|
530
|
+
// 确定
|
|
531
|
+
changeFilter && changeFilter(Object.assign({}, selectFilterCom));
|
|
532
|
+
setFilterHead({});
|
|
533
|
+
} else {
|
|
534
|
+
// 重置
|
|
535
|
+
const json = DeepClone(selectFilterCom);
|
|
536
|
+
delete json[filterHead.name];
|
|
537
|
+
setSelectFilterCom(json);
|
|
538
|
+
changeFilter && changeFilter(Object.assign({}, json));
|
|
539
|
+
setFilterHead({});
|
|
540
|
+
}
|
|
572
541
|
};
|
|
573
542
|
/**
|
|
574
543
|
* 自定义过滤确定
|
|
575
544
|
* @param val {[name: string]: any[]}
|
|
576
545
|
* */
|
|
577
|
-
|
|
578
|
-
|
|
546
|
+
const filterCustomConfirm = function () {
|
|
547
|
+
let val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
579
548
|
changeFilter && changeFilter(Object.assign({}, val));
|
|
580
549
|
setFilterHead({});
|
|
581
550
|
};
|
|
@@ -583,12 +552,12 @@ var TableHead$1 = function TableHead(props) {
|
|
|
583
552
|
* 处理TableCell
|
|
584
553
|
* @param item 当前列信息
|
|
585
554
|
*/
|
|
586
|
-
|
|
587
|
-
|
|
555
|
+
const handCellClass = item => {
|
|
556
|
+
let str = 'table-header-box';
|
|
588
557
|
// 排序
|
|
589
558
|
if (sortTable && item.name && item.sort !== false) {
|
|
590
559
|
str += ' table-header-box-sort';
|
|
591
|
-
|
|
560
|
+
const index = orderFieldArr.indexOf(item.name);
|
|
592
561
|
if (index !== -1) {
|
|
593
562
|
// 升序
|
|
594
563
|
if (orderTypeArr[index] === 'asc') {
|
|
@@ -607,10 +576,10 @@ var TableHead$1 = function TableHead(props) {
|
|
|
607
576
|
return str;
|
|
608
577
|
};
|
|
609
578
|
// 复选框memo
|
|
610
|
-
|
|
579
|
+
const TableCheckMemo = useMemo(() => {
|
|
611
580
|
if (check) {
|
|
612
|
-
|
|
613
|
-
|
|
581
|
+
const handCls = () => {
|
|
582
|
+
let str = 'table-checkbox table-head-btn';
|
|
614
583
|
if (fixedColumn) {
|
|
615
584
|
str += ' table-fixed-dom-left';
|
|
616
585
|
// 左边没有定位,且没有单选,没有嵌套表格
|
|
@@ -638,10 +607,10 @@ var TableHead$1 = function TableHead(props) {
|
|
|
638
607
|
}
|
|
639
608
|
}, [check, indeterminate, checked, selectAll, posFixed, radio, expandable, fixedColumn]);
|
|
640
609
|
// 单选框memo
|
|
641
|
-
|
|
610
|
+
const TableRadioMemo = useMemo(() => {
|
|
642
611
|
if (radio) {
|
|
643
|
-
|
|
644
|
-
|
|
612
|
+
const handCls = () => {
|
|
613
|
+
let str = 'table-radio table-head-btn';
|
|
645
614
|
if (fixedColumn) {
|
|
646
615
|
str += ' table-fixed-dom-left';
|
|
647
616
|
// 左边没有定位,没有嵌套表格
|
|
@@ -663,10 +632,10 @@ var TableHead$1 = function TableHead(props) {
|
|
|
663
632
|
}
|
|
664
633
|
}, [radio, posFixed, expandable, fixedColumn]);
|
|
665
634
|
// 嵌套表格memo
|
|
666
|
-
|
|
635
|
+
const TableExpandableMemo = useMemo(() => {
|
|
667
636
|
if (expandable) {
|
|
668
|
-
|
|
669
|
-
|
|
637
|
+
const handCls = () => {
|
|
638
|
+
let str = 'table-expandable table-head-btn';
|
|
670
639
|
if (fixedColumn) {
|
|
671
640
|
str += ' table-fixed-dom-left';
|
|
672
641
|
// 左边没有定位,没有嵌套表格
|
|
@@ -688,21 +657,21 @@ var TableHead$1 = function TableHead(props) {
|
|
|
688
657
|
}
|
|
689
658
|
}, [expandable, posFixed, fixedColumn]);
|
|
690
659
|
// 过滤弹窗内容
|
|
691
|
-
|
|
692
|
-
|
|
660
|
+
const filterPopoverContent = () => {
|
|
661
|
+
const name = filterHead.name;
|
|
693
662
|
if (!name) return;
|
|
694
|
-
|
|
663
|
+
const filterValue = selectFilterCom[name] || [];
|
|
695
664
|
if (filterHead.filterRender) {
|
|
696
665
|
// 自定义渲染过滤
|
|
697
666
|
return filterHead.filterRender({
|
|
698
|
-
filterValue
|
|
667
|
+
filterValue,
|
|
699
668
|
selectFilter: selectFilterCom,
|
|
700
|
-
filterHead
|
|
669
|
+
filterHead,
|
|
701
670
|
setFilter: filterCustomConfirm
|
|
702
671
|
});
|
|
703
672
|
}
|
|
704
|
-
|
|
705
|
-
|
|
673
|
+
const arr = filterHead.enums || [];
|
|
674
|
+
let str = 'filter-select';
|
|
706
675
|
if (arr.length === 0) str += ' filter-select-none';
|
|
707
676
|
return jsx("div", Object.assign({
|
|
708
677
|
className: str
|
|
@@ -717,8 +686,8 @@ var TableHead$1 = function TableHead(props) {
|
|
|
717
686
|
children: [jsx("div", Object.assign({
|
|
718
687
|
className: "filter-select-box"
|
|
719
688
|
}, {
|
|
720
|
-
children: arr.map(
|
|
721
|
-
|
|
689
|
+
children: arr.map((item, index) => {
|
|
690
|
+
const checked = filterValue.indexOf(item.value) !== -1;
|
|
722
691
|
return jsxs("div", Object.assign({
|
|
723
692
|
onClick: clickFilter(item),
|
|
724
693
|
className: checked ? 'filter-select-item filter-select-item-select' : 'filter-select-item'
|
|
@@ -757,30 +726,28 @@ var TableHead$1 = function TableHead(props) {
|
|
|
757
726
|
}));
|
|
758
727
|
};
|
|
759
728
|
// 表格列拖拽放下
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
changeColumnWidth && changeColumnWidth(headCell, result);
|
|
763
|
-
};
|
|
729
|
+
const onDragDown = headCell => result => {
|
|
730
|
+
changeColumnWidth && changeColumnWidth(headCell, result);
|
|
764
731
|
};
|
|
765
732
|
// 获取宽度
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
733
|
+
const getWidth = item => {
|
|
734
|
+
let w = item.width || '';
|
|
735
|
+
const name = item.name || '';
|
|
736
|
+
const wDrag = headDataConfig[name] && headDataConfig[name].width;
|
|
770
737
|
if (wDrag) w = "".concat(wDrag, "px");
|
|
771
738
|
return w;
|
|
772
739
|
};
|
|
773
740
|
// 内容列memo
|
|
774
|
-
|
|
741
|
+
const TableContentMemo = useMemo(() => {
|
|
775
742
|
// 处理过滤的class
|
|
776
|
-
|
|
777
|
-
|
|
743
|
+
const handFilterClass = item => {
|
|
744
|
+
let str = 'table-header-filter';
|
|
778
745
|
if (filterHead.name === item.name) str += ' table-header-filter-show';
|
|
779
746
|
if (item.name && selectFilterCom[item.name] && selectFilterCom[item.name].length > 0) str += ' table-header-filter-select';
|
|
780
747
|
return str;
|
|
781
748
|
};
|
|
782
|
-
|
|
783
|
-
|
|
749
|
+
const handCls = item => {
|
|
750
|
+
let str = '';
|
|
784
751
|
if (item.className) str += item.className;
|
|
785
752
|
if (fixedColumn && item.fixed) {
|
|
786
753
|
str += " table-fixed-dom-".concat(item.fixed);
|
|
@@ -795,8 +762,8 @@ var TableHead$1 = function TableHead(props) {
|
|
|
795
762
|
}
|
|
796
763
|
return str;
|
|
797
764
|
};
|
|
798
|
-
|
|
799
|
-
|
|
765
|
+
const handStyle = item => {
|
|
766
|
+
const json = {
|
|
800
767
|
width: getWidth(item)
|
|
801
768
|
};
|
|
802
769
|
if (fixedColumn && item.fixed && item.width) {
|
|
@@ -810,13 +777,13 @@ var TableHead$1 = function TableHead(props) {
|
|
|
810
777
|
return Object.assign(Object.assign({}, json), item.style);
|
|
811
778
|
};
|
|
812
779
|
// 处理拖拽
|
|
813
|
-
|
|
780
|
+
const handDrag = item => {
|
|
814
781
|
if (item.name === 'table-serial-number') return false; // 序号不拖拽
|
|
815
782
|
if (dragColumn && item.drag !== false) return true;
|
|
816
783
|
return false;
|
|
817
784
|
};
|
|
818
|
-
return headData.map(
|
|
819
|
-
|
|
785
|
+
return headData.map((headCell, index) => {
|
|
786
|
+
let str = "".concat($prefixCls, "-filter-popover ").concat($prefixCls, "-scrollbar-small");
|
|
820
787
|
if (!headCell.filterRender) str += " ".concat($prefixCls, "-filter-popover-default");
|
|
821
788
|
return jsx(ThElement, Object.assign({
|
|
822
789
|
className: handCls(headCell),
|
|
@@ -833,9 +800,7 @@ var TableHead$1 = function TableHead(props) {
|
|
|
833
800
|
content: filterPopoverContent(),
|
|
834
801
|
onVisibleChange: clickHideFilter,
|
|
835
802
|
overlayClassName: str,
|
|
836
|
-
getPopupContainer: getPopupContainer ? getPopupContainer :
|
|
837
|
-
return document.body;
|
|
838
|
-
}
|
|
803
|
+
getPopupContainer: getPopupContainer ? getPopupContainer : () => document.body
|
|
839
804
|
}, {
|
|
840
805
|
children: jsxs("div", Object.assign({
|
|
841
806
|
className: handCellClass(headCell)
|
|
@@ -879,10 +844,10 @@ var TableHead$1 = function TableHead(props) {
|
|
|
879
844
|
});
|
|
880
845
|
}, [headData, sortTable, filter, orderFieldArr, orderTypeArr, align, filterHead, selectFilterCom, beyondText, selectFilter, fixedColumn, lineWidth, dragColumn, changeColumnWidth, headDataConfig, getPopupContainer, tipMaxWidth]);
|
|
881
846
|
// 操作栏memo
|
|
882
|
-
|
|
847
|
+
const TableOperateMemo = useMemo(() => {
|
|
883
848
|
if (operate) {
|
|
884
|
-
|
|
885
|
-
|
|
849
|
+
const handCls = () => {
|
|
850
|
+
let str = 'table-operate';
|
|
886
851
|
if (operate.operateBtnRender) str += ' table-operate-small';
|
|
887
852
|
if (fixedColumn) {
|
|
888
853
|
str += ' table-fixed-dom-right';
|
|
@@ -893,8 +858,8 @@ var TableHead$1 = function TableHead(props) {
|
|
|
893
858
|
}
|
|
894
859
|
return str;
|
|
895
860
|
};
|
|
896
|
-
|
|
897
|
-
|
|
861
|
+
const handStyle = () => {
|
|
862
|
+
const json = {
|
|
898
863
|
width: operate.width
|
|
899
864
|
};
|
|
900
865
|
if (fixedColumn) {
|
|
@@ -930,16 +895,16 @@ var TableHead$1 = function TableHead(props) {
|
|
|
930
895
|
}
|
|
931
896
|
}, [operate, align, posFixed, showColumns, posFixed, beyondText, fixedColumn, tipMaxWidth]);
|
|
932
897
|
// 显示列弹窗内容
|
|
933
|
-
|
|
898
|
+
const showListContent = () => {
|
|
934
899
|
return jsxs("div", Object.assign({
|
|
935
900
|
className: "show-colums-select"
|
|
936
901
|
}, {
|
|
937
902
|
children: [jsx("div", Object.assign({
|
|
938
903
|
className: "show-colums-select-box"
|
|
939
904
|
}, {
|
|
940
|
-
children: showList.map(
|
|
941
|
-
|
|
942
|
-
|
|
905
|
+
children: showList.map((item, index) => {
|
|
906
|
+
const checked = Boolean(headDataJson[item.name]);
|
|
907
|
+
let str = 'show-colums-select-item';
|
|
943
908
|
if (checked) str += ' show-colums-select-item-select';
|
|
944
909
|
if (item.disabledSelection) str += ' show-colums-select-item-disabled';
|
|
945
910
|
return jsxs("div", Object.assign({
|
|
@@ -973,9 +938,9 @@ var TableHead$1 = function TableHead(props) {
|
|
|
973
938
|
}));
|
|
974
939
|
};
|
|
975
940
|
// 显示列memo
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
941
|
+
const TableShowList = useMemo(() => {
|
|
942
|
+
const handCls = () => {
|
|
943
|
+
let str = 'show-colums table-fixed-dom-right';
|
|
979
944
|
// 没有固定列参数 或者 没有操作栏且没有右侧固定列
|
|
980
945
|
if (!fixedColumn || !operate && !(posFixed === null || posFixed === void 0 ? void 0 : posFixed.rightBol)) {
|
|
981
946
|
str += ' table-fixed-dom-right-first';
|
|
@@ -988,9 +953,7 @@ var TableHead$1 = function TableHead(props) {
|
|
|
988
953
|
content: showListContent(),
|
|
989
954
|
onVisibleChange: clickHideColums,
|
|
990
955
|
overlayClassName: "".concat($prefixCls, "-table-show-colums-popover ").concat($prefixCls, "-scrollbar-small"),
|
|
991
|
-
getPopupContainer: getPopupContainer ? getPopupContainer :
|
|
992
|
-
return document.body;
|
|
993
|
-
}
|
|
956
|
+
getPopupContainer: getPopupContainer ? getPopupContainer : () => document.body
|
|
994
957
|
}, {
|
|
995
958
|
children: jsx(ThElement, Object.assign({
|
|
996
959
|
align: "center",
|
|
@@ -1007,8 +970,8 @@ var TableHead$1 = function TableHead(props) {
|
|
|
1007
970
|
}));
|
|
1008
971
|
}, [showColumns, posFixed, operate, anchorElColums, showList, headDataJson, getPopupContainer, tipMaxWidth]);
|
|
1009
972
|
// 处理class
|
|
1010
|
-
|
|
1011
|
-
|
|
973
|
+
const handClass = () => {
|
|
974
|
+
let str = 'table-head';
|
|
1012
975
|
if (showColumns === 'inside') str += ' table-head-inside';
|
|
1013
976
|
if (!fixedTable) str += ' table-head-scroll'; // 防止长度过长
|
|
1014
977
|
// 没有 复选框,单选框,展开 按钮
|
|
@@ -1066,92 +1029,71 @@ var TdElement = function TdElement(props) {
|
|
|
1066
1029
|
}));
|
|
1067
1030
|
};
|
|
1068
1031
|
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
rowData =
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
onClickRow = props.onClickRow,
|
|
1123
|
-
rowClassMapping = props.rowClassMapping,
|
|
1124
|
-
tipMaxWidth = props.tipMaxWidth,
|
|
1125
|
-
lineHeight = props.lineHeight;
|
|
1126
|
-
var _useState = useState(0),
|
|
1127
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
1128
|
-
expandableColSpan = _useState2[0],
|
|
1129
|
-
setExpandableColSpan = _useState2[1]; // 嵌套表格合并列数
|
|
1130
|
-
var _useState3 = useState({}),
|
|
1131
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
1132
|
-
expandableRow = _useState4[0],
|
|
1133
|
-
setExpandableRow = _useState4[1]; // 当前哪行展开表格嵌套
|
|
1134
|
-
var _useState5 = useState(true),
|
|
1135
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
1136
|
-
showMoreBtn = _useState6[0],
|
|
1137
|
-
setShowMoreBtn = _useState6[1]; // 加载更多
|
|
1138
|
-
var _useState7 = useState({}),
|
|
1139
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
1140
|
-
disabledExpandJson = _useState8[0],
|
|
1141
|
-
setDisabledExpand = _useState8[1]; // 禁用加减部分嵌套
|
|
1142
|
-
var intl = useFormatMessage('Table', localeJson);
|
|
1032
|
+
const TableBody = props => {
|
|
1033
|
+
const {
|
|
1034
|
+
url,
|
|
1035
|
+
emptyProps,
|
|
1036
|
+
rowData = [],
|
|
1037
|
+
rowKey = 'key',
|
|
1038
|
+
check,
|
|
1039
|
+
radio,
|
|
1040
|
+
tableCell,
|
|
1041
|
+
expandable,
|
|
1042
|
+
headData = [],
|
|
1043
|
+
disabledJson = {},
|
|
1044
|
+
disabledArrStatus,
|
|
1045
|
+
checkJson = {},
|
|
1046
|
+
radioValue,
|
|
1047
|
+
selectCheck,
|
|
1048
|
+
selectRadio,
|
|
1049
|
+
align,
|
|
1050
|
+
operate,
|
|
1051
|
+
showColumns,
|
|
1052
|
+
fixedTable,
|
|
1053
|
+
fixedColumn,
|
|
1054
|
+
formatter,
|
|
1055
|
+
orderFieldArr = [],
|
|
1056
|
+
orderTypeArr = [],
|
|
1057
|
+
sortTable,
|
|
1058
|
+
loadState,
|
|
1059
|
+
loadMore,
|
|
1060
|
+
loadMoreRender,
|
|
1061
|
+
onClickMore,
|
|
1062
|
+
total,
|
|
1063
|
+
page,
|
|
1064
|
+
currentRowsPerPage,
|
|
1065
|
+
changePage,
|
|
1066
|
+
loadMoreUrl,
|
|
1067
|
+
expandMultiple = false,
|
|
1068
|
+
expandValue = [],
|
|
1069
|
+
disabledExpand = [],
|
|
1070
|
+
defaultExpandAllRows = false,
|
|
1071
|
+
onExpand,
|
|
1072
|
+
onRefresh,
|
|
1073
|
+
posFixed,
|
|
1074
|
+
beyondText,
|
|
1075
|
+
onClickRow,
|
|
1076
|
+
rowClassMapping,
|
|
1077
|
+
tipMaxWidth,
|
|
1078
|
+
lineHeight
|
|
1079
|
+
} = props;
|
|
1080
|
+
const [expandableColSpan, setExpandableColSpan] = useState(0); // 嵌套表格合并列数
|
|
1081
|
+
const [expandableRow, setExpandableRow] = useState({}); // 当前哪行展开表格嵌套
|
|
1082
|
+
const [showMoreBtn, setShowMoreBtn] = useState(true); // 加载更多
|
|
1083
|
+
const [disabledExpandJson, setDisabledExpand] = useState({}); // 禁用加减部分嵌套
|
|
1084
|
+
const intl = useFormatMessage('Table', localeJson);
|
|
1143
1085
|
// 默认是否展开所有
|
|
1144
|
-
useEffect(
|
|
1086
|
+
useEffect(() => {
|
|
1145
1087
|
if (!defaultExpandAllRows) {
|
|
1146
1088
|
setExpandableRow({});
|
|
1147
1089
|
return;
|
|
1148
1090
|
}
|
|
1149
|
-
|
|
1150
|
-
for (
|
|
1151
|
-
|
|
1152
|
-
|
|
1091
|
+
const json = {};
|
|
1092
|
+
for (let i = 0, l = rowData.length; i < l; i++) {
|
|
1093
|
+
const item = rowData[i] || {};
|
|
1094
|
+
const id = item[rowKey];
|
|
1153
1095
|
json[id] = {
|
|
1154
|
-
id
|
|
1096
|
+
id,
|
|
1155
1097
|
status: 'develop'
|
|
1156
1098
|
};
|
|
1157
1099
|
}
|
|
@@ -1159,41 +1101,41 @@ var TableBody = function TableBody(props) {
|
|
|
1159
1101
|
}, [defaultExpandAllRows, rowData, rowKey]);
|
|
1160
1102
|
// 监听展开表格
|
|
1161
1103
|
// 如果直接写expandMultiple, expandValue会死循环
|
|
1162
|
-
useEffect(
|
|
1104
|
+
useEffect(() => {
|
|
1163
1105
|
if (props.expandValue === undefined) return;
|
|
1164
|
-
|
|
1165
|
-
|
|
1106
|
+
const json = {};
|
|
1107
|
+
let expandValueHand = expandValue;
|
|
1166
1108
|
// 只展开一个,去第一个值
|
|
1167
1109
|
if (!expandMultiple && expandValue.length > 0) {
|
|
1168
1110
|
expandValueHand = [expandValue[0]];
|
|
1169
1111
|
}
|
|
1170
|
-
for (
|
|
1171
|
-
|
|
1112
|
+
for (let i = 0, l = expandValueHand.length; i < l; i++) {
|
|
1113
|
+
const id = expandValueHand[i];
|
|
1172
1114
|
json[id] = {
|
|
1173
|
-
id
|
|
1115
|
+
id,
|
|
1174
1116
|
status: 'develop'
|
|
1175
1117
|
};
|
|
1176
1118
|
}
|
|
1177
1119
|
setExpandableRow(json);
|
|
1178
1120
|
}, [props.expandMultiple, props.expandValue, rowData]);
|
|
1179
1121
|
// 监听禁用嵌套 props.disabledExpand 防止死循环
|
|
1180
|
-
useEffect(
|
|
1181
|
-
|
|
1182
|
-
for (
|
|
1183
|
-
|
|
1122
|
+
useEffect(() => {
|
|
1123
|
+
const json = {};
|
|
1124
|
+
for (let i = 0, l = disabledExpand.length; i < l; i++) {
|
|
1125
|
+
const id = disabledExpand[i];
|
|
1184
1126
|
json[id] = true;
|
|
1185
1127
|
}
|
|
1186
1128
|
setDisabledExpand(json);
|
|
1187
1129
|
}, [props.disabledExpand]);
|
|
1188
|
-
useEffect(
|
|
1130
|
+
useEffect(() => {
|
|
1189
1131
|
if (loadMoreUrl) {
|
|
1190
|
-
|
|
1132
|
+
const bol = Number(total) > Number(page) * Number(currentRowsPerPage);
|
|
1191
1133
|
setShowMoreBtn(bol);
|
|
1192
1134
|
}
|
|
1193
1135
|
}, [loadMoreUrl, total, page, currentRowsPerPage]);
|
|
1194
1136
|
// 处理嵌套表格合并列数
|
|
1195
|
-
useEffect(
|
|
1196
|
-
|
|
1137
|
+
useEffect(() => {
|
|
1138
|
+
let num = headData.length;
|
|
1197
1139
|
if (expandable) num += 1;
|
|
1198
1140
|
if (check) num += 1;
|
|
1199
1141
|
if (radio) num += 1;
|
|
@@ -1202,55 +1144,55 @@ var TableBody = function TableBody(props) {
|
|
|
1202
1144
|
setExpandableColSpan(num);
|
|
1203
1145
|
}, [headData, expandable, check, radio]);
|
|
1204
1146
|
// 展开/收起嵌套表格
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
status: status
|
|
1214
|
-
};
|
|
1215
|
-
if (expandMultiple) {
|
|
1216
|
-
// 展开多个
|
|
1217
|
-
expandableRow[id] = expandItem;
|
|
1218
|
-
setExpandableRow(Object.assign({}, expandableRow));
|
|
1219
|
-
} else {
|
|
1220
|
-
// 展开一个
|
|
1221
|
-
setExpandableRow(_defineProperty({}, id, expandItem));
|
|
1222
|
-
}
|
|
1223
|
-
onExpand && onExpand(row, status);
|
|
1224
|
-
event.stopPropagation();
|
|
1147
|
+
const handClickNestTable = row => event => {
|
|
1148
|
+
const id = row[rowKey];
|
|
1149
|
+
let expandItem = expandableRow[id] || {};
|
|
1150
|
+
let status = 'develop';
|
|
1151
|
+
if (expandItem.status === 'develop') status = 'retract';
|
|
1152
|
+
expandItem = {
|
|
1153
|
+
id,
|
|
1154
|
+
status
|
|
1225
1155
|
};
|
|
1156
|
+
if (expandMultiple) {
|
|
1157
|
+
// 展开多个
|
|
1158
|
+
expandableRow[id] = expandItem;
|
|
1159
|
+
setExpandableRow(Object.assign({}, expandableRow));
|
|
1160
|
+
} else {
|
|
1161
|
+
// 展开一个
|
|
1162
|
+
setExpandableRow({
|
|
1163
|
+
[id]: expandItem
|
|
1164
|
+
});
|
|
1165
|
+
}
|
|
1166
|
+
onExpand && onExpand(row, status);
|
|
1167
|
+
event.stopPropagation();
|
|
1226
1168
|
};
|
|
1227
1169
|
// 处理class
|
|
1228
|
-
|
|
1229
|
-
|
|
1170
|
+
const handClass = () => {
|
|
1171
|
+
let str = 'table-body';
|
|
1230
1172
|
if (!fixedTable) str += ' table-body-scroll';
|
|
1231
1173
|
// 没有 复选框,单选框,展开 按钮
|
|
1232
1174
|
if (!check && !radio && !expandable) str += ' table-body-no-btn';
|
|
1233
1175
|
return str;
|
|
1234
1176
|
};
|
|
1235
1177
|
// 处理嵌套表格class
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1178
|
+
const handExpandClass = row => {
|
|
1179
|
+
const id = row[rowKey];
|
|
1180
|
+
const expandItem = expandableRow[id] || {};
|
|
1181
|
+
let str = 'retract';
|
|
1240
1182
|
if (expandItem.status === 'develop') {
|
|
1241
1183
|
str = 'expand';
|
|
1242
1184
|
}
|
|
1243
1185
|
return str;
|
|
1244
1186
|
};
|
|
1245
1187
|
// 点击加载更多
|
|
1246
|
-
|
|
1188
|
+
const clickMore = () => {
|
|
1247
1189
|
if (loadMoreUrl) changePage && changePage();
|
|
1248
1190
|
onClickMore && onClickMore();
|
|
1249
1191
|
};
|
|
1250
1192
|
// 暂无数据memo
|
|
1251
|
-
|
|
1193
|
+
const NodataMemo = useMemo(() => {
|
|
1252
1194
|
// 处理刷新按钮
|
|
1253
|
-
|
|
1195
|
+
const handRefreshBtn = () => {
|
|
1254
1196
|
if ((emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.showRefresh) !== undefined) {
|
|
1255
1197
|
return emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.showRefresh;
|
|
1256
1198
|
}
|
|
@@ -1260,8 +1202,8 @@ var TableBody = function TableBody(props) {
|
|
|
1260
1202
|
return false;
|
|
1261
1203
|
};
|
|
1262
1204
|
// 处理className
|
|
1263
|
-
|
|
1264
|
-
|
|
1205
|
+
const handClassNoData = () => {
|
|
1206
|
+
let str = 'table-no-data';
|
|
1265
1207
|
if (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.size) str += " table-no-data-".concat(emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.size);
|
|
1266
1208
|
return str;
|
|
1267
1209
|
};
|
|
@@ -1274,24 +1216,24 @@ var TableBody = function TableBody(props) {
|
|
|
1274
1216
|
}, {
|
|
1275
1217
|
children: jsx(Empty, Object.assign({}, emptyProps, {
|
|
1276
1218
|
showRefresh: handRefreshBtn(),
|
|
1277
|
-
onRefresh:
|
|
1219
|
+
onRefresh: event => {
|
|
1278
1220
|
if (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.onRefresh) {
|
|
1279
1221
|
emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.onRefresh(event);
|
|
1280
1222
|
return;
|
|
1281
1223
|
}
|
|
1282
|
-
|
|
1224
|
+
onRefresh && onRefresh();
|
|
1283
1225
|
}
|
|
1284
1226
|
}))
|
|
1285
1227
|
}))
|
|
1286
1228
|
}));
|
|
1287
|
-
}, [expandableColSpan, emptyProps, url,
|
|
1229
|
+
}, [expandableColSpan, emptyProps, url, onRefresh]);
|
|
1288
1230
|
// 复选框useCallback
|
|
1289
|
-
|
|
1231
|
+
const TableCheckCallback = useCallback(row => {
|
|
1290
1232
|
if (check) {
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1233
|
+
const handId = row[rowKey];
|
|
1234
|
+
const disabledHand = Boolean(disabledJson[handId]);
|
|
1235
|
+
let checkHand = checkJson[handId] || false;
|
|
1236
|
+
let showCheck = true;
|
|
1295
1237
|
if (disabledHand && disabledArrStatus) {
|
|
1296
1238
|
// 选中
|
|
1297
1239
|
if (disabledArrStatus[handId] === true) {
|
|
@@ -1306,8 +1248,8 @@ var TableBody = function TableBody(props) {
|
|
|
1306
1248
|
showCheck = false;
|
|
1307
1249
|
}
|
|
1308
1250
|
}
|
|
1309
|
-
|
|
1310
|
-
|
|
1251
|
+
const handCls = () => {
|
|
1252
|
+
let str = 'table-checkbox table-body-btn';
|
|
1311
1253
|
if (fixedColumn) {
|
|
1312
1254
|
str += ' table-fixed-dom-left';
|
|
1313
1255
|
// 左边没有定位,且没有单选,没有嵌套表格
|
|
@@ -1324,7 +1266,7 @@ var TableBody = function TableBody(props) {
|
|
|
1324
1266
|
children: showCheck && jsx(Checkbox, {
|
|
1325
1267
|
disabled: disabledHand,
|
|
1326
1268
|
checked: checkHand,
|
|
1327
|
-
onChange:
|
|
1269
|
+
onChange: (event, bol) => {
|
|
1328
1270
|
event.stopPropagation();
|
|
1329
1271
|
selectCheck && selectCheck(event, bol, row[rowKey]);
|
|
1330
1272
|
}
|
|
@@ -1333,12 +1275,12 @@ var TableBody = function TableBody(props) {
|
|
|
1333
1275
|
}
|
|
1334
1276
|
}, [check, disabledJson, rowKey, checkJson, selectCheck, disabledArrStatus, posFixed, expandable, radio, fixedColumn]);
|
|
1335
1277
|
// 单选框useCallback
|
|
1336
|
-
|
|
1278
|
+
const TableRadioCallback = useCallback(row => {
|
|
1337
1279
|
if (radio) {
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1280
|
+
const handId = row[rowKey];
|
|
1281
|
+
const disabledHand = Boolean(disabledJson[handId]);
|
|
1282
|
+
let checkHand = radioValue === row[rowKey];
|
|
1283
|
+
let showRadio = true;
|
|
1342
1284
|
if (disabledHand && disabledArrStatus) {
|
|
1343
1285
|
// 选中
|
|
1344
1286
|
if (disabledArrStatus[handId] === true) {
|
|
@@ -1353,8 +1295,8 @@ var TableBody = function TableBody(props) {
|
|
|
1353
1295
|
showRadio = false;
|
|
1354
1296
|
}
|
|
1355
1297
|
}
|
|
1356
|
-
|
|
1357
|
-
|
|
1298
|
+
const handCls = () => {
|
|
1299
|
+
let str = 'table-radio table-body-btn';
|
|
1358
1300
|
if (fixedColumn) {
|
|
1359
1301
|
str += ' table-fixed-dom-left';
|
|
1360
1302
|
// 左边没有定位,没有嵌套表格
|
|
@@ -1371,7 +1313,7 @@ var TableBody = function TableBody(props) {
|
|
|
1371
1313
|
children: showRadio && jsx(Radio, {
|
|
1372
1314
|
disabled: disabledHand,
|
|
1373
1315
|
checked: checkHand,
|
|
1374
|
-
onChange:
|
|
1316
|
+
onChange: event => {
|
|
1375
1317
|
event.stopPropagation();
|
|
1376
1318
|
selectRadio && selectRadio(event, row[rowKey]);
|
|
1377
1319
|
}
|
|
@@ -1380,13 +1322,13 @@ var TableBody = function TableBody(props) {
|
|
|
1380
1322
|
}
|
|
1381
1323
|
}, [radio, disabledJson, radioValue, rowKey, selectRadio, disabledArrStatus, expandable, posFixed, fixedColumn]);
|
|
1382
1324
|
// 嵌套加减useCallback
|
|
1383
|
-
|
|
1325
|
+
const TableExpandableMemo = useCallback(row => {
|
|
1384
1326
|
if (!expandable) return null;
|
|
1385
|
-
|
|
1327
|
+
const expandableDemo = expandable(row);
|
|
1386
1328
|
// 禁用一行表格展开 或者 展开表格返回值为false,返回空列
|
|
1387
1329
|
if (disabledExpandJson[row[rowKey]] || expandableDemo === false) return jsx(TdElement, {});
|
|
1388
|
-
|
|
1389
|
-
|
|
1330
|
+
const handCls = () => {
|
|
1331
|
+
let str = 'table-expandable table-body-btn';
|
|
1390
1332
|
if (fixedColumn) {
|
|
1391
1333
|
str += ' table-fixed-dom-left';
|
|
1392
1334
|
// 左边没有定位,没有嵌套表格
|
|
@@ -1407,17 +1349,17 @@ var TableBody = function TableBody(props) {
|
|
|
1407
1349
|
}));
|
|
1408
1350
|
}, [expandable, expandableRow, rowKey, disabledExpandJson, onExpand, fixedColumn]);
|
|
1409
1351
|
// 表格一行内容useCallback
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
orderFieldArr
|
|
1413
|
-
orderTypeArr
|
|
1352
|
+
const TableContentUseCallback = useCallback((row, rowIndex) => {
|
|
1353
|
+
const params = {
|
|
1354
|
+
orderFieldArr,
|
|
1355
|
+
orderTypeArr
|
|
1414
1356
|
};
|
|
1415
|
-
|
|
1416
|
-
|
|
1357
|
+
const handContentClass = item => {
|
|
1358
|
+
let str = 'table-content-columms';
|
|
1417
1359
|
if (item.className) str += " ".concat(item.className);
|
|
1418
1360
|
// 排序
|
|
1419
1361
|
if (sortTable && item.name && item.sort !== false) {
|
|
1420
|
-
|
|
1362
|
+
const index = orderFieldArr.indexOf(item.name);
|
|
1421
1363
|
if (index !== -1) {
|
|
1422
1364
|
// 升序
|
|
1423
1365
|
if (orderTypeArr[index] === 'asc') {
|
|
@@ -1442,8 +1384,8 @@ var TableBody = function TableBody(props) {
|
|
|
1442
1384
|
}
|
|
1443
1385
|
return str;
|
|
1444
1386
|
};
|
|
1445
|
-
|
|
1446
|
-
|
|
1387
|
+
const handStyle = item => {
|
|
1388
|
+
const json = {};
|
|
1447
1389
|
if (fixedColumn && item.fixed && item.width) {
|
|
1448
1390
|
if (item.fixed === 'left') {
|
|
1449
1391
|
json.left = "".concat(item.paraui_left_width, "px");
|
|
@@ -1454,12 +1396,12 @@ var TableBody = function TableBody(props) {
|
|
|
1454
1396
|
}
|
|
1455
1397
|
return json;
|
|
1456
1398
|
};
|
|
1457
|
-
return tableCell ? tableCell(row, params) : headData.map(
|
|
1458
|
-
|
|
1459
|
-
|
|
1399
|
+
return tableCell ? tableCell(row, params) : headData.map((item, index) => {
|
|
1400
|
+
let text = row[item.name];
|
|
1401
|
+
let colSpan = 1;
|
|
1460
1402
|
if (item.render) text = item.render(row, item, row[item.name], index, rowIndex);
|
|
1461
1403
|
if (formatter) text = formatter(row, item, row[item.name], index, rowIndex);
|
|
1462
|
-
|
|
1404
|
+
const itemStyle = handStyle(item);
|
|
1463
1405
|
// 存在显示列,最后一列占两格
|
|
1464
1406
|
if (showColumns === 'inside' && !operate && index === headData.length - 1) {
|
|
1465
1407
|
colSpan = 2;
|
|
@@ -1483,25 +1425,25 @@ var TableBody = function TableBody(props) {
|
|
|
1483
1425
|
});
|
|
1484
1426
|
}, [tableCell, headData, align, formatter, orderFieldArr, orderTypeArr, sortTable, showColumns, operate, beyondText, fixedColumn, tipMaxWidth]);
|
|
1485
1427
|
// 操作栏useCallback
|
|
1486
|
-
|
|
1428
|
+
const TableOperateUseCallback = useCallback((row, rowIndex) => {
|
|
1487
1429
|
if (operate) {
|
|
1488
|
-
|
|
1430
|
+
let colSpan = 1;
|
|
1489
1431
|
if (showColumns === 'inside') colSpan = 2;
|
|
1490
|
-
|
|
1432
|
+
const handOperate = () => {
|
|
1491
1433
|
if (operate.render) return operate.render(row);
|
|
1492
1434
|
if (operate.operateBtnRender) {
|
|
1493
|
-
|
|
1435
|
+
const operateConfig = operate.operateBtnRender(row, rowIndex);
|
|
1494
1436
|
return jsx(OperateBtn, Object.assign({}, operateConfig));
|
|
1495
1437
|
}
|
|
1496
1438
|
};
|
|
1497
|
-
|
|
1498
|
-
|
|
1439
|
+
const handStyle = () => {
|
|
1440
|
+
const json = {
|
|
1499
1441
|
right: '0'
|
|
1500
1442
|
};
|
|
1501
1443
|
return json;
|
|
1502
1444
|
};
|
|
1503
|
-
|
|
1504
|
-
|
|
1445
|
+
const handCls = () => {
|
|
1446
|
+
let str = 'table-operate';
|
|
1505
1447
|
if (fixedColumn) {
|
|
1506
1448
|
str += ' table-fixed-dom-right';
|
|
1507
1449
|
if (!(posFixed === null || posFixed === void 0 ? void 0 : posFixed.rightBol)) {
|
|
@@ -1521,11 +1463,11 @@ var TableBody = function TableBody(props) {
|
|
|
1521
1463
|
}
|
|
1522
1464
|
}, [operate, align, showColumns, posFixed, fixedColumn]);
|
|
1523
1465
|
// 嵌套表格useCallback
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1466
|
+
const TableExpandableContentUseCallback = useCallback(row => {
|
|
1467
|
+
const id = row[rowKey];
|
|
1468
|
+
const expandItem = expandableRow[id] || {};
|
|
1527
1469
|
if (expandable && expandItem.status === 'develop') {
|
|
1528
|
-
|
|
1470
|
+
const expandableDemo = expandable(row);
|
|
1529
1471
|
if (expandableDemo === false) return null; // 展开表格返回值为false,不展示这一行
|
|
1530
1472
|
return jsx(TrElement, Object.assign({
|
|
1531
1473
|
className: "table-body-expand-row"
|
|
@@ -1540,7 +1482,7 @@ var TableBody = function TableBody(props) {
|
|
|
1540
1482
|
}
|
|
1541
1483
|
}, [expandable, expandableRow, expandableColSpan, rowKey]);
|
|
1542
1484
|
// 加载更多
|
|
1543
|
-
|
|
1485
|
+
const MoreMemo = useMemo(() => {
|
|
1544
1486
|
if (!loadMore || !showMoreBtn) return null;
|
|
1545
1487
|
return jsx(TrElement, Object.assign({
|
|
1546
1488
|
className: "more-table-row",
|
|
@@ -1563,10 +1505,10 @@ var TableBody = function TableBody(props) {
|
|
|
1563
1505
|
}))
|
|
1564
1506
|
}));
|
|
1565
1507
|
}, [expandableColSpan, loadMore, loadMoreRender, onClickMore, showMoreBtn, changePage, loadMoreUrl, lineHeight]);
|
|
1566
|
-
|
|
1508
|
+
const TableBodySubjectContentMemo = useMemo(() => {
|
|
1567
1509
|
return jsx(Fragment, {
|
|
1568
|
-
children: rowData.map(
|
|
1569
|
-
|
|
1510
|
+
children: rowData.map((row, index) => {
|
|
1511
|
+
let str = 'table-body-row';
|
|
1570
1512
|
if (rowClassMapping && rowClassMapping[row[rowKey]]) {
|
|
1571
1513
|
str += " ".concat(rowClassMapping[row[rowKey]]);
|
|
1572
1514
|
}
|
|
@@ -1576,7 +1518,7 @@ var TableBody = function TableBody(props) {
|
|
|
1576
1518
|
style: {
|
|
1577
1519
|
height: "".concat(lineHeight, "px")
|
|
1578
1520
|
},
|
|
1579
|
-
onClick:
|
|
1521
|
+
onClick: e => {
|
|
1580
1522
|
onClickRow && onClickRow(row, e);
|
|
1581
1523
|
}
|
|
1582
1524
|
}, {
|
|
@@ -1587,13 +1529,13 @@ var TableBody = function TableBody(props) {
|
|
|
1587
1529
|
});
|
|
1588
1530
|
}, [rowData, rowKey, disabledJson, checkJson, radio, radioValue, expandable, expandableRow, tableCell, headData, align, operate, expandableColSpan, selectCheck, selectRadio, disabledExpandJson, onExpand, disabledArrStatus, showColumns, onClickRow, rowClassMapping, tipMaxWidth, lineHeight]);
|
|
1589
1531
|
// 内容memo
|
|
1590
|
-
|
|
1532
|
+
const TableBodyContentMemo = useMemo(() => {
|
|
1591
1533
|
return jsxs(Fragment$1, {
|
|
1592
1534
|
children: [TableBodySubjectContentMemo, MoreMemo]
|
|
1593
1535
|
});
|
|
1594
1536
|
}, [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]);
|
|
1595
1537
|
// 处理内容
|
|
1596
|
-
|
|
1538
|
+
const handContent = () => {
|
|
1597
1539
|
// 无数据,且不再请求,显示暂无数据
|
|
1598
1540
|
if (rowData.length === 0 && !loadState) return NodataMemo;
|
|
1599
1541
|
return TableBodyContentMemo;
|
|
@@ -1605,35 +1547,29 @@ var TableBody = function TableBody(props) {
|
|
|
1605
1547
|
}));
|
|
1606
1548
|
};
|
|
1607
1549
|
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
checkNumber =
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
setIndeterminate = _useState2[1]; // 半选中
|
|
1632
|
-
var _useState3 = useState(false),
|
|
1633
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
1634
|
-
checked = _useState4[0],
|
|
1635
|
-
setChecked = _useState4[1]; // 选中
|
|
1636
|
-
useEffect(function () {
|
|
1550
|
+
const TableHead = props => {
|
|
1551
|
+
const {
|
|
1552
|
+
paginationType,
|
|
1553
|
+
flippingArrow,
|
|
1554
|
+
autoPagination,
|
|
1555
|
+
total,
|
|
1556
|
+
page,
|
|
1557
|
+
rowsPerPage,
|
|
1558
|
+
currentRowsPerPage,
|
|
1559
|
+
changePage,
|
|
1560
|
+
changeRowsPerPage,
|
|
1561
|
+
refreshInside,
|
|
1562
|
+
checkCount,
|
|
1563
|
+
onRefresh,
|
|
1564
|
+
selectAll,
|
|
1565
|
+
selectStatus,
|
|
1566
|
+
checkNumber = 0,
|
|
1567
|
+
currentPageTotal = 0
|
|
1568
|
+
} = props;
|
|
1569
|
+
const intl = useFormatMessage('Table', localeJson);
|
|
1570
|
+
const [indeterminate, setIndeterminate] = useState(false); // 半选中
|
|
1571
|
+
const [checked, setChecked] = useState(false); // 选中
|
|
1572
|
+
useEffect(() => {
|
|
1637
1573
|
// 全选
|
|
1638
1574
|
if (selectStatus === 'all') {
|
|
1639
1575
|
setChecked(true);
|
|
@@ -1655,23 +1591,23 @@ var TableHead = function TableHead(props) {
|
|
|
1655
1591
|
* @param event 操作元素
|
|
1656
1592
|
* @param bol 选中 / 不选中
|
|
1657
1593
|
*/
|
|
1658
|
-
|
|
1594
|
+
const onSelectAll = (event, bol) => {
|
|
1659
1595
|
if (selectAll) selectAll(event, bol);
|
|
1660
1596
|
};
|
|
1661
1597
|
// 改变页面
|
|
1662
|
-
|
|
1598
|
+
const changePageCom = num => {
|
|
1663
1599
|
changePage && changePage(num);
|
|
1664
1600
|
};
|
|
1665
1601
|
// 改变每页显示条数
|
|
1666
|
-
|
|
1602
|
+
const changeRowsPerPageCom = num => {
|
|
1667
1603
|
changeRowsPerPage && changeRowsPerPage(num);
|
|
1668
1604
|
};
|
|
1669
1605
|
// 刷新
|
|
1670
|
-
|
|
1606
|
+
const clickRefresh = () => {
|
|
1671
1607
|
onRefresh && onRefresh();
|
|
1672
1608
|
};
|
|
1673
1609
|
// 处理分页右侧
|
|
1674
|
-
|
|
1610
|
+
const handlePaginationRight = () => {
|
|
1675
1611
|
if (!checkCount) return null;
|
|
1676
1612
|
return jsxs("div", Object.assign({
|
|
1677
1613
|
className: 'table-pagination-right'
|
|
@@ -1694,8 +1630,8 @@ var TableHead = function TableHead(props) {
|
|
|
1694
1630
|
}));
|
|
1695
1631
|
};
|
|
1696
1632
|
// 处理样式
|
|
1697
|
-
|
|
1698
|
-
|
|
1633
|
+
const handleClass = () => {
|
|
1634
|
+
const str = 'table-pagination';
|
|
1699
1635
|
return str;
|
|
1700
1636
|
};
|
|
1701
1637
|
return jsxs("div", Object.assign({
|
|
@@ -1712,9 +1648,7 @@ var TableHead = function TableHead(props) {
|
|
|
1712
1648
|
currentRowsPerPage: currentRowsPerPage,
|
|
1713
1649
|
changePage: changePageCom,
|
|
1714
1650
|
changeRowsPerPage: changeRowsPerPageCom,
|
|
1715
|
-
getPopupContainer:
|
|
1716
|
-
return document.body;
|
|
1717
|
-
}
|
|
1651
|
+
getPopupContainer: () => document.body
|
|
1718
1652
|
}), refreshInside && jsx(Button.IconButton, Object.assign({
|
|
1719
1653
|
className: 'refresh-btn',
|
|
1720
1654
|
variant: "outlined",
|
|
@@ -1728,14 +1662,16 @@ var TableHead = function TableHead(props) {
|
|
|
1728
1662
|
var css_248z$2 = ".table-container {\n overflow-x: auto;\n}";
|
|
1729
1663
|
styleInject(css_248z$2);
|
|
1730
1664
|
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1665
|
+
const TableContainer = props => {
|
|
1666
|
+
const {
|
|
1667
|
+
cRef,
|
|
1668
|
+
className,
|
|
1669
|
+
style,
|
|
1670
|
+
children
|
|
1671
|
+
} = props,
|
|
1736
1672
|
otherProps = __rest(props, ["cRef", "className", "style", "children"]);
|
|
1737
|
-
|
|
1738
|
-
|
|
1673
|
+
const handClass = () => {
|
|
1674
|
+
let str = 'table-container';
|
|
1739
1675
|
if (className) str += " ".concat(className);
|
|
1740
1676
|
return str;
|
|
1741
1677
|
};
|
|
@@ -1751,14 +1687,16 @@ var TableContainer = function TableContainer(props) {
|
|
|
1751
1687
|
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}";
|
|
1752
1688
|
styleInject(css_248z$1);
|
|
1753
1689
|
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1690
|
+
const TableElement = props => {
|
|
1691
|
+
const {
|
|
1692
|
+
className,
|
|
1693
|
+
style,
|
|
1694
|
+
fixedColumn,
|
|
1695
|
+
children
|
|
1696
|
+
} = props,
|
|
1759
1697
|
otherProps = __rest(props, ["className", "style", "fixedColumn", "children"]);
|
|
1760
|
-
|
|
1761
|
-
|
|
1698
|
+
const handClass = () => {
|
|
1699
|
+
let str = 'table-element';
|
|
1762
1700
|
if (fixedColumn) str += ' table-element-fixed-column';
|
|
1763
1701
|
if (className) str += " ".concat(className);
|
|
1764
1702
|
return str;
|
|
@@ -1771,7 +1709,7 @@ var TableElement = function TableElement(props) {
|
|
|
1771
1709
|
}));
|
|
1772
1710
|
};
|
|
1773
1711
|
|
|
1774
|
-
var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-table {\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: white;\n font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n font-size: 14px;\n font-weight: 400;\n position: relative;\n}\n.paraui-v4-table.paraui-v4-table-draggable * {\n user-select: none !important;\n}\n.paraui-v4-table.paraui-v4-table-fixed-table > .table-contain > table {\n table-layout: fixed;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn > .table-contain > table .table-checkbox {\n left: 0;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn > .table-contain > table .table-radio {\n left: 0;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn > .table-contain > table .table-expandable {\n left: 0;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn.paraui-v4-table-radio.paraui-v4-table-check .table-radio {\n left: 48px;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn.paraui-v4-table-expandable.paraui-v4-table-check .table-expandable {\n left: 48px;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn.paraui-v4-table-expandable.paraui-v4-table-check.paraui-v4-table-radio .table-expandable {\n left: 80px;\n}\n.paraui-v4-table.paraui-v4-table-no-data > .table-container > table {\n height: 100%;\n}\n.paraui-v4-table.paraui-v4-table-no-data > .table-container > table .paraui-v4-empty {\n overflow: hidden;\n}\n.paraui-v4-table.paraui-v4-table-load.paraui-v4-table-no-data > .table-container > table {\n height: auto;\n}\n.paraui-v4-table.paraui-v4-table-pagination > .table-contain {\n height: calc(100% - 36px);\n}\n.paraui-v4-table.paraui-v4-table-pagination.table-load-more > .table-contain {\n height: 100%;\n}\n.paraui-v4-table.paraui-v4-table-load-more.paraui-v4-table-pagination > .table-contain {\n height: 100%;\n}\n.paraui-v4-table > .table-contain {\n height: 100%;\n position: relative;\n}\n.paraui-v4-table > .table-contain > table {\n height: auto;\n}\n.paraui-v4-table > .table-contain > table .table-checkbox > label {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-checkbox .table-header-box {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-radio > label {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-radio .table-header-box {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-expandable > svg {\n vertical-align: middle;\n}\n.paraui-v4-table > .table-contain > table > .table-head {\n width: 100%;\n white-space: nowrap;\n}\n.paraui-v4-table > .table-contain > table > .table-head > tr th {\n height: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-head.table-head-scroll tr th {\n max-width: 240px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-serial-number .table-header-box .table-header-title {\n padding-right: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box {\n height: 47px;\n line-height: 47px;\n position: relative;\n padding: 0 8px;\n display: flex;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-title {\n max-width: 100%;\n display: flex;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-title > .table-header-title-label {\n width: 100%;\n color: rgb(92, 101, 115);\n font-weight: 700;\n font-size: 14px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span {\n width: 20px;\n height: 20px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n border-radius: 2px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span:hover {\n background-color: rgba(46, 101, 230, 0.1);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span:hover > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > svg {\n font-size: 12px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > .up-svg {\n position: relative;\n top: 3px;\n transform: scale(0.8);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > .down-svg {\n position: relative;\n top: -3px;\n transform: scale(0.8);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n cursor: pointer;\n border-radius: 2px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span:hover {\n background-color: rgba(46, 101, 230, 0.1);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span:hover > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span > svg {\n font-size: 14px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-show > span > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-select > span > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-select > span:after {\n position: absolute;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background-color: rgb(244, 66, 66);\n content: \"\";\n right: 3px;\n top: 2px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort > .table-header-title {\n padding-right: 8px;\n max-width: calc(100% - 20px);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-filter > .table-header-title {\n padding-right: 8px;\n max-width: calc(100% - 20px);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort.table-header-box-filter > .table-header-title {\n max-width: calc(100% - 40px);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-asc > .table-sort-svg > span > .up-svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-desc > .table-sort-svg > span > .down-svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums {\n width: 53px;\n cursor: pointer;\n border-left: 1px solid rgb(234, 236, 241);\n right: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums .table-header-box {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums .table-header-box > svg {\n font-size: 20px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums .table-header-box:hover > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head.table-head-no-btn tr th:first-child .table-header-box {\n padding-left: 20px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn {\n width: 32px;\n padding: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn > .table-header-box {\n width: 32px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn:first-child {\n width: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn:first-child > .table-header-box {\n width: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-body {\n width: 100%;\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-scroll tr td {\n max-width: 240px;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td {\n background-color: white;\n color: rgb(29, 33, 38);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate {\n padding-right: 16px;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr:nth-of-type(2n) td {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr:hover td {\n background-color: rgb(240, 245, 255);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr .table-expandable > svg {\n transition: all 0.3s;\n cursor: pointer;\n font-size: 18px;\n color: rgb(92, 101, 115);\n transform: rotate(270deg);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr .table-expandable > svg:hover {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr .table-expandable > .expand {\n transform: rotate(360deg);\n}\n.paraui-v4-table > .table-contain > table > .table-body .more-table-row {\n cursor: pointer;\n position: sticky;\n bottom: 0;\n z-index: 10;\n}\n.paraui-v4-table > .table-contain > table > .table-body .more-table-row .more-btn {\n color: rgb(46, 101, 230);\n font-size: 14px;\n}\n.paraui-v4-table > .table-contain > table > .table-body .more-table-row > .td-element {\n position: relative;\n background: white;\n box-shadow: 4px -4px 8px 0px rgb(234, 236, 241);\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-no-btn tr td:first-child {\n padding-left: 20px;\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-no-btn tr.more-table-row td:first-child {\n padding-left: 8px;\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-no-btn > .table-no-data > td:first-child {\n padding: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-body .table-body-btn {\n width: 32px;\n padding: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-body .table-body-btn:first-child {\n width: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-body > .table-no-data {\n height: calc(100% - 50px);\n}\n.paraui-v4-table > .table-contain > table > .table-body > .table-no-data:hover td {\n background-color: white;\n}\n.paraui-v4-table > .table-contain > table > .table-body > .table-no-data > td {\n padding: 56px 0 0 0;\n}\n.paraui-v4-table > .table-contain > .table-pos-line {\n position: absolute;\n top: 0;\n width: 1px;\n background-color: rgb(46, 101, 230);\n z-index: 1000;\n}\n.paraui-v4-table > .table-pagination {\n width: 100%;\n height: 36px;\n display: flex;\n align-items: flex-end;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right {\n display: flex;\n height: 32px;\n align-items: center;\n color: rgb(29, 33, 38);\n line-height: 32px;\n padding-left: 16px;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right .all-select {\n margin-left: 12px;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right .line {\n width: 1px;\n height: 12px;\n background-color: rgb(212, 218, 227);\n margin: 0 10px;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right .check-number {\n width: 65px;\n display: inline-block;\n}\n.paraui-v4-table > .table-pagination .table-pagination-com {\n flex: 1;\n justify-content: flex-end;\n}\n.paraui-v4-table > .table-pagination .refresh-btn {\n margin-left: 20px;\n}\n\n.paraui-v4-table-show-colums-popover > .component-popover-content {\n min-width: 200px;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box {\n padding-top: 4px;\n max-height: 320px;\n overflow-y: auto;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item {\n height: 30px;\n line-height: 30px;\n cursor: pointer;\n display: flex;\n padding: 0 10px;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > label {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > span {\n padding-left: 8px;\n color: rgb(29, 33, 38);\n font-size: 14px;\n display: inline-block;\n width: calc(100% - 14px);\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item:hover {\n background: rgb(247, 248, 250);\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-disabled {\n cursor: inherit;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-disabled > span {\n color: rgb(29, 33, 38);\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-disabled:hover {\n background: transparent;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer {\n height: 36px;\n border-top: 1px solid rgb(247, 248, 250);\n text-align: center;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button {\n width: 100%;\n height: 100%;\n margin: 0;\n}\n\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box {\n padding-top: 4px;\n max-height: 320px;\n overflow-y: auto;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item {\n height: 30px;\n line-height: 30px;\n cursor: pointer;\n display: flex;\n padding: 0 10px;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item > label {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item > span {\n padding-left: 8px;\n color: rgb(29, 33, 38);\n font-size: 14px;\n display: inline-block;\n width: calc(100% - 14px);\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item:hover {\n background: rgb(247, 248, 250);\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-footer {\n height: 36px;\n border-top: 1px solid rgb(247, 248, 250);\n text-align: center;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button {\n width: 50%;\n height: 100%;\n margin: 0;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select.filter-select-none {\n text-align: center;\n padding: 20px 0;\n}\n.paraui-v4-filter-popover.paraui-v4-filter-popover-default > .component-popover-content {\n min-width: 200px;\n}";
|
|
1712
|
+
var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-table {\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: white;\n font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n font-size: 14px;\n font-weight: 400;\n position: relative;\n}\n.paraui-v4-table.paraui-v4-table-draggable * {\n user-select: none !important;\n}\n.paraui-v4-table.paraui-v4-table-fixed-table > .table-contain > table {\n table-layout: fixed;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn > .table-contain > table .table-checkbox {\n left: 0;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn > .table-contain > table .table-radio {\n left: 0;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn > .table-contain > table .table-expandable {\n left: 0;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn.paraui-v4-table-radio.paraui-v4-table-check .table-radio {\n left: 48px;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn.paraui-v4-table-expandable.paraui-v4-table-check .table-expandable {\n left: 48px;\n}\n.paraui-v4-table.paraui-v4-table-fixed-cloumn.paraui-v4-table-expandable.paraui-v4-table-check.paraui-v4-table-radio .table-expandable {\n left: 80px;\n}\n.paraui-v4-table.paraui-v4-table-no-data > .table-container > table {\n height: 100%;\n}\n.paraui-v4-table.paraui-v4-table-no-data > .table-container > table .paraui-v4-empty {\n overflow: hidden;\n}\n.paraui-v4-table.paraui-v4-table-load.paraui-v4-table-no-data > .table-container > table {\n height: auto;\n}\n.paraui-v4-table.paraui-v4-table-pagination > .table-contain {\n height: calc(100% - 36px);\n}\n.paraui-v4-table.paraui-v4-table-pagination.table-load-more > .table-contain {\n height: 100%;\n}\n.paraui-v4-table.paraui-v4-table-load-more.paraui-v4-table-pagination > .table-contain {\n height: 100%;\n}\n.paraui-v4-table > .table-contain {\n height: 100%;\n position: relative;\n}\n.paraui-v4-table > .table-contain > table {\n height: auto;\n}\n.paraui-v4-table > .table-contain > table .table-checkbox > label {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-checkbox .table-header-box {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-radio > label {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-radio .table-header-box {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.paraui-v4-table > .table-contain > table .table-expandable > svg {\n vertical-align: middle;\n}\n.paraui-v4-table > .table-contain > table > .table-head {\n width: 100%;\n white-space: nowrap;\n}\n.paraui-v4-table > .table-contain > table > .table-head > tr th {\n height: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-head.table-head-scroll tr th {\n max-width: 240px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-serial-number .table-header-box .table-header-title {\n padding-right: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box {\n height: 47px;\n line-height: 47px;\n position: relative;\n padding: 0 8px;\n display: flex;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-title {\n max-width: 100%;\n display: flex;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-title > .table-header-title-label {\n width: 100%;\n color: rgb(92, 101, 115);\n font-weight: 700;\n font-size: 14px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span {\n width: 20px;\n height: 20px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n border-radius: 2px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span:hover {\n background-color: rgba(46, 101, 230, 0.1);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span:hover > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > svg {\n font-size: 12px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > .up-svg {\n position: relative;\n top: 3px;\n transform: scale(0.8);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > .down-svg {\n position: relative;\n top: -3px;\n transform: scale(0.8);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n cursor: pointer;\n border-radius: 2px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span:hover {\n background-color: rgba(46, 101, 230, 0.1);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span:hover > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span > svg {\n font-size: 14px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-show > span > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-select > span > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-select > span:after {\n position: absolute;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background-color: rgb(244, 66, 66);\n content: \"\";\n right: 3px;\n top: 2px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort > .table-header-title {\n padding-right: 8px;\n max-width: calc(100% - 20px);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-filter > .table-header-title {\n padding-right: 8px;\n max-width: calc(100% - 20px);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort.table-header-box-filter > .table-header-title {\n max-width: calc(100% - 40px);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-asc > .table-sort-svg > span > .up-svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-desc > .table-sort-svg > span > .down-svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums {\n width: 53px;\n cursor: pointer;\n border-left: 1px solid rgb(234, 236, 241);\n right: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums .table-header-box {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums .table-header-box > svg {\n font-size: 20px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-table > .table-contain > table > .table-head .show-colums .table-header-box:hover > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-head.table-head-no-btn tr th:first-child .table-header-box {\n padding-left: 20px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn {\n width: 32px;\n padding: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn > .table-header-box {\n width: 32px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn:first-child {\n width: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-head .table-head-btn:first-child > .table-header-box {\n width: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-body {\n width: 100%;\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-scroll tr td {\n max-width: 240px;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td {\n background-color: white;\n color: rgb(29, 33, 38);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr td.table-operate {\n padding-right: 16px;\n}\n.paraui-v4-table > .table-contain > table > .table-body tr:nth-of-type(2n) td {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr:hover td {\n background-color: rgb(233, 239, 255);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr .table-expandable > svg {\n transition: all 0.3s;\n cursor: pointer;\n font-size: 18px;\n color: rgb(92, 101, 115);\n transform: rotate(270deg);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr .table-expandable > svg:hover {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-table > .table-contain > table > .table-body tr .table-expandable > .expand {\n transform: rotate(360deg);\n}\n.paraui-v4-table > .table-contain > table > .table-body .more-table-row {\n cursor: pointer;\n position: sticky;\n bottom: 0;\n z-index: 10;\n}\n.paraui-v4-table > .table-contain > table > .table-body .more-table-row .more-btn {\n color: rgb(46, 101, 230);\n font-size: 14px;\n}\n.paraui-v4-table > .table-contain > table > .table-body .more-table-row > .td-element {\n position: relative;\n background: white;\n box-shadow: 4px -4px 8px 0px rgb(234, 236, 241);\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-no-btn tr td:first-child {\n padding-left: 20px;\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-no-btn tr.more-table-row td:first-child {\n padding-left: 8px;\n}\n.paraui-v4-table > .table-contain > table > .table-body.table-body-no-btn > .table-no-data > td:first-child {\n padding: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-body .table-body-btn {\n width: 32px;\n padding: 0;\n}\n.paraui-v4-table > .table-contain > table > .table-body .table-body-btn:first-child {\n width: 48px;\n}\n.paraui-v4-table > .table-contain > table > .table-body > .table-no-data {\n height: calc(100% - 50px);\n}\n.paraui-v4-table > .table-contain > table > .table-body > .table-no-data:hover td {\n background-color: white;\n}\n.paraui-v4-table > .table-contain > table > .table-body > .table-no-data > td {\n padding: 56px 0 0 0;\n}\n.paraui-v4-table > .table-contain > .table-pos-line {\n position: absolute;\n top: 0;\n width: 1px;\n background-color: rgb(46, 101, 230);\n z-index: 1000;\n}\n.paraui-v4-table > .table-pagination {\n width: 100%;\n height: 36px;\n display: flex;\n align-items: flex-end;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right {\n display: flex;\n height: 32px;\n align-items: center;\n color: rgb(29, 33, 38);\n line-height: 32px;\n padding-left: 16px;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right .all-select {\n margin-left: 12px;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right .line {\n width: 1px;\n height: 12px;\n background-color: rgb(212, 218, 227);\n margin: 0 10px;\n}\n.paraui-v4-table > .table-pagination .table-pagination-right .check-number {\n width: 65px;\n display: inline-block;\n}\n.paraui-v4-table > .table-pagination .table-pagination-com {\n flex: 1;\n justify-content: flex-end;\n}\n.paraui-v4-table > .table-pagination .refresh-btn {\n margin-left: 20px;\n}\n\n.paraui-v4-table-show-colums-popover > .component-popover-content {\n min-width: 200px;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box {\n padding-top: 4px;\n max-height: 320px;\n overflow-y: auto;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item {\n height: 30px;\n line-height: 30px;\n cursor: pointer;\n display: flex;\n padding: 0 10px;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > label {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > span {\n padding-left: 8px;\n color: rgb(29, 33, 38);\n font-size: 14px;\n display: inline-block;\n width: calc(100% - 14px);\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item:hover {\n background: rgb(247, 248, 250);\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-disabled {\n cursor: inherit;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-disabled > span {\n color: rgb(29, 33, 38);\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-disabled:hover {\n background: transparent;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer {\n height: 36px;\n border-top: 1px solid rgb(247, 248, 250);\n text-align: center;\n}\n.paraui-v4-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button {\n width: 100%;\n height: 100%;\n margin: 0;\n}\n\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box {\n padding-top: 4px;\n max-height: 320px;\n overflow-y: auto;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item {\n height: 30px;\n line-height: 30px;\n cursor: pointer;\n display: flex;\n padding: 0 10px;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item > label {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item > span {\n padding-left: 8px;\n color: rgb(29, 33, 38);\n font-size: 14px;\n display: inline-block;\n width: calc(100% - 14px);\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item:hover {\n background: rgb(247, 248, 250);\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-footer {\n height: 36px;\n border-top: 1px solid rgb(247, 248, 250);\n text-align: center;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button {\n width: 50%;\n height: 100%;\n margin: 0;\n}\n.paraui-v4-filter-popover > .component-popover-content .filter-select.filter-select-none {\n text-align: center;\n padding: 20px 0;\n}\n.paraui-v4-filter-popover.paraui-v4-filter-popover-default > .component-popover-content {\n min-width: 200px;\n}";
|
|
1775
1713
|
styleInject(css_248z);
|
|
1776
1714
|
|
|
1777
1715
|
const Table = propsInit => {
|