@para-ui/core 4.0.33 → 4.0.37
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/Anchor/anchorMenu/index.d.ts +16 -0
- package/Anchor/index.d.ts +4 -0
- package/Anchor/index.js +394 -0
- package/Anchor/lang/en_US.d.ts +4 -0
- package/Anchor/lang/index.d.ts +9 -0
- package/Anchor/lang/zh_CN.d.ts +4 -0
- package/Anchor/type.d.ts +42 -0
- package/Argv/batchEdit/index.d.ts +18 -0
- package/Argv/dataGenerator/config.d.ts +16 -0
- package/Argv/dataGenerator/index.d.ts +24 -0
- package/Argv/index.d.ts +36 -0
- package/Argv/index.js +738 -0
- package/Argv/lang/en_US.d.ts +15 -0
- package/Argv/lang/index.d.ts +31 -0
- package/Argv/lang/zh_CN.d.ts +15 -0
- 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.d.ts +2 -2
- package/Button/index.js +4 -4
- package/ButtonGroup/index.d.ts +4 -0
- package/ButtonGroup/index.js +53 -37
- package/Card/index.js +3 -3
- package/Carousel/index.js +1 -1
- package/Cascader/index.js +6 -7
- package/Checkbox/index.js +1 -1
- package/CheckboxGroup/index.js +1 -1
- package/ComboSelect/index.js +7 -8
- package/CopyText/index.js +1 -1
- package/CycleSelector/index.js +2 -5
- package/DatePicker/index.js +2 -5
- 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 +7 -8
- package/Form/index.js +7 -8
- package/FormItem/index.js +7 -8
- package/FunctionModal/index.js +3 -3
- package/Help/index.js +1 -1
- package/Image/index.js +3 -4
- 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/Querying/index.js +4 -4
- package/QuickReply/index.js +2 -2
- package/README.md +24 -0
- package/Radio/index.js +1 -1
- package/RadioGroup/index.js +1 -1
- package/RangeInput/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 +276 -322
- package/Selector/interface.d.ts +2 -1
- package/SelectorPicker/index.js +5 -5
- package/SingleBox/index.js +3 -3
- package/Slider/index.js +1 -1
- package/SortBox/index.js +1 -1
- package/Stepper/index.js +2 -2
- package/Switch/index.js +3 -3
- package/Table/index.js +424 -489
- package/Tabs/index.js +3 -3
- package/Tag/index.js +54 -83
- package/TextEditor/index.js +1 -1
- package/TextField/index.js +1 -1
- package/TimePicker/index.js +2 -5
- package/Timeline/index.js +21 -15
- package/Title/index.js +1 -1
- package/ToggleButton/ToggleButtonGroup.d.ts +4 -2
- package/ToggleButton/index.d.ts +4 -3
- package/ToggleButton/index.js +28 -13
- package/Tooltip/index.js +1 -1
- package/Transfer/index.js +1 -1
- package/Tree/index.js +6 -7
- package/Upload/index.js +83 -28
- package/Upload/interface.d.ts +4 -0
- package/Upload/util.d.ts +32 -0
- package/Utils/index.d.ts +7 -0
- package/Utils/index.js +10 -1
- package/Utils/type.d.ts +1 -0
- package/_verture/{Portal-edd94cac.js → Portal-42560ff0.js} +1 -2
- package/_verture/{defineProperty-6f62bb2a.js → defineProperty-f0e15205.js} +10 -2
- package/_verture/{index-8752ccab.js → index-086e9a6d.js} +4 -5
- package/_verture/{index-567b5779.js → index-5f0bfdcf.js} +3 -4
- package/_verture/{index-94e24006.js → index-8ac46bd9.js} +1 -1
- package/_verture/{modalContext-10f0c5aa.js → modalContext-205db1f4.js} +1 -1
- package/_verture/{tslib.es6-55ed4bd2.js → tslib.es6-f43aa41d.js} +1 -1
- package/index.d.ts +4 -0
- package/index.js +26 -22
- package/locale/en-US.d.ts +17 -0
- package/locale/index.d.ts +34 -0
- package/locale/index.js +34 -0
- package/locale/zh-CN.d.ts +17 -0
- package/package.json +8 -5
- package/umd/Anchor.js +43 -0
- package/umd/Argv.js +43 -0
- package/umd/AutoButton.js +1 -1
- package/umd/Button.js +1 -1
- package/umd/ButtonGroup.js +5 -5
- package/umd/ComboSelect.js +2 -2
- package/umd/CopyText.js +3 -3
- package/umd/CycleSelector.js +3 -3
- package/umd/DatePicker.js +1 -1
- package/umd/Descriptions.js +1 -1
- package/umd/Desktop.js +3 -3
- package/umd/Drawer.js +1 -1
- package/umd/DynamicMultiBox.js +3 -3
- package/umd/Form.js +2 -2
- package/umd/FormItem.js +3 -3
- package/umd/FunctionModal.js +1 -1
- package/umd/InputCode.js +3 -3
- package/umd/InputLang.js +3 -3
- package/umd/Message.js +15 -16
- package/umd/Modal.js +1 -1
- package/umd/MultiBox.js +3 -3
- package/umd/OperateBtn.js +1 -1
- package/umd/PageHeader.js +1 -1
- package/umd/Pagination.js +3 -3
- package/umd/PopConfirm.js +1 -1
- package/umd/QuickReply.js +3 -3
- package/umd/Search.js +3 -3
- package/umd/Selector.js +4 -4
- package/umd/SelectorPicker.js +6 -6
- package/umd/SingleBox.js +3 -3
- package/umd/Table.js +2 -2
- package/umd/Tabs.js +1 -1
- package/umd/TextField.js +2 -2
- package/umd/TimePicker.js +1 -1
- package/umd/ToggleButton.js +6 -6
- package/umd/Transfer.js +2 -2
- package/umd/Upload.js +2 -2
- package/umd/Utils.js +1 -1
- package/umd/locale.js +1 -1
- package/_verture/typeof-adeedc13.js +0 -11
- /package/_verture/{index-c8cb6751.js → index-0f5ee6f7.js} +0 -0
- /package/_verture/{index-e229330e.js → index-4c5d6cd7.js} +0 -0
- /package/_verture/{typeof-4646b22c.js → typeof-6ec38efd.js} +0 -0
package/Table/index.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { a as __rest, _ as __awaiter } from '../_verture/tslib.es6-f43aa41d.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,8 +14,7 @@ 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-1fc7c957.js';
|
|
18
16
|
import Empty from '../Empty/index.js';
|
|
19
|
-
import {
|
|
20
|
-
import { d as dist } from '../_verture/index-c8cb6751.js';
|
|
17
|
+
import { d as dist } from '../_verture/index-0f5ee6f7.js';
|
|
21
18
|
import { Radio } from '../Radio/index.js';
|
|
22
19
|
import OperateBtn from '../OperateBtn/index.js';
|
|
23
20
|
import Down from '@para-ui/icons/Down';
|
|
@@ -65,23 +62,25 @@ import '@para-ui/icons/DoubleRight';
|
|
|
65
62
|
* 发送请求
|
|
66
63
|
* @param obj {ReqProps} 请求信息
|
|
67
64
|
*/
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
65
|
+
const requestFunc = obj => {
|
|
66
|
+
const {
|
|
67
|
+
method,
|
|
68
|
+
url,
|
|
69
|
+
ctx,
|
|
70
|
+
data
|
|
71
|
+
} = obj,
|
|
73
72
|
otherProps = __rest(obj, ["method", "url", "ctx", "data"]);
|
|
74
73
|
if (method === 'Get') {
|
|
75
74
|
return Get(Object.assign({
|
|
76
75
|
url: url,
|
|
77
|
-
ctx
|
|
76
|
+
ctx
|
|
78
77
|
}, otherProps));
|
|
79
78
|
}
|
|
80
79
|
if (method === 'Post') {
|
|
81
80
|
return Post(Object.assign({
|
|
82
81
|
url: url,
|
|
83
|
-
ctx
|
|
84
|
-
data
|
|
82
|
+
ctx,
|
|
83
|
+
data
|
|
85
84
|
}, otherProps));
|
|
86
85
|
}
|
|
87
86
|
};
|
|
@@ -90,23 +89,23 @@ var requestFunc = function requestFunc(obj) {
|
|
|
90
89
|
* @param obj {ReqProps} 请求信息
|
|
91
90
|
* @return string get请求地址参数
|
|
92
91
|
*/
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
for (
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
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') {
|
|
102
101
|
val = encodeURIComponent(JSON.stringify(val));
|
|
103
102
|
} else {
|
|
104
103
|
val = encodeURIComponent(val);
|
|
105
104
|
}
|
|
106
105
|
paramsArr.push("".concat(key, "=").concat(val));
|
|
107
106
|
}
|
|
108
|
-
|
|
109
|
-
|
|
107
|
+
const paramsStr = paramsArr.join('&');
|
|
108
|
+
const pos = str.indexOf('?');
|
|
110
109
|
if (pos !== -1) {
|
|
111
110
|
str += (pos === str.length - 1 ? '' : '&') + paramsStr;
|
|
112
111
|
} else {
|
|
@@ -117,9 +116,9 @@ var handGetReqParams = function handGetReqParams(obj) {
|
|
|
117
116
|
/**
|
|
118
117
|
* 提取字符串里面的数字
|
|
119
118
|
* */
|
|
120
|
-
|
|
119
|
+
const getStringInNumber = str => {
|
|
121
120
|
if (typeof str === 'number') return str;
|
|
122
|
-
|
|
121
|
+
const strHand = str.replace(/[^0-9$]/gi, '');
|
|
123
122
|
return Number(strHand);
|
|
124
123
|
};
|
|
125
124
|
/**
|
|
@@ -127,23 +126,23 @@ var getStringInNumber = function getStringInNumber(str) {
|
|
|
127
126
|
* @param key {string} 键值
|
|
128
127
|
* @param num {number} 过期天数
|
|
129
128
|
* */
|
|
130
|
-
|
|
129
|
+
const getLocalStorageSelectHead = (key, num) => {
|
|
131
130
|
//debugger
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
for (
|
|
136
|
-
|
|
137
|
-
|
|
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];
|
|
138
137
|
if (!item) continue;
|
|
139
|
-
|
|
140
|
-
|
|
138
|
+
const newDate = new Date().getTime(); // 当前时间
|
|
139
|
+
const endTime = item.storageTime + item.validity; // 过期时间
|
|
141
140
|
// 过期时间 小于 当前时间, 说明已经过期了, 删除当前表格列数据
|
|
142
141
|
if (endTime < newDate) {
|
|
143
142
|
delete headJson[keyStr];
|
|
144
143
|
}
|
|
145
144
|
}
|
|
146
|
-
|
|
145
|
+
const headJsonItem = headJson[key];
|
|
147
146
|
// 重置过期时间
|
|
148
147
|
if (headJsonItem) {
|
|
149
148
|
headJsonItem.storageTime = new Date().getTime();
|
|
@@ -156,9 +155,9 @@ var getLocalStorageSelectHead = function getLocalStorageSelectHead(key, num) {
|
|
|
156
155
|
* @param key {string} 键值
|
|
157
156
|
* @param val {HeadLocalStorageItem} 保存值
|
|
158
157
|
* */
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
158
|
+
const setLocalStorageSelectHead = (key, val) => {
|
|
159
|
+
const headJsonStr = window.localStorage.getItem('_paraui_table_head') || '{}';
|
|
160
|
+
const headJson = JSON.parse(headJsonStr);
|
|
162
161
|
headJson[key] = val;
|
|
163
162
|
window.localStorage.setItem('_paraui_table_head', JSON.stringify(headJson));
|
|
164
163
|
};
|
|
@@ -167,8 +166,8 @@ var setLocalStorageSelectHead = function setLocalStorageSelectHead(key, val) {
|
|
|
167
166
|
* @param el 当前元素
|
|
168
167
|
* @param selector 查找元素class
|
|
169
168
|
*/
|
|
170
|
-
|
|
171
|
-
|
|
169
|
+
const closest = (el, selector) => {
|
|
170
|
+
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
|
|
172
171
|
while (el) {
|
|
173
172
|
if (matchesSelector.call(el, selector)) {
|
|
174
173
|
break;
|
|
@@ -360,70 +359,50 @@ var zh = {
|
|
|
360
359
|
};
|
|
361
360
|
|
|
362
361
|
var localeJson = {
|
|
363
|
-
zh
|
|
364
|
-
en
|
|
362
|
+
zh,
|
|
363
|
+
en
|
|
365
364
|
};
|
|
366
365
|
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
headData =
|
|
370
|
-
sortTable
|
|
371
|
-
filter
|
|
372
|
-
expandable
|
|
373
|
-
check
|
|
374
|
-
radio
|
|
375
|
-
onRequestSort
|
|
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
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
checked = _useState4[0],
|
|
408
|
-
setChecked = _useState4[1]; // 选中
|
|
409
|
-
var _useState5 = useState(null),
|
|
410
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
411
|
-
anchorElColums = _useState6[0],
|
|
412
|
-
setAnchorElColums = _useState6[1]; // 显示列定位元素
|
|
413
|
-
var _useState7 = useState({}),
|
|
414
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
415
|
-
headDataJson = _useState8[0],
|
|
416
|
-
setHeadDataJson = _useState8[1]; // 显示列json
|
|
417
|
-
var _useState9 = useState({}),
|
|
418
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
419
|
-
filterHead = _useState10[0],
|
|
420
|
-
setFilterHead = _useState10[1]; // 过滤项当前表头数据
|
|
421
|
-
var _useState11 = useState({}),
|
|
422
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
423
|
-
selectFilterCom = _useState12[0],
|
|
424
|
-
setSelectFilterCom = _useState12[1]; // 过滤项当前选中值
|
|
425
|
-
var intl = useFormatMessage('Table', localeJson);
|
|
426
|
-
useEffect(function () {
|
|
366
|
+
const TableHead$1 = props => {
|
|
367
|
+
const {
|
|
368
|
+
headData = [],
|
|
369
|
+
sortTable,
|
|
370
|
+
filter,
|
|
371
|
+
expandable,
|
|
372
|
+
check,
|
|
373
|
+
radio,
|
|
374
|
+
onRequestSort,
|
|
375
|
+
orderFieldArr = [],
|
|
376
|
+
orderTypeArr = [],
|
|
377
|
+
selectAll,
|
|
378
|
+
selectStatus,
|
|
379
|
+
align,
|
|
380
|
+
showList = [],
|
|
381
|
+
changeShowList,
|
|
382
|
+
selectFilter,
|
|
383
|
+
changeFilter,
|
|
384
|
+
operate,
|
|
385
|
+
showColumns,
|
|
386
|
+
fixedTable,
|
|
387
|
+
fixedColumn,
|
|
388
|
+
posFixed,
|
|
389
|
+
beyondText,
|
|
390
|
+
lineWidth,
|
|
391
|
+
dragColumn,
|
|
392
|
+
dragRow,
|
|
393
|
+
changeColumnWidth,
|
|
394
|
+
headDataConfig,
|
|
395
|
+
getPopupContainer,
|
|
396
|
+
tipMaxWidth
|
|
397
|
+
} = props;
|
|
398
|
+
const [indeterminate, setIndeterminate] = useState(false); // 半选中
|
|
399
|
+
const [checked, setChecked] = useState(false); // 选中
|
|
400
|
+
const [anchorElColums, setAnchorElColums] = useState(null); // 显示列定位元素
|
|
401
|
+
const [headDataJson, setHeadDataJson] = useState({}); // 显示列json
|
|
402
|
+
const [filterHead, setFilterHead] = useState({}); // 过滤项当前表头数据
|
|
403
|
+
const [selectFilterCom, setSelectFilterCom] = useState({}); // 过滤项当前选中值
|
|
404
|
+
const intl = useFormatMessage('Table', localeJson);
|
|
405
|
+
useEffect(() => {
|
|
427
406
|
// 全选
|
|
428
407
|
if (selectStatus === 'all') {
|
|
429
408
|
setChecked(true);
|
|
@@ -440,17 +419,17 @@ var TableHead$1 = function TableHead(props) {
|
|
|
440
419
|
setIndeterminate(false);
|
|
441
420
|
}
|
|
442
421
|
}, [selectStatus]);
|
|
443
|
-
useEffect(
|
|
422
|
+
useEffect(() => {
|
|
444
423
|
if (headData) {
|
|
445
|
-
|
|
446
|
-
for (
|
|
447
|
-
|
|
424
|
+
const json = [];
|
|
425
|
+
for (let i = 0, l = headData.length; i < l; i++) {
|
|
426
|
+
const item = headData[i];
|
|
448
427
|
json[item.name] = item;
|
|
449
428
|
}
|
|
450
429
|
setHeadDataJson(json);
|
|
451
430
|
}
|
|
452
431
|
}, [headData]);
|
|
453
|
-
useEffect(
|
|
432
|
+
useEffect(() => {
|
|
454
433
|
if (selectFilter) setSelectFilterCom(DeepClone(selectFilter));
|
|
455
434
|
}, [selectFilter]);
|
|
456
435
|
/**
|
|
@@ -458,30 +437,28 @@ var TableHead$1 = function TableHead(props) {
|
|
|
458
437
|
* @param name 排序列
|
|
459
438
|
* @param event 当前排序元素
|
|
460
439
|
*/
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
if (onRequestSort) onRequestSort(event, name);
|
|
466
|
-
};
|
|
440
|
+
const createSortHandler = (name, item) => event => {
|
|
441
|
+
// 不存在排序,不触发事件
|
|
442
|
+
if (!(sortTable && item.name && item.sort !== false)) return;
|
|
443
|
+
if (onRequestSort) onRequestSort(event, name);
|
|
467
444
|
};
|
|
468
445
|
/**
|
|
469
446
|
* 全选 / 全不选
|
|
470
447
|
* @param event 操作元素
|
|
471
448
|
* @param bol 选中 / 不选中
|
|
472
449
|
*/
|
|
473
|
-
|
|
450
|
+
const onSelectAll = (event, bol) => {
|
|
474
451
|
if (selectAll) selectAll(event, bol);
|
|
475
452
|
};
|
|
476
453
|
/**
|
|
477
454
|
* 点击显示选择列
|
|
478
455
|
* @param event 点击元素
|
|
479
456
|
*/
|
|
480
|
-
|
|
457
|
+
const clickShowColums = event => {
|
|
481
458
|
setAnchorElColums(event.currentTarget);
|
|
482
459
|
};
|
|
483
460
|
// 点击隐藏选择列
|
|
484
|
-
|
|
461
|
+
const clickHideColums = bol => {
|
|
485
462
|
if (bol) return;
|
|
486
463
|
setAnchorElColums(null);
|
|
487
464
|
};
|
|
@@ -489,29 +466,27 @@ var TableHead$1 = function TableHead(props) {
|
|
|
489
466
|
* 点击显示列 列表
|
|
490
467
|
* @param item 详细
|
|
491
468
|
*/
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
arr1.push(headDataJson[_name]);
|
|
505
|
-
}
|
|
506
|
-
changeShowList && changeShowList(arr1, false, item);
|
|
507
|
-
} else {
|
|
508
|
-
headData.push(item);
|
|
509
|
-
changeShowList && changeShowList(headData, false, item);
|
|
469
|
+
const clickColumsList = item => () => {
|
|
470
|
+
if (item.disabledSelection) return;
|
|
471
|
+
const name = item.name;
|
|
472
|
+
const itemHead = headDataJson[name];
|
|
473
|
+
if (itemHead) {
|
|
474
|
+
// 取消勾选
|
|
475
|
+
delete headDataJson[name];
|
|
476
|
+
const arr = Object.keys(headDataJson);
|
|
477
|
+
const arr1 = [];
|
|
478
|
+
for (let i = 0, l = arr.length; i < l; i++) {
|
|
479
|
+
const name = arr[i];
|
|
480
|
+
arr1.push(headDataJson[name]);
|
|
510
481
|
}
|
|
511
|
-
|
|
482
|
+
changeShowList && changeShowList(arr1, false, item);
|
|
483
|
+
} else {
|
|
484
|
+
headData.push(item);
|
|
485
|
+
changeShowList && changeShowList(headData, false, item);
|
|
486
|
+
}
|
|
512
487
|
};
|
|
513
488
|
// 重置显示列
|
|
514
|
-
|
|
489
|
+
const resetShowList = () => {
|
|
515
490
|
changeShowList && changeShowList(headData, true);
|
|
516
491
|
};
|
|
517
492
|
/**
|
|
@@ -519,69 +494,63 @@ var TableHead$1 = function TableHead(props) {
|
|
|
519
494
|
* @param headCell 当前列信息
|
|
520
495
|
* @param event 元素
|
|
521
496
|
*/
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
setSelectFilterCom(Object.assign({}, selectFilter));
|
|
526
|
-
};
|
|
497
|
+
const clickShowFilter = headCell => event => {
|
|
498
|
+
setFilterHead(headCell);
|
|
499
|
+
setSelectFilterCom(Object.assign({}, selectFilter));
|
|
527
500
|
};
|
|
528
501
|
// 点击隐藏过滤
|
|
529
|
-
|
|
502
|
+
const clickHideFilter = bol => {
|
|
530
503
|
if (bol) return;
|
|
531
504
|
setFilterHead({});
|
|
532
505
|
setSelectFilterCom(Object.assign({}, selectFilter));
|
|
533
506
|
};
|
|
534
507
|
// 点击过滤
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
filterValue = [filterValue[num]];
|
|
553
|
-
}
|
|
508
|
+
const clickFilter = item => () => {
|
|
509
|
+
const name = filterHead.name;
|
|
510
|
+
let filterValue = DeepClone(selectFilterCom[name] || []);
|
|
511
|
+
const index = filterValue.indexOf(item.value);
|
|
512
|
+
if (index !== -1) {
|
|
513
|
+
// 勾选 -> 不勾选
|
|
514
|
+
filterValue.splice(index, 1);
|
|
515
|
+
} else {
|
|
516
|
+
// 不勾选 -> 勾选
|
|
517
|
+
filterValue.push(item.value);
|
|
518
|
+
}
|
|
519
|
+
const filterRadio = filterHead.filterRadio;
|
|
520
|
+
if (filterRadio) {
|
|
521
|
+
// 过滤单个
|
|
522
|
+
const num = filterValue.indexOf(item.value);
|
|
523
|
+
if (num !== -1) {
|
|
524
|
+
filterValue = [filterValue[num]];
|
|
554
525
|
}
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
};
|
|
526
|
+
}
|
|
527
|
+
selectFilterCom[name] = filterValue;
|
|
528
|
+
setSelectFilterCom(Object.assign({}, selectFilterCom));
|
|
558
529
|
};
|
|
559
530
|
/**
|
|
560
531
|
* 重置 / 确定过滤
|
|
561
532
|
* @param type {'reset' | 'confirm'} 重置 / 确定过滤
|
|
562
533
|
*/
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
}
|
|
577
|
-
};
|
|
534
|
+
const filterFunc = type => () => {
|
|
535
|
+
if (type === 'confirm') {
|
|
536
|
+
// 确定
|
|
537
|
+
changeFilter && changeFilter(Object.assign({}, selectFilterCom));
|
|
538
|
+
setFilterHead({});
|
|
539
|
+
} else {
|
|
540
|
+
// 重置
|
|
541
|
+
const json = DeepClone(selectFilterCom);
|
|
542
|
+
delete json[filterHead.name];
|
|
543
|
+
setSelectFilterCom(json);
|
|
544
|
+
changeFilter && changeFilter(Object.assign({}, json));
|
|
545
|
+
setFilterHead({});
|
|
546
|
+
}
|
|
578
547
|
};
|
|
579
548
|
/**
|
|
580
549
|
* 自定义过滤确定
|
|
581
550
|
* @param val {[name: string]: any[]}
|
|
582
551
|
* */
|
|
583
|
-
|
|
584
|
-
|
|
552
|
+
const filterCustomConfirm = function () {
|
|
553
|
+
let val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
585
554
|
changeFilter && changeFilter(Object.assign({}, val));
|
|
586
555
|
setFilterHead({});
|
|
587
556
|
};
|
|
@@ -589,12 +558,12 @@ var TableHead$1 = function TableHead(props) {
|
|
|
589
558
|
* 处理TableCell
|
|
590
559
|
* @param item 当前列信息
|
|
591
560
|
*/
|
|
592
|
-
|
|
593
|
-
|
|
561
|
+
const handCellClass = item => {
|
|
562
|
+
let str = 'table-header-box';
|
|
594
563
|
// 排序
|
|
595
564
|
if (sortTable && item.name && item.sort !== false) {
|
|
596
565
|
str += ' table-header-box-sort';
|
|
597
|
-
|
|
566
|
+
const index = orderFieldArr.indexOf(item.name);
|
|
598
567
|
if (index !== -1) {
|
|
599
568
|
// 升序
|
|
600
569
|
if (orderTypeArr[index] === 'asc') {
|
|
@@ -613,10 +582,10 @@ var TableHead$1 = function TableHead(props) {
|
|
|
613
582
|
return str;
|
|
614
583
|
};
|
|
615
584
|
// 复选框memo
|
|
616
|
-
|
|
585
|
+
const TableCheckMemo = useMemo(() => {
|
|
617
586
|
if (check) {
|
|
618
|
-
|
|
619
|
-
|
|
587
|
+
const handCls = () => {
|
|
588
|
+
let str = 'table-checkbox table-head-btn';
|
|
620
589
|
if (fixedColumn) {
|
|
621
590
|
str += ' table-fixed-dom-left';
|
|
622
591
|
// 左边没有定位,且没有单选,没有嵌套表格
|
|
@@ -644,10 +613,10 @@ var TableHead$1 = function TableHead(props) {
|
|
|
644
613
|
}
|
|
645
614
|
}, [check, indeterminate, checked, selectAll, posFixed, radio, expandable, fixedColumn]);
|
|
646
615
|
// 单选框memo
|
|
647
|
-
|
|
616
|
+
const TableRadioMemo = useMemo(() => {
|
|
648
617
|
if (radio) {
|
|
649
|
-
|
|
650
|
-
|
|
618
|
+
const handCls = () => {
|
|
619
|
+
let str = 'table-radio table-head-btn';
|
|
651
620
|
if (fixedColumn) {
|
|
652
621
|
str += ' table-fixed-dom-left';
|
|
653
622
|
// 左边没有定位,没有嵌套表格
|
|
@@ -669,10 +638,10 @@ var TableHead$1 = function TableHead(props) {
|
|
|
669
638
|
}
|
|
670
639
|
}, [radio, posFixed, expandable, fixedColumn]);
|
|
671
640
|
// 嵌套表格memo
|
|
672
|
-
|
|
641
|
+
const TableExpandableMemo = useMemo(() => {
|
|
673
642
|
if (expandable) {
|
|
674
|
-
|
|
675
|
-
|
|
643
|
+
const handCls = () => {
|
|
644
|
+
let str = 'table-expandable table-head-btn';
|
|
676
645
|
if (fixedColumn) {
|
|
677
646
|
str += ' table-fixed-dom-left';
|
|
678
647
|
// 左边没有定位,没有嵌套表格
|
|
@@ -694,21 +663,21 @@ var TableHead$1 = function TableHead(props) {
|
|
|
694
663
|
}
|
|
695
664
|
}, [expandable, posFixed, fixedColumn]);
|
|
696
665
|
// 过滤弹窗内容
|
|
697
|
-
|
|
698
|
-
|
|
666
|
+
const filterPopoverContent = () => {
|
|
667
|
+
const name = filterHead.name;
|
|
699
668
|
if (!name) return;
|
|
700
|
-
|
|
669
|
+
const filterValue = selectFilterCom[name] || [];
|
|
701
670
|
if (filterHead.filterRender) {
|
|
702
671
|
// 自定义渲染过滤
|
|
703
672
|
return filterHead.filterRender({
|
|
704
|
-
filterValue
|
|
673
|
+
filterValue,
|
|
705
674
|
selectFilter: selectFilterCom,
|
|
706
|
-
filterHead
|
|
675
|
+
filterHead,
|
|
707
676
|
setFilter: filterCustomConfirm
|
|
708
677
|
});
|
|
709
678
|
}
|
|
710
|
-
|
|
711
|
-
|
|
679
|
+
const arr = filterHead.enums || [];
|
|
680
|
+
let str = 'filter-select';
|
|
712
681
|
if (arr.length === 0) str += ' filter-select-none';
|
|
713
682
|
return jsx("div", Object.assign({
|
|
714
683
|
className: str
|
|
@@ -723,8 +692,8 @@ var TableHead$1 = function TableHead(props) {
|
|
|
723
692
|
children: [jsx("div", Object.assign({
|
|
724
693
|
className: "filter-select-box"
|
|
725
694
|
}, {
|
|
726
|
-
children: arr.map(
|
|
727
|
-
|
|
695
|
+
children: arr.map((item, index) => {
|
|
696
|
+
const checked = filterValue.indexOf(item.value) !== -1;
|
|
728
697
|
return jsxs("div", Object.assign({
|
|
729
698
|
onClick: clickFilter(item),
|
|
730
699
|
className: checked ? 'filter-select-item filter-select-item-select' : 'filter-select-item'
|
|
@@ -763,30 +732,28 @@ var TableHead$1 = function TableHead(props) {
|
|
|
763
732
|
}));
|
|
764
733
|
};
|
|
765
734
|
// 表格列拖拽放下
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
changeColumnWidth && changeColumnWidth(headCell, result);
|
|
769
|
-
};
|
|
735
|
+
const onDragDown = headCell => result => {
|
|
736
|
+
changeColumnWidth && changeColumnWidth(headCell, result);
|
|
770
737
|
};
|
|
771
738
|
// 获取宽度
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
739
|
+
const getWidth = item => {
|
|
740
|
+
let w = item.width || '';
|
|
741
|
+
const name = item.name || '';
|
|
742
|
+
const wDrag = headDataConfig[name] && headDataConfig[name].width;
|
|
776
743
|
if (wDrag) w = "".concat(wDrag, "px");
|
|
777
744
|
return w;
|
|
778
745
|
};
|
|
779
746
|
// 内容列memo
|
|
780
|
-
|
|
747
|
+
const TableContentMemo = useMemo(() => {
|
|
781
748
|
// 处理过滤的class
|
|
782
|
-
|
|
783
|
-
|
|
749
|
+
const handFilterClass = item => {
|
|
750
|
+
let str = 'table-header-filter';
|
|
784
751
|
if (filterHead.name === item.name) str += ' table-header-filter-show';
|
|
785
752
|
if (item.name && selectFilterCom[item.name] && selectFilterCom[item.name].length > 0) str += ' table-header-filter-select';
|
|
786
753
|
return str;
|
|
787
754
|
};
|
|
788
|
-
|
|
789
|
-
|
|
755
|
+
const handCls = item => {
|
|
756
|
+
let str = '';
|
|
790
757
|
if (item.className) str += item.className;
|
|
791
758
|
if (fixedColumn && item.fixed) {
|
|
792
759
|
str += " table-fixed-dom-".concat(item.fixed);
|
|
@@ -801,8 +768,8 @@ var TableHead$1 = function TableHead(props) {
|
|
|
801
768
|
}
|
|
802
769
|
return str;
|
|
803
770
|
};
|
|
804
|
-
|
|
805
|
-
|
|
771
|
+
const handStyle = item => {
|
|
772
|
+
const json = {
|
|
806
773
|
width: getWidth(item)
|
|
807
774
|
};
|
|
808
775
|
if (fixedColumn && item.fixed && item.width) {
|
|
@@ -816,13 +783,13 @@ var TableHead$1 = function TableHead(props) {
|
|
|
816
783
|
return Object.assign(Object.assign({}, json), item.style);
|
|
817
784
|
};
|
|
818
785
|
// 处理拖拽
|
|
819
|
-
|
|
786
|
+
const handDrag = item => {
|
|
820
787
|
if (item.name === 'table-serial-number') return false; // 序号不拖拽
|
|
821
788
|
if (dragColumn && item.drag !== false) return true;
|
|
822
789
|
return false;
|
|
823
790
|
};
|
|
824
|
-
return headData.map(
|
|
825
|
-
|
|
791
|
+
return headData.map((headCell, index) => {
|
|
792
|
+
let str = "".concat($prefixCls, "-filter-popover ").concat($prefixCls, "-scrollbar-small");
|
|
826
793
|
if (!headCell.filterRender) str += " ".concat($prefixCls, "-filter-popover-default");
|
|
827
794
|
return jsx(ThElement, Object.assign({
|
|
828
795
|
className: handCls(headCell),
|
|
@@ -839,9 +806,7 @@ var TableHead$1 = function TableHead(props) {
|
|
|
839
806
|
content: filterPopoverContent(),
|
|
840
807
|
onVisibleChange: clickHideFilter,
|
|
841
808
|
overlayClassName: str,
|
|
842
|
-
getPopupContainer: getPopupContainer ? getPopupContainer :
|
|
843
|
-
return document.body;
|
|
844
|
-
},
|
|
809
|
+
getPopupContainer: getPopupContainer ? getPopupContainer : () => document.body,
|
|
845
810
|
maxWidth: headCell.filterMaxWidth
|
|
846
811
|
}, {
|
|
847
812
|
children: jsxs("div", Object.assign({
|
|
@@ -886,10 +851,10 @@ var TableHead$1 = function TableHead(props) {
|
|
|
886
851
|
});
|
|
887
852
|
}, [headData, sortTable, filter, orderFieldArr, orderTypeArr, align, filterHead, selectFilterCom, beyondText, selectFilter, fixedColumn, lineWidth, dragColumn, changeColumnWidth, headDataConfig, getPopupContainer, tipMaxWidth]);
|
|
888
853
|
// 操作栏memo
|
|
889
|
-
|
|
854
|
+
const TableOperateMemo = useMemo(() => {
|
|
890
855
|
if (operate) {
|
|
891
|
-
|
|
892
|
-
|
|
856
|
+
const handCls = () => {
|
|
857
|
+
let str = 'table-operate';
|
|
893
858
|
if (operate.operateBtnRender) str += ' table-operate-small';
|
|
894
859
|
if (showColumns === false) str += ' table-operate-not-columns';
|
|
895
860
|
if (dragRow) str += ' table-operate-drag-row';
|
|
@@ -902,8 +867,8 @@ var TableHead$1 = function TableHead(props) {
|
|
|
902
867
|
}
|
|
903
868
|
return str;
|
|
904
869
|
};
|
|
905
|
-
|
|
906
|
-
|
|
870
|
+
const handStyle = () => {
|
|
871
|
+
const json = {
|
|
907
872
|
width: operate.width
|
|
908
873
|
};
|
|
909
874
|
if (fixedColumn) {
|
|
@@ -939,16 +904,16 @@ var TableHead$1 = function TableHead(props) {
|
|
|
939
904
|
}
|
|
940
905
|
}, [operate, align, posFixed, showColumns, posFixed, beyondText, fixedColumn, tipMaxWidth, dragRow]);
|
|
941
906
|
// 显示列弹窗内容
|
|
942
|
-
|
|
907
|
+
const showListContent = () => {
|
|
943
908
|
return jsxs("div", Object.assign({
|
|
944
909
|
className: "show-colums-select"
|
|
945
910
|
}, {
|
|
946
911
|
children: [jsx("div", Object.assign({
|
|
947
912
|
className: "show-colums-select-box"
|
|
948
913
|
}, {
|
|
949
|
-
children: showList.map(
|
|
950
|
-
|
|
951
|
-
|
|
914
|
+
children: showList.map((item, index) => {
|
|
915
|
+
const checked = Boolean(headDataJson[item.name]);
|
|
916
|
+
let str = 'show-colums-select-item';
|
|
952
917
|
if (checked) str += ' show-colums-select-item-select';
|
|
953
918
|
if (item.disabledSelection) str += ' show-colums-select-item-disabled';
|
|
954
919
|
return jsxs("div", Object.assign({
|
|
@@ -982,9 +947,9 @@ var TableHead$1 = function TableHead(props) {
|
|
|
982
947
|
}));
|
|
983
948
|
};
|
|
984
949
|
// 显示列memo
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
950
|
+
const TableShowList = useMemo(() => {
|
|
951
|
+
const handCls = () => {
|
|
952
|
+
let str = 'show-colums table-fixed-dom-right';
|
|
988
953
|
// 没有固定列参数 或者 没有操作栏且没有右侧固定列
|
|
989
954
|
if (!fixedColumn || !operate && !(posFixed === null || posFixed === void 0 ? void 0 : posFixed.rightBol)) {
|
|
990
955
|
str += ' table-fixed-dom-right-first';
|
|
@@ -997,9 +962,7 @@ var TableHead$1 = function TableHead(props) {
|
|
|
997
962
|
content: showListContent(),
|
|
998
963
|
onVisibleChange: clickHideColums,
|
|
999
964
|
overlayClassName: "".concat($prefixCls, "-table-show-colums-popover ").concat($prefixCls, "-scrollbar-small"),
|
|
1000
|
-
getPopupContainer: getPopupContainer ? getPopupContainer :
|
|
1001
|
-
return document.body;
|
|
1002
|
-
}
|
|
965
|
+
getPopupContainer: getPopupContainer ? getPopupContainer : () => document.body
|
|
1003
966
|
}, {
|
|
1004
967
|
children: jsx(ThElement, Object.assign({
|
|
1005
968
|
align: "center",
|
|
@@ -1016,10 +979,10 @@ var TableHead$1 = function TableHead(props) {
|
|
|
1016
979
|
}));
|
|
1017
980
|
}, [showColumns, posFixed, operate, anchorElColums, showList, headDataJson, getPopupContainer, tipMaxWidth]);
|
|
1018
981
|
// 拖动行
|
|
1019
|
-
|
|
982
|
+
const TbaleDragRow = useMemo(() => {
|
|
1020
983
|
if (!dragRow || operate || showColumns === 'inside') return null;
|
|
1021
|
-
|
|
1022
|
-
|
|
984
|
+
const handCls = () => {
|
|
985
|
+
let str = 'drag-row table-fixed-dom-right';
|
|
1023
986
|
// 没有固定列参数 或者 没有操作栏且没有右侧固定列
|
|
1024
987
|
if (!fixedColumn || !operate && !(posFixed === null || posFixed === void 0 ? void 0 : posFixed.rightBol)) {
|
|
1025
988
|
str += ' table-fixed-dom-right-first';
|
|
@@ -1033,8 +996,8 @@ var TableHead$1 = function TableHead(props) {
|
|
|
1033
996
|
});
|
|
1034
997
|
}, [operate, showColumns, fixedColumn, posFixed, dragRow]);
|
|
1035
998
|
// 处理class
|
|
1036
|
-
|
|
1037
|
-
|
|
999
|
+
const handClass = () => {
|
|
1000
|
+
let str = 'table-head';
|
|
1038
1001
|
if (showColumns === 'inside') str += ' table-head-inside';
|
|
1039
1002
|
if (!fixedTable) str += ' table-head-scroll'; // 防止长度过长
|
|
1040
1003
|
// 没有 复选框,单选框,展开 按钮
|
|
@@ -1112,98 +1075,74 @@ var TdElement = function TdElement(props) {
|
|
|
1112
1075
|
}));
|
|
1113
1076
|
};
|
|
1114
1077
|
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
rowData =
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
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
|
-
lineHeight = props.lineHeight,
|
|
1172
|
-
dragRow = props.dragRow,
|
|
1173
|
-
onDragRow = props.onDragRow;
|
|
1174
|
-
var _useState = useState(0),
|
|
1175
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
1176
|
-
expandableColSpan = _useState2[0],
|
|
1177
|
-
setExpandableColSpan = _useState2[1]; // 嵌套表格合并列数
|
|
1178
|
-
var _useState3 = useState({}),
|
|
1179
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
1180
|
-
expandableRow = _useState4[0],
|
|
1181
|
-
setExpandableRow = _useState4[1]; // 当前哪行展开表格嵌套
|
|
1182
|
-
var _useState5 = useState(true),
|
|
1183
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
1184
|
-
showMoreBtn = _useState6[0],
|
|
1185
|
-
setShowMoreBtn = _useState6[1]; // 加载更多
|
|
1186
|
-
var _useState7 = useState({}),
|
|
1187
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
1188
|
-
disabledExpandJson = _useState8[0],
|
|
1189
|
-
setDisabledExpand = _useState8[1]; // 禁用加减部分嵌套
|
|
1190
|
-
var _useState9 = useState(false),
|
|
1191
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
1192
|
-
dragBol = _useState10[0],
|
|
1193
|
-
setDragBol = _useState10[1];
|
|
1194
|
-
var intl = useFormatMessage('Table', localeJson);
|
|
1078
|
+
const TableBody = props => {
|
|
1079
|
+
const {
|
|
1080
|
+
url,
|
|
1081
|
+
emptyProps,
|
|
1082
|
+
rowData = [],
|
|
1083
|
+
rowKey = 'key',
|
|
1084
|
+
check,
|
|
1085
|
+
radio,
|
|
1086
|
+
tableCell,
|
|
1087
|
+
expandable,
|
|
1088
|
+
headData = [],
|
|
1089
|
+
disabledJson = {},
|
|
1090
|
+
disabledArrStatus,
|
|
1091
|
+
checkJson = {},
|
|
1092
|
+
radioValue,
|
|
1093
|
+
selectCheck,
|
|
1094
|
+
selectRadio,
|
|
1095
|
+
align,
|
|
1096
|
+
operate,
|
|
1097
|
+
showColumns,
|
|
1098
|
+
fixedTable,
|
|
1099
|
+
fixedColumn,
|
|
1100
|
+
formatter,
|
|
1101
|
+
orderFieldArr = [],
|
|
1102
|
+
orderTypeArr = [],
|
|
1103
|
+
sortTable,
|
|
1104
|
+
loadState,
|
|
1105
|
+
loadMore,
|
|
1106
|
+
loadMoreRender,
|
|
1107
|
+
onClickMore,
|
|
1108
|
+
total,
|
|
1109
|
+
page,
|
|
1110
|
+
currentRowsPerPage,
|
|
1111
|
+
changePage,
|
|
1112
|
+
loadMoreUrl,
|
|
1113
|
+
expandMultiple = false,
|
|
1114
|
+
expandValue = [],
|
|
1115
|
+
disabledExpand = [],
|
|
1116
|
+
defaultExpandAllRows = false,
|
|
1117
|
+
onExpand,
|
|
1118
|
+
onRefresh,
|
|
1119
|
+
posFixed,
|
|
1120
|
+
beyondText,
|
|
1121
|
+
onClickRow,
|
|
1122
|
+
rowClassMapping,
|
|
1123
|
+
tipMaxWidth,
|
|
1124
|
+
lineHeight,
|
|
1125
|
+
dragRow,
|
|
1126
|
+
onDragRow
|
|
1127
|
+
} = props;
|
|
1128
|
+
const [expandableColSpan, setExpandableColSpan] = useState(0); // 嵌套表格合并列数
|
|
1129
|
+
const [expandableRow, setExpandableRow] = useState({}); // 当前哪行展开表格嵌套
|
|
1130
|
+
const [showMoreBtn, setShowMoreBtn] = useState(true); // 加载更多
|
|
1131
|
+
const [disabledExpandJson, setDisabledExpand] = useState({}); // 禁用加减部分嵌套
|
|
1132
|
+
const [dragBol, setDragBol] = useState(false);
|
|
1133
|
+
const intl = useFormatMessage('Table', localeJson);
|
|
1195
1134
|
// 默认是否展开所有
|
|
1196
|
-
useEffect(
|
|
1135
|
+
useEffect(() => {
|
|
1197
1136
|
if (!defaultExpandAllRows) {
|
|
1198
1137
|
setExpandableRow({});
|
|
1199
1138
|
return;
|
|
1200
1139
|
}
|
|
1201
|
-
|
|
1202
|
-
for (
|
|
1203
|
-
|
|
1204
|
-
|
|
1140
|
+
const json = {};
|
|
1141
|
+
for (let i = 0, l = rowData.length; i < l; i++) {
|
|
1142
|
+
const item = rowData[i] || {};
|
|
1143
|
+
const id = item[rowKey];
|
|
1205
1144
|
json[id] = {
|
|
1206
|
-
id
|
|
1145
|
+
id,
|
|
1207
1146
|
status: 'develop'
|
|
1208
1147
|
};
|
|
1209
1148
|
}
|
|
@@ -1211,41 +1150,41 @@ var TableBody = function TableBody(props) {
|
|
|
1211
1150
|
}, [defaultExpandAllRows, rowData, rowKey]);
|
|
1212
1151
|
// 监听展开表格
|
|
1213
1152
|
// 如果直接写expandMultiple, expandValue会死循环
|
|
1214
|
-
useEffect(
|
|
1153
|
+
useEffect(() => {
|
|
1215
1154
|
if (props.expandValue === undefined) return;
|
|
1216
|
-
|
|
1217
|
-
|
|
1155
|
+
const json = {};
|
|
1156
|
+
let expandValueHand = expandValue;
|
|
1218
1157
|
// 只展开一个,去第一个值
|
|
1219
1158
|
if (!expandMultiple && expandValue.length > 0) {
|
|
1220
1159
|
expandValueHand = [expandValue[0]];
|
|
1221
1160
|
}
|
|
1222
|
-
for (
|
|
1223
|
-
|
|
1161
|
+
for (let i = 0, l = expandValueHand.length; i < l; i++) {
|
|
1162
|
+
const id = expandValueHand[i];
|
|
1224
1163
|
json[id] = {
|
|
1225
|
-
id
|
|
1164
|
+
id,
|
|
1226
1165
|
status: 'develop'
|
|
1227
1166
|
};
|
|
1228
1167
|
}
|
|
1229
1168
|
setExpandableRow(json);
|
|
1230
1169
|
}, [props.expandMultiple, props.expandValue, rowData]);
|
|
1231
1170
|
// 监听禁用嵌套 props.disabledExpand 防止死循环
|
|
1232
|
-
useEffect(
|
|
1233
|
-
|
|
1234
|
-
for (
|
|
1235
|
-
|
|
1171
|
+
useEffect(() => {
|
|
1172
|
+
const json = {};
|
|
1173
|
+
for (let i = 0, l = disabledExpand.length; i < l; i++) {
|
|
1174
|
+
const id = disabledExpand[i];
|
|
1236
1175
|
json[id] = true;
|
|
1237
1176
|
}
|
|
1238
1177
|
setDisabledExpand(json);
|
|
1239
1178
|
}, [props.disabledExpand]);
|
|
1240
|
-
useEffect(
|
|
1179
|
+
useEffect(() => {
|
|
1241
1180
|
if (loadMoreUrl) {
|
|
1242
|
-
|
|
1181
|
+
const bol = Number(total) > Number(page) * Number(currentRowsPerPage);
|
|
1243
1182
|
setShowMoreBtn(bol);
|
|
1244
1183
|
}
|
|
1245
1184
|
}, [loadMoreUrl, total, page, currentRowsPerPage]);
|
|
1246
1185
|
// 处理嵌套表格合并列数
|
|
1247
|
-
useEffect(
|
|
1248
|
-
|
|
1186
|
+
useEffect(() => {
|
|
1187
|
+
let num = headData.length;
|
|
1249
1188
|
if (expandable) num += 1;
|
|
1250
1189
|
if (check) num += 1;
|
|
1251
1190
|
if (radio) num += 1;
|
|
@@ -1254,55 +1193,55 @@ var TableBody = function TableBody(props) {
|
|
|
1254
1193
|
setExpandableColSpan(num);
|
|
1255
1194
|
}, [headData, expandable, check, radio]);
|
|
1256
1195
|
// 展开/收起嵌套表格
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
status: status
|
|
1266
|
-
};
|
|
1267
|
-
if (expandMultiple) {
|
|
1268
|
-
// 展开多个
|
|
1269
|
-
expandableRow[id] = expandItem;
|
|
1270
|
-
setExpandableRow(Object.assign({}, expandableRow));
|
|
1271
|
-
} else {
|
|
1272
|
-
// 展开一个
|
|
1273
|
-
setExpandableRow(_defineProperty({}, id, expandItem));
|
|
1274
|
-
}
|
|
1275
|
-
onExpand && onExpand(row, status);
|
|
1276
|
-
event.stopPropagation();
|
|
1196
|
+
const handClickNestTable = row => event => {
|
|
1197
|
+
const id = row[rowKey];
|
|
1198
|
+
let expandItem = expandableRow[id] || {};
|
|
1199
|
+
let status = 'develop';
|
|
1200
|
+
if (expandItem.status === 'develop') status = 'retract';
|
|
1201
|
+
expandItem = {
|
|
1202
|
+
id,
|
|
1203
|
+
status
|
|
1277
1204
|
};
|
|
1205
|
+
if (expandMultiple) {
|
|
1206
|
+
// 展开多个
|
|
1207
|
+
expandableRow[id] = expandItem;
|
|
1208
|
+
setExpandableRow(Object.assign({}, expandableRow));
|
|
1209
|
+
} else {
|
|
1210
|
+
// 展开一个
|
|
1211
|
+
setExpandableRow({
|
|
1212
|
+
[id]: expandItem
|
|
1213
|
+
});
|
|
1214
|
+
}
|
|
1215
|
+
onExpand && onExpand(row, status);
|
|
1216
|
+
event.stopPropagation();
|
|
1278
1217
|
};
|
|
1279
1218
|
// 处理class
|
|
1280
|
-
|
|
1281
|
-
|
|
1219
|
+
const handClass = () => {
|
|
1220
|
+
let str = 'table-body';
|
|
1282
1221
|
if (!fixedTable) str += ' table-body-scroll';
|
|
1283
1222
|
// 没有 复选框,单选框,展开 按钮
|
|
1284
1223
|
if (!check && !radio && !expandable) str += ' table-body-no-btn';
|
|
1285
1224
|
return str;
|
|
1286
1225
|
};
|
|
1287
1226
|
// 处理嵌套表格class
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1227
|
+
const handExpandClass = row => {
|
|
1228
|
+
const id = row[rowKey];
|
|
1229
|
+
const expandItem = expandableRow[id] || {};
|
|
1230
|
+
let str = 'retract';
|
|
1292
1231
|
if (expandItem.status === 'develop') {
|
|
1293
1232
|
str = 'expand';
|
|
1294
1233
|
}
|
|
1295
1234
|
return str;
|
|
1296
1235
|
};
|
|
1297
1236
|
// 点击加载更多
|
|
1298
|
-
|
|
1237
|
+
const clickMore = () => {
|
|
1299
1238
|
if (loadMoreUrl) changePage && changePage();
|
|
1300
1239
|
onClickMore && onClickMore();
|
|
1301
1240
|
};
|
|
1302
1241
|
// 暂无数据memo
|
|
1303
|
-
|
|
1242
|
+
const NodataMemo = useMemo(() => {
|
|
1304
1243
|
// 处理刷新按钮
|
|
1305
|
-
|
|
1244
|
+
const handRefreshBtn = () => {
|
|
1306
1245
|
if ((emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.showRefresh) !== undefined) {
|
|
1307
1246
|
return emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.showRefresh;
|
|
1308
1247
|
}
|
|
@@ -1312,8 +1251,8 @@ var TableBody = function TableBody(props) {
|
|
|
1312
1251
|
return false;
|
|
1313
1252
|
};
|
|
1314
1253
|
// 处理className
|
|
1315
|
-
|
|
1316
|
-
|
|
1254
|
+
const handClassNoData = () => {
|
|
1255
|
+
let str = 'table-no-data';
|
|
1317
1256
|
if (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.size) str += " table-no-data-".concat(emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.size);
|
|
1318
1257
|
return str;
|
|
1319
1258
|
};
|
|
@@ -1326,24 +1265,24 @@ var TableBody = function TableBody(props) {
|
|
|
1326
1265
|
}, {
|
|
1327
1266
|
children: jsx(Empty, Object.assign({}, emptyProps, {
|
|
1328
1267
|
showRefresh: handRefreshBtn(),
|
|
1329
|
-
onRefresh:
|
|
1268
|
+
onRefresh: event => {
|
|
1330
1269
|
if (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.onRefresh) {
|
|
1331
1270
|
emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.onRefresh(event);
|
|
1332
1271
|
return;
|
|
1333
1272
|
}
|
|
1334
|
-
|
|
1273
|
+
onRefresh && onRefresh();
|
|
1335
1274
|
}
|
|
1336
1275
|
}))
|
|
1337
1276
|
}))
|
|
1338
1277
|
}));
|
|
1339
|
-
}, [expandableColSpan, emptyProps, url,
|
|
1278
|
+
}, [expandableColSpan, emptyProps, url, onRefresh]);
|
|
1340
1279
|
// 复选框useCallback
|
|
1341
|
-
|
|
1280
|
+
const TableCheckCallback = useCallback(row => {
|
|
1342
1281
|
if (check) {
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1282
|
+
const handId = row[rowKey];
|
|
1283
|
+
const disabledHand = Boolean(disabledJson[handId]);
|
|
1284
|
+
let checkHand = checkJson[handId] || false;
|
|
1285
|
+
let showCheck = true;
|
|
1347
1286
|
if (disabledHand && disabledArrStatus) {
|
|
1348
1287
|
// 选中
|
|
1349
1288
|
if (disabledArrStatus[handId] === true) {
|
|
@@ -1358,8 +1297,8 @@ var TableBody = function TableBody(props) {
|
|
|
1358
1297
|
showCheck = false;
|
|
1359
1298
|
}
|
|
1360
1299
|
}
|
|
1361
|
-
|
|
1362
|
-
|
|
1300
|
+
const handCls = () => {
|
|
1301
|
+
let str = 'table-checkbox table-body-btn';
|
|
1363
1302
|
if (fixedColumn) {
|
|
1364
1303
|
str += ' table-fixed-dom-left';
|
|
1365
1304
|
// 左边没有定位,且没有单选,没有嵌套表格
|
|
@@ -1376,7 +1315,7 @@ var TableBody = function TableBody(props) {
|
|
|
1376
1315
|
children: showCheck && jsx(Checkbox, {
|
|
1377
1316
|
disabled: disabledHand,
|
|
1378
1317
|
checked: checkHand,
|
|
1379
|
-
onChange:
|
|
1318
|
+
onChange: (event, bol) => {
|
|
1380
1319
|
event.stopPropagation();
|
|
1381
1320
|
selectCheck && selectCheck(event, bol, row[rowKey]);
|
|
1382
1321
|
}
|
|
@@ -1385,12 +1324,12 @@ var TableBody = function TableBody(props) {
|
|
|
1385
1324
|
}
|
|
1386
1325
|
}, [check, disabledJson, rowKey, checkJson, selectCheck, disabledArrStatus, posFixed, expandable, radio, fixedColumn]);
|
|
1387
1326
|
// 单选框useCallback
|
|
1388
|
-
|
|
1327
|
+
const TableRadioCallback = useCallback(row => {
|
|
1389
1328
|
if (radio) {
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1329
|
+
const handId = row[rowKey];
|
|
1330
|
+
const disabledHand = Boolean(disabledJson[handId]);
|
|
1331
|
+
let checkHand = radioValue === row[rowKey];
|
|
1332
|
+
let showRadio = true;
|
|
1394
1333
|
if (disabledHand && disabledArrStatus) {
|
|
1395
1334
|
// 选中
|
|
1396
1335
|
if (disabledArrStatus[handId] === true) {
|
|
@@ -1405,8 +1344,8 @@ var TableBody = function TableBody(props) {
|
|
|
1405
1344
|
showRadio = false;
|
|
1406
1345
|
}
|
|
1407
1346
|
}
|
|
1408
|
-
|
|
1409
|
-
|
|
1347
|
+
const handCls = () => {
|
|
1348
|
+
let str = 'table-radio table-body-btn';
|
|
1410
1349
|
if (fixedColumn) {
|
|
1411
1350
|
str += ' table-fixed-dom-left';
|
|
1412
1351
|
// 左边没有定位,没有嵌套表格
|
|
@@ -1423,7 +1362,7 @@ var TableBody = function TableBody(props) {
|
|
|
1423
1362
|
children: showRadio && jsx(Radio, {
|
|
1424
1363
|
disabled: disabledHand,
|
|
1425
1364
|
checked: checkHand,
|
|
1426
|
-
onChange:
|
|
1365
|
+
onChange: event => {
|
|
1427
1366
|
event.stopPropagation();
|
|
1428
1367
|
selectRadio && selectRadio(event, row[rowKey]);
|
|
1429
1368
|
}
|
|
@@ -1432,13 +1371,13 @@ var TableBody = function TableBody(props) {
|
|
|
1432
1371
|
}
|
|
1433
1372
|
}, [radio, disabledJson, radioValue, rowKey, selectRadio, disabledArrStatus, expandable, posFixed, fixedColumn]);
|
|
1434
1373
|
// 嵌套加减useCallback
|
|
1435
|
-
|
|
1374
|
+
const TableExpandableMemo = useCallback(row => {
|
|
1436
1375
|
if (!expandable) return null;
|
|
1437
|
-
|
|
1376
|
+
const expandableDemo = expandable(row);
|
|
1438
1377
|
// 禁用一行表格展开 或者 展开表格返回值为false,返回空列
|
|
1439
1378
|
if (disabledExpandJson[row[rowKey]] || expandableDemo === false) return jsx(TdElement, {});
|
|
1440
|
-
|
|
1441
|
-
|
|
1379
|
+
const handCls = () => {
|
|
1380
|
+
let str = 'table-expandable table-body-btn';
|
|
1442
1381
|
if (fixedColumn) {
|
|
1443
1382
|
str += ' table-fixed-dom-left';
|
|
1444
1383
|
// 左边没有定位,没有嵌套表格
|
|
@@ -1459,17 +1398,17 @@ var TableBody = function TableBody(props) {
|
|
|
1459
1398
|
}));
|
|
1460
1399
|
}, [expandable, expandableRow, rowKey, disabledExpandJson, onExpand, fixedColumn]);
|
|
1461
1400
|
// 表格一行内容useCallback
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
orderFieldArr
|
|
1465
|
-
orderTypeArr
|
|
1401
|
+
const TableContentUseCallback = useCallback((row, rowIndex) => {
|
|
1402
|
+
const params = {
|
|
1403
|
+
orderFieldArr,
|
|
1404
|
+
orderTypeArr
|
|
1466
1405
|
};
|
|
1467
|
-
|
|
1468
|
-
|
|
1406
|
+
const handContentClass = item => {
|
|
1407
|
+
let str = 'table-content-columms';
|
|
1469
1408
|
if (item.className) str += " ".concat(item.className);
|
|
1470
1409
|
// 排序
|
|
1471
1410
|
if (sortTable && item.name && item.sort !== false) {
|
|
1472
|
-
|
|
1411
|
+
const index = orderFieldArr.indexOf(item.name);
|
|
1473
1412
|
if (index !== -1) {
|
|
1474
1413
|
// 升序
|
|
1475
1414
|
if (orderTypeArr[index] === 'asc') {
|
|
@@ -1494,8 +1433,8 @@ var TableBody = function TableBody(props) {
|
|
|
1494
1433
|
}
|
|
1495
1434
|
return str;
|
|
1496
1435
|
};
|
|
1497
|
-
|
|
1498
|
-
|
|
1436
|
+
const handStyle = item => {
|
|
1437
|
+
const json = {};
|
|
1499
1438
|
if (fixedColumn && item.fixed && item.width) {
|
|
1500
1439
|
if (item.fixed === 'left') {
|
|
1501
1440
|
json.left = "".concat(item.paraui_left_width, "px");
|
|
@@ -1506,12 +1445,12 @@ var TableBody = function TableBody(props) {
|
|
|
1506
1445
|
}
|
|
1507
1446
|
return json;
|
|
1508
1447
|
};
|
|
1509
|
-
return tableCell ? tableCell(row, params) : headData.map(
|
|
1510
|
-
|
|
1511
|
-
|
|
1448
|
+
return tableCell ? tableCell(row, params) : headData.map((item, index) => {
|
|
1449
|
+
let text = row[item.name];
|
|
1450
|
+
let colSpan = 1;
|
|
1512
1451
|
if (item.render) text = item.render(row, item, row[item.name], index, rowIndex);
|
|
1513
1452
|
if (formatter) text = formatter(row, item, row[item.name], index, rowIndex);
|
|
1514
|
-
|
|
1453
|
+
const itemStyle = handStyle(item);
|
|
1515
1454
|
// 存在显示列,最后一列占两格
|
|
1516
1455
|
if (showColumns === 'inside' && !operate && index === headData.length - 1 && !dragRow) {
|
|
1517
1456
|
colSpan = 2;
|
|
@@ -1535,25 +1474,25 @@ var TableBody = function TableBody(props) {
|
|
|
1535
1474
|
});
|
|
1536
1475
|
}, [tableCell, headData, align, formatter, orderFieldArr, orderTypeArr, sortTable, showColumns, operate, beyondText, fixedColumn, tipMaxWidth, dragRow]);
|
|
1537
1476
|
// 操作栏useCallback
|
|
1538
|
-
|
|
1477
|
+
const TableOperateUseCallback = useCallback((row, rowIndex) => {
|
|
1539
1478
|
if (operate || dragRow) {
|
|
1540
|
-
|
|
1479
|
+
let colSpan = 1;
|
|
1541
1480
|
if (showColumns === 'inside' && operate) colSpan = 2;
|
|
1542
|
-
|
|
1481
|
+
const handOperate = () => {
|
|
1543
1482
|
if (operate === null || operate === void 0 ? void 0 : operate.render) return operate.render(row);
|
|
1544
1483
|
if (operate === null || operate === void 0 ? void 0 : operate.operateBtnRender) {
|
|
1545
|
-
|
|
1484
|
+
const operateConfig = operate.operateBtnRender(row, rowIndex);
|
|
1546
1485
|
return jsx(OperateBtn, Object.assign({}, operateConfig));
|
|
1547
1486
|
}
|
|
1548
1487
|
};
|
|
1549
|
-
|
|
1550
|
-
|
|
1488
|
+
const handStyle = () => {
|
|
1489
|
+
const json = {
|
|
1551
1490
|
right: '0'
|
|
1552
1491
|
};
|
|
1553
1492
|
return json;
|
|
1554
1493
|
};
|
|
1555
|
-
|
|
1556
|
-
|
|
1494
|
+
const handCls = () => {
|
|
1495
|
+
let str = 'table-operate';
|
|
1557
1496
|
if (!operate) str += ' table-operate-center';
|
|
1558
1497
|
if (fixedColumn) {
|
|
1559
1498
|
str += ' table-fixed-dom-right';
|
|
@@ -1594,11 +1533,11 @@ var TableBody = function TableBody(props) {
|
|
|
1594
1533
|
}
|
|
1595
1534
|
}, [operate, align, showColumns, posFixed, fixedColumn, dragRow, onDragRow, dragBol]);
|
|
1596
1535
|
// 嵌套表格useCallback
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1536
|
+
const TableExpandableContentUseCallback = useCallback(row => {
|
|
1537
|
+
const id = row[rowKey];
|
|
1538
|
+
const expandItem = expandableRow[id] || {};
|
|
1600
1539
|
if (expandable && expandItem.status === 'develop') {
|
|
1601
|
-
|
|
1540
|
+
const expandableDemo = expandable(row);
|
|
1602
1541
|
if (expandableDemo === false) return null; // 展开表格返回值为false,不展示这一行
|
|
1603
1542
|
return jsx(TrElement, Object.assign({
|
|
1604
1543
|
className: "table-body-expand-row"
|
|
@@ -1613,7 +1552,7 @@ var TableBody = function TableBody(props) {
|
|
|
1613
1552
|
}
|
|
1614
1553
|
}, [expandable, expandableRow, expandableColSpan, rowKey]);
|
|
1615
1554
|
// 加载更多
|
|
1616
|
-
|
|
1555
|
+
const MoreMemo = useMemo(() => {
|
|
1617
1556
|
if (!loadMore || !showMoreBtn) return null;
|
|
1618
1557
|
return jsx(TrElement, Object.assign({
|
|
1619
1558
|
className: "more-table-row",
|
|
@@ -1636,10 +1575,10 @@ var TableBody = function TableBody(props) {
|
|
|
1636
1575
|
}))
|
|
1637
1576
|
}));
|
|
1638
1577
|
}, [expandableColSpan, loadMore, loadMoreRender, onClickMore, showMoreBtn, changePage, loadMoreUrl, lineHeight]);
|
|
1639
|
-
|
|
1578
|
+
const TableBodySubjectContentMemo = useMemo(() => {
|
|
1640
1579
|
return jsx(Fragment, {
|
|
1641
|
-
children: rowData.map(
|
|
1642
|
-
|
|
1580
|
+
children: rowData.map((row, index) => {
|
|
1581
|
+
let str = 'table-body-row';
|
|
1643
1582
|
if (rowClassMapping && rowClassMapping[row[rowKey]]) {
|
|
1644
1583
|
str += " ".concat(rowClassMapping[row[rowKey]]);
|
|
1645
1584
|
}
|
|
@@ -1649,7 +1588,7 @@ var TableBody = function TableBody(props) {
|
|
|
1649
1588
|
style: {
|
|
1650
1589
|
height: "".concat(lineHeight, "px")
|
|
1651
1590
|
},
|
|
1652
|
-
onClick:
|
|
1591
|
+
onClick: e => {
|
|
1653
1592
|
onClickRow && onClickRow(row, e);
|
|
1654
1593
|
}
|
|
1655
1594
|
}, {
|
|
@@ -1660,32 +1599,32 @@ var TableBody = function TableBody(props) {
|
|
|
1660
1599
|
});
|
|
1661
1600
|
}, [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]);
|
|
1662
1601
|
// 内容memo
|
|
1663
|
-
|
|
1602
|
+
const TableBodyContentMemo = useMemo(() => {
|
|
1664
1603
|
return jsxs(Fragment$1, {
|
|
1665
1604
|
children: [TableBodySubjectContentMemo, MoreMemo]
|
|
1666
1605
|
});
|
|
1667
1606
|
}, [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]);
|
|
1668
1607
|
// 处理内容
|
|
1669
|
-
|
|
1608
|
+
const handContent = () => {
|
|
1670
1609
|
// 无数据,且不再请求,显示暂无数据
|
|
1671
1610
|
if (rowData.length === 0 && !loadState) return NodataMemo;
|
|
1672
1611
|
return TableBodyContentMemo;
|
|
1673
1612
|
};
|
|
1674
|
-
|
|
1675
|
-
|
|
1613
|
+
const handleRowData = () => {
|
|
1614
|
+
const arr = [];
|
|
1676
1615
|
if (dragRow) {
|
|
1677
|
-
rowData.forEach(
|
|
1678
|
-
|
|
1616
|
+
rowData.forEach(item => {
|
|
1617
|
+
const obj = {};
|
|
1679
1618
|
obj[rowKey] = item[rowKey];
|
|
1680
1619
|
arr.push(obj);
|
|
1681
1620
|
});
|
|
1682
1621
|
}
|
|
1683
1622
|
return arr;
|
|
1684
1623
|
};
|
|
1685
|
-
|
|
1624
|
+
const onChoose = () => {
|
|
1686
1625
|
setDragBol(true);
|
|
1687
1626
|
};
|
|
1688
|
-
|
|
1627
|
+
const onDragRowCom = evt => {
|
|
1689
1628
|
setDragBol(false);
|
|
1690
1629
|
onDragRow && onDragRow(evt);
|
|
1691
1630
|
};
|
|
@@ -1701,35 +1640,29 @@ var TableBody = function TableBody(props) {
|
|
|
1701
1640
|
}));
|
|
1702
1641
|
};
|
|
1703
1642
|
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
checkNumber =
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
setIndeterminate = _useState2[1]; // 半选中
|
|
1728
|
-
var _useState3 = useState(false),
|
|
1729
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
1730
|
-
checked = _useState4[0],
|
|
1731
|
-
setChecked = _useState4[1]; // 选中
|
|
1732
|
-
useEffect(function () {
|
|
1643
|
+
const TableHead = props => {
|
|
1644
|
+
const {
|
|
1645
|
+
paginationType,
|
|
1646
|
+
flippingArrow,
|
|
1647
|
+
autoPagination,
|
|
1648
|
+
total,
|
|
1649
|
+
page,
|
|
1650
|
+
rowsPerPage,
|
|
1651
|
+
currentRowsPerPage,
|
|
1652
|
+
changePage,
|
|
1653
|
+
changeRowsPerPage,
|
|
1654
|
+
refreshInside,
|
|
1655
|
+
checkCount,
|
|
1656
|
+
onRefresh,
|
|
1657
|
+
selectAll,
|
|
1658
|
+
selectStatus,
|
|
1659
|
+
checkNumber = 0,
|
|
1660
|
+
currentPageTotal = 0
|
|
1661
|
+
} = props;
|
|
1662
|
+
const intl = useFormatMessage('Table', localeJson);
|
|
1663
|
+
const [indeterminate, setIndeterminate] = useState(false); // 半选中
|
|
1664
|
+
const [checked, setChecked] = useState(false); // 选中
|
|
1665
|
+
useEffect(() => {
|
|
1733
1666
|
// 全选
|
|
1734
1667
|
if (selectStatus === 'all') {
|
|
1735
1668
|
setChecked(true);
|
|
@@ -1751,23 +1684,23 @@ var TableHead = function TableHead(props) {
|
|
|
1751
1684
|
* @param event 操作元素
|
|
1752
1685
|
* @param bol 选中 / 不选中
|
|
1753
1686
|
*/
|
|
1754
|
-
|
|
1687
|
+
const onSelectAll = (event, bol) => {
|
|
1755
1688
|
if (selectAll) selectAll(event, bol);
|
|
1756
1689
|
};
|
|
1757
1690
|
// 改变页面
|
|
1758
|
-
|
|
1691
|
+
const changePageCom = num => {
|
|
1759
1692
|
changePage && changePage(num);
|
|
1760
1693
|
};
|
|
1761
1694
|
// 改变每页显示条数
|
|
1762
|
-
|
|
1695
|
+
const changeRowsPerPageCom = num => {
|
|
1763
1696
|
changeRowsPerPage && changeRowsPerPage(num);
|
|
1764
1697
|
};
|
|
1765
1698
|
// 刷新
|
|
1766
|
-
|
|
1699
|
+
const clickRefresh = () => {
|
|
1767
1700
|
onRefresh && onRefresh();
|
|
1768
1701
|
};
|
|
1769
1702
|
// 处理分页右侧
|
|
1770
|
-
|
|
1703
|
+
const handlePaginationRight = () => {
|
|
1771
1704
|
if (!checkCount) return null;
|
|
1772
1705
|
return jsxs("div", Object.assign({
|
|
1773
1706
|
className: 'table-pagination-right'
|
|
@@ -1790,8 +1723,8 @@ var TableHead = function TableHead(props) {
|
|
|
1790
1723
|
}));
|
|
1791
1724
|
};
|
|
1792
1725
|
// 处理样式
|
|
1793
|
-
|
|
1794
|
-
|
|
1726
|
+
const handleClass = () => {
|
|
1727
|
+
const str = 'table-pagination';
|
|
1795
1728
|
return str;
|
|
1796
1729
|
};
|
|
1797
1730
|
return jsxs("div", Object.assign({
|
|
@@ -1808,9 +1741,7 @@ var TableHead = function TableHead(props) {
|
|
|
1808
1741
|
currentRowsPerPage: currentRowsPerPage,
|
|
1809
1742
|
changePage: changePageCom,
|
|
1810
1743
|
changeRowsPerPage: changeRowsPerPageCom,
|
|
1811
|
-
getPopupContainer:
|
|
1812
|
-
return document.body;
|
|
1813
|
-
}
|
|
1744
|
+
getPopupContainer: () => document.body
|
|
1814
1745
|
}), refreshInside && jsx(Button.IconButton, Object.assign({
|
|
1815
1746
|
className: 'refresh-btn',
|
|
1816
1747
|
variant: "outlined",
|
|
@@ -1824,14 +1755,16 @@ var TableHead = function TableHead(props) {
|
|
|
1824
1755
|
var css_248z$2 = ".table-container {\n overflow-x: auto;\n}";
|
|
1825
1756
|
styleInject(css_248z$2);
|
|
1826
1757
|
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1758
|
+
const TableContainer = props => {
|
|
1759
|
+
const {
|
|
1760
|
+
cRef,
|
|
1761
|
+
className,
|
|
1762
|
+
style,
|
|
1763
|
+
children
|
|
1764
|
+
} = props,
|
|
1832
1765
|
otherProps = __rest(props, ["cRef", "className", "style", "children"]);
|
|
1833
|
-
|
|
1834
|
-
|
|
1766
|
+
const handClass = () => {
|
|
1767
|
+
let str = 'table-container';
|
|
1835
1768
|
if (className) str += " ".concat(className);
|
|
1836
1769
|
return str;
|
|
1837
1770
|
};
|
|
@@ -1847,14 +1780,16 @@ var TableContainer = function TableContainer(props) {
|
|
|
1847
1780
|
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}";
|
|
1848
1781
|
styleInject(css_248z$1);
|
|
1849
1782
|
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1783
|
+
const TableElement = props => {
|
|
1784
|
+
const {
|
|
1785
|
+
className,
|
|
1786
|
+
style,
|
|
1787
|
+
fixedColumn,
|
|
1788
|
+
children
|
|
1789
|
+
} = props,
|
|
1855
1790
|
otherProps = __rest(props, ["className", "style", "fixedColumn", "children"]);
|
|
1856
|
-
|
|
1857
|
-
|
|
1791
|
+
const handClass = () => {
|
|
1792
|
+
let str = 'table-element';
|
|
1858
1793
|
if (fixedColumn) str += ' table-element-fixed-column';
|
|
1859
1794
|
if (className) str += " ".concat(className);
|
|
1860
1795
|
return str;
|