修改

src/components/topBar/index.jsx

@@ -290,6 +290,15 @@ export class TopBar extends React.Component {
             >
               查询
             </Button>
+            <Button
+              type="primary"
+              style={{ marginRight: '10px' }}
+              onClick={() => {
+                window.open('#/dragtree', 'blank');
+              }}
+            >
+              组织调整
+            </Button>
             <Dropdown overlay={this.menu}>
               <Button type="primary">导出</Button>
             </Dropdown>

src/pages/dragTree.jsx

@@ -1,4 +1,4 @@
-import { Tree, message, Modal, Popconfirm, Spin } from 'antd';
+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';
@@ -10,7 +10,9 @@ import {
   FolderOutlined,
   ClusterOutlined,
   ApartmentOutlined,
+  ExclamationCircleOutlined,
 } from '@ant-design/icons';
+const { Header, Footer, Sider, Content } = Layout;
 import './index.less';
 
 const DragTree = () => {
@@ -21,6 +23,8 @@ const DragTree = () => {
   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);
@@ -60,13 +64,27 @@ const DragTree = () => {
   };
 
   const onDrop = (info) => {
-    setLoading(true);
-    setTip('正在转移，请稍候...');
     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: {
@@ -132,8 +150,9 @@ const DragTree = () => {
           .catch((error) => {
             message.error('接口异常,请联系管理员');
           });
-
-    setTimeout(function () {}, 1000);
+      },
+      onCancel() {},
+    });
   };
 
   /**
@@ -256,12 +275,17 @@ const DragTree = () => {
   };
 
   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({ ...values, ids: copyId.substring(1) }),
+      body: JSON.stringify(params),
     })
       .then((response) => response.json())
       .then((res) => {
@@ -310,19 +334,19 @@ const DragTree = () => {
             <div id="drag-button-ops">
               <span
                 className="drag-button"
-                onClick={() =>
-                  window.open(
+                onClick={() => {
+                  setDrawerOpen(true);
+                  setIframe(
                     `/spa/organization/static/index.html#/main/organization/${extend}/${nodeData.id.substring(
                       1,
                     )}`,
-                    '_blank',
-                  )
-                }
+                  );
+                }}
               >
                 查看
               </span>
               <Popconfirm
-                title={`确认要删除 [${nodeData.title}] 吗?`}
+                title={`确认要删除[${nodeData.title}] 吗?`}
                 onConfirm={() => onDelete(nodeData)}
                 okText="确认"
                 cancelText="取消"
@@ -366,8 +390,14 @@ const DragTree = () => {
 
   return (
     <>
+      <Layout className="drag-layout">
+        <Header className="drag-header">组织快速调整</Header>
+        <Spin tip={tip} spinning={loading}>
+          <Layout>
+            <Sider theme="light" width="60%">
               <ApartmentOutlined
-        style={{ color: showCanceled == 0 ? '#1890ff' : '#eb2f96' }}
+                className="drag-showcanceled"
+                style={{ color: showCanceled == 0 ? '#000' : '#1890ff' }}
                 onClick={() => {
                   const value = showCanceled == 0 ? 1 : 0;
                   setTip('正在加载,请稍候...');
@@ -375,7 +405,6 @@ const DragTree = () => {
                   getMoveTree(value);
                 }}
               />
-      <Spin tip={tip} spinning={loading}>
               <Tree
                 className="draggable-tree"
                 //defaultExpandedKeys={expandedKeys}
@@ -389,6 +418,32 @@ const DragTree = () => {
                 treeData={gData}
                 titleRender={onTitleRender}
               />
+            </Sider>
+            <Content className="drag-content">
+              <Drawer
+                width="60%"
+                placement="right"
+                onClose={() => setDrawerOpen(false)}
+                open={drawerOpen}
+              >
+                <iframe src={iframe} width="100%" height="100%" />
+              </Drawer>
+            </Content>
+          </Layout>
+        </Spin>
+
+        <Footer className="drag-footer">
+          <p>小提示</p>
+          <div className="tips">
+            <div>1.鼠标拖拽Tree节点到任一分部部门下可快速完成组织转移;</div>
+            <div>2.点击【查看】侧滑打开组织详细信息,可快速编辑;</div>
+            <div>
+              3.鼠标悬停树节点 一键开启【删除】【封存】【合并】【复制】等功能;
+            </div>
+            <div>4.右上角小图标点击可显示已封存的组织架构</div>
+          </div>
+        </Footer>
+      </Layout>
       <MergeDialog
         ref={childRef}
         open={open}
@@ -405,7 +460,6 @@ const DragTree = () => {
           setCopyOpen(false);
         }}
       />
-      </Spin>
     </>
   );
 };

src/pages/index.less

@@ -24,7 +24,6 @@
 
 #drag-button-ops {
   display: none;
-  width: 500px;
   height: 16px;
   font-size: 12px;
   line-height: 16px;
@@ -40,3 +39,42 @@
     color: #22c8fb;
   }
 }
+
+.drag-layout {
+  .drag-header {
+    background: #ffffff;
+    text-align: center;
+    font-family: 'Times New Roman', Times, serif;
+    font-size: 20px;
+    font-weight: 800;
+  }
+  .drag-footer {
+    background: #ffffff;
+    p {
+      background-color: #22c8fb;
+    }
+    .tips {
+      div {
+        font-size: 14px;
+        letter-spacing: 0.5px;
+        height: 25px;
+        line-height: 25px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.drag-showcanceled {
+  font-size: 18px;
+  margin-left: 32px;
+}
+
+.drag-content {
+  background: #ffffff;
+}
+
+.ant-drawer-body {
+  padding: 0px;
+  overflow: hidden;
+}