ztxkui 4.2.18-2 → 4.2.18-21

package/dist/components/Table/table.js

@@ -62,6 +62,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
     return to;
 };
 import React, { useCallback, memo, useState, useEffect, useRef, useMemo, useImperativeHandle, } from 'react';
+import { unstable_batchedUpdates } from 'react-dom';
 import { Table as AntTable } from 'antd';
 import { message } from '../../index';
 import { ERROR_TD_CLASSNAME } from './';
@@ -70,15 +71,26 @@ import TableDynamic from './table-dynamic';
 import TableEnhanceRow from './table-enhance-row';
 import TableEnhanceCell from './table-enhance-cell';
 import TableResizableTitle from './table-resizable-title';
-import useColumns, { setDynamicKey } from './hooks/useColumns';
+import useColumns, { setDynamicKey, getStorage, } from './hooks/useColumns';
+import useSelectSubtotal from './hooks/useSelectSubtotal';
 import getSummaryData from './utils/getSummaryData';
-import { domFind } from './utils/dom';
+import { domFind,
+// domParentsUntil,
+// parseSliceData,
+// appendSubtotalTr,
+// deleteSubtotalTr,
+// deleteSubtotalClassNameTr,
+ } from './utils/dom';
 import { tableValidate } from './utils/validate';
+// import { shallowEqual } from './utils/shallowEqual';
 import classNames from 'classnames';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { DndProvider } from 'react-dnd';
+import { VList, scrollTo } from 'virtuallist-antd';
 // import update from 'immutability-helper';
 import useInnerPagination, { getInnerIndex } from './hooks/useInnerPagination';
+import { INNER_PARENT_ROW_KEY, INNER_PARENT_ROW_KEY_NO } from './constants';
+import useLastest from '../utils/useLastest';
 /**默认scroll配置 */
 // const _scroll = { y: 500, x: 1000 };
 var _scroll = { x: 1000 };
@@ -88,7 +100,7 @@ var _scroll = { x: 1000 };
  */
 var components = {
     body: {
-        row: TableEnhanceRow,
+        // row: TableEnhanceRow,
         cell: TableEnhanceCell,
     },
 };
@@ -102,34 +114,81 @@ var components = {
  * 实现可拖拽行 completed
  * 实现可编辑功能
  */
+export function usePrevious(value) {
+    var ref = useRef();
+    useEffect(function () {
+        ref.current = value;
+    });
+    return ref.current;
+}
 function Table(props) {
     var _this = this;
-    var className = props.className, scroll = props.scroll, _a = props.pagination, pagination = _a === void 0 ? false : _a, _b = props.bordered, bordered = _b === void 0 ? true : _b, columns = props.columns, initColumns = props.initColumns, dataSource = props.dataSource, onAddAndDelHandle = props.onAddAndDelHandle, hideAddIcon = props.hideAddIcon, addIconText = props.addIconText, hideDelIcon = props.hideDelIcon, showDelAllBtn = props.showDelAllBtn, delAllChange = props.delAllChange, delIconText = props.delIconText, showColumnDynamic = props.showColumnDynamic, showColumnDynamicKey = props.showColumnDynamicKey, summaryConfig = props.summaryConfig, summaryFixed = props.summaryFixed, summary = props.summary, onMoveRow = props.onMoveRow, onEditableSave = props.onEditableSave, onDynamicChange = props.onDynamicChange, _c = props.isResizableColumn, isResizableColumn = _c === void 0 ? true : _c, configInfo = props.configInfo, tableHandleRef = props.tableHandleRef, tableName = props.tableName, isFlex = props.isFlex, onTableChange = props.onTableChange, rowSelection = props.rowSelection, showInnerPagination = props.showInnerPagination, defaultInnerPageSize = props.defaultInnerPageSize, restProps = __rest(props, ["className", "scroll", "pagination", "bordered", "columns", "initColumns", "dataSource", "onAddAndDelHandle", "hideAddIcon", "addIconText", "hideDelIcon", "showDelAllBtn", "delAllChange", "delIconText", "showColumnDynamic", "showColumnDynamicKey", "summaryConfig", "summaryFixed", "summary", "onMoveRow", "onEditableSave", "onDynamicChange", "isResizableColumn", "configInfo", "tableHandleRef", "tableName", "isFlex", "onTableChange", "rowSelection", "showInnerPagination", "defaultInnerPageSize"]);
-    // console.log('table render');
+    var _a, _b;
+    var className = props.className, scroll = props.scroll, _c = props.pagination, pagination = _c === void 0 ? false : _c, _d = props.bordered, bordered = _d === void 0 ? true : _d, _columns = props.columns, initColumns = props.initColumns, dataSource = props.dataSource, onAddAndDelHandle = props.onAddAndDelHandle, hideAddIcon = props.hideAddIcon, addIconText = props.addIconText, hideDelIcon = props.hideDelIcon, showDelAllBtn = props.showDelAllBtn, delAllChange = props.delAllChange, delIconText = props.delIconText, hiddenColumnDynamicIcon = props.hiddenColumnDynamicIcon, showColumnDynamic = props.showColumnDynamic, showColumnDynamicKey = props.showColumnDynamicKey, summaryConfig = props.summaryConfig, summaryFixed = props.summaryFixed, summary = props.summary, onMoveRow = props.onMoveRow, onEditableSave = props.onEditableSave, onDynamicChange = props.onDynamicChange, _e = props.isResizableColumn, isResizableColumn = _e === void 0 ? true : _e, configInfo = props.configInfo, tableHandleRef = props.tableHandleRef, tableName = props.tableName, isFlex = props.isFlex, onTableChange = props.onTableChange, rowSelection = props.rowSelection, showInnerPagination = props.showInnerPagination, defaultInnerPageSize = props.defaultInnerPageSize, virtualTableKey = props.virtualTableKey, _f = props.isSort, isSort = _f === void 0 ? false : _f, onSortChange = props.onSortChange, onFillDownChange = props.onFillDownChange, 
+    // onRow,
+    restProps = __rest(props, ["className", "scroll", "pagination", "bordered", "columns", "initColumns", "dataSource", "onAddAndDelHandle", "hideAddIcon", "addIconText", "hideDelIcon", "showDelAllBtn", "delAllChange", "delIconText", "hiddenColumnDynamicIcon", "showColumnDynamic", "showColumnDynamicKey", "summaryConfig", "summaryFixed", "summary", "onMoveRow", "onEditableSave", "onDynamicChange", "isResizableColumn", "configInfo", "tableHandleRef", "tableName", "isFlex", "onTableChange", "rowSelection", "showInnerPagination", "defaultInnerPageSize", "virtualTableKey", "isSort", "onSortChange", "onFillDownChange"]);
+    var onChange = restProps.onChange;
     var classes = classNames('zt-table', className, {
         'zt-table--flex': isFlex,
     });
-    var _d = useState(false), dynamicVisible = _d[0], setDynamicVisible = _d[1];
-    var _e = useState(columns), _columns = _e[0], setColumns = _e[1];
+    var _g = useState(false), dynamicVisible = _g[0], setDynamicVisible = _g[1];
     var showDynamicHandle = useCallback(function () { return setDynamicVisible(true); }, []);
     var hideDynamicHandle = useCallback(function () { return setDynamicVisible(false); }, []);
     var dataSourceRef = useRef();
+    var preDataSource = usePrevious(dataSource);
+    var _h = useState(), sortDataSource = _h[0], setSortDataSource = _h[1];
     // 内部分页相关配置
-    var _f = useInnerPagination(showInnerPagination, defaultInnerPageSize), paginationConfig = _f.paginationConfig, currentPage = _f.currentPage, setCurrent = _f.setCurrent, pageSize = _f.pageSize;
+    var _j = useInnerPagination(showInnerPagination, defaultInnerPageSize), paginationConfig = _j.paginationConfig, currentPage = _j.currentPage, setCurrent = _j.setCurrent, pageSize = _j.pageSize;
     var rowSelectionDataSource = useRef({});
     var myScroll = useMemo(function () {
         if (scroll) {
-            return isFlex ? __assign(__assign({}, scroll), { y: scroll.y || 100 }) : scroll;
+            return isFlex ? __assign(__assign({}, scroll), { y: scroll.y || 200 }) : scroll;
         }
-        return isFlex ? __assign(__assign({}, _scroll), { y: 100 }) : _scroll;
+        return isFlex ? __assign(__assign({}, _scroll), { y: 200 }) : _scroll;
     }, [scroll, isFlex]);
+    var expandableDataSource = useMemo(function () {
+        var _a, _b;
+        if (!onEditableSave) {
+            return dataSource;
+        }
+        else {
+            try {
+                var childrenColumnName_1 = ((_a = props === null || props === void 0 ? void 0 : props.expandable) === null || _a === void 0 ? void 0 : _a.childrenColumnName) || 'children';
+                return (_b = dataSource === null || dataSource === void 0 ? void 0 : dataSource.slice()) === null || _b === void 0 ? void 0 : _b.map(function (item, index) {
+                    var _a;
+                    if (item) {
+                        var itemRowKey_1 = typeof props.rowKey === 'string'
+                            ? item[props.rowKey]
+                            : "" + INNER_PARENT_ROW_KEY_NO + index;
+                        var newChildren = item[childrenColumnName_1];
+                        if (Array.isArray(newChildren)) {
+                            newChildren = newChildren.map(function (childrenItem) {
+                                var _a;
+                                return __assign(__assign({}, childrenItem), (_a = {}, _a[INNER_PARENT_ROW_KEY] = itemRowKey_1, _a));
+                            });
+                            return __assign(__assign({}, item), (_a = {}, _a[childrenColumnName_1] = newChildren, _a));
+                        }
+                    }
+                    return item;
+                });
+            }
+            catch (err) {
+                return dataSource;
+            }
+        }
+    }, [
+        onEditableSave,
+        dataSource,
+        (_a = props === null || props === void 0 ? void 0 : props.expandable) === null || _a === void 0 ? void 0 : _a.childrenColumnName,
+        props.rowKey,
+    ]);
     /**columns更新，重新设置columns */
     useEffect(function () {
-        setColumns(columns);
-    }, [columns]);
-    useEffect(function () {
-        dataSourceRef.current = dataSource;
-    }, [dataSource]);
+        dataSourceRef.current = expandableDataSource;
+        // 2023-05-04 清空内部排序
+        setSortDataSource(null);
+        setCustomOrder(null);
+    }, [expandableDataSource]);
     var copyByKey = useCallback(function (key) {
         var _a, _b;
         if (Array.isArray(dataSourceRef.current)) {
@@ -161,12 +220,115 @@ function Table(props) {
             }
         }
     }, []);
+    var tableRef = useRef();
+    var getCurrentTable = useCallback(function () {
+        var _a;
+        var tableContent = domFind(tableRef.current, '.ant-table-content');
+        if (!tableContent) {
+            tableContent = domFind(tableRef.current, '.ant-table-container');
+        }
+        var tableBody = domFind(tableContent, '.ant-table-tbody');
+        var tr = tableBody === null || tableBody === void 0 ? void 0 : tableBody.children;
+        var arrTr = Array.prototype.slice.call(tr);
+        var resultTr = ((_a = arrTr === null || arrTr === void 0 ? void 0 : arrTr.filter) === null || _a === void 0 ? void 0 : _a.call(arrTr, function (item) { return item.className.includes('ant-table-row'); })) || [];
+        return { tableBody: tableBody, resultTr: resultTr };
+    }, []);
+    var clearErrorClass = useCallback(function (index) {
+        try {
+            var resultTr = getCurrentTable().resultTr;
+            if (typeof index === 'number') {
+                var tds = resultTr[index].querySelectorAll('td');
+                for (var i = 0; i < tds.length; i++) {
+                    tds[i].classList.remove(ERROR_TD_CLASSNAME);
+                }
+            }
+            else {
+                for (var i = 0; i < resultTr.length; i++) {
+                    var tds = resultTr[i].querySelectorAll('td');
+                    for (var j = 0; j < tds.length; j++) {
+                        tds[j].classList.remove(ERROR_TD_CLASSNAME);
+                    }
+                }
+            }
+        }
+        catch (err) {
+            console.log(err);
+        }
+    }, [getCurrentTable]);
+    var onTableChangeHandle = useCallback(function (resultTextList, startIndex) {
+        clearErrorClass();
+        onTableChange && onTableChange(resultTextList, startIndex);
+    }, [clearErrorClass, onTableChange]);
+    // 2023-05-04 自定义表格排序方法
+    var _k = useState(), customOrder = _k[0], setCustomOrder = _k[1];
+    var customSortHandle = useCallback(function (info, options) {
+        if (Array.isArray(expandableDataSource) &&
+            expandableDataSource.length > 1) {
+            var field_1 = info.field, order = info.order;
+            var sorterHandle_1 = (options || {}).sorterHandle;
+            // 说明是前端排序
+            if (sorterHandle_1) {
+                if (order === 'ascend') {
+                    setSortDataSource(expandableDataSource.slice().sort(function (a, b) {
+                        return sorterHandle_1(a, b);
+                    }));
+                }
+                else if (order === 'descend') {
+                    setSortDataSource(expandableDataSource.slice().sort(function (a, b) {
+                        return -sorterHandle_1(a, b);
+                    }));
+                }
+                else {
+                    setSortDataSource(null);
+                }
+                return;
+            }
+            // 如果传入了onSortChange方法，排序规则交给业务自行处理
+            if (onSortChange) {
+                onSortChange({ order: order, field: field_1 });
+                return;
+            }
+            // 如果传入了onChange函数，说明也是外部排序
+            if (onChange) {
+                onChange(null, null, { field: field_1, order: order }, null);
+                return;
+            }
+            var handle_1 = function (a, b) {
+                var result = a[field_1] - b[field_1];
+                if (!isNaN(result)) {
+                    return result;
+                }
+                if (a[field_1] < b[field_1]) {
+                    return -1;
+                }
+                else if (a[field_1] > b[field_1]) {
+                    return 1;
+                }
+                return 0;
+            };
+            if (order === 'ascend') {
+                setSortDataSource(expandableDataSource.slice().sort(function (a, b) {
+                    return handle_1(a, b);
+                }));
+            }
+            else if (order === 'descend') {
+                setSortDataSource(expandableDataSource.slice().sort(function (a, b) {
+                    return -handle_1(a, b);
+                }));
+            }
+            else {
+                setSortDataSource(null);
+            }
+        }
+    }, [expandableDataSource, onSortChange, onChange]);
     /**
      * @description 根据配置生成一个新的columns
      *              以及一个需要动态列配置的columns
      */
-    var _g = useColumns({
+    var onFillDownChangeRef = useLastest(onFillDownChange);
+    var _l = useColumns({
         columns: _columns,
+        hiddenColumnDynamicIcon: hiddenColumnDynamicIcon,
         showColumnDynamic: showColumnDynamic,
         showColumnDynamicKey: showColumnDynamicKey,
         onAddAndDelHandle: onAddAndDelHandle,
@@ -180,40 +342,45 @@ function Table(props) {
         onEditableSave: onEditableSave,
         configInfo: configInfo,
         copyByKey: copyByKey,
-        onTableChange: onTableChange
-            ? function (resultTextList, startIndex) {
-                clearErrorClass();
-                onTableChange && onTableChange(resultTextList, startIndex);
-            }
-            : undefined,
+        onTableChange: onTableChange ? onTableChangeHandle : undefined,
         currentPage: currentPage,
-    }), newColumns = _g.newColumns, dynamicColumns = _g.dynamicColumns, setNewColumns = _g.setNewColumns;
+        currentDataSource: dataSource,
+        preDataSource: preDataSource,
+        dataSourceRef: dataSourceRef,
+        rowKey: props.rowKey,
+        expandableChildrenColumnName: ((_b = props === null || props === void 0 ? void 0 : props.expandable) === null || _b === void 0 ? void 0 : _b.childrenColumnName) || 'children',
+        customSortHandle: customSortHandle,
+        customOrder: customOrder,
+        setCustomOrder: setCustomOrder,
+        isSort: isSort,
+        onFillDownChangeRef: onFillDownChangeRef,
+    }), newColumns = _l.newColumns, dynamicColumns = _l.dynamicColumns, refreshColumnsHandle = _l.refreshColumnsHandle;
     /**
      * @description 保存列配置
      */
     var saveDynamicHandle = useCallback(function (dynamicColumns) {
         if (Array.isArray(_columns)) {
-            var leftArr_1 = [];
-            var rightArr_1 = [];
-            _columns.forEach(function (column) {
-                if (column.fixed === 'left') {
-                    leftArr_1.push(column);
-                }
-                if (column.fixed === 'right') {
-                    rightArr_1.push(column);
-                }
-            });
+            // const leftArr: ColumnsType<RecordType> = [];
+            // const rightArr: ColumnsType<RecordType> = [];
+            // _columns.forEach((column) => {
+            //   if (column.fixed === 'left') {
+            //     leftArr.push(column);
+            //   }
+            //   if (column.fixed === 'right') {
+            //     rightArr.push(column);
+            //   }
+            // });
             // 记录width信息
-            var _newColumns = __spreadArray(__spreadArray(__spreadArray([], leftArr_1), dynamicColumns), rightArr_1);
+            // let _newColumns = [...leftArr, ...dynamicColumns, ...rightArr];
             // 同步width
-            _newColumns = _newColumns.map(function (item) {
+            var _newColumns = dynamicColumns.map(function (item) {
                 var column = newColumns.find(function (column) {
-                    return column.dataIndex === item.dataIndex || column.key === item.key;
+                    return (column.dataIndex && column.dataIndex === item.dataIndex) ||
+                        (column.key && column.key === item.key);
                 });
                 return column && column.width
                     ? __assign(__assign({}, item), { width: column.width }) : item;
             });
-            setColumns(_newColumns);
             var catchColumns = _newColumns.map(function (item) {
                 if (item.dataIndex || item.key) {
                     return {
@@ -221,29 +388,29 @@ function Table(props) {
                         key: item.key,
                         hideColumn: item.hideColumn,
                         width: item.width,
+                        fixed: item.fixed,
                     };
                 }
                 return __assign({}, item);
             });
             if (showColumnDynamicKey) {
-                // let catchColumnsStr = '{}';
-                // try {
-                //   catchColumnsStr = JSON.stringify(catchColumns);
-                // } catch (err) {
-                //   console.log(err);
-                // }
-                // localStorage.setItem(showColumnDynamicKey, catchColumnsStr);
                 setDynamicKey(showColumnDynamicKey, catchColumns);
             }
+            refreshColumnsHandle();
             onDynamicChange && onDynamicChange(catchColumns);
         }
-    }, [_columns, newColumns, onDynamicChange, showColumnDynamicKey]);
+    }, [
+        _columns,
+        newColumns,
+        onDynamicChange,
+        showColumnDynamicKey,
+        refreshColumnsHandle,
+    ]);
     /**
      * @description 动态列配置重置功能
      */
     var resetDynamicHandle = useCallback(function () {
-        var _initColumns = initColumns || columns || [];
-        setColumns(__spreadArray([], _initColumns));
+        var _initColumns = initColumns || _columns || [];
         var catchColumns = (_initColumns || []).map(function (item) {
             if (item.dataIndex || item.key) {
                 return {
@@ -251,36 +418,103 @@ function Table(props) {
                     key: item.key,
                     hideColumn: item.hideColumn,
                     width: item.width,
+                    fixed: item.fixed,
                 };
             }
+            // 20230815 去掉没有赋key的默认赋title的逻辑
+            // 这个逻辑会引发一些bug
+            // return { ...item, dataIndex: item.title, key: item.title };
             return __assign({}, item);
         });
         if (showColumnDynamicKey) {
-            // let catchColumnsStr = '{}';
-            // try {
-            //   catchColumnsStr = JSON.stringify(catchColumns);
-            // } catch (err) {
-            //   console.log(err);
-            // }
-            // localStorage.setItem(showColumnDynamicKey, catchColumnsStr);
             setDynamicKey(showColumnDynamicKey, catchColumns);
         }
+        refreshColumnsHandle();
         onDynamicChange && onDynamicChange(catchColumns);
         hideDynamicHandle();
     }, [
         initColumns,
-        columns,
+        _columns,
         hideDynamicHandle,
         onDynamicChange,
         showColumnDynamicKey,
+        refreshColumnsHandle,
     ]);
+    // // 点击行行为
+    // const checkedRowRef = useRef<any>({});
+    // const subtotalIndexRef = useRef<any>([]);
+    // const getColumnData = useCallback(
+    //   (pageData: any) => {
+    //     const summaryData = getSummaryData(summaryConfig, pageData, newColumns, {
+    //       hasRowSelection: props.rowSelection ? true : false,
+    //       hasExpandable: props.expandable ? true : false,
+    //     });
+    //     return summaryData;
+    //   },
+    //   [summaryConfig, props.rowSelection, props.expandable, newColumns]
+    // );
+    // const onRowFn = useCallback(
+    //   (record, index) => {
+    //     let result: any = {};
+    //     if (onRow) {
+    //       result = onRow(record);
+    //     }
+    //     const { onDoubleClick, ...resetResult } = result;
+    //     return {
+    //       onDoubleClick: (event) => {
+    //         onDoubleClick && onDoubleClick(event);
+    //         if (onEditableSave) {
+    //           return;
+    //         }
+    //         // 选中的数据添加一些样式规则
+    //         const tr = domParentsUntil(event.target, '.ant-table-row');
+    //         if (tr.classList.contains('ant-table-row-doubleClick')) {
+    //           tr.classList.remove('ant-table-row-doubleClick');
+    //           const removeIndex = subtotalIndexRef.current.findIndex(
+    //             (item) => item === index
+    //           );
+    //           subtotalIndexRef.current.splice(removeIndex, 1);
+    //           Reflect.deleteProperty(checkedRowRef.current, index);
+    //         } else {
+    //           subtotalIndexRef.current.push(index);
+    //           tr.classList.add('ant-table-row-doubleClick');
+    //           checkedRowRef.current[index] = record;
+    //         }
+    //         // 将索引排序好 按相邻规则分段
+    //         const sliceArr = parseSliceData(
+    //           subtotalIndexRef.current,
+    //           checkedRowRef.current
+    //         );
+    //         // 按切片数据 插入到表格中
+    //         appendSubtotalTr(tr, sliceArr, getColumnData);
+    //       },
+    //       ...resetResult,
+    //     };
+    //   },
+    //   // eslint-disable-next-line react-hooks/exhaustive-deps
+    //   [onRow, getColumnData]
+    // );
+    // // 数据更新时，做一下清空操作
+    // useEffect(() => {
+    //   const { tableBody, resultTr } = getCurrentTable();
+    //   deleteSubtotalTr(tableBody);
+    //   deleteSubtotalClassNameTr(resultTr);
+    //   checkedRowRef.current = {};
+    //   subtotalIndexRef.current = [];
+    //   // eslint-disable-next-line react-hooks/exhaustive-deps
+    // }, [sortDataSource, expandableDataSource]);
     /**
      * @description 切换行位置
      */
     var moveRowHandle = useCallback(function (dragIndex, hoverIndex) {
         var innerDragIndex = getInnerIndex(currentPage, dragIndex);
         var innerHoverIndex = getInnerIndex(currentPage, hoverIndex);
-        onMoveRow && onMoveRow(innerDragIndex, innerHoverIndex);
+        if (innerDragIndex === innerHoverIndex) {
+            return;
+        }
+        unstable_batchedUpdates(function () {
+            onMoveRow && onMoveRow(innerDragIndex, innerHoverIndex);
+        });
         // if (dataSource) {
         // const dragRow = dataSource[dragIndex];
         // const newDataSource = update(dataSource, {
@@ -291,11 +525,15 @@ function Table(props) {
         // });
         // onMoveRow && onMoveRow(newDataSource);
         // }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onMoveRow]);
+    }, [currentPage, onMoveRow]);
+    var onRowHandle = useCallback(function (record, index) {
+        return ({
+            index: index,
+            moverow: moveRowHandle,
+        });
+    }, [moveRowHandle]);
     /** 伸缩列 */
-    var handleResize = function (index) {
+    var handleResize = useCallback(function (index) {
         return function (_, _a) {
             var size = _a.size;
             var _newColumns = __spreadArray([], (newColumns || []));
@@ -314,7 +552,8 @@ function Table(props) {
             }
             var catchColumns = __spreadArray(__spreadArray(__spreadArray([], leftArr), dynamicColumns), rightArr).map(function (item) {
                 var column = _newColumns.find(function (column) {
-                    return column.dataIndex === item.dataIndex || column.key === item.key;
+                    return (column.dataIndex && column.dataIndex === item.dataIndex) ||
+                        (column.key && column.key === item.key);
                 });
                 if (item.dataIndex || item.key) {
                     return {
@@ -322,29 +561,34 @@ function Table(props) {
                         key: item.key,
                         hideColumn: item.hideColumn,
                         width: column && column.width ? column.width : item.width,
+                        fixed: item.fixed,
                     };
                 }
                 return __assign({}, item);
             });
             if (showColumnDynamicKey) {
-                // let catchColumnsStr = '{}';
-                // try {
-                //   catchColumnsStr = JSON.stringify(catchColumns);
-                // } catch (err) {
-                //   console.log(err);
-                // }
-                // localStorage.setItem(showColumnDynamicKey, catchColumnsStr);
                 setDynamicKey(showColumnDynamicKey, catchColumns);
+                refreshColumnsHandle();
+            }
+            else {
+                refreshColumnsHandle(catchColumns);
             }
-            setNewColumns(_newColumns);
         };
-    };
-    var mergeColumns = isResizableColumn
-        ? (newColumns || []).map(function (col, index) { return (__assign(__assign({}, col), { onHeaderCell: function (column) { return ({
-                width: column.width,
-                onResize: handleResize(index),
-            }); } })); })
-        : newColumns;
+    }, [
+        _columns,
+        dynamicColumns,
+        newColumns,
+        refreshColumnsHandle,
+        showColumnDynamicKey,
+    ]);
+    var mergeColumns = useMemo(function () {
+        return isResizableColumn
+            ? (newColumns || []).map(function (col, index) { return (__assign(__assign({}, col), { onHeaderCell: function (column) { return ({
+                    width: column.width,
+                    onResize: handleResize(index),
+                }); } })); })
+            : newColumns;
+    }, [handleResize, isResizableColumn, newColumns]);
     if (isResizableColumn) {
         components.header = {
             cell: TableResizableTitle,
@@ -353,42 +597,6 @@ function Table(props) {
     /**
      * 表格暴露方法给外部使用
      */
-    var tableRef = useRef();
-    function getCurrentTable() {
-        var _a;
-        // 获取表格元素
-        var tableContent = domFind(tableRef.current, '.ant-table-content');
-        if (!tableContent) {
-            tableContent = domFind(tableRef.current, '.ant-table-container');
-        }
-        var tableBody = domFind(tableContent, '.ant-table-tbody');
-        var tr = tableBody === null || tableBody === void 0 ? void 0 : tableBody.children;
-        var arrTr = Array.prototype.slice.call(tr);
-        var resultTr = ((_a = arrTr === null || arrTr === void 0 ? void 0 : arrTr.filter) === null || _a === void 0 ? void 0 : _a.call(arrTr, function (item) { return item.className.includes('ant-table-row'); })) || [];
-        return { tableBody: tableBody, resultTr: resultTr };
-    }
-    function clearErrorClass(index) {
-        try {
-            var resultTr = getCurrentTable().resultTr;
-            if (typeof index === 'number') {
-                var tds = resultTr[index].querySelectorAll('td');
-                for (var i = 0; i < tds.length; i++) {
-                    tds[i].classList.remove(ERROR_TD_CLASSNAME);
-                }
-            }
-            else {
-                for (var i = 0; i < resultTr.length; i++) {
-                    var tds = resultTr[i].querySelectorAll('td');
-                    for (var j = 0; j < tds.length; j++) {
-                        tds[j].classList.remove(ERROR_TD_CLASSNAME);
-                    }
-                }
-            }
-        }
-        catch (err) {
-            console.log(err);
-        }
-    }
     useImperativeHandle(tableHandleRef, function () { return ({
         /** 错误提示 */
         validate: function () { return __awaiter(_this, void 0, void 0, function () {
@@ -411,6 +619,27 @@ function Table(props) {
                 }
             });
         }); },
+        /**自定义错误提示数据 */
+        customizeDataValidate: function (isDataItemValidate) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        clearErrorClass();
+                        return [4 /*yield*/, tableValidate(dataSource, mergeColumns, {
+                                getCurrentTable: getCurrentTable,
+                                rowSelection: props.rowSelection,
+                                expandable: props.expandable,
+                                tableName: tableName,
+                                showInnerPagination: showInnerPagination,
+                                setCurrent: setCurrent,
+                                pageSize: pageSize,
+                            }, isDataItemValidate)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); },
         /** 获取当前表格 */
         getCurrentTable: function () {
             return getCurrentTable();
@@ -428,6 +657,26 @@ function Table(props) {
             }
             return index;
         },
+        /** 获取自定义列配置当前配置 */
+        getColumns: function () {
+            var columns = [];
+            mergeColumns.forEach(function (column) {
+                if (column.dataIndex) {
+                    columns.push({
+                        dataIndex: column.dataIndex || column.key,
+                    });
+                }
+            });
+            return columns;
+        },
+        /** 虚拟滚动 滚动到顶部方法 */
+        scrollTo: function (obj) {
+            scrollTo(obj);
+        },
+        /** 获取动态列配置信息 */
+        getStorage: function () {
+            return getStorage(showColumnDynamicKey);
+        },
     }); });
     var tableResizableTitle = useMemo(function () {
         return {
@@ -436,6 +685,115 @@ function Table(props) {
             },
         };
     }, []);
+    // 表格合计
+    var onSummaryHandle = useCallback(function (pageData) {
+        var _a;
+        var _b = rowSelectionDataSource.current || {}, isChange = _b.isChange, selectedRowKeys = _b.selectedRowKeys, selectedRows = _b.selectedRows;
+        var rowKey = restProps.rowKey;
+        var resultDataSoure = typeof rowKey === 'string' && Array.isArray(selectedRowKeys)
+            ? pageData.filter(function (item) {
+                return selectedRowKeys.find(function (key) { return item[rowKey] === key; });
+            })
+            : selectedRows;
+        var summaryData = getSummaryData(summaryConfig, isChange && Array.isArray(resultDataSoure) && resultDataSoure.length > 0
+            ? resultDataSoure
+            : pageData, newColumns, {
+            hasRowSelection: props.rowSelection ? true : false,
+            hasExpandable: (props === null || props === void 0 ? void 0 : props.expandable) && ((_a = props === null || props === void 0 ? void 0 : props.expandable) === null || _a === void 0 ? void 0 : _a.expandedRowRender)
+                ? true
+                : false,
+        });
+        return (React.createElement(AntTable.Summary, { fixed: summaryFixed ? summaryFixed : virtualTableKey ? true : false }, summaryData.map(function (summary) {
+            var title = summary.title, key = summary.key, titleIndex = summary.titleIndex, list = summary.list, columnList = summary.columnList, onClickHandle = summary.onClickHandle;
+            return (React.createElement(AntTable.Summary.Row, { key: key }, Array.isArray(list) &&
+                list.map(function (item, index) {
+                    var data = {
+                        index: index,
+                        column: Array.isArray(columnList)
+                            ? columnList[index]
+                            : null,
+                        num: item,
+                    };
+                    if (titleIndex === index) {
+                        return (React.createElement(AntTable.Summary.Cell, { key: index, index: index }, onClickHandle ? (React.createElement("div", { onClick: function () { return onClickHandle === null || onClickHandle === void 0 ? void 0 : onClickHandle(data); } }, title)) : (title)));
+                    }
+                    else {
+                        return (React.createElement(AntTable.Summary.Cell, { key: index, index: index },
+                            React.createElement("div", { style: {
+                                    color: '#333',
+                                }, onClick: function () {
+                                    return onClickHandle && (onClickHandle === null || onClickHandle === void 0 ? void 0 : onClickHandle(data));
+                                } }, item)));
+                    }
+                })));
+        })));
+    }, [
+        newColumns,
+        props === null || props === void 0 ? void 0 : props.expandable,
+        props === null || props === void 0 ? void 0 : props.rowSelection,
+        restProps === null || restProps === void 0 ? void 0 : restProps.rowKey,
+        summaryConfig,
+        summaryFixed,
+        virtualTableKey,
+    ]);
+    // 多选
+    var rowSelectionObj = useMemo(function () { return (__assign(__assign({}, rowSelection), { onChange: function (selectedRowKeys, selectedRows) {
+            rowSelectionDataSource.current = {
+                selectedRows: selectedRows,
+                selectedRowKeys: selectedRowKeys,
+                isChange: true,
+            };
+            (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.onChange) &&
+                rowSelection.onChange(selectedRowKeys, selectedRows);
+        } })); }, [rowSelection]);
+    // 虚拟滚动选项
+    var vComponents = useMemo(function () {
+        if (virtualTableKey) {
+            // 使用VList 即可有虚拟列表的效果
+            return VList({
+                vid: virtualTableKey,
+                height: myScroll.y ? myScroll.y : 200,
+                resetTopWhenDataChange: false,
+            });
+        }
+        else {
+            return null;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [virtualTableKey]);
+    var tableComponents = useMemo(function () {
+        var _a, _b;
+        var result = onMoveRow || onEditableSave
+            ? components
+            : isResizableColumn
+                ? tableResizableTitle
+                : undefined;
+        if (onMoveRow && result.body) {
+            result.body.row = TableEnhanceRow;
+        }
+        if (vComponents) {
+            // 需要支持编辑
+            if ((_a = result === null || result === void 0 ? void 0 : result.body) === null || _a === void 0 ? void 0 : _a.cell) {
+                vComponents.body.cell = result.body.cell;
+            }
+            // 需要支持拖拽
+            if ((_b = result === null || result === void 0 ? void 0 : result.body) === null || _b === void 0 ? void 0 : _b.row) {
+                var row_1 = vComponents.body.row;
+                vComponents.body.row = function (props) {
+                    return React.createElement(TableEnhanceRow, __assign({}, props, { vRow: row_1 }));
+                };
+            }
+            return __assign(__assign({}, result), vComponents);
+        }
+        return result;
+    }, [
+        isResizableColumn,
+        onEditableSave,
+        onMoveRow,
+        tableResizableTitle,
+        vComponents,
+    ]);
+    var tipRef = useSelectSubtotal(tableRef, { onMoveRow: onMoveRow, onEditableSave: onEditableSave }).tipRef;
     return (React.createElement("div", { style: isFlex
             ? { position: 'relative', overflow: 'hidden', flex: 1 }
             : { position: 'relative', overflow: 'hidden' }, ref: tableRef },
@@ -444,69 +802,13 @@ function Table(props) {
                     ? pagination
                         ? pagination
                         : paginationConfig
-                    : pagination, scroll: myScroll, columns: mergeColumns, dataSource: dataSource, components: onMoveRow || onEditableSave
-                    ? components
-                    : isResizableColumn
-                        ? tableResizableTitle
-                        : undefined, onRow: onMoveRow
-                    ? function (record, index) {
-                        return ({
-                            index: index,
-                            moverow: moveRowHandle,
-                        });
-                    }
-                    : undefined, summary: summaryConfig
-                    ? function (pageData) {
-                        var _a = rowSelectionDataSource.current || {}, isChange = _a.isChange, selectedRowKeys = _a.selectedRowKeys, selectedRows = _a.selectedRows;
-                        var rowKey = restProps.rowKey;
-                        var resultDataSoure = typeof rowKey === 'string' && Array.isArray(selectedRowKeys)
-                            ? pageData.filter(function (item) {
-                                return selectedRowKeys.find(function (key) { return item[rowKey] === key; });
-                            })
-                            : selectedRows;
-                        var summaryData = getSummaryData(summaryConfig, isChange &&
-                            Array.isArray(resultDataSoure) &&
-                            resultDataSoure.length > 0
-                            ? resultDataSoure
-                            : pageData, newColumns, {
-                            hasRowSelection: props.rowSelection ? true : false,
-                            hasExpandable: props.expandable ? true : false,
-                        });
-                        return (React.createElement(AntTable.Summary, { fixed: summaryFixed }, summaryData.map(function (summary) {
-                            var title = summary.title, key = summary.key, titleIndex = summary.titleIndex, list = summary.list, columnList = summary.columnList, onClickHandle = summary.onClickHandle;
-                            return (React.createElement(AntTable.Summary.Row, { key: key }, Array.isArray(list) &&
-                                list.map(function (item, index) {
-                                    var data = {
-                                        index: index,
-                                        column: Array.isArray(columnList)
-                                            ? columnList[index]
-                                            : null,
-                                        num: item,
-                                    };
-                                    if (titleIndex === index) {
-                                        return (React.createElement(AntTable.Summary.Cell, { key: index, index: index }, onClickHandle ? (React.createElement("div", { onClick: function () { return onClickHandle === null || onClickHandle === void 0 ? void 0 : onClickHandle(data); } }, title)) : (title)));
-                                    }
-                                    else {
-                                        return (React.createElement(AntTable.Summary.Cell, { key: index, index: index },
-                                            React.createElement("div", { style: {
-                                                    color: '#333',
-                                                }, onClick: function () {
-                                                    return onClickHandle && (onClickHandle === null || onClickHandle === void 0 ? void 0 : onClickHandle(data));
-                                                } }, item)));
-                                    }
-                                })));
-                        })));
-                    }
-                    : summary, rowSelection: rowSelection
-                    ? __assign(__assign({}, rowSelection), { onChange: function (selectedRowKeys, selectedRows) {
-                            rowSelectionDataSource.current = {
-                                selectedRows: selectedRows,
-                                selectedRowKeys: selectedRowKeys,
-                                isChange: true,
-                            };
-                            rowSelection.onChange &&
-                                rowSelection.onChange(selectedRowKeys, selectedRows);
-                        } }) : rowSelection }, restProps)),
-            showColumnDynamic && (React.createElement(TableDynamic, { visible: dynamicVisible, onClose: hideDynamicHandle, onSave: saveDynamicHandle, onReset: resetDynamicHandle, columns: dynamicColumns })))));
+                    : pagination, scroll: myScroll, columns: mergeColumns, dataSource: sortDataSource ? sortDataSource : expandableDataSource, components: tableComponents, onRow: onMoveRow ? onRowHandle : undefined, 
+                // onRow={onMoveRow ? onRowHandle : onRowFn}
+                summary: summaryConfig ? onSummaryHandle : summary, rowSelection: rowSelection ? rowSelectionObj : rowSelection }, restProps)),
+            showColumnDynamic && dynamicVisible && (React.createElement(TableDynamic, { visible: dynamicVisible, onClose: hideDynamicHandle, onSave: saveDynamicHandle, onReset: resetDynamicHandle, columns: dynamicColumns }))),
+        React.createElement("div", { ref: tipRef, className: "table-subtotal--tip" })));
 }
+// export default memo(Table, (prevProps, nextProps) => {
+//   return shallowEqual(prevProps, nextProps);
+// });
 export default memo(Table);