zmdms-webui 2.3.3 → 2.3.4
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 +29 -25
- package/dist/es/canvastable/components/ColumnDynamic.js +3 -1
- package/dist/es/canvastable/hooks/useAutoHeight.js +67 -0
- package/dist/es/canvastable/hooks/useHeaderHeight.js +1 -1
- package/dist/es/canvastable/hooks/useOverlays.js +7 -7
- package/dist/es/canvastable/hooks/usePopovers.js +1 -0
- package/dist/es/canvastable/hooks/useProcessedColumns.js +5 -3
- package/dist/es/canvastable/hooks/useScroll.js +1 -0
- package/dist/es/canvastable/hooks/useSummaryRow.js +32 -19
- package/dist/es/canvastable/hooks/useTableInteraction.js +3 -2
- package/dist/es/canvastable/hooks/useTableRender.js +14 -11
- package/dist/es/canvastable/hooks/useTableState.js +1 -0
- package/dist/es/canvastable/interface.d.ts +26 -2
- package/dist/es/canvastable/utils/cellHelpers.js +5 -5
- package/dist/es/canvastable/utils/constants.js +2 -2
- package/dist/es/canvastable/utils/formatHelpers.js +4 -25
- package/dist/index.build.d.ts +1 -1
- package/package.json +1 -1
|
@@ -26,8 +26,10 @@ import { useMergeCells } from './hooks/useMergeCells.js';
|
|
|
26
26
|
import { useContainerSize } from './hooks/useContainerSize.js';
|
|
27
27
|
import { useProcessedColumns } from './hooks/useProcessedColumns.js';
|
|
28
28
|
import { useSummaryRow } from './hooks/useSummaryRow.js';
|
|
29
|
+
import { useCanvasTableAutoHeight } from './hooks/useAutoHeight.js';
|
|
29
30
|
import { SCROLLBAR_SIZE } from './utils/constants.js';
|
|
30
31
|
import { calculateColumnRenderInfos, calculateTotalWidth, calculateTotalHeight } from './utils/tableCalculations.js';
|
|
32
|
+
import 'zmdms-utils';
|
|
31
33
|
import 'dayjs';
|
|
32
34
|
import { TABLE_DYNAMIC_KEY } from '../table/constant.js';
|
|
33
35
|
import { useDynamicListByColumns } from '../table/useDynamicListByColumns.js';
|
|
@@ -37,7 +39,7 @@ import { getTableColumns } from '../table/utils.js';
|
|
|
37
39
|
import DynamicSetting from '../dynamicsetting/dynamicSetting.js';
|
|
38
40
|
|
|
39
41
|
function CanvasTable(props) {
|
|
40
|
-
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,
|
|
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;
|
|
41
43
|
var canvasRef = useRef(null);
|
|
42
44
|
var containerRef = useRef(null);
|
|
43
45
|
var filterPopoverRef = useRef(null);
|
|
@@ -59,11 +61,11 @@ function CanvasTable(props) {
|
|
|
59
61
|
return String((_a = record[rowKey]) !== null && _a !== void 0 ? _a : index);
|
|
60
62
|
}, [rowKey]);
|
|
61
63
|
// 动态列配置
|
|
62
|
-
var
|
|
64
|
+
var _u = useDynamicListByColumns(columns, {
|
|
63
65
|
dynamicKey: dynamicKey,
|
|
64
66
|
dynamicVersion: dynamicVersion,
|
|
65
67
|
customDynamicListHandle: customDynamicListHandle,
|
|
66
|
-
}), defaultDynamicList =
|
|
68
|
+
}), defaultDynamicList = _u.defaultDynamicList, currentDynamicList = _u.currentDynamicList, onCurrentListChange = _u.onCurrentListChange, dynamicSettingRef = _u.dynamicSettingRef;
|
|
67
69
|
// 根据动态列配置处理columns
|
|
68
70
|
var dynamicColumns = useMemo(function () { return getTableColumns(columns, currentDynamicList); }, [columns, currentDynamicList]).columns;
|
|
69
71
|
// 计算表头动态高度(支持wrap换行)
|
|
@@ -72,7 +74,7 @@ function CanvasTable(props) {
|
|
|
72
74
|
headerHeight: headerHeight,
|
|
73
75
|
});
|
|
74
76
|
// 内部列宽状态(未开启动态配置时使用)
|
|
75
|
-
var
|
|
77
|
+
var _v = useState({}), internalColumnWidths = _v[0], setInternalColumnWidths = _v[1];
|
|
76
78
|
// 处理选中框列、序号列等
|
|
77
79
|
var processedColumnsOld = useProcessedColumns({
|
|
78
80
|
columns: columns,
|
|
@@ -85,28 +87,28 @@ function CanvasTable(props) {
|
|
|
85
87
|
dynamicSettingRef: dynamicSettingRef,
|
|
86
88
|
});
|
|
87
89
|
// 表格状态管理
|
|
88
|
-
var
|
|
90
|
+
var _w = useTableState({
|
|
89
91
|
dataSource: dataSource,
|
|
90
92
|
columns: processedColumnsOld,
|
|
91
93
|
rowSelection: rowSelection,
|
|
92
94
|
onFilterChange: onFilterChange,
|
|
93
|
-
}), state =
|
|
95
|
+
}), state = _w.state, setState = _w.setState, processedDataSource = _w.processedDataSource, handleFilterChange = _w.handleFilterChange, closeFilterPopover = _w.closeFilterPopover, autoGeneratedFilters = _w.autoGeneratedFilters;
|
|
94
96
|
var order = useMemo(function () {
|
|
95
97
|
return state.sortOrder && state.sortField
|
|
96
98
|
? { field: state.sortField, order: state.sortOrder }
|
|
97
99
|
: undefined;
|
|
98
100
|
}, [state.sortOrder, state.sortField]);
|
|
99
|
-
var
|
|
101
|
+
var _x = useAutoMerge(processedDataSource, processedColumnsOld, {
|
|
100
102
|
isAutoMerge: isAutoMerge,
|
|
101
103
|
isDimensionDynamic: isDimensionDynamic,
|
|
102
104
|
order: order,
|
|
103
105
|
dimensionCustomSumKeys: dimensionCustomSumKeys,
|
|
104
|
-
}), newDataSource =
|
|
106
|
+
}), newDataSource = _x[0], processedColumns = _x[1];
|
|
105
107
|
// 生成合计行和最终数据源
|
|
106
|
-
var
|
|
108
|
+
var _y = useSummaryRow({
|
|
107
109
|
columns: processedColumns,
|
|
108
110
|
dataSource: newDataSource,
|
|
109
|
-
}), finalDataSource =
|
|
111
|
+
}), finalDataSource = _y.finalDataSource, hasSummaryRow = _y.hasSummaryRow;
|
|
110
112
|
// 计算列的渲染信息
|
|
111
113
|
var columnRenderInfos = useMemo(function () { return calculateColumnRenderInfos(processedColumns); }, [processedColumns]);
|
|
112
114
|
// 计算合并单元格信息
|
|
@@ -121,16 +123,18 @@ function CanvasTable(props) {
|
|
|
121
123
|
var totalHeight = useMemo(function () {
|
|
122
124
|
return calculateTotalHeight(calculatedHeaderHeight, finalDataSource.length, rowHeight);
|
|
123
125
|
}, [calculatedHeaderHeight, finalDataSource.length, rowHeight]);
|
|
126
|
+
// 自动高度计算
|
|
127
|
+
var autoHeight = useCanvasTableAutoHeight(isAutoScrollY, autoScrollYMarginBottom, canvasTableId);
|
|
124
128
|
// 监听容器尺寸变化
|
|
125
129
|
var containerSize = useContainerSize({
|
|
126
130
|
containerRef: containerRef,
|
|
127
131
|
width: width,
|
|
128
|
-
height: height,
|
|
132
|
+
height: isAutoScrollY ? autoHeight || height : height,
|
|
129
133
|
});
|
|
130
134
|
var containerWidth = containerSize.width;
|
|
131
135
|
var containerHeight = containerSize.height;
|
|
132
136
|
// 计算滚动条指标
|
|
133
|
-
var
|
|
137
|
+
var _z = useScrollbarMetrics({
|
|
134
138
|
containerWidth: containerWidth,
|
|
135
139
|
containerHeight: containerHeight,
|
|
136
140
|
totalWidth: totalWidth,
|
|
@@ -138,15 +142,15 @@ function CanvasTable(props) {
|
|
|
138
142
|
headerHeight: calculatedHeaderHeight,
|
|
139
143
|
scrollTop: 0,
|
|
140
144
|
scrollLeft: 0,
|
|
141
|
-
}), maxScrollTop =
|
|
145
|
+
}), maxScrollTop = _z.maxScrollTop, maxScrollLeft = _z.maxScrollLeft;
|
|
142
146
|
// 滚动管理(使用预先计算的maxScrollTop和maxScrollLeft)
|
|
143
|
-
var
|
|
147
|
+
var _0 = useTableScroll({
|
|
144
148
|
canvasRef: canvasRef,
|
|
145
149
|
containerRef: containerRef,
|
|
146
150
|
maxScrollTop: maxScrollTop,
|
|
147
151
|
maxScrollLeft: maxScrollLeft,
|
|
148
152
|
onScroll: onScroll,
|
|
149
|
-
}), scrollState =
|
|
153
|
+
}), scrollState = _0.scrollState, setScrollState = _0.setScrollState;
|
|
150
154
|
// 数据变化时重置滚动位置(筛选、排序、数据源更新等操作后)
|
|
151
155
|
useScrollReset({
|
|
152
156
|
dataSourceLength: dataSource.length,
|
|
@@ -167,12 +171,12 @@ function CanvasTable(props) {
|
|
|
167
171
|
scrollLeft: scrollState.scrollLeft,
|
|
168
172
|
}).actualMetrics;
|
|
169
173
|
// 单元格框选
|
|
170
|
-
var
|
|
174
|
+
var _1 = useTableSelection({
|
|
171
175
|
state: state,
|
|
172
176
|
setState: setState,
|
|
173
177
|
}),
|
|
174
178
|
// selectionStartRef,
|
|
175
|
-
startSelection =
|
|
179
|
+
startSelection = _1.startSelection, updateSelection = _1.updateSelection, extendSelection = _1.extendSelection;
|
|
176
180
|
// 处理列宽调整
|
|
177
181
|
var handleColumnResize = useCallback(function (columnKey, newWidth) {
|
|
178
182
|
var _a;
|
|
@@ -221,13 +225,13 @@ function CanvasTable(props) {
|
|
|
221
225
|
onCurrentListChange,
|
|
222
226
|
]);
|
|
223
227
|
// 列宽调整
|
|
224
|
-
var
|
|
228
|
+
var _2 = useColumnResize({
|
|
225
229
|
columnRenderInfos: columnRenderInfos,
|
|
226
230
|
containerWidth: containerWidth,
|
|
227
231
|
headerHeight: calculatedHeaderHeight,
|
|
228
232
|
scrollLeft: scrollState.scrollLeft,
|
|
229
233
|
onColumnResize: handleColumnResize,
|
|
230
|
-
}), resizeState =
|
|
234
|
+
}), resizeState = _2.resizeState, checkResizeHandle = _2.checkResizeHandle, startResize = _2.startResize, updateResize = _2.updateResize, endResize = _2.endResize, setHoverResizeColumn = _2.setHoverResizeColumn, getColumnWidth = _2.getColumnWidth, RESIZE_HANDLE_WIDTH = _2.RESIZE_HANDLE_WIDTH;
|
|
231
235
|
// 复制到剪贴板
|
|
232
236
|
var getSelectedCellsText = useCopyToClipboard({
|
|
233
237
|
cellSelection: state.cellSelection,
|
|
@@ -250,7 +254,7 @@ function CanvasTable(props) {
|
|
|
250
254
|
isAutoMerge: isAutoMerge,
|
|
251
255
|
});
|
|
252
256
|
// 交互事件处理(使用baseScrollbarMetrics的maxScrollTop/maxScrollLeft以保持稳定)
|
|
253
|
-
var
|
|
257
|
+
var _3 = useTableInteraction({
|
|
254
258
|
state: state,
|
|
255
259
|
setState: setState,
|
|
256
260
|
scrollState: scrollState,
|
|
@@ -295,11 +299,11 @@ function CanvasTable(props) {
|
|
|
295
299
|
menuShow: isContextMenu ? menuShow : undefined,
|
|
296
300
|
fixedRowsCount: fixedRowsCount,
|
|
297
301
|
fixedRowsConfig: fixedRowsConfig,
|
|
298
|
-
|
|
299
|
-
}), handleCanvasMouseDown =
|
|
302
|
+
summaryFixed: summaryFixed,
|
|
303
|
+
}), handleCanvasMouseDown = _3.handleCanvasMouseDown, handleCanvasMouseMove = _3.handleCanvasMouseMove, handleCanvasMouseUp = _3.handleCanvasMouseUp, handleCanvasMouseLeave = _3.handleCanvasMouseLeave, handleCanvasContextMenu = _3.handleCanvasContextMenu;
|
|
300
304
|
// 渲染表格
|
|
301
305
|
useTableRender(__assign(__assign({ canvasRef: canvasRef, processedDataSource: finalDataSource, columnRenderInfos: columnRenderInfos, columns: processedColumns, // 传递原始columns用于渲染多级表头
|
|
302
|
-
state: state, scrollState: scrollState, rowSelection: rowSelection, containerWidth: containerWidth, containerHeight: containerHeight, headerHeight: calculatedHeaderHeight, 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,
|
|
306
|
+
state: state, scrollState: scrollState, rowSelection: rowSelection, containerWidth: containerWidth, containerHeight: containerHeight, headerHeight: calculatedHeaderHeight, 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 }));
|
|
303
307
|
// 单元格覆盖层
|
|
304
308
|
var cellOverlays = useTableCellOverlay({
|
|
305
309
|
canvasRef: canvasRef,
|
|
@@ -316,7 +320,7 @@ function CanvasTable(props) {
|
|
|
316
320
|
fixedRowsCount: fixedRowsCount,
|
|
317
321
|
fixedRowsConfig: fixedRowsConfig,
|
|
318
322
|
hasSummaryRow: hasSummaryRow,
|
|
319
|
-
|
|
323
|
+
summaryFixed: summaryFixed,
|
|
320
324
|
}).cellOverlays;
|
|
321
325
|
// 表头覆盖层
|
|
322
326
|
var headerOverlays = useHeaderOverlay({
|
|
@@ -357,7 +361,7 @@ function CanvasTable(props) {
|
|
|
357
361
|
isVisible: state.badgePopover.visible,
|
|
358
362
|
onClose: handleCloseBadgePopover,
|
|
359
363
|
});
|
|
360
|
-
return (jsx(Spin, __assign({ spinning: loading }, { children: jsxs("div", __assign({ ref: containerRef, 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: {
|
|
364
|
+
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: {
|
|
361
365
|
display: "block",
|
|
362
366
|
// cursor 由 useTableInteraction 动态管理
|
|
363
367
|
touchAction: "none",
|
|
@@ -9,4 +9,6 @@ var ColumnDynamic = function (_a) {
|
|
|
9
9
|
(_a = dynamicSettingRef === null || dynamicSettingRef === void 0 ? void 0 : dynamicSettingRef.current) === null || _a === void 0 ? void 0 : _a.setVisible(true);
|
|
10
10
|
} }));
|
|
11
11
|
};
|
|
12
|
-
memo(ColumnDynamic);
|
|
12
|
+
var ColumnDynamic$1 = memo(ColumnDynamic);
|
|
13
|
+
|
|
14
|
+
export { ColumnDynamic$1 as default };
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* CanvasTable 自动高度计算 Hook
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* 计算CanvasTable高度
|
|
8
|
+
* @param isAutoScrollY 是否自动计算高度
|
|
9
|
+
* @param marginBottom canvas table下面留出的距离
|
|
10
|
+
* @param canvasTableId 表格id
|
|
11
|
+
* @returns 计算出的表格高度
|
|
12
|
+
*/
|
|
13
|
+
function useCanvasTableAutoHeight(isAutoScrollY, marginBottom, canvasTableId) {
|
|
14
|
+
if (marginBottom === void 0) { marginBottom = 65; }
|
|
15
|
+
var _a = useState(undefined), tableHeight = _a[0], setTableHeight = _a[1];
|
|
16
|
+
useEffect(function () {
|
|
17
|
+
if (!isAutoScrollY)
|
|
18
|
+
return;
|
|
19
|
+
var calculateHeight = function () {
|
|
20
|
+
var _a, _b;
|
|
21
|
+
// 查找容器元素
|
|
22
|
+
var containerRect = (_a = document
|
|
23
|
+
.querySelector(".ztxk-container")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
24
|
+
// 查找CanvasTable元素
|
|
25
|
+
var tableSelector = canvasTableId
|
|
26
|
+
? "#".concat(CSS.escape(canvasTableId), " .canvas-table-container")
|
|
27
|
+
: ".canvas-table-container";
|
|
28
|
+
var tableRect = (_b = document
|
|
29
|
+
.querySelector(tableSelector)) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
|
|
30
|
+
if (containerRect && tableRect) {
|
|
31
|
+
var calculatedHeight = containerRect.height +
|
|
32
|
+
containerRect.top -
|
|
33
|
+
tableRect.top -
|
|
34
|
+
marginBottom;
|
|
35
|
+
// 确保高度不小于最小值
|
|
36
|
+
var minHeight = 200;
|
|
37
|
+
setTableHeight(Math.max(calculatedHeight, minHeight));
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
// 初始计算
|
|
41
|
+
calculateHeight();
|
|
42
|
+
// 监听窗口大小变化
|
|
43
|
+
var handleResize = function () {
|
|
44
|
+
calculateHeight();
|
|
45
|
+
};
|
|
46
|
+
window.addEventListener("resize", handleResize);
|
|
47
|
+
// 使用 MutationObserver 监听DOM变化
|
|
48
|
+
var observer = new MutationObserver(function () {
|
|
49
|
+
calculateHeight();
|
|
50
|
+
});
|
|
51
|
+
var container = document.querySelector(".ztxk-container");
|
|
52
|
+
if (container) {
|
|
53
|
+
observer.observe(container, {
|
|
54
|
+
childList: true,
|
|
55
|
+
subtree: true,
|
|
56
|
+
attributes: true,
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
return function () {
|
|
60
|
+
window.removeEventListener("resize", handleResize);
|
|
61
|
+
observer.disconnect();
|
|
62
|
+
};
|
|
63
|
+
}, [isAutoScrollY, marginBottom, canvasTableId]);
|
|
64
|
+
return tableHeight;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export { useCanvasTableAutoHeight };
|
|
@@ -2,7 +2,7 @@ import { __spreadArray } from '../../_virtual/_tslib.js';
|
|
|
2
2
|
import { useState, useEffect } from 'react';
|
|
3
3
|
import { getMaxDepth } from '../utils/multiHeaderHelpers.js';
|
|
4
4
|
|
|
5
|
-
var FONT_SIZE =
|
|
5
|
+
var FONT_SIZE = 13;
|
|
6
6
|
var FONT_FAMILY = "Arial, sans-serif";
|
|
7
7
|
var LINE_HEIGHT = 20;
|
|
8
8
|
var FILTER_ICON_WIDTH = 15;
|
|
@@ -29,7 +29,7 @@ import 'dayjs';
|
|
|
29
29
|
* - 只渲染React元素类型的内容(字符串和数字在Canvas中直接绘制)
|
|
30
30
|
*/
|
|
31
31
|
var useTableCellOverlay = function (params) {
|
|
32
|
-
var processedDataSource = params.processedDataSource, columnRenderInfos = params.columnRenderInfos, scrollState = params.scrollState, containerWidth = params.containerWidth, containerHeight = params.containerHeight, headerHeight = params.headerHeight, rowHeight = params.rowHeight, needHorizontalScrollbar = params.needHorizontalScrollbar, needVerticalScrollbar = params.needVerticalScrollbar, scrollbarSize = params.scrollbarSize, fixedRowsCount = params.fixedRowsCount, fixedRowsConfig = params.fixedRowsConfig, _a = params.hasSummaryRow, hasSummaryRow = _a === void 0 ? false : _a, _b = params.
|
|
32
|
+
var processedDataSource = params.processedDataSource, columnRenderInfos = params.columnRenderInfos, scrollState = params.scrollState, containerWidth = params.containerWidth, containerHeight = params.containerHeight, headerHeight = params.headerHeight, rowHeight = params.rowHeight, needHorizontalScrollbar = params.needHorizontalScrollbar, needVerticalScrollbar = params.needVerticalScrollbar, scrollbarSize = params.scrollbarSize, fixedRowsCount = params.fixedRowsCount, fixedRowsConfig = params.fixedRowsConfig, _a = params.hasSummaryRow, hasSummaryRow = _a === void 0 ? false : _a, _b = params.summaryFixed, summaryFixed = _b === void 0 ? false : _b;
|
|
33
33
|
// 计算可见的单元格覆盖层信息
|
|
34
34
|
var cellOverlays = useMemo(function () {
|
|
35
35
|
var overlays = [];
|
|
@@ -49,7 +49,7 @@ var useTableCellOverlay = function (params) {
|
|
|
49
49
|
? containerWidth - scrollbarSize
|
|
50
50
|
: containerWidth;
|
|
51
51
|
// 计算可用高度,需要为固定合计行预留空间
|
|
52
|
-
var fixedSummaryHeight =
|
|
52
|
+
var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
|
|
53
53
|
var effectiveHeight = (needHorizontalScrollbar
|
|
54
54
|
? containerHeight - scrollbarSize
|
|
55
55
|
: containerHeight) - fixedSummaryHeight;
|
|
@@ -158,7 +158,7 @@ var useTableCellOverlay = function (params) {
|
|
|
158
158
|
else {
|
|
159
159
|
// 非固定行需要严格避开所有固定行区域
|
|
160
160
|
var currentFixedBottomHeight = fixedBottomRowsCount * rowHeight;
|
|
161
|
-
var currentFixedSummaryHeight =
|
|
161
|
+
var currentFixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
|
|
162
162
|
// 计算可滚动区域的严格边界
|
|
163
163
|
var scrollableAreaBottom = containerHeight -
|
|
164
164
|
(needHorizontalScrollbar ? scrollbarSize : 0) -
|
|
@@ -248,7 +248,7 @@ var useTableCellOverlay = function (params) {
|
|
|
248
248
|
if (fixedBottomRowsCount > 0) {
|
|
249
249
|
var bottomRowsStartIndex = processedDataSource.length -
|
|
250
250
|
fixedBottomRowsCount -
|
|
251
|
-
(
|
|
251
|
+
(summaryFixed && hasSummaryRow ? 1 : 0);
|
|
252
252
|
for (var i = 0; i < fixedBottomRowsCount; i++) {
|
|
253
253
|
var rowIndex = bottomRowsStartIndex + i;
|
|
254
254
|
var y = containerHeight -
|
|
@@ -260,7 +260,7 @@ var useTableCellOverlay = function (params) {
|
|
|
260
260
|
}
|
|
261
261
|
}
|
|
262
262
|
// 4. 处理固定合计行
|
|
263
|
-
if (
|
|
263
|
+
if (summaryFixed && hasSummaryRow) {
|
|
264
264
|
var summaryRowIndex = processedDataSource.length - 1;
|
|
265
265
|
var summaryY = containerHeight -
|
|
266
266
|
(needHorizontalScrollbar ? scrollbarSize : 0) -
|
|
@@ -272,7 +272,7 @@ var useTableCellOverlay = function (params) {
|
|
|
272
272
|
// 计算优先级(数值越大优先级越高)
|
|
273
273
|
var getPriority = function (overlay) {
|
|
274
274
|
// 检查是否是固定合计行(最后一行且固定合计行开启)
|
|
275
|
-
var isSummaryRow =
|
|
275
|
+
var isSummaryRow = summaryFixed &&
|
|
276
276
|
hasSummaryRow &&
|
|
277
277
|
overlay.rowIndex === processedDataSource.length - 1;
|
|
278
278
|
if (isSummaryRow && overlay.isFixed)
|
|
@@ -304,7 +304,7 @@ var useTableCellOverlay = function (params) {
|
|
|
304
304
|
fixedRowsCount,
|
|
305
305
|
fixedRowsConfig,
|
|
306
306
|
hasSummaryRow,
|
|
307
|
-
|
|
307
|
+
summaryFixed,
|
|
308
308
|
]);
|
|
309
309
|
return {
|
|
310
310
|
cellOverlays: cellOverlays,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __assign } from '../../_virtual/_tslib.js';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useCallback, useEffect, useMemo } from 'react';
|
|
4
|
+
import 'zmdms-utils';
|
|
4
5
|
import 'dayjs';
|
|
5
6
|
import { findColumnByKey } from '../utils/columnHelpers.js';
|
|
6
7
|
import FilterPopover from '../components/FilterPopover.js';
|
|
@@ -2,14 +2,18 @@ import { __spreadArray } from '../../_virtual/_tslib.js';
|
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
import { DEFAULT_SELECTION_COLUMN_WIDTH } from '../utils/constants.js';
|
|
5
|
+
import 'zmdms-utils';
|
|
5
6
|
import 'dayjs';
|
|
6
7
|
import { processColumnRender } from '../utils/columnHelpers.js';
|
|
7
8
|
import { MERGE_INDEX } from '../../table/constant.js';
|
|
8
9
|
import 'lodash/isEqual';
|
|
9
10
|
import 'ahooks';
|
|
10
11
|
import '../../node_modules/immutability-helper/index.js';
|
|
11
|
-
import 'zmdms-utils';
|
|
12
12
|
import '../../node_modules/exceljs/dist/exceljs.min.js';
|
|
13
|
+
import '../components/FilterPopover.js';
|
|
14
|
+
import '../../node_modules/react-contexify/dist/index.js';
|
|
15
|
+
import '../../node_modules/screenfull/index.js';
|
|
16
|
+
import ColumnDynamic from '../components/ColumnDynamic.js';
|
|
13
17
|
|
|
14
18
|
var useProcessedColumns = function (params) {
|
|
15
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;
|
|
@@ -19,8 +23,6 @@ var useProcessedColumns = function (params) {
|
|
|
19
23
|
if (mode === "index") {
|
|
20
24
|
var title = "序号";
|
|
21
25
|
if (dynamicKey && dynamicSettingRef) {
|
|
22
|
-
// 动态引入ColumnDynamic组件,避免循环依赖
|
|
23
|
-
var ColumnDynamic = require("../components/ColumnDynamic").default;
|
|
24
26
|
title = jsx(ColumnDynamic, { dynamicSettingRef: dynamicSettingRef });
|
|
25
27
|
}
|
|
26
28
|
cols.unshift({
|
|
@@ -2,6 +2,7 @@ import { __assign } from '../../_virtual/_tslib.js';
|
|
|
2
2
|
import { useMemo, useState, useRef, useEffect } from 'react';
|
|
3
3
|
import { SCROLLBAR_SIZE, MIN_SCROLLBAR_SIZE } from '../utils/constants.js';
|
|
4
4
|
import { calculateScrollbarMetrics } from '../utils/tableCalculations.js';
|
|
5
|
+
import 'zmdms-utils';
|
|
5
6
|
import 'dayjs';
|
|
6
7
|
|
|
7
8
|
/**
|
|
@@ -5,7 +5,7 @@ import 'lodash/isEqual';
|
|
|
5
5
|
import 'ahooks';
|
|
6
6
|
import '../../node_modules/immutability-helper/index.js';
|
|
7
7
|
import 'react/jsx-runtime';
|
|
8
|
-
import { plus } from 'zmdms-utils';
|
|
8
|
+
import { plus, exactRound, addThousedSeparator } from 'zmdms-utils';
|
|
9
9
|
import '../../node_modules/exceljs/dist/exceljs.min.js';
|
|
10
10
|
import 'dayjs';
|
|
11
11
|
|
|
@@ -31,25 +31,38 @@ var useSummaryRow = function (params) {
|
|
|
31
31
|
columns.forEach(function (column, colIndex) {
|
|
32
32
|
var dataIndex = column.dataIndex || column.key;
|
|
33
33
|
if (column.isSummary) {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
var
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
34
|
+
var calculatedSum = void 0;
|
|
35
|
+
if (column.totalCalcCallback) {
|
|
36
|
+
// 使用自定义计算回调
|
|
37
|
+
var values = dataSource
|
|
38
|
+
.filter(function (record) { return !record[IS_SUMMARY]; })
|
|
39
|
+
.map(function (record) { return record[dataIndex]; });
|
|
40
|
+
calculatedSum = column.totalCalcCallback(null, values);
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
// 默认计算逻辑:数值求和
|
|
44
|
+
var sum_1 = 0;
|
|
45
|
+
dataSource.forEach(function (record) {
|
|
46
|
+
var value = record[dataIndex];
|
|
47
|
+
var num = typeof value === "string" ? parseFloat(value) : value;
|
|
48
|
+
if (!isNaN(num) &&
|
|
49
|
+
num !== null &&
|
|
50
|
+
num !== undefined &&
|
|
51
|
+
!record[IS_SUMMARY]) {
|
|
52
|
+
sum_1 = plus(sum_1, num);
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
calculatedSum = sum_1;
|
|
50
56
|
}
|
|
51
|
-
|
|
52
|
-
|
|
57
|
+
// 应用格式化(仅在没有自定义回调或回调返回数值时)
|
|
58
|
+
var formattedSum = calculatedSum;
|
|
59
|
+
if (typeof calculatedSum === "number") {
|
|
60
|
+
if (column.precision !== undefined) {
|
|
61
|
+
formattedSum = exactRound(calculatedSum, column.precision);
|
|
62
|
+
}
|
|
63
|
+
if (column.thousand) {
|
|
64
|
+
formattedSum = addThousedSeparator(formattedSum);
|
|
65
|
+
}
|
|
53
66
|
}
|
|
54
67
|
summaryRecord[dataIndex] = formattedSum;
|
|
55
68
|
}
|
|
@@ -5,6 +5,7 @@ import { FONT_SIZE, FONT_FAMILY } from '../utils/constants.js';
|
|
|
5
5
|
import { isTextTruncated } from '../utils/canvasDrawHelpers.js';
|
|
6
6
|
import { getMaxDepth, flattenHeaders, getLeafColumns } from '../utils/multiHeaderHelpers.js';
|
|
7
7
|
import { getCellFromMousePosition, extractCellText } from '../utils/cellHelpers.js';
|
|
8
|
+
import 'zmdms-utils';
|
|
8
9
|
import 'dayjs';
|
|
9
10
|
import { calculateSelectionState, toggleSelectAll, handleSortClick, calculateIconArea, isClickInIconArea, calculateScrollPosition, calculatePopoverPosition, isPointInTriangle } from '../utils/interactionHelpers.js';
|
|
10
11
|
|
|
@@ -12,7 +13,7 @@ import { calculateSelectionState, toggleSelectAll, handleSortClick, calculateIco
|
|
|
12
13
|
* 表格交互事件处理 Hook
|
|
13
14
|
*/
|
|
14
15
|
var useTableInteraction = function (params) {
|
|
15
|
-
var state = params.state, setState = params.setState, scrollState = params.scrollState, setScrollState = params.setScrollState, processedDataSource = params.processedDataSource, columnRenderInfos = params.columnRenderInfos, _a = params.columns, columns = _a === void 0 ? [] : _a, rowSelection = params.rowSelection, rowHeight = params.rowHeight, headerHeight = params.headerHeight, containerWidth = params.containerWidth, containerHeight = params.containerHeight, scrollbarSize = params.scrollbarSize, canvasRef = params.canvasRef, needVerticalScrollbar = params.needVerticalScrollbar, needHorizontalScrollbar = params.needHorizontalScrollbar, verticalScrollbarTop = params.verticalScrollbarTop, verticalScrollbarHeight = params.verticalScrollbarHeight, horizontalScrollbarLeft = params.horizontalScrollbarLeft, horizontalScrollbarWidth = params.horizontalScrollbarWidth, maxScrollTop = params.maxScrollTop, maxScrollLeft = params.maxScrollLeft, totalHeight = params.totalHeight, totalWidth = params.totalWidth, dataAreaHeight = params.dataAreaHeight, onSortChange = params.onSortChange, onRowClick = params.onRowClick, getRowKey = params.getRowKey, startSelection = params.startSelection, updateSelection = params.updateSelection, extendSelection = params.extendSelection, checkResizeHandle = params.checkResizeHandle, startResize = params.startResize, updateResize = params.updateResize, endResize = params.endResize, setHoverResizeColumn = params.setHoverResizeColumn, resizeState = params.resizeState, _b = params.hasSummaryRow, hasSummaryRow = _b === void 0 ? false : _b, mergeCellMap = params.mergeCellMap, menuShow = params.menuShow, fixedRowsCount = params.fixedRowsCount, fixedRowsConfig = params.fixedRowsConfig,
|
|
16
|
+
var state = params.state, setState = params.setState, scrollState = params.scrollState, setScrollState = params.setScrollState, processedDataSource = params.processedDataSource, columnRenderInfos = params.columnRenderInfos, _a = params.columns, columns = _a === void 0 ? [] : _a, rowSelection = params.rowSelection, rowHeight = params.rowHeight, headerHeight = params.headerHeight, containerWidth = params.containerWidth, containerHeight = params.containerHeight, scrollbarSize = params.scrollbarSize, canvasRef = params.canvasRef, needVerticalScrollbar = params.needVerticalScrollbar, needHorizontalScrollbar = params.needHorizontalScrollbar, verticalScrollbarTop = params.verticalScrollbarTop, verticalScrollbarHeight = params.verticalScrollbarHeight, horizontalScrollbarLeft = params.horizontalScrollbarLeft, horizontalScrollbarWidth = params.horizontalScrollbarWidth, maxScrollTop = params.maxScrollTop, maxScrollLeft = params.maxScrollLeft, totalHeight = params.totalHeight, totalWidth = params.totalWidth, dataAreaHeight = params.dataAreaHeight, onSortChange = params.onSortChange, onRowClick = params.onRowClick, getRowKey = params.getRowKey, startSelection = params.startSelection, updateSelection = params.updateSelection, extendSelection = params.extendSelection, checkResizeHandle = params.checkResizeHandle, startResize = params.startResize, updateResize = params.updateResize, endResize = params.endResize, setHoverResizeColumn = params.setHoverResizeColumn, resizeState = params.resizeState, _b = params.hasSummaryRow, hasSummaryRow = _b === void 0 ? false : _b, mergeCellMap = params.mergeCellMap, menuShow = params.menuShow, fixedRowsCount = params.fixedRowsCount, fixedRowsConfig = params.fixedRowsConfig, summaryFixed = params.summaryFixed;
|
|
16
17
|
// 获取鼠标位置对应的单元格
|
|
17
18
|
var getCellFromPosition = useMemoizedFn(function (x, y) {
|
|
18
19
|
var fixedTopRowsCount = (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.topCount) || fixedRowsCount || 0;
|
|
@@ -29,7 +30,7 @@ var useTableInteraction = function (params) {
|
|
|
29
30
|
fixedTopRowsCount: fixedTopRowsCount,
|
|
30
31
|
fixedBottomRowsCount: fixedBottomRowsCount,
|
|
31
32
|
hasSummaryRow: hasSummaryRow,
|
|
32
|
-
|
|
33
|
+
summaryFixed: summaryFixed,
|
|
33
34
|
displayHeight: containerHeight,
|
|
34
35
|
needHorizontalScrollbar: needHorizontalScrollbar,
|
|
35
36
|
scrollbarSize: scrollbarSize,
|
|
@@ -19,7 +19,7 @@ import { calculateSelectionState, calculateIconArea } from '../utils/interaction
|
|
|
19
19
|
* 表格渲染 Hook
|
|
20
20
|
*/
|
|
21
21
|
var useTableRender = function (params) {
|
|
22
|
-
var canvasRef = params.canvasRef, processedDataSource = params.processedDataSource, columnRenderInfos = params.columnRenderInfos, columns = params.columns, state = params.state, scrollState = params.scrollState, rowSelection = params.rowSelection, containerWidth = params.containerWidth, containerHeight = params.containerHeight, headerHeight = params.headerHeight, rowHeight = params.rowHeight, bordered = params.bordered, striped = params.striped, needVerticalScrollbar = params.needVerticalScrollbar, needHorizontalScrollbar = params.needHorizontalScrollbar, verticalScrollbarTop = params.verticalScrollbarTop, verticalScrollbarHeight = params.verticalScrollbarHeight, horizontalScrollbarLeft = params.horizontalScrollbarLeft, horizontalScrollbarWidth = params.horizontalScrollbarWidth, getRowKey = params.getRowKey, resizeState = params.resizeState, getColumnWidth = params.getColumnWidth, _a = params.RESIZE_HANDLE_WIDTH, RESIZE_HANDLE_WIDTH = _a === void 0 ? 8 : _a, mergeCellMap = params.mergeCellMap, _b = params.hasSummaryRow, hasSummaryRow = _b === void 0 ? false : _b, fixedRowsCount = params.fixedRowsCount, fixedRowsConfig = params.fixedRowsConfig, _c = params.
|
|
22
|
+
var canvasRef = params.canvasRef, processedDataSource = params.processedDataSource, columnRenderInfos = params.columnRenderInfos, columns = params.columns, state = params.state, scrollState = params.scrollState, rowSelection = params.rowSelection, containerWidth = params.containerWidth, containerHeight = params.containerHeight, headerHeight = params.headerHeight, rowHeight = params.rowHeight, bordered = params.bordered, striped = params.striped, needVerticalScrollbar = params.needVerticalScrollbar, needHorizontalScrollbar = params.needHorizontalScrollbar, verticalScrollbarTop = params.verticalScrollbarTop, verticalScrollbarHeight = params.verticalScrollbarHeight, horizontalScrollbarLeft = params.horizontalScrollbarLeft, horizontalScrollbarWidth = params.horizontalScrollbarWidth, getRowKey = params.getRowKey, resizeState = params.resizeState, getColumnWidth = params.getColumnWidth, _a = params.RESIZE_HANDLE_WIDTH, RESIZE_HANDLE_WIDTH = _a === void 0 ? 8 : _a, mergeCellMap = params.mergeCellMap, _b = params.hasSummaryRow, hasSummaryRow = _b === void 0 ? false : _b, fixedRowsCount = params.fixedRowsCount, fixedRowsConfig = params.fixedRowsConfig, _c = params.summaryFixed, summaryFixed = _c === void 0 ? false : _c;
|
|
23
23
|
// 判断是否是多级表头
|
|
24
24
|
var maxDepth = useMemo(function () { return getMaxDepth(columns); }, [columns]);
|
|
25
25
|
var isMultiHeader = maxDepth > 1;
|
|
@@ -365,7 +365,7 @@ var useTableRender = function (params) {
|
|
|
365
365
|
// 计算实际可用的渲染区域高度(考虑固定底部行和合计行)
|
|
366
366
|
var fixedBottomRowsCount = (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.bottomCount) || 0;
|
|
367
367
|
var fixedBottomHeight = fixedBottomRowsCount * rowHeight;
|
|
368
|
-
var fixedSummaryHeight =
|
|
368
|
+
var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
|
|
369
369
|
var effectiveHeight = displayHeight -
|
|
370
370
|
(needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
|
|
371
371
|
fixedBottomHeight -
|
|
@@ -503,7 +503,10 @@ var useTableRender = function (params) {
|
|
|
503
503
|
}
|
|
504
504
|
// 绘制文本
|
|
505
505
|
ctx.fillStyle = COLORS.text;
|
|
506
|
-
|
|
506
|
+
// 合计行字体加粗
|
|
507
|
+
ctx.font = record[IS_SUMMARY]
|
|
508
|
+
? "bold ".concat(FONT_SIZE, "px ").concat(FONT_FAMILY)
|
|
509
|
+
: "".concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
|
|
507
510
|
ctx.textBaseline = "middle";
|
|
508
511
|
var align = column.align || "left";
|
|
509
512
|
var textX_1 = drawX + 16;
|
|
@@ -887,7 +890,7 @@ var useTableRender = function (params) {
|
|
|
887
890
|
var drawFixedBottomRow = useMemoizedFn(function (ctx, rowIndex, relativeIndex, displayWidth, displayHeight, onlyFixed) {
|
|
888
891
|
if (onlyFixed === void 0) { onlyFixed = false; }
|
|
889
892
|
drawFixedRow(ctx, rowIndex, function () {
|
|
890
|
-
var fixedSummaryHeight =
|
|
893
|
+
var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
|
|
891
894
|
return (displayHeight -
|
|
892
895
|
(needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
|
|
893
896
|
fixedSummaryHeight -
|
|
@@ -899,7 +902,7 @@ var useTableRender = function (params) {
|
|
|
899
902
|
var drawFixedBottomRowsBorder = useMemoizedFn(function (ctx, rowCount, displayWidth, displayHeight, onlyFixed) {
|
|
900
903
|
if (onlyFixed === void 0) { onlyFixed = false; }
|
|
901
904
|
drawFixedRowsBorder(ctx, rowCount, function () {
|
|
902
|
-
var fixedSummaryHeight =
|
|
905
|
+
var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
|
|
903
906
|
return (displayHeight -
|
|
904
907
|
(needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
|
|
905
908
|
fixedSummaryHeight -
|
|
@@ -948,7 +951,7 @@ var useTableRender = function (params) {
|
|
|
948
951
|
var fixedBottomRowsCount = (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.bottomCount) || 0;
|
|
949
952
|
var bottomRowsStartIndex = processedDataSource.length -
|
|
950
953
|
fixedBottomRowsCount -
|
|
951
|
-
(
|
|
954
|
+
(summaryFixed && hasSummaryRow ? 1 : 0);
|
|
952
955
|
var summaryRowIndex = hasSummaryRow
|
|
953
956
|
? processedDataSource.length - 1
|
|
954
957
|
: -1;
|
|
@@ -974,7 +977,7 @@ var useTableRender = function (params) {
|
|
|
974
977
|
row < bottomRowsStartIndex + fixedBottomRowsCount) {
|
|
975
978
|
// 固定底部行
|
|
976
979
|
var relativeIndex = row - bottomRowsStartIndex;
|
|
977
|
-
var fixedSummaryHeight =
|
|
980
|
+
var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
|
|
978
981
|
y =
|
|
979
982
|
displayHeight -
|
|
980
983
|
(needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
|
|
@@ -984,7 +987,7 @@ var useTableRender = function (params) {
|
|
|
984
987
|
cellHeight = rowHeight;
|
|
985
988
|
isFixedRow = true;
|
|
986
989
|
}
|
|
987
|
-
else if (
|
|
990
|
+
else if (summaryFixed && row === summaryRowIndex) {
|
|
988
991
|
// 固定合计行
|
|
989
992
|
var summaryRowY = displayHeight -
|
|
990
993
|
(needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
|
|
@@ -1168,7 +1171,7 @@ var useTableRender = function (params) {
|
|
|
1168
1171
|
// 计算固定行占用的高度
|
|
1169
1172
|
var fixedTopRowsHeight = fixedTopRowsCount * rowHeight;
|
|
1170
1173
|
var fixedBottomRowsHeight = fixedBottomRowsCount * rowHeight;
|
|
1171
|
-
var fixedSummaryRowHeight =
|
|
1174
|
+
var fixedSummaryRowHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
|
|
1172
1175
|
// 计算可视区域的数据区域高度(不包括表头、固定行和固定合计行)
|
|
1173
1176
|
var dataAreaHeight = displayHeight -
|
|
1174
1177
|
headerHeight -
|
|
@@ -1215,7 +1218,7 @@ var useTableRender = function (params) {
|
|
|
1215
1218
|
ctx.save();
|
|
1216
1219
|
var bottomRowsStartIndex_1 = processedDataSource.length -
|
|
1217
1220
|
fixedBottomRowsCount -
|
|
1218
|
-
(
|
|
1221
|
+
(summaryFixed && hasSummaryRow ? 1 : 0);
|
|
1219
1222
|
renderWithFixedLayer(ctx,
|
|
1220
1223
|
// 渲染行内容
|
|
1221
1224
|
function (onlyFixed) {
|
|
@@ -1233,7 +1236,7 @@ var useTableRender = function (params) {
|
|
|
1233
1236
|
// 7. 绘制固定列阴影
|
|
1234
1237
|
drawFixedColumns(ctx, scrollStartRow, scrollEndRow, displayWidth, displayHeight);
|
|
1235
1238
|
// 4. 绘制固定合计行(如果启用)
|
|
1236
|
-
if (
|
|
1239
|
+
if (summaryFixed && hasSummaryRow) {
|
|
1237
1240
|
var summaryRowIndex_1 = processedDataSource.length - 1;
|
|
1238
1241
|
var summaryRowY_1 = displayHeight -
|
|
1239
1242
|
(needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __assign, __spreadArray } from '../../_virtual/_tslib.js';
|
|
2
2
|
import { useState, useEffect, useMemo } from 'react';
|
|
3
3
|
import { useMemoizedFn } from 'ahooks';
|
|
4
|
+
import 'zmdms-utils';
|
|
4
5
|
import 'dayjs';
|
|
5
6
|
import { getAllLeafColumns, findColumnByKey } from '../utils/columnHelpers.js';
|
|
6
7
|
|
|
@@ -129,6 +129,13 @@ interface ICanvasColumnType<RecordType = any> {
|
|
|
129
129
|
* 开启合计
|
|
130
130
|
*/
|
|
131
131
|
isSummary?: boolean;
|
|
132
|
+
/**
|
|
133
|
+
* 合计自定义计算回调函数
|
|
134
|
+
* @param value 当前值
|
|
135
|
+
* @param values 所有值的数组
|
|
136
|
+
* @returns 计算后的合计值
|
|
137
|
+
*/
|
|
138
|
+
totalCalcCallback?: (value: any, values: any[]) => any;
|
|
132
139
|
/**
|
|
133
140
|
* 开启合并的字段,按其他字段维度合并
|
|
134
141
|
*/
|
|
@@ -172,6 +179,7 @@ interface ICanvasColumnType<RecordType = any> {
|
|
|
172
179
|
[key: string]: any;
|
|
173
180
|
};
|
|
174
181
|
}
|
|
182
|
+
type ICanvasColumnsType<RecordType = any> = ICanvasColumnType<RecordType>[];
|
|
175
183
|
interface IBadgeProps {
|
|
176
184
|
/**
|
|
177
185
|
* 角标颜色
|
|
@@ -237,6 +245,10 @@ interface ICanvasTableProps<RecordType = any> {
|
|
|
237
245
|
* 表头高度
|
|
238
246
|
*/
|
|
239
247
|
headerHeight?: number;
|
|
248
|
+
/**
|
|
249
|
+
* 表头换行
|
|
250
|
+
*/
|
|
251
|
+
headerWrap?: boolean;
|
|
240
252
|
/**
|
|
241
253
|
* 勾选配置
|
|
242
254
|
*/
|
|
@@ -369,7 +381,19 @@ interface ICanvasTableProps<RecordType = any> {
|
|
|
369
381
|
* 合计行是否固定在底部(默认为false)
|
|
370
382
|
* 当为true时,合计行固定在表格底部不参与滚动
|
|
371
383
|
*/
|
|
372
|
-
|
|
384
|
+
summaryFixed?: boolean;
|
|
385
|
+
/**
|
|
386
|
+
* 是否开启自动计算Y轴高度
|
|
387
|
+
*/
|
|
388
|
+
isAutoScrollY?: boolean;
|
|
389
|
+
/**
|
|
390
|
+
* 自动计算Y轴高度时,canvas table下面留出的距离
|
|
391
|
+
*/
|
|
392
|
+
autoScrollYMarginBottom?: number;
|
|
393
|
+
/**
|
|
394
|
+
* 表格id(用于自动高度计算时定位元素)
|
|
395
|
+
*/
|
|
396
|
+
canvasTableId?: string;
|
|
373
397
|
}
|
|
374
398
|
|
|
375
|
-
export { ColumnDataType, FilterConfig, IBadgeProps, ICanvasColumnType, ICanvasRowSelection, ICanvasTableProps, SortOrder };
|
|
399
|
+
export { ColumnDataType, FilterConfig, IBadgeProps, ICanvasColumnType, ICanvasColumnsType, ICanvasRowSelection, ICanvasTableProps, SortOrder };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* 获取鼠标位置对应的单元格
|
|
6
6
|
*/
|
|
7
7
|
var getCellFromMousePosition = function (params) {
|
|
8
|
-
var x = params.x, y = params.y, headerHeight = params.headerHeight, rowHeight = params.rowHeight, scrollTop = params.scrollTop, scrollLeft = params.scrollLeft, columnRenderInfos = params.columnRenderInfos, dataLength = params.dataLength, _a = params.fixedTopRowsCount, fixedTopRowsCount = _a === void 0 ? 0 : _a, _b = params.fixedBottomRowsCount, fixedBottomRowsCount = _b === void 0 ? 0 : _b, _c = params.hasSummaryRow, hasSummaryRow = _c === void 0 ? false : _c, _d = params.
|
|
8
|
+
var x = params.x, y = params.y, headerHeight = params.headerHeight, rowHeight = params.rowHeight, scrollTop = params.scrollTop, scrollLeft = params.scrollLeft, columnRenderInfos = params.columnRenderInfos, dataLength = params.dataLength, _a = params.fixedTopRowsCount, fixedTopRowsCount = _a === void 0 ? 0 : _a, _b = params.fixedBottomRowsCount, fixedBottomRowsCount = _b === void 0 ? 0 : _b, _c = params.hasSummaryRow, hasSummaryRow = _c === void 0 ? false : _c, _d = params.summaryFixed, summaryFixed = _d === void 0 ? false : _d, _e = params.displayHeight, displayHeight = _e === void 0 ? 0 : _e, _f = params.needHorizontalScrollbar, needHorizontalScrollbar = _f === void 0 ? false : _f, _g = params.scrollbarSize, scrollbarSize = _g === void 0 ? 12 : _g;
|
|
9
9
|
// 判断是否在表头区域(row=-1表示表头)
|
|
10
10
|
var rowIndex;
|
|
11
11
|
if (y < headerHeight) {
|
|
@@ -23,7 +23,7 @@ var getCellFromMousePosition = function (params) {
|
|
|
23
23
|
return findColumn(x, scrollLeft, columnRenderInfos, rowIndex);
|
|
24
24
|
}
|
|
25
25
|
// 检查是否在固定合计行区域
|
|
26
|
-
if (
|
|
26
|
+
if (summaryFixed && hasSummaryRow && displayHeight > 0) {
|
|
27
27
|
var summaryRowY = displayHeight -
|
|
28
28
|
(needHorizontalScrollbar ? scrollbarSize : 0) -
|
|
29
29
|
rowHeight;
|
|
@@ -35,7 +35,7 @@ var getCellFromMousePosition = function (params) {
|
|
|
35
35
|
}
|
|
36
36
|
// 检查是否在固定底部行区域
|
|
37
37
|
if (fixedBottomRowsCount > 0 && displayHeight > 0) {
|
|
38
|
-
var fixedSummaryHeight =
|
|
38
|
+
var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
|
|
39
39
|
var fixedBottomAreaStart = displayHeight -
|
|
40
40
|
(needHorizontalScrollbar ? scrollbarSize : 0) -
|
|
41
41
|
fixedSummaryHeight -
|
|
@@ -50,7 +50,7 @@ var getCellFromMousePosition = function (params) {
|
|
|
50
50
|
var relativeIndex = Math.floor(relativeY / rowHeight);
|
|
51
51
|
var bottomRowsStartIndex = dataLength -
|
|
52
52
|
fixedBottomRowsCount -
|
|
53
|
-
(
|
|
53
|
+
(summaryFixed && hasSummaryRow ? 1 : 0);
|
|
54
54
|
rowIndex = bottomRowsStartIndex + relativeIndex;
|
|
55
55
|
if (rowIndex < 0 || rowIndex >= dataLength)
|
|
56
56
|
return null;
|
|
@@ -65,7 +65,7 @@ var getCellFromMousePosition = function (params) {
|
|
|
65
65
|
// 如果有固定底部行或合计行,需要排除它们
|
|
66
66
|
var maxScrollableRow = dataLength -
|
|
67
67
|
fixedBottomRowsCount -
|
|
68
|
-
(
|
|
68
|
+
(summaryFixed && hasSummaryRow ? 1 : 0);
|
|
69
69
|
if (rowIndex >= maxScrollableRow) {
|
|
70
70
|
// 超出可滚动区域,可能在滚动条或空白区域
|
|
71
71
|
return null;
|
|
@@ -18,7 +18,7 @@ var COLORS = {
|
|
|
18
18
|
hoverBg: "rgb(239, 245, 254)",
|
|
19
19
|
selectionBg: "rgba(24, 144, 255, 0.1)",
|
|
20
20
|
// 文本色
|
|
21
|
-
text: "
|
|
21
|
+
text: "#333333",
|
|
22
22
|
emptyText: "rgba(0, 0, 0, 0.25)",
|
|
23
23
|
// 边框色
|
|
24
24
|
border: "rgb(222, 233, 246)",
|
|
@@ -34,7 +34,7 @@ var COLORS = {
|
|
|
34
34
|
};
|
|
35
35
|
// 字体配置
|
|
36
36
|
var FONT_FAMILY = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto';
|
|
37
|
-
var FONT_SIZE =
|
|
37
|
+
var FONT_SIZE = 13;
|
|
38
38
|
// 图标尺寸
|
|
39
39
|
var CHECKBOX_SIZE = 16;
|
|
40
40
|
var SORT_ICON_SIZE = 6;
|
|
@@ -1,30 +1,9 @@
|
|
|
1
|
+
import { exactRound, addThousedSeparator } from 'zmdms-utils';
|
|
1
2
|
import dayjs from 'dayjs';
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
5
|
* 数据格式化工具函数
|
|
5
6
|
*/
|
|
6
|
-
/**
|
|
7
|
-
* 格式化数值(千分符)
|
|
8
|
-
*/
|
|
9
|
-
var formatThousand = function (value) {
|
|
10
|
-
if (value === null || value === undefined || value === "")
|
|
11
|
-
return "";
|
|
12
|
-
var num = typeof value === "string" ? parseFloat(value) : value;
|
|
13
|
-
if (isNaN(num))
|
|
14
|
-
return String(value);
|
|
15
|
-
return num.toLocaleString("en-US");
|
|
16
|
-
};
|
|
17
|
-
/**
|
|
18
|
-
* 格式化精度
|
|
19
|
-
*/
|
|
20
|
-
var formatPrecision = function (value, precision) {
|
|
21
|
-
if (value === null || value === undefined || value === "")
|
|
22
|
-
return "";
|
|
23
|
-
var num = typeof value === "string" ? parseFloat(value) : value;
|
|
24
|
-
if (isNaN(num))
|
|
25
|
-
return String(value);
|
|
26
|
-
return num.toFixed(precision);
|
|
27
|
-
};
|
|
28
7
|
/**
|
|
29
8
|
* 格式化日期
|
|
30
9
|
*/
|
|
@@ -48,13 +27,13 @@ var formatCellValue = function (value, column) {
|
|
|
48
27
|
}
|
|
49
28
|
// 数值精度
|
|
50
29
|
if (column.precision !== undefined && typeof formattedValue === "number") {
|
|
51
|
-
formattedValue =
|
|
30
|
+
formattedValue = exactRound(formattedValue, column.precision);
|
|
52
31
|
}
|
|
53
32
|
// 千分符
|
|
54
33
|
if (column.thousand && !isNaN(Number(formattedValue))) {
|
|
55
|
-
formattedValue =
|
|
34
|
+
formattedValue = addThousedSeparator(formattedValue);
|
|
56
35
|
}
|
|
57
36
|
return String(formattedValue);
|
|
58
37
|
};
|
|
59
38
|
|
|
60
|
-
export { formatCellValue, formatDate
|
|
39
|
+
export { formatCellValue, formatDate };
|
package/dist/index.build.d.ts
CHANGED
|
@@ -49,7 +49,7 @@ export { default as Sortable } from './es/sortable/sortable.js';
|
|
|
49
49
|
export { default as ElectronSignatures } from './es/electronsignatures/index.js';
|
|
50
50
|
export { default as message } from './es/message/index.js';
|
|
51
51
|
export { default as CanvasTable } from './es/canvastable/canvasTable.js';
|
|
52
|
-
export { ICanvasColumnType, ICanvasTableProps } from './es/canvastable/interface.js';
|
|
52
|
+
export { ICanvasColumnType, ICanvasColumnsType, ICanvasTableProps } from './es/canvastable/interface.js';
|
|
53
53
|
export { Affix, Anchor, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, Card, Carousel, Cascader, Checkbox, Col, Comment, ConfigProvider, Divider, Drawer, Dropdown, Empty, Grid, Image, Layout, List, Mentions, Menu, PageHeader, Popconfirm, Popover, Progress, Radio, Rate, Result, Row, Segmented, Skeleton, Slider, Space, Spin, Statistic, Steps, Switch, Timeline, Tooltip, Transfer, Typography, Upload, notification } from 'antd';
|
|
54
54
|
export { IButtonProps } from './es/button/interface.js';
|
|
55
55
|
export { IButtonDownloadProps } from './es/button/buttonDownload.js';
|