修改

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,80 +64,95 @@ 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]);
-    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('接口异常,请联系管理员');
-      });
 
-    setTimeout(function () {}, 1000);
+    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() {},
+    });
   };
 
   /**
@@ -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={() =>
+                onClick={() => {
-                  window.open(
+                  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,46 +390,76 @@ const DragTree = () => {
 
   return (
     <>
-      <ApartmentOutlined
+      <Layout className="drag-layout">
-        style={{ color: showCanceled == 0 ? '#1890ff' : '#eb2f96' }}
+        <Header className="drag-header">组织快速调整</Header>
-        onClick={() => {
+        <Spin tip={tip} spinning={loading}>
-          const value = showCanceled == 0 ? 1 : 0;
+          <Layout>
-          setTip('正在加载,请稍候...');
+            <Sider theme="light" width="60%">
-          setShowCanceled(value);
+              <ApartmentOutlined
-          getMoveTree(value);
+                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}
+              />
+            </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}
+        onCreate={onMergeCreate}
+        onCancel={() => {
+          setOpen(false);
+        }}
+      />
+      <CopyDialog
+        ref={copyChildRef}
+        open={copyopen}
+        onCreate={onCopyCreate}
+        onCancel={() => {
+          setCopyOpen(false);
         }}
       />
-      <Spin tip={tip} spinning={loading}>
-        <Tree
-          className="draggable-tree"
-          //defaultExpandedKeys={expandedKeys}
-          expandedKeys={expandedKeys}
-          onExpand={onExpand}
-          draggable
-          icon={false}
-          blockNode
-          onDragEnter={onDragEnter}
-          onDrop={onDrop}
-          treeData={gData}
-          titleRender={onTitleRender}
-        />
-        <MergeDialog
-          ref={childRef}
-          open={open}
-          onCreate={onMergeCreate}
-          onCancel={() => {
-            setOpen(false);
-          }}
-        />
-        <CopyDialog
-          ref={copyChildRef}
-          open={copyopen}
-          onCreate={onCopyCreate}
-          onCancel={() => {
-            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;
+}