vxe-table 3.15.44 → 3.15.45

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

@@ -15,22 +15,29 @@ const {
   getIcon,
   renderEmptyElement
 } = _ui.VxeUI;
-function showDropTip(_vm, evnt, optEl, showLine, dragPos) {
-  const {
-    prevDragToChild
-  } = _vm;
-  const el = _vm.$refs.bodyElemRef;
-  if (!el) {
+function showDropTip($xeTableCustomPanel, evnt, optEl, showLine, dragPos) {
+  const customPanelInternalData = $xeTableCustomPanel.internalData;
+  const bodyWrapperElem = $xeTableCustomPanel.$refs.refBodyWrapperElem;
+  if (!bodyWrapperElem) {
+    return;
+  }
+  const customBodyElem = $xeTableCustomPanel.$refs.refCustomBodyElem;
+  if (!customBodyElem) {
     return;
   }
-  const wrapperRect = el.getBoundingClientRect();
+  const {
+    prevDragToChild
+  } = customPanelInternalData;
+  const bodyWrapperRect = bodyWrapperElem.getBoundingClientRect();
+  const customBodyRect = customBodyElem.getBoundingClientRect();
   if (optEl) {
-    const dragLineEl = _vm.$refs.refDragLineElem;
+    const dragLineEl = $xeTableCustomPanel.$refs.refDragLineElem;
     if (dragLineEl) {
       if (showLine) {
         const optRect = optEl.getBoundingClientRect();
         dragLineEl.style.display = 'block';
-        dragLineEl.style.top = `${Math.max(1, optRect.y + el.scrollTop - wrapperRect.y)}px`;
+        dragLineEl.style.left = `${Math.max(0, customBodyRect.x - bodyWrapperRect.x)}px`;
+        dragLineEl.style.top = `${Math.max(1, optRect.y + bodyWrapperElem.scrollTop - bodyWrapperRect.y)}px`;
         dragLineEl.style.height = `${optRect.height}px`;
         dragLineEl.style.width = `${optRect.width}px`;
         dragLineEl.setAttribute('drag-pos', dragPos);
@@ -40,17 +47,17 @@ function showDropTip(_vm, evnt, optEl, showLine, dragPos) {
       }
     }
   }
-  const dragTipEl = _vm.$refs.refDragTipElem;
+  const dragTipEl = $xeTableCustomPanel.$refs.refDragTipElem;
   if (dragTipEl) {
     dragTipEl.style.display = 'block';
-    dragTipEl.style.top = `${Math.min(el.clientHeight + el.scrollTop - dragTipEl.clientHeight, evnt.clientY + el.scrollTop - wrapperRect.y)}px`;
-    dragTipEl.style.left = `${Math.min(el.clientWidth + el.scrollLeft - dragTipEl.clientWidth, evnt.clientX + el.scrollLeft - wrapperRect.x)}px`;
+    dragTipEl.style.top = `${Math.min(bodyWrapperElem.clientHeight + bodyWrapperElem.scrollTop - dragTipEl.clientHeight, evnt.clientY + bodyWrapperElem.scrollTop - bodyWrapperRect.y)}px`;
+    dragTipEl.style.left = `${Math.min(bodyWrapperElem.clientWidth + bodyWrapperElem.scrollLeft - dragTipEl.clientWidth, evnt.clientX + bodyWrapperElem.scrollLeft - bodyWrapperRect.x)}px`;
     dragTipEl.setAttribute('drag-status', showLine ? prevDragToChild ? 'sub' : 'normal' : 'disabled');
   }
 }
-function hideDropTip(_vm) {
-  const dragTipEl = _vm.$refs.refDragTipElem;
-  const dragLineEl = _vm.$refs.refDragLineElem;
+function hideDropTip($xeTableCustomPanel) {
+  const dragTipEl = $xeTableCustomPanel.$refs.refDragTipElem;
+  const dragLineEl = $xeTableCustomPanel.$refs.refDragLineElem;
   if (dragTipEl) {
     dragTipEl.style.display = '';
   }
@@ -58,9 +65,12 @@ function hideDropTip(_vm) {
     dragLineEl.style.display = '';
   }
 }
-const renderDragTip = (h, _vm) => {
-  const $xeTable = _vm.$xeTable;
-  const dragCol = $xeTable.dragColumnRef;
+const renderDragTip = (h, $xeTableCustomPanel) => {
+  const $xeTable = $xeTableCustomPanel.$xeTable;
+  const customPanelReactData = $xeTableCustomPanel.reactData;
+  const {
+    dragTipText
+  } = customPanelReactData;
   const columnDragOpts = $xeTable.computeColumnDragOpts;
   return h('div', {}, [h('div', {
     ref: 'refDragLineElem',
@@ -78,18 +88,22 @@ const renderDragTip = (h, _vm) => {
     class: ['vxe-table-custom-popup--drag-tip-normal-status', getIcon().TABLE_DRAG_STATUS_ROW]
   }), h('span', {
     class: ['vxe-table-custom-popup--drag-tip-sub-status', getIcon().TABLE_DRAG_STATUS_SUB_ROW]
+  }), h('span', {
+    class: ['vxe-table-custom-popup--drag-tip-group-status', getIcon().TABLE_DRAG_STATUS_AGG_GROUP]
+  }), h('span', {
+    class: ['vxe-table-custom-popup--drag-tip-values-status', getIcon().TABLE_DRAG_STATUS_AGG_VALUES]
   }), h('span', {
     class: ['vxe-table-custom-popup--drag-tip-disabled-status', getIcon().TABLE_DRAG_DISABLED]
   })]), h('div', {
     class: 'vxe-table-custom-popup--drag-tip-content'
-  }, getI18n('vxe.custom.cstmDragTarget', [dragCol && dragCol.type !== 'html' ? dragCol.getTitle() : '']))])])]);
+  }, `${dragTipText || ''}`)])])]);
 };
 const renderSimplePanel = (h, _vm) => {
   const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
   const props = _vm;
   const $xeTable = _vm.$xeTable;
   const tableProps = $xeTable;
-  const reactData = $xeTable;
+  const tableReactData = $xeTable;
   const $xeGrid = $xeTable.$xeGrid;
   const {
     customStore
@@ -102,7 +116,7 @@ const renderSimplePanel = (h, _vm) => {
   const {
     isCustomStatus,
     customColumnList
-  } = reactData;
+  } = tableReactData;
   const customOpts = $xeTable.computeCustomOpts;
   const {
     immediate
@@ -186,9 +200,9 @@ const renderSimplePanel = (h, _vm) => {
           title: getI18n('vxe.custom.setting.colVisible')
         },
         on: {
-          click: () => {
+          click: evnt => {
             if (!isDisabled) {
-              _vm.changeCheckboxOption(column);
+              _vm.changeCheckboxOption(column, evnt);
             }
           }
         }
@@ -234,8 +248,10 @@ const renderSimplePanel = (h, _vm) => {
           title: getI18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft')
         },
         on: {
-          click: () => {
-            _vm.changeFixedOption(column, 'left');
+          click: ({
+            $event
+          }) => {
+            _vm.changeFixedOption(column, 'left', $event);
           }
         }
       }), h(VxeUIButtonComponent, {
@@ -247,8 +263,10 @@ const renderSimplePanel = (h, _vm) => {
           title: getI18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight')
         },
         on: {
-          click: () => {
-            _vm.changeFixedOption(column, 'right');
+          click: ({
+            $event
+          }) => {
+            _vm.changeFixedOption(column, 'right', $event);
           }
         }
       })]) : renderEmptyElement($xeTable)]));
@@ -262,11 +280,15 @@ const renderSimplePanel = (h, _vm) => {
     style: maxHeight && !['left', 'right'].includes(placement || '') ? {
       maxHeight: `${maxHeight}px`
     } : {}
-  }, customStore.visible ? [!treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel ? h($xeTable.getPivotTableAggregateSimplePanel(), {
+  }, customStore.visible ? [h('div', {
+    ref: 'refBodyWrapperElem',
+    class: 'vxe-table-custom-body-wrapper'
+  }, [!treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel ? h($xeTable.getPivotTableAggregateSimplePanel(), {
     props: {
       customStore
     }
   }) : renderEmptyElement($xeTable), h('div', {
+    ref: 'refCustomBodyElem',
     class: 'vxe-table-custom--handle-wrapper'
   }, [h('div', {
     class: 'vxe-table-custom--header'
@@ -292,7 +314,6 @@ const renderSimplePanel = (h, _vm) => {
   }, getI18n('vxe.toolbar.customAll'))]) : h('span', {
     class: 'vxe-checkbox--label'
   }, getI18n('vxe.table.customTitle'))])])]), h('div', {
-    ref: 'bodyElemRef',
     class: 'vxe-table-custom--body'
   }, [topSlot ? h('div', {
     class: 'vxe-table-custom--panel-top'
@@ -307,7 +328,7 @@ const renderSimplePanel = (h, _vm) => {
     on: customWrapperOns
   }, colVNs), bottomSlot ? h('div', {
     class: 'vxe-table-custom--panel-bottom'
-  }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement($xeTable), renderDragTip(h, _vm)]), customOpts.showFooter ? h('div', {
+  }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement($xeTable)]), customOpts.showFooter ? h('div', {
     class: 'vxe-table-custom--footer'
   }, footerSlot ? $xeTable.callSlot(footerSlot, params, h) : [h('div', {
     class: 'vxe-table-custom--footer-buttons'
@@ -345,18 +366,18 @@ const renderSimplePanel = (h, _vm) => {
     on: {
       click: _vm.confirmCustomEvent
     }
-  })])]) : null])] : []);
+  })])]) : null]), renderDragTip(h, _vm)])] : []);
 };
-const renderPopupPanel = (h, _vm) => {
+const renderPopupPanel = (h, $xeTableCustomPanel) => {
   const VxeUIModalComponent = _ui.VxeUI.getComponent('VxeModal');
   const VxeUIDrawerComponent = _ui.VxeUI.getComponent('VxeDrawer');
   const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
   const VxeUINumberInputComponent = _ui.VxeUI.getComponent('VxeInput');
-  const $xeTableCustomPanel = _vm;
-  const props = _vm;
-  const $xeTable = _vm.$xeTable;
+  const _vm = $xeTableCustomPanel;
+  const props = $xeTableCustomPanel;
+  const $xeTable = $xeTableCustomPanel.$xeTable;
   const tableProps = $xeTable;
-  const reactData = $xeTable;
+  const tableReactData = $xeTable;
   const $xeGrid = $xeTable.$xeGrid;
   const {
     customStore
@@ -367,7 +388,7 @@ const renderPopupPanel = (h, _vm) => {
   const {
     isCustomStatus,
     customColumnList
-  } = reactData;
+  } = tableReactData;
   const customOpts = $xeTable.computeCustomOpts;
   const {
     immediate
@@ -474,9 +495,9 @@ const renderPopupPanel = (h, _vm) => {
           title: getI18n('vxe.custom.setting.colVisible')
         },
         on: {
-          click: () => {
+          click: evnt => {
             if (!isDisabled) {
-              _vm.changeCheckboxOption(column);
+              _vm.changeCheckboxOption(column, evnt);
             }
           }
         }
@@ -555,8 +576,11 @@ const renderPopupPanel = (h, _vm) => {
           }]
         },
         on: {
-          input(value) {
-            _vm.changeFixedOption(column, value);
+          change({
+            label,
+            $event
+          }) {
+            _vm.changeFixedOption(column, label, $event);
           }
         }
       })]) : renderEmptyElement($xeTable)]));
@@ -564,12 +588,12 @@ const renderPopupPanel = (h, _vm) => {
   });
   const scopedSlots = {
     default: () => {
-      if (defaultSlot) {
-        return $xeTable.callSlot(defaultSlot, params, h);
-      }
       return h('div', {
-        ref: 'bodyElemRef',
-        class: 'vxe-table-custom-popup--body'
+        ref: 'refBodyWrapperElem',
+        class: 'vxe-table-custom-popup--body-wrapper'
+      }, defaultSlot ? $xeTable.callSlot(defaultSlot, params, h) : [h('div', {
+        ref: 'refCustomBodyElem',
+        class: 'vxe-table-custom-popup--handle-wrapper'
       }, [topSlot ? h('div', {
         class: 'vxe-table-custom-popup--table-top'
       }, $xeTable.callSlot(topSlot, params, h)) : renderEmptyElement($xeTable), h('div', {
@@ -605,7 +629,7 @@ const renderPopupPanel = (h, _vm) => {
         }
       }, trVNs)])]), bottomSlot ? h('div', {
         class: 'vxe-table-custom-popup--table-bottom'
-      }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement($xeTable), renderDragTip(h, _vm)]);
+      }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement($xeTable), renderDragTip(h, _vm)])]);
     },
     footer: () => {
       if (footerSlot) {
@@ -709,27 +733,44 @@ var _default = exports.default = {
       default: () => ({})
     }
   },
+  provide() {
+    const $xeTableCustomPanel = this;
+    return {
+      $xeTableCustomPanel
+    };
+  },
   inject: {
     $xeTable: {
       default: null
     }
   },
   data() {
+    const reactData = {
+      dragCol: null,
+      dragGroup: null,
+      dragValues: null,
+      dragTipText: ''
+    };
+    const internalData = {
+      // prevDragCol: undefined,
+      // prevDragToChild: false,
+      // prevDragPos: null
+    };
     return {
-      prevDragCol: undefined,
-      prevDragToChild: false,
-      prevDragPos: null
+      reactData,
+      internalData
     };
   },
   computed: {},
   created() {
+    const $xeTableCustomPanel = this;
     const VxeUIModalComponent = _ui.VxeUI.getComponent('VxeModal');
     const VxeUIDrawerComponent = _ui.VxeUI.getComponent('VxeDrawer');
     const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
     const VxeUINumberInputComponent = _ui.VxeUI.getComponent('VxeNumberInput');
     const VxeUIRadioGroupComponent = _ui.VxeUI.getComponent('VxeRadioGroup');
-    this.$nextTick(() => {
-      const $xeTable = this.$xeTable;
+    $xeTableCustomPanel.$nextTick(() => {
+      const $xeTable = $xeTableCustomPanel.$xeTable;
       const {
         customOpts
       } = $xeTable;
@@ -754,16 +795,18 @@ var _default = exports.default = {
     });
   },
   render(h) {
-    const $xeTable = this.$xeTable;
+    const $xeTableCustomPanel = this;
+    const $xeTable = $xeTableCustomPanel.$xeTable;
     const customOpts = $xeTable.computeCustomOpts;
     if (['modal', 'drawer', 'popup'].includes(`${customOpts.mode}`)) {
-      return renderPopupPanel(h, this);
+      return renderPopupPanel(h, $xeTableCustomPanel);
     }
-    return renderSimplePanel(h, this);
+    return renderSimplePanel(h, $xeTableCustomPanel);
   },
   methods: {
     handleWrapperMouseenterEvent(evnt) {
-      const $xeTable = this.$xeTable;
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
       const {
         customStore
       } = this;
@@ -771,10 +814,12 @@ var _default = exports.default = {
       $xeTable.customOpenEvent(evnt);
     },
     handleWrapperMouseleaveEvent(evnt) {
-      const $xeTable = this.$xeTable;
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const props = $xeTableCustomPanel;
       const {
         customStore
-      } = this;
+      } = props;
       customStore.activeWrapper = false;
       setTimeout(() => {
         if (!customStore.activeBtn && !customStore.activeWrapper) {
@@ -788,9 +833,10 @@ var _default = exports.default = {
     confirmCustomEvent({
       $event
     }) {
-      const $xeTable = this.$xeTable;
-      const reactData = $xeTable;
-      reactData.isCustomStatus = true;
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const tableReactData = $xeTable;
+      tableReactData.isCustomStatus = true;
       $xeTable.saveCustom();
       $xeTable.closeCustom();
       $xeTable.emitCustomEvent('confirm', $event);
@@ -798,20 +844,23 @@ var _default = exports.default = {
     cancelCloseEvent({
       $event
     }) {
-      const $xeTable = this.$xeTable;
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
       $xeTable.closeCustom();
       $xeTable.emitCustomEvent('close', $event);
     },
     cancelCustomEvent({
       $event
     }) {
-      const $xeTable = this.$xeTable;
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
       $xeTable.cancelCustom();
       $xeTable.closeCustom();
       $xeTable.emitCustomEvent('cancel', $event);
     },
     handleResetCustomEvent(evnt) {
-      const $xeTable = this.$xeTable;
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
       $xeTable.resetCustom(true);
       $xeTable.closeCustom();
       $xeTable.emitCustomEvent('reset', evnt);
@@ -831,27 +880,13 @@ var _default = exports.default = {
         this.handleResetCustomEvent(evnt);
       }
     },
-    resetPopupCustomEvent(evnt) {
-      if (_ui.VxeUI.modal) {
-        _ui.VxeUI.modal.confirm({
-          content: getI18n('vxe.custom.cstmConfirmRestore'),
-          className: 'vxe-table--ignore-clear',
-          escClosable: true
-        }).then(type => {
-          if (type === 'confirm') {
-            this.resetCustomEvent(evnt);
-          }
-        });
-      } else {
-        this.resetCustomEvent(evnt);
-      }
-    },
     handleOptionCheck(column) {
-      const $xeTable = this.$xeTable;
-      const reactData = $xeTable;
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const tableReactData = $xeTable;
       const {
         customColumnList
-      } = reactData;
+      } = tableReactData;
       const matchObj = _xeUtils.default.findTree(customColumnList, item => item === column);
       if (matchObj && matchObj.parent) {
         const {
@@ -864,9 +899,10 @@ var _default = exports.default = {
         }
       }
     },
-    changeCheckboxOption(column) {
-      const $xeTable = this.$xeTable;
-      const reactData = $xeTable;
+    changeCheckboxOption(column, evnt) {
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const tableReactData = $xeTable;
       const customOpts = $xeTable.computeCustomOpts;
       const isChecked = !column.renderVisible;
       if (customOpts.immediate) {
@@ -875,7 +911,7 @@ var _default = exports.default = {
           item.renderVisible = isChecked;
           item.halfVisible = false;
         });
-        reactData.isCustomStatus = true;
+        tableReactData.isCustomStatus = true;
         $xeTable.handleCustom();
         $xeTable.saveCustomStore('update:visible');
       } else {
@@ -886,63 +922,114 @@ var _default = exports.default = {
       }
       this.handleOptionCheck(column);
       $xeTable.checkCustomStatus();
+      $xeTable.dispatchEvent('custom-visible-change', {
+        column,
+        checked: isChecked
+      }, evnt);
     },
     changeColumnWidth(column) {
-      const $xeTable = this.$xeTable;
-      const reactData = $xeTable;
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const tableReactData = $xeTable;
       const customOpts = $xeTable.computeCustomOpts;
       if (customOpts.immediate) {
         if (column.renderResizeWidth !== column.renderWidth) {
           column.resizeWidth = column.renderResizeWidth;
           column.renderWidth = column.renderResizeWidth;
-          reactData.isCustomStatus = true;
+          tableReactData.isCustomStatus = true;
           $xeTable.handleCustom();
           $xeTable.saveCustomStore('update:width');
         }
       }
     },
-    changeFixedOption(column, colFixed) {
-      const $xeTable = this.$xeTable;
-      const reactData = $xeTable;
+    changeFixedOption(column, colFixed, evnt) {
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const tableReactData = $xeTable;
       const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
       const customOpts = $xeTable.computeCustomOpts;
+      let targetFixed = null;
       if (customOpts.immediate) {
         if (column.renderFixed === colFixed) {
+          targetFixed = '';
           _xeUtils.default.eachTree([column], col => {
             col.fixed = '';
             col.renderFixed = '';
           });
         } else {
           if (!isMaxFixedColumn || column.renderFixed) {
+            targetFixed = colFixed;
             _xeUtils.default.eachTree([column], col => {
               col.fixed = colFixed;
               col.renderFixed = colFixed;
             });
           }
         }
-        reactData.isCustomStatus = true;
+        tableReactData.isCustomStatus = true;
         $xeTable.handleCustom();
         $xeTable.saveCustomStore('update:fixed');
       } else {
         if (column.renderFixed === colFixed) {
+          targetFixed = '';
           _xeUtils.default.eachTree([column], col => {
             col.renderFixed = '';
           });
         } else {
           if (!isMaxFixedColumn || column.renderFixed) {
+            targetFixed = colFixed;
             _xeUtils.default.eachTree([column], col => {
               col.renderFixed = colFixed;
             });
           }
         }
       }
+      if (!targetFixed !== null) {
+        $xeTable.dispatchEvent('custom-fixed-change', {
+          column,
+          fixed: targetFixed
+        }, evnt);
+      }
     },
-    allOptionEvent() {
-      const $xeTable = this.$xeTable;
+    allOptionEvent(evnt) {
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const tableReactData = $xeTable;
+      const {
+        customStore
+      } = tableReactData;
+      const isAll = !customStore.isAll;
       $xeTable.toggleCustomAllCheckbox();
+      $xeTable.dispatchEvent('custom-visible-all', {
+        checked: isAll
+      }, evnt);
+    },
+    updateColDropTipContent() {
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const customPanelReactData = $xeTableCustomPanel.reactData;
+      const {
+        dragCol
+      } = customPanelReactData;
+      const columnDragOpts = $xeTable.computeColumnDragOpts;
+      const {
+        tooltipMethod
+      } = columnDragOpts;
+      let tipContent = '';
+      if (tooltipMethod) {
+        const dtParams = {
+          $table: $xeTable,
+          column: dragCol
+        };
+        tipContent = `${tooltipMethod(dtParams) || ''}`;
+      } else {
+        tipContent = getI18n('vxe.custom.cstmDragTarget', [dragCol && dragCol.type !== 'html' ? dragCol.getTitle() : '']);
+      }
+      customPanelReactData.dragTipText = tipContent;
     },
     sortMousedownEvent(evnt) {
-      const $xeTable = this.$xeTable;
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const customPanelReactData = $xeTableCustomPanel.reactData;
       const btnEl = evnt.currentTarget;
       const cellEl = btnEl.parentElement;
       const tdEl = cellEl.parentElement;
@@ -950,44 +1037,48 @@ var _default = exports.default = {
       const colid = trEl.getAttribute('colid');
       const column = $xeTable.getColumnById(colid);
       trEl.draggable = true;
-      this.dragCol = column;
+      customPanelReactData.dragCol = column;
+      this.updateColDropTipContent();
       (0, _dom.addClass)(trEl, 'active--drag-origin');
     },
     sortMouseupEvent(evnt) {
+      const $xeTableCustomPanel = this;
+      const customPanelReactData = $xeTableCustomPanel.reactData;
       const btnEl = evnt.currentTarget;
       const cellEl = btnEl.parentElement;
       const tdEl = cellEl.parentElement;
       const trEl = tdEl.parentElement;
-      hideDropTip(this);
+      hideDropTip($xeTableCustomPanel);
       trEl.draggable = false;
-      this.dragCol = null;
+      customPanelReactData.dragCol = null;
       (0, _dom.removeClass)(trEl, 'active--drag-origin');
     },
     sortDragstartEvent(evnt) {
+      const $xeTableCustomPanel = this;
+      const customPanelReactData = $xeTableCustomPanel.reactData;
       if (evnt.dataTransfer) {
         evnt.dataTransfer.setDragImage((0, _dom.getTpImg)(), 0, 0);
       }
+      customPanelReactData.dragGroup = null;
+      customPanelReactData.dragValues = null;
     },
     sortDragendEvent(evnt) {
-      const $xeTable = this.$xeTable;
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
       const tableProps = $xeTable;
-      const reactData = $xeTable;
-      const internalData = $xeTable;
-      const {
-        dragCol,
-        prevDragPos,
-        prevDragCol,
-        prevDragToChild
-      } = this;
+      const tableReactData = $xeTable;
+      const tableInternalData = $xeTable;
+      const customPanelReactData = $xeTableCustomPanel.reactData;
+      const customPanelInternalData = $xeTableCustomPanel.internalData;
       const {
         mouseConfig
       } = tableProps;
       const {
         customColumnList
-      } = reactData;
+      } = tableReactData;
       const {
         collectColumn
-      } = internalData;
+      } = tableInternalData;
       const customOpts = $xeTable.computeCustomOpts;
       const {
         immediate
@@ -1000,8 +1091,22 @@ var _default = exports.default = {
         isToChildDrag,
         dragEndMethod
       } = columnDragOpts;
+      const {
+        dragCol,
+        dragGroup,
+        dragValues
+      } = customPanelReactData;
+      const {
+        prevDragCol,
+        prevDragPos,
+        prevDragToChild
+      } = customPanelInternalData;
       const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
-      if (prevDragCol && dragCol) {
+      if (dragGroup || dragValues) {
+        if ($xeTable.handlePivotTableAggregatePanelDragendEvent) {
+          $xeTable.handlePivotTableAggregatePanelDragendEvent(evnt);
+        }
+      } else if (prevDragCol && dragCol) {
         // 判断是否有拖动
         if (prevDragCol !== dragCol) {
           const dragColumn = dragCol;
@@ -1127,7 +1232,7 @@ var _default = exports.default = {
               nafIndex = _xeUtils.default.findIndexOf(customColumnList, item => item.id === newColumn.id);
               customColumnList.splice(nafIndex + dragOffsetIndex, 0, dragColumn);
             }
-            reactData.isDragColMove = true;
+            tableReactData.isDragColMove = true;
             if (mouseConfig) {
               if ($xeTable.clearSelected) {
                 $xeTable.clearSelected();
@@ -1149,24 +1254,29 @@ var _default = exports.default = {
               }
             }, evnt);
             if (immediate) {
-              reactData.customColumnList = collectColumn.slice(0);
+              tableReactData.customColumnList = collectColumn.slice(0);
               $xeTable.handleColDragSwapColumn();
             }
           }).catch(() => {});
         }
       }
-      hideDropTip(this);
-      this.dragCol.value = null;
+      hideDropTip($xeTableCustomPanel);
+      customPanelReactData.dragCol = null;
+      customPanelReactData.dragGroup = null;
+      customPanelReactData.dragValues = null;
       trEl.draggable = false;
       trEl.removeAttribute('drag-pos');
       (0, _dom.removeClass)(trEl, 'active--drag-target');
       (0, _dom.removeClass)(trEl, 'active--drag-origin');
     },
     sortDragoverEvent(evnt) {
-      const $xeTable = this.$xeTable;
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const customPanelReactData = $xeTableCustomPanel.reactData;
+      const customPanelInternalData = $xeTableCustomPanel.internalData;
       const {
         dragCol
-      } = this;
+      } = customPanelReactData;
       const customOpts = $xeTable.computeCustomOpts;
       const {
         immediate
@@ -1180,19 +1290,21 @@ var _default = exports.default = {
       const isControlKey = (0, _dom.hasControlKey)(evnt);
       const colid = optEl.getAttribute('colid');
       const column = $xeTable.getColumnById(colid);
+      customPanelReactData.dragGroup = null;
+      customPanelReactData.dragValues = 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) {
-          showDropTip(this, evnt, optEl, false, dragPos);
+          showDropTip($xeTableCustomPanel, evnt, optEl, false, dragPos);
           return;
         }
-        this.prevDragToChild = !!(isCrossDrag && isToChildDrag && isControlKey && immediate);
-        this.prevDragCol = column;
-        this.prevDragPos = dragPos;
-        showDropTip(this, evnt, optEl, true, dragPos);
+        customPanelInternalData.prevDragToChild = !!(isCrossDrag && isToChildDrag && isControlKey && immediate);
+        customPanelInternalData.prevDragCol = column;
+        customPanelInternalData.prevDragPos = dragPos;
+        showDropTip($xeTableCustomPanel, evnt, optEl, true, dragPos);
       }
     }
   }