@teamix/pro 1.4.9 → 1.4.10

package/lib/table/components/Layout/index.js

@@ -107,13 +107,11 @@ var Layout = function Layout(props) {
           onExpand: function onExpand(expand) {
             // 全屏模式下展开收起过滤器需要重新计算tableMaxHeight
             setTimeout(function () {
-              var _actionRef$current, _actionRef$current$ge;
+              var _actionRef$current, _actionRef$current$re;
 
-              if ((_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$ge = _actionRef$current.getState) === null || _actionRef$current$ge === void 0 ? void 0 : _actionRef$current$ge.call(_actionRef$current).fullScreenState) {
-                var _actionRef$current2, _actionRef$current2$r;
-
-                (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$r = _actionRef$current2.resetTableMaxBodyHeight) === null || _actionRef$current2$r === void 0 ? void 0 : _actionRef$current2$r.call(_actionRef$current2);
-              }
+              // if (actionRef.current?.getState?.().fullScreenState) {
+              // 偏移量8像素为面板展开后的下margin
+              (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$re = _actionRef$current.resetTableMaxBodyHeight) === null || _actionRef$current$re === void 0 ? void 0 : _actionRef$current$re.call(_actionRef$current, expand ? 8 : 0); // }
             });
             (dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.onExpand) && (dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.onExpand(expand));
           },
@@ -127,13 +125,11 @@ var Layout = function Layout(props) {
           onExpand: function onExpand(expand) {
             // 全屏模式下展开收起过滤器需要重新计算tableMaxHeight
             setTimeout(function () {
-              var _actionRef$current3, _actionRef$current3$g;
-
-              if ((_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$g = _actionRef$current3.getState) === null || _actionRef$current3$g === void 0 ? void 0 : _actionRef$current3$g.call(_actionRef$current3).fullScreenState) {
-                var _actionRef$current4, _actionRef$current4$r;
+              var _actionRef$current2, _actionRef$current2$r;
 
-                (_actionRef$current4 = actionRef.current) === null || _actionRef$current4 === void 0 ? void 0 : (_actionRef$current4$r = _actionRef$current4.resetTableMaxBodyHeight) === null || _actionRef$current4$r === void 0 ? void 0 : _actionRef$current4$r.call(_actionRef$current4);
-              }
+              // if (actionRef.current?.getState?.().fullScreenState) {
+              // 偏移量8像素为面板展开后的下margin
+              (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$r = _actionRef$current2.resetTableMaxBodyHeight) === null || _actionRef$current2$r === void 0 ? void 0 : _actionRef$current2$r.call(_actionRef$current2, expand ? 8 : 0); // }
             });
             (dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.onExpand) && (dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.onExpand(expand));
           },
@@ -195,9 +191,13 @@ var Layout = function Layout(props) {
     }
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: cls()
-  }, renderLayout());
+  if ((dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.schema) || mainAction || header || extra) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: cls()
+    }, renderLayout());
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
 };
 
 var _default = /*#__PURE__*/_react.default.memo(Layout);

package/lib/table/index.js

@@ -53,7 +53,7 @@ Object.keys(_typing).forEach(function (key) {
     }
   });
 });
-var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "afterDataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestWhenMount", "showPagination", "pageSizeList", "responsivePaginationType", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context"];
+var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "afterDataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestWhenMount", "showPagination", "pageSizeList", "responsivePaginationType", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "fixedTableBody"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -215,6 +215,8 @@ var ProTable = function ProTable(props) {
       propsSize = _props$size === void 0 ? 'medium' : _props$size,
       disableSelectAll = props.disableSelectAll,
       context = props.context,
+      _props$fixedTableBody = props.fixedTableBody,
+      fixedTableBody = _props$fixedTableBody === void 0 ? false : _props$fixedTableBody,
       otherProps = _objectWithoutProperties(props, _excluded);
 
   var targetPageKey = pageKey || globalPageKey;
@@ -296,9 +298,36 @@ var ProTable = function ProTable(props) {
       actionRefCallback = _useState24[0]; // 存储定时器 id
 
 
-  var autoRefreshTimerRef = (0, _react.useRef)(); // 获取header高度，用作全屏吸底吸底高度计算
+  var autoRefreshTimerRef = (0, _react.useRef)();
+  var onResize = null;
+  (0, _react.useEffect)(function () {
+    getHeaderHeight(fullscreenState);
+
+    if (window.onresize) {
+      onResize = window.onresize;
+
+      window.onresize = function () {
+        var _onResize;
+
+        (_onResize = onResize) === null || _onResize === void 0 ? void 0 : _onResize();
+        getHeaderHeight(fullscreenState);
+      };
+    } else {
+      window.onresize = function () {
+        getHeaderHeight(fullscreenState);
+      };
+    }
 
-  var getHeaderHeight = function getHeaderHeight() {
+    return function () {
+      if (onResize) {
+        window.onresize = onResize;
+      } else {
+        window.onresize = null;
+      }
+    };
+  }, []); // 获取header高度，用作全屏吸底吸底高度计算以及固定body高度计算（滚动条在底部）
+
+  var getHeaderHeight = function getHeaderHeight(isFullscreen, offset) {
     var _tableDom$getElements, _tableDom$getElements2;
 
     var tableDom = tableRef.current;
@@ -307,16 +336,29 @@ var ProTable = function ProTable(props) {
       base: true
     });
     var tableHeaderDom = tableDom === null || tableDom === void 0 ? void 0 : (_tableDom$getElements2 = tableDom.getElementsByClassName(basePrefix('table-header-inner'))) === null || _tableDom$getElements2 === void 0 ? void 0 : _tableDom$getElements2[0];
-    return new Promise(function (resolve) {
-      setTimeout(function () {
-        var _headerDom$offsetHeig, _tableHeaderDom$offse;
+    var pageContainerDom = document.querySelector('.teamix-pro-page-container-header');
+    var teamixNavDom = document.querySelector('.teamix-nav-console');
+    var footerRowSelectionDom = document.querySelector('.teamix-pro-page-container-footer');
+    setTimeout(function () {
+      var _headerDom$offsetHeig, _tableHeaderDom$offse;
 
-        var headerHeight = (_headerDom$offsetHeig = headerDom === null || headerDom === void 0 ? void 0 : headerDom.offsetHeight) !== null && _headerDom$offsetHeig !== void 0 ? _headerDom$offsetHeig : 0; // table表头默认一行。即42px
+      var headerHeight = (_headerDom$offsetHeig = headerDom === null || headerDom === void 0 ? void 0 : headerDom.offsetHeight) !== null && _headerDom$offsetHeig !== void 0 ? _headerDom$offsetHeig : 0; // table表头默认一行。即42px
 
-        var tableHeaderHeight = (_tableHeaderDom$offse = tableHeaderDom === null || tableHeaderDom === void 0 ? void 0 : tableHeaderDom.offsetHeight) !== null && _tableHeaderDom$offse !== void 0 ? _tableHeaderDom$offse : 42;
-        resolve(headerHeight + tableHeaderHeight);
-      }, 50);
-    });
+      var tableHeaderHeight = (_tableHeaderDom$offse = tableHeaderDom === null || tableHeaderDom === void 0 ? void 0 : tableHeaderDom.offsetHeight) !== null && _tableHeaderDom$offse !== void 0 ? _tableHeaderDom$offse : 42;
+      var footerRowSelectionHeight = (footerRowSelectionDom === null || footerRowSelectionDom === void 0 ? void 0 : footerRowSelectionDom.offsetHeight) || 50; // 固定表格主体高度
+
+      if (fixedTableBody && !isFullscreen) {
+        var _pageContainerDom$off, _teamixNavDom$offsetH;
+
+        // 16px 为 padding
+        var pageHeaderHeight = ((_pageContainerDom$off = pageContainerDom === null || pageContainerDom === void 0 ? void 0 : pageContainerDom.offsetHeight) !== null && _pageContainerDom$off !== void 0 ? _pageContainerDom$off : 0) + 16;
+        var teamixNavHeight = (_teamixNavDom$offsetH = teamixNavDom === null || teamixNavDom === void 0 ? void 0 : teamixNavDom.offsetHeight) !== null && _teamixNavDom$offsetH !== void 0 ? _teamixNavDom$offsetH : 0;
+        setHeaderHeight(headerHeight + tableHeaderHeight + pageHeaderHeight + teamixNavHeight + footerRowSelectionHeight + 16 + (offset !== null && offset !== void 0 ? offset : 0));
+      } else {
+        // 24px 为 padding
+        setHeaderHeight(headerHeight + tableHeaderHeight + footerRowSelectionHeight + 24 + (offset !== null && offset !== void 0 ? offset : 0));
+      }
+    }, 50);
   }; // header 区域高度。用作全屏计算吸顶吸底高度。默认不做计算
 
 
@@ -514,10 +556,8 @@ var ProTable = function ProTable(props) {
 
       var state = !fullscreenState; // 全屏时需要重新计算header高度
 
-      getHeaderHeight().then(function (height) {
-        setHeaderHeight(height);
-      });
       setFullscreenState(state);
+      getHeaderHeight(state);
       actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$s = _actionRef$current2.setState) === null || _actionRef$current2$s === void 0 ? void 0 : _actionRef$current2$s.call(_actionRef$current2, 'fullScreenState', state);
       return state;
     },
@@ -585,10 +625,8 @@ var ProTable = function ProTable(props) {
     normalDataFilterForm: normalDataFilterForm,
     fullscreenDataFilterForm: fullscreenDataFilterForm,
     filterEnableRef: filterEnableRef,
-    resetTableMaxBodyHeight: function resetTableMaxBodyHeight() {
-      getHeaderHeight().then(function (height) {
-        setHeaderHeight(height);
-      });
+    resetTableMaxBodyHeight: function resetTableMaxBodyHeight(offset) {
+      getHeaderHeight(fullscreenState, offset);
     }
   }); // 将 Actions 绑定到传入的 propsActionRef 中
 
@@ -869,9 +907,8 @@ var ProTable = function ProTable(props) {
         rowSelection: rowSelection,
         emptyContent: /*#__PURE__*/_react.default.createElement(_EmptyContent.default, null),
         sortIcons: (0, _getTableSortIcons.default)(),
-        fixedHeader: fullscreenState,
-        // 102px 为 底部 50px + 空格10px + 顶部 24px padding
-        maxBodyHeight: "calc(100vh - 84px - ".concat(headerHeight, "px)")
+        fixedHeader: fullscreenState || fixedTableBody,
+        maxBodyHeight: "calc(100vh - ".concat(headerHeight, "px)")
       }, (0, _utils.pickProps)((0, _getTableProps.default)(), otherProps))));
     } else {
       // 不传 columns 直接返回原始 Table
@@ -1013,7 +1050,7 @@ var ProTable = function ProTable(props) {
 
       }),
       ref: tableRef
-    }, renderTable(isFullScreen), footerSuctionState && footerSuction && !fullscreenState && /*#__PURE__*/_react.default.createElement(_pageContainer.default.FixedFooter, null, renderFooter()), !(footerSuctionState && footerSuction) && !fullscreenState && renderFooter(), fullscreenState && renderFooter());
+    }, renderTable(isFullScreen), (footerSuctionState && footerSuction && !fullscreenState || fixedTableBody) && /*#__PURE__*/_react.default.createElement(_pageContainer.default.FixedFooter, null, renderFooter()), !(footerSuctionState && footerSuction) && !fullscreenState && !fixedTableBody && renderFooter(), fullscreenState && renderFooter());
   });
 };
 

package/lib/table/typing.d.ts

@@ -141,6 +141,8 @@ export declare type ProTableProps = {
     disableSelectAll?: boolean;
     /** 接收外部传来的 context，eg: dialog-table */
     context?: any;
+    /** 是否固定表格主体（开启后横向滚动条会固定在底部） */
+    fixedTableBody?: boolean;
 } & Omit<TableProps, 'columns'> & ProTableTopAreaProps;
 export declare type rowSelectionType = {
     getProps?: (record: any, index: number) => any;
@@ -224,7 +226,7 @@ export declare type ProTableActionTypeMutations = {
     /** 获取 列 过滤规则 */
     getFilterRules?: () => object;
     /** 重新计算表格maxHeight高度 */
-    resetTableMaxBodyHeight?: () => void;
+    resetTableMaxBodyHeight?: (offset: number) => void;
     /** 列筛选规则 */
     filterColumns?: any[];
     /** 获取所有 on 监听事件 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamix/pro",
-  "version": "1.4.9",
+  "version": "1.4.10",
   "description": "TeamixPro大包",
   "keywords": [
     "aliyun",