vxe-table 3.10.16 → 3.11.0

package/lib/table/src/methods.js

@@ -407,66 +407,124 @@ function updateRowDropOrigin($xeTable, row) {
     });
   }
 }
-function clearRowDropTarget($xeTable) {
+const updateRowDropTipContent = ($xeTable, tdEl) => {
+  const reactData = $xeTable;
+  const props = $xeTable;
+  const {
+    dragConfig
+  } = props;
+  const {
+    dragRow
+  } = reactData;
+  const rowDragOpts = $xeTable.computeRowDragOpts;
+  const {
+    tooltipMethod
+  } = rowDragOpts;
+  const rTooltipMethod = tooltipMethod || (dragConfig ? dragConfig.rowTooltipMethod : null);
+  let tipContent = '';
+  if (rTooltipMethod) {
+    tipContent = `${rTooltipMethod({
+      row: dragRow
+    }) || ''}`;
+  } else {
+    tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
+  }
+  reactData.dragTipText = tipContent;
+};
+const updateColDropOrigin = ($xeTable, column) => {
   const el = $xeTable.$el;
   if (el) {
-    const clss = 'row--drag-active-target';
-    _xeUtils.default.arrayEach(el.querySelectorAll(`.${clss}`), elem => {
-      (0, _dom.removeClass)(elem, clss);
+    const clss = 'col--drag-origin';
+    _xeUtils.default.arrayEach(el.querySelectorAll(`[colid="${column.id}"]`), elem => {
+      (0, _dom.addClass)(elem, clss);
     });
   }
-}
-function updateRowDropTarget($xeTable, row, dragPos) {
+};
+const clearColDropOrigin = $xeTable => {
   const el = $xeTable.$el;
   if (el) {
-    const clss = 'row--drag-active-target';
-    const rowid = (0, _util.getRowid)($xeTable, row);
-    _xeUtils.default.arrayEach(el.querySelectorAll(`[rowid="${rowid}"]`), elem => {
-      (0, _dom.addClass)(elem, clss);
-      elem.setAttribute('drag-pos', dragPos);
+    const clss = 'col--drag-origin';
+    _xeUtils.default.arrayEach(el.querySelectorAll(`.${clss}`), elem => {
+      elem.draggable = false;
+      (0, _dom.removeClass)(elem, clss);
     });
   }
-}
-function showRowDropTip(evnt, $xeTable) {
-  const rdTipEl = $xeTable.$refs.refRowDragTipElem;
-  if (!rdTipEl) {
-    return;
+};
+const updateColDropTipContent = ($xeTable, tdEl) => {
+  const reactData = $xeTable;
+  const {
+    dragCol
+  } = reactData;
+  const columnDragOpts = $xeTable.computeColumnDragOpts;
+  const {
+    tooltipMethod
+  } = columnDragOpts;
+  let tipContent = '';
+  if (tooltipMethod) {
+    tipContent = `${tooltipMethod({
+      column: dragCol
+    }) || ''}`;
+  } else {
+    tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
   }
-  const el = $xeTable.$el;
+  reactData.dragTipText = tipContent;
+};
+function showDropTip($xeTable, evnt, trEl, thEl, dragPos) {
+  const reactData = $xeTable;
+  const el = $xeTable.$refs.refElem;
   if (!el) {
     return;
   }
+  const {
+    scrollbarWidth,
+    scrollbarHeight
+  } = reactData;
+  const wrapperRect = el.getBoundingClientRect();
+  if (trEl) {
+    const rdLineEl = $xeTable.$refs.refDragRowLineElem;
+    if (rdLineEl) {
+      const trRect = trEl.getBoundingClientRect();
+      let top = Math.max(1, trRect.y - wrapperRect.y);
+      if (dragPos === 'bottom') {
+        top = Math.min(wrapperRect.height - 1, trRect.y - wrapperRect.y + trRect.height);
+      }
+      rdLineEl.style.top = `${top}px`;
+      rdLineEl.style.width = `${wrapperRect.width - scrollbarWidth}px`;
+      rdLineEl.style.display = 'block';
+    }
+  } else if (thEl) {
+    const cdLineEl = $xeTable.$refs.refDragColLineElem;
+    if (cdLineEl) {
+      const thRect = thEl.getBoundingClientRect();
+      let left = Math.max(1, thRect.x - wrapperRect.x);
+      if (dragPos === 'right') {
+        left = Math.min(wrapperRect.width - 2, thRect.x - wrapperRect.x + thRect.width);
+      }
+      cdLineEl.style.left = `${left}px`;
+      cdLineEl.style.height = `${wrapperRect.height - scrollbarHeight}px`;
+      cdLineEl.style.display = 'block';
+    }
+  }
+  const rdTipEl = $xeTable.$refs.refDragTipElem;
   if (rdTipEl) {
-    const wrapperRect = el.getBoundingClientRect();
     rdTipEl.style.display = 'block';
     rdTipEl.style.top = `${Math.min(el.clientHeight - el.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
     rdTipEl.style.left = `${Math.min(el.clientWidth - el.scrollLeft - rdTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
   }
 }
-const hideRowDropTip = $xeTable => {
-  const rdTipEl = $xeTable.$refs.refRowDragTipElem;
+const hideDropTip = $xeTable => {
+  const rdTipEl = $xeTable.$refs.refDragTipElem;
+  const rdLineEl = $xeTable.$refs.refDragRowLineElem;
+  const cdLineEl = $xeTable.$refs.refDragColLineElem;
   if (rdTipEl) {
     rdTipEl.style.display = '';
   }
-};
-const updateRowDropTipContent = ($xeTable, tdEl) => {
-  const reactData = $xeTable;
-  const {
-    dragRow
-  } = reactData;
-  const dragOpts = $xeTable.computeDragOpts;
-  const {
-    rowTooltipMethod
-  } = dragOpts;
-  let tipContent = '';
-  if (rowTooltipMethod) {
-    tipContent = `${rowTooltipMethod({
-      row: dragRow
-    }) || ''}`;
-  } else {
-    tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
+  if (rdLineEl) {
+    rdLineEl.style.display = '';
+  }
+  if (cdLineEl) {
+    cdLineEl.style.display = '';
   }
-  reactData.dragTipText = tipContent;
 };
 const Methods = {
   callSlot(slotFunc, params, h, vNodes) {
@@ -671,6 +729,7 @@ const Methods = {
     editStore.removeMaps = {};
     const sYLoad = this.updateScrollYStatus(fullData);
     this.scrollYLoad = sYLoad;
+    this.isDragRowMove = false;
     // 全量数据
     this.tableFullData = fullData;
     this.tableFullTreeData = treeData;
@@ -860,6 +919,7 @@ const Methods = {
     const tableFullColumn = getColumnList(collectColumn);
     this.tableFullColumn = tableFullColumn;
     this._isLoading = true;
+    this.isDragColMove = false;
     this.initColumnSort();
     return Promise.resolve(this.restoreCustomStorage()).then(() => {
       this._isLoading = false;
@@ -3524,7 +3584,7 @@ const Methods = {
                 // 如果点击了当前表格之外
                 !(0, _dom.getEventTargetNode)(evnt, $el).flag) {
                   setTimeout(() => {
-                    this.clearEdit(evnt).then(() => {
+                    this.handleClearEdit(evnt).then(() => {
                       // 如果存在校验，点击了表格之外则清除
                       if (!this.isActivated && editRules && validOpts.autoClear) {
                         this.validErrorMaps = {};
@@ -3607,8 +3667,8 @@ const Methods = {
     if (isEsc) {
       this.preventEvent(evnt, 'event.keydown', null, () => {
         this.emitEvent('keydown-start', {}, evnt);
-        if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardEvent) {
-          this.handleKeyboardEvent(evnt);
+        if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardCellAreaEvent) {
+          this.handleKeyboardCellAreaEvent(evnt);
         } else if (actived.row || filterStore.visible || ctxMenuStore.visible) {
           evnt.stopPropagation();
           // 如果按下了 Esc 键，关闭快捷菜单、筛选
@@ -3618,7 +3678,7 @@ const Methods = {
             // 如果是激活编辑状态，则取消编辑
             if (actived.row) {
               const params = actived.args;
-              this.clearEdit(evnt);
+              this.handleClearEdit(evnt);
               // 如果配置了选中功能，则为选中状态
               if (mouseConfig && mouseOpts.selected) {
                 this.$nextTick(() => this.handleSelected(params, evnt));
@@ -3698,8 +3758,8 @@ const Methods = {
           } else {
             this.moveCtxMenu(evnt, keyCode, ctxMenuStore, 'selected', 39, true, this.ctxMenuList);
           }
-        } else if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardEvent) {
-          this.handleKeyboardEvent(evnt);
+        } else if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardCellAreaEvent) {
+          this.handleKeyboardCellAreaEvent(evnt);
         } else if (keyboardConfig && isSpacebar && keyboardOpts.isChecked && selected.row && selected.column && (selected.column.type === 'checkbox' || selected.column.type === 'radio')) {
           // 空格键支持选中复选框
           evnt.preventDefault();
@@ -3730,7 +3790,7 @@ const Methods = {
             // 如果是激活编辑状态，则取消编辑
             if (actived.row) {
               const params = actived.args;
-              this.clearEdit(evnt);
+              this.handleClearEdit(evnt);
               // 如果配置了选中功能，则为选中状态
               if (mouseConfig && mouseOpts.selected) {
                 this.$nextTick(() => this.handleSelected(params, evnt));
@@ -5561,6 +5621,9 @@ const Methods = {
       this.emitEvent('sort-change', params, evnt);
     }
   },
+  /**
+   * 行拖拽
+   */
   handleRowDragDragstartEvent(evnt) {
     const img = new Image();
     if (evnt.dataTransfer) {
@@ -5573,12 +5636,13 @@ const Methods = {
     const reactData = $xeTable;
     const internalData = $xeTable;
     const {
-      treeConfig
+      treeConfig,
+      dragConfig
     } = props;
-    const dragOpts = $xeTable.computeDragOpts;
+    const rowDragOpts = $xeTable.computeRowDragOpts;
     const {
       dragEndMethod
-    } = dragOpts;
+    } = rowDragOpts;
     const treeOpts = $xeTable.computeTreeOpts;
     const {
       transform
@@ -5594,17 +5658,20 @@ const Methods = {
       prevDragRow,
       prevDragPos
     } = internalData;
+    const dEndMethod = dragEndMethod || (dragConfig ? dragConfig.dragEndMethod : null);
+    const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
     if (prevDragRow && dragRow) {
       // 判断是否有拖动
       if (prevDragRow !== dragRow) {
-        Promise.resolve(dragEndMethod ? dragEndMethod({
+        Promise.resolve(dEndMethod ? dEndMethod({
           oldRow: dragRow,
-          newRow: prevDragRow
+          newRow: prevDragRow,
+          dragPos: prevDragPos,
+          offsetIndex: dragOffsetIndex
         }) : true).then(status => {
           if (!status) {
             return;
           }
-          const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
           let oafIndex = -1;
           let nafIndex = -1;
           if (treeConfig) {
@@ -5641,18 +5708,19 @@ const Methods = {
           if (!(treeConfig && transform)) {
             $xeTable.updateAfterDataIndex();
           }
-          $xeTable.updateFooter();
           $xeTable.checkSelectionStatus();
           if (reactData.scrollYLoad) {
             $xeTable.updateScrollYSpace();
           }
           $xeTable.$nextTick().then(() => {
             $xeTable.updateCellAreas();
-            return $xeTable.recalculate();
+            $xeTable.recalculate();
           });
           $xeTable.dispatchEvent('row-dragend', {
             oldRow: dragRow,
             newRow: prevDragRow,
+            dragPos: prevDragPos,
+            offsetIndex: dragOffsetIndex,
             _index: {
               newIndex: nafIndex,
               oldIndex: oafIndex
@@ -5661,10 +5729,10 @@ const Methods = {
         }).catch(() => {});
       }
     }
-    hideRowDropTip($xeTable);
+    hideDropTip($xeTable);
     clearRowDropOrigin($xeTable);
-    clearRowDropTarget($xeTable);
     reactData.dragRow = null;
+    reactData.dragCol = null;
     setTimeout(() => {
       reactData.isDragRowMove = false;
     }, 500);
@@ -5673,10 +5741,16 @@ const Methods = {
     const $xeTable = this;
     const internalData = $xeTable;
     const reactData = $xeTable;
+    const {
+      dragRow
+    } = reactData;
+    if (!dragRow) {
+      evnt.preventDefault();
+      return;
+    }
     const trEl = evnt.currentTarget;
     const rowid = trEl.getAttribute('rowid');
     const row = $xeTable.getRowById(rowid);
-    clearRowDropTarget($xeTable);
     if (row) {
       evnt.preventDefault();
       evnt.preventDefault();
@@ -5685,44 +5759,49 @@ const Methods = {
       } = reactData;
       const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
       const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
-      updateRowDropTarget($xeTable, row, dragPos);
       internalData.prevDragRow = row;
       internalData.prevDragPos = dragPos;
+      showDropTip($xeTable, evnt, trEl, null, dragPos);
       $xeTable.dispatchEvent('row-dragover', {
         oldRow: dragRow,
         targetRow: row,
         dragPos
       }, evnt);
     }
-    showRowDropTip(evnt, $xeTable);
   },
   handleCellDragMousedownEvent(evnt, params) {
     var _a;
     const $xeTable = this;
+    const props = $xeTable;
     const reactData = $xeTable;
     evnt.stopPropagation();
-    const dragOpts = $xeTable.computeDragOpts;
+    const {
+      dragConfig
+    } = props;
+    const rowDragOpts = $xeTable.computeRowDragOpts;
     const {
       dragStartMethod
-    } = dragOpts;
+    } = rowDragOpts;
     const {
       row
     } = params;
     const dragEl = evnt.currentTarget;
-    const tdEl = (_a = dragEl.parentNode) === null || _a === void 0 ? void 0 : _a.parentNode;
-    const trEl = tdEl.parentNode;
+    const tdEl = (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+    const trEl = tdEl.parentElement;
+    const dStartMethod = dragStartMethod || (dragConfig ? dragConfig.dragStartMethod : null);
     reactData.isDragRowMove = false;
     clearRowDropOrigin($xeTable);
-    if (dragStartMethod && !dragStartMethod(params)) {
+    if (dStartMethod && !dStartMethod(params)) {
       trEl.draggable = false;
       reactData.dragRow = null;
-      hideRowDropTip($xeTable);
+      reactData.dragCol = null;
+      hideDropTip($xeTable);
       return;
     }
     reactData.dragRow = row;
+    reactData.dragCol = null;
     trEl.draggable = true;
     updateRowDropOrigin($xeTable, row);
-    showRowDropTip(evnt, $xeTable);
     updateRowDropTipContent($xeTable, tdEl);
     $xeTable.dispatchEvent('row-dragstart', params, evnt);
   },
@@ -5730,10 +5809,176 @@ const Methods = {
     const $xeTable = this;
     const reactData = $xeTable;
     clearRowDropOrigin($xeTable);
-    hideRowDropTip($xeTable);
+    hideDropTip($xeTable);
     reactData.dragRow = null;
+    reactData.dragCol = null;
     reactData.isDragRowMove = false;
   },
+  /**
+   * 列拖拽
+   */
+  handleHeaderCellDragDragstartEvent(evnt) {
+    const img = new Image();
+    if (evnt.dataTransfer) {
+      evnt.dataTransfer.setDragImage(img, 0, 0);
+    }
+  },
+  handleHeaderCellDragDragendEvent(evnt) {
+    const $xeTable = this;
+    const props = $xeTable;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const {
+      mouseConfig
+    } = props;
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
+    const {
+      dragEndMethod
+    } = columnDragOpts;
+    const {
+      dragCol
+    } = reactData;
+    const {
+      collectColumn,
+      prevDragCol,
+      prevDragPos
+    } = internalData;
+    const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0;
+    if (prevDragCol && dragCol) {
+      // 判断是否有拖动
+      if (prevDragCol !== dragCol) {
+        Promise.resolve(dragEndMethod ? dragEndMethod({
+          oldColumn: dragCol,
+          newColumn: prevDragCol,
+          dragPos: prevDragPos,
+          offsetIndex: dragOffsetIndex
+        }) : true).then(status => {
+          if (!status) {
+            return;
+          }
+          _xeUtils.default.eachTree(collectColumn, (column, index, items, path, parent) => {
+            if (!parent) {
+              const sortIndex = index + 1;
+              column.renderSortNumber = sortIndex;
+            }
+          });
+          const oafIndex = _xeUtils.default.findIndexOf(collectColumn, item => item.id === dragCol.id);
+          const nafIndex = _xeUtils.default.findIndexOf(collectColumn, item => item.id === prevDragCol.id) + dragOffsetIndex;
+          const newTargetCol = collectColumn[nafIndex];
+          if (newTargetCol) {
+            // 插入最后位置
+            dragCol.renderSortNumber = newTargetCol.renderSortNumber;
+            newTargetCol.renderSortNumber = dragCol.renderSortNumber + 0.5;
+          } else {
+            // 插入新位置
+            dragCol.renderSortNumber = collectColumn.length + 1.5;
+          }
+          reactData.isDragColMove = true;
+          if (mouseConfig) {
+            if ($xeTable.clearSelected) {
+              $xeTable.clearSelected();
+            }
+            if ($xeTable.clearCellAreas) {
+              $xeTable.clearCellAreas();
+              $xeTable.clearCopyCellArea();
+            }
+          }
+          $xeTable.analyColumnWidth();
+          $xeTable.$nextTick().then(() => {
+            $xeTable.updateCellAreas();
+            $xeTable.refreshColumn(true);
+          });
+          $xeTable.dispatchEvent('column-dragend', {
+            oldColumn: dragCol,
+            newColumn: prevDragCol,
+            dragPos: prevDragPos,
+            offsetIndex: dragOffsetIndex,
+            _index: {
+              newIndex: nafIndex,
+              oldIndex: oafIndex
+            }
+          }, evnt);
+        }).catch(() => {});
+      }
+    }
+    hideDropTip($xeTable);
+    clearColDropOrigin($xeTable);
+    reactData.dragRow = null;
+    reactData.dragCol = null;
+    setTimeout(() => {
+      reactData.isDragColMove = false;
+    }, 500);
+  },
+  handleHeaderCellDragDragoverEvent(evnt) {
+    const $xeTable = this;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const {
+      dragCol
+    } = reactData;
+    if (!dragCol) {
+      evnt.preventDefault();
+      return;
+    }
+    const thEl = evnt.currentTarget;
+    const colid = thEl.getAttribute('colid');
+    const column = $xeTable.getColumnById(colid);
+    if (column) {
+      evnt.preventDefault();
+      const {
+        dragCol
+      } = reactData;
+      const offsetX = evnt.clientX - thEl.getBoundingClientRect().x;
+      const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right';
+      internalData.prevDragCol = column;
+      internalData.prevDragPos = dragPos;
+      showDropTip($xeTable, evnt, null, thEl, dragPos);
+      $xeTable.dispatchEvent('column-dragover', {
+        oldColumn: dragCol,
+        targetColumn: column,
+        dragPos
+      }, evnt);
+    }
+  },
+  handleHeaderCellDragMousedownEvent(evnt, params) {
+    var _a;
+    const $xeTable = this;
+    const reactData = $xeTable;
+    evnt.stopPropagation();
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
+    const {
+      dragStartMethod
+    } = columnDragOpts;
+    const {
+      column
+    } = params;
+    const dragEl = evnt.currentTarget;
+    const thEl = (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+    reactData.isDragColMove = false;
+    clearColDropOrigin($xeTable);
+    if (dragStartMethod && !dragStartMethod(params)) {
+      thEl.draggable = false;
+      reactData.dragRow = null;
+      reactData.dragCol = null;
+      hideDropTip($xeTable);
+      return;
+    }
+    reactData.dragCol = column;
+    reactData.dragRow = null;
+    thEl.draggable = true;
+    updateColDropOrigin($xeTable, column);
+    updateColDropTipContent($xeTable, thEl);
+    $xeTable.dispatchEvent('column-dragstart', params, evnt);
+  },
+  handleHeaderCellDragMouseupEvent() {
+    const $xeTable = this;
+    const reactData = $xeTable;
+    clearColDropOrigin($xeTable);
+    hideDropTip($xeTable);
+    reactData.dragRow = null;
+    reactData.dragCol = null;
+    reactData.isDragColMove = false;
+  },
   setPendingRow(rows, status) {
     const pendingMaps = Object.assign({}, this.pendingRowMaps);
     const pendingList = [...this.pendingRowList];
@@ -7553,8 +7798,8 @@ const Methods = {
     }
   },
   updateCellAreas() {
-    if (this.mouseConfig && this.mouseOpts.area && this.handleUpdateCellAreas) {
-      return this.handleUpdateCellAreas();
+    if (this.mouseConfig && this.mouseOpts.area && this.handleRecalculateCellAreas) {
+      return this.handleRecalculateCellAreas();
     }
     return this.$nextTick();
   },