zmdms-webui 2.3.6 → 2.3.8
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/dist/es/canvastable/canvasTable.js +111 -25
- package/dist/es/canvastable/components/CanvasTableMenu.js +1 -2
- package/dist/es/canvastable/components/CellOverlay.js +3 -2
- package/dist/es/canvastable/hooks/useHeaderHeight.js +4 -9
- package/dist/es/canvastable/hooks/useProcessedColumns.js +17 -7
- package/dist/es/canvastable/hooks/useSummaryRow.js +4 -11
- package/dist/es/canvastable/hooks/useTableRender.js +159 -55
- package/dist/es/canvastable/hooks/useTableState.js +10 -3
- package/dist/es/canvastable/interface.d.ts +89 -1
- package/dist/es/canvastable/utils/columnHelpers.js +6 -2
- package/dist/es/canvastable/utils/constants.js +9 -2
- package/dist/es/canvastable/utils/interactionHelpers.js +27 -10
- package/dist/es/canvastable/utils/multiHeaderHelpers.js +5 -9
- package/dist/es/canvastable/utils/tableCalculations.js +13 -4
- package/dist/es/table/hooks.js +3 -1
- package/dist/es/table/utils.js +135 -81
- package/dist/index.build.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __assign } from '../_virtual/_tslib.js';
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
-
import { useRef, useState, useCallback, useMemo } from 'react';
|
|
3
|
+
import { useRef, useState, useCallback, useMemo, useImperativeHandle } from 'react';
|
|
4
4
|
import { Spin } from 'antd';
|
|
5
5
|
import './components/FilterPopover.js';
|
|
6
6
|
import CellOverlay from './components/CellOverlay.js';
|
|
@@ -39,7 +39,7 @@ import { getTableColumns } from '../table/utils.js';
|
|
|
39
39
|
import DynamicSetting from '../dynamicsetting/dynamicSetting.js';
|
|
40
40
|
|
|
41
41
|
function CanvasTable(props) {
|
|
42
|
-
var _a = props.dataSource, dataSource = _a === void 0 ? [] : _a, _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rowKey, rowKey = _c === void 0 ? "id" : _c, _d = props.height, height = _d === void 0 ? 600 : _d, width = props.width, _e = props.rowHeight, rowHeight = _e === void 0 ? 36 : _e, _f = props.headerHeight, headerHeight = _f === void 0 ? 36 : _f, rowSelection = props.rowSelection, onSortChange = props.onSortChange, onFilterChange = props.onFilterChange, onScroll = props.onScroll, onRowClick = props.onRowClick, onColumnResize = props.onColumnResize, _g = props.bordered, bordered = _g === void 0 ? true : _g, _h = props.striped, striped = _h === void 0 ? false : _h, _j = props.emptyText, emptyText = _j === void 0 ? "暂无数据" : _j, style = props.style, className = props.className, _k = props.loading, loading = _k === void 0 ? false : _k, _l = props.isContextMenu, isContextMenu = _l === void 0 ? true : _l, isFullscreenHandle = props.isFullscreenHandle, _m = props.mode, mode = _m === void 0 ? "index" : _m, dynamicKey = props.dynamicKey, dynamicVersion = props.dynamicVersion, customDynamicListHandle = props.customDynamicListHandle, isDimensionDynamic = props.isDimensionDynamic, dimensionCustomSumKeys = props.dimensionCustomSumKeys, isAutoMerge = props.isAutoMerge, _o = props.isIndexMerge, isIndexMerge = _o === void 0 ? true : _o, _p = props.isSelectionMerge, isSelectionMerge = _p === void 0 ? false : _p, _q = props.renderMode, renderMode = _q === void 0 ? "object" : _q, fixedRowsCount = props.fixedRowsCount, fixedRowsConfig = props.fixedRowsConfig, _r = props.summaryFixed, summaryFixed = _r === void 0 ? false : _r, _s = props.isAutoScrollY, isAutoScrollY = _s === void 0 ? false : _s, _t = props.autoScrollYMarginBottom, autoScrollYMarginBottom = _t === void 0 ? 65 : _t, canvasTableId = props.canvasTableId, headerWrap = props.headerWrap;
|
|
42
|
+
var _a = props.dataSource, dataSource = _a === void 0 ? [] : _a, _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rowKey, rowKey = _c === void 0 ? "id" : _c, _d = props.height, height = _d === void 0 ? 600 : _d, width = props.width, _e = props.rowHeight, rowHeight = _e === void 0 ? 36 : _e, _f = props.headerHeight, headerHeight = _f === void 0 ? 36 : _f, rowSelection = props.rowSelection, onSortChange = props.onSortChange, onFilterChange = props.onFilterChange, onScroll = props.onScroll, onRowClick = props.onRowClick, onColumnResize = props.onColumnResize, _g = props.bordered, bordered = _g === void 0 ? true : _g, _h = props.striped, striped = _h === void 0 ? false : _h, _j = props.emptyText, emptyText = _j === void 0 ? "暂无数据" : _j, style = props.style, className = props.className, _k = props.loading, loading = _k === void 0 ? false : _k, _l = props.isContextMenu, isContextMenu = _l === void 0 ? true : _l, isFullscreenHandle = props.isFullscreenHandle, _m = props.mode, mode = _m === void 0 ? "index" : _m, dynamicKey = props.dynamicKey, dynamicVersion = props.dynamicVersion, customDynamicListHandle = props.customDynamicListHandle, isDimensionDynamic = props.isDimensionDynamic, dimensionCustomSumKeys = props.dimensionCustomSumKeys, isAutoMerge = props.isAutoMerge, _o = props.isIndexMerge, isIndexMerge = _o === void 0 ? true : _o, _p = props.isSelectionMerge, isSelectionMerge = _p === void 0 ? false : _p, _q = props.renderMode, renderMode = _q === void 0 ? "object" : _q, fixedRowsCount = props.fixedRowsCount, fixedRowsConfig = props.fixedRowsConfig, _r = props.summaryFixed, summaryFixed = _r === void 0 ? false : _r, _s = props.isAutoScrollY, isAutoScrollY = _s === void 0 ? false : _s, _t = props.autoScrollYMarginBottom, autoScrollYMarginBottom = _t === void 0 ? 65 : _t, canvasTableId = props.canvasTableId, headerWrap = props.headerWrap, _u = props.headerAlign, headerAlign = _u === void 0 ? "center" : _u, tableRefHandle = props.tableRefHandle, exportExcelConfig = props.exportExcelConfig;
|
|
43
43
|
var canvasRef = useRef(null);
|
|
44
44
|
var containerRef = useRef(null);
|
|
45
45
|
var filterPopoverRef = useRef(null);
|
|
@@ -61,15 +61,17 @@ function CanvasTable(props) {
|
|
|
61
61
|
return String((_a = record[rowKey]) !== null && _a !== void 0 ? _a : index);
|
|
62
62
|
}, [rowKey]);
|
|
63
63
|
// 动态列配置
|
|
64
|
-
var
|
|
64
|
+
var _v = useDynamicListByColumns(columns, {
|
|
65
65
|
dynamicKey: dynamicKey,
|
|
66
66
|
dynamicVersion: dynamicVersion,
|
|
67
67
|
customDynamicListHandle: customDynamicListHandle,
|
|
68
|
-
}), defaultDynamicList =
|
|
68
|
+
}), defaultDynamicList = _v.defaultDynamicList, currentDynamicList = _v.currentDynamicList, onCurrentListChange = _v.onCurrentListChange, dynamicSettingRef = _v.dynamicSettingRef;
|
|
69
69
|
// 根据动态列配置处理columns
|
|
70
70
|
var dynamicColumns = useMemo(function () { return getTableColumns(columns, currentDynamicList); }, [columns, currentDynamicList]).columns;
|
|
71
71
|
// 内部列宽状态(未开启动态配置时使用)
|
|
72
|
-
var
|
|
72
|
+
var _w = useState({}), internalColumnWidths = _w[0], setInternalColumnWidths = _w[1];
|
|
73
|
+
// 跟踪用户手动调整过宽度的列(用于排除自动宽度分配)
|
|
74
|
+
var _x = useState(new Set()), manuallyResizedColumnKeys = _x[0], setManuallyResizedColumnKeys = _x[1];
|
|
73
75
|
// 处理选中框列、序号列等
|
|
74
76
|
var processedColumnsOld = useProcessedColumns({
|
|
75
77
|
columns: columns,
|
|
@@ -81,30 +83,32 @@ function CanvasTable(props) {
|
|
|
81
83
|
renderMode: renderMode,
|
|
82
84
|
dynamicSettingRef: dynamicSettingRef,
|
|
83
85
|
headerWrap: headerWrap,
|
|
86
|
+
headerAlign: headerAlign,
|
|
84
87
|
});
|
|
85
88
|
// 表格状态管理
|
|
86
|
-
var
|
|
89
|
+
var _y = useTableState({
|
|
87
90
|
dataSource: dataSource,
|
|
88
91
|
columns: processedColumnsOld,
|
|
89
92
|
rowSelection: rowSelection,
|
|
90
93
|
onFilterChange: onFilterChange,
|
|
91
|
-
|
|
94
|
+
isAutoMerge: isAutoMerge,
|
|
95
|
+
}), state = _y.state, setState = _y.setState, processedDataSource = _y.processedDataSource, handleFilterChange = _y.handleFilterChange, closeFilterPopover = _y.closeFilterPopover, autoGeneratedFilters = _y.autoGeneratedFilters;
|
|
92
96
|
var order = useMemo(function () {
|
|
93
97
|
return state.sortOrder && state.sortField
|
|
94
98
|
? { field: state.sortField, order: state.sortOrder }
|
|
95
99
|
: undefined;
|
|
96
100
|
}, [state.sortOrder, state.sortField]);
|
|
97
|
-
var
|
|
101
|
+
var _z = useAutoMerge(processedDataSource, processedColumnsOld, {
|
|
98
102
|
isAutoMerge: isAutoMerge,
|
|
99
103
|
isDimensionDynamic: isDimensionDynamic,
|
|
100
104
|
order: order,
|
|
101
105
|
dimensionCustomSumKeys: dimensionCustomSumKeys,
|
|
102
|
-
}), newDataSource =
|
|
106
|
+
}), newDataSource = _z[0], processedColumns = _z[1];
|
|
103
107
|
// 生成合计行和最终数据源
|
|
104
|
-
var
|
|
108
|
+
var _0 = useSummaryRow({
|
|
105
109
|
columns: processedColumns,
|
|
106
110
|
dataSource: newDataSource,
|
|
107
|
-
}), finalDataSource =
|
|
111
|
+
}), finalDataSource = _0.finalDataSource, hasSummaryRow = _0.hasSummaryRow;
|
|
108
112
|
// 自动高度计算(需要在容器尺寸计算之前)
|
|
109
113
|
var autoHeight = useCanvasTableAutoHeight(isAutoScrollY, autoScrollYMarginBottom, canvasTableId);
|
|
110
114
|
// 监听容器尺寸变化(提前计算,用于列宽自适应)
|
|
@@ -116,7 +120,10 @@ function CanvasTable(props) {
|
|
|
116
120
|
var containerWidth = containerSize.width;
|
|
117
121
|
var containerHeight = containerSize.height;
|
|
118
122
|
// 计算列的渲染信息(使用容器宽度进行自适应填充)
|
|
119
|
-
|
|
123
|
+
// 手动调整过宽度的列不参与自动宽度分配
|
|
124
|
+
var columnRenderInfos = useMemo(function () {
|
|
125
|
+
return calculateColumnRenderInfos(processedColumns, containerWidth, manuallyResizedColumnKeys);
|
|
126
|
+
}, [processedColumns, containerWidth, manuallyResizedColumnKeys]);
|
|
120
127
|
// 计算表头动态高度(支持wrap换行)
|
|
121
128
|
// 注意:必须在 columnRenderInfos 计算之后,以便使用实际的列宽
|
|
122
129
|
var calculatedHeaderHeight = useHeaderHeight({
|
|
@@ -137,7 +144,7 @@ function CanvasTable(props) {
|
|
|
137
144
|
return calculateTotalHeight(calculatedHeaderHeight, finalDataSource.length, rowHeight);
|
|
138
145
|
}, [calculatedHeaderHeight, finalDataSource.length, rowHeight]);
|
|
139
146
|
// 计算滚动条指标
|
|
140
|
-
var
|
|
147
|
+
var _1 = useScrollbarMetrics({
|
|
141
148
|
containerWidth: containerWidth,
|
|
142
149
|
containerHeight: containerHeight,
|
|
143
150
|
totalWidth: totalWidth,
|
|
@@ -145,15 +152,15 @@ function CanvasTable(props) {
|
|
|
145
152
|
headerHeight: calculatedHeaderHeight,
|
|
146
153
|
scrollTop: 0,
|
|
147
154
|
scrollLeft: 0,
|
|
148
|
-
}), maxScrollTop =
|
|
155
|
+
}), maxScrollTop = _1.maxScrollTop, maxScrollLeft = _1.maxScrollLeft;
|
|
149
156
|
// 滚动管理(使用预先计算的maxScrollTop和maxScrollLeft)
|
|
150
|
-
var
|
|
157
|
+
var _2 = useTableScroll({
|
|
151
158
|
canvasRef: canvasRef,
|
|
152
159
|
containerRef: containerRef,
|
|
153
160
|
maxScrollTop: maxScrollTop,
|
|
154
161
|
maxScrollLeft: maxScrollLeft,
|
|
155
162
|
onScroll: onScroll,
|
|
156
|
-
}), scrollState =
|
|
163
|
+
}), scrollState = _2.scrollState, setScrollState = _2.setScrollState;
|
|
157
164
|
// 数据变化时重置滚动位置(筛选、排序、数据源更新等操作后)
|
|
158
165
|
useScrollReset({
|
|
159
166
|
dataSourceLength: dataSource.length,
|
|
@@ -174,17 +181,23 @@ function CanvasTable(props) {
|
|
|
174
181
|
scrollLeft: scrollState.scrollLeft,
|
|
175
182
|
}).actualMetrics;
|
|
176
183
|
// 单元格框选
|
|
177
|
-
var
|
|
184
|
+
var _3 = useTableSelection({
|
|
178
185
|
state: state,
|
|
179
186
|
setState: setState,
|
|
180
187
|
}),
|
|
181
188
|
// selectionStartRef,
|
|
182
|
-
startSelection =
|
|
189
|
+
startSelection = _3.startSelection, updateSelection = _3.updateSelection, extendSelection = _3.extendSelection;
|
|
183
190
|
// 处理列宽调整
|
|
184
191
|
var handleColumnResize = useCallback(function (columnKey, newWidth) {
|
|
185
192
|
var _a;
|
|
186
193
|
// 先调用外部回调(用户可以监听列宽变化)
|
|
187
194
|
onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize(columnKey, newWidth);
|
|
195
|
+
// 记录用户手动调整过的列
|
|
196
|
+
setManuallyResizedColumnKeys(function (prev) {
|
|
197
|
+
var newSet = new Set(prev);
|
|
198
|
+
newSet.add(columnKey);
|
|
199
|
+
return newSet;
|
|
200
|
+
});
|
|
188
201
|
if (dynamicKey && currentDynamicList) {
|
|
189
202
|
// 开启了动态配置:更新到动态配置中
|
|
190
203
|
var newList = currentDynamicList.map(function (item) { return (__assign({}, item)); });
|
|
@@ -228,13 +241,13 @@ function CanvasTable(props) {
|
|
|
228
241
|
onCurrentListChange,
|
|
229
242
|
]);
|
|
230
243
|
// 列宽调整
|
|
231
|
-
var
|
|
244
|
+
var _4 = useColumnResize({
|
|
232
245
|
columnRenderInfos: columnRenderInfos,
|
|
233
246
|
containerWidth: containerWidth,
|
|
234
247
|
headerHeight: calculatedHeaderHeight,
|
|
235
248
|
scrollLeft: scrollState.scrollLeft,
|
|
236
249
|
onColumnResize: handleColumnResize,
|
|
237
|
-
}), resizeState =
|
|
250
|
+
}), resizeState = _4.resizeState, checkResizeHandle = _4.checkResizeHandle, startResize = _4.startResize, updateResize = _4.updateResize, endResize = _4.endResize, setHoverResizeColumn = _4.setHoverResizeColumn, getColumnWidth = _4.getColumnWidth, RESIZE_HANDLE_WIDTH = _4.RESIZE_HANDLE_WIDTH;
|
|
238
251
|
// 复制到剪贴板
|
|
239
252
|
var getSelectedCellsText = useCopyToClipboard({
|
|
240
253
|
cellSelection: state.cellSelection,
|
|
@@ -251,13 +264,17 @@ function CanvasTable(props) {
|
|
|
251
264
|
});
|
|
252
265
|
}
|
|
253
266
|
}, [getSelectedCellsText]);
|
|
267
|
+
// 过滤勾选框和index行给导出用
|
|
268
|
+
var exportColumns = useMemo(function () {
|
|
269
|
+
return processedColumns.filter(function (item) { return !item.key.includes("__"); });
|
|
270
|
+
}, [processedColumns]);
|
|
254
271
|
// Excel导出功能
|
|
255
272
|
var exportExcel = useExcelExport(processedDataSource, {
|
|
256
|
-
columns:
|
|
273
|
+
columns: exportColumns,
|
|
257
274
|
isAutoMerge: isAutoMerge,
|
|
258
275
|
});
|
|
259
276
|
// 交互事件处理(使用baseScrollbarMetrics的maxScrollTop/maxScrollLeft以保持稳定)
|
|
260
|
-
var
|
|
277
|
+
var _5 = useTableInteraction({
|
|
261
278
|
state: state,
|
|
262
279
|
setState: setState,
|
|
263
280
|
scrollState: scrollState,
|
|
@@ -303,11 +320,11 @@ function CanvasTable(props) {
|
|
|
303
320
|
fixedRowsCount: fixedRowsCount,
|
|
304
321
|
fixedRowsConfig: fixedRowsConfig,
|
|
305
322
|
summaryFixed: summaryFixed,
|
|
306
|
-
}), handleCanvasMouseDown =
|
|
323
|
+
}), handleCanvasMouseDown = _5.handleCanvasMouseDown, handleCanvasMouseMove = _5.handleCanvasMouseMove, handleCanvasMouseUp = _5.handleCanvasMouseUp, handleCanvasMouseLeave = _5.handleCanvasMouseLeave, handleCanvasContextMenu = _5.handleCanvasContextMenu;
|
|
307
324
|
// 渲染表格
|
|
308
325
|
useTableRender(__assign(__assign({ canvasRef: canvasRef, processedDataSource: finalDataSource, columnRenderInfos: columnRenderInfos, columns: processedColumns, // 传递原始columns用于渲染多级表头
|
|
309
326
|
state: state, scrollState: scrollState, rowSelection: rowSelection, containerWidth: containerWidth, containerHeight: containerHeight, headerHeight: calculatedHeaderHeight, baseHeaderHeight: headerHeight, // 传入原始基础高度用于计算每层高度
|
|
310
|
-
rowHeight: rowHeight, bordered: bordered, striped: striped }, scrollbarMetrics), { getRowKey: getRowKey, resizeState: resizeState, getColumnWidth: getColumnWidth, RESIZE_HANDLE_WIDTH: RESIZE_HANDLE_WIDTH, mergeCellMap: mergeCellMap, hasSummaryRow: hasSummaryRow, fixedRowsCount: fixedRowsCount, fixedRowsConfig: fixedRowsConfig, summaryFixed: summaryFixed }));
|
|
327
|
+
rowHeight: rowHeight, bordered: bordered, striped: striped, headerAlign: headerAlign }, scrollbarMetrics), { getRowKey: getRowKey, resizeState: resizeState, getColumnWidth: getColumnWidth, RESIZE_HANDLE_WIDTH: RESIZE_HANDLE_WIDTH, mergeCellMap: mergeCellMap, hasSummaryRow: hasSummaryRow, fixedRowsCount: fixedRowsCount, fixedRowsConfig: fixedRowsConfig, summaryFixed: summaryFixed }));
|
|
311
328
|
// 单元格覆盖层
|
|
312
329
|
var cellOverlays = useTableCellOverlay({
|
|
313
330
|
canvasRef: canvasRef,
|
|
@@ -365,6 +382,73 @@ function CanvasTable(props) {
|
|
|
365
382
|
isVisible: state.badgePopover.visible,
|
|
366
383
|
onClose: handleCloseBadgePopover,
|
|
367
384
|
});
|
|
385
|
+
// 暴露给外部的方法
|
|
386
|
+
useImperativeHandle(tableRefHandle, function () { return ({
|
|
387
|
+
/** 获取当前表格的配置信息(动态列配置) */
|
|
388
|
+
getDynamicList: function () {
|
|
389
|
+
return currentDynamicList || [];
|
|
390
|
+
},
|
|
391
|
+
/** 动态列配置重置 */
|
|
392
|
+
onResetDynamicList: function () {
|
|
393
|
+
var _a, _b;
|
|
394
|
+
(_b = (_a = dynamicSettingRef.current) === null || _a === void 0 ? void 0 : _a.resetList) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
395
|
+
},
|
|
396
|
+
/** 动态列配置设置 */
|
|
397
|
+
onSetDynamicList: function (list) {
|
|
398
|
+
var _a, _b;
|
|
399
|
+
(_b = (_a = dynamicSettingRef.current) === null || _a === void 0 ? void 0 : _a.updateList) === null || _b === void 0 ? void 0 : _b.call(_a, list);
|
|
400
|
+
},
|
|
401
|
+
/** 导出Excel */
|
|
402
|
+
exportExcel: exportExcel,
|
|
403
|
+
/** 获取表格容器 */
|
|
404
|
+
getContainer: function () { return containerRef.current; },
|
|
405
|
+
/** 全屏展示表格 */
|
|
406
|
+
toggleFullScreen: function () {
|
|
407
|
+
var _a;
|
|
408
|
+
(_a = tableMenuRef.current) === null || _a === void 0 ? void 0 : _a.toggleFullscreen();
|
|
409
|
+
},
|
|
410
|
+
/** 获取选中的行keys */
|
|
411
|
+
getSelectedRowKeys: function () {
|
|
412
|
+
return state.selectedRowKeys;
|
|
413
|
+
},
|
|
414
|
+
/** 设置选中的行keys */
|
|
415
|
+
setSelectedRowKeys: function (keys) {
|
|
416
|
+
setState(function (prev) { return (__assign(__assign({}, prev), { selectedRowKeys: keys })); });
|
|
417
|
+
},
|
|
418
|
+
/** 滚动到指定位置 */
|
|
419
|
+
scrollTo: function (params) {
|
|
420
|
+
setScrollState(function (prev) { return (__assign(__assign({}, prev), { scrollLeft: params.x !== undefined ? params.x : prev.scrollLeft, scrollTop: params.y !== undefined ? params.y : prev.scrollTop })); });
|
|
421
|
+
},
|
|
422
|
+
/** 获取当前排序状态 */
|
|
423
|
+
getSortState: function () {
|
|
424
|
+
return {
|
|
425
|
+
field: state.sortField,
|
|
426
|
+
order: state.sortOrder,
|
|
427
|
+
};
|
|
428
|
+
},
|
|
429
|
+
/** 获取当前过滤状态 */
|
|
430
|
+
getFilterState: function () {
|
|
431
|
+
return state.filters;
|
|
432
|
+
},
|
|
433
|
+
/** 清除排序 */
|
|
434
|
+
clearSort: function () {
|
|
435
|
+
setState(function (prev) { return (__assign(__assign({}, prev), { sortField: null, sortOrder: null })); });
|
|
436
|
+
},
|
|
437
|
+
/** 清除过滤 */
|
|
438
|
+
clearFilter: function () {
|
|
439
|
+
setState(function (prev) { return (__assign(__assign({}, prev), { filters: {} })); });
|
|
440
|
+
},
|
|
441
|
+
}); }, [
|
|
442
|
+
currentDynamicList,
|
|
443
|
+
dynamicSettingRef,
|
|
444
|
+
exportExcel,
|
|
445
|
+
state.selectedRowKeys,
|
|
446
|
+
state.sortField,
|
|
447
|
+
state.sortOrder,
|
|
448
|
+
state.filters,
|
|
449
|
+
setState,
|
|
450
|
+
setScrollState,
|
|
451
|
+
]);
|
|
368
452
|
return (jsx(Spin, __assign({ spinning: loading }, { children: jsxs("div", __assign({ ref: containerRef, id: canvasTableId, className: "canvas-table-container ".concat(className || ""), tabIndex: 0, style: __assign(__assign({}, style), { position: "relative", width: width || "100%", height: containerHeight, overflow: "hidden", touchAction: "none", outline: "none" }) }, { children: [jsx("canvas", { ref: canvasRef, onMouseDown: handleCanvasMouseDown, onMouseMove: handleCanvasMouseMove, onMouseUp: handleCanvasMouseUp, onMouseLeave: handleCanvasMouseLeave, onContextMenu: handleCanvasContextMenu, style: {
|
|
369
453
|
display: "block",
|
|
370
454
|
// cursor 由 useTableInteraction 动态管理
|
|
@@ -374,7 +458,9 @@ function CanvasTable(props) {
|
|
|
374
458
|
WebkitFontSmoothing: "antialiased",
|
|
375
459
|
MozOsxFontSmoothing: "grayscale",
|
|
376
460
|
textRendering: "optimizeLegibility",
|
|
377
|
-
} }), dynamicKey ? (jsx(DynamicSetting, { parentDynamicKey: TABLE_DYNAMIC_KEY, dynamicKey: dynamicKey, defaultList: defaultDynamicList, onCurrentListChange: onCurrentListChange, ref: dynamicSettingRef, hiddenOperationIcon: true, isMore: true, isFixed: true, isDimensionDynamic: isDimensionDynamic })) : null, jsx(EmptyPlaceholder, { visible: finalDataSource.length === 0, text: emptyText, headerHeight: calculatedHeaderHeight }), jsx(HeaderOverlay, { overlays: headerOverlays }), jsx(CellOverlay, { overlays: cellOverlays }), filterPopoverElement, jsx(Tooltip, { visible: state.tooltip.visible, content: state.tooltip.content, position: state.tooltip.position }), jsx(BadgePopover, { visible: state.badgePopover.visible, content: state.badgePopover.content, position: state.badgePopover.position, popoverRef: badgePopoverRef }), menuId ? (jsx(CanvasTableMenu, { menuId: menuId, containerRef: containerRef, isFullscreenHandle: isFullscreenHandle, tableMenuRef: tableMenuRef, onCopy: handleCopy, onExport:
|
|
461
|
+
} }), dynamicKey ? (jsx(DynamicSetting, { parentDynamicKey: TABLE_DYNAMIC_KEY, dynamicKey: dynamicKey, defaultList: defaultDynamicList, onCurrentListChange: onCurrentListChange, ref: dynamicSettingRef, hiddenOperationIcon: true, isMore: true, isFixed: true, isDimensionDynamic: isDimensionDynamic })) : null, jsx(EmptyPlaceholder, { visible: finalDataSource.length === 0, text: emptyText, headerHeight: calculatedHeaderHeight }), jsx(HeaderOverlay, { overlays: headerOverlays }), jsx(CellOverlay, { overlays: cellOverlays }), filterPopoverElement, jsx(Tooltip, { visible: state.tooltip.visible, content: state.tooltip.content, position: state.tooltip.position }), jsx(BadgePopover, { visible: state.badgePopover.visible, content: state.badgePopover.content, position: state.badgePopover.position, popoverRef: badgePopoverRef }), menuId ? (jsx(CanvasTableMenu, { menuId: menuId, containerRef: containerRef, isFullscreenHandle: isFullscreenHandle, tableMenuRef: tableMenuRef, onCopy: handleCopy, onExport: function () {
|
|
462
|
+
return exportExcel((exportExcelConfig === null || exportExcelConfig === void 0 ? void 0 : exportExcelConfig.fileName) || "表格数据.xlsx", exportExcelConfig);
|
|
463
|
+
} })) : null] })) })));
|
|
378
464
|
}
|
|
379
465
|
|
|
380
466
|
export { CanvasTable as default };
|
|
@@ -32,8 +32,7 @@ var CanvasTableMenu = function (_a) {
|
|
|
32
32
|
break;
|
|
33
33
|
}
|
|
34
34
|
case "export": {
|
|
35
|
-
|
|
36
|
-
onExport === null || onExport === void 0 ? void 0 : onExport(fileName);
|
|
35
|
+
onExport === null || onExport === void 0 ? void 0 : onExport();
|
|
37
36
|
break;
|
|
38
37
|
}
|
|
39
38
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { __assign } from '../../_virtual/_tslib.js';
|
|
2
2
|
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
3
|
+
import { TEXT_PADDING } from '../utils/constants.js';
|
|
3
4
|
|
|
4
5
|
var CellOverlay = function (_a) {
|
|
5
6
|
var overlays = _a.overlays;
|
|
@@ -27,9 +28,9 @@ var CellOverlay = function (_a) {
|
|
|
27
28
|
})(), // 根据固定列和固定行设置 z-index
|
|
28
29
|
} }, { children: jsx("div", __assign({ className: "canvas-table-cell-content", style: {
|
|
29
30
|
position: "absolute",
|
|
30
|
-
left: -overlay.offsetLeft +
|
|
31
|
+
left: -overlay.offsetLeft + TEXT_PADDING,
|
|
31
32
|
top: -overlay.offsetTop,
|
|
32
|
-
width: overlay.originalWidth -
|
|
33
|
+
width: overlay.originalWidth - TEXT_PADDING * 2,
|
|
33
34
|
height: overlay.originalHeight,
|
|
34
35
|
display: "flex",
|
|
35
36
|
alignItems: "center",
|
|
@@ -1,14 +1,8 @@
|
|
|
1
1
|
import { __spreadArray } from '../../_virtual/_tslib.js';
|
|
2
2
|
import { useState, useEffect } from 'react';
|
|
3
3
|
import { getMaxDepth, calculateLayerHeights } from '../utils/multiHeaderHelpers.js';
|
|
4
|
+
import { FONT_SIZE, FONT_FAMILY, LINE_HEIGHT, TEXT_PADDING, FILTER_ICON_WIDTH, SORT_ICON_WIDTH, ICON_SPACING } from '../utils/constants.js';
|
|
4
5
|
|
|
5
|
-
var FONT_SIZE = 13;
|
|
6
|
-
var FONT_FAMILY = '"Microsoft YaHei", 微软雅黑, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
|
|
7
|
-
var LINE_HEIGHT = 20;
|
|
8
|
-
var FILTER_ICON_WIDTH = 15;
|
|
9
|
-
var SORT_ICON_WIDTH = 15;
|
|
10
|
-
var ICON_SPACING = 4;
|
|
11
|
-
var TEXT_PADDING = 5;
|
|
12
6
|
/**
|
|
13
7
|
* 计算文本在给定宽度下需要的行数
|
|
14
8
|
*/
|
|
@@ -94,9 +88,10 @@ var useHeaderHeight = function (params) {
|
|
|
94
88
|
var columnWidth = ((_a = columnRenderInfos === null || columnRenderInfos === void 0 ? void 0 : columnRenderInfos[index]) === null || _a === void 0 ? void 0 : _a.width) || column.width || 100;
|
|
95
89
|
return calculateColumnLines(ctx, column, columnWidth);
|
|
96
90
|
}), false));
|
|
97
|
-
//
|
|
91
|
+
// 当有换行时:上边距(5px) + 行数 * 行高 + 下边距(5px)
|
|
92
|
+
// 当没有换行时:使用原始的 headerHeight
|
|
98
93
|
return maxLines > 1
|
|
99
|
-
?
|
|
94
|
+
? 10 + maxLines * LINE_HEIGHT // 上下边距各5px,共10px
|
|
100
95
|
: headerHeight;
|
|
101
96
|
};
|
|
102
97
|
setCalculatedHeight(calculateHeight());
|
|
@@ -16,7 +16,7 @@ import '../../node_modules/screenfull/index.js';
|
|
|
16
16
|
import ColumnDynamic from '../components/ColumnDynamic.js';
|
|
17
17
|
|
|
18
18
|
var useProcessedColumns = function (params) {
|
|
19
|
-
var columns = params.columns, dynamicColumns = params.dynamicColumns, mode = params.mode, rowSelection = params.rowSelection, internalColumnWidths = params.internalColumnWidths, dynamicKey = params.dynamicKey, _a = params.renderMode, renderMode = _a === void 0 ? "object" : _a, dynamicSettingRef = params.dynamicSettingRef, headerWrap = params.headerWrap;
|
|
19
|
+
var columns = params.columns, dynamicColumns = params.dynamicColumns, mode = params.mode, rowSelection = params.rowSelection, internalColumnWidths = params.internalColumnWidths, dynamicKey = params.dynamicKey, _a = params.renderMode, renderMode = _a === void 0 ? "object" : _a, dynamicSettingRef = params.dynamicSettingRef, headerWrap = params.headerWrap, _b = params.headerAlign, headerAlign = _b === void 0 ? "center" : _b;
|
|
20
20
|
return useMemo(function () {
|
|
21
21
|
var cols = __spreadArray([], (dynamicColumns || columns), true);
|
|
22
22
|
// 添加序号列
|
|
@@ -62,11 +62,19 @@ var useProcessedColumns = function (params) {
|
|
|
62
62
|
}
|
|
63
63
|
// 应用内部列宽状态(未开启动态配置时)
|
|
64
64
|
if (!dynamicKey && Object.keys(internalColumnWidths).length > 0) {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
65
|
+
// 递归应用列宽
|
|
66
|
+
var applyColumnWidths_1 = function (columns) {
|
|
67
|
+
columns.forEach(function (col) {
|
|
68
|
+
if (col.key && internalColumnWidths[col.key]) {
|
|
69
|
+
col.width = internalColumnWidths[col.key];
|
|
70
|
+
}
|
|
71
|
+
// 递归处理子列(多级表头)
|
|
72
|
+
if (col.children && col.children.length > 0) {
|
|
73
|
+
applyColumnWidths_1(col.children);
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
applyColumnWidths_1(cols);
|
|
70
78
|
}
|
|
71
79
|
// 验证动态列配置
|
|
72
80
|
if (dynamicKey) {
|
|
@@ -79,7 +87,7 @@ var useProcessedColumns = function (params) {
|
|
|
79
87
|
}
|
|
80
88
|
// 处理render函数
|
|
81
89
|
return cols.map(function (col) {
|
|
82
|
-
return processColumnRender(col, renderMode, headerWrap);
|
|
90
|
+
return processColumnRender(col, renderMode, headerWrap, headerAlign);
|
|
83
91
|
});
|
|
84
92
|
}, [
|
|
85
93
|
dynamicColumns,
|
|
@@ -90,6 +98,8 @@ var useProcessedColumns = function (params) {
|
|
|
90
98
|
internalColumnWidths,
|
|
91
99
|
renderMode,
|
|
92
100
|
dynamicSettingRef,
|
|
101
|
+
headerWrap,
|
|
102
|
+
headerAlign,
|
|
93
103
|
]);
|
|
94
104
|
};
|
|
95
105
|
|
|
@@ -22,15 +22,8 @@ var useSummaryRow = function (params) {
|
|
|
22
22
|
if (!hasSummary)
|
|
23
23
|
return null;
|
|
24
24
|
var summaryRecord = {};
|
|
25
|
-
//
|
|
26
|
-
var
|
|
27
|
-
for (var i = 0; i < leafColumns.length; i++) {
|
|
28
|
-
var col = leafColumns[i];
|
|
29
|
-
if (col.key !== "__index__" && col.key !== "__selection__") {
|
|
30
|
-
firstDataColIndex = i;
|
|
31
|
-
break;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
25
|
+
// 找到第一个列(包括序号列、选择框列)
|
|
26
|
+
var firstColIndex = leafColumns.length > 0 ? 0 : -1;
|
|
34
27
|
leafColumns.forEach(function (column, colIndex) {
|
|
35
28
|
var dataIndex = column.dataIndex || column.key;
|
|
36
29
|
if (column.isSummary) {
|
|
@@ -60,8 +53,8 @@ var useSummaryRow = function (params) {
|
|
|
60
53
|
}
|
|
61
54
|
summaryRecord[dataIndex] = formattedSum;
|
|
62
55
|
}
|
|
63
|
-
else if (colIndex ===
|
|
64
|
-
//
|
|
56
|
+
else if (colIndex === firstColIndex) {
|
|
57
|
+
// 第一列显示"合计"(可以是序号列、选择框列或数据列)
|
|
65
58
|
summaryRecord[dataIndex] = "合计";
|
|
66
59
|
}
|
|
67
60
|
else {
|