vxe-table 3.11.26 → 3.11.27-beta.1

package/lib/table/src/methods.js

@@ -536,11 +536,18 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
     if (cdLineEl) {
       if (showLine) {
         const thRect = thEl.getBoundingClientRect();
+        const offsetTop = Math.max(0, thRect.y - wrapperRect.y);
         cdLineEl.style.display = 'block';
+        cdLineEl.style.top = `${offsetTop}px`;
         cdLineEl.style.left = `${Math.max(1, thRect.x - wrapperRect.x)}px`;
         cdLineEl.style.width = `${thRect.width}px`;
-        cdLineEl.style.height = `${wrapperRect.height - scrollbarHeight}px`;
+        if (prevDragToChild) {
+          cdLineEl.style.height = `${thRect.height}px`;
+        } else {
+          cdLineEl.style.height = `${wrapperRect.height - offsetTop - scrollbarHeight}px`;
+        }
         cdLineEl.setAttribute('drag-pos', dragPos);
+        cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
       } else {
         cdLineEl.style.display = '';
       }
@@ -1100,12 +1107,12 @@ const Methods = {
           height: 0
         };
       }
+      cacheItem.row = row;
+      cacheItem.items = items;
+      cacheItem.parent = parent;
+      cacheItem.level = level;
+      cacheItem.index = treeConfig && parent ? -1 : index;
       if (isSource) {
-        cacheItem.row = row;
-        cacheItem.items = items;
-        cacheItem.parent = parent;
-        cacheItem.level = level;
-        cacheItem.index = treeConfig && parent ? -1 : index;
         fullDataRowIdMaps[rowid] = cacheItem;
       }
       fullAllDataRowIdMaps[rowid] = cacheItem;
@@ -1220,18 +1227,26 @@ const Methods = {
    * 牺牲数据组装的耗时，用来换取使用过程中的流畅
    */
   cacheColumnMap() {
+    const $xeTable = this;
+    const props = $xeTable;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
     const {
       tableFullColumn,
-      collectColumn,
-      fullColumnMap,
-      showOverflow,
-      columnOpts,
-      rowOpts
-    } = this;
-    const fullColumnIdData = this.fullColumnIdData = {};
-    const fullColumnFieldData = this.fullColumnFieldData = {};
+      collectColumn
+    } = internalData;
+    const fullColumnIdData = internalData.fullColumnIdData = {};
+    const fullColumnFieldData = internalData.fullColumnFieldData = {};
+    const mouseOpts = $xeTable.computeMouseOpts;
+    const columnOpts = $xeTable.computeColumnOpts;
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
+    const {
+      isCrossDrag,
+      isSelfToChildDrag
+    } = columnDragOpts;
+    const rowOpts = $xeTable.computeRowOpts;
     const isGroup = collectColumn.some(_utils.hasChildrenList);
-    let isAllOverflow = !!showOverflow;
+    let isAllOverflow = !!props.showOverflow;
     let expandColumn;
     let treeNodeColumn;
     let checkboxColumn;
@@ -1247,6 +1262,8 @@ const Methods = {
         treeNode
       } = column;
       const rest = {
+        $index: -1,
+        _index: -1,
         column,
         colid,
         index,
@@ -1255,12 +1272,14 @@ const Methods = {
         width: 0
       };
       if (field) {
-        if (process.env.NODE_ENV === 'development') {
-          if (fullColumnFieldData[field]) {
-            (0, _log.warnLog)('vxe.error.colRepet', ['field', field]);
-          }
+        if (fullColumnFieldData[field]) {
+          (0, _log.errLog)('vxe.error.colRepet', ['field', field]);
         }
         fullColumnFieldData[field] = rest;
+      } else {
+        if (isCrossDrag || isSelfToChildDrag) {
+          (0, _log.errLog)('vxe.error.emptyProp', ['column.field']);
+        }
       }
       if (!hasFixed && fixed) {
         hasFixed = fixed;
@@ -1304,27 +1323,6 @@ const Methods = {
           }
         }
       }
-      if (process.env.NODE_ENV === 'development') {
-        if (this.showOverflow && column.showOverflow === false) {
-          (0, _log.warnLog)('vxe.error.errConflicts', [`table.show-overflow=${this.showOverflow}`, `column.show-overflow=${column.showOverflow}`]);
-        }
-        if (this.showHeaderOverflow && column.showHeaderOverflow === false) {
-          (0, _log.warnLog)('vxe.error.errConflicts', [`table.show-header-overflow=${this.showHeaderOverflow}`, `column.show-header-overflow=${column.showHeaderOverflow}`]);
-        }
-        if (this.showFooterOverflow && column.showFooterOverflow === false) {
-          (0, _log.warnLog)('vxe.error.errConflicts', [`table.show-footer-overflow=${this.showFooterOverflow}`, `column.show-footer-overflow=${column.showFooterOverflow}`]);
-        }
-      }
-      if (process.env.NODE_ENV === 'development') {
-        if (htmlColumn) {
-          if (!columnOpts.useKey) {
-            (0, _log.errLog)('vxe.error.reqProp', ['column-config.useKey', 'column.type=html']);
-          }
-          if (!rowOpts.useKey) {
-            (0, _log.errLog)('vxe.error.reqProp', ['row-config.useKey', 'column.type=html']);
-          }
-        }
-      }
       if (isAllOverflow && column.showOverflow === false) {
         isAllOverflow = false;
       }
@@ -1332,9 +1330,7 @@ const Methods = {
         (0, _log.errLog)('vxe.error.colRepet', ['colId', colid]);
       }
       fullColumnIdData[colid] = rest;
-      fullColumnMap.set(column, rest);
     };
-    fullColumnMap.clear();
     if (isGroup) {
       _xeUtils.default.eachTree(collectColumn, (column, index, items, path, parent, nodes) => {
         column.level = nodes.length;
@@ -1344,14 +1340,24 @@ const Methods = {
       tableFullColumn.forEach(handleFunc);
     }
     if (process.env.NODE_ENV === 'development') {
-      if (expandColumn && this.mouseOpts.area) {
+      if (expandColumn && mouseOpts.area) {
         (0, _log.errLog)('vxe.error.errConflicts', ['mouse-config.area', 'column.type=expand']);
       }
     }
-    this.isGroup = isGroup;
-    this.treeNodeColumn = treeNodeColumn;
-    this.expandColumn = expandColumn;
-    this.isAllOverflow = isAllOverflow;
+    if (process.env.NODE_ENV === 'development') {
+      if (htmlColumn) {
+        if (!columnOpts.useKey) {
+          (0, _log.errLog)('vxe.error.reqProp', ['column-config.useKey & column.type=html']);
+        }
+        if (!rowOpts.useKey) {
+          (0, _log.errLog)('vxe.error.reqProp', ['row-config.useKey & column.type=html']);
+        }
+      }
+    }
+    reactData.isGroup = isGroup;
+    reactData.treeNodeColumn = treeNodeColumn;
+    reactData.expandColumn = expandColumn;
+    reactData.isAllOverflow = isAllOverflow;
   },
   /**
    * 根据 tr 元素获取对应的 row 信息
@@ -3160,6 +3166,10 @@ const Methods = {
       const {
         rceTimeout
       } = internalData;
+      const el = $xeTable.$refs.refElem;
+      if (!el || !el.clientWidth) {
+        $xeTable.autoCellWidth();
+      }
       if (rceTimeout) {
         clearTimeout(rceTimeout);
         $xeTable.$nextTick(() => {
@@ -6014,8 +6024,9 @@ const Methods = {
    * 行拖拽
    */
   handleRowDragDragstartEvent(evnt) {
-    const img = new Image();
     if (evnt.dataTransfer) {
+      const img = new Image();
+      img.src = _dom.tpImg;
       evnt.dataTransfer.setDragImage(img, 0, 0);
     }
   },
@@ -6099,8 +6110,8 @@ const Methods = {
                     return;
                   }
                   if (oldAllMaps[newRowid]) {
+                    isSelfToChildStatus = true;
                     if (!isSelfToChildDrag) {
-                      isSelfToChildStatus = true;
                       if (_ui.VxeUI.modal) {
                         _ui.VxeUI.modal.message({
                           status: 'error',
@@ -6176,7 +6187,7 @@ const Methods = {
           }
           reactData.isDragRowMove = true;
           $xeTable.handleTableData(treeConfig && transform);
-          $xeTable.cacheRowMap(true);
+          $xeTable.cacheRowMap();
           $xeTable.updateScrollYStatus();
           if (!(treeConfig && transform)) {
             $xeTable.updateAfterDataIndex();
@@ -6204,6 +6215,7 @@ const Methods = {
     }
     hideDropTip($xeTable);
     clearRowDropOrigin($xeTable);
+    internalData.prevDragToChild = false;
     reactData.dragRow = null;
     reactData.dragCol = null;
     setTimeout(() => {
@@ -6269,7 +6281,6 @@ const Methods = {
     const $xeTable = this;
     const props = $xeTable;
     const reactData = $xeTable;
-    evnt.stopPropagation();
     const {
       dragConfig
     } = props;
@@ -6313,8 +6324,9 @@ const Methods = {
    * 列拖拽
    */
   handleHeaderCellDragDragstartEvent(evnt) {
-    const img = new Image();
     if (evnt.dataTransfer) {
+      const img = new Image();
+      img.src = _dom.tpImg;
       evnt.dataTransfer.setDragImage(img, 0, 0);
     }
   },
@@ -6328,6 +6340,9 @@ const Methods = {
     } = props;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
     const {
+      isCrossDrag,
+      isSelfToChildDrag,
+      isToChildDrag,
       dragEndMethod
     } = columnDragOpts;
     const {
@@ -6336,38 +6351,126 @@ const Methods = {
     const {
       collectColumn,
       prevDragCol,
-      prevDragPos
+      prevDragPos,
+      prevDragToChild
     } = internalData;
     const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0;
     if (prevDragCol && dragCol) {
       // 判断是否有拖动
       if (prevDragCol !== dragCol) {
+        const oldColumn = dragCol;
+        const newColumn = prevDragCol;
         Promise.resolve(dragEndMethod ? dragEndMethod({
-          oldColumn: dragCol,
-          newColumn: prevDragCol,
+          oldColumn,
+          newColumn,
           dragPos: prevDragPos,
           offsetIndex: dragOffsetIndex
         }) : true).then(status => {
           if (!status) {
             return;
           }
+          let oafIndex = -1;
+          let nafIndex = -1;
+          const oldAllMaps = {};
+          _xeUtils.default.eachTree([oldColumn], column => {
+            oldAllMaps[column.id] = column;
+          });
+          let isSelfToChildStatus = false;
+          if (oldColumn.parentId && newColumn.parentId) {
+            // 子到子
+            if (!isCrossDrag) {
+              return;
+            }
+            if (oldAllMaps[newColumn.id]) {
+              isSelfToChildStatus = true;
+              if (!isSelfToChildDrag) {
+                if (_ui.VxeUI.modal) {
+                  _ui.VxeUI.modal.message({
+                    status: 'error',
+                    content: getI18n('vxe.error.treeDragChild')
+                  });
+                }
+                return;
+              }
+            }
+          } else if (oldColumn.parentId) {
+            // 子到根
+            if (!isCrossDrag) {
+              return;
+            }
+          } else if (newColumn.parentId) {
+            // 根到子
+            if (!isCrossDrag) {
+              return;
+            }
+            if (oldAllMaps[newColumn.id]) {
+              isSelfToChildStatus = true;
+              if (!isSelfToChildDrag) {
+                if (_ui.VxeUI.modal) {
+                  _ui.VxeUI.modal.message({
+                    status: 'error',
+                    content: getI18n('vxe.error.treeDragChild')
+                  });
+                }
+                return;
+              }
+            }
+          } else {
+            // 根到根
+          }
+          const oldewMatchRest = _xeUtils.default.findTree(collectColumn, item => item.id === oldColumn.id);
+          // 改变层级
+          if (isSelfToChildStatus && isSelfToChildDrag) {
+            if (oldewMatchRest) {
+              const {
+                items: oCols,
+                index: oIndex
+              } = oldewMatchRest;
+              const childList = oldColumn.children || [];
+              childList.forEach(column => {
+                column.parentId = oldColumn.parentId;
+              });
+              oCols.splice(oIndex, 1, ...childList);
+              oldColumn.children = [];
+            }
+          } else {
+            if (oldewMatchRest) {
+              const {
+                items: oCols,
+                index: oIndex,
+                parent: oParent
+              } = oldewMatchRest;
+              oCols.splice(oIndex, 1);
+              if (!oParent) {
+                oafIndex = oIndex;
+              }
+            }
+          }
+          const newMatchRest = _xeUtils.default.findTree(collectColumn, item => item.id === newColumn.id);
+          if (newMatchRest) {
+            const {
+              items: nCols,
+              index: nIndex,
+              parent: nParent
+            } = newMatchRest;
+            // 转子级
+            if (isToChildDrag && prevDragToChild) {
+              oldColumn.parentId = newColumn.id;
+              newColumn.children = (newColumn.children || []).concat([oldColumn]);
+            } else {
+              oldColumn.parentId = newColumn.parentId;
+              nCols.splice(nIndex + dragOffsetIndex, 0, oldColumn);
+            }
+            if (!nParent) {
+              nafIndex = nIndex;
+            }
+          }
           _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) {
@@ -6378,14 +6481,12 @@ const Methods = {
               $xeTable.clearCopyCellArea();
             }
           }
-          $xeTable.analyColumnWidth();
-          $xeTable.$nextTick().then(() => {
+          $xeTable.refreshColumn(true).then(() => {
             $xeTable.updateCellAreas();
-            $xeTable.refreshColumn(true);
           });
           $xeTable.dispatchEvent('column-dragend', {
-            oldColumn: dragCol,
-            newColumn: prevDragCol,
+            oldColumn,
+            newColumn,
             dragPos: prevDragPos,
             offsetIndex: dragOffsetIndex,
             _index: {
@@ -6399,6 +6500,7 @@ const Methods = {
     }
     hideDropTip($xeTable);
     clearColDropOrigin($xeTable);
+    internalData.prevDragToChild = false;
     reactData.dragRow = null;
     reactData.dragCol = null;
     setTimeout(() => {
@@ -6412,10 +6514,16 @@ const Methods = {
     const {
       dragCol
     } = reactData;
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
+    const {
+      isToChildDrag,
+      isCrossDrag
+    } = columnDragOpts;
     if (!dragCol) {
       evnt.preventDefault();
       return;
     }
+    const hasCtrlKey = evnt.ctrlKey;
     const thEl = evnt.currentTarget;
     const colid = thEl.getAttribute('colid');
     const column = $xeTable.getColumnById(colid);
@@ -6426,11 +6534,11 @@ const Methods = {
       } = reactData;
       const offsetX = evnt.clientX - thEl.getBoundingClientRect().x;
       const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right';
-      if (dragCol.id === column.id || column.parentId) {
+      if (dragCol && dragCol.id === column.id || !isCrossDrag && column.parentId) {
         showDropTip($xeTable, evnt, null, thEl, false, dragPos);
         return;
       }
-      internalData.prevDragToChild = false;
+      internalData.prevDragToChild = !!(isToChildDrag && hasCtrlKey);
       internalData.prevDragCol = column;
       internalData.prevDragPos = dragPos;
       showDropTip($xeTable, evnt, null, thEl, true, dragPos);
@@ -6445,7 +6553,6 @@ const Methods = {
     var _a;
     const $xeTable = this;
     const reactData = $xeTable;
-    evnt.stopPropagation();
     const columnDragOpts = $xeTable.computeColumnDragOpts;
     const {
       dragStartMethod