vxe-table 3.10.0 → 3.10.2

package/packages/table/src/methods.ts

@@ -328,6 +328,57 @@ function getOrderField (_vm: any, column: any) {
   }
 }
 
+function clearRowDropOrigin ($xeTable: any) {
+  const el = $xeTable.$el
+  if (el) {
+    const clss = 'row--drag-origin'
+    XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
+      (elem as HTMLTableCellElement).draggable = false
+      removeClass(elem, clss)
+    })
+  }
+}
+
+function clearRowDropTarget ($xeTable: any) {
+  const el = $xeTable.$el
+  if (el) {
+    const clss = 'row--drag-active-target'
+    XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
+      removeClass(elem, clss)
+    })
+  }
+}
+
+function showRowDropTip (evnt: DragEvent | MouseEvent, $xeTable: any) {
+  const rdTipEl = $xeTable.$refs.refRowDragTipElem as HTMLDivElement
+  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: any) => {
+  const rdTipEl = $xeTable.$refs.refRowDragTipElem as HTMLDivElement
+  if (rdTipEl) {
+    rdTipEl.style.display = ''
+  }
+}
+
+const updateRowDropTipContent = ($xeTable: any, tdEl: HTMLElement) => {
+  const reactData = $xeTable
+
+  reactData.dragTipText = tdEl.textContent || ''
+}
+
 const Methods = {
   callSlot (slotFunc: any, params: any, h: any, vNodes: any) {
     if (slotFunc) {
@@ -4531,6 +4582,153 @@ const Methods = {
       this.emitEvent('sort-change', params, evnt)
     }
   },
+  handleRowDragDragstartEvent (evnt: DragEvent) {
+    const img = new Image()
+    if (evnt.dataTransfer) {
+      evnt.dataTransfer.setDragImage(img, 0, 0)
+    }
+  },
+  handleRowDragDragendEvent (evnt: DragEvent) {
+    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: DragEvent) {
+    const $xeTable = this
+    const internalData = $xeTable
+    const reactData = $xeTable
+
+    const trEl = evnt.currentTarget as HTMLElement
+    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: MouseEvent, params: any) {
+    const $xeTable = this
+    const reactData = $xeTable
+
+    evnt.stopPropagation()
+    const rowOpts = $xeTable.computeRowOpts
+    const { dragStartMethod } = rowOpts
+    const { row } = params
+    const dragEl = evnt.currentTarget as HTMLElement
+    const tdEl = dragEl.parentNode?.parentNode as HTMLElement
+    const trEl = tdEl.parentNode as HTMLElement
+    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: any, status: any) {
     const pendingMaps = { ...this.pendingRowMaps }
     const pendingList = [...this.pendingRowList]
@@ -5384,7 +5582,7 @@ const Methods = {
     const bodyWidth = bodyElem ? bodyElem.clientWidth : 0
     const scrollHeight = bodyElem ? bodyElem.scrollHeight : 0
     const scrollWidth = bodyElem ? bodyElem.scrollWidth : 0
-    $xeTable.dispatchEvent('scroll', {
+    const evntParams = {
       bodyHeight,
       bodyWidth,
       scrollHeight,
@@ -5392,7 +5590,8 @@ const Methods = {
       isX: isRollX,
       isY: isRollY,
       ...params
-    }, evnt)
+    }
+    $xeTable.dispatchEvent('scroll', evntParams, evnt)
   },
   /**
    * 纵向 Y 可视渲染事件处理
@@ -5411,24 +5610,31 @@ const Methods = {
   debounceScrollYData: XEUtils.debounce(function () {
     this.loadScrollYData()
   }, debounceScrollYDuration, { leading: false, trailing: true }),
-  scrollXEvent (evnt: Event) {
+  handleSyncScrollX (scrollLeft: number) {
     const $xeTable = this
 
-    const wrapperEl = evnt.currentTarget as HTMLDivElement
     const tableHeader = $xeTable.$refs.tableHeader
     const tableBody = $xeTable.$refs.tableBody
     const tableFooter = $xeTable.$refs.tableFooter
     const bodyElem = tableBody.$el as HTMLDivElement
     const headerElem = tableHeader ? tableHeader.$el as HTMLDivElement : null
     const footerElem = tableFooter ? tableFooter.$el as HTMLDivElement : 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: Event) {
+    const $xeTable = this
+
+    const wrapperEl = evnt.currentTarget as HTMLDivElement
+    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',
@@ -5440,24 +5646,31 @@ const Methods = {
   debounceScrollYCalculate: XEUtils.debounce(function () {
     this.updateScrollYSpace()
   }, 1000, { leading: false, trailing: true }),
-  scrollYEvent (evnt: Event) {
+  handleSyncScrollY (scrollTop: number) {
     const $xeTable = this
 
-    const wrapperEl = evnt.currentTarget as HTMLDivElement
     const tableBody = $xeTable.$refs.tableBody
     const leftBody = $xeTable.$refs.leftBody
     const rightBody = $xeTable.$refs.rightBody
     const bodyElem = tableBody.$el as HTMLDivElement
     const leftElem = leftBody ? leftBody.$el as HTMLDivElement : null
     const rightElem = rightBody ? rightBody.$el as HTMLDivElement : 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: Event) {
+    const $xeTable = this
+
+    const wrapperEl = evnt.currentTarget as HTMLDivElement
+    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',
@@ -5542,7 +5755,7 @@ const Methods = {
   },
   updateScrollXData () {
     // this.tableColumn = []
-    this.$nextTick(() => {
+    return this.$nextTick().then(() => {
       this.handleTableColumn()
       this.updateScrollXSpace()
     })
@@ -5593,7 +5806,7 @@ const Methods = {
     const $xeTable = this
 
     // this.tableData = []
-    this.$nextTick(() => {
+    return this.$nextTick().then(() => {
       this.handleTableData()
       calcCellHeight($xeTable)
       this.updateScrollYSpace()

package/packages/table/src/props.ts

@@ -165,6 +165,8 @@ export default {
   cellConfig: Object as PropType<VxeTablePropTypes.CellConfig>,
   // 行配置信息
   rowConfig: Object,
+  // 可拖拽配置项
+  dragConfig: Object as PropType<VxeTablePropTypes.DragConfig>,
   // 列调整配置项
   resizableConfig: Object,
   // 序号配置项

package/packages/table/src/table.ts

@@ -352,6 +352,9 @@ export default {
         isHeader: false,
         isFooter: false
       },
+      isDragRowMove: false,
+      dragRow: null,
+      dragTipText: '',
       _isLoading: false
     }
   },
@@ -410,6 +413,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
     },
@@ -1330,9 +1336,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/packages/ui/index.ts

@@ -43,6 +43,9 @@ VxeUI.setConfig({
       // trigger: 'default'
       strict: true
     },
+    dragConfig: {
+      showIcon: true
+    },
     checkboxConfig: {
       // trigger: 'default',
       strict: true

package/styles/components/table-module/custom.scss

@@ -4,6 +4,9 @@
   position: relative;
   display: flex;
   flex-direction: row;
+  &.active--drag-origin {
+    opacity: 0.5;
+  }
   &.active--drag-target {
     &[drag-pos="top"] {
       &::after {
@@ -166,7 +169,10 @@
   padding-left: 0.2em;
   padding-right: 0.4em;
   &:not(.is--disabled) {
-    cursor: grabbing;
+    cursor: grab;
+    &:active {
+      cursor: grabbing;
+    }
     &:hover {
       color: var(--vxe-ui-font-primary-color);
     }
@@ -247,7 +253,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;
@@ -338,7 +344,7 @@
     position: absolute;
     left: -1px;
     width: calc(100% + 1px);
-    height: 3px;
+    height: 2px;
     background-color: var(--vxe-ui-font-primary-color);
     z-index: 12;
   }

package/styles/components/table.scss

@@ -961,6 +961,15 @@
   }
 
   &.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-header--column,
+  .vxe-footer--column {
     .vxe-cell {
       padding-left: var(--vxe-ui-table-cell-padding-left);
       padding-right: var(--vxe-ui-table-cell-padding-right);
@@ -1228,6 +1237,86 @@
     }
   }
 
+  /*拖拽行*/
+  .vxe-cell--drag-handle {
+    user-select: none;
+    & + span {
+      padding-left: 0.5em;
+    }
+    &:not(.is--disabled) {
+      cursor: grab;
+      &:active {
+        cursor: grabbing;
+      }
+      &:hover {
+        color: var(--vxe-ui-font-primary-color);
+      }
+    }
+    &.is--disabled {
+      color: var(--vxe-ui-input-disabled-color);
+      cursor: not-allowed;
+    }
+  }
+  .vxe-body--row {
+    &.row--drag-origin {
+      & > .vxe-body--column {
+        & > .vxe-cell {
+          opacity: 0.5;
+        }
+      }
+    }
+    &.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;
+        }
+      }
+      &[drag-pos="top"] {
+        & > .vxe-body--column {
+          &::after {
+            display: block;
+            top: 0;
+          }
+        }
+      }
+      &[drag-pos="bottom"] {
+        & > .vxe-body--column {
+          &::after {
+            display: block;
+            bottom: 0;
+          }
+        }
+      }
+    }
+  }
+  .vxe-body--row-list-move {
+    transition: transform 0.35s;
+  }
+  .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;
+    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-header--column,