@qn-pandora/pandora-component 5.1.1 → 5.1.2

package/lib/components/Table/index.js

@@ -48,6 +48,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
@@ -86,7 +89,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ETableSettingType = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var mobx_react_1 = require("mobx-react");
@@ -95,7 +97,6 @@ var lodash_1 = require("lodash");
 var antd_1 = require("antd");
 var config_provider_1 = require("antd/es/config-provider");
 var app_sdk_1 = require("@qn-pandora/app-sdk");
-var pandora_component_icons_1 = require("@qn-pandora/pandora-component-icons");
 var bind_1 = __importDefault(require("../../utils/bind"));
 var language_1 = require("../../utils/language");
 var style_1 = require("../../constants/style");
@@ -103,11 +104,15 @@ var type_1 = require("../../constants/language/table/type");
 var ColumnTag_1 = require("./ColumnTag/ColumnTag");
 var ColumnSetting_1 = __importDefault(require("./ColumnSetting"));
 var ResizableTitle_1 = __importDefault(require("./ResizableTitle"));
-var ETableSettingType;
-(function (ETableSettingType) {
-    ETableSettingType["SORT"] = "sort";
-    ETableSettingType["RESIZE"] = "resize";
-})(ETableSettingType = exports.ETableSettingType || (exports.ETableSettingType = {}));
+var EmptyText_1 = __importDefault(require("./EmptyText"));
+var util_1 = require("./util");
+var type_2 = require("./type");
+__exportStar(require("./type"), exports);
+/**
+ * 表格提供自定义多选, 通过 rowSelection对象的selectedRowKeys和onChange来控制多选的状态
+ * 需要注意的是, 当在外部进行增删改或者外部需要控制选择状态时, 例如删除之后清空全选状态, 需要受控
+ * 传入selectedRowKeys值。
+ */
 /**
  * pandora2.0风格的表格
  */
@@ -136,30 +141,34 @@ var Table = /** @class */ (function (_super) {
                 (lastRowSelection &&
                     !lodash_1.isEqual(lastRowSelection.selectedRowKeys, rowSelection.selectedRowKeys)))) {
             var selectedRowKeys_1 = rowSelection.selectedRowKeys || [];
-            var dataSource = nextProps.dataSource;
-            var selectedRowKeysOfCurrentPage_1 = (dataSource || [])
-                .map(this.getRowKey)
-                .filter(function (item) { return selectedRowKeys_1.includes(item); });
-            var selectedRowsOfCurrentPage = (dataSource || []).filter(function (item, index) {
-                return selectedRowKeysOfCurrentPage_1.indexOf(_this.getRowKey(item, index)) > -1;
+            var _a = nextProps.dataSource, dataSource = _a === void 0 ? [] : _a;
+            var selectedRowKeysOfCurrentPage_1 = [];
+            var selectedRowsOfCurrentPage_1 = [];
+            dataSource.forEach(function (item, index) {
+                var rowKey = _this.getRowKey(item, index);
+                if (selectedRowKeys_1.includes(rowKey)) {
+                    selectedRowKeysOfCurrentPage_1.push(rowKey);
+                    selectedRowsOfCurrentPage_1.push(item);
+                }
             });
             // 数据源变化时重新设置多选框是否为全选状态或部分选中状态
-            this.setCheckboxStatus(selectedRowKeysOfCurrentPage_1, nextProps.dataSource);
+            this.setCheckboxStatus(selectedRowsOfCurrentPage_1, lodash_1.size(nextProps.dataSource));
             // 更新外部组件rowSelection状态
             // this.onRowSelectionChange(selectedRowKeys, selectedRowsOfCurrentPage)
             if (rowSelection && rowSelection.onChange) {
                 rowSelection.onChange(lodash_1.union(selectedRowKeysOfCurrentPage_1, selectedRowKeys_1), selectedRows && rowKey
-                    ? lodash_1.unionBy(selectedRowsOfCurrentPage, selectedRows, rowKey)
-                    : selectedRowsOfCurrentPage, { type: 'single' });
+                    ? lodash_1.unionBy(selectedRowsOfCurrentPage_1, selectedRows, rowKey)
+                    : selectedRowsOfCurrentPage_1, { type: 'single' });
             }
         }
+        // 更新隐藏的key
         if (!lodash_1.isEqual(nextProps.hiddenColumns, this.props.hiddenColumns)) {
             this.setHiddenColumn(nextProps.hiddenColumns);
         }
         if (nextProps.columns !== this.props.columns) {
             if ((nextProps.scroll && nextProps.draggable === true) ||
-                nextProps.draggable === ETableSettingType.RESIZE) {
-                this.updateSettingConfig(nextProps.columns);
+                nextProps.draggable === type_2.ETableSettingType.RESIZE) {
+                this.updateSettingFields(nextProps.columns, this.settingFields, nextProps.hiddenColumns || []);
                 this.setColumns(this.getResizeColumns(nextProps.columns));
             }
             else {
@@ -174,8 +183,7 @@ var Table = /** @class */ (function (_super) {
     };
     Object.defineProperty(Table.prototype, "selectedRowKeys", {
         get: function () {
-            var rowSelection = this.props.rowSelection;
-            return (rowSelection && rowSelection.selectedRowKeys) || [];
+            return lodash_1.get(this.props.rowSelection, 'selectedRowKeys', []);
         },
         enumerable: false,
         configurable: true
@@ -211,161 +219,79 @@ var Table = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Table.prototype, "emptyTextComp", {
-        get: function () {
-            var emptyText = this.props.emptyText;
-            if (!emptyText) {
-                return (React.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty" },
-                    React.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty-icon" },
-                        React.createElement(pandora_component_icons_1.EmptyIcon, null)),
-                    React.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty-text" }, language_1.formatString(type_1.TableLocale.empty, this.context.locale))));
-            }
-            if (typeof emptyText === 'string' || typeof emptyText === 'number') {
-                return (React.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty" },
-                    React.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty-icon" },
-                        React.createElement(pandora_component_icons_1.EmptyIcon, null)),
-                    React.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty-text" }, emptyText)));
-            }
-            return emptyText;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(Table.prototype, "columnsSettingOptions", {
         // 列设置 options
         get: function () {
             var options = [];
             var _a = this.props.columns, columns = _a === void 0 ? [] : _a;
-            columns.forEach(function (col) {
-                if (col.key && col.key.toString().length > 0) {
+            // sortKeys 来保证数据的准确性
+            this.sortConfig.sortKeys.forEach(function (key) {
+                var target = columns.find(function (col) { var _a; return ((_a = col.key) === null || _a === void 0 ? void 0 : _a.toString()) === key; });
+                if (target && target.key) {
                     options.push({
-                        label: col.colTitle || col.title,
-                        value: col.key.toString()
+                        label: target.colTitle || target.title,
+                        value: target.key.toString()
                     });
                 }
             });
-            // sortKeys 来保证数据的准确性
-            return this.sortConfig.sortKeys
-                .map(function (key) { return options.find(function (option) { return option.value === key; }); })
-                .filter(function (f) { return !!f; });
+            return options;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(Table.prototype, "columnKeys", {
         get: function () {
-            var _a = this.props.columns, columns = _a === void 0 ? [] : _a;
-            var allKeys = [];
-            var unconfigableKeys = [];
-            var resetKeys = [];
-            columns.forEach(function (col) {
-                if (col.key) {
-                    // 不可配置，或者列固定的列，（在这里统称不可配置的列）
-                    if (col.configurable === false || col.fixed) {
-                        unconfigableKeys.push(col.key.toString());
-                    }
-                    else {
-                        resetKeys.push(col.key.toString());
-                    }
-                    allKeys.push(col.key.toString());
-                }
-            });
-            return {
-                allKeys: allKeys,
-                unconfigableKeys: unconfigableKeys,
-                resetKeys: resetKeys
-            };
+            return util_1.getColumnKeys(this.props.columns || []);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(Table.prototype, "resizable", {
         get: function () {
-            var _a, _b;
-            return ((((_a = this.props) === null || _a === void 0 ? void 0 : _a.draggable) === true ||
-                ((_b = this.props) === null || _b === void 0 ? void 0 : _b.draggable) === ETableSettingType.RESIZE) &&
-                this.props.scroll);
+            var _a = this.props, draggable = _a.draggable, scroll = _a.scroll;
+            return !!((draggable === true || draggable === type_2.ETableSettingType.RESIZE) &&
+                scroll);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(Table.prototype, "sortable", {
         get: function () {
-            var _a, _b;
-            return (((_a = this.props) === null || _a === void 0 ? void 0 : _a.draggable) === true ||
-                ((_b = this.props) === null || _b === void 0 ? void 0 : _b.draggable) === ETableSettingType.SORT);
+            var draggable = this.props.draggable;
+            return draggable === true || draggable === type_2.ETableSettingType.SORT;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(Table.prototype, "showSetting", {
+        // 是否支持列设置按钮
         get: function () {
-            // showColumnSetting 需要同 draggable 配合使用, 如果设置不显示列设置按钮， 则不需要显示，其他时候只有 draggable = sort 或者 draggable === true时才显示，
+            // showColumnSetting 需要同 draggable 配合使用
+            // 1、showColumnSetting = false, 不显示
+            // 2、draggable = sort 或者 draggable === true时才显示
+            // 3、draggable === resize 且 showColumnSetting = true时才显示（resize模式下必须显示设置showColumnSetting=true，才会显示列设置按钮）
             var _a = this.props, showColumnSetting = _a.showColumnSetting, draggable = _a.draggable;
             if (showColumnSetting === false)
                 return false;
-            if (draggable === ETableSettingType.SORT || draggable === true)
+            if (draggable === type_2.ETableSettingType.SORT || draggable === true)
                 return true;
+            if (draggable === type_2.ETableSettingType.RESIZE && showColumnSetting === true) {
+                return true;
+            }
             return false;
         },
         enumerable: false,
         configurable: true
     });
-    Table.prototype.updateSettingConfig = function (columns) {
-        this.updateSettingFields(columns, this.settingFields);
-    };
     Table.prototype.initSettingConfig = function () {
-        var saveSettingKey = this.props.saveSettingKey;
-        var settingFields = [];
-        if (saveSettingKey) {
-            try {
-                var settingStr = localStorage.getItem(saveSettingKey);
-                var settingConfig = !!settingStr && JSON.parse(settingStr);
-                if (lodash_1.isArray(settingConfig)) {
-                    settingFields = settingConfig;
-                }
-            }
-            catch (error) {
-                throw new Error("parse " + saveSettingKey + " error: " + error + ", please check the data format");
-            }
-        }
-        this.updateSettingFields(this.props.columns, settingFields);
+        var _a = this.props, saveSettingKey = _a.saveSettingKey, columns = _a.columns, _b = _a.hiddenColumns, hiddenColumns = _b === void 0 ? [] : _b;
+        var settingFields = util_1.getLocalSettings(saveSettingKey);
+        this.updateSettingFields(columns, settingFields, hiddenColumns);
     };
-    Table.prototype.updateSettingFields = function (columns, settingFields) {
-        var _a = this.props.hiddenColumns, hiddenColumns = _a === void 0 ? [] : _a;
-        var sortableColumns = [];
-        var hideKeys = [];
-        // 已配置的列和实际的对不上
-        // 可能新增或者删除列的情况
-        // 已配置列
-        // 旧类型数据为对象类型，未配置
-        settingFields.map(function (field) {
-            var find = columns.find(function (column) { var _a; return ((_a = column) === null || _a === void 0 ? void 0 : _a.dataIndex) === field.field; });
-            if (find) {
-                if (field.hide) {
-                    hideKeys.push(field.field);
-                }
-                else {
-                    sortableColumns.push(field);
-                }
-            }
-        });
-        // 未配置过的列
-        columns
-            .filter(function (f) { return !settingFields.find(function (field) { return field.field === f.dataIndex; }); })
-            .map(function (column) {
-            if (column.dataIndex) {
-                // 不是列固定，并且可配置，才可以展示拖拽
-                if (!(column.fixed || column.configurable === false)) {
-                    sortableColumns.push({
-                        field: column.dataIndex.toString(),
-                        fixed: column.fixed
-                    });
-                }
-            }
-        });
+    Table.prototype.updateSettingFields = function (columns, settingFields, hiddenColumns) {
+        var _a = util_1.getSortAndHiddenKeys(columns, settingFields, hiddenColumns), sortableColumns = _a.sortableColumns, resultHiddenColumns = _a.hiddenColumns;
         this.setSortKeys(sortableColumns.map(function (t) { return t.field; }));
-        this.setHiddenColumn(__spread(new Set(__spread(hiddenColumns, hideKeys))));
+        this.setHiddenColumn(resultHiddenColumns);
         this.setSettingFields(sortableColumns);
     };
     // 隐藏key
@@ -377,75 +303,46 @@ var Table = /** @class */ (function (_super) {
             return app_sdk_1.toaster.warning(language_1.formatString(type_1.TableLocale.hide_column_tooltip, this.context.locale));
         }
         var newSettingFields = this.settingFields.map(function (field) {
-            if (lodash_1.includes(keys, field.field)) {
-                return __assign(__assign({}, field), { hide: true });
-            }
-            return __assign(__assign({}, field), { hide: false });
+            return __assign(__assign({}, field), { hide: lodash_1.includes(keys, field.field) });
         });
         this.setHiddenColumn(keys);
         this.setSettingFields(newSettingFields);
         (_b = (_a = this.props).onHiddenColumnsChange) === null || _b === void 0 ? void 0 : _b.call(_a, keys);
     };
-    Table.prototype.getSortedColumns = function () {
-        var hiddenColumn = this.hiddenColumn || [];
-        var fixedRightColumn = [];
-        var fixedLeftColumn = [];
-        var selectedCols = [];
-        var unconfigurableCols = [];
-        var source = this.columns || [];
-        source.forEach(function (column) {
-            if (column.fixed === 'left' || column.fixed === true) {
-                fixedLeftColumn.push(column);
-            }
-            else if (column.fixed === 'right') {
-                fixedRightColumn.push(column);
-            }
-            else if (column.configurable === false) {
-                unconfigurableCols.push(column);
-            }
-            else if (!lodash_1.includes(hiddenColumn, column.key)) {
-                selectedCols.push(column);
-            }
-        });
-        // 顺序应该是： 左固定列、不可配置列、排序列、右固定列
-        return __spread(fixedLeftColumn, unconfigurableCols, (this.sortable ? this.sortCoulmns(selectedCols) : selectedCols), fixedRightColumn);
-    };
-    // 如果支持拖拽，在屏幕宽度大于table总的列宽的时候，添加一个空白列，宽度auto.
-    // 空白列添加到右固定列的前面
-    Table.prototype.transfromColumns = function (columns, needEmptyColumn) {
-        if (!this.resizable || needEmptyColumn === false)
-            return columns;
-        var cols = __spread(columns);
-        var firstFixedRightIndex = cols.findIndex(function (item) { return lodash_1.get(item, 'fixed') === 'right'; });
-        var column = {
-            title: '',
-            dataIndex: '__empty__',
-            key: '__empty__'
-        };
-        if (firstFixedRightIndex === -1) {
-            cols.push(column);
-        }
-        else {
-            cols.splice(firstFixedRightIndex, 0, column);
-        }
-        return cols;
-    };
     Table.prototype.getColumns = function () {
+        // 注意： 如果没有传columns, 可能渲染的是table 的children ,无需在处理columns
+        /**
+         * <Table>
+         *  <Table.Column title="name" dataIndex="name"></Table.Column>
+         *  <Table.Column title="age" dataIndex="name"></Table.Column>
+         * </Table>
+         */
+        if (lodash_1.isUndefined(this.columns))
+            return this.columns;
         var _a = this.props, columnSettingOverlayClass = _a.columnSettingOverlayClass, needEmptyColumn = _a.needEmptyColumn;
-        // 如果不显示列设置按钮，直接返回columns
+        // 显示列设置按钮，默认就会开启列隐藏功能
+        // 1、看是否支持排序， 排序 + 列隐藏, 排序用 sort 函数就行（sort 函数具有列隐藏的能力）
+        // 2、看是否 resize， resize + 列隐藏  可能需要添加空白列  addEmptyColumn
+        var allCols = __spread(this.columns);
         if (!this.showSetting) {
-            return this.transfromColumns(this.columns, needEmptyColumn);
+            // 如果不显示列设置按钮, 那么排序功能不支持
+            if (this.resizable) {
+                allCols = util_1.addEmptyColumn(allCols, this.hiddenColumn, this.resizable && needEmptyColumn);
+            }
+            return allCols;
+        }
+        if (this.sortable) {
+            allCols = util_1.getSortedCoulmns(allCols, this.sortConfig.sortKeys || [], this.hiddenColumn || []);
         }
-        // 获取到列设置的options
-        var columnsSettingOptions = this.columnsSettingOptions;
-        // 列排序或者列隐藏
-        var allCols = this.getSortedColumns();
-        this.transfromColumns(allCols, needEmptyColumn);
+        if (this.resizable) {
+            allCols = util_1.addEmptyColumn(allCols, this.hiddenColumn, this.resizable && needEmptyColumn);
+        }
+        // 需要添加设置按钮
         var length = allCols.length;
         if (length > 0) {
             var title = (React.createElement("span", { className: style_1.SDK_PREFIX + "-last-column-title" },
                 React.createElement("span", { className: style_1.SDK_PREFIX + "-last-column-setting" },
-                    React.createElement(ColumnSetting_1.default, { options: columnsSettingOptions, hiddenKeys: this.hiddenColumn, onHiddenKeysChange: this.handleHideColumnsChange, onMove: this.setSortKeys, overlayClass: columnSettingOverlayClass }))));
+                    React.createElement(ColumnSetting_1.default, { options: this.columnsSettingOptions, hiddenKeys: this.hiddenColumn, onHiddenKeysChange: this.handleHideColumnsChange, onMove: this.setSortKeys, overlayClass: columnSettingOverlayClass, sortable: this.sortable }))));
             allCols.push({
                 title: title,
                 dataIndex: '__setting__',
@@ -459,14 +356,9 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.getRowKey = function (row, index) {
         var rowKey = this.props.rowKey;
         if (typeof rowKey === 'function') {
-            return rowKey(row, index);
+            return rowKey(row, index).toString();
         }
-        return rowKey ? row[rowKey] : index;
-    };
-    Table.prototype.sortCoulmns = function (columns) {
-        return this.sortConfig.sortKeys
-            .map(function (key) { return columns.find(function (column) { return column.dataIndex === key; }); })
-            .filter(function (f) { return !!f; });
+        return rowKey && typeof rowKey == 'string' ? lodash_1.get(row, rowKey) : index;
     };
     Table.prototype.setIndeterminate = function (indeterminate) {
         this.indeterminate = indeterminate;
@@ -498,18 +390,17 @@ var Table = /** @class */ (function (_super) {
         this.settingFields = columns;
     };
     // 设置全选checkout的状态
-    Table.prototype.setCheckboxStatus = function (selectedRowsOfCurrentPage, dataSource) {
+    Table.prototype.setCheckboxStatus = function (selectedRowsOfCurrentPage, dataSourceLength) {
         if (selectedRowsOfCurrentPage === void 0) { selectedRowsOfCurrentPage = []; }
-        if (dataSource === void 0) { dataSource = []; }
         this.setIndeterminate(!!selectedRowsOfCurrentPage.length &&
-            selectedRowsOfCurrentPage.length < lodash_1.size(dataSource));
+            selectedRowsOfCurrentPage.length < dataSourceLength);
         this.setCheckAll(!!selectedRowsOfCurrentPage.length &&
-            selectedRowsOfCurrentPage.length === lodash_1.size(dataSource));
+            selectedRowsOfCurrentPage.length === dataSourceLength);
     };
     Table.prototype.handleSelectionChange = function (selectedRowKeys, selectedRowsOfCurrentPage, info) {
         var dataSource = this.props.dataSource;
         // 更新CheckBox状态
-        this.setCheckboxStatus(selectedRowsOfCurrentPage, dataSource);
+        this.setCheckboxStatus(selectedRowsOfCurrentPage, lodash_1.size(dataSource));
         // 更新外部组件rowSelection状态
         this.onRowSelectionChange(selectedRowKeys, selectedRowsOfCurrentPage, info);
     };
@@ -541,9 +432,8 @@ var Table = /** @class */ (function (_super) {
         });
     };
     Table.prototype.handleBatchOptionClick = function (option) {
-        if (option.onClick) {
-            option.onClick(this.selectedRowKeys);
-        }
+        var _a;
+        (_a = option.onClick) === null || _a === void 0 ? void 0 : _a.call(option, this.selectedRowKeys);
     };
     Table.prototype.getRowClassName = function (record, index, indent) {
         var rowClassName = this.props.rowClassName;
@@ -568,87 +458,56 @@ var Table = /** @class */ (function (_super) {
         return noneSelected || disabled;
     };
     Table.prototype.handleResize = function (col, size, oldColumn) {
-        console.log('handleResize', col, size);
         var newColumns = __spread(oldColumn);
+        var sizeMap = {};
         newColumns.forEach(function (item) {
+            // 更新宽度
             if (lodash_1.get(item, 'dataIndex') === col.dataIndex) {
                 item.width = size.width;
             }
+            // 更新sizeMap
+            if (item.dataIndex && lodash_1.isNumber(item.width) && !isNaN(item.width)) {
+                sizeMap[item.dataIndex] = item.width;
+            }
         });
-        var sizeMap = {};
         var setttingFields = this.settingFields;
-        newColumns.forEach(function (element) {
-            if (element.dataIndex &&
-                lodash_1.isNumber(element.width) &&
-                !isNaN(element.width)) {
-                sizeMap[element.dataIndex] = element.width;
+        setttingFields.forEach(function (field) {
+            if (sizeMap[field.field]) {
+                field.width = sizeMap[field.field];
             }
         });
         if (this.props.onSettingChange) {
-            setttingFields.forEach(function (field) {
-                if (sizeMap[field.field]) {
-                    field.width = sizeMap[field.field];
-                }
-            });
             this.props.onSettingChange(setttingFields);
         }
         else if (this.resizable && this.props.saveSettingKey) {
-            setttingFields.forEach(function (field) {
-                if (sizeMap[field.field]) {
-                    field.width = sizeMap[field.field];
-                }
-            });
             this.setSettingFields(setttingFields);
         }
         this.setColumns(newColumns);
     };
     Table.prototype.getResizeColumns = function (columns) {
-        var _this = this;
-        var fields = this.settingFields;
-        if ((fields === null || fields === void 0 ? void 0 : fields.length) && lodash_1.isArray(fields)) {
-            columns = columns === null || columns === void 0 ? void 0 : columns.map(function (col) {
-                var _a;
-                var dataIndex = lodash_1.get(col, 'dataIndex');
-                var width = (_a = fields === null || fields === void 0 ? void 0 : fields.find(function (f) { return f.field === dataIndex; })) === null || _a === void 0 ? void 0 : _a.width;
-                return lodash_1.isNumber(width) ? __assign(__assign({}, col), { width: width }) : col;
-            });
-        }
-        var transformColumns = columns === null || columns === void 0 ? void 0 : columns.map(function (it, index) {
-            if (lodash_1.get(it, 'resizable') && _this.resizable) {
-                return __assign(__assign({}, it), { ellipsis: {
-                        showTitle: true
-                    }, onHeaderCell: function (col) {
-                        var _a;
-                        return ({
-                            width: col.width,
-                            // !传入newColumn，而不传入column是因为需要拿到有onHeaderCell的值，外面collumn的变化内部监听不到
-                            onResize: function (_, _a) {
-                                var size = _a.size;
-                                _this.handleResize(col, size, transformColumns);
-                            },
-                            isLastColumn: index === ((_a = (columns || [])) === null || _a === void 0 ? void 0 : _a.length) - 1
-                        });
-                    } });
-            }
-            return it;
-        });
-        return transformColumns;
+        return util_1.getResizeColumns(columns || [], this.settingFields, this.resizable, this.handleResize);
     };
     Table.prototype.componentDidMount = function () {
         var _a;
+        var _b = this.props, columns = _b.columns, saveSettingKey = _b.saveSettingKey, _c = _b.hiddenColumns, hiddenColumns = _c === void 0 ? [] : _c;
+        var settingFields = util_1.getLocalSettings(saveSettingKey);
         if (this.showSetting) {
-            this.initSettingConfig();
+            this.updateSettingFields(columns, settingFields, hiddenColumns);
+        }
+        else {
+            this.setSettingFields(settingFields);
         }
-        this.setColumns(this.resizable && ((_a = this.settingFields) === null || _a === void 0 ? void 0 : _a.length)
-            ? this.getResizeColumns(this.props.columns)
-            : this.props.columns);
+        var transformColumns = this.resizable && ((_a = this.settingFields) === null || _a === void 0 ? void 0 : _a.length)
+            ? this.getResizeColumns(columns)
+            : columns;
+        this.setColumns(transformColumns);
     };
     Table.prototype.render = function () {
         var _a, _b;
         var _this = this;
         var _c = this.props, className = _c.className, batchOptions = _c.batchOptions, scroll = _c.scroll, locale = _c.locale, emptyText = _c.emptyText, columns = _c.columns, components = _c.components, draggable = _c.draggable, restProps = __rest(_c, ["className", "batchOptions", "scroll", "locale", "emptyText", "columns", "components", "draggable"]);
         return (React.createElement("div", null,
-            React.createElement(antd_1.Table, __assign({ scroll: scroll, locale: __assign({ emptyText: this.emptyTextComp }, locale), columns: this.getColumns() }, restProps, { className: classnames_1.default(style_1.SDK_PREFIX + "-table-wrapper", (_a = {}, _a[style_1.SDK_PREFIX + "-table-scrollX"] = lodash_1.get(scroll, 'x'), _a), (_b = {}, _b[style_1.SDK_PREFIX + "-table-scrollY"] = lodash_1.get(scroll, 'y'), _b), className), 
+            React.createElement(antd_1.Table, __assign({ scroll: scroll, locale: __assign({ emptyText: (React.createElement(EmptyText_1.default, { locale: this.context.locale, emptyText: emptyText })) }, locale), columns: this.getColumns() }, restProps, { className: classnames_1.default(style_1.SDK_PREFIX + "-table-wrapper", (_a = {}, _a[style_1.SDK_PREFIX + "-table-scrollX"] = lodash_1.get(scroll, 'x'), _a), (_b = {}, _b[style_1.SDK_PREFIX + "-table-scrollY"] = lodash_1.get(scroll, 'y'), _b), className), 
                 // 涉及到权限
                 // getCheckboxProps只能放到tableBatchWrapper里，因为selectedRowKeys在那个组件计算
                 rowSelection: batchOptions && this.props.rowSelection
@@ -694,7 +553,7 @@ var Table = /** @class */ (function (_super) {
     ], Table.prototype, "hiddenColumn", void 0);
     __decorate([
         mobx_1.observable.ref,
-        __metadata("design:type", Array)
+        __metadata("design:type", Object)
     ], Table.prototype, "columns", void 0);
     __decorate([
         mobx_1.observable.ref,
@@ -706,7 +565,7 @@ var Table = /** @class */ (function (_super) {
     ], Table.prototype, "settingFields", void 0);
     __decorate([
         mobx_1.computed,
-        __metadata("design:type", Object),
+        __metadata("design:type", Array),
         __metadata("design:paramtypes", [])
     ], Table.prototype, "selectedRowKeys", null);
     __decorate([
@@ -724,11 +583,6 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
     ], Table.prototype, "keysOfCurrentPage", null);
-    __decorate([
-        mobx_1.computed,
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [])
-    ], Table.prototype, "emptyTextComp", null);
     __decorate([
         mobx_1.computed,
         __metadata("design:type", Object),
@@ -754,13 +608,6 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
     ], Table.prototype, "showSetting", null);
-    __decorate([
-        bind_1.default,
-        mobx_1.action,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array]),
-        __metadata("design:returntype", void 0)
-    ], Table.prototype, "updateSettingConfig", null);
     __decorate([
         bind_1.default,
         mobx_1.action,
@@ -772,7 +619,7 @@ var Table = /** @class */ (function (_super) {
         bind_1.default,
         mobx_1.action,
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array, Array]),
+        __metadata("design:paramtypes", [Array, Array, Array]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "updateSettingFields", null);
     __decorate([
@@ -781,18 +628,6 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Array]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "handleHideColumnsChange", null);
-    __decorate([
-        bind_1.default,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], Table.prototype, "getSortedColumns", null);
-    __decorate([
-        bind_1.default,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array, Boolean]),
-        __metadata("design:returntype", void 0)
-    ], Table.prototype, "transfromColumns", null);
     __decorate([
         bind_1.default,
         __metadata("design:type", Function),
@@ -805,12 +640,6 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object, Number]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "getRowKey", null);
-    __decorate([
-        bind_1.default,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array]),
-        __metadata("design:returntype", void 0)
-    ], Table.prototype, "sortCoulmns", null);
     __decorate([
         bind_1.default,
         mobx_1.action,
@@ -836,7 +665,7 @@ var Table = /** @class */ (function (_super) {
         bind_1.default,
         mobx_1.action,
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array]),
+        __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "setColumns", null);
     __decorate([
@@ -856,7 +685,7 @@ var Table = /** @class */ (function (_super) {
     __decorate([
         bind_1.default,
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array, Array]),
+        __metadata("design:paramtypes", [Array, Number]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "setCheckboxStatus", null);
     __decorate([