vue-ant-patterns/biz-es/b-tree/drag.js

vue-ant-patterns

import _extends from 'babel-runtime/helpers/extends';
import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
/*
 * @Author: w.pengfei
 * @Date: 2020-09-06 11:57:27
 * @LastEditTime: 2020-09-06 12:11:02
 * @Description: ''
 * @LastEditors: w.pengfei
 */
import { relationHandler, relationSetHandler } from '../../es/_utils';
import { uniq, recursionDragNode } from './utils';

/**
 * mixin
 * 仅用于拆分程序
 * 程序太大
 */
export default {
  name: 'tree-drap',
  methods: {
    onDragenter: function onDragenter(obj) {
      // const { event, node, expandedKeys } = obj;
      this.$emit('dragenter', obj);
    },

    /**
     * 拖拽有两种方式可实现节点数据更新
     *
     * 1. 直接操作 treeData, 处理好关系, 并保持数据对应
     * 2. 操作 listData, 处理好 rel 中声明的数据关系
     *
     * 优缺点
     *  1. 优点:: 相对来说不需要通过 listData 转换
     *  1. 缺点:: listData 数据不能同步
     *
     *  2. 与 1 正好相反: treeData 需要通过处理好的 listData 转换
     *     并能同步 listData 数据
     *
     * 此段程序使用的 第一种方式, 直接操作 treeData
     * @param {*} obj
     */
    onDrop: function onDrop(obj) {
      var rel = this.$props.rel;
      var event = obj.event,
          node = obj.node,
          dragNode = obj.dragNode,
          dragNodesKeys = obj.dragNodesKeys,
          dropPosition = obj.dropPosition,
          dropToGap = obj.dropToGap;
      // 目标节点 key

      var dropKey = node.eventKey;
      // 拖拽节点 key
      var dragKey = dragNode.eventKey;
      var data = [].concat(_toConsumableArray(this.treeData));

      var dropPos = node.pos.split('-');
      var position = dropPosition - Number(dropPos[dropPos.length - 1]);

      /**
       * dropToGap false
       * 拖进节点内部, 拖拽节点放置目标节点数组中最后位置
       */

      /*
        找到拖拽节点 
      */
      var dragObj = void 0;
      recursionDragNode(data, dragKey, rel[0], function (item, index, arr) {
        arr.splice(index, 1);
        dragObj = item;
      });
      if (!dropToGap) {
        recursionDragNode(data, dropKey, rel[0], function (item) {
          item.children = item.children || [];

          // 更新节点对应数据
          // 拖进节点内部, parent 应为 drop 节点
          // 放置最后
          dragObj = _extends({}, relationSetHandler(rel[1], dropKey, dragObj));
          // 同时节点应为非叶子节点
          item.isLeaf = false;
          item.children.push(dragObj);
        });
      } else if ((node.dataRef.children || []).length > 0 && node.expanded && position === 1) {
        // 更新节点对应数据
        // 拖进节点内部, parent 应为 drop 节点
        // 放置最前
        recursionDragNode(data, dropKey, rel[0], function (item) {
          item.children = item.children || [];
          dragObj = _extends({}, relationSetHandler(rel[1], dropKey, dragObj));
          item.isLeaf = false;
          item.children.unshift(dragObj);
        });
      } else {
        var ar = void 0;
        var i = void 0;
        var targetItem = void 0;
        recursionDragNode(data, dropKey, rel[0], function (item, index, arr) {
          targetItem = item;
          ar = arr;
          i = index;
        });
        // 获取目标节点的 pid
        // 在任何情况, 都统一更新拖拽节点的 pid
        // 有两个肯能
        // 1. 在兄弟节点间排序
        // 2. 跨节点转移
        var pid = relationHandler(rel[1], targetItem);
        dragObj = _extends({}, relationSetHandler(rel[1], pid, dragObj));
        if (position === -1) {
          ar.splice(i, 0, dragObj);
        } else {
          ar.splice(i + 1, 0, dragObj);
        }
      }
      this.treeData = data;
      this.$emit('drop', obj);
    }
  }
};