amis 1.3.5-beta.7 → 1.4.2-beta.11

package/lib/renderers/Table/index.js

@@ -7,10 +7,11 @@ var react_dom_1 = require("react-dom");
 var factory_1 = require("../../factory");
 var forEach_1 = (0, tslib_1.__importDefault)(require("lodash/forEach"));
 var tpl_1 = require("../../utils/tpl");
-var DropDownButton_1 = (0, tslib_1.__importDefault)(require("../DropDownButton"));
+require("./ColumnToggler");
 var Checkbox_1 = (0, tslib_1.__importDefault)(require("../../components/Checkbox"));
 var Button_1 = (0, tslib_1.__importDefault)(require("../../components/Button"));
 var table_1 = require("../../store/table");
+var file_saver_1 = require("file-saver");
 var helper_1 = require("../../utils/helper");
 var tpl_builtin_1 = require("../../utils/tpl-builtin");
 var debounce_1 = (0, tslib_1.__importDefault)(require("lodash/debounce"));
@@ -26,6 +27,9 @@ var TableContent_1 = require("./TableContent");
 var image_1 = require("../../utils/image");
 var TableBody_1 = require("./TableBody");
 var mobx_state_tree_1 = require("mobx-state-tree");
+var ColumnToggler_1 = (0, tslib_1.__importDefault)(require("./ColumnToggler"));
+var offset_1 = (0, tslib_1.__importDefault)(require("../../utils/offset"));
+var dom_1 = require("../../utils/dom");
 /**
  * 将 url 转成绝对地址
  */
@@ -75,6 +79,9 @@ var Table = /** @class */ (function (_super) {
         _this.handleMouseMove = _this.handleMouseMove.bind(_this);
         _this.handleMouseLeave = _this.handleMouseLeave.bind(_this);
         _this.subFormRef = _this.subFormRef.bind(_this);
+        _this.handleColumnToggle = _this.handleColumnToggle.bind(_this);
+        _this.renderAutoFilterForm = _this.renderAutoFilterForm.bind(_this);
+        _this.updateAutoFillHeight = _this.updateAutoFillHeight.bind(_this);
         var store = props.store, columns = props.columns, selectable = props.selectable, columnsTogglable = props.columnsTogglable, draggable = props.draggable, orderBy = props.orderBy, orderDir = props.orderDir, multiple = props.multiple, footable = props.footable, primaryField = props.primaryField, itemCheckableOn = props.itemCheckableOn, itemDraggableOn = props.itemDraggableOn, hideCheckToggler = props.hideCheckToggler, combineFromIndex = props.combineFromIndex, expandConfig = props.expandConfig, formItem = props.formItem, keepItemSelectionOnPageChange = props.keepItemSelectionOnPageChange, maxKeepItemSelectionLength = props.maxKeepItemSelectionLength;
         var combineNum = props.combineNum;
         if (typeof combineNum === 'string') {
@@ -145,6 +152,54 @@ var Table = /** @class */ (function (_super) {
         this.affixDetect();
         parent.addEventListener('scroll', this.affixDetect);
         window.addEventListener('resize', this.affixDetect);
+        this.updateAutoFillHeight();
+        window.addEventListener('resize', this.updateAutoFillHeight);
+    };
+    /**
+     * 自动设置表格高度占满界面剩余区域
+     * 用 css 实现有点麻烦，要改很多结构，所以先用 dom hack 了，避免对之前的功能有影响
+     */
+    Table.prototype.updateAutoFillHeight = function () {
+        var _this = this;
+        var _a = this.props, autoFillHeight = _a.autoFillHeight, footerToolbar = _a.footerToolbar, ns = _a.classPrefix;
+        if (!autoFillHeight) {
+            return;
+        }
+        var table = (0, react_dom_1.findDOMNode)(this);
+        var tableContent = table.querySelector("." + ns + "Table-content");
+        var tableContentWrap = table.querySelector("." + ns + "Table-contentWrap");
+        var footToolbar = table.querySelector("." + ns + "Table-footToolbar");
+        if (!tableContent) {
+            return;
+        }
+        // 计算 table-content 在 dom 中的位置
+        var tableContentTop = (0, offset_1.default)(tableContent).top;
+        var viewportHeight = window.innerHeight;
+        // 有时候会拿不到 footToolbar？
+        var footToolbarHeight = footToolbar ? (0, offset_1.default)(footToolbar).height : 0;
+        // 有时候会拿不到 footToolbar，等一下在执行
+        if (!footToolbarHeight && footerToolbar && footerToolbar.length) {
+            setTimeout(function () {
+                _this.updateAutoFillHeight();
+            }, 100);
+            return;
+        }
+        var tableContentWrapMarginButtom = (0, dom_1.getStyleNumber)(tableContentWrap, 'margin-bottom');
+        // 循环计算父级节点的 pddding，这里不考虑父级节点还可能会有其它兄弟节点的情况了
+        var allParentPaddingButtom = 0;
+        var parentNode = tableContent.parentElement;
+        while (parentNode) {
+            var paddingButtom = (0, dom_1.getStyleNumber)(parentNode, 'padding-bottom');
+            var borderBottom = (0, dom_1.getStyleNumber)(parentNode, 'border-bottom-width');
+            allParentPaddingButtom =
+                allParentPaddingButtom + paddingButtom + borderBottom;
+            parentNode = parentNode.parentElement;
+        }
+        tableContent.style.height = viewportHeight -
+            tableContentTop -
+            tableContentWrapMarginButtom -
+            footToolbarHeight -
+            allParentPaddingButtom + "px";
     };
     Table.prototype.componentDidUpdate = function (prevProps) {
         var props = this.props;
@@ -199,8 +254,12 @@ var Table = /** @class */ (function (_super) {
             Table.syncRows(store, props, prevProps) && this.syncSelected();
         }
         else if ((0, helper_1.isArrayChildrenModified)(prevProps.selected, props.selected)) {
+            var prevSelectedRows = store.selectedRows
+                .map(function (item) { return item.id; })
+                .join(',');
             store.updateSelected(props.selected || [], props.valueField);
-            this.syncSelected();
+            var selectedRows = store.selectedRows.map(function (item) { return item.id; }).join(',');
+            prevSelectedRows !== selectedRows && this.syncSelected();
         }
         this.updateTableInfoLazy();
     };
@@ -209,6 +268,7 @@ var Table = /** @class */ (function (_super) {
         var parent = this.parentNode;
         parent && parent.removeEventListener('scroll', this.affixDetect);
         window.removeEventListener('resize', this.affixDetect);
+        window.removeEventListener('resize', this.updateAutoFillHeight);
         this.updateTableInfoLazy.cancel();
         this.unSensor && this.unSensor();
         formItem && (0, mobx_state_tree_1.isAlive)(formItem) && formItem.setSubStore(null);
@@ -224,8 +284,14 @@ var Table = /** @class */ (function (_super) {
         // todo
         onAction(e, action, ctx);
     };
-    Table.prototype.handleCheck = function (item) {
-        item.toggle();
+    Table.prototype.handleCheck = function (item, value, shift) {
+        var store = this.props.store;
+        if (shift) {
+            store.toggleShift(item);
+        }
+        else {
+            item.toggle();
+        }
         this.syncSelected();
     };
     Table.prototype.handleCheckAll = function () {
@@ -337,7 +403,7 @@ var Table = /** @class */ (function (_super) {
     };
     Table.prototype.affixDetect = function () {
         var _a, _b, _c, _d;
-        if (!this.props.affixHeader || !this.table) {
+        if (!this.props.affixHeader || !this.table || this.props.autoFillHeight) {
             return;
         }
         var ns = this.props.classPrefix;
@@ -509,7 +575,7 @@ var Table = /** @class */ (function (_super) {
         return (0, react_dom_1.findDOMNode)(this);
     };
     Table.prototype.handleMouseMove = function (e) {
-        var tr = e.target.closest('tr[data-index]');
+        var tr = e.target.closest('tr[data-id]');
         if (!tr) {
             return;
         }
@@ -520,17 +586,17 @@ var Table = /** @class */ (function (_super) {
             (!itemActions || !itemActions.filter(function (item) { return !item.hiddenOnHover; }).length)) {
             return;
         }
-        var index = parseInt(tr.getAttribute('data-index'), 10);
-        if (store.hoverIndex === index) {
+        var id = tr.getAttribute('data-id');
+        var row = store.hoverRow;
+        if ((row === null || row === void 0 ? void 0 : row.id) === id) {
             return;
         }
-        store.rows.forEach(function (item, key) { return item.setIsHover(index === key); });
+        (0, helper_1.eachTree)(store.rows, function (item) { return item.setIsHover(item.id === id); });
     };
     Table.prototype.handleMouseLeave = function () {
         var store = this.props.store;
-        if (~store.hoverIndex) {
-            store.rows[store.hoverIndex].setIsHover(false);
-        }
+        var row = store.hoverRow;
+        row === null || row === void 0 ? void 0 : row.setIsHover(false);
     };
     Table.prototype.handleDragStart = function (e) {
         var store = this.props.store;
@@ -668,6 +734,87 @@ var Table = /** @class */ (function (_super) {
         document.removeEventListener('mousemove', this.handleColResizeMouseMove);
         document.removeEventListener('mouseup', this.handleColResizeMouseUp);
     };
+    Table.prototype.handleColumnToggle = function (columns) {
+        var store = this.props.store;
+        store.update({ columns: columns });
+    };
+    Table.prototype.renderAutoFilterForm = function () {
+        var _a = this.props, render = _a.render, store = _a.store, onSearchableFromReset = _a.onSearchableFromReset, onSearchableFromSubmit = _a.onSearchableFromSubmit, onSearchableFromInit = _a.onSearchableFromInit, cx = _a.classnames, __ = _a.translate;
+        var searchableColumns = store.searchableColumns;
+        var activedSearchableColumns = store.activedSearchableColumns;
+        if (!searchableColumns.length) {
+            return null;
+        }
+        var groupedSearchableColumns = [
+            { body: [], md: 4 },
+            { body: [], md: 4 },
+            { body: [], md: 4 }
+        ];
+        activedSearchableColumns.forEach(function (column, index) {
+            var _a, _b, _c, _d;
+            groupedSearchableColumns[index % 3].body.push((0, tslib_1.__assign)((0, tslib_1.__assign)({}, column.searchable), { name: (_b = (_a = column.searchable) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : column.name, label: (_d = (_c = column.searchable) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : column.label, mode: 'horizontal' }));
+        });
+        return render('searchable-form', {
+            type: 'form',
+            api: null,
+            title: '',
+            mode: 'normal',
+            submitText: __('search'),
+            body: [
+                {
+                    type: 'grid',
+                    columns: groupedSearchableColumns
+                }
+            ],
+            actions: [
+                {
+                    type: 'dropdown-button',
+                    label: __('Table.searchFields'),
+                    className: cx('Table-searchableForm-dropdown', 'mr-2'),
+                    level: 'link',
+                    trigger: 'click',
+                    size: 'sm',
+                    align: 'right',
+                    buttons: searchableColumns.map(function (column) {
+                        var _a, _b, _c, _d;
+                        return {
+                            type: 'checkbox',
+                            className: cx('Table-searchableForm-checkbox'),
+                            name: "__search_" + ((_b = (_a = column.searchable) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : column.name),
+                            option: (_d = (_c = column.searchable) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : column.label,
+                            value: column.enableSearch,
+                            badge: {
+                                offset: [-10, 5],
+                                visibleOn: "" + (column.toggable && !column.toggled && column.enableSearch)
+                            },
+                            onChange: function (value) {
+                                column.setEnableSearch(value);
+                            }
+                        };
+                    })
+                },
+                {
+                    type: 'submit',
+                    label: __('search'),
+                    level: 'primary',
+                    className: 'w-18'
+                },
+                {
+                    type: 'reset',
+                    label: __('reset'),
+                    className: 'w-18'
+                }
+            ]
+        }, {
+            key: 'searchable-form',
+            panelClassName: cx('Table-searchableForm'),
+            actionsClassName: cx('Table-searchableForm-footer'),
+            onReset: onSearchableFromReset,
+            onSubmit: onSearchableFromSubmit,
+            onInit: onSearchableFromInit,
+            formStore: undefined
+        });
+    };
     Table.prototype.renderHeading = function () {
         var _a = this.props, title = _a.title, store = _a.store, hideQuickSaveBtn = _a.hideQuickSaveBtn, data = _a.data, cx = _a.classnames, saveImmediately = _a.saveImmediately, headingClassName = _a.headingClassName, quickSaveApi = _a.quickSaveApi, __ = _a.translate;
         if (title ||
@@ -699,7 +846,7 @@ var Table = /** @class */ (function (_super) {
         return null;
     };
     Table.prototype.renderHeadCell = function (column, props) {
-        var _a = this.props, store = _a.store, query = _a.query, onQuery = _a.onQuery, multiple = _a.multiple, env = _a.env, render = _a.render, ns = _a.classPrefix, resizable = _a.resizable, cx = _a.classnames;
+        var _a = this.props, store = _a.store, query = _a.query, onQuery = _a.onQuery, multiple = _a.multiple, env = _a.env, render = _a.render, ns = _a.classPrefix, resizable = _a.resizable, cx = _a.classnames, autoGenerateFilter = _a.autoGenerateFilter;
         if (column.type === '__checkme') {
             return (react_1.default.createElement("th", (0, tslib_1.__assign)({}, props, { className: cx(column.pristine.className) }), store.rows.length && multiple ? (react_1.default.createElement(Checkbox_1.default, { classPrefix: ns, partial: !store.allChecked, checked: store.someChecked, disabled: store.disabledHeadCheckbox, onChange: this.handleCheckAll })) : ('\u00A0')));
         }
@@ -718,7 +865,7 @@ var Table = /** @class */ (function (_super) {
                 react_1.default.createElement(icons_1.Icon, { icon: "right-arrow-bold", className: "icon" })))));
         }
         var affix = null;
-        if (column.searchable && column.name) {
+        if (column.searchable && column.name && !autoGenerateFilter) {
             affix = (react_1.default.createElement(HeadCellSearchDropdown_1.HeadCellSearchDropDown, (0, tslib_1.__assign)({}, this.props, { onQuery: onQuery, name: column.name, searchable: column.searchable, sortable: column.sortable, type: column.type, data: query, orderBy: store.orderBy, orderDir: store.orderDir, popOverContainer: this.getPopOverContainer })));
         }
         else if (column.sortable && column.name) {
@@ -787,7 +934,7 @@ var Table = /** @class */ (function (_super) {
     };
     Table.prototype.renderCell = function (region, column, item, props, ignoreDrag) {
         if (ignoreDrag === void 0) { ignoreDrag = false; }
-        var _a = this.props, render = _a.render, store = _a.store, multiple = _a.multiple, ns = _a.classPrefix, cx = _a.classnames, checkOnItemClick = _a.checkOnItemClick, popOverContainer = _a.popOverContainer, canAccessSuperData = _a.canAccessSuperData;
+        var _a = this.props, render = _a.render, store = _a.store, multiple = _a.multiple, ns = _a.classPrefix, cx = _a.classnames, checkOnItemClick = _a.checkOnItemClick, popOverContainer = _a.popOverContainer, canAccessSuperData = _a.canAccessSuperData, itemBadge = _a.itemBadge;
         if (column.name && item.rowSpans[column.name] === 0) {
             return null;
         }
@@ -820,7 +967,9 @@ var Table = /** @class */ (function (_super) {
         }
         var subProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { btnDisabled: store.dragging, data: item.locals, value: column.name
                 ? (0, tpl_builtin_1.resolveVariable)(column.name, canAccessSuperData ? item.locals : item.data)
-                : column.value, popOverContainer: popOverContainer || this.getPopOverContainer, rowSpan: item.rowSpans[column.name], quickEditFormRef: this.subFormRef, prefix: prefix, onImageEnlarge: this.handleImageEnlarge, canAccessSuperData: canAccessSuperData });
+                : column.value, popOverContainer: popOverContainer || this.getPopOverContainer, rowSpan: item.rowSpans[column.name], quickEditFormRef: this.subFormRef, prefix: prefix, onImageEnlarge: this.handleImageEnlarge, canAccessSuperData: canAccessSuperData, row: item, itemBadge: itemBadge, showBadge: !props.isHead &&
+                itemBadge &&
+                store.firstToggledColumnIndex === props.colIndex });
         delete subProps.label;
         return render(region, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, column.pristine), { column: column.pristine, type: 'cell' }), subProps);
     };
@@ -901,14 +1050,15 @@ var Table = /** @class */ (function (_super) {
         return void 0;
     };
     Table.prototype.renderColumnsToggler = function (config) {
-        var _a = this.props, className = _a.className, store = _a.store, ns = _a.classPrefix, cx = _a.classnames, rest = (0, tslib_1.__rest)(_a, ["className", "store", "classPrefix", "classnames"]);
+        var _a;
+        var _b = this.props, className = _b.className, store = _b.store, ns = _b.classPrefix, cx = _b.classnames, rest = (0, tslib_1.__rest)(_b, ["className", "store", "classPrefix", "classnames"]);
         var __ = rest.translate;
         var env = rest.env;
         var render = this.props.render;
         if (!store.columnsTogglable) {
             return null;
         }
-        return (react_1.default.createElement(DropDownButton_1.default, (0, tslib_1.__assign)({}, rest, { tooltip: __('Table.columnsVisibility'), tooltipContainer: env && env.getModalContainer ? env.getModalContainer : undefined, align: config ? config.align : 'left', isActived: store.hasColumnHidden(), classnames: cx, classPrefix: ns, key: "columns-toggable", size: "sm", label: react_1.default.createElement(icons_1.Icon, { icon: "columns", className: "icon m-r-none" }) }), store.toggableColumns.map(function (column) { return (react_1.default.createElement("li", { className: cx('DropDown-menuItem'), key: column.index, onClick: column.toggleToggle },
+        return (react_1.default.createElement(ColumnToggler_1.default, (0, tslib_1.__assign)({}, rest, ((0, helper_1.isObject)(config) ? config : {}), { tooltip: (config === null || config === void 0 ? void 0 : config.tooltip) || __('Table.columnsVisibility'), tooltipContainer: env && env.getModalContainer ? env.getModalContainer : undefined, align: (_a = config === null || config === void 0 ? void 0 : config.align) !== null && _a !== void 0 ? _a : 'left', isActived: store.hasColumnHidden(), classnames: cx, classPrefix: ns, key: "columns-toggable", size: (config === null || config === void 0 ? void 0 : config.size) || 'sm', label: (config === null || config === void 0 ? void 0 : config.label) || react_1.default.createElement(icons_1.Icon, { icon: "columns", className: "icon m-r-none" }), draggable: config === null || config === void 0 ? void 0 : config.draggable, columns: store.columnsData, onColumnToggle: this.handleColumnToggle }), store.toggableColumns.map(function (column) { return (react_1.default.createElement("li", { className: cx('ColumnToggler-menuItem'), key: column.index, onClick: column.toggleToggle },
             react_1.default.createElement(Checkbox_1.default, { size: "sm", classPrefix: ns, checked: column.toggled }, column.label ? render('tpl', column.label) : null))); })));
     };
     Table.prototype.renderDragToggler = function () {
@@ -931,7 +1081,7 @@ var Table = /** @class */ (function (_super) {
         }
         return (react_1.default.createElement(Button_1.default, { classPrefix: ns, onClick: function () {
                 Promise.resolve().then(function () { return new Promise(function(resolve){require(['exceljs'], function(ret) {resolve(tslib_1.__importStar(ret));})}); }).then(function (ExcelJS) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
-                    var rows, tmpStore, filename, res, workbook, worksheet, firstRowLabels, firstRow, rowIndex, _i, rows_1, row, sheetRow, columIndex, cols, _a, cols_1, column, name, value, type, imageData, imageDimensions, imageWidth, imageHeight, imageMaxSize, imageMatch, imageExt, imageId, linkURL, e_1, linkURL, map, viewValue, buffer, blob;
+                    var rows, tmpStore, filename, res, workbook, worksheet, filteredColumns, firstRowLabels, firstRow, remoteMappingCache, rowIndex, _i, rows_1, row, sheetRow, columIndex, _a, filteredColumns_1, column, name, value, type, imageData, imageDimensions, imageWidth, imageHeight, imageMaxSize, imageMatch, imageExt, imageId, linkURL, e_1, linkURL, map, source, sourceValue, mapKey, res, viewValue, buffer, blob;
                     var _b, _c;
                     return (0, tslib_1.__generator)(this, function (_d) {
                         switch (_d.label) {
@@ -973,7 +1123,16 @@ var Table = /** @class */ (function (_super) {
                                     properties: { defaultColWidth: 15 }
                                 });
                                 worksheet.views = [{ state: 'frozen', xSplit: 0, ySplit: 1 }];
-                                firstRowLabels = columns.map(function (column) {
+                                filteredColumns = toolbar.columns
+                                    ? columns.filter(function (column) {
+                                        var filterColumnsNames = toolbar.columns;
+                                        if (filterColumnsNames.indexOf(column.name) !== -1) {
+                                            return true;
+                                        }
+                                        return false;
+                                    })
+                                    : columns;
+                                firstRowLabels = filteredColumns.map(function (column) {
                                     return column.label;
                                 });
                                 firstRow = worksheet.getRow(1);
@@ -988,32 +1147,32 @@ var Table = /** @class */ (function (_super) {
                                         column: firstRowLabels.length
                                     }
                                 };
+                                remoteMappingCache = {};
                                 rowIndex = 1;
                                 _i = 0, rows_1 = rows;
                                 _d.label = 4;
                             case 4:
-                                if (!(_i < rows_1.length)) return [3 /*break*/, 14];
+                                if (!(_i < rows_1.length)) return [3 /*break*/, 19];
                                 row = rows_1[_i];
                                 rowIndex += 1;
                                 sheetRow = worksheet.getRow(rowIndex);
                                 columIndex = 0;
-                                cols = columns;
-                                _a = 0, cols_1 = cols;
+                                _a = 0, filteredColumns_1 = filteredColumns;
                                 _d.label = 5;
                             case 5:
-                                if (!(_a < cols_1.length)) return [3 /*break*/, 13];
-                                column = cols_1[_a];
+                                if (!(_a < filteredColumns_1.length)) return [3 /*break*/, 18];
+                                column = filteredColumns_1[_a];
                                 columIndex += 1;
                                 name = column.name;
                                 value = (0, helper_1.getVariable)(row.data, name);
                                 if (typeof value === 'undefined' &&
                                     !column.tpl) {
-                                    return [3 /*break*/, 12];
+                                    return [3 /*break*/, 17];
                                 }
                                 // 处理合并单元格
                                 if (name in row.rowSpans) {
                                     if (row.rowSpans[name] === 0) {
-                                        return [3 /*break*/, 12];
+                                        return [3 /*break*/, 17];
                                     }
                                     else {
                                         // start row, start column, end row, end column
@@ -1056,7 +1215,7 @@ var Table = /** @class */ (function (_super) {
                                     imageExt != 'jpeg' &&
                                     imageExt != 'gif') {
                                     sheetRow.getCell(columIndex).value = value;
-                                    return [3 /*break*/, 12];
+                                    return [3 /*break*/, 17];
                                 }
                                 imageId = workbook.addImage({
                                     base64: imageData,
@@ -1079,54 +1238,74 @@ var Table = /** @class */ (function (_super) {
                                 e_1 = _d.sent();
                                 console.warn(e_1.stack);
                                 return [3 /*break*/, 10];
-                            case 10: return [3 /*break*/, 12];
+                            case 10: return [3 /*break*/, 17];
                             case 11:
-                                if (type == 'link') {
-                                    linkURL = getAbsoluteUrl(value);
-                                    sheetRow.getCell(columIndex).value = {
-                                        text: value,
-                                        hyperlink: linkURL
-                                    };
+                                if (!(type == 'link')) return [3 /*break*/, 12];
+                                linkURL = getAbsoluteUrl(value);
+                                sheetRow.getCell(columIndex).value = {
+                                    text: value,
+                                    hyperlink: linkURL
+                                };
+                                return [3 /*break*/, 17];
+                            case 12:
+                                if (!(type === 'mapping')) return [3 /*break*/, 16];
+                                map = column.map;
+                                source = column.source;
+                                if (!source) return [3 /*break*/, 15];
+                                sourceValue = source;
+                                if ((0, tpl_builtin_1.isPureVariable)(source)) {
+                                    sourceValue = (0, tpl_builtin_1.resolveVariableAndFilter)(source, data, '| raw');
                                 }
-                                else if (type === 'mapping') {
-                                    map = column.map;
-                                    if (typeof value !== 'undefined' &&
-                                        map &&
-                                        ((_b = map[value]) !== null && _b !== void 0 ? _b : map['*'])) {
-                                        viewValue = (_c = map[value]) !== null && _c !== void 0 ? _c : (value === true && map['1']
-                                            ? map['1']
-                                            : value === false && map['0']
-                                                ? map['0']
-                                                : map['*']);
-                                        sheetRow.getCell(columIndex).value = viewValue;
-                                    }
-                                    else {
-                                        sheetRow.getCell(columIndex).value = value;
-                                    }
+                                mapKey = JSON.stringify(source);
+                                if (!(mapKey in remoteMappingCache)) return [3 /*break*/, 13];
+                                map = remoteMappingCache[mapKey];
+                                return [3 /*break*/, 15];
+                            case 13: return [4 /*yield*/, env.fetcher(sourceValue, data)];
+                            case 14:
+                                res = _d.sent();
+                                if (res.data) {
+                                    remoteMappingCache[mapKey] = res.data;
+                                    map = res.data;
+                                }
+                                _d.label = 15;
+                            case 15:
+                                if (typeof value !== 'undefined' &&
+                                    map &&
+                                    ((_b = map[value]) !== null && _b !== void 0 ? _b : map['*'])) {
+                                    viewValue = (_c = map[value]) !== null && _c !== void 0 ? _c : (value === true && map['1']
+                                        ? map['1']
+                                        : value === false && map['0']
+                                            ? map['0']
+                                            : map['*']);
+                                    sheetRow.getCell(columIndex).value =
+                                        (0, helper_1.removeHTMLTag)(viewValue);
                                 }
                                 else {
-                                    if (column.tpl) {
-                                        sheetRow.getCell(columIndex).value = (0, helper_1.removeHTMLTag)((0, tpl_1.filter)(column.tpl, row.data));
-                                    }
-                                    else {
-                                        sheetRow.getCell(columIndex).value = value;
-                                    }
+                                    sheetRow.getCell(columIndex).value = (0, helper_1.removeHTMLTag)(value);
                                 }
-                                _d.label = 12;
-                            case 12:
+                                return [3 /*break*/, 17];
+                            case 16:
+                                if (column.tpl) {
+                                    sheetRow.getCell(columIndex).value = (0, helper_1.removeHTMLTag)((0, tpl_1.filter)(column.tpl, (0, helper_1.createObject)(data, row.data)));
+                                }
+                                else {
+                                    sheetRow.getCell(columIndex).value = value;
+                                }
+                                _d.label = 17;
+                            case 17:
                                 _a++;
                                 return [3 /*break*/, 5];
-                            case 13:
+                            case 18:
                                 _i++;
                                 return [3 /*break*/, 4];
-                            case 14: return [4 /*yield*/, workbook.xlsx.writeBuffer()];
-                            case 15:
+                            case 19: return [4 /*yield*/, workbook.xlsx.writeBuffer()];
+                            case 20:
                                 buffer = _d.sent();
                                 if (buffer) {
                                     blob = new Blob([buffer], {
                                         type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                                     });
-                                    saveAs(blob, filename + '.xlsx');
+                                    (0, file_saver_1.saveAs)(blob, filename + '.xlsx');
                                 }
                                 return [2 /*return*/];
                         }
@@ -1204,55 +1383,25 @@ var Table = /** @class */ (function (_super) {
             ? [toolbarNode, footerNode]
             : footerNode || toolbarNode || null;
     };
-    Table.prototype.renderItemActions = function () {
-        var _a = this.props, itemActions = _a.itemActions, render = _a.render, store = _a.store, cx = _a.classnames;
-        var finalActions = Array.isArray(itemActions)
-            ? itemActions.filter(function (action) { return !action.hiddenOnHover; })
-            : [];
-        if (!finalActions.length) {
-            return null;
-        }
-        var rowIndex = store.hoverIndex;
-        var heights = this.heights;
-        var height = 40;
-        var top = 0;
-        if (heights && heights[rowIndex]) {
-            height = heights[rowIndex];
-            top += heights.header;
-            for (var i = rowIndex - 1; i >= 0; i--) {
-                top += heights[i];
-            }
-        }
-        return (react_1.default.createElement("div", { className: cx('Table-itemActions-wrap'), style: {
-                top: top,
-                height: height
-            } },
-            react_1.default.createElement("div", { className: cx('Table-itemActions') }, finalActions.map(function (action, index) {
-                return render("itemAction/" + index, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, action), { isMenuItem: true }), {
-                    key: index,
-                    item: store.rows[rowIndex],
-                    data: store.rows[rowIndex].locals,
-                    rowIndex: rowIndex
-                });
-            }))));
-    };
     Table.prototype.renderTableContent = function () {
-        var _a = this.props, cx = _a.classnames, tableClassName = _a.tableClassName, store = _a.store, placeholder = _a.placeholder, render = _a.render, checkOnItemClick = _a.checkOnItemClick, buildItemProps = _a.buildItemProps, rowClassNameExpr = _a.rowClassNameExpr, rowClassName = _a.rowClassName, prefixRow = _a.prefixRow, locale = _a.locale, affixRow = _a.affixRow, translate = _a.translate, itemAction = _a.itemAction;
+        var _a = this.props, cx = _a.classnames, tableClassName = _a.tableClassName, store = _a.store, placeholder = _a.placeholder, render = _a.render, checkOnItemClick = _a.checkOnItemClick, buildItemProps = _a.buildItemProps, rowClassNameExpr = _a.rowClassNameExpr, rowClassName = _a.rowClassName, prefixRow = _a.prefixRow, locale = _a.locale, affixRow = _a.affixRow, tableContentClassName = _a.tableContentClassName, translate = _a.translate, itemAction = _a.itemAction, autoFillHeight = _a.autoFillHeight, itemActions = _a.itemActions;
         // 理论上来说 store.rows 应该也行啊
         // 不过目前看来只有这样写它才会重新更新视图
         store.rows.length;
-        return (react_1.default.createElement(TableContent_1.TableContent, { tableClassName: cx(store.combineNum > 0 ? 'Table-table--withCombine' : '', tableClassName), itemAction: itemAction, classnames: cx, columns: store.filteredColumns, columnsGroup: store.columnGroup, rows: store.rows, placeholder: placeholder, render: render, onMouseMove: this.handleMouseMove, onScroll: this.handleOutterScroll, tableRef: this.tableRef, renderHeadCell: this.renderHeadCell, renderCell: this.renderCell, onCheck: this.handleCheck, onQuickChange: store.dragging ? undefined : this.handleQuickChange, footable: store.footable, footableColumns: store.footableColumns, checkOnItemClick: checkOnItemClick, buildItemProps: buildItemProps, onAction: this.handleAction, rowClassNameExpr: rowClassNameExpr, rowClassName: rowClassName, data: store.data, prefixRow: prefixRow, affixRow: affixRow, locale: locale, translate: translate }));
+        return (react_1.default.createElement(TableContent_1.TableContent, { tableClassName: cx(store.combineNum > 0 ? 'Table-table--withCombine' : '', { 'Table-table--checkOnItemClick': checkOnItemClick }, tableClassName), className: tableContentClassName, itemActions: itemActions, itemAction: itemAction, store: store, classnames: cx, columns: store.filteredColumns, columnsGroup: store.columnGroup, rows: store.rows, placeholder: placeholder, render: render, onMouseMove: this.handleMouseMove, onScroll: this.handleOutterScroll, tableRef: this.tableRef, renderHeadCell: this.renderHeadCell, renderCell: this.renderCell, onCheck: this.handleCheck, onQuickChange: store.dragging ? undefined : this.handleQuickChange, footable: store.footable, footableColumns: store.footableColumns, checkOnItemClick: checkOnItemClick, buildItemProps: buildItemProps, onAction: this.handleAction, rowClassNameExpr: rowClassNameExpr, rowClassName: rowClassName, data: store.data, prefixRow: prefixRow, affixRow: affixRow, locale: locale, translate: translate }));
     };
     Table.prototype.render = function () {
-        var _a = this.props, className = _a.className, store = _a.store, cx = _a.classnames, affixColumns = _a.affixColumns;
+        var _a = this.props, className = _a.className, store = _a.store, cx = _a.classnames, affixColumns = _a.affixColumns, autoFillHeight = _a.autoFillHeight, autoGenerateFilter = _a.autoGenerateFilter;
         this.renderedToolbars = []; // 用来记录哪些 toolbar 已经渲染了，已经渲染了就不重复渲染了。
         var heading = this.renderHeading();
         var header = this.renderHeader();
         var footer = this.renderFooter();
         var tableClassName = cx('Table-table', store.combineNum > 0 ? 'Table-table--withCombine' : '', this.props.tableClassName);
         return (react_1.default.createElement("div", { className: cx('Table', className, {
-                'Table--unsaved': !!store.modified || !!store.moved
+                'Table--unsaved': !!store.modified || !!store.moved,
+                'Table--autoFillHeight': autoFillHeight
             }) },
+            autoGenerateFilter ? this.renderAutoFilterForm() : null,
             header,
             heading,
             react_1.default.createElement("div", { className: cx('Table-contentWrap'), onMouseLeave: this.handleMouseLeave },
@@ -1262,8 +1411,7 @@ var Table = /** @class */ (function (_super) {
                 react_1.default.createElement("div", { className: cx('Table-fixedRight'), onMouseMove: this.handleMouseMove }, affixColumns !== false && store.rightFixedColumns.length
                     ? this.renderFixedColumns(store.rows, store.rightFixedColumns, false, tableClassName)
                     : null),
-                this.renderTableContent(),
-                ~store.hoverIndex ? this.renderItemActions() : null),
+                this.renderTableContent()),
             this.renderAffixHeader(tableClassName),
             footer));
     };
@@ -1306,7 +1454,9 @@ var Table = /** @class */ (function (_super) {
         'popOverContainer',
         'headerToolbarClassName',
         'toolbarClassName',
-        'footerToolbarClassName'
+        'footerToolbarClassName',
+        'itemBadge',
+        'autoFillHeight'
     ];
     Table.defaultProps = {
         className: '',