linkmore-design 1.1.28 → 1.1.30

package/lib/LmTable/Table.js

@@ -9,12 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Summary = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -35,6 +35,8 @@ var _immer = require("immer");
 
 var _reactSortableHoc = require("react-sortable-hoc");
 
+var _ahooks = require("ahooks");
+
 var _useRowSelectControllableValue = _interopRequireDefault(require("./hooks/useRowSelectControllableValue"));
 
 var _ConfigProvider = _interopRequireDefault(require("../ConfigProvider"));
@@ -45,13 +47,9 @@ var _Empty = _interopRequireDefault(require("../Empty"));
 
 var _DndContainer = _interopRequireDefault(require("./components/DndContainer"));
 
-var _sortableBoxCol = _interopRequireDefault(require("./components/sortableBoxCol"));
-
-var _sortableItemCol = _interopRequireDefault(require("./components/sortableItemCol"));
-
 var _sheelTableCell = _interopRequireDefault(require("./components/sheelTableCell"));
 
-var _tableChartsModal = _interopRequireDefault(require("./components/tableChartsModal"));
+var _CalcExpression = _interopRequireDefault(require("./components/CalcExpression"));
 
 var _customRenderEmpty = _interopRequireDefault(require("./components/customRenderEmpty"));
 
@@ -63,9 +61,15 @@ var _virTual = require("./virTual");
 
 var _useGroupDataSource3 = _interopRequireDefault(require("./hooks/useGroupDataSource"));
 
-var _excluded = ["columns", "dataSource", "autoSize", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "openSheet", "editSheet", "dataChange", "groupRowKeys", "groupColKeys", "emptyProps"],
+var _useDndItems2 = _interopRequireDefault(require("./hooks/useDndItems"));
+
+var _HeaderCol = _interopRequireDefault(require("./components/HeaderCol"));
+
+var _index = require("./common/index");
+
+var _excluded = ["changeSize", "columns", "dataSource", "autoSize", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "openSheet", "editSheet", "dataChange", "openColGroup", "colGroupTitle", "openRowGroup", "rowGroupTitle", "groupWidth", "groupRowKeys", "groupColKeys", "onGroupChange", "onExpressionChange", "rowStyle", "emptyProps"],
     _excluded2 = ["className", "style"],
-    _excluded3 = ["onResize", "width", "onResizeStop"];
+    _excluded3 = ["onResize", "width", "dataIndex", "onResizeStop"];
 var Summary = _proTable.default.Summary;
 exports.Summary = Summary;
 var ConfigContext = _ConfigProvider.default.ConfigContext;
@@ -103,7 +107,8 @@ var sortDefaultColumnItem = {
   }
 };
 var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var customizeColumns = props.columns,
+  var changeSize = props.changeSize,
+      customizeColumns = props.columns,
       customizeDataSource = props.dataSource,
       autoSize = props.autoSize,
       rowClick = props.rowClick,
@@ -136,10 +141,24 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       _props$editSheet = props.editSheet,
       editSheet = _props$editSheet === void 0 ? false : _props$editSheet,
       dataChange = props.dataChange,
-      groupRowKeys = props.groupRowKeys,
-      groupColKeys = props.groupColKeys,
+      openColGroup = props.openColGroup,
+      colGroupTitle = props.colGroupTitle,
+      openRowGroup = props.openRowGroup,
+      rowGroupTitle = props.rowGroupTitle,
+      groupWidth = props.groupWidth,
+      customizeGroupRowKeys = props.groupRowKeys,
+      customizeGroupColKeys = props.groupColKeys,
+      _props$onGroupChange = props.onGroupChange,
+      onGroupChange = _props$onGroupChange === void 0 ? function () {} : _props$onGroupChange,
+      onExpressionChange = props.onExpressionChange,
+      rowStyle = props.rowStyle,
       emptyProps = props.emptyProps,
       resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  if (!Array.isArray(customizeColumns) || !customizeColumns.length) {
+    return null;
+  }
+
   var _resetProps$rowKey = resetProps.rowKey,
       rowKey = _resetProps$rowKey === void 0 ? 'id' : _resetProps$rowKey;
 
@@ -167,36 +186,46 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       setActiveKey = _useState2[1]; // 行选中
 
 
-  var _useState3 = (0, _react.useState)([]),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      useColumns = _useState4[0],
-      setColumns = _useState4[1];
-
   var tableWarpRef = (0, _react.useRef)(null);
+  /** 记录最原始数据 */
+
   var dataSourceRef = (0, _react.useRef)(null);
+  dataSourceRef.current = customizeDataSource;
   var columnsRef = (0, _react.useRef)(null);
+  columnsRef.current = customizeColumns;
   /** 右键的ref */
 
   var contentMenuRef = (0, _react.useRef)(null);
   /** 当前展开的列 */
 
-  var _useState5 = (0, _react.useState)([]),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      expandedRowKeys = _useState6[0],
-      setExpandedRowKeys = _useState6[1];
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      expandedRowKeys = _useState4[0],
+      setExpandedRowKeys = _useState4[1];
 
   var deepDataSourceRef = (0, _react.useRef)([]);
   var deepColumnsRef = (0, _react.useRef)([]); //
 
-  var copyAllData = (0, _react.useRef)(null);
-  /** 记录最原始数据 */
+  var copyAllData = (0, _react.useRef)(null); //
 
-  (0, _react.useEffect)(function () {
-    dataSourceRef.current = customizeDataSource;
-  }, [customizeDataSource]);
-  (0, _react.useEffect)(function () {
-    columnsRef.current = customizeColumns;
-  }, [customizeColumns]);
+  var update = (0, _ahooks.useUpdate)();
+
+  var _useDndItems = (0, _useDndItems2.default)({
+    columns: customizeColumns,
+    openColGroup: openColGroup,
+    openRowGroup: openRowGroup,
+    colSortOpen: colSortOpen,
+    filterChange: filterChange,
+    customizeGroupRowKeys: customizeGroupRowKeys,
+    customizeGroupColKeys: customizeGroupColKeys
+  }),
+      dndColumns = _useDndItems.dndColumns,
+      items = _useDndItems.items,
+      groupRowKeys = _useDndItems.groupRowKeys,
+      groupColKeys = _useDndItems.groupColKeys,
+      updateItems = _useDndItems.updateItems;
+
+  onGroupChange && onGroupChange(groupRowKeys, groupColKeys);
   /** 行分组 */
 
   var _useGroupDataSource = (0, _useGroupDataSource3.default)({
@@ -213,12 +242,12 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (!(groupColKeys === null || groupColKeys === void 0 ? void 0 : groupColKeys.length)) {
       return {
         dataSource: groupDataSource,
-        columns: customizeColumns
+        columns: dndColumns
       };
     }
 
-    return (0, _util.transformWithColGroup)(customizeColumns, groupDataSource, groupColKeys);
-  }, [customizeColumns, groupDataSource, groupColKeys]),
+    return (0, _util.transformWithColGroup)(dndColumns, groupDataSource, groupColKeys, groupRowKeys);
+  }, [dndColumns, groupDataSource, groupColKeys, groupRowKeys]),
       columns = _useMemo.columns,
       dataSource = _useMemo.dataSource;
 
@@ -229,7 +258,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [groupRowKeys, groupColKeys]);
   /** sheel数据的表格 */
 
-  var _useState7 = (0, _react.useState)({
+  var _useState5 = (0, _react.useState)({
     // 记录框选的行列坐标信息
     start: {},
     end: {},
@@ -242,9 +271,9 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     // 记录右下角小方块的拖动信息
     commiting: {}
   }),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      sheelStataus = _useState8[0],
-      setSheelStatus = _useState8[1];
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      sheelStataus = _useState6[0],
+      setSheelStatus = _useState6[1];
 
   var shellStatusRef = (0, _react.useRef)({
     start: {},
@@ -256,49 +285,45 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     commiting: {}
   });
 
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      selectIng = _useState8[0],
+      setSelectIng = _useState8[1];
+
   var _useState9 = (0, _react.useState)(false),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      selectIng = _useState10[0],
-      setSelectIng = _useState10[1];
+      editIng = _useState10[0],
+      setEditIng = _useState10[1];
 
   var _useState11 = (0, _react.useState)(false),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      editIng = _useState12[0],
-      setEditIng = _useState12[1];
-
-  var _useState13 = (0, _react.useState)(false),
-      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      commitIng = _useState14[0],
-      setCommitIng = _useState14[1];
+      commitIng = _useState12[0],
+      setCommitIng = _useState12[1];
   /** 右键菜单是否显示 */
 
 
-  var _useState15 = (0, _react.useState)(false),
-      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      contextMenuStatus = _useState16[0],
-      setContextMenuStatus = _useState16[1];
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      contextMenuStatus = _useState14[0],
+      setContextMenuStatus = _useState14[1];
   /** 右键按钮的位置 */
 
 
-  var _useState17 = (0, _react.useState)({
+  var _useState15 = (0, _react.useState)({
     position: 'fixed',
     left: 300,
     top: 200
   }),
-      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      style = _useState18[0],
-      setStyle = _useState18[1];
-
-  var _useState19 = (0, _react.useState)(null),
-      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      chartsModalStatus = _useState20[0],
-      setChartsModalStatus = _useState20[1]; // 列设置
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      style = _useState16[0],
+      setStyle = _useState16[1]; // const [chartsModalStatus, setChartsModalStatus] = useState(null)
+  // 列设置
 
 
-  var _useState21 = (0, _react.useState)(false),
-      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-      columnsStateMap = _useState22[0],
-      setColumnsStateMap = _useState22[1];
+  var _useState17 = (0, _react.useState)(false),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      columnsStateMap = _useState18[0],
+      setColumnsStateMap = _useState18[1];
 
   var SortableItem = (0, _reactSortableHoc.SortableElement)(function (props) {
     return /*#__PURE__*/_react.default.createElement("tr", props);
@@ -341,6 +366,15 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     deepColumnsRef.current = source;
   }, [columns, groupColKeys]);
 
+  var _useState19 = (0, _react.useState)(columns),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      useColumns = _useState20[0],
+      setColumns = _useState20[1];
+
+  (0, _react.useEffect)(function () {
+    setColumns(columns);
+  }, [columns]);
+
   var onSortEnd = function onSortEnd(_ref) {
     var oldIndex = _ref.oldIndex,
         newIndex = _ref.newIndex;
@@ -354,20 +388,6 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   };
 
-  var onColSortEnd = function onColSortEnd(active, over) {
-    var oldIndex = columns.findIndex(function (item) {
-      return item.dataIndex === active;
-    });
-    var newIndex = columns.findIndex(function (item) {
-      return item.dataIndex === over;
-    });
-    filterChange === null || filterChange === void 0 ? void 0 : filterChange((0, _sortable.arrayMove)(columns, oldIndex, newIndex).map(function (item, index) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-        order: index
-      });
-    }));
-  };
-
   var DraggableContainer = function DraggableContainer(props) {
     return /*#__PURE__*/_react.default.createElement(SortContainer, (0, _extends2.default)({
       useDragHandle: true,
@@ -1003,30 +1023,34 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var colIndex = 0;
 
     var traverseColumns = function traverseColumns(columns) {
-      columns === null || columns === void 0 ? void 0 : columns.forEach(function (col, index) {
-        if (col.show === false) {
-          return;
-        }
+      var _loop = function _loop(_i) {
+        var col = columns[_i];
 
-        if (col.children && col.children.length) {
+        if (col.show === false) {
+          columns.splice(_i, 1);
+          _i -= 1;
+        } else if (col.children && col.children.length) {
           traverseColumns(col.children);
-          return;
         } else {
           // $_ 开头表示私有属性
-          col.$_colIndex = colIndex;
+          col.$_colIndex = colIndex; // eslint-disable-next-line no-loop-func
 
           col.onHeaderCell = function (column) {
+            i = _i;
             return resizeable ? {
               width: column.width,
-              onResize: handleResize(index),
+              dataIndex: column.dataIndex,
+              onResize: handleResize(_i),
               onResizeStop: endResize
             } : {
-              width: column.width
+              width: column.width,
+              dataIndex: column.dataIndex
             };
           };
 
           if (openSheet) {
             col.onCell = function (record, rowIndex) {
+              i = _i;
               return {
                 record: record,
                 rowKey: rowKey,
@@ -1044,11 +1068,30 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
                 dataSourceChange: dataSourceChange
               };
             };
+          } else if (openRowGroup) {
+            col.onCell = function (record) {
+              i = _i;
+              return {
+                record: record,
+                col: col,
+                onChangeRecord: function onChangeRecord(dfs, dataIndex, value, isUpdate) {
+                  dfs(dataSource, dataIndex, value);
+                  isUpdate && update();
+                },
+                onExpressionChange: onExpressionChange
+              };
+            };
           }
+
+          colIndex += 1;
         }
 
-        colIndex += 1;
-      });
+        i = _i;
+      };
+
+      for (var _i2 = 0; _i2 < columns.length; _i2 += 1) {
+        _loop(_i2);
+      }
     };
 
     var innerColumns = (0, _lodash.cloneDeep)(useColumns.filter(function (item) {
@@ -1063,15 +1106,13 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         title: '分组',
         dataIndex: '_group',
         key: '_group',
-        width: 100
+        width: groupWidth || 100,
+        fixed: 'left'
       }].concat((0, _toConsumableArray2.default)(innerColumns));
     }
 
     return sortOpen ? [sortDefaultColumnItem].concat((0, _toConsumableArray2.default)(innerColumns)) : innerColumns;
-  }, [useColumns, sortOpen, selectIng, dataSource, groupRowKeys, commitIng]);
-  (0, _react.useEffect)(function () {
-    setColumns(columns);
-  }, [columns]); // 行点击事件
+  }, [useColumns, sortOpen, selectIng, dataSource, groupRowKeys, commitIng]); // 行点击事件
 
   var onRecord = function onRecord(record) {
     var _Object$assign = Object.assign(_resetConfig.default.checkConfig, checkConfig),
@@ -1113,6 +1154,12 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
 
   var config = (0, _react.useMemo)(function () {
+    var autoSizeHeight = autoSize.height;
+
+    if (autoSizeHeight === '100%' && (openRowGroup || openColGroup)) {
+      autoSizeHeight = 'calc(100% - 100px)';
+    }
+
     return (0, _objectSpread2.default)({
       defaultSize: 'small',
       tableLayout: 'fixed',
@@ -1136,7 +1183,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       checkConfig: checkConfig,
       // components: vComponents,
       scroll: resetProps.autoSizer || resetProps.scroll ? (0, _objectSpread2.default)((0, _objectSpread2.default)({
-        y: autoSize.height
+        y: autoSizeHeight
       }, resetProps.scroll), resizeable ? {
         x: '100%'
       } : {}) : resizeable ? {
@@ -1244,6 +1291,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   _react.default.useImperativeHandle(ref, function () {
     return {
+      changeSize: changeSize,
       getCheckboxRecords: function getCheckboxRecords() {
         return useSelectedRows.selectedRows;
       },
@@ -1263,12 +1311,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         return (0, _lodash.omit)(item, ['render', 'sorter', 'onFilter', 'filters']);
       })
     };
-  }); // loading触发清空选中状态
-  // useEffect(() => {
-  //   console.log(3)
-  //   setSelectedRows({ selectedRows: [] })
-  // }, [loading])
-
+  });
 
   var onTableChange = function onTableChange(pagination, filters, sorter, extra) {
     var resultColumns = useColumns.map(function (item) {
@@ -1302,6 +1345,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var _props$onResize = props.onResize,
         onResize = _props$onResize === void 0 ? function () {} : _props$onResize,
         width = props.width,
+        dataIndex = props.dataIndex,
         onResizeStop = props.onResizeStop,
         restProps = (0, _objectWithoutProperties2.default)(props, _excluded3);
 
@@ -1309,6 +1353,14 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return /*#__PURE__*/_react.default.createElement("th", restProps);
     }
 
+    var column = (0, _index.treeFind)(columns, function (node) {
+      return node.dataIndex === dataIndex;
+    });
+
+    if (!column || groupRowKeys.includes(dataIndex)) {
+      return /*#__PURE__*/_react.default.createElement("th", restProps);
+    }
+
     return /*#__PURE__*/_react.default.createElement(_reactResizable.Resizable, {
       width: width,
       height: 0,
@@ -1323,23 +1375,20 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       draggableOpts: {
         enableUserSelectHack: false
       }
-    }, /*#__PURE__*/_react.default.createElement("th", restProps));
+    }, /*#__PURE__*/_react.default.createElement("th", restProps, /*#__PURE__*/_react.default.createElement(_HeaderCol.default, (0, _extends2.default)({
+      column: column
+    }, props, {
+      openRowGroup: openRowGroup,
+      openColGroup: openColGroup
+    }))));
   };
 
   var colDraggableContainer = (0, _react.useCallback)(function (_ref4) {
     var props = (0, _extends2.default)({}, _ref4);
-    return /*#__PURE__*/_react.default.createElement("tr", null, _react.default.Children.map(props.children, function (child) {
-      var _child$props, _child$props$column;
+    var children = props.children;
+    return /*#__PURE__*/_react.default.createElement("tr", null, children);
+  }, [columns]); // 重写表格
 
-      if (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : (_child$props$column = _child$props.column) === null || _child$props$column === void 0 ? void 0 : _child$props$column.fixed) {
-        return child;
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_sortableItemCol.default, {
-        id: child.key
-      }, child);
-    }));
-  }, [columns]);
   var tableComponents = (0, _react.useMemo)(function () {
     var _ref5 = components || {},
         _ref5$body = _ref5.body,
@@ -1347,23 +1396,58 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         _ref5$header = _ref5.header,
         header = _ref5$header === void 0 ? {} : _ref5$header;
 
+    var table = null;
+
+    if (virtual) {
+      table = function InnerVirtualTable(props) {
+        return /*#__PURE__*/_react.default.createElement(_virTual.VirtualTable, (0, _extends2.default)({}, props, {
+          isEmpty: !customizeDataSource.length
+        }));
+      };
+    }
+
+    var headerRow = null;
+
+    if (openRowGroup || openColGroup) {
+      headerRow = colDraggableContainer;
+    }
+
+    var headerCell = null;
+
+    if (openRowGroup || openColGroup || resizeable) {
+      headerCell = ResizableTitle;
+    }
+
+    var bodyCell = null;
+
+    if (openSheet) {
+      bodyCell = _sheelTableCell.default;
+    } else if (openRowGroup) {
+      bodyCell = _CalcExpression.default;
+    }
+
     return {
-      // table: (record) => {
-      //   return <div style={record.style}>{record.children}</div>
-      // }
-      table: virtual ? _virTual.VirtualTable : null,
+      table: table,
       header: (0, _objectSpread2.default)({
-        row: colSortOpen ? colDraggableContainer : null,
-        cell: resizeable ? ResizableTitle : null
+        row: headerRow,
+        cell: headerCell
       }, header),
-      body: (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      body: (0, _objectSpread2.default)({
         wrapper: sortOpen ? DraggableContainer : virtual ? _virTual.VirtualWrapper : null,
-        row: sortOpen ? DraggableBodyRow : virtual ? _virTual.VirtualRow : null
-      }, body), {}, {
-        cell: openSheet ? _sheelTableCell.default : null
-      })
+        row: sortOpen ? DraggableBodyRow : virtual ? _virTual.VirtualRow : null,
+        cell: bodyCell
+      }, body)
     };
-  }, [sortOpen, resizeable, components, colSortOpen]);
+  }, [sortOpen, resizeable, components, colSortOpen, customizeDataSource, columns, openRowGroup]);
+  (0, _react.useEffect)(function () {
+    if (autoSize && autoSize.height !== '100%') {
+      var dom = document.querySelector('.lm_protable .ant-table-body');
+
+      if (dom) {
+        dom.style.height = "".concat(autoSize.height, "px");
+      }
+    }
+  }, [autoSize]);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       height: '100%',
@@ -1377,12 +1461,14 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     } : emptyProps ? function () {
       return /*#__PURE__*/_react.default.createElement(_Empty.default, emptyProps, (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.footer) || null);
     } : _customRenderEmpty.default
-  }, colSortOpen ? /*#__PURE__*/_react.default.createElement(_DndContainer.default, {
-    move: onColSortEnd
-  }, /*#__PURE__*/_react.default.createElement(_sortableBoxCol.default, {
-    items: columns.reduce(function (acc, item) {
-      return [].concat((0, _toConsumableArray2.default)(acc), [item.dataIndex]);
-    }, [])
+  }, openRowGroup || openColGroup || colSortOpen ? /*#__PURE__*/_react.default.createElement(_DndContainer.default, {
+    items: items,
+    updateItems: updateItems,
+    rowGroupTitle: rowGroupTitle,
+    colGroupTitle: colGroupTitle,
+    filterColumns: (columnsRef.current || []).filter(function (item) {
+      return item.rowGroup || item.colGroup;
+    })
   }, /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
     loading: loading,
     dataSource: dataSource,
@@ -1408,8 +1494,13 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tableClassName: (0, _classnames.default)('lm_protable', resizeable && 'lm_resizeable'),
     summary: function summary(pageData) {
       return _summary && _summary(pageData, resultColumns);
+    },
+    onRow: function onRow() {
+      return {
+        style: rowStyle || {}
+      };
     }
-  })))) : /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
+  }))) : /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
     loading: loading,
     dataSource: dataSource,
     components: tableComponents,
@@ -1447,43 +1538,37 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, "\u590D\u5236"), /*#__PURE__*/_react.default.createElement("div", {
     className: "rightClickItems",
     onClick: handleCopyAll
-  }, "\u590D\u5236\u5168\u90E8")), chartsModalStatus && /*#__PURE__*/_react.default.createElement(_tableChartsModal.default, {
-    type: chartsModalStatus,
-    onCancel: function onCancel() {
-      return setChartsModalStatus(false);
-    },
-    onOk: function onOk() {
-      return setChartsModalStatus(false);
-    },
-    data: dataSource,
-    deepDataSource: deepDataSourceRef.current,
-    rowKey: rowKey,
-    columns: columns,
-    selectInfo: (0, _lodash.pick)(shellStatusRef.current, ['start', 'end'])
-  }));
+  }, "\u590D\u5236\u5168\u90E8")));
 }); // 监听大小: 这里的高度是整个表格的高度，表体需要减去列头和分页的高度
 
 /** 1: 使用scroll.x y 来控制宽高 默认都是100% */
 
 var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$autoSizer = props.autoSizer,
-      autoSizer = _props$autoSizer === void 0 ? false : _props$autoSizer;
-
-  var _useState23 = (0, _react.useState)({
+      autoSizer = _props$autoSizer === void 0 ? false : _props$autoSizer,
+      openRowGroup = props.openRowGroup,
+      openColGroup = props.openColGroup,
+      groupHeight = props.groupHeight,
+      footer = props.footer,
+      footerHeight = props.footerHeight;
+
+  var _useState21 = (0, _react.useState)({
     width: '100%',
     height: '100%'
   }),
-      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
-      tableSize = _useState24[0],
-      setTableSize = _useState24[1];
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      tableSize = _useState22[0],
+      setTableSize = _useState22[1];
 
   var defaultRef = ref || (0, _react.useRef)(null);
   var tableWarpRef = (0, _react.useRef)(null);
   var resizeRef = (0, _react.useRef)(null);
+  var clsName = (0, _classnames.default)(footer && 'lm_protable_with_footer');
 
   if (!autoSizer) {
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: tableWarpRef,
+      className: clsName,
       id: "lm_protable_warp",
       style: {
         width: '100%',
@@ -1500,7 +1585,12 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   var resetHeight = (0, _react.useMemo)(function () {
-    var height = tableSize.height; // 头部高度
+    var height = tableSize.height;
+
+    if (typeof height === 'string') {
+      return height;
+    } // 头部高度
+
 
     var h = height - (props.size === 'middle' ? 47 : 40);
 
@@ -1512,21 +1602,24 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return v.children;
     })) {
       h -= 32;
+    } // 行列分组的高度
+
+
+    if (openRowGroup || openColGroup) {
+      h -= groupHeight || 102;
+    }
+
+    if (footer) {
+      h -= footerHeight || 54;
+    } // safe area
+
+
+    if (h < 0) {
+      h = 0;
     }
 
     return h;
-  }, [props.hiddenPage, props.customCheck, props.columns, tableSize]);
-  var throttleSize = (0, _react.useCallback)(function () {
-    var width = tableSize.width;
-    return /*#__PURE__*/_react.default.createElement(ResetTable, (0, _extends2.default)({
-      ref: defaultRef
-    }, props, {
-      autoSize: {
-        height: resetHeight,
-        width: width
-      }
-    }));
-  }, [tableSize, props]);
+  }, [props.hiddenPage, props.customCheck, props.columns, tableSize, footer, footerHeight, groupHeight]);
 
   var changeSize = function changeSize() {
     if (!tableWarpRef.current) {
@@ -1547,6 +1640,18 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   };
 
+  var throttleSize = (0, _react.useCallback)(function () {
+    var width = tableSize.width;
+    return /*#__PURE__*/_react.default.createElement(ResetTable, (0, _extends2.default)({
+      ref: defaultRef
+    }, props, {
+      changeSize: changeSize,
+      autoSize: {
+        height: resetHeight,
+        width: width
+      }
+    }));
+  }, [tableSize, props]);
   var handResize = (0, _lodash.throttle)(changeSize, 600);
   (0, _react.useEffect)(function () {
     var summary = props.summary;
@@ -1573,6 +1678,7 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     };
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
+    className: clsName,
     ref: tableWarpRef,
     id: "lm_protable_warp",
     style: {