vxe-table 4.7.10 → 4.7.12

package/es/table/src/table.js

@@ -1,3 +1,4 @@
+import { __awaiter } from "tslib";
 import { defineComponent, h, createCommentVNode, resolveComponent, reactive, ref, provide, inject, nextTick, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue';
 import XEUtils from 'xe-utils';
 import { browse, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, isNodeElement } from '../../ui/src/dom';
@@ -19,10 +20,7 @@ import TableExportPanelComponent from '../module/export/export-panel';
 import TableMenuPanelComponent from '../module/menu/panel';
 const { getConfig, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns } = VxeUI;
 const isWebkit = browse['-webkit'] && !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';
 export default defineComponent({
     name: 'VxeTable',
     props: tableProps,
@@ -243,7 +241,8 @@ export default defineComponent({
                 isFooter: false
             },
             scrollVMLoading: false,
-            _isResize: false
+            _isResize: false,
+            _isLoading: false
         });
         const internalData = {
             tZindex: 0,
@@ -614,10 +613,18 @@ export default 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.toStringJSON(localStorage.getItem(key) || '');
-            return rest && rest._v === version ? rest : { _v: version };
+            const rest = XEUtils.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.toJSONString(maps));
         };
         const getRecoverRowMaps = (keyMaps) => {
             const { fullAllDataRowIdData } = internalData;
@@ -815,8 +822,9 @@ export default defineComponent({
         /**
          * 还原自定义列操作状态
          */
-        const restoreCustomStorage = () => {
+        const restoreCustomStorage = () => __awaiter(this, void 0, void 0, function* () {
             const { id, customConfig } = props;
+            const { tableFullColumn } = internalData;
             const customOpts = computeCustomOpts.value;
             const { storage, restoreStore } = customOpts;
             const isAllCustom = storage === true;
@@ -825,116 +833,48 @@ export default 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) {
                     errLog('vxe.error.reqProp', ['id']);
                     return;
                 }
-                // 自定义列宽
-                if (isCustomResizable) {
-                    const columnWidthStorage = getCustomStorageMap(resizableStorageKey)[id];
-                    if (columnWidthStorage) {
-                        XEUtils.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.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.eachTree(collectColumn, (column) => {
-                    const colKey = column.getKey();
-                    if (colKey) {
-                        keyMap[colKey] = column;
-                    }
-                });
-                XEUtils.each(customMap, ({ visible, resizeWidth, fixed, renderSortNumber }, colKey) => {
-                    const column = keyMap[colKey];
-                    if (column) {
-                        if (XEUtils.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.isNumber(resizableData[colKey])) {
+                            column.resizeWidth = resizableData[colKey];
                         }
-                        if (XEUtils.isBoolean(visible)) {
-                            column.visible = visible;
+                        if (visibleData && XEUtils.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.isNumber(sortData[colKey])) {
+                            hasCustomSort = true;
+                            column.renderSortNumber = sortData[colKey];
                         }
+                    });
+                    // 如果自定义了顺序
+                    if (hasCustomSort) {
+                        collectColumn = XEUtils.orderBy(collectColumn, 'renderSortNumber');
+                        internalData.collectColumn = collectColumn;
+                        internalData.tableFullColumn = getColumnList(collectColumn);
                     }
-                });
-                // 如果自定义了顺序
-                if (hasCustomSort) {
-                    collectColumn = XEUtils.orderBy(collectColumn, 'renderSortNumber');
-                    internalData.collectColumn = collectColumn;
-                    internalData.tableFullColumn = getColumnList(collectColumn);
                 }
             }
-        };
+        });
         /**
          * 更新数据列的 Map
          * 牺牲数据组装的耗时，用来换取使用过程中的流畅
@@ -2479,27 +2419,30 @@ export default 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) {
-                    warnLog('vxe.error.scrollErrProp', ['column.type=expand']);
-                }
-            }
-            return 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) {
+                        warnLog('vxe.error.scrollErrProp', ['column.type=expand']);
+                    }
                 }
-                return tableMethods.recalculate();
+                return nextTick().then(() => {
+                    if ($xeToolbar) {
+                        $xeToolbar.syncUpdate({ collectColumn, $table: $xeTable });
+                    }
+                    return tableMethods.recalculate();
+                });
             });
         };
         const updateScrollYStatus = (fullData) => {
@@ -3206,7 +3149,7 @@ export default defineComponent({
                     XEUtils.eachTree([targetColumn], (column) => {
                         column.fixed = fixed;
                     });
-                    tablePrivateMethods.saveCustomFixed();
+                    tablePrivateMethods.saveCustomStore('update:fixed');
                     return tableMethods.refreshColumn();
                 }
                 return nextTick();
@@ -3221,7 +3164,7 @@ export default defineComponent({
                     XEUtils.eachTree([targetColumn], (column) => {
                         column.fixed = null;
                     });
-                    tablePrivateMethods.saveCustomFixed();
+                    tablePrivateMethods.saveCustomStore('update:fixed');
                     return tableMethods.refreshColumn();
                 }
                 return nextTick();
@@ -3300,15 +3243,7 @@ export default 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();
             },
             /**
@@ -4474,21 +4409,26 @@ export default defineComponent({
                 const visibleData = {};
                 const fixedData = {};
                 const storeData = {
-                    resizableData,
-                    sortData,
-                    visibleData,
-                    fixedData
+                    resizableData: undefined,
+                    sortData: undefined,
+                    visibleData: undefined,
+                    fixedData: undefined
                 };
                 if (!id) {
                     errLog('vxe.error.reqProp', ['id']);
                     return storeData;
                 }
+                let hasResizable = 0;
+                let hasSort = 0;
+                let hasFixedt = 0;
+                let hasVisible = 0;
                 XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
                     // 排序只支持一级
                     if (!parent) {
                         collectColumn.forEach((column) => {
                             const colKey = column.getKey();
                             if (colKey) {
+                                hasSort = 1;
                                 sortData[colKey] = column.renderSortNumber;
                             }
                         });
@@ -4496,12 +4436,14 @@ export default 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;
                         }
                     }
@@ -4509,17 +4451,31 @@ export default 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() {
@@ -5331,127 +5287,41 @@ export default defineComponent({
                 });
                 Object.assign(reactData.columnStore, { resizeList, pxList, pxMinList, scaleList, scaleMinList, 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) {
-                        errLog('vxe.error.reqProp', ['id']);
-                        return;
-                    }
-                    if (!isReset) {
-                        columnWidthStorage = XEUtils.isPlainObject(columnWidthStorageMap[id]) ? columnWidthStorageMap[id] : {};
-                        XEUtils.eachTree(collectColumn, (column) => {
-                            if (column.resizeWidth) {
-                                const colKey = column.getKey();
-                                if (colKey) {
-                                    columnWidthStorage[colKey] = column.renderWidth;
-                                }
-                            }
-                        });
-                    }
-                    columnWidthStorageMap[id] = XEUtils.isEmpty(columnWidthStorage) ? undefined : columnWidthStorage;
-                    localStorage.setItem(resizableStorageKey, XEUtils.toJSONString(columnWidthStorageMap));
-                }
-            },
-            saveCustomSort(isReset) {
-                const { id, customConfig } = props;
+            saveCustomStore(type) {
+                const { id } = props;
                 const customOpts = computeCustomOpts.value;
-                const { collectColumn } = internalData;
-                const { 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 { updateStore, storage } = customOpts;
+                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) {
                         errLog('vxe.error.reqProp', ['id']);
-                        return;
+                        return nextTick();
                     }
-                    if (!isReset) {
-                        columnWidthStorage = XEUtils.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
                         });
                     }
-                    columnSortStorageMap[id] = XEUtils.isEmpty(columnWidthStorage) ? undefined : columnWidthStorage;
-                    localStorage.setItem(sortStorageKey, XEUtils.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) {
-                        errLog('vxe.error.reqProp', ['id']);
-                        return;
-                    }
-                    XEUtils.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.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) {
-                        errLog('vxe.error.reqProp', ['id']);
-                        return;
+                    else {
+                        setCustomStorageMap(id, type === 'reset' ? null : storeData);
                     }
-                    XEUtils.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.toJSONString(columnVisibleStorageMap));
                 }
+                return nextTick();
             },
             handleCustom() {
                 const { mouseConfig } = props;
@@ -5464,8 +5334,6 @@ export default defineComponent({
                         $xeTable.clearCopyCellArea();
                     }
                 }
-                tablePrivateMethods.saveCustomVisible();
-                tablePrivateMethods.saveCustomSort();
                 tablePrivateMethods.analyColumnWidth();
                 return tableMethods.refreshColumn(true);
             },
@@ -6852,6 +6720,7 @@ export default defineComponent({
             const validTipOpts = computeValidTipOpts.value;
             const loadingOpts = computeLoadingOpts.value;
             const isMenu = computeIsMenu.value;
+            const currLoading = reactData._isLoading || loading;
             return h('div', {
                 ref: refElem,
                 class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
@@ -6873,8 +6742,8 @@ export default 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,
@@ -6971,7 +6840,7 @@ export default defineComponent({
                  */
                 h(resolveComponent('vxe-loading'), {
                     class: 'vxe-table--loading',
-                    modelValue: loading,
+                    modelValue: currLoading,
                     icon: loadingOpts.icon,
                     text: loadingOpts.text
                 }, loadingSlot

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from 'vxe-pc-ui';
-VxeUI.version = "4.7.10";
-VxeUI.tableVersion = "4.7.10";
+VxeUI.version = "4.7.12";
+VxeUI.tableVersion = "4.7.12";
 VxeUI.setConfig({
     emptyCell: '　',
     table: {

package/es/ui/src/log.js

@@ -1,5 +1,5 @@
 import { VxeUI } from 'vxe-pc-ui';
 const { log } = VxeUI;
-const version = `table v${"4.7.10"}`;
+const version = `table v${"4.7.12"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);