vxe-table 3.15.45 → 3.15.47

package/es/table/module/custom/mixin.js

@@ -55,7 +55,7 @@ export default {
             const reactData = $xeTable;
             const { customColumnList, aggHandleFields, rowGroupList } = reactData;
             const customOpts = $xeTable.computeCustomOpts;
-            const { allowVisible, allowSort, allowFixed, allowResizable } = customOpts;
+            const { allowVisible, allowSort, allowFixed, allowResizable, allowGroup, allowValues } = customOpts;
             XEUtils.eachTree(customColumnList, (column, index, items, path, parentColumn) => {
                 if (parentColumn) {
                     // 更新子列信息
@@ -81,6 +81,9 @@ export default {
                 if (allowVisible) {
                     column.visible = column.renderVisible;
                 }
+                if (allowGroup && allowValues) {
+                    column.aggFunc = column.renderAggFn;
+                }
             });
             reactData.isCustomStatus = true;
             reactData.isDragColMove = true;
@@ -88,9 +91,9 @@ export default {
                 reactData.isDragColMove = false;
             }, 1000);
             return $xeTable.saveCustomStore('confirm').then(() => {
-                if ($xeTable.handlePivotTableAggregateData) {
+                if (allowGroup && allowValues && $xeTable.handlePivotTableAggregateData) {
                     if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {
-                        // 改动聚合分组
+                        // 更新数据分组
                         if (aggHandleFields.length) {
                             $xeTable.setRowGroups(aggHandleFields);
                         }
@@ -98,6 +101,10 @@ export default {
                             $xeTable.clearRowGroups();
                         }
                     }
+                    else {
+                        // 更新聚合函数
+                        $xeTable.handleUpdateAggData();
+                    }
                 }
             });
         },
@@ -141,7 +148,8 @@ export default {
                 visible: true,
                 resizable: options === true,
                 fixed: options === true,
-                sort: options === true
+                sort: options === true,
+                aggFunc: options === true
             }, options);
             XEUtils.eachTree(collectColumn, (column) => {
                 if (opts.resizable) {
@@ -156,12 +164,16 @@ export default {
                 if (!checkMethod || checkMethod({ $table: $xeTable, column })) {
                     column.visible = column.defaultVisible;
                 }
+                if (opts.aggFunc) {
+                    column.aggFunc = column.defaultAggFunc;
+                    column.renderAggFn = column.defaultAggFunc;
+                }
                 column.renderResizeWidth = column.renderWidth;
             });
             reactData.isCustomStatus = false;
             $xeTable.saveCustomStore('reset');
             return $xeTable.handleCustom().then(() => {
-                if ($xeTable.handlePivotTableAggregateData) {
+                if (opts.aggFunc && $xeTable.handlePivotTableAggregateData) {
                     const rowGroupFields = $xeTable.computeRowGroupFields;
                     if (rowGroupFields ? rowGroupFields.length : rowGroupList.length) {
                         if (rowGroupFields && rowGroupFields.length) {
@@ -171,6 +183,9 @@ export default {
                             $xeTable.clearRowGroups();
                         }
                     }
+                    else {
+                        $xeTable.handleUpdateAggData();
+                    }
                 }
             });
         },

package/es/table/module/custom/panel.js

@@ -17,8 +17,8 @@ function showDropTip($xeTableCustomPanel, evnt, optEl, showLine, dragPos) {
     const { prevDragToChild } = customPanelInternalData;
     const bodyWrapperRect = bodyWrapperElem.getBoundingClientRect();
     const customBodyRect = customBodyElem.getBoundingClientRect();
+    const dragLineEl = $xeTableCustomPanel.$refs.refDragLineElem;
     if (optEl) {
-        const dragLineEl = $xeTableCustomPanel.$refs.refDragLineElem;
         if (dragLineEl) {
             if (showLine) {
                 const optRect = optEl.getBoundingClientRect();
@@ -35,6 +35,11 @@ function showDropTip($xeTableCustomPanel, evnt, optEl, showLine, dragPos) {
             }
         }
     }
+    else {
+        if (dragLineEl) {
+            dragLineEl.style.display = 'node';
+        }
+    }
     const dragTipEl = $xeTableCustomPanel.$refs.refDragTipElem;
     if (dragTipEl) {
         dragTipEl.style.display = 'block';
@@ -279,7 +284,7 @@ const renderSimplePanel = (h, _vm) => {
         ? [
             h('div', {
                 ref: 'refBodyWrapperElem',
-                class: 'vxe-table-custom-body-wrapper'
+                class: 'vxe-table-custom-simple--body-wrapper'
             }, [
                 !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel
                     ? h($xeTable.getPivotTableAggregateSimplePanel(), {
@@ -851,12 +856,14 @@ export default {
     data() {
         const reactData = {
             dragCol: null,
-            dragGroup: null,
-            dragValues: null,
+            dragGroupField: null,
+            dragAggFnCol: null,
             dragTipText: ''
         };
         const internalData = {
         // prevDragCol: undefined,
+        // prevDragGroupField: undefined,
+        // prevDragAggFnColid: undefined,
         // prevDragToChild: false,
         // prevDragPos: null
         };
@@ -1116,6 +1123,8 @@ export default {
             const column = $xeTable.getColumnById(colid);
             trEl.draggable = true;
             customPanelReactData.dragCol = column;
+            customPanelReactData.dragGroupField = null;
+            customPanelReactData.dragAggFnCol = null;
             this.updateColDropTipContent();
             addClass(trEl, 'active--drag-origin');
         },
@@ -1129,16 +1138,18 @@ export default {
             hideDropTip($xeTableCustomPanel);
             trEl.draggable = false;
             customPanelReactData.dragCol = null;
+            customPanelReactData.dragGroupField = null;
+            customPanelReactData.dragAggFnCol = null;
             removeClass(trEl, 'active--drag-origin');
         },
         sortDragstartEvent(evnt) {
             const $xeTableCustomPanel = this;
-            const customPanelReactData = $xeTableCustomPanel.reactData;
+            const customPanelInternalData = $xeTableCustomPanel.internalData;
             if (evnt.dataTransfer) {
                 evnt.dataTransfer.setDragImage(getTpImg(), 0, 0);
             }
-            customPanelReactData.dragGroup = null;
-            customPanelReactData.dragValues = null;
+            customPanelInternalData.prevDragGroupField = null;
+            customPanelInternalData.prevDragAggFnColid = null;
         },
         sortDragendEvent(evnt) {
             const $xeTableCustomPanel = this;
@@ -1156,10 +1167,10 @@ export default {
             const trEl = evnt.currentTarget;
             const columnDragOpts = $xeTable.computeColumnDragOpts;
             const { isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod } = columnDragOpts;
-            const { dragCol, dragGroup, dragValues } = customPanelReactData;
-            const { prevDragCol, prevDragPos, prevDragToChild } = customPanelInternalData;
+            const { dragCol } = customPanelReactData;
+            const { prevDragCol, prevDragGroupField, prevDragAggFnColid, prevDragPos, prevDragToChild } = customPanelInternalData;
             const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
-            if (dragGroup || dragValues) {
+            if (prevDragGroupField || prevDragAggFnColid) {
                 if ($xeTable.handlePivotTableAggregatePanelDragendEvent) {
                     $xeTable.handlePivotTableAggregatePanelDragendEvent(evnt);
                 }
@@ -1318,8 +1329,10 @@ export default {
             }
             hideDropTip($xeTableCustomPanel);
             customPanelReactData.dragCol = null;
-            customPanelReactData.dragGroup = null;
-            customPanelReactData.dragValues = null;
+            customPanelReactData.dragGroupField = null;
+            customPanelReactData.dragAggFnCol = null;
+            customPanelInternalData.prevDragGroupField = null;
+            customPanelInternalData.prevDragAggFnColid = null;
             trEl.draggable = false;
             trEl.removeAttribute('drag-pos');
             removeClass(trEl, 'active--drag-target');
@@ -1339,14 +1352,15 @@ export default {
             const isControlKey = hasControlKey(evnt);
             const colid = optEl.getAttribute('colid');
             const column = $xeTable.getColumnById(colid);
-            customPanelReactData.dragGroup = null;
-            customPanelReactData.dragValues = null;
+            customPanelInternalData.prevDragGroupField = null;
+            customPanelInternalData.prevDragAggFnColid = null;
             // 是否移入有效列
             if (column && (isCrossDrag || column.level === 1)) {
                 evnt.preventDefault();
                 const offsetY = evnt.clientY - optEl.getBoundingClientRect().y;
                 const dragPos = offsetY < optEl.clientHeight / 2 ? 'top' : 'bottom';
-                if ((dragCol && dragCol.id === column.id) ||
+                if (!dragCol ||
+                    (dragCol && dragCol.id === column.id) ||
                     (!isCrossDrag && column.level > 1) ||
                     (!immediate && column.level > 1) ||
                     column.renderFixed) {

package/es/table/src/columnInfo.js

@@ -108,6 +108,7 @@ export class ColumnInfo {
             halfVisible: false,
             defaultVisible: visible,
             defaultFixed: _vm.fixed,
+            defaultAggFunc: _vm.aggFunc,
             checked: false,
             halfChecked: false,
             disabled: false,

package/es/table/src/methods.js

@@ -167,7 +167,8 @@ function restoreCustomStorage($xeTable) {
     const isCustomVisible = hangleStorageDefaultValue(storageOpts.visible, isAllCustom);
     const isCustomFixed = hangleStorageDefaultValue(storageOpts.fixed, isAllCustom);
     const isCustomSort = hangleStorageDefaultValue(storageOpts.sort, isAllCustom);
-    if (storage && (customConfig ? isEnableConf(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) {
+    const isCustomAggFunc = hangleStorageDefaultValue(storageOpts.aggFunc, isAllCustom);
+    if (storage && (customConfig ? isEnableConf(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort || isCustomAggFunc)) {
         if (!tableId) {
             errLog('vxe.error.reqProp', ['id']);
             return;
@@ -2611,7 +2612,19 @@ function handleRecalculateLayout($xeTable, reFull) {
         }
     });
 }
-const handleUpdateRowGroup = ($xeTable, groupFields) => {
+function handleUpdateAggValues($xeTable) {
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const { visibleColumn } = internalData;
+    const aggCols = [];
+    visibleColumn.forEach(column => {
+        if (column.aggFunc) {
+            aggCols.push(column);
+        }
+    });
+    reactData.aggHandleAggColumns = aggCols;
+}
+function handleUpdateRowGroup($xeTable, groupFields) {
     const reactData = $xeTable;
     const aggFields = [];
     const aggConfs = [];
@@ -2625,7 +2638,8 @@ const handleUpdateRowGroup = ($xeTable, groupFields) => {
     }
     reactData.rowGroupList = aggConfs;
     reactData.aggHandleFields = aggFields;
-};
+    handleUpdateAggValues($xeTable);
+}
 function handleeGroupSummary($xeTable, aggList) {
     const aggregateOpts = $xeTable.computeAggregateOpts;
     const { mapChildrenField } = aggregateOpts;
@@ -3121,6 +3135,7 @@ function parseColumns($xeTable, isReset) {
         }
     });
     handleTableColumn($xeTable);
+    handleUpdateAggValues($xeTable);
     if (isReset) {
         return $xeTable.updateFooter().then(() => {
             return $xeTable.recalculate();
@@ -4954,15 +4969,18 @@ const Methods = {
         const isCustomVisible = hangleStorageDefaultValue(storageOpts.visible, isAllCustom);
         const isCustomFixed = hangleStorageDefaultValue(storageOpts.fixed, isAllCustom);
         const isCustomSort = hangleStorageDefaultValue(storageOpts.sort, isAllCustom);
+        const isCustomAggFunc = hangleStorageDefaultValue(storageOpts.aggFunc, isAllCustom);
         const resizableData = {};
         const sortData = {};
         const visibleData = {};
         const fixedData = {};
+        const aggFuncData = {};
         const storeData = {
             resizableData: undefined,
             sortData: undefined,
             visibleData: undefined,
-            fixedData: undefined
+            fixedData: undefined,
+            aggFuncData: undefined
         };
         if (!id) {
             if (storage) {
@@ -4974,6 +4992,7 @@ const Methods = {
         let hasSort = 0;
         let hasFixed = 0;
         let hasVisible = 0;
+        let hasAggFunc = 0;
         XEUtils.eachTree(collectColumn, (column, index, items, path, parentColumn) => {
             const colKey = column.getKey();
             if (!colKey) {
@@ -5005,6 +5024,10 @@ const Methods = {
                     visibleData[colKey] = true;
                 }
             }
+            if (isCustomAggFunc && column.aggFunc !== column.defaultAggFunc) {
+                hasAggFunc = 1;
+                aggFuncData[colKey] = column.aggFunc;
+            }
         });
         if (hasResizable) {
             storeData.resizableData = resizableData;
@@ -5018,6 +5041,9 @@ const Methods = {
         if (hasVisible) {
             storeData.visibleData = visibleData;
         }
+        if (hasAggFunc) {
+            storeData.aggFuncData = aggFuncData;
+        }
         return storeData;
     },
     saveCustomStore(type) {
@@ -5027,17 +5053,18 @@ const Methods = {
         const { customConfig } = props;
         const tableId = $xeTable.computeTableId;
         const customOpts = $xeTable.computeCustomOpts;
-        const { updateStore, storage } = customOpts;
+        const { updateStore, storage, storeOptions } = 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;
+        const storageOpts = isAllCustom ? {} : Object.assign({}, storage || {}, storeOptions);
+        const isCustomResizable = hangleStorageDefaultValue(storageOpts.resizable, isAllCustom);
+        const isCustomVisible = hangleStorageDefaultValue(storageOpts.visible, isAllCustom);
+        const isCustomFixed = hangleStorageDefaultValue(storageOpts.fixed, isAllCustom);
+        const isCustomSort = hangleStorageDefaultValue(storageOpts.sort, isAllCustom);
+        const isCustomAggFunc = hangleStorageDefaultValue(storageOpts.aggFunc, isAllCustom);
         if (type !== 'reset') {
             reactData.isCustomStatus = true;
         }
-        if (storage && (customConfig ? isEnableConf(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) {
+        if (storage && (customConfig ? isEnableConf(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort || isCustomAggFunc)) {
             if (!tableId) {
                 errLog('vxe.error.reqProp', ['id']);
                 return this.$nextTick();
@@ -5722,9 +5749,10 @@ const Methods = {
         const $xeGrid = $xeTable.$xeGrid;
         const { $el, $refs, $toolbar, mouseConfig, editStore, ctxMenuStore, editRules, editOpts, validOpts, areaOpts, filterStore, customStore, getRowNode } = this;
         const { actived } = editStore;
-        const { customWrapper, refValidTooltip } = $refs;
         const tableFilter = $refs.refTableFilter;
         const tableMenu = $refs.refTableMenu;
+        const tableCustom = $refs.refTableCustom;
+        const validTooltip = $refs.refValidTooltip;
         // 筛选
         if (tableFilter) {
             if (getEventTargetNode(evnt, $el, 'vxe-cell--filter').flag) {
@@ -5740,11 +5768,11 @@ const Methods = {
             }
         }
         // 自定义列
-        if (customWrapper) {
+        if (tableCustom) {
             if (customStore.btnEl === evnt.target || getEventTargetNode(evnt, document.body, 'vxe-toolbar-custom-target').flag) {
                 // 如果点击了自定义列按钮
             }
-            else if (getEventTargetNode(evnt, customWrapper.$el).flag) {
+            else if (getEventTargetNode(evnt, tableCustom.$el).flag) {
                 // 如果点击自定义列容器
             }
             else {
@@ -5759,7 +5787,7 @@ const Methods = {
                 // 如果是激活状态，点击了单元格之外
                 const cell = actived.args.cell;
                 if ((!cell || !getEventTargetNode(evnt, cell).flag)) {
-                    if (refValidTooltip && getEventTargetNode(evnt, refValidTooltip.$el).flag) {
+                    if (validTooltip && getEventTargetNode(evnt, validTooltip.$el).flag) {
                         // 如果是激活状态，且点击了校验提示框
                     }
                     else if (!this.lastCallTime || this.lastCallTime + 50 < Date.now()) {
@@ -6850,7 +6878,15 @@ const Methods = {
                         }
                         vLen++;
                     });
-                const isSelected = selectCheckboxMaps[rowid] || (sLen >= vLen && (vLen >= 1 || hLen >= 1));
+                let isSelected = (sLen >= vLen && (vLen >= 1 || hLen >= 1));
+                if (checkMethod) {
+                    if (checkMethod({ $table: $xeTable, row })) {
+                        isSelected = sLen >= vLen;
+                    }
+                    else {
+                        isSelected = selectCheckboxMaps[rowid];
+                    }
+                }
                 const halfSelect = !isSelected && (sLen >= 1 || hLen >= 1);
                 if (checkField) {
                     XEUtils.set(row, checkField, isSelected);
@@ -10235,6 +10271,11 @@ const Methods = {
             return updateStyle($xeTable);
         });
     },
+    handleUpdateAggData() {
+        const $xeTable = this;
+        const internalData = $xeTable;
+        return loadTableData($xeTable, internalData.tableSynchData, true);
+    },
     updateZindex() {
         if (this.zIndex) {
             this.tZindex = this.zIndex;

package/es/table/src/table.js

@@ -647,6 +647,7 @@ export default {
             isRowGroupStatus: false,
             rowGroupList: [],
             aggHandleFields: [],
+            aggHandleAggColumns: [],
             rowGroupExpandedFlag: 1,
             rowExpandedFlag: 1,
             treeExpandedFlag: 1,
@@ -1571,6 +1572,16 @@ export default {
                 return;
             }
         }
+        if (!$xeTable.handlePivotTableAggregateData) {
+            if (customOpts.allowGroup) {
+                errLog('vxe.error.notProp', ['custom-config.allowGroup']);
+                return;
+            }
+            if (customOpts.allowValues) {
+                errLog('vxe.error.notProp', ['custom-config.allowValues']);
+                return;
+            }
+        }
         if (treeConfig && rowOpts.drag && !treeOpts.transform) {
             warnLog('vxe.error.notSupportProp', ['column-config.drag', 'tree-config.transform=false', 'tree-config.transform=true']);
         }
@@ -1583,8 +1594,8 @@ export default {
         if (aggregateOpts.countFields) {
             warnLog('vxe.error.delProp', ['row-group-config.countFields', 'column.agg-func']);
         }
-        if (aggregateOpts.countMethod) {
-            warnLog('vxe.error.delProp', ['row-group-config.countMethod', 'aggregate-config.aggregateMethod']);
+        if (aggregateOpts.aggregateMethod) {
+            warnLog('vxe.error.delProp', ['row-group-config.aggregateMethod', 'aggregate-config.countMethod']);
         }
         if (props.treeConfig && treeOpts.children) {
             warnLog('vxe.error.delProp', ['tree-config.children', 'tree-config.childrenField']);
@@ -1986,7 +1997,7 @@ export default {
             initStore.custom
                 ? h(TableCustomPanelComponent, {
                     key: 'cs',
-                    ref: 'customWrapper',
+                    ref: 'refTableCustom',
                     props: {
                         customStore
                     }

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "3.15.45";
+export const version = "3.15.47";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({
@@ -103,6 +103,7 @@ VxeUI.setConfig({
                 // rowGroup: false,
                 // aggFunc: false
             },
+            // autoAggGroupValues: false,
             //  checkMethod () {},
             modalOptions: {
                 showMaximize: true,
@@ -142,7 +143,8 @@ VxeUI.setConfig({
             childrenField: '_X_ROW_CHILDREN',
             mapChildrenField: '_X_ROW_CHILD_LIST',
             indent: 20,
-            showIcon: true
+            showIcon: true,
+            maxGroupSize: 4
         },
         treeConfig: {
             padding: true,
@@ -312,9 +314,10 @@ VxeUI.setIcon({
     TABLE_DRAG_DISABLED: iconPrefix + 'no-drop',
     TABLE_ROW_GROUP_OPEN: iconPrefix + 'arrow-right rotate90',
     TABLE_ROW_GROUP_CLOSE: iconPrefix + 'arrow-right',
-    TABLE_AGGREGATION_GROUPING: iconPrefix + 'grouping',
-    TABLE_AGGREGATION_VALUES: iconPrefix + 'values',
-    TABLE_AGGREGATION_DELETE: iconPrefix + 'close',
+    TABLE_AGGREGATE_GROUPING: iconPrefix + 'grouping',
+    TABLE_AGGREGATE_VALUES: iconPrefix + 'values',
+    TABLE_AGGREGATE_SORT: iconPrefix + 'drag-handle',
+    TABLE_AGGREGATE_DELETE: iconPrefix + 'close',
     // toolbar
     TOOLBAR_TOOLS_REFRESH: iconPrefix + 'repeat',
     TOOLBAR_TOOLS_REFRESH_LOADING: iconPrefix + 'repeat roll',

package/es/ui/src/log.js

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