vap1 0.7.8 → 0.7.9

package/components/Tables/VTable.d.ts

@@ -26,6 +26,11 @@ export type VTableProps = BaseTableProps & {
      * 选中后变化
     */
     onSelectedChange?: (selectedRowKeys: Key[], selectedRows?: any[]) => void;
+    /**
+     * 是否启用列宽拖拽调整功能，默认 false
+     * 谨慎使用
+     */
+    resizable?: boolean;
 };
 export declare const VTable: React.ForwardRefExoticComponent<import("./index").TableDefine & Pick<BoxProps, "default" | "mode" | "selectBar" | "defaultParam"> & {
     searchBar?: Omit<import("../SearchTool").SearchBarProps, "onChange" | "onSearch">;
@@ -50,4 +55,9 @@ export declare const VTable: React.ForwardRefExoticComponent<import("./index").T
      * 选中后变化
     */
     onSelectedChange?: (selectedRowKeys: Key[], selectedRows?: any[]) => void;
+    /**
+     * 是否启用列宽拖拽调整功能，默认 false
+     * 谨慎使用
+     */
+    resizable?: boolean;
 } & React.RefAttributes<VTableRef>>;

package/components/Tables/VTable.js

@@ -43,6 +43,17 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -92,13 +103,62 @@ var getHeightByTagName = function (root, tagName) {
     return 0;
 };
 exports.getHeightByTagName = getHeightByTagName;
+// 可拖拽的表头单元格组件
+var ResizableHeaderCell = function (props) {
+    var onResize = props.onResize, width = props.width, restProps = __rest(props, ["onResize", "width"]);
+    var _a = __read((0, react_1.useState)(false), 2), resizing = _a[0], setResizing = _a[1];
+    var startXRef = (0, react_1.useRef)(0);
+    var startWidthRef = (0, react_1.useRef)(0);
+    var handleMouseDown = (0, react_1.useCallback)(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setResizing(true);
+        startXRef.current = e.clientX;
+        startWidthRef.current = width || 128;
+        var handleMouseMove = function (moveEvent) {
+            var deltaX = moveEvent.clientX - startXRef.current;
+            var newWidth = Math.max(50, startWidthRef.current + deltaX);
+            if (onResize) {
+                onResize(newWidth);
+            }
+        };
+        var handleMouseUp = function () {
+            setResizing(false);
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    }, [width, onResize]);
+    return (react_1.default.createElement("th", __assign({}, restProps, { style: __assign(__assign({}, restProps.style), { position: 'relative', width: width }) }),
+        restProps.children,
+        onResize && (react_1.default.createElement("div", { className: "resize-handle", onMouseDown: handleMouseDown, style: {
+                position: 'absolute',
+                right: 0,
+                top: 0,
+                bottom: 0,
+                width: '4px',
+                cursor: 'col-resize',
+                backgroundColor: resizing ? '#1890ff' : 'transparent',
+                zIndex: 1,
+                userSelect: 'none',
+            }, onMouseEnter: function (e) {
+                e.target.style.backgroundColor = '#1890ff';
+            }, onMouseLeave: function (e) {
+                if (!resizing) {
+                    e.target.style.backgroundColor = 'transparent';
+                }
+            } }))));
+};
 var _VTable = (0, react_1.forwardRef)(function (props) {
-    var _a = (0, useTableContext_1.useTableContext)(), selectedRowKeys = _a.selectedRowKeys, initObjects = _a.initObjects, reflushPage = _a.reflushPage, setSelection = _a.setSelection;
-    var _b = (0, Box_1.useBox)(), state = _b.state, root = _b.root, resize = _b.resize;
+    var _a;
+    var _b = (0, useTableContext_1.useTableContext)(), selectedRowKeys = _b.selectedRowKeys, initObjects = _b.initObjects, reflushPage = _b.reflushPage, setSelection = _b.setSelection;
+    var _c = (0, Box_1.useBox)(), state = _c.state, root = _c.root, resize = _c.resize;
     var update = (0, hooks_1.useUpdate)();
-    var _c = __read((0, react_1.useState)(undefined), 2), scroll = _c[0], setScroll = _c[1];
-    var _d = props.model, rowKey = _d.rowKey, list = _d.list, isQuerying = _d.isQuerying, pageNo = _d.pageNo, pageSize = _d.pageSize, orderBy = _d.orderBy, query = _d.query, total = _d.total, cost = _d.cost;
-    var _e = __read((0, react_1.useState)([false, false]), 2), _f = __read(_e[0], 2), pageEnterd = _f[0], pageLoaded = _f[1], setSatus = _e[1];
+    var _d = __read((0, react_1.useState)(undefined), 2), scroll = _d[0], setScroll = _d[1];
+    var _e = __read((0, react_1.useState)({}), 2), columnWidths = _e[0], setColumnWidths = _e[1];
+    var _f = props.model, rowKey = _f.rowKey, list = _f.list, isQuerying = _f.isQuerying, pageNo = _f.pageNo, pageSize = _f.pageSize, orderBy = _f.orderBy, query = _f.query, total = _f.total, cost = _f.cost;
+    var _g = __read((0, react_1.useState)([false, false]), 2), _h = __read(_g[0], 2), pageEnterd = _h[0], pageLoaded = _h[1], setSatus = _g[1];
     (0, react_1.useEffect)(function () {
         if (isQuerying)
             return;
@@ -143,10 +203,39 @@ var _VTable = (0, react_1.forwardRef)(function (props) {
         reflushPage(list);
     }, [pageLoaded, list]);
     // 计算 clolum 及 高亮keyword
-    var columns = (0, react_1.useMemo)(function () { return (0, Util_1.convertColumns)(props, { ref: start, isRank: false }); }, [props.columns]);
+    var columns = (0, react_1.useMemo)(function () {
+        var _a;
+        var cols = (0, Util_1.convertColumns)(props, { ref: start, isRank: false });
+        // 如果启用 resizable，初始化列宽
+        var enableResize = (_a = props.resizable) !== null && _a !== void 0 ? _a : utils_1.GLOBAL.CONFIG.TABLE.RESIZABLE;
+        if (enableResize) {
+            var widths_1 = {};
+            cols.forEach(function (col, index) {
+                var key = col.dataIndex || col.key || "col_".concat(index);
+                if (key && !columnWidths[key]) {
+                    widths_1[key] = col.width || 128;
+                }
+            });
+            if (Object.keys(widths_1).length > 0) {
+                setColumnWidths(function (prev) { return (__assign(__assign({}, prev), widths_1)); });
+            }
+        }
+        return cols;
+    }, [props.columns, props.resizable]);
+    // 应用列宽（仅在 resizable 模式下）
+    var finalColumns = (0, react_1.useMemo)(function () {
+        var _a;
+        var enableResize = (_a = props.resizable) !== null && _a !== void 0 ? _a : utils_1.GLOBAL.CONFIG.TABLE.RESIZABLE;
+        if (!enableResize)
+            return columns;
+        return columns.map(function (col, index) {
+            var key = col.dataIndex || col.key || "col_".concat(index);
+            return __assign(__assign({}, col), { width: columnWidths[key] || col.width || 128, onHeaderCell: function (column) { return (__assign({ 'data-column-key': key }, (col.onHeaderCell ? col.onHeaderCell(column) : {}))); } });
+        });
+    }, [columns, columnWidths, props.resizable]);
     (0, react_1.useLayoutEffect)(function () {
         resize();
-    }, [columns]);
+    }, [finalColumns]);
     (0, react_1.useEffect)(function () {
         if (props.autoLoad === false)
             return;
@@ -219,9 +308,34 @@ var _VTable = (0, react_1.forwardRef)(function (props) {
     // if (list.length) {
     //     tableProps.tableLayout = "fixed";
     // }
+    // 自定义表头组件（仅在 resizable 模式下）
+    var components = (0, react_1.useMemo)(function () {
+        var _a;
+        var enableResize = (_a = props.resizable) !== null && _a !== void 0 ? _a : utils_1.GLOBAL.CONFIG.TABLE.RESIZABLE;
+        if (!enableResize)
+            return undefined;
+        return {
+            header: {
+                cell: function (cellProps) {
+                    var children = cellProps.children, restCellProps = __rest(cellProps, ["children"]);
+                    var columnKey = restCellProps['data-column-key'];
+                    if (!columnKey) {
+                        return react_1.default.createElement("th", __assign({}, restCellProps), children);
+                    }
+                    return (react_1.default.createElement(ResizableHeaderCell, __assign({}, restCellProps, { width: columnWidths[columnKey], onResize: function (newWidth) {
+                            setColumnWidths(function (prev) {
+                                var _a;
+                                return (__assign(__assign({}, prev), (_a = {}, _a[columnKey] = newWidth, _a)));
+                            });
+                        } }), children));
+                }
+            }
+        };
+    }, [props.resizable, columnWidths]);
+    var enableResize = (_a = props.resizable) !== null && _a !== void 0 ? _a : utils_1.GLOBAL.CONFIG.TABLE.RESIZABLE;
     return react_1.default.createElement(antd_1.Table, __assign({ rowKey: props.rowKey || rowKey, scroll: scroll, 
         // showSorterTooltip={false}
-        size: utils_1.GLOBAL.CONFIG.TABLE.SIZE, locale: { emptyText: react_1.default.createElement(antd_1.Empty, { style: { marginTop: 24 } }) } }, lodash_1.default.omit(props, ['children']), tableProps, { className: utils_1.StringUtil.className(['c-table'], props.className), pagination: false, columns: columns, dataSource: list, loading: isQuerying, onChange: function (x, y, field) {
+        size: utils_1.GLOBAL.CONFIG.TABLE.SIZE, locale: { emptyText: react_1.default.createElement(antd_1.Empty, { style: { marginTop: 24 } }) } }, lodash_1.default.omit(props, ['children', 'resizable']), tableProps, { className: utils_1.StringUtil.className(['c-table', enableResize && 'c-resizable-table'], props.className), pagination: false, columns: finalColumns, dataSource: list, loading: isQuerying, components: components, tableLayout: enableResize ? 'fixed' : undefined, onChange: function (x, y, field) {
             if (field.column) {
                 orderBy(field.field, field.order == 'ascend' ? 'asc' : 'desc');
             }

package/package.json

@@ -1 +1 @@
-{"name":"vap1","version":"0.7.8","description":"vap1, Both support MicroService and SAP FrameWork, Support IE>9","main":"index.js","author":"Xiang da","license":"ISC"}
+{"name":"vap1","version":"0.7.9","description":"vap1, Both support MicroService and SAP FrameWork, Support IE>9","main":"index.js","author":"Xiang da","license":"ISC"}

package/utils/Global.d.ts

@@ -314,6 +314,11 @@ export type GlobalSetting = {
           * 默认为false
          */
         UNSELECT_ON_QUERY: boolean;
+        /**
+         * 是否启用列宽拖拽调整功能
+         * 默认为 false
+         */
+        RESIZABLE: boolean;
     };
     LIST: {
         /**

package/utils/Global.js

@@ -101,6 +101,7 @@ var DEFAULT = {
         SIZE: 'small',
         REQUERY_ON_DELETE: false,
         UNSELECT_ON_QUERY: false,
+        RESIZABLE: false,
     },
     LIST: {
         LAYOUT_ORDER: [