React+Ant Design使用Tree树形组件

实现简单拖拽与限制树形数据平级之间不能嵌套(只能排序),不同父级之间可以拖拽嵌套.

import React, { useState, useEffect } from 'react';
import { Tree, Spin } from 'antd';
// import { EditOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import { queryDepartments, submitDepartments } from './service';
// const { Search } = Input;
// 测试数据
const { TreeNode } = Tree;

// 树形结构循环生成
const renderTree = (tree_data) => {
  if (tree_data && Array.isArray(tree_data) && tree_data.length > 0) {
    return tree_data.map((item) => {
      if (item.children && Array.isArray(item.children)) {
        return (
          <TreeNode title={item.title} key={item.key}>
            {renderTree(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode title={item.title} key={item.key} />;
    });
  }
  return [];
};

const DragTable = () => {
  const [treeData, setTreeData] = useState([]);
  const [visible, setVisible] = useState(true);
  const [expandedKeysData, setExpandedKeysData] = useState([]);

  // 获取数据,取消加载状态,设置默认展开项
  useEffect(() => {
    queryDepartments().then((res) => {
      setTreeData(res.data);
      setVisible(false);
      setExpandedKeysData(['company_9078d37085784d97a085b9738390bdc2']);
    });
  }, []);

  /* 拖拽实现 */
  const DragEnter = (expandedKeys) => {
    console.log(expandedKeys);
    // expandedKeys 需要受控时设置
    // this.setState({
    //   expandedKeys: info.expandedKeys,
    // });
  };

  // 展开/收起节点时触发
  const onExpand = (expandedKeys) => {
    setExpandedKeysData(expandedKeys);
  };

  const handleDrop = (info) => {
    // console.log(info);
    const dropKey = info.node.props.eventKey;
    const dragKey = info.dragNode.props.eventKey;
    const dropPos = info.node.props.pos.split('-');
    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
    const dropToGap = info.dropToGap;
    // console.log(dropToGap);
    // console.log(info.dropPosition);
    // console.log(dragKey);
    // console.log(dropKey);
    const str1 = dropKey.split('_');
    const str2 = dragKey.split('_');
    // console.log(str1);

    // 通过dropToGap(布尔)与每一个级别的标识,规定平级不能拖拽嵌套,不同父级可以拖拽嵌套
    if (str1[0] !== str2[0] || dropToGap) {
      const loop = (data, key, callback) => {
        for (let i = 0; i < data.length; i++) {
          if (data[i].key === key) {
            return callback(data[i], i, data);
          }
          if (data[i].children) {
            loop(data[i].children, key, callback);
          }
        }
      };

      const data = [...treeData];

      let dragObj;
      loop(data, dragKey, (item, index, arr) => {
        arr.splice(index, 1);
        dragObj = item;
      });
      if (!info.dropToGap) {
        // Drop on the content
        loop(data, dropKey, (item) => {
          item.children = item.children || [];
          // where to insert 示例添加到尾部，可以是随意位置
          item.children.push(dragObj);
        });
      } else if (
        (info.node.props.children || []).length > 0 && // Has children
        info.node.props.expanded && // Is expanded
        dropPosition === 1 // On the bottom gap
      ) {
        loop(data, dropKey, (item) => {
          item.children = item.children || [];
          // where to insert 示例添加到头部，可以是随意位置
          item.children.unshift(dragObj);
        });
      } else {
        let ar;
        let i;
        loop(data, dropKey, (item, index, arr) => {
          ar = arr;
          i = index;
        });
        if (dropPosition === -1) {
          ar.splice(i, 0, dragObj);
        } else {
          ar.splice(i + 1, 0, dragObj);
        }
      }
      // console.log(data);
      setTreeData(data);
      setTreeData(data);
      submitDepartments({
        from_key: dragKey,
        to_key: dropKey,
        drop_position: info.dropPosition,
      });
    }
    // 其他
    return;
  };

  return (
    <>
      <Spin spinning={visible}>
        <Tree
          blockNode
          checkable
          showIcon
          draggable
          expandedKeys={expandedKeysData}
          onExpand={onExpand}
          onDrop={handleDrop}
          onDragEnter={DragEnter}
        >
          {renderTree(treeData)}
        </Tree>
      </Spin>
    </>
  );
};

export default DragTable;