vxe-table 3.10.0 → 3.10.2

package/es/table/src/methods.js

@@ -311,6 +311,51 @@ function getOrderField(_vm, column) {
         return cellValue;
     };
 }
+function clearRowDropOrigin($xeTable) {
+    const el = $xeTable.$el;
+    if (el) {
+        const clss = 'row--drag-origin';
+        XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
+            elem.draggable = false;
+            removeClass(elem, clss);
+        });
+    }
+}
+function clearRowDropTarget($xeTable) {
+    const el = $xeTable.$el;
+    if (el) {
+        const clss = 'row--drag-active-target';
+        XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
+            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) {
@@ -4577,6 +4622,145 @@ 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';
+            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;
+        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];
@@ -5436,10 +5620,11 @@ 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({ bodyHeight,
+        const evntParams = Object.assign({ bodyHeight,
             bodyWidth,
             scrollHeight,
-            scrollWidth, isX: isRollX, isY: isRollY }, params), evnt);
+            scrollWidth, isX: isRollX, isY: isRollY }, params);
+        $xeTable.dispatchEvent('scroll', evntParams, evnt);
     },
     /**
      * 纵向 Y 可视渲染事件处理
@@ -5459,23 +5644,29 @@ const Methods = {
     debounceScrollYData: XEUtils.debounce(function () {
         this.loadScrollYData();
     }, debounceScrollYDuration, { 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;
-        const { scrollTop, scrollLeft } = wrapperEl;
-        const isRollX = true;
-        const isRollY = false;
         $xeTable.lastScrollLeft = scrollLeft;
         $xeTable.lastScrollTime = Date.now();
         setScrollLeft(bodyElem, scrollLeft);
         setScrollLeft(headerElem, scrollLeft);
         setScrollLeft(footerElem, scrollLeft);
+    },
+    scrollXEvent(evnt) {
+        const $xeTable = this;
+        const wrapperEl = evnt.currentTarget;
+        const { scrollTop, scrollLeft } = wrapperEl;
+        const isRollX = true;
+        const isRollY = false;
+        $xeTable.lastScrollLeft = scrollLeft;
+        $xeTable.lastScrollTime = Date.now();
+        $xeTable.handleSyncScrollX(scrollLeft);
         $xeTable.triggerScrollXEvent(evnt);
         $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
             type: 'table',
@@ -5487,23 +5678,29 @@ const Methods = {
     debounceScrollYCalculate: XEUtils.debounce(function () {
         this.updateScrollYSpace();
     }, 1000, { 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;
-        const { scrollTop, scrollLeft } = wrapperEl;
-        const isRollX = false;
-        const isRollY = true;
         $xeTable.lastScrollTop = scrollTop;
         $xeTable.lastScrollTime = Date.now();
         setScrollTop(bodyElem, scrollTop);
         setScrollTop(leftElem, scrollTop);
         setScrollTop(rightElem, scrollTop);
+    },
+    scrollYEvent(evnt) {
+        const $xeTable = this;
+        const wrapperEl = evnt.currentTarget;
+        const { scrollTop, scrollLeft } = wrapperEl;
+        const isRollX = false;
+        const isRollY = true;
+        $xeTable.lastScrollTop = scrollTop;
+        $xeTable.lastScrollTime = Date.now();
+        $xeTable.handleSyncScrollY(scrollTop);
         $xeTable.triggerScrollYEvent(evnt);
         $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
             type: 'table',
@@ -5589,7 +5786,7 @@ const Methods = {
     },
     updateScrollXData() {
         // this.tableColumn = []
-        this.$nextTick(() => {
+        return this.$nextTick().then(() => {
             this.handleTableColumn();
             this.updateScrollXSpace();
         });
@@ -5638,7 +5835,7 @@ const Methods = {
     updateScrollYData() {
         const $xeTable = this;
         // this.tableData = []
-        this.$nextTick(() => {
+        return this.$nextTick().then(() => {
             this.handleTableData();
             calcCellHeight($xeTable);
             this.updateScrollYSpace();

package/es/table/src/props.js

@@ -159,6 +159,8 @@ export default {
     cellConfig: Object,
     // 行配置信息
     rowConfig: Object,
+    // 可拖拽配置项
+    dragConfig: Object,
     // 列调整配置项
     resizableConfig: Object,
     // 序号配置项

package/es/table/src/table.js

@@ -345,6 +345,9 @@ export default {
                 isHeader: false,
                 isFooter: false
             },
+            isDragRowMove: false,
+            dragRow: null,
+            dragTipText: '',
             _isLoading: false
         };
     },
@@ -399,6 +402,9 @@ export default {
         computeRowOpts() {
             return Object.assign({}, getConfig().table.rowConfig, this.rowConfig);
         },
+        computeDragOpts() {
+            return Object.assign({}, getConfig().table.dragConfig, this.dragConfig);
+        },
         resizeOpts() {
             return this.computeResizeOpts;
         },
@@ -1263,9 +1269,18 @@ export default {
                     }
                 })
                 : _e(),
+            /**
+               * 拖拽提示
+               */
+            rowOpts.drag
+                ? h('div', {
+                    ref: 'refRowDragTipElem',
+                    class: 'vxe-table--row-drag-hint'
+                }, getI18n('vxe.table.dragTip', [this.dragTipText]))
+                : _e(),
             h('div', {}, [
                 /**
-                 * 通用提示
+                 * 提示相关
                  */
                 VxeUITooltipComponent
                     ? h(VxeUITooltipComponent, {

package/es/table/style.css

@@ -712,6 +712,9 @@
   display: flex;
   flex-direction: row;
 }
+.vxe-table-custom--option.active--drag-origin {
+  opacity: 0.5;
+}
 .vxe-table-custom--option.active--drag-target[drag-pos=top]::after {
   display: block;
   top: -2px;
@@ -944,6 +947,9 @@
   padding-right: 0.4em;
 }
 .vxe-table-custom--sort-btn:not(.is--disabled) {
+  cursor: grab;
+}
+.vxe-table-custom--sort-btn:not(.is--disabled):active {
   cursor: grabbing;
 }
 .vxe-table-custom--sort-btn:not(.is--disabled):hover {
@@ -1024,7 +1030,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  padding: 0.6em 1em 0.6em 1.8em;
+  padding: 0.6em 1em 0.6em 1.6em;
   max-width: 300px;
   border-radius: var(--vxe-ui-border-radius);
   overflow: hidden;
@@ -1108,7 +1114,7 @@
   position: absolute;
   left: -1px;
   width: calc(100% + 1px);
-  height: 3px;
+  height: 2px;
   background-color: var(--vxe-ui-font-primary-color);
   z-index: 12;
 }
@@ -2032,6 +2038,7 @@
   /*树形节点*/
   /*展开行*/
   /*设置列高度*/
+  /*拖拽行*/
   /*溢出列*/
   /*暂无数据*/
   /*校验不通过*/
@@ -2314,7 +2321,12 @@
 .vxe-table--render-default .vxe-table--scroll-y-space {
   width: 1px;
 }
-.vxe-table--render-default.is--padding .vxe-cell {
+.vxe-table--render-default.is--padding .vxe-body--column .vxe-cell {
+  padding-left: var(--vxe-ui-table-cell-padding-left);
+  padding-right: var(--vxe-ui-table-cell-padding-right);
+}
+.vxe-table--render-default .vxe-header--column .vxe-cell,
+.vxe-table--render-default .vxe-footer--column .vxe-cell {
   padding-left: var(--vxe-ui-table-cell-padding-left);
   padding-right: var(--vxe-ui-table-cell-padding-right);
 }
@@ -2587,6 +2599,71 @@
   overflow: auto;
   outline: 0;
 }
+.vxe-table--render-default .vxe-cell--drag-handle {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.vxe-table--render-default .vxe-cell--drag-handle + span {
+  padding-left: 0.5em;
+}
+.vxe-table--render-default .vxe-cell--drag-handle:not(.is--disabled) {
+  cursor: grab;
+}
+.vxe-table--render-default .vxe-cell--drag-handle:not(.is--disabled):active {
+  cursor: grabbing;
+}
+.vxe-table--render-default .vxe-cell--drag-handle:not(.is--disabled):hover {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-table--render-default .vxe-cell--drag-handle.is--disabled {
+  color: var(--vxe-ui-input-disabled-color);
+  cursor: not-allowed;
+}
+.vxe-table--render-default .vxe-body--row.row--drag-origin > .vxe-body--column > .vxe-cell {
+  opacity: 0.5;
+}
+.vxe-table--render-default .vxe-body--row.row--drag-active-target > .vxe-body--column::after {
+  display: none;
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--vxe-ui-font-primary-color);
+  z-index: 12;
+}
+.vxe-table--render-default .vxe-body--row.row--drag-active-target[drag-pos=top] > .vxe-body--column::after {
+  display: block;
+  top: 0;
+}
+.vxe-table--render-default .vxe-body--row.row--drag-active-target[drag-pos=bottom] > .vxe-body--column::after {
+  display: block;
+  bottom: 0;
+}
+.vxe-table--render-default .vxe-body--row-list-move {
+  transition: transform 0.35s;
+}
+.vxe-table--render-default .vxe-table--row-drag-hint {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0.6em 1em 0.6em 1.6em;
+  max-width: 50%;
+  min-width: 100px;
+  border-radius: var(--vxe-ui-border-radius);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  pointer-events: none;
+  background-color: var(--vxe-ui-layout-background-color);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  z-index: 33;
+}
 .vxe-table--render-default .vxe-header--column.col--ellipsis:not(.col--active) > .vxe-cell,
 .vxe-table--render-default .vxe-body--column.col--ellipsis:not(.col--active) > .vxe-cell,
 .vxe-table--render-default .vxe-footer--column.col--ellipsis:not(.col--active) > .vxe-cell {