vxe-table 3.16.0-beta.0 → 3.16.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/es/grid/src/grid.js +864 -690
  2. package/es/index.css +1 -1
  3. package/es/index.min.css +1 -1
  4. package/es/style.css +1 -1
  5. package/es/style.min.css +1 -1
  6. package/es/table/module/custom/mixin.js +0 -4
  7. package/es/table/module/custom/panel.js +0 -1
  8. package/es/table/module/keyboard/mixin.js +2 -2
  9. package/es/table/src/anime.js +46 -0
  10. package/es/table/src/body.js +15 -40
  11. package/es/table/src/columnInfo.js +6 -1
  12. package/es/table/src/footer.js +1 -19
  13. package/es/table/src/header.js +1 -19
  14. package/es/table/src/methods.js +532 -346
  15. package/es/table/src/table.js +22 -3
  16. package/es/table/style.css +8 -8
  17. package/es/table/style.min.css +1 -1
  18. package/es/ui/index.js +3 -2
  19. package/es/ui/src/log.js +1 -1
  20. package/es/vxe-table/style.css +8 -8
  21. package/es/vxe-table/style.min.css +1 -1
  22. package/lib/grid/src/grid.js +969 -808
  23. package/lib/grid/src/grid.min.js +1 -1
  24. package/lib/index.css +1 -1
  25. package/lib/index.min.css +1 -1
  26. package/lib/index.umd.js +1595 -1245
  27. package/lib/index.umd.min.js +1 -1
  28. package/lib/style.css +1 -1
  29. package/lib/style.min.css +1 -1
  30. package/lib/table/module/custom/mixin.js +0 -4
  31. package/lib/table/module/custom/mixin.min.js +1 -1
  32. package/lib/table/module/custom/panel.js +0 -1
  33. package/lib/table/module/custom/panel.min.js +1 -1
  34. package/lib/table/module/keyboard/mixin.js +2 -2
  35. package/lib/table/module/keyboard/mixin.min.js +1 -1
  36. package/lib/table/src/anime.js +56 -0
  37. package/lib/table/src/anime.min.js +1 -0
  38. package/lib/table/src/body.js +3 -28
  39. package/lib/table/src/body.min.js +1 -1
  40. package/lib/table/src/columnInfo.js +6 -1
  41. package/lib/table/src/columnInfo.min.js +1 -1
  42. package/lib/table/src/footer.js +1 -19
  43. package/lib/table/src/footer.min.js +1 -1
  44. package/lib/table/src/header.js +1 -19
  45. package/lib/table/src/header.min.js +1 -1
  46. package/lib/table/src/methods.js +539 -355
  47. package/lib/table/src/methods.min.js +1 -1
  48. package/lib/table/src/table.js +22 -2
  49. package/lib/table/src/table.min.js +1 -1
  50. package/lib/table/style/style.css +8 -8
  51. package/lib/table/style/style.min.css +1 -1
  52. package/lib/ui/index.js +3 -2
  53. package/lib/ui/index.min.js +1 -1
  54. package/lib/ui/src/log.js +1 -1
  55. package/lib/ui/src/log.min.js +1 -1
  56. package/lib/vxe-table/style/style.css +8 -8
  57. package/lib/vxe-table/style/style.min.css +1 -1
  58. package/package.json +1 -1
  59. package/packages/grid/src/grid.ts +1005 -777
  60. package/packages/table/module/custom/mixin.ts +0 -4
  61. package/packages/table/module/custom/panel.ts +0 -1
  62. package/packages/table/module/keyboard/mixin.ts +2 -2
  63. package/packages/table/src/anime.ts +52 -0
  64. package/packages/table/src/body.ts +15 -40
  65. package/packages/table/src/columnInfo.ts +6 -1
  66. package/packages/table/src/footer.ts +1 -19
  67. package/packages/table/src/header.ts +1 -20
  68. package/packages/table/src/methods.ts +554 -360
  69. package/packages/table/src/props.ts +4 -4
  70. package/packages/table/src/table.ts +22 -3
  71. package/packages/ui/index.ts +2 -1
  72. package/styles/components/table.scss +9 -9
  73. /package/es/{iconfont.1750770351840.ttf → iconfont.1751194972120.ttf} +0 -0
  74. /package/es/{iconfont.1750770351840.woff → iconfont.1751194972120.woff} +0 -0
  75. /package/es/{iconfont.1750770351840.woff2 → iconfont.1751194972120.woff2} +0 -0
  76. /package/lib/{iconfont.1750770351840.ttf → iconfont.1751194972120.ttf} +0 -0
  77. /package/lib/{iconfont.1750770351840.woff → iconfont.1751194972120.woff} +0 -0
  78. /package/lib/{iconfont.1750770351840.woff2 → iconfont.1751194972120.woff2} +0 -0
@@ -3,8 +3,9 @@ import { getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTarge
3
3
  import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils';
4
4
  import { VxeUI } from '../../ui';
5
5
  import Cell from './cell';
6
- import { getRowUniqueId, clearTableAllStatus, toFilters, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getRefElem } from './util';
6
+ import { getRowUniqueId, clearTableAllStatus, toFilters, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getRefElem, getCellRestHeight } from './util';
7
7
  import { getSlotVNs } from '../../ui/src/vn';
8
+ import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from './anime';
8
9
  import { warnLog, errLog } from '../../ui/src/log';
9
10
  const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI;
10
11
  const browseObj = XEUtils.browse();
@@ -417,7 +418,7 @@ function handleVirtualTreeExpand($xeTable, rows, expanded) {
417
418
  updateAfterDataIndex($xeTable);
418
419
  return $xeTable.$nextTick();
419
420
  }).then(() => {
420
- return $xeTable.recalculate(true);
421
+ return handleLazyRecalculate($xeTable, true, true, true);
421
422
  }).then(() => {
422
423
  setTimeout(() => {
423
424
  $xeTable.updateCellAreas();
@@ -492,7 +493,7 @@ function handleRowGroupVirtualExpand($xeTable, rows, expanded) {
492
493
  updateAfterDataIndex($xeTable);
493
494
  return $xeTable.$nextTick();
494
495
  }).then(() => {
495
- return $xeTable.recalculate(true);
496
+ return handleLazyRecalculate($xeTable, true, true, true);
496
497
  }).then(() => {
497
498
  setTimeout(() => {
498
499
  $xeTable.updateCellAreas();
@@ -2233,8 +2234,6 @@ function clearDragStatus($xeTable) {
2233
2234
  hideDropTip($xeTable);
2234
2235
  reactData.dragRow = null;
2235
2236
  reactData.dragCol = null;
2236
- reactData.isDragColMove = false;
2237
- reactData.isDragRowMove = false;
2238
2237
  }
2239
2238
  }
2240
2239
  function clearRowDropOrigin($xeTable) {
@@ -2575,7 +2574,7 @@ function calcScrollbar($xeTable) {
2575
2574
  $xeTable.checkScrolling();
2576
2575
  }
2577
2576
  }
2578
- function handleRecalculateLayout($xeTable, reFull) {
2577
+ function handleRecalculateStyle($xeTable, reFull, reWidth, reHeight) {
2579
2578
  const internalData = $xeTable;
2580
2579
  const el = $xeTable.$refs.refElem;
2581
2580
  internalData.rceRunTime = Date.now();
@@ -2590,19 +2589,28 @@ function handleRecalculateLayout($xeTable, reFull) {
2590
2589
  calcVarRowHeightConfig($xeTable, 'small', smallEl);
2591
2590
  calcVarRowHeightConfig($xeTable, 'mini', miniEl);
2592
2591
  }
2593
- calcCellWidth($xeTable);
2594
- autoCellWidth($xeTable);
2592
+ if (reWidth) {
2593
+ calcCellWidth($xeTable);
2594
+ }
2595
+ if (reFull) {
2596
+ autoCellWidth($xeTable);
2597
+ }
2595
2598
  calcScrollbar($xeTable);
2596
2599
  updateStyle($xeTable);
2597
2600
  updateRowExpandStyle($xeTable);
2598
2601
  return computeScrollLoad($xeTable).then(() => {
2599
2602
  // 初始化时需要在列计算之后再执行优化运算,达到最优显示效果
2600
- calcCellWidth($xeTable);
2603
+ if (reWidth) {
2604
+ calcCellWidth($xeTable);
2605
+ }
2601
2606
  if (reFull) {
2602
2607
  autoCellWidth($xeTable);
2603
2608
  }
2604
- calcScrollbar($xeTable);
2609
+ if (reHeight) {
2610
+ calcCellHeight($xeTable);
2611
+ }
2605
2612
  updateStyle($xeTable);
2613
+ calcScrollbar($xeTable);
2606
2614
  if (reFull) {
2607
2615
  updateRowOffsetTop($xeTable);
2608
2616
  }
@@ -2612,6 +2620,37 @@ function handleRecalculateLayout($xeTable, reFull) {
2612
2620
  }
2613
2621
  });
2614
2622
  }
2623
+ function handleLazyRecalculate($xeTable, reFull, reWidth, reHeight) {
2624
+ const internalData = $xeTable;
2625
+ return new Promise(resolve => {
2626
+ const { rceTimeout, rceRunTime } = internalData;
2627
+ const resizeOpts = $xeTable.computeResizeOpts;
2628
+ const refreshDelay = resizeOpts.refreshDelay || 20;
2629
+ const el = $xeTable.$refs.refElem;
2630
+ if (el && el.clientWidth) {
2631
+ autoCellWidth($xeTable);
2632
+ updateRowExpandStyle($xeTable);
2633
+ }
2634
+ if (rceTimeout) {
2635
+ clearTimeout(rceTimeout);
2636
+ if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
2637
+ resolve(handleRecalculateStyle($xeTable, !!reFull, reWidth, reHeight));
2638
+ }
2639
+ else {
2640
+ $xeTable.$nextTick(() => {
2641
+ resolve();
2642
+ });
2643
+ }
2644
+ }
2645
+ else {
2646
+ resolve(handleRecalculateStyle($xeTable, !!reFull, reWidth, reHeight));
2647
+ }
2648
+ internalData.rceTimeout = setTimeout(() => {
2649
+ internalData.rceTimeout = undefined;
2650
+ handleRecalculateStyle($xeTable, !!reFull, reWidth, reHeight);
2651
+ }, refreshDelay);
2652
+ });
2653
+ }
2615
2654
  function handleUpdateAggValues($xeTable) {
2616
2655
  const reactData = $xeTable;
2617
2656
  const internalData = $xeTable;
@@ -2834,8 +2873,6 @@ function loadTableData($xeTable, datas, isReset) {
2834
2873
  internalData.removeRowMaps = {};
2835
2874
  reactData.removeRowFlag++;
2836
2875
  const sYLoad = updateScrollYStatus($xeTable, fullData);
2837
- reactData.isDragColMove = false;
2838
- reactData.isDragRowMove = false;
2839
2876
  // 全量数据
2840
2877
  internalData.tableFullData = fullData;
2841
2878
  internalData.tableFullTreeData = isRGroup ? [] : treeData;
@@ -2896,11 +2933,11 @@ function loadTableData($xeTable, datas, isReset) {
2896
2933
  $xeTable.checkSelectionStatus();
2897
2934
  return new Promise(resolve => {
2898
2935
  $xeTable.$nextTick()
2899
- .then(() => handleRecalculateLayout($xeTable, false))
2936
+ .then(() => handleRecalculateStyle($xeTable, false, false, false))
2900
2937
  .then(() => {
2901
2938
  calcCellHeight($xeTable);
2902
2939
  updateRowOffsetTop($xeTable);
2903
- return handleRecalculateLayout($xeTable, false);
2940
+ return handleRecalculateStyle($xeTable, false, false, false);
2904
2941
  })
2905
2942
  .then(() => {
2906
2943
  let targetScrollLeft = lastScrollLeft;
@@ -2915,7 +2952,7 @@ function loadTableData($xeTable, datas, isReset) {
2915
2952
  targetScrollTop = 0;
2916
2953
  }
2917
2954
  reactData.isRowLoading = false;
2918
- handleRecalculateLayout($xeTable, false);
2955
+ handleRecalculateStyle($xeTable, false, false, false);
2919
2956
  // 是否变更虚拟滚动
2920
2957
  if (oldScrollYLoad === sYLoad) {
2921
2958
  restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -3164,7 +3201,6 @@ function handleColumn($xeTable, collectColumn) {
3164
3201
  const tableFullColumn = getColumnList(collectColumn);
3165
3202
  internalData.tableFullColumn = tableFullColumn;
3166
3203
  reactData.isColLoading = true;
3167
- reactData.isDragColMove = false;
3168
3204
  initColumnSort($xeTable);
3169
3205
  return Promise.resolve(restoreCustomStorage($xeTable)).then(() => {
3170
3206
  const { scrollXLoad, scrollYLoad, expandColumn } = reactData;
@@ -3653,10 +3689,10 @@ const Methods = {
3653
3689
  }
3654
3690
  }).then(() => {
3655
3691
  $xeTable.updateCellAreas();
3656
- return $xeTable.recalculate(true);
3692
+ return handleLazyRecalculate($xeTable, true, true, true);
3657
3693
  }).then(() => {
3658
3694
  // 存在滚动行为未结束情况
3659
- setTimeout(() => $xeTable.recalculate(), 50);
3695
+ setTimeout(() => handleLazyRecalculate($xeTable, false, true, true), 50);
3660
3696
  });
3661
3697
  },
3662
3698
  handleTableData(force) {
@@ -3708,7 +3744,7 @@ const Methods = {
3708
3744
  if (!initStatus) {
3709
3745
  handleLoadDefaults($xeTable);
3710
3746
  }
3711
- return this.recalculate();
3747
+ return handleLazyRecalculate($xeTable, false, true, true);
3712
3748
  });
3713
3749
  },
3714
3750
  /**
@@ -3725,7 +3761,7 @@ const Methods = {
3725
3761
  })
3726
3762
  .then(() => {
3727
3763
  handleLoadDefaults($xeTable);
3728
- return this.recalculate();
3764
+ return handleLazyRecalculate($xeTable, false, true, true);
3729
3765
  });
3730
3766
  },
3731
3767
  /**
@@ -4217,7 +4253,7 @@ const Methods = {
4217
4253
  }
4218
4254
  return $xeTable.$nextTick().then(() => {
4219
4255
  $xeTable.updateCellAreas();
4220
- return $xeTable.recalculate();
4256
+ return handleLazyRecalculate($xeTable, false, true, true);
4221
4257
  });
4222
4258
  }
4223
4259
  return $xeTable.reloadData(tableSourceData);
@@ -5108,7 +5144,7 @@ const Methods = {
5108
5144
  return parseColumns($xeTable, true).then(() => {
5109
5145
  return this.refreshScroll();
5110
5146
  }).then(() => {
5111
- return this.recalculate();
5147
+ return handleLazyRecalculate($xeTable, false, true, true);
5112
5148
  });
5113
5149
  },
5114
5150
  /**
@@ -5639,35 +5675,8 @@ const Methods = {
5639
5675
  */
5640
5676
  recalculate(reFull) {
5641
5677
  const $xeTable = this;
5642
- const internalData = $xeTable;
5643
- return new Promise(resolve => {
5644
- const { rceTimeout, rceRunTime } = internalData;
5645
- const resizeOpts = $xeTable.computeResizeOpts;
5646
- const refreshDelay = resizeOpts.refreshDelay || 20;
5647
- const el = $xeTable.$refs.refElem;
5648
- if (el && el.clientWidth) {
5649
- autoCellWidth($xeTable);
5650
- updateRowExpandStyle($xeTable);
5651
- }
5652
- if (rceTimeout) {
5653
- clearTimeout(rceTimeout);
5654
- if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
5655
- resolve(handleRecalculateLayout($xeTable, !!reFull));
5656
- }
5657
- else {
5658
- $xeTable.$nextTick(() => {
5659
- resolve();
5660
- });
5661
- }
5662
- }
5663
- else {
5664
- resolve(handleRecalculateLayout($xeTable, !!reFull));
5665
- }
5666
- internalData.rceTimeout = setTimeout(() => {
5667
- internalData.rceTimeout = undefined;
5668
- handleRecalculateLayout($xeTable, !!reFull);
5669
- }, refreshDelay);
5670
- });
5678
+ const isForce = !!reFull;
5679
+ return handleLazyRecalculate($xeTable, isForce, isForce, isForce);
5671
5680
  },
5672
5681
  updateStyle() {
5673
5682
  const $xeTable = this;
@@ -6276,9 +6285,11 @@ const Methods = {
6276
6285
  }
6277
6286
  },
6278
6287
  handleGlobalResizeEvent() {
6279
- this.closeMenu();
6280
- this.updateCellAreas();
6281
- this.recalculate(true);
6288
+ const $xeTable = this;
6289
+ $xeTable.closeMenu();
6290
+ $xeTable.updateCellAreas();
6291
+ handleLazyRecalculate($xeTable, true, true, true);
6292
+ $xeTable.updateCellAreas();
6282
6293
  },
6283
6294
  /**
6284
6295
  * 处理合并
@@ -6844,7 +6855,8 @@ const Methods = {
6844
6855
  const childList = vals[2];
6845
6856
  let sLen = 0; // 已选
6846
6857
  let hLen = 0; // 半选
6847
- let vLen = 0; // 有效行
6858
+ let vLen = 0; // 有效子行
6859
+ const cLen = childList.length; // 有效子行
6848
6860
  childList.forEach(checkMethod
6849
6861
  ? (item) => {
6850
6862
  const childRowid = handleGetRowId(item);
@@ -6878,16 +6890,29 @@ const Methods = {
6878
6890
  }
6879
6891
  vLen++;
6880
6892
  });
6881
- let isSelected = (sLen >= vLen && (vLen >= 1 || hLen >= 1));
6882
- if (checkMethod) {
6883
- if (checkMethod({ $table: $xeTable, row })) {
6884
- isSelected = sLen >= vLen;
6893
+ let isSelected = false;
6894
+ if (cLen > 0) {
6895
+ if (vLen > 0) {
6896
+ isSelected = (sLen > 0 || hLen > 0) && sLen >= vLen;
6885
6897
  }
6886
6898
  else {
6887
- isSelected = selectCheckboxMaps[rowid];
6899
+ // 如果存在子项禁用
6900
+ if ((sLen > 0 && sLen >= vLen)) {
6901
+ isSelected = true;
6902
+ }
6903
+ else if (selectCheckboxMaps[rowid]) {
6904
+ isSelected = true;
6905
+ }
6906
+ else {
6907
+ isSelected = false;
6908
+ }
6888
6909
  }
6889
6910
  }
6890
- const halfSelect = !isSelected && (sLen >= 1 || hLen >= 1);
6911
+ else {
6912
+ // 如果无子项
6913
+ isSelected = selectCheckboxMaps[rowid];
6914
+ }
6915
+ const halfSelect = !isSelected && (sLen > 0 || hLen > 0);
6891
6916
  if (checkField) {
6892
6917
  XEUtils.set(row, checkField, isSelected);
6893
6918
  }
@@ -6930,7 +6955,9 @@ const Methods = {
6930
6955
  const { checkField, checkMethod, showReserveStatus } = checkboxOpts;
6931
6956
  const { handleGetRowId } = createHandleGetRowId($xeTable);
6932
6957
  let sLen = 0; // 已选
6958
+ let dsLen = 0; // 禁用的已选
6933
6959
  let hLen = 0; // 半选
6960
+ let dhLen = 0; // 禁用的半选
6934
6961
  let vLen = 0; // 有效行
6935
6962
  const rootList = (treeConfig ? afterTreeFullData : (isRowGroupStatus ? afterGroupFullData : afterFullData));
6936
6963
  rootList.forEach(checkMethod
@@ -6948,10 +6975,10 @@ const Methods = {
6948
6975
  }
6949
6976
  else {
6950
6977
  if (selected) {
6951
- sLen++;
6978
+ dsLen++;
6952
6979
  }
6953
6980
  else if (treeIndeterminateRowMaps[childRowid]) {
6954
- hLen++;
6981
+ dhLen++;
6955
6982
  }
6956
6983
  }
6957
6984
  }
@@ -6967,7 +6994,7 @@ const Methods = {
6967
6994
  vLen++;
6968
6995
  });
6969
6996
  const isSelected = rootList.length > 0 ? (vLen > 0 ? (sLen >= vLen) : (sLen >= rootList.length)) : false;
6970
- let halfSelect = !isSelected && (sLen >= 1 || hLen >= 1);
6997
+ let halfSelect = !isSelected && (sLen > 0 || hLen > 0 || dsLen > 0 || dhLen > 0);
6971
6998
  // 如果复选框启用保留记录,当保留数据存在时显示半选
6972
6999
  if (!isSelected && !halfSelect && showReserveStatus) {
6973
7000
  halfSelect = !XEUtils.isEmpty(checkboxReserveRowMap);
@@ -7720,83 +7747,75 @@ const Methods = {
7720
7747
  const { treeConfig, dragConfig } = props;
7721
7748
  const rowDragOpts = $xeTable.computeRowDragOpts;
7722
7749
  const { afterFullData, tableFullData, fullAllDataRowIdData } = internalData;
7723
- const { isPeerDrag, isCrossDrag, isSelfToChildDrag, dragEndMethod, dragToChildMethod } = rowDragOpts;
7750
+ const { animation, isPeerDrag, isCrossDrag, isSelfToChildDrag, dragEndMethod, dragToChildMethod } = rowDragOpts;
7724
7751
  const treeOpts = $xeTable.computeTreeOpts;
7752
+ const cellOpts = $xeTable.computeCellOpts;
7753
+ const rowOpts = $xeTable.computeRowOpts;
7754
+ const defaultRowHeight = $xeTable.computeDefaultRowHeight;
7725
7755
  const { transform, rowField, mapChildrenField, parentField } = treeOpts;
7726
7756
  const childrenField = treeOpts.children || treeOpts.childrenField;
7727
7757
  const dEndMethod = dragEndMethod || (dragConfig ? dragConfig.dragEndMethod : null);
7728
7758
  const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
7759
+ const el = $xeTable.$refs.refElem;
7729
7760
  const errRest = {
7730
7761
  status: false
7731
7762
  };
7732
- if (prevDragRow && dragRow) {
7733
- // 判断是否有拖动
7734
- if (prevDragRow !== dragRow) {
7735
- const dragParams = {
7736
- oldRow: dragRow,
7737
- newRow: prevDragRow,
7738
- dragRow,
7739
- dragPos: prevDragPos,
7740
- dragToChild: !!prevDragToChild,
7741
- offsetIndex: dragOffsetIndex
7742
- };
7743
- const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
7744
- return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then((status) => {
7745
- if (!status) {
7746
- return errRest;
7747
- }
7748
- let oafIndex = -1;
7749
- let nafIndex = -1;
7750
- // 如果为树结构
7751
- if (treeConfig) {
7752
- if (transform) {
7753
- // 移出源位置
7754
- const oldRowid = getRowid($xeTable, dragRow);
7755
- const oldRest = fullAllDataRowIdData[oldRowid];
7756
- const newRowid = getRowid($xeTable, prevDragRow);
7757
- const newRest = fullAllDataRowIdData[newRowid];
7758
- if (oldRest && newRest) {
7759
- const { level: oldLevel } = oldRest;
7760
- const { level: newLevel } = newRest;
7761
- const oldAllMaps = {};
7762
- XEUtils.eachTree([dragRow], item => {
7763
- oldAllMaps[getRowid($xeTable, item)] = item;
7764
- }, { children: mapChildrenField });
7765
- let isSelfToChildStatus = false;
7766
- if (oldLevel && newLevel) {
7767
- // 子到子
7768
- if (isPeerDrag && !isCrossDrag) {
7769
- if (oldRest.row[parentField] !== newRest.row[parentField]) {
7770
- // 非同级
7771
- return errRest;
7772
- }
7773
- }
7774
- else {
7775
- if (!isCrossDrag) {
7776
- return errRest;
7777
- }
7778
- if (oldAllMaps[newRowid]) {
7779
- isSelfToChildStatus = true;
7780
- if (!(isCrossDrag && isSelfToChildDrag)) {
7781
- if (VxeUI.modal) {
7782
- VxeUI.modal.message({
7783
- status: 'error',
7784
- content: getI18n('vxe.error.treeDragChild')
7785
- });
7786
- }
7787
- return errRest;
7788
- }
7789
- }
7790
- }
7791
- }
7792
- else if (oldLevel) {
7793
- // 子到根
7794
- if (!isCrossDrag) {
7763
+ if (!(el && prevDragRow && dragRow)) {
7764
+ return Promise.resolve(errRest);
7765
+ }
7766
+ // 判断是否有拖动
7767
+ if (prevDragRow !== dragRow) {
7768
+ const dragParams = {
7769
+ oldRow: dragRow,
7770
+ newRow: prevDragRow,
7771
+ dragRow,
7772
+ dragPos: prevDragPos,
7773
+ dragToChild: !!prevDragToChild,
7774
+ offsetIndex: dragOffsetIndex
7775
+ };
7776
+ const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
7777
+ return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then((status) => {
7778
+ if (!status) {
7779
+ return errRest;
7780
+ }
7781
+ const dragRowid = getRowid($xeTable, dragRow);
7782
+ const dragRowRest = fullAllDataRowIdData[dragRowid] || {};
7783
+ const _dragRowIndex = dragRowRest._index;
7784
+ let dragRowHeight = 0;
7785
+ let dragOffsetTop = -1;
7786
+ if (animation) {
7787
+ dragRowHeight = getCellRestHeight(dragRowRest, cellOpts, rowOpts, defaultRowHeight);
7788
+ const oldTrEl = el.querySelector(`.vxe-body--row[rowid="${dragRowid}"]`);
7789
+ if (oldTrEl) {
7790
+ dragOffsetTop = oldTrEl.offsetTop;
7791
+ }
7792
+ }
7793
+ let oafIndex = -1;
7794
+ let nafIndex = -1;
7795
+ // 如果为树结构
7796
+ if (treeConfig) {
7797
+ if (transform) {
7798
+ // 移出源位置
7799
+ const oldRest = dragRowRest;
7800
+ const newRowid = getRowid($xeTable, prevDragRow);
7801
+ const newRest = fullAllDataRowIdData[newRowid];
7802
+ if (oldRest && newRest) {
7803
+ const { level: oldLevel } = oldRest;
7804
+ const { level: newLevel } = newRest;
7805
+ const oldAllMaps = {};
7806
+ XEUtils.eachTree([dragRow], item => {
7807
+ oldAllMaps[getRowid($xeTable, item)] = item;
7808
+ }, { children: mapChildrenField });
7809
+ let isSelfToChildStatus = false;
7810
+ if (oldLevel && newLevel) {
7811
+ // 子到子
7812
+ if (isPeerDrag && !isCrossDrag) {
7813
+ if (oldRest.row[parentField] !== newRest.row[parentField]) {
7814
+ // 非同级
7795
7815
  return errRest;
7796
7816
  }
7797
7817
  }
7798
- else if (newLevel) {
7799
- // 根到子
7818
+ else {
7800
7819
  if (!isCrossDrag) {
7801
7820
  return errRest;
7802
7821
  }
@@ -7813,88 +7832,160 @@ const Methods = {
7813
7832
  }
7814
7833
  }
7815
7834
  }
7816
- else {
7817
- // 根到根
7835
+ }
7836
+ else if (oldLevel) {
7837
+ // 子到根
7838
+ if (!isCrossDrag) {
7839
+ return errRest;
7818
7840
  }
7819
- const fullList = XEUtils.toTreeArray(internalData.afterTreeFullData, {
7820
- key: rowField,
7821
- parentKey: parentField,
7822
- children: mapChildrenField
7823
- });
7824
- // 移出
7825
- const otfIndex = $xeTable.findRowIndexOf(fullList, dragRow);
7826
- fullList.splice(otfIndex, 1);
7827
- // 插入
7828
- const ptfIndex = $xeTable.findRowIndexOf(fullList, prevDragRow);
7829
- const ntfIndex = ptfIndex + dragOffsetIndex;
7830
- fullList.splice(ntfIndex, 0, dragRow);
7831
- // 改变层级
7832
- if (isSelfToChildStatus && (isCrossDrag && isSelfToChildDrag)) {
7833
- XEUtils.each(dragRow[childrenField], childRow => {
7834
- childRow[parentField] = dragRow[parentField];
7835
- });
7841
+ }
7842
+ else if (newLevel) {
7843
+ // 根到子
7844
+ if (!isCrossDrag) {
7845
+ return errRest;
7846
+ }
7847
+ if (oldAllMaps[newRowid]) {
7848
+ isSelfToChildStatus = true;
7849
+ if (!(isCrossDrag && isSelfToChildDrag)) {
7850
+ if (VxeUI.modal) {
7851
+ VxeUI.modal.message({
7852
+ status: 'error',
7853
+ content: getI18n('vxe.error.treeDragChild')
7854
+ });
7855
+ }
7856
+ return errRest;
7857
+ }
7836
7858
  }
7837
- dragRow[parentField] = isDragToChildFlag ? prevDragRow[rowField] : prevDragRow[parentField];
7838
- internalData.tableFullTreeData = XEUtils.toArrayTree(fullList, {
7839
- key: rowField,
7840
- parentKey: parentField,
7841
- children: childrenField,
7842
- mapChildren: mapChildrenField
7859
+ }
7860
+ else {
7861
+ // 根到根
7862
+ }
7863
+ const fullList = XEUtils.toTreeArray(internalData.afterTreeFullData, {
7864
+ key: rowField,
7865
+ parentKey: parentField,
7866
+ children: mapChildrenField
7867
+ });
7868
+ // 移出
7869
+ const otfIndex = $xeTable.findRowIndexOf(fullList, dragRow);
7870
+ fullList.splice(otfIndex, 1);
7871
+ // 插入
7872
+ const ptfIndex = $xeTable.findRowIndexOf(fullList, prevDragRow);
7873
+ const ntfIndex = ptfIndex + dragOffsetIndex;
7874
+ fullList.splice(ntfIndex, 0, dragRow);
7875
+ // 改变层级
7876
+ if (isSelfToChildStatus && (isCrossDrag && isSelfToChildDrag)) {
7877
+ XEUtils.each(dragRow[childrenField], childRow => {
7878
+ childRow[parentField] = dragRow[parentField];
7843
7879
  });
7844
7880
  }
7881
+ dragRow[parentField] = isDragToChildFlag ? prevDragRow[rowField] : prevDragRow[parentField];
7882
+ internalData.tableFullTreeData = XEUtils.toArrayTree(fullList, {
7883
+ key: rowField,
7884
+ parentKey: parentField,
7885
+ children: childrenField,
7886
+ mapChildren: mapChildrenField
7887
+ });
7845
7888
  }
7846
7889
  }
7847
- else {
7848
- // 移出
7849
- oafIndex = $xeTable.findRowIndexOf(afterFullData, dragRow);
7850
- const otfIndex = $xeTable.findRowIndexOf(tableFullData, dragRow);
7851
- afterFullData.splice(oafIndex, 1);
7852
- tableFullData.splice(otfIndex, 1);
7853
- // 插入
7854
- const pafIndex = $xeTable.findRowIndexOf(afterFullData, prevDragRow);
7855
- const ptfIndex = $xeTable.findRowIndexOf(tableFullData, prevDragRow);
7856
- nafIndex = pafIndex + dragOffsetIndex;
7857
- const ntfIndex = ptfIndex + dragOffsetIndex;
7858
- afterFullData.splice(nafIndex, 0, dragRow);
7859
- tableFullData.splice(ntfIndex, 0, dragRow);
7860
- }
7861
- reactData.isDragRowMove = true;
7862
- $xeTable.handleTableData(treeConfig && transform);
7863
- $xeTable.cacheRowMap(false);
7864
- updateScrollYStatus($xeTable);
7865
- if (!(treeConfig && transform)) {
7866
- updateAfterDataIndex($xeTable);
7867
- }
7868
- $xeTable.checkSelectionStatus();
7869
- if (reactData.scrollYLoad) {
7870
- $xeTable.updateScrollYSpace();
7871
- }
7872
- if (evnt) {
7873
- $xeTable.dispatchEvent('row-dragend', {
7874
- oldRow: dragRow,
7875
- newRow: prevDragRow,
7876
- dragRow,
7877
- dragPos: prevDragPos,
7878
- dragToChild: isDragToChildFlag,
7879
- offsetIndex: dragOffsetIndex,
7880
- _index: {
7881
- newIndex: nafIndex,
7882
- oldIndex: oafIndex
7890
+ }
7891
+ else {
7892
+ // 移出
7893
+ oafIndex = $xeTable.findRowIndexOf(afterFullData, dragRow);
7894
+ const otfIndex = $xeTable.findRowIndexOf(tableFullData, dragRow);
7895
+ afterFullData.splice(oafIndex, 1);
7896
+ tableFullData.splice(otfIndex, 1);
7897
+ // 插入
7898
+ const pafIndex = $xeTable.findRowIndexOf(afterFullData, prevDragRow);
7899
+ const ptfIndex = $xeTable.findRowIndexOf(tableFullData, prevDragRow);
7900
+ nafIndex = pafIndex + dragOffsetIndex;
7901
+ const ntfIndex = ptfIndex + dragOffsetIndex;
7902
+ afterFullData.splice(nafIndex, 0, dragRow);
7903
+ tableFullData.splice(ntfIndex, 0, dragRow);
7904
+ }
7905
+ $xeTable.handleTableData(treeConfig && transform);
7906
+ $xeTable.cacheRowMap(false);
7907
+ updateScrollYStatus($xeTable);
7908
+ if (!(treeConfig && transform)) {
7909
+ updateAfterDataIndex($xeTable);
7910
+ }
7911
+ $xeTable.checkSelectionStatus();
7912
+ if (reactData.scrollYLoad) {
7913
+ $xeTable.updateScrollYSpace();
7914
+ }
7915
+ if (evnt) {
7916
+ $xeTable.dispatchEvent('row-dragend', {
7917
+ oldRow: dragRow,
7918
+ newRow: prevDragRow,
7919
+ dragRow,
7920
+ dragPos: prevDragPos,
7921
+ dragToChild: isDragToChildFlag,
7922
+ offsetIndex: dragOffsetIndex,
7923
+ _index: {
7924
+ newIndex: nafIndex,
7925
+ oldIndex: oafIndex
7926
+ }
7927
+ }, evnt);
7928
+ }
7929
+ return $xeTable.$nextTick().then(() => {
7930
+ if (animation) {
7931
+ const { tableData } = reactData;
7932
+ const dragRowRest = fullAllDataRowIdData[dragRowid];
7933
+ const _newRowIndex = dragRowRest._index;
7934
+ const firstRow = tableData[0];
7935
+ const firstRowRest = fullAllDataRowIdData[getRowid($xeTable, firstRow)];
7936
+ if (firstRowRest) {
7937
+ const _firstRowIndex = firstRowRest._index;
7938
+ const _lastRowIndex = _firstRowIndex + tableData.length;
7939
+ let rsIndex = -1;
7940
+ let reIndex = -1;
7941
+ let offsetRate = 1;
7942
+ if (_dragRowIndex < _firstRowIndex) {
7943
+ // 从上往下虚拟拖拽
7944
+ rsIndex = 0;
7945
+ reIndex = _newRowIndex - _firstRowIndex;
7883
7946
  }
7884
- }, evnt);
7885
- }
7886
- return $xeTable.$nextTick().then(() => {
7887
- $xeTable.updateCellAreas();
7888
- $xeTable.recalculate();
7889
- }).then(() => {
7890
- return {
7891
- status: true
7892
- };
7893
- });
7894
- }).catch(() => {
7895
- return errRest;
7947
+ else if (_dragRowIndex > _lastRowIndex) {
7948
+ // 从下往上虚拟拖拽
7949
+ const $newRowIndex = dragRowRest.$index;
7950
+ rsIndex = $newRowIndex + 1;
7951
+ reIndex = tableData.length;
7952
+ offsetRate = -1;
7953
+ }
7954
+ else {
7955
+ if (_newRowIndex > _dragRowIndex) {
7956
+ // 从上往下拖拽
7957
+ rsIndex = _dragRowIndex - _firstRowIndex;
7958
+ reIndex = rsIndex + _newRowIndex - _dragRowIndex;
7959
+ }
7960
+ else {
7961
+ // 从下往上拖拽
7962
+ rsIndex = _newRowIndex - _firstRowIndex;
7963
+ reIndex = rsIndex + _dragRowIndex - _newRowIndex + 1;
7964
+ offsetRate = -1;
7965
+ }
7966
+ }
7967
+ const dragRangeList = tableData.slice(rsIndex, reIndex);
7968
+ if (dragRangeList.length) {
7969
+ const dtTrList = el.querySelectorAll(dragRangeList.map(row => `.vxe-body--row[rowid="${getRowid($xeTable, row)}"]`).join(','));
7970
+ moveRowAnimateToTb(dtTrList, offsetRate * dragRowHeight);
7971
+ }
7972
+ }
7973
+ const newTrList = el.querySelectorAll(`.vxe-body--row[rowid="${dragRowid}"]`);
7974
+ const newTrEl = newTrList[0];
7975
+ if (dragOffsetTop > -1 && newTrEl) {
7976
+ moveRowAnimateToTb(newTrList, dragOffsetTop - newTrEl.offsetTop);
7977
+ }
7978
+ }
7979
+ $xeTable.updateCellAreas();
7980
+ $xeTable.recalculate();
7981
+ }).then(() => {
7982
+ return {
7983
+ status: true
7984
+ };
7896
7985
  });
7897
- }
7986
+ }).catch(() => {
7987
+ return errRest;
7988
+ });
7898
7989
  }
7899
7990
  return Promise.resolve(errRest);
7900
7991
  },
@@ -7910,6 +8001,7 @@ const Methods = {
7910
8001
  const { lazy } = treeOpts;
7911
8002
  const hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
7912
8003
  const { prevDragRow, prevDragPos } = internalData;
8004
+ const el = $xeTable.$refs.refElem;
7913
8005
  if (treeConfig && lazy && prevDragToChild) {
7914
8006
  // 懒加载
7915
8007
  const newRowid = getRowid($xeTable, prevDragRow);
@@ -7928,18 +8020,16 @@ const Methods = {
7928
8020
  }
7929
8021
  hideDropTip($xeTable);
7930
8022
  clearRowDropOrigin($xeTable);
8023
+ clearRowAnimate(el);
7931
8024
  internalData.prevDragToChild = false;
7932
8025
  reactData.dragRow = null;
7933
8026
  reactData.dragCol = null;
7934
- setTimeout(() => {
7935
- reactData.isDragRowMove = false;
7936
- }, 500);
7937
8027
  },
7938
8028
  handleRowDragDragoverEvent(evnt) {
7939
8029
  const $xeTable = this;
7940
8030
  const props = $xeTable;
7941
- const internalData = $xeTable;
7942
8031
  const reactData = $xeTable;
8032
+ const internalData = $xeTable;
7943
8033
  const { treeConfig } = props;
7944
8034
  const { fullAllDataRowIdData } = internalData;
7945
8035
  const { dragRow } = reactData;
@@ -7995,7 +8085,6 @@ const Methods = {
7995
8085
  const tdEl = trigger === 'cell' || trigger === 'row' ? dragEl : (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
7996
8086
  const trEl = tdEl.parentElement;
7997
8087
  const dStartMethod = dragStartMethod || (dragConfig ? dragConfig.dragStartMethod : null);
7998
- reactData.isDragRowMove = false;
7999
8088
  clearRowDropOrigin($xeTable);
8000
8089
  if (dStartMethod && !dStartMethod(params)) {
8001
8090
  trEl.draggable = false;
@@ -8026,7 +8115,7 @@ const Methods = {
8026
8115
  handleColDragSwapColumn() {
8027
8116
  const $xeTable = this;
8028
8117
  handleUpdateColumn($xeTable);
8029
- parseColumns($xeTable, false).then(() => {
8118
+ return parseColumns($xeTable, false).then(() => {
8030
8119
  $xeTable.updateCellAreas();
8031
8120
  $xeTable.saveCustomStore('update:sort');
8032
8121
  });
@@ -8038,71 +8127,73 @@ const Methods = {
8038
8127
  const internalData = $xeTable;
8039
8128
  const { mouseConfig } = props;
8040
8129
  const columnDragOpts = $xeTable.computeColumnDragOpts;
8041
- const { isPeerDrag, isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod, dragToChildMethod } = columnDragOpts;
8042
- const { collectColumn } = internalData;
8130
+ const { animation, isPeerDrag, isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod, dragToChildMethod } = columnDragOpts;
8131
+ const { collectColumn, fullColumnIdData } = internalData;
8132
+ const el = $xeTable.$refs.refElem;
8043
8133
  const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0;
8044
8134
  const errRest = {
8045
8135
  status: false
8046
8136
  };
8047
- if (prevDragCol && dragCol) {
8048
- // 判断是否有拖动
8049
- if (prevDragCol !== dragCol) {
8050
- const dragColumn = dragCol;
8051
- const newColumn = prevDragCol;
8052
- const dragParams = {
8053
- oldColumn: dragColumn,
8054
- newColumn,
8055
- dragColumn,
8056
- dragPos: prevDragPos,
8057
- dragToChild: !!prevDragToChild,
8058
- offsetIndex: dragOffsetIndex
8059
- };
8060
- const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
8061
- return Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then((status) => {
8062
- if (!status) {
8063
- return errRest;
8064
- }
8065
- let oafIndex = -1;
8066
- let nafIndex = -1;
8067
- const oldAllMaps = {};
8137
+ if (!(el && prevDragCol && dragCol)) {
8138
+ return Promise.resolve(errRest);
8139
+ }
8140
+ // 判断是否有拖动
8141
+ if (prevDragCol !== dragCol) {
8142
+ const dragColumn = dragCol;
8143
+ const newColumn = prevDragCol;
8144
+ const dragParams = {
8145
+ oldColumn: dragColumn,
8146
+ newColumn,
8147
+ dragColumn,
8148
+ dragPos: prevDragPos,
8149
+ dragToChild: !!prevDragToChild,
8150
+ offsetIndex: dragOffsetIndex
8151
+ };
8152
+ const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
8153
+ return Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then((status) => {
8154
+ if (!status) {
8155
+ return errRest;
8156
+ }
8157
+ let dragTargetColumn = null;
8158
+ const dragAllTargetCols = [];
8159
+ let dragColWidth = 0;
8160
+ if (animation) {
8068
8161
  XEUtils.eachTree([dragColumn], column => {
8069
- oldAllMaps[column.id] = column;
8070
- });
8071
- let isSelfToChildStatus = false;
8072
- if (dragColumn.parentId && newColumn.parentId) {
8073
- // 子到子
8074
- if (isPeerDrag && !isCrossDrag) {
8075
- if (dragColumn.parentId !== newColumn.parentId) {
8076
- // 非同级
8077
- return errRest;
8078
- }
8079
- }
8080
- else {
8081
- if (!isCrossDrag) {
8082
- return errRest;
8083
- }
8084
- if (oldAllMaps[newColumn.id]) {
8085
- isSelfToChildStatus = true;
8086
- if (!(isCrossDrag && isSelfToChildDrag)) {
8087
- if (VxeUI.modal) {
8088
- VxeUI.modal.message({
8089
- status: 'error',
8090
- content: getI18n('vxe.error.treeDragChild')
8091
- });
8092
- }
8093
- return errRest;
8094
- }
8095
- }
8162
+ if (!dragTargetColumn && (!column.children || !column.children.length)) {
8163
+ dragTargetColumn = column;
8164
+ dragColWidth += column.renderWidth;
8096
8165
  }
8166
+ dragAllTargetCols.push(column);
8167
+ });
8168
+ }
8169
+ if (!dragTargetColumn) {
8170
+ dragTargetColumn = dragColumn;
8171
+ }
8172
+ const dragColRest = fullColumnIdData[dragTargetColumn.id] || {};
8173
+ const _dragColIndex = dragColRest._index;
8174
+ let dragOffsetLeft = -1;
8175
+ if (animation) {
8176
+ const oldTrEl = el.querySelector(`.vxe-table--column[colid="${dragTargetColumn.id}"]`);
8177
+ if (oldTrEl) {
8178
+ dragOffsetLeft = oldTrEl.offsetLeft;
8097
8179
  }
8098
- else if (dragColumn.parentId) {
8099
- // 子到根
8100
- if (!isCrossDrag) {
8180
+ }
8181
+ let oafIndex = -1;
8182
+ let nafIndex = -1;
8183
+ const oldAllMaps = {};
8184
+ XEUtils.eachTree([dragColumn], column => {
8185
+ oldAllMaps[column.id] = column;
8186
+ });
8187
+ let isSelfToChildStatus = false;
8188
+ if (dragColumn.parentId && newColumn.parentId) {
8189
+ // 子到子
8190
+ if (isPeerDrag && !isCrossDrag) {
8191
+ if (dragColumn.parentId !== newColumn.parentId) {
8192
+ // 非同级
8101
8193
  return errRest;
8102
8194
  }
8103
8195
  }
8104
- else if (newColumn.parentId) {
8105
- // 根到子
8196
+ else {
8106
8197
  if (!isCrossDrag) {
8107
8198
  return errRest;
8108
8199
  }
@@ -8119,87 +8210,190 @@ const Methods = {
8119
8210
  }
8120
8211
  }
8121
8212
  }
8122
- else {
8123
- // 根到根
8124
- }
8125
- const oldewMatchRest = XEUtils.findTree(collectColumn, item => item.id === dragColumn.id);
8126
- // 改变层级
8127
- if (isSelfToChildStatus && (isCrossDrag && isSelfToChildDrag)) {
8128
- if (oldewMatchRest) {
8129
- const { items: oCols, index: oIndex } = oldewMatchRest;
8130
- const childList = dragColumn.children || [];
8131
- childList.forEach(column => {
8132
- column.parentId = dragColumn.parentId;
8133
- });
8134
- oCols.splice(oIndex, 1, ...childList);
8135
- dragColumn.children = [];
8136
- }
8213
+ }
8214
+ else if (dragColumn.parentId) {
8215
+ // 子到根
8216
+ if (!isCrossDrag) {
8217
+ return errRest;
8137
8218
  }
8138
- else {
8139
- if (oldewMatchRest) {
8140
- const { items: oCols, index: oIndex, parent: oParent } = oldewMatchRest;
8141
- oCols.splice(oIndex, 1);
8142
- if (!oParent) {
8143
- oafIndex = oIndex;
8219
+ }
8220
+ else if (newColumn.parentId) {
8221
+ // 根到子
8222
+ if (!isCrossDrag) {
8223
+ return errRest;
8224
+ }
8225
+ if (oldAllMaps[newColumn.id]) {
8226
+ isSelfToChildStatus = true;
8227
+ if (!(isCrossDrag && isSelfToChildDrag)) {
8228
+ if (VxeUI.modal) {
8229
+ VxeUI.modal.message({
8230
+ status: 'error',
8231
+ content: getI18n('vxe.error.treeDragChild')
8232
+ });
8144
8233
  }
8234
+ return errRest;
8145
8235
  }
8146
8236
  }
8147
- const newMatchRest = XEUtils.findTree(collectColumn, item => item.id === newColumn.id);
8148
- if (newMatchRest) {
8149
- const { items: nCols, index: nIndex, parent: nParent } = newMatchRest;
8150
- // 转子级
8151
- if ((isCrossDrag && isToChildDrag) && isDragToChildFlag) {
8152
- dragColumn.parentId = newColumn.id;
8153
- newColumn.children = (newColumn.children || []).concat([dragColumn]);
8154
- }
8155
- else {
8156
- dragColumn.parentId = newColumn.parentId;
8157
- nCols.splice(nIndex + dragOffsetIndex, 0, dragColumn);
8158
- }
8159
- if (!nParent) {
8160
- nafIndex = nIndex;
8161
- }
8237
+ }
8238
+ else {
8239
+ // 根到根
8240
+ }
8241
+ const oldewMatchRest = XEUtils.findTree(collectColumn, item => item.id === dragColumn.id);
8242
+ // 改变层级
8243
+ if (isSelfToChildStatus && (isCrossDrag && isSelfToChildDrag)) {
8244
+ if (oldewMatchRest) {
8245
+ const { items: oCols, index: oIndex } = oldewMatchRest;
8246
+ const childList = dragColumn.children || [];
8247
+ childList.forEach(column => {
8248
+ column.parentId = dragColumn.parentId;
8249
+ });
8250
+ oCols.splice(oIndex, 1, ...childList);
8251
+ dragColumn.children = [];
8162
8252
  }
8163
- XEUtils.eachTree(collectColumn, (column, index, items, path, parentColumn) => {
8164
- if (!parentColumn) {
8165
- const sortIndex = index + 1;
8166
- column.renderSortNumber = sortIndex;
8167
- }
8168
- });
8169
- reactData.isDragColMove = true;
8170
- if (mouseConfig) {
8171
- if ($xeTable.clearSelected) {
8172
- $xeTable.clearSelected();
8173
- }
8174
- if ($xeTable.clearCellAreas) {
8175
- $xeTable.clearCellAreas();
8176
- $xeTable.clearCopyCellArea();
8253
+ }
8254
+ else {
8255
+ if (oldewMatchRest) {
8256
+ const { items: oCols, index: oIndex, parent: oParent } = oldewMatchRest;
8257
+ oCols.splice(oIndex, 1);
8258
+ if (!oParent) {
8259
+ oafIndex = oIndex;
8177
8260
  }
8178
8261
  }
8179
- if (evnt) {
8180
- $xeTable.dispatchEvent('column-dragend', {
8181
- oldColumn: dragColumn,
8182
- newColumn,
8183
- dragColumn,
8184
- dragPos: prevDragPos,
8185
- dragToChild: isDragToChildFlag,
8186
- offsetIndex: dragOffsetIndex,
8187
- _index: {
8188
- newIndex: nafIndex,
8189
- oldIndex: oafIndex
8190
- }
8191
- }, evnt);
8262
+ }
8263
+ const newMatchRest = XEUtils.findTree(collectColumn, item => item.id === newColumn.id);
8264
+ if (newMatchRest) {
8265
+ const { items: nCols, index: nIndex, parent: nParent } = newMatchRest;
8266
+ // 转子级
8267
+ if ((isCrossDrag && isToChildDrag) && isDragToChildFlag) {
8268
+ dragColumn.parentId = newColumn.id;
8269
+ newColumn.children = (newColumn.children || []).concat([dragColumn]);
8192
8270
  }
8271
+ else {
8272
+ dragColumn.parentId = newColumn.parentId;
8273
+ nCols.splice(nIndex + dragOffsetIndex, 0, dragColumn);
8274
+ }
8275
+ if (!nParent) {
8276
+ nafIndex = nIndex;
8277
+ }
8278
+ }
8279
+ XEUtils.eachTree(collectColumn, (column, index, items, path, parentColumn) => {
8280
+ if (!parentColumn) {
8281
+ const sortIndex = index + 1;
8282
+ column.renderSortNumber = sortIndex;
8283
+ }
8284
+ });
8285
+ if (mouseConfig) {
8286
+ if ($xeTable.clearSelected) {
8287
+ $xeTable.clearSelected();
8288
+ }
8289
+ if ($xeTable.clearCellAreas) {
8290
+ $xeTable.clearCellAreas();
8291
+ $xeTable.clearCopyCellArea();
8292
+ }
8293
+ }
8294
+ if (evnt) {
8295
+ $xeTable.dispatchEvent('column-dragend', {
8296
+ oldColumn: dragColumn,
8297
+ newColumn,
8298
+ dragColumn,
8299
+ dragPos: prevDragPos,
8300
+ dragToChild: isDragToChildFlag,
8301
+ offsetIndex: dragOffsetIndex,
8302
+ _index: {
8303
+ newIndex: nafIndex,
8304
+ oldIndex: oafIndex
8305
+ }
8306
+ }, evnt);
8307
+ }
8308
+ return $xeTable.$nextTick().then(() => {
8193
8309
  if (isSyncColumn) {
8194
- $xeTable.handleColDragSwapColumn();
8310
+ return $xeTable.handleColDragSwapColumn();
8311
+ }
8312
+ }).then(() => {
8313
+ if (animation) {
8314
+ const { tableColumn } = reactData;
8315
+ const { visibleColumn, fullColumnIdData } = internalData;
8316
+ let dragNewColumn = null;
8317
+ const dragNewColMaps = {};
8318
+ XEUtils.eachTree([dragColumn], column => {
8319
+ if (!dragNewColumn && (!column.children || !column.children.length)) {
8320
+ dragNewColumn = column;
8321
+ }
8322
+ dragNewColMaps[column.id] = column;
8323
+ });
8324
+ if (!dragNewColumn) {
8325
+ dragNewColumn = dragColumn;
8326
+ }
8327
+ if (dragColWidth && dragAllTargetCols.length) {
8328
+ const _newColIndex = XEUtils.findIndexOf(visibleColumn, column => !!dragNewColumn && column.id === dragNewColumn.id);
8329
+ const firstCol = tableColumn[0];
8330
+ const firstColRest = fullColumnIdData[firstCol.id];
8331
+ if (firstColRest) {
8332
+ const _firstColIndex = firstColRest._index;
8333
+ const _lastColIndex = _firstColIndex + tableColumn.length;
8334
+ let csIndex = -1;
8335
+ let ceIndex = -1;
8336
+ let offsetRate = 1;
8337
+ if (_dragColIndex < _firstColIndex) {
8338
+ // 从左往右虚拟拖拽
8339
+ csIndex = 0;
8340
+ ceIndex = _newColIndex - _firstColIndex;
8341
+ }
8342
+ else if (_dragColIndex > _lastColIndex) {
8343
+ // 从右往左虚拟拖拽
8344
+ const $newRowIndex = dragColRest.$index;
8345
+ csIndex = $newRowIndex + 1;
8346
+ ceIndex = tableColumn.length;
8347
+ offsetRate = -1;
8348
+ }
8349
+ else {
8350
+ if (_newColIndex > _dragColIndex) {
8351
+ // 从左往右拖拽
8352
+ csIndex = _dragColIndex - _firstColIndex;
8353
+ ceIndex = csIndex + _newColIndex - _dragColIndex;
8354
+ }
8355
+ else {
8356
+ // 从右往左拖拽
8357
+ csIndex = _newColIndex - _firstColIndex + 1;
8358
+ ceIndex = csIndex + _dragColIndex - _newColIndex;
8359
+ offsetRate = -1;
8360
+ }
8361
+ }
8362
+ const dragRangeList = [];
8363
+ const dragRangeMaps = {};
8364
+ for (let i = csIndex; i < ceIndex; i++) {
8365
+ const column = tableColumn[i];
8366
+ if (!dragRangeMaps[column.id] && !dragNewColMaps[column.id]) {
8367
+ dragRangeMaps[column.id] = column;
8368
+ dragRangeList.push(column);
8369
+ }
8370
+ }
8371
+ XEUtils.eachTree([newColumn], column => {
8372
+ if (!dragRangeMaps[column.id]) {
8373
+ dragRangeMaps[column.id] = column;
8374
+ dragRangeList.push(column);
8375
+ }
8376
+ });
8377
+ if (dragRangeList.length) {
8378
+ const dtTrList = el.querySelectorAll(dragRangeList.map(column => `.vxe-table--column[colid="${column.id}"]`).join(','));
8379
+ moveColAnimateToLr(dtTrList, offsetRate * dragColWidth);
8380
+ }
8381
+ }
8382
+ const newTrList = el.querySelectorAll(dragAllTargetCols.map(column => `.vxe-table--column[colid="${column.id}"]`).join(','));
8383
+ const newTdEl = newTrList[0];
8384
+ if (dragOffsetLeft > -1 && newTdEl) {
8385
+ moveColAnimateToLr(newTrList, dragOffsetLeft - newTdEl.offsetLeft);
8386
+ }
8387
+ }
8195
8388
  }
8389
+ loadScrollXData($xeTable);
8196
8390
  return {
8197
8391
  status: true
8198
8392
  };
8199
- }).catch(() => {
8200
- return errRest;
8201
8393
  });
8202
- }
8394
+ }).catch(() => {
8395
+ return errRest;
8396
+ });
8203
8397
  }
8204
8398
  return Promise.resolve(errRest);
8205
8399
  },
@@ -8209,18 +8403,14 @@ const Methods = {
8209
8403
  const internalData = $xeTable;
8210
8404
  const { dragCol } = reactData;
8211
8405
  const { prevDragCol, prevDragPos, prevDragToChild } = internalData;
8406
+ const el = $xeTable.$refs.refElem;
8212
8407
  $xeTable.handleColDragSwapEvent(evnt, true, dragCol, prevDragCol, prevDragPos, prevDragToChild);
8213
8408
  hideDropTip($xeTable);
8214
8409
  clearColDropOrigin($xeTable);
8410
+ clearColAnimate(el);
8215
8411
  internalData.prevDragToChild = false;
8216
8412
  reactData.dragRow = null;
8217
8413
  reactData.dragCol = null;
8218
- setTimeout(() => {
8219
- reactData.isDragColMove = false;
8220
- $xeTable.recalculate().then(() => {
8221
- loadScrollXData($xeTable);
8222
- });
8223
- }, 500);
8224
8414
  },
8225
8415
  handleHeaderCellDragDragoverEvent(evnt) {
8226
8416
  const $xeTable = this;
@@ -8299,7 +8489,6 @@ const Methods = {
8299
8489
  const { column } = params;
8300
8490
  const dragEl = evnt.currentTarget;
8301
8491
  const thEl = trigger === 'cell' ? dragEl : (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
8302
- reactData.isDragColMove = false;
8303
8492
  clearColDropOrigin($xeTable);
8304
8493
  if (dragStartMethod && !dragStartMethod(params)) {
8305
8494
  thEl.draggable = false;
@@ -8322,7 +8511,6 @@ const Methods = {
8322
8511
  hideDropTip($xeTable);
8323
8512
  reactData.dragRow = null;
8324
8513
  reactData.dragCol = null;
8325
- reactData.isDragColMove = false;
8326
8514
  },
8327
8515
  setPendingRow(rows, status) {
8328
8516
  const $xeTable = this;
@@ -8815,7 +9003,7 @@ const Methods = {
8815
9003
  reactData.rowExpandedFlag++;
8816
9004
  return Promise.all(lazyRests)
8817
9005
  .then(() => $xeTable.$nextTick())
8818
- .then(() => $xeTable.recalculate(true))
9006
+ .then(() => handleLazyRecalculate($xeTable, true, true, true))
8819
9007
  .then(() => {
8820
9008
  updateRowOffsetTop($xeTable);
8821
9009
  updateRowExpandStyle($xeTable);
@@ -8859,7 +9047,7 @@ const Methods = {
8859
9047
  }
8860
9048
  return $xeTable.$nextTick().then(() => {
8861
9049
  if (expList.length) {
8862
- return $xeTable.recalculate(true);
9050
+ return handleLazyRecalculate($xeTable, true, true, true);
8863
9051
  }
8864
9052
  }).then(() => {
8865
9053
  updateRowOffsetTop($xeTable);
@@ -8992,7 +9180,7 @@ const Methods = {
8992
9180
  $xeTable.handleTableData();
8993
9181
  updateAfterDataIndex($xeTable);
8994
9182
  reactData.rowGroupExpandedFlag++;
8995
- return $xeTable.recalculate(true);
9183
+ return handleLazyRecalculate($xeTable, true, true, true);
8996
9184
  },
8997
9185
  clearRowGroupExpand() {
8998
9186
  const $xeTable = this;
@@ -9003,7 +9191,7 @@ const Methods = {
9003
9191
  $xeTable.handleTableData();
9004
9192
  updateAfterDataIndex($xeTable);
9005
9193
  reactData.rowGroupExpandedFlag++;
9006
- return $xeTable.recalculate(true);
9194
+ return handleLazyRecalculate($xeTable, true, true, true);
9007
9195
  },
9008
9196
  getTreeExpandRecords() {
9009
9197
  const $xeTable = this;
@@ -9353,8 +9541,6 @@ const Methods = {
9353
9541
  }
9354
9542
  internalData.lastScrollTop = scrollTop;
9355
9543
  }
9356
- reactData.isDragColMove = false;
9357
- reactData.isDragRowMove = false;
9358
9544
  reactData.lastScrollTime = Date.now();
9359
9545
  const evntParams = Object.assign({ scrollTop,
9360
9546
  scrollLeft,