vxe-table 3.10.1 → 3.10.2

package/lib/table/src/methods.js

@@ -387,6 +387,51 @@ function getOrderField(_vm, column) {
     return cellValue;
   };
 }
+function clearRowDropOrigin($xeTable) {
+  const el = $xeTable.$el;
+  if (el) {
+    const clss = 'row--drag-origin';
+    _xeUtils.default.arrayEach(el.querySelectorAll(`.${clss}`), elem => {
+      elem.draggable = false;
+      (0, _dom.removeClass)(elem, clss);
+    });
+  }
+}
+function clearRowDropTarget($xeTable) {
+  const el = $xeTable.$el;
+  if (el) {
+    const clss = 'row--drag-active-target';
+    _xeUtils.default.arrayEach(el.querySelectorAll(`.${clss}`), elem => {
+      (0, _dom.removeClass)(elem, clss);
+    });
+  }
+}
+function showRowDropTip(evnt, $xeTable) {
+  const rdTipEl = $xeTable.$refs.refRowDragTipElem;
+  if (!rdTipEl) {
+    return;
+  }
+  const el = $xeTable.$el;
+  if (!el) {
+    return;
+  }
+  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;
+  if (rdTipEl) {
+    rdTipEl.style.display = '';
+  }
+};
+const updateRowDropTipContent = ($xeTable, tdEl) => {
+  const reactData = $xeTable;
+  reactData.dragTipText = tdEl.textContent || '';
+};
 const Methods = {
   callSlot(slotFunc, params, h, vNodes) {
     if (slotFunc) {
@@ -5439,6 +5484,161 @@ const Methods = {
       this.emitEvent('sort-change', params, evnt);
     }
   },
+  handleRowDragDragstartEvent(evnt) {
+    const img = new Image();
+    if (evnt.dataTransfer) {
+      evnt.dataTransfer.setDragImage(img, 0, 0);
+    }
+  },
+  handleRowDragDragendEvent(evnt) {
+    const $xeTable = this;
+    const props = $xeTable;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const {
+      treeConfig
+    } = props;
+    const rowOpts = $xeTable.computeRowOpts;
+    const {
+      dragEndMethod
+    } = rowOpts;
+    const treeOpts = $xeTable.computeTreeOpts;
+    const {
+      transform
+    } = treeOpts;
+    const {
+      dragRow
+    } = reactData;
+    const {
+      afterFullData,
+      tableFullData,
+      prevDragRow,
+      prevDragPos
+    } = internalData;
+    if (prevDragRow && dragRow) {
+      // 判断是否有拖动
+      if (prevDragRow !== dragRow) {
+        Promise.resolve(dragEndMethod ? dragEndMethod({
+          oldRow: dragRow,
+          newRow: prevDragRow
+        }) : true).then(status => {
+          if (!status) {
+            return;
+          }
+          const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
+          // 移出源位置
+          const oafIndex = $xeTable.findRowIndexOf(afterFullData, dragRow);
+          const otfIndex = $xeTable.findRowIndexOf(tableFullData, dragRow);
+          afterFullData.splice(oafIndex, 1);
+          tableFullData.splice(otfIndex, 1);
+          // 插新位置
+          const pafIndex = $xeTable.findRowIndexOf(afterFullData, prevDragRow);
+          const ptfIndex = $xeTable.findRowIndexOf(tableFullData, prevDragRow);
+          const nafIndex = pafIndex + dragOffsetIndex;
+          const ntfIndex = ptfIndex + dragOffsetIndex;
+          afterFullData.splice(nafIndex, 0, dragRow);
+          tableFullData.splice(ntfIndex, 0, dragRow);
+          reactData.isDragRowMove = true;
+          $xeTable.cacheRowMap();
+          $xeTable.updateScrollYStatus();
+          $xeTable.handleTableData(treeConfig && transform);
+          if (!(treeConfig && transform)) {
+            $xeTable.updateAfterDataIndex();
+          }
+          $xeTable.updateFooter();
+          $xeTable.checkSelectionStatus();
+          if (reactData.scrollYLoad) {
+            $xeTable.updateScrollYSpace();
+          }
+          $xeTable.$nextTick().then(() => {
+            $xeTable.updateCellAreas();
+            return $xeTable.recalculate();
+          });
+          $xeTable.dispatchEvent('row-dragend', {
+            oldRow: dragRow,
+            newRow: prevDragRow,
+            _index: {
+              newIndex: nafIndex,
+              oldIndex: oafIndex
+            }
+          }, evnt);
+        }).catch(() => {});
+      }
+    }
+    hideRowDropTip($xeTable);
+    clearRowDropOrigin($xeTable);
+    clearRowDropTarget($xeTable);
+    reactData.dragRow = null;
+    setTimeout(() => {
+      reactData.isDragRowMove = false;
+    }, 500);
+  },
+  handleRowDragDragoverEvent(evnt) {
+    const $xeTable = this;
+    const internalData = $xeTable;
+    const reactData = $xeTable;
+    const trEl = evnt.currentTarget;
+    const rowid = trEl.getAttribute('rowid');
+    const row = $xeTable.getRowById(rowid);
+    clearRowDropTarget($xeTable);
+    if (row) {
+      evnt.preventDefault();
+      evnt.preventDefault();
+      const {
+        dragRow
+      } = reactData;
+      const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
+      const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
+      (0, _dom.addClass)(trEl, 'row--drag-active-target');
+      trEl.setAttribute('drag-pos', dragPos);
+      internalData.prevDragRow = row;
+      internalData.prevDragPos = dragPos;
+      $xeTable.dispatchEvent('row-dragover', {
+        oldRow: dragRow,
+        targetRow: row,
+        dragPos
+      }, evnt);
+    }
+    showRowDropTip(evnt, $xeTable);
+  },
+  handleCellDragMousedownEvent(evnt, params) {
+    var _a;
+    const $xeTable = this;
+    const reactData = $xeTable;
+    evnt.stopPropagation();
+    const rowOpts = $xeTable.computeRowOpts;
+    const {
+      dragStartMethod
+    } = rowOpts;
+    const {
+      row
+    } = params;
+    const dragEl = evnt.currentTarget;
+    const tdEl = (_a = dragEl.parentNode) === null || _a === void 0 ? void 0 : _a.parentNode;
+    const trEl = tdEl.parentNode;
+    reactData.isDragRowMove = false;
+    clearRowDropOrigin($xeTable);
+    if (dragStartMethod && !dragStartMethod(params)) {
+      trEl.draggable = false;
+      reactData.dragRow = null;
+      hideRowDropTip($xeTable);
+      return;
+    }
+    reactData.dragRow = row;
+    trEl.draggable = true;
+    (0, _dom.addClass)(trEl, 'row--drag-origin');
+    showRowDropTip(evnt, $xeTable);
+    updateRowDropTipContent($xeTable, tdEl);
+    $xeTable.dispatchEvent('row-dragstart', params, evnt);
+  },
+  handleCellDragMouseupEvent() {
+    const $xeTable = this;
+    const reactData = $xeTable;
+    clearRowDropOrigin($xeTable);
+    hideRowDropTip($xeTable);
+    reactData.dragRow = null;
+    reactData.isDragRowMove = false;
+  },
   setPendingRow(rows, status) {
     const pendingMaps = Object.assign({}, this.pendingRowMaps);
     const pendingList = [...this.pendingRowList];
@@ -6528,14 +6728,15 @@ const Methods = {
     const bodyWidth = bodyElem ? bodyElem.clientWidth : 0;
     const scrollHeight = bodyElem ? bodyElem.scrollHeight : 0;
     const scrollWidth = bodyElem ? bodyElem.scrollWidth : 0;
-    $xeTable.dispatchEvent('scroll', Object.assign({
+    const evntParams = Object.assign({
       bodyHeight,
       bodyWidth,
       scrollHeight,
       scrollWidth,
       isX: isRollX,
       isY: isRollY
-    }, params), evnt);
+    }, params);
+    $xeTable.dispatchEvent('scroll', evntParams, evnt);
   },
   /**
    * 纵向 Y 可视渲染事件处理
@@ -6563,15 +6764,23 @@ const Methods = {
     leading: false,
     trailing: true
   }),
-  scrollXEvent(evnt) {
+  handleSyncScrollX(scrollLeft) {
     const $xeTable = this;
-    const wrapperEl = evnt.currentTarget;
     const tableHeader = $xeTable.$refs.tableHeader;
     const tableBody = $xeTable.$refs.tableBody;
     const tableFooter = $xeTable.$refs.tableFooter;
     const bodyElem = tableBody.$el;
     const headerElem = tableHeader ? tableHeader.$el : null;
     const footerElem = tableFooter ? tableFooter.$el : null;
+    $xeTable.lastScrollLeft = scrollLeft;
+    $xeTable.lastScrollTime = Date.now();
+    (0, _dom.setScrollLeft)(bodyElem, scrollLeft);
+    (0, _dom.setScrollLeft)(headerElem, scrollLeft);
+    (0, _dom.setScrollLeft)(footerElem, scrollLeft);
+  },
+  scrollXEvent(evnt) {
+    const $xeTable = this;
+    const wrapperEl = evnt.currentTarget;
     const {
       scrollTop,
       scrollLeft
@@ -6580,9 +6789,7 @@ const Methods = {
     const isRollY = false;
     $xeTable.lastScrollLeft = scrollLeft;
     $xeTable.lastScrollTime = Date.now();
-    (0, _dom.setScrollLeft)(bodyElem, scrollLeft);
-    (0, _dom.setScrollLeft)(headerElem, scrollLeft);
-    (0, _dom.setScrollLeft)(footerElem, scrollLeft);
+    $xeTable.handleSyncScrollX(scrollLeft);
     $xeTable.triggerScrollXEvent(evnt);
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
       type: 'table',
@@ -6597,15 +6804,23 @@ const Methods = {
     leading: false,
     trailing: true
   }),
-  scrollYEvent(evnt) {
+  handleSyncScrollY(scrollTop) {
     const $xeTable = this;
-    const wrapperEl = evnt.currentTarget;
     const tableBody = $xeTable.$refs.tableBody;
     const leftBody = $xeTable.$refs.leftBody;
     const rightBody = $xeTable.$refs.rightBody;
     const bodyElem = tableBody.$el;
     const leftElem = leftBody ? leftBody.$el : null;
     const rightElem = rightBody ? rightBody.$el : null;
+    $xeTable.lastScrollTop = scrollTop;
+    $xeTable.lastScrollTime = Date.now();
+    (0, _dom.setScrollTop)(bodyElem, scrollTop);
+    (0, _dom.setScrollTop)(leftElem, scrollTop);
+    (0, _dom.setScrollTop)(rightElem, scrollTop);
+  },
+  scrollYEvent(evnt) {
+    const $xeTable = this;
+    const wrapperEl = evnt.currentTarget;
     const {
       scrollTop,
       scrollLeft
@@ -6614,9 +6829,7 @@ const Methods = {
     const isRollY = true;
     $xeTable.lastScrollTop = scrollTop;
     $xeTable.lastScrollTime = Date.now();
-    (0, _dom.setScrollTop)(bodyElem, scrollTop);
-    (0, _dom.setScrollTop)(leftElem, scrollTop);
-    (0, _dom.setScrollTop)(rightElem, scrollTop);
+    $xeTable.handleSyncScrollY(scrollTop);
     $xeTable.triggerScrollYEvent(evnt);
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
       type: 'table',
@@ -6731,7 +6944,7 @@ const Methods = {
   },
   updateScrollXData() {
     // this.tableColumn = []
-    this.$nextTick(() => {
+    return this.$nextTick().then(() => {
       this.handleTableColumn();
       this.updateScrollXSpace();
     });
@@ -6793,7 +7006,7 @@ const Methods = {
   updateScrollYData() {
     const $xeTable = this;
     // this.tableData = []
-    this.$nextTick(() => {
+    return this.$nextTick().then(() => {
       this.handleTableData();
       calcCellHeight($xeTable);
       this.updateScrollYSpace();