初始提交

baoshiwei

2023-03-10 1fb197352b6a263646e4ccd3ed1c7854ede031dd

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import { onMounted, onUnmounted, nextTick } from 'vue';
import { JVxeTableMethods, JVxeTableProps } from '/@/components/jeecg/JVxeTable/src/types';
import Sortable from 'sortablejs';
 
export function useDragSort(props: JVxeTableProps, methods: JVxeTableMethods) {
  if (props.dragSort) {
    let sortable2: Sortable;
    let initTime: any;
 
    onMounted(() => {
      // 加载完成之后再绑定拖动事件
      initTime = setTimeout(createSortable, 300);
    });
 
    onUnmounted(() => {
      clearTimeout(initTime);
      if (sortable2) {
        sortable2.destroy();
      }
    });
 
    function createSortable() {
      let xTable = methods.getXTable();
      // let dom = xTable.$el.querySelector('.vxe-table--fixed-wrapper .vxe-table--body tbody')
      let dom = xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody');
      let startChildren = [];
      sortable2 = Sortable.create(dom as HTMLElement, {
        handle: '.drag-btn',
        direction: 'vertical',
        animation: 300,
        onStart(e) {
          let from = e.from;
          // @ts-ignore
          startChildren = [...from.children];
        },
        onEnd(e) {
          let oldIndex = e.oldIndex as number;
          let newIndex = e.newIndex as number;
          if (oldIndex === newIndex) {
            return;
          }
          // 【VUEN-2505】获取当前行数据
          let rowNode = xTable.getRowNode(e.item);
          if (!rowNode) {
            return;
          }
          let from = e.from;
          let element = startChildren[oldIndex];
          let target = null;
          if (oldIndex > newIndex) {
            // 向上移动
            if (oldIndex + 1 < startChildren.length) {
              target = startChildren[oldIndex + 1];
            }
          } else {
            // 向下移动
            target = startChildren[oldIndex + 1];
          }
          from.removeChild(element);
          from.insertBefore(element, target);
          nextTick(() => {
            // 【VUEN-2505】算出因虚拟滚动导致的偏移量
            let diffIndex = rowNode!.index - oldIndex;
            if (diffIndex > 0) {
              oldIndex = oldIndex + diffIndex;
              newIndex = newIndex + diffIndex;
            }
            methods.doSort(oldIndex, newIndex);
            methods.trigger('dragged', { oldIndex, newIndex });
          });
        },
      });
    }
  }
}