org-chart-frant/src/pages/dragTree.jsx

import { Tree, message, Modal, Popconfirm, Spin, Layout, Drawer } from 'antd';
import React, { useEffect, useState, useRef } from 'react';
import * as d3 from 'd3';
import qs from 'qs';
import MergeDialog from '../components/dialog/mergeDialog';
import CopyDialog from '../components/dialog/copyDialog';
import inset from '../../public/img/back/inset.png';

import {
  HomeOutlined,
  FolderOutlined,
  ClusterOutlined,
  ApartmentOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
const { Header, Footer, Sider, Content } = Layout;
import './index.less';

const DragTree = () => {
  const [gData, setGData] = useState([]);
  const [expandedKeys, setExpandedKeys] = useState([undefined]);
  const childRef = useRef(null);
  const copyChildRef = useRef(null);
  const [tip, setTip] = useState('正在加载,请稍候...');
  const [loading, setLoading] = useState(false);
  const [showCanceled, setShowCanceled] = useState(0);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [iframe, setIframe] = useState('');

  const [open, setOpen] = useState(false);
  const [mergeId, setMergeId] = useState(null);
  const [copyopen, setCopyOpen] = useState(false);
  const [copyId, setCopyId] = useState(null);

  useEffect(() => {
    getMoveTree(0);
  }, [true]);

  const getMoveTree = (showCanceled, expandedKeys = '') => {
    setLoading(true);
    d3.json(
      `/api/bs/hrmorganization/orgchart/getMovingTree?showCanceled=${showCanceled}&expandedKeys=${expandedKeys}`,
    ).then((data) => {
      setGData(data.movingTree);
      setExpandedKeys(data.expandedKeys);
      setLoading(false);
    });
  };

  const onDragEnter = (info) => {
    //console.log(info);
    // expandedKeys 需要受控时设置
    // setExpandedKeys(info.expandedKeys)
  };

  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 onDrop = (info) => {
    const dropKey = info.node.key;
    const dragKey = info.dragNode.key;
    const dropPos = info.node.pos.split('-');
    const dropPosition =
      info.dropPosition - Number(dropPos[dropPos.length - 1]);

    if (dropPosition == -1) {
      return message.error('不支持该操作！！！', 2);
    }
    let pos = dropPosition == 0 ? '内部' : '下方';

    let title = `确定将【${info.dragNode.title}】移到 【${info.node.title}】${pos}`;
    Modal.confirm({
      title: '转移操作',
      content: title,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        setLoading(true);
        setTip('正在转移，请稍候...');

        fetch('/api/bs/hrmorganization/dept/dragDepartment', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            sourcekey: dragKey,
            targetkey: dropKey,
            dropPosition: dropPosition,
          }),
        })
          .then((response) => response.json())
          .then((res) => {
            if (res.code == 200) {
              const data = [...gData];
              // Find dragObject
              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.unshift(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);
                  // in previous version, we use item.children.push(dragObj) to insert the
                  // item to the tail of the children
                });
              } 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);
                }
              }
              setGData(data);
              message.success('转移成功', 2);
            } else {
              message.warning(res.msg, 2);
            }
            setLoading(false);
          })
          .catch((error) => {
            message.error('接口异常,请联系管理员');
          });
      },
      onCancel() {},
    });
  };

  /**
   * 删除
   * @param {*} nodeData
   */
  const onDelete = (nodeData) => {
    const extend = nodeData.type == '1' ? 'comp' : 'dept';
    fetch(`/api/bs/hrmorganization/${extend}/deleteByIds`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ ids: nodeData.id.substring(1) }),
    })
      .then((response) => response.json())
      .then((res) => {
        if (res.code == 200) {
          if (res.data.status == '1') {
            const data = [...gData];
            loop(data, nodeData.key, (item, index, arr) => {
              arr.splice(index, 1);
            });
            setGData(data);
            message.success('删除成功', 2);
          } else {
            message.warning(res.data.message, 2);
          }
        }
      })
      .catch((error) => {
        message.error('接口异常,请联系管理员');
      });
  };

  /**
   * 封存
   * @param {*} nodeData
   */
  const onCancel = (nodeData) => {
    const extend = nodeData.type == '1' ? 'comp' : 'dept';
    fetch(`/api/bs/hrmorganization/${extend}/updateForbiddenTagById`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id: nodeData.id.substring(1),
        canceled: nodeData.canceled != '0',
      }),
    })
      .then((response) => response.json())
      .then((res) => {
        if (res.code == 200) {
          const data = [...gData];
          loop(data, nodeData.key, (item, index, arr) => {
            arr.splice(index, 1);
          });
          setGData(data);
          message.success('封存成功', 2);
        } else {
          message.warning(res.msg, 2);
        }
      })
      .catch((error) => {
        message.error('接口异常,请联系管理员');
      });
  };

  /**
   * 合并
   * @param {*} nodeData
   */
  const onMerge = (nodeData) => {
    if (childRef.current) {
      childRef.current.getTreeData();
    }
    setMergeId(nodeData.id);
    setOpen(true);
  };

  const onMergeCreate = (values) => {
    let params = {
      department: values.department.substring(1),
      mergeName: values.mergeName,
      id: mergeId.substring(1),
    };
    fetch('/api/bs/hrmorganization/dept/mergeDepartment', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(params),
    })
      .then((response) => response.json())
      .then((res) => {
        if (res.code == 200) {
          getMoveTree(0, values.department);
          message.success('合并成功', 2);
        } else {
          message.warning(res.msg, 2);
        }
        setOpen(false);
      })
      .catch((error) => {
        message.error('接口异常,请联系管理员');
      });
  };

  /**
   * 复制
   * @param {*} nodeData
   */
  const onCopy = (nodeData) => {
    if (copyChildRef.current) {
      copyChildRef.current.getTreeData();
    }
    setCopyOpen(true);
    setCopyId(nodeData.id);
  };

  const onCopyCreate = (values) => {
    let params = {
      company: values.company,
      copySubDept: values.copySubDept ? '1' : '0',
      ids: copyId.substring(1),
    };
    fetch(`/api/bs/hrmorganization/dept/copyDepartment`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(params),
    })
      .then((response) => response.json())
      .then((res) => {
        if (res.code == 200) {
          setCopyOpen(false);
          getMoveTree(0, values.company);
          message.success('复制成功', 2);
        } else {
          message.warning(res.msg, 2);
        }
      })
      .catch((error) => {
        message.error('接口异常,请联系管理员');
      });
  };

  const onTitleRender = (nodeData) => {
    let extend = nodeData.type == '1' ? 'companyExtend' : 'departmentExtend';
    let attr =
      nodeData.type == '1' || nodeData.canceled == '1'
        ? 'none'
        : 'inline-block';
    let icon = nodeData.type == '1' ? <HomeOutlined /> : <FolderOutlined />;
    return (
      <>
        {nodeData.type == 0 ? (
          <span>
            <ClusterOutlined />
            <span style={{ marginLeft: '5px' }}>{nodeData.title}</span>
          </span>
        ) : (
          <>
            <span>
              {icon}
              <span style={{ marginLeft: '5px' }}>
                {nodeData.title}
                {nodeData.canceled == '1' ? (
                  <span style={{ color: 'red', marginLeft: '5px' }}>
                    (已封存)
                  </span>
                ) : (
                  ''
                )}
              </span>
            </span>
            <div id="drag-button-ops">
              <span
                className="drag-button"
                onClick={() => {
                  setDrawerOpen(true);
                  setIframe(
                    `/spa/organization/static/index.html#/main/organization/${extend}/${nodeData.id.substring(
                      1,
                    )}`,
                  );
                }}
              >
                查看
              </span>
              <Popconfirm
                title={`确认要删除[${nodeData.title}] 吗?`}
                onConfirm={() => onDelete(nodeData)}
                okText="确认"
                cancelText="取消"
              >
                <span className="drag-button">删除</span>
              </Popconfirm>
              <Popconfirm
                title={`确认要封存或恢复 [${nodeData.title}] 吗?`}
                onConfirm={() => onCancel(nodeData)}
                okText="确认"
                cancelText="取消"
              >
                <span className="drag-button">
                  {nodeData.canceled == '0' ? '封存' : '恢复'}
                </span>
              </Popconfirm>
              <span
                style={{ display: attr }}
                className="drag-button"
                onClick={() => onMerge(nodeData)}
              >
                合并
              </span>
              <span
                style={{ display: attr }}
                className="drag-button"
                onClick={() => onCopy(nodeData)}
              >
                复制
              </span>
            </div>
          </>
        )}
      </>
    );
  };

  const onExpand = (info) => {
    setExpandedKeys(info);
  };

  return (
    <div className="drag-wrapper">
      <Spin tip={tip} spinning={loading}>
        <div className="drag-layout">
          <div className="drag-header">
            <img src={inset} />
            <div>组织快速调整</div>
          </div>
          <div className="drag-content">
            <ApartmentOutlined
              className="drag-showcanceled"
              style={{ color: showCanceled == 0 ? '#000' : '#1890ff' }}
              onClick={() => {
                const value = showCanceled == 0 ? 1 : 0;
                setTip('正在加载,请稍候...');
                setShowCanceled(value);
                getMoveTree(value);
              }}
            />
            <Tree
              className="draggable-tree"
              //defaultExpandedKeys={expandedKeys}
              expandedKeys={expandedKeys}
              onExpand={onExpand}
              draggable
              icon={false}
              blockNode
              onDragEnter={onDragEnter}
              onDrop={onDrop}
              treeData={gData}
              titleRender={onTitleRender}
            />
          </div>
          <Drawer
            width="60%"
            placement="right"
            closable={false}
            onClose={() => setDrawerOpen(false)}
            open={drawerOpen}
          >
            <iframe src={iframe} width="100%" height="100%" />
          </Drawer>

          <div className="drag-footer">
            <p>
              <QuestionCircleOutlined />
              小提示
            </p>
            <div className="tips">
              <div>1.鼠标拖拽Tree节点到任一分部部门下可快速完成组织转移;</div>
              <div>2.点击【查看】侧滑打开组织详细信息,可快速编辑;</div>
              <div>
                3.鼠标悬停树节点 一键开启【删除】【封存】【合并】【复制】等功能;
              </div>
              <div>4.顶部小图标点击可显示已封存的组织架构。</div>
            </div>
          </div>
        </div>
      </Spin>

      <MergeDialog
        ref={childRef}
        open={open}
        onCreate={onMergeCreate}
        onCancel={() => {
          setOpen(false);
        }}
      />
      <CopyDialog
        ref={copyChildRef}
        open={copyopen}
        onCreate={onCopyCreate}
        onCancel={() => {
          setCopyOpen(false);
        }}
      />
    </div>
  );
};
export default DragTree;