vxe-table 3.15.46 → 3.15.47

package/lib/index.umd.js

@@ -2002,7 +2002,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.15.46";
+const version = "3.15.47";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2105,6 +2105,7 @@ core_.VxeUI.setConfig({
         // rowGroup: false,
         // aggFunc: false
       },
+      // autoAggGroupValues: false,
       //  checkMethod () {},
       modalOptions: {
         showMaximize: true,
@@ -2144,7 +2145,8 @@ core_.VxeUI.setConfig({
       childrenField: '_X_ROW_CHILDREN',
       mapChildrenField: '_X_ROW_CHILD_LIST',
       indent: 20,
-      showIcon: true
+      showIcon: true,
+      maxGroupSize: 4
     },
     treeConfig: {
       padding: true,
@@ -2314,9 +2316,10 @@ core_.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',
@@ -2662,7 +2665,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.15.46"}`;
+const log_version = `table v${"3.15.47"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -2785,6 +2788,7 @@ class ColumnInfo {
       halfVisible: false,
       defaultVisible: visible,
       defaultFixed: _vm.fixed,
+      defaultAggFunc: _vm.aggFunc,
       checked: false,
       halfChecked: false,
       disabled: false,
@@ -5350,7 +5354,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;
@@ -8275,7 +8280,21 @@ 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 = [];
@@ -8289,7 +8308,8 @@ const handleUpdateRowGroup = ($xeTable, groupFields) => {
   }
   reactData.rowGroupList = aggConfs;
   reactData.aggHandleFields = aggFields;
-};
+  handleUpdateAggValues($xeTable);
+}
 function handleeGroupSummary($xeTable, aggList) {
   const aggregateOpts = $xeTable.computeAggregateOpts;
   const {
@@ -8843,6 +8863,7 @@ function parseColumns($xeTable, isReset) {
     }
   });
   handleTableColumn($xeTable);
+  handleUpdateAggValues($xeTable);
   if (isReset) {
     return $xeTable.updateFooter().then(() => {
       return $xeTable.recalculate();
@@ -10964,15 +10985,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) {
@@ -10984,6 +11008,7 @@ const Methods = {
     let hasSort = 0;
     let hasFixed = 0;
     let hasVisible = 0;
+    let hasAggFunc = 0;
     external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(collectColumn, (column, index, items, path, parentColumn) => {
       const colKey = column.getKey();
       if (!colKey) {
@@ -11017,6 +11042,10 @@ const Methods = {
           visibleData[colKey] = true;
         }
       }
+      if (isCustomAggFunc && column.aggFunc !== column.defaultAggFunc) {
+        hasAggFunc = 1;
+        aggFuncData[colKey] = column.aggFunc;
+      }
     });
     if (hasResizable) {
       storeData.resizableData = resizableData;
@@ -11030,6 +11059,9 @@ const Methods = {
     if (hasVisible) {
       storeData.visibleData = visibleData;
     }
+    if (hasAggFunc) {
+      storeData.aggFuncData = aggFuncData;
+    }
     return storeData;
   },
   saveCustomStore(type) {
@@ -11043,18 +11075,20 @@ const Methods = {
     const customOpts = $xeTable.computeCustomOpts;
     const {
       updateStore,
-      storage
+      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();
@@ -11835,12 +11869,10 @@ const Methods = {
     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) {
@@ -11854,10 +11886,10 @@ 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 {
         if (!getEventTargetNode(evnt, document.body, 'vxe-table--ignore-clear').flag) {
@@ -11871,7 +11903,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()) {
             if (!getEventTargetNode(evnt, document.body, 'vxe-table--ignore-clear').flag) {
@@ -17121,6 +17153,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;
@@ -19484,8 +19521,8 @@ function panel_showDropTip($xeTableCustomPanel, evnt, optEl, showLine, dragPos)
   } = 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();
@@ -19500,6 +19537,10 @@ function panel_showDropTip($xeTableCustomPanel, evnt, optEl, showLine, dragPos)
         dragLineEl.style.display = '';
       }
     }
+  } else {
+    if (dragLineEl) {
+      dragLineEl.style.display = 'node';
+    }
   }
   const dragTipEl = $xeTableCustomPanel.$refs.refDragTipElem;
   if (dragTipEl) {
@@ -19736,7 +19777,7 @@ const renderSimplePanel = (h, _vm) => {
     } : {}
   }, customStore.visible ? [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(), {
     props: {
       customStore
@@ -20201,12 +20242,14 @@ const renderPopupPanel = (h, $xeTableCustomPanel) => {
   data() {
     const reactData = {
       dragCol: null,
+      dragGroupField: null,
+      dragAggFnCol: null,
       dragTipText: ''
     };
     const internalData = {
       // prevDragCol: undefined,
-      // prevDragGroup: undefined,
-      // prevDragValues: undefined,
+      // prevDragGroupField: undefined,
+      // prevDragAggFnColid: undefined,
       // prevDragToChild: false,
       // prevDragPos: null
     };
@@ -20492,6 +20535,8 @@ const renderPopupPanel = (h, $xeTableCustomPanel) => {
       const column = $xeTable.getColumnById(colid);
       trEl.draggable = true;
       customPanelReactData.dragCol = column;
+      customPanelReactData.dragGroupField = null;
+      customPanelReactData.dragAggFnCol = null;
       this.updateColDropTipContent();
       addClass(trEl, 'active--drag-origin');
     },
@@ -20505,6 +20550,8 @@ const renderPopupPanel = (h, $xeTableCustomPanel) => {
       panel_hideDropTip($xeTableCustomPanel);
       trEl.draggable = false;
       customPanelReactData.dragCol = null;
+      customPanelReactData.dragGroupField = null;
+      customPanelReactData.dragAggFnCol = null;
       removeClass(trEl, 'active--drag-origin');
     },
     sortDragstartEvent(evnt) {
@@ -20513,8 +20560,8 @@ const renderPopupPanel = (h, $xeTableCustomPanel) => {
       if (evnt.dataTransfer) {
         evnt.dataTransfer.setDragImage(getTpImg(), 0, 0);
       }
-      customPanelInternalData.prevDragGroup = null;
-      customPanelInternalData.prevDragValues = null;
+      customPanelInternalData.prevDragGroupField = null;
+      customPanelInternalData.prevDragAggFnColid = null;
     },
     sortDragendEvent(evnt) {
       const $xeTableCustomPanel = this;
@@ -20550,13 +20597,13 @@ const renderPopupPanel = (h, $xeTableCustomPanel) => {
       } = customPanelReactData;
       const {
         prevDragCol,
-        prevDragGroup,
-        prevDragValues,
+        prevDragGroupField,
+        prevDragAggFnColid,
         prevDragPos,
         prevDragToChild
       } = customPanelInternalData;
       const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
-      if (prevDragGroup || prevDragValues) {
+      if (prevDragGroupField || prevDragAggFnColid) {
         if ($xeTable.handlePivotTableAggregatePanelDragendEvent) {
           $xeTable.handlePivotTableAggregatePanelDragendEvent(evnt);
         }
@@ -20716,8 +20763,10 @@ const renderPopupPanel = (h, $xeTableCustomPanel) => {
       }
       panel_hideDropTip($xeTableCustomPanel);
       customPanelReactData.dragCol = null;
-      customPanelInternalData.prevDragGroup = null;
-      customPanelInternalData.prevDragValues = 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');
@@ -20744,14 +20793,14 @@ const renderPopupPanel = (h, $xeTableCustomPanel) => {
       const isControlKey = hasControlKey(evnt);
       const colid = optEl.getAttribute('colid');
       const column = $xeTable.getColumnById(colid);
-      customPanelInternalData.prevDragGroup = null;
-      customPanelInternalData.prevDragValues = 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 || !isCrossDrag && column.level > 1 || !immediate && column.level > 1 || column.renderFixed) {
+        if (!dragCol || dragCol && dragCol.id === column.id || !isCrossDrag && column.level > 1 || !immediate && column.level > 1 || column.renderFixed) {
           panel_showDropTip($xeTableCustomPanel, evnt, optEl, false, dragPos);
           return;
         }
@@ -27155,7 +27204,9 @@ function emitCustomEvent($xeTable, type, evnt) {
         allowVisible,
         allowSort,
         allowFixed,
-        allowResizable
+        allowResizable,
+        allowGroup,
+        allowValues
       } = customOpts;
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(customColumnList, (column, index, items, path, parentColumn) => {
         if (parentColumn) {
@@ -27181,6 +27232,9 @@ function emitCustomEvent($xeTable, type, evnt) {
         if (allowVisible) {
           column.visible = column.renderVisible;
         }
+        if (allowGroup && allowValues) {
+          column.aggFunc = column.renderAggFn;
+        }
       });
       reactData.isCustomStatus = true;
       reactData.isDragColMove = true;
@@ -27188,14 +27242,17 @@ function emitCustomEvent($xeTable, type, evnt) {
         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);
             } else {
               $xeTable.clearRowGroups();
             }
+          } else {
+            // 更新聚合函数
+            $xeTable.handleUpdateAggData();
           }
         }
       });
@@ -27260,7 +27317,8 @@ function emitCustomEvent($xeTable, type, evnt) {
         visible: true,
         resizable: options === true,
         fixed: options === true,
-        sort: options === true
+        sort: options === true,
+        aggFunc: options === true
       }, options);
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(collectColumn, column => {
         if (opts.resizable) {
@@ -27278,12 +27336,16 @@ function emitCustomEvent($xeTable, type, evnt) {
         })) {
           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) {
@@ -27291,6 +27353,8 @@ function emitCustomEvent($xeTable, type, evnt) {
             } else {
               $xeTable.clearRowGroups();
             }
+          } else {
+            $xeTable.handleUpdateAggData();
           }
         }
       });
@@ -28106,6 +28170,7 @@ function renderBody(h, $xeTable) {
       isRowGroupStatus: false,
       rowGroupList: [],
       aggHandleFields: [],
+      aggHandleAggColumns: [],
       rowGroupExpandedFlag: 1,
       rowExpandedFlag: 1,
       treeExpandedFlag: 1,
@@ -29122,6 +29187,16 @@ function renderBody(h, $xeTable) {
         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']);
     }
@@ -29134,8 +29209,8 @@ function renderBody(h, $xeTable) {
     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']);
@@ -29544,7 +29619,7 @@ function renderBody(h, $xeTable) {
      */
     initStore.custom ? h(panel, {
       key: 'cs',
-      ref: 'customWrapper',
+      ref: 'refTableCustom',
       props: {
         customStore
       }
@@ -33651,6 +33726,7 @@ const Toolbar = VxeToolbar;
       customCancel: '取消',
       customRestore: '恢复默认',
       maxFixedCol: '最大冻结列的数量不能超过 {0} 个',
+      maxGroupCol: '最大分组字段的数量不能超过 {0} 个',
       dragTip: '移动：{0}',
       resizeColTip: '宽：{0} 像素',
       resizeRowTip: '高：{0} 像素',
@@ -34133,7 +34209,19 @@ const Toolbar = VxeToolbar;
       extendPivotTable: {
         aggregation: {
           grouping: '分组',
-          values: '值'
+          values: '值',
+          groupPlaceholder: '拖至此处进行分组',
+          valuesPlaceholder: '拖至此处进行聚合',
+          dragExistCol: '该列已存在'
+        },
+        aggFuncs: {
+          sum: '求和',
+          count: '计数',
+          avg: '平均值',
+          min: '最小值',
+          max: '最大值',
+          first: '首个值',
+          last: '末尾值'
         }
       },
       filterComplexInput: {