vxe-table 4.7.10 → 4.7.12

package/lib/table/src/table.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _tslib = require("tslib");
 var _vue = require("vue");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 var _dom = require("../../ui/src/dom");
@@ -38,10 +39,7 @@ const {
   useFns
 } = _ui.VxeUI;
 const isWebkit = _dom.browse['-webkit'] && !_dom.browse.edge;
-const resizableStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_WIDTH';
-const visibleStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_VISIBLE';
-const fixedStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_FIXED';
-const sortStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_SORT';
+const customStorageKey = 'VXE_CUSTOM_STORE';
 var _default = exports.default = (0, _vue.defineComponent)({
   name: 'VxeTable',
   props: _props.default,
@@ -267,7 +265,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
         isFooter: false
       },
       scrollVMLoading: false,
-      _isResize: false
+      _isResize: false,
+      _isLoading: false
     });
     const internalData = {
       tZindex: 0,
@@ -665,12 +664,20 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const oIndex = orders.indexOf(currOrder) + 1;
       return orders[oIndex < orders.length ? oIndex : 0];
     };
-    const getCustomStorageMap = key => {
+    const getCustomStorageMap = id => {
       const version = getConfig().version;
-      const rest = _xeUtils.default.toStringJSON(localStorage.getItem(key) || '');
-      return rest && rest._v === version ? rest : {
+      const rest = _xeUtils.default.toStringJSON(localStorage.getItem(customStorageKey) || '');
+      const maps = rest && rest._v === version ? rest : {
         _v: version
       };
+      return (id ? maps[id] : maps) || {};
+    };
+    const setCustomStorageMap = (id, data) => {
+      const version = getConfig().version;
+      const maps = getCustomStorageMap();
+      maps[id] = data || undefined;
+      maps._v = version;
+      localStorage.setItem(customStorageKey, _xeUtils.default.toJSONString(maps));
     };
     const getRecoverRowMaps = keyMaps => {
       const {
@@ -909,11 +916,14 @@ var _default = exports.default = (0, _vue.defineComponent)({
     /**
      * 还原自定义列操作状态
      */
-    const restoreCustomStorage = () => {
+    const restoreCustomStorage = () => (0, _tslib.__awaiter)(this, void 0, void 0, function* () {
       const {
         id,
         customConfig
       } = props;
+      const {
+        tableFullColumn
+      } = internalData;
       const customOpts = computeCustomOpts.value;
       const {
         storage,
@@ -925,131 +935,59 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const isCustomVisible = isAllCustom || storageOpts.visible;
       const isCustomFixed = isAllCustom || storageOpts.fixed;
       const isCustomSort = isAllCustom || storageOpts.sort;
-      if (storage && id && restoreStore) {
-        restoreStore({
-          id
-        });
-      }
       if (customConfig && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) {
-        const customMap = {};
         if (!id) {
           (0, _log.errLog)('vxe.error.reqProp', ['id']);
           return;
         }
-        // 自定义列宽
-        if (isCustomResizable) {
-          const columnWidthStorage = getCustomStorageMap(resizableStorageKey)[id];
-          if (columnWidthStorage) {
-            _xeUtils.default.each(columnWidthStorage, (resizeWidth, colKey) => {
-              customMap[colKey] = {
-                resizeWidth
-              };
-            });
-          }
-        }
-        // 自定义固定列
-        if (isCustomFixed) {
-          const columnFixedStorage = getCustomStorageMap(fixedStorageKey)[id];
-          if (columnFixedStorage) {
-            const colFixeds = columnFixedStorage.split(',');
-            colFixeds.forEach(fixConf => {
-              const [colKey, fixed] = fixConf.split('|');
-              if (customMap[colKey]) {
-                customMap[colKey].fixed = fixed;
-              } else {
-                customMap[colKey] = {
-                  fixed
-                };
-              }
-            });
-          }
-        }
-        // 自定义顺序
-        let hasCustomSort = false;
-        if (isCustomSort) {
-          const columnSortStorage = getCustomStorageMap(sortStorageKey)[id];
-          if (columnSortStorage) {
-            _xeUtils.default.each(columnSortStorage, (renderSortNumber, colKey) => {
-              if (customMap[colKey]) {
-                customMap[colKey].renderSortNumber = renderSortNumber;
-              } else {
-                customMap[colKey] = {
-                  renderSortNumber
-                };
-              }
-              if (!hasCustomSort) {
-                hasCustomSort = true;
-              }
-            });
-          }
+        let storeData = getCustomStorageMap(id);
+        if (restoreStore) {
+          storeData = yield restoreStore({
+            id,
+            type: 'restore',
+            storeData
+          });
         }
-        // 自定义隐藏列
-        if (isCustomVisible) {
-          const columnVisibleStorage = getCustomStorageMap(visibleStorageKey)[id];
-          if (columnVisibleStorage) {
-            const colVisibles = columnVisibleStorage.split('|');
-            const colHides = colVisibles[0] ? colVisibles[0].split(',') : [];
-            const colShows = colVisibles[1] ? colVisibles[1].split(',') : [];
-            colHides.forEach(colKey => {
-              if (customMap[colKey]) {
-                customMap[colKey].visible = false;
-              } else {
-                customMap[colKey] = {
-                  visible: false
-                };
-              }
-            });
-            colShows.forEach(colKey => {
-              if (customMap[colKey]) {
-                customMap[colKey].visible = true;
-              } else {
-                customMap[colKey] = {
-                  visible: true
-                };
-              }
-            });
-          }
+        if (!storeData) {
+          return;
         }
         let {
           collectColumn
         } = internalData;
-        const keyMap = {};
-        _xeUtils.default.eachTree(collectColumn, column => {
-          const colKey = column.getKey();
-          if (colKey) {
-            keyMap[colKey] = column;
-          }
-        });
-        _xeUtils.default.each(customMap, ({
-          visible,
-          resizeWidth,
-          fixed,
-          renderSortNumber
-        }, colKey) => {
-          const column = keyMap[colKey];
-          if (column) {
-            if (_xeUtils.default.isNumber(resizeWidth)) {
-              column.resizeWidth = resizeWidth;
+        const {
+          resizableData,
+          sortData,
+          visibleData,
+          fixedData
+        } = storeData;
+        let hasCustomSort = false;
+        // 处理还原
+        if (resizableData || sortData || visibleData || fixedData) {
+          tableFullColumn.forEach(column => {
+            const colKey = column.getKey();
+            if (resizableData && _xeUtils.default.isNumber(resizableData[colKey])) {
+              column.resizeWidth = resizableData[colKey];
             }
-            if (_xeUtils.default.isBoolean(visible)) {
-              column.visible = visible;
+            if (visibleData && _xeUtils.default.isBoolean(visibleData[colKey])) {
+              column.visible = visibleData[colKey];
             }
-            if (fixed) {
-              column.fixed = fixed;
+            if (fixedData && fixedData[colKey]) {
+              column.fixed = fixedData[colKey];
             }
-            if (renderSortNumber) {
-              column.renderSortNumber = Number(renderSortNumber);
+            if (sortData && _xeUtils.default.isNumber(sortData[colKey])) {
+              hasCustomSort = true;
+              column.renderSortNumber = sortData[colKey];
             }
+          });
+          // 如果自定义了顺序
+          if (hasCustomSort) {
+            collectColumn = _xeUtils.default.orderBy(collectColumn, 'renderSortNumber');
+            internalData.collectColumn = collectColumn;
+            internalData.tableFullColumn = getColumnList(collectColumn);
           }
-        });
-        // 如果自定义了顺序
-        if (hasCustomSort) {
-          collectColumn = _xeUtils.default.orderBy(collectColumn, 'renderSortNumber');
-          internalData.collectColumn = collectColumn;
-          internalData.tableFullColumn = getColumnList(collectColumn);
         }
       }
-    };
+    });
     /**
      * 更新数据列的 Map
      * 牺牲数据组装的耗时，用来换取使用过程中的流畅
@@ -2912,30 +2850,33 @@ var _default = exports.default = (0, _vue.defineComponent)({
       internalData.collectColumn = collectColumn;
       const tableFullColumn = getColumnList(collectColumn);
       internalData.tableFullColumn = tableFullColumn;
+      reactData._isLoading = true;
       initColumnSort();
-      restoreCustomStorage();
-      cacheColumnMap();
-      parseColumns().then(() => {
-        if (reactData.scrollXLoad) {
-          loadScrollXData();
-        }
-      });
-      tableMethods.clearMergeCells();
-      tableMethods.clearMergeFooterItems();
-      tablePrivateMethods.handleTableData(true);
-      if (process.env.NODE_ENV === 'development') {
-        if ((reactData.scrollXLoad || reactData.scrollYLoad) && reactData.expandColumn) {
-          (0, _log.warnLog)('vxe.error.scrollErrProp', ['column.type=expand']);
-        }
-      }
-      return (0, _vue.nextTick)().then(() => {
-        if ($xeToolbar) {
-          $xeToolbar.syncUpdate({
-            collectColumn,
-            $table: $xeTable
-          });
+      return restoreCustomStorage().then(() => {
+        reactData._isLoading = false;
+        cacheColumnMap();
+        parseColumns().then(() => {
+          if (reactData.scrollXLoad) {
+            loadScrollXData();
+          }
+        });
+        tableMethods.clearMergeCells();
+        tableMethods.clearMergeFooterItems();
+        tablePrivateMethods.handleTableData(true);
+        if (process.env.NODE_ENV === 'development') {
+          if ((reactData.scrollXLoad || reactData.scrollYLoad) && reactData.expandColumn) {
+            (0, _log.warnLog)('vxe.error.scrollErrProp', ['column.type=expand']);
+          }
         }
-        return tableMethods.recalculate();
+        return (0, _vue.nextTick)().then(() => {
+          if ($xeToolbar) {
+            $xeToolbar.syncUpdate({
+              collectColumn,
+              $table: $xeTable
+            });
+          }
+          return tableMethods.recalculate();
+        });
       });
     };
     const updateScrollYStatus = fullData => {
@@ -3781,7 +3722,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           _xeUtils.default.eachTree([targetColumn], column => {
             column.fixed = fixed;
           });
-          tablePrivateMethods.saveCustomFixed();
+          tablePrivateMethods.saveCustomStore('update:fixed');
           return tableMethods.refreshColumn();
         }
         return (0, _vue.nextTick)();
@@ -3796,7 +3737,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           _xeUtils.default.eachTree([targetColumn], column => {
             column.fixed = null;
           });
-          tablePrivateMethods.saveCustomFixed();
+          tablePrivateMethods.saveCustomStore('update:fixed');
           return tableMethods.refreshColumn();
         }
         return (0, _vue.nextTick)();
@@ -3881,15 +3822,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           }
           column.renderResizeWidth = column.renderWidth;
         });
-        if (opts.resizable) {
-          tablePrivateMethods.saveCustomResizable(true);
-        }
-        if (opts.sort) {
-          tablePrivateMethods.saveCustomSort(true);
-        }
-        if (opts.fixed) {
-          tablePrivateMethods.saveCustomFixed();
-        }
+        $xeTable.saveCustomStore('reset');
         return tablePrivateMethods.handleCustom();
       },
       /**
@@ -5244,21 +5177,26 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const visibleData = {};
         const fixedData = {};
         const storeData = {
-          resizableData,
-          sortData,
-          visibleData,
-          fixedData
+          resizableData: undefined,
+          sortData: undefined,
+          visibleData: undefined,
+          fixedData: undefined
         };
         if (!id) {
           (0, _log.errLog)('vxe.error.reqProp', ['id']);
           return storeData;
         }
+        let hasResizable = 0;
+        let hasSort = 0;
+        let hasFixedt = 0;
+        let hasVisible = 0;
         _xeUtils.default.eachTree(collectColumn, (column, index, items, path, parent) => {
           // 排序只支持一级
           if (!parent) {
             collectColumn.forEach(column => {
               const colKey = column.getKey();
               if (colKey) {
+                hasSort = 1;
                 sortData[colKey] = column.renderSortNumber;
               }
             });
@@ -5266,12 +5204,14 @@ var _default = exports.default = (0, _vue.defineComponent)({
           if (column.resizeWidth) {
             const colKey = column.getKey();
             if (colKey) {
+              hasResizable = 1;
               resizableData[colKey] = column.renderWidth;
             }
           }
           if (column.fixed && column.fixed !== column.defaultFixed) {
             const colKey = column.getKey();
             if (colKey) {
+              hasFixedt = 1;
               fixedData[colKey] = column.fixed;
             }
           }
@@ -5281,16 +5221,30 @@ var _default = exports.default = (0, _vue.defineComponent)({
             if (!column.visible && column.defaultVisible) {
               const colKey = column.getKey();
               if (colKey) {
+                hasVisible = 1;
                 visibleData[colKey] = false;
               }
             } else if (column.visible && !column.defaultVisible) {
               const colKey = column.getKey();
               if (colKey) {
+                hasVisible = 1;
                 visibleData[colKey] = true;
               }
             }
           }
         });
+        if (hasResizable) {
+          storeData.resizableData = resizableData;
+        }
+        if (hasSort) {
+          storeData.sortData = sortData;
+        }
+        if (hasFixedt) {
+          storeData.fixedData = fixedData;
+        }
+        if (hasVisible) {
+          storeData.visibleData = visibleData;
+        }
         return storeData;
       },
       focus() {
@@ -6194,157 +6148,43 @@ var _default = exports.default = (0, _vue.defineComponent)({
           autoList
         });
       },
-      saveCustomResizable(isReset) {
-        const {
-          id,
-          customConfig
-        } = props;
-        const customOpts = computeCustomOpts.value;
-        const {
-          collectColumn
-        } = internalData;
-        const {
-          storage
-        } = customOpts;
-        const isAllStorage = storage === true;
-        const storageOpts = isAllStorage ? {} : Object.assign({}, storage || {});
-        const isResizable = isAllStorage || storageOpts.resizable;
-        if (customConfig && isResizable) {
-          const columnWidthStorageMap = getCustomStorageMap(resizableStorageKey);
-          let columnWidthStorage;
-          if (!id) {
-            (0, _log.errLog)('vxe.error.reqProp', ['id']);
-            return;
-          }
-          if (!isReset) {
-            columnWidthStorage = _xeUtils.default.isPlainObject(columnWidthStorageMap[id]) ? columnWidthStorageMap[id] : {};
-            _xeUtils.default.eachTree(collectColumn, column => {
-              if (column.resizeWidth) {
-                const colKey = column.getKey();
-                if (colKey) {
-                  columnWidthStorage[colKey] = column.renderWidth;
-                }
-              }
-            });
-          }
-          columnWidthStorageMap[id] = _xeUtils.default.isEmpty(columnWidthStorage) ? undefined : columnWidthStorage;
-          localStorage.setItem(resizableStorageKey, _xeUtils.default.toJSONString(columnWidthStorageMap));
-        }
-      },
-      saveCustomSort(isReset) {
+      saveCustomStore(type) {
         const {
-          id,
-          customConfig
+          id
         } = props;
         const customOpts = computeCustomOpts.value;
         const {
-          collectColumn
-        } = internalData;
-        const {
+          updateStore,
           storage
         } = customOpts;
-        const isAllStorage = storage === true;
-        const storageOpts = isAllStorage ? {} : Object.assign({}, storage || {});
-        const isSort = isAllStorage || storageOpts.sort;
-        if (customConfig && isSort) {
-          const columnSortStorageMap = getCustomStorageMap(sortStorageKey);
-          let columnWidthStorage;
+        const isAllCustom = storage === true;
+        const storageOpts = isAllCustom ? {} : Object.assign({}, storage || {});
+        const isCustomResizable = isAllCustom || storageOpts.resizable;
+        const isCustomVisible = isAllCustom || storageOpts.visible;
+        const isCustomFixed = isAllCustom || storageOpts.fixed;
+        const isCustomSort = isAllCustom || storageOpts.sort;
+        if (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort) {
           if (!id) {
             (0, _log.errLog)('vxe.error.reqProp', ['id']);
-            return;
+            return (0, _vue.nextTick)();
           }
-          if (!isReset) {
-            columnWidthStorage = _xeUtils.default.isPlainObject(columnSortStorageMap[id]) ? columnSortStorageMap[id] : {};
-            // 排序只支持一级
-            collectColumn.forEach(column => {
-              const colKey = column.getKey();
-              if (colKey) {
-                columnWidthStorage[colKey] = column.renderSortNumber;
-              }
+          const storeData = type === 'reset' ? {
+            resizableData: {},
+            sortData: {},
+            visibleData: {},
+            fixedData: {}
+          } : tableMethods.getCustomStoreData();
+          if (updateStore) {
+            return updateStore({
+              id,
+              type,
+              storeData
             });
+          } else {
+            setCustomStorageMap(id, type === 'reset' ? null : storeData);
           }
-          columnSortStorageMap[id] = _xeUtils.default.isEmpty(columnWidthStorage) ? undefined : columnWidthStorage;
-          localStorage.setItem(sortStorageKey, _xeUtils.default.toJSONString(columnSortStorageMap));
-        }
-      },
-      saveCustomFixed() {
-        const {
-          id,
-          customConfig
-        } = props;
-        const {
-          collectColumn
-        } = internalData;
-        const customOpts = computeCustomOpts.value;
-        const {
-          storage
-        } = customOpts;
-        const isAllStorage = storage === true;
-        const storageOpts = isAllStorage ? {} : Object.assign({}, storage || {});
-        const isCustomFixed = isAllStorage || storageOpts.fixed;
-        if (customConfig && isCustomFixed) {
-          const columnFixedStorageMap = getCustomStorageMap(fixedStorageKey);
-          const colFixeds = [];
-          if (!id) {
-            (0, _log.errLog)('vxe.error.reqProp', ['id']);
-            return;
-          }
-          _xeUtils.default.eachTree(collectColumn, column => {
-            if (column.fixed && column.fixed !== column.defaultFixed) {
-              const colKey = column.getKey();
-              if (colKey) {
-                colFixeds.push(`${colKey}|${column.fixed}`);
-              }
-            }
-          });
-          columnFixedStorageMap[id] = colFixeds.join(',') || undefined;
-          localStorage.setItem(fixedStorageKey, _xeUtils.default.toJSONString(columnFixedStorageMap));
-        }
-      },
-      saveCustomVisible() {
-        const {
-          id,
-          customConfig
-        } = props;
-        const {
-          collectColumn
-        } = internalData;
-        const customOpts = computeCustomOpts.value;
-        const {
-          checkMethod,
-          storage
-        } = customOpts;
-        const isAllStorage = storage === true;
-        const storageOpts = isAllStorage ? {} : Object.assign({}, storage || {});
-        const isCustomVisible = isAllStorage || storageOpts.visible;
-        if (customConfig && isCustomVisible) {
-          const columnVisibleStorageMap = getCustomStorageMap(visibleStorageKey);
-          const colHides = [];
-          const colShows = [];
-          if (!id) {
-            (0, _log.errLog)('vxe.error.reqProp', ['id']);
-            return;
-          }
-          _xeUtils.default.eachTree(collectColumn, column => {
-            if (!checkMethod || checkMethod({
-              column
-            })) {
-              if (!column.visible && column.defaultVisible) {
-                const colKey = column.getKey();
-                if (colKey) {
-                  colHides.push(colKey);
-                }
-              } else if (column.visible && !column.defaultVisible) {
-                const colKey = column.getKey();
-                if (colKey) {
-                  colShows.push(colKey);
-                }
-              }
-            }
-          });
-          columnVisibleStorageMap[id] = [colHides.join(',')].concat(colShows.length ? [colShows.join(',')] : []).join('|') || undefined;
-          localStorage.setItem(visibleStorageKey, _xeUtils.default.toJSONString(columnVisibleStorageMap));
         }
+        return (0, _vue.nextTick)();
       },
       handleCustom() {
         const {
@@ -6359,8 +6199,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
             $xeTable.clearCopyCellArea();
           }
         }
-        tablePrivateMethods.saveCustomVisible();
-        tablePrivateMethods.saveCustomSort();
         tablePrivateMethods.analyColumnWidth();
         return tableMethods.refreshColumn(true);
       },
@@ -8000,6 +7838,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const validTipOpts = computeValidTipOpts.value;
       const loadingOpts = computeLoadingOpts.value;
       const isMenu = computeIsMenu.value;
+      const currLoading = reactData._isLoading || loading;
       return (0, _vue.h)('div', {
         ref: refElem,
         class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
@@ -8021,8 +7860,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
           'is--animat': !!props.animat,
           'is--round': props.round,
           'is--stripe': !treeConfig && stripe,
-          'is--loading': loading,
-          'is--empty': !loading && !tableData.length,
+          'is--loading': currLoading,
+          'is--empty': !currLoading && !tableData.length,
           'is--scroll-y': overflowY,
           'is--scroll-x': overflowX,
           'is--virtual-x': scrollXLoad,
@@ -8105,7 +7944,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
        */
       (0, _vue.h)((0, _vue.resolveComponent)('vxe-loading'), {
         class: 'vxe-table--loading',
-        modelValue: loading,
+        modelValue: currLoading,
         icon: loadingOpts.icon,
         text: loadingOpts.text
       }, loadingSlot ? {