组织架构图

src/components/dialog/copyDialog.jsx

@@ -0,0 +1,99 @@
+import { Form, Input, Modal, TreeSelect, message } from 'antd';
+import React, { useState, useEffect } from 'react';
+import * as d3 from 'd3';
+import './index.less';
+
+const layout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 14 },
+};
+
+const CopyDialog = ({ open, onCreate, onCancel }) => {
+  const [form] = Form.useForm();
+
+  const [treeData, setData] = useState([]);
+  console.log(treeData);
+  useEffect(() => {
+    d3.json('/api/bs/hrmorganization/orgchart/getSubCompanyTree').then(
+      (data) => {
+        setData(data.companyTree);
+      },
+    );
+  }, [true]);
+
+  /**
+   * 根节点树异步加载
+   * @param {} parentId
+   * @returns
+   */
+  const onRootLoadData = (treeNode) =>
+    new Promise((resolve) => {
+      const { id } = treeNode.props;
+      setTimeout(() => {
+        d3.json(
+          `/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=${id}`,
+        ).then((data) => {
+          debugger;
+          let arr = [...treeData, ...data.companyTree];
+          setData(arr);
+        });
+        resolve(undefined);
+      }, 200);
+    });
+
+  return (
+    <Modal
+      open={open}
+      title="部门复制"
+      okText="确认"
+      cancelText="取消"
+      onCancel={onCancel}
+      onOk={() => {
+        form
+          .validateFields()
+          .then((values) => {
+            onCreate(values);
+          })
+          .catch((info) => {
+            console.log('Validate Failed:', info);
+          });
+      }}
+    >
+      <Form {...layout} form={form} name="form_in_modal">
+        <Form.Item
+          name="department"
+          label="合并到部门"
+          rules={[
+            {
+              required: true,
+              message: '【合并到部门】为必填项!',
+            },
+          ]}
+        >
+          <TreeSelect
+            treeDataSimpleMode
+            allowClear
+            style={{ width: '100%' }}
+            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+            loadData={onRootLoadData}
+            treeData={treeData}
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="mergeName"
+          label="合并后名称"
+          rules={[
+            {
+              required: true,
+              message: '【合并后的名称】为必填项!',
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default CopyDialog;

src/components/dialog/index.less

@@ -0,0 +1,3 @@
+.ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
+  color: #222526;
+}

src/components/dialog/mergeDialog.jsx

@@ -0,0 +1,107 @@
+import { Form, Input, Modal, TreeSelect, message } from 'antd';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import * as d3 from 'd3';
+import './index.less';
+
+const layout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 14 },
+};
+
+const MergeDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
+  const [treeData, setData] = useState([]);
+  const [form] = Form.useForm();
+  const formRef = useRef(null);
+
+  useImperativeHandle(ref, () => ({
+    getTreeData() {
+      form.resetFields();
+      d3.json('/api/bs/hrmorganization/orgchart/getDepartmentTree').then(
+        (data) => {
+          setData(data.departmentTree);
+        },
+      );
+    },
+  }));
+
+  /**
+   * 根节点树异步加载
+   * @param {} parentId
+   * @returns
+   */
+  const onRootLoadData = (treeNode) =>
+    new Promise((resolve) => {
+      const { id } = treeNode.props;
+      setTimeout(() => {
+        d3.json(
+          `/api/bs/hrmorganization/orgchart/getDepartmentTree?subcompany=${id}`,
+        ).then((data) => {
+          let arr = [...treeData, ...data.departmentTree];
+          setData(arr);
+        });
+        resolve(undefined);
+      }, 200);
+    });
+
+  return (
+    <Modal
+      open={open}
+      title="部门合并"
+      okText="确认"
+      cancelText="取消"
+      onCancel={onCancel}
+      onOk={() => {
+        form
+          .validateFields()
+          .then((values) => {
+            onCreate(values);
+          })
+          .catch((info) => {
+            console.log('Validate Failed:', info);
+          });
+      }}
+    >
+      <Form ref={formRef} {...layout} form={form} name="form_in_modal">
+        <Form.Item
+          name="department"
+          label="合并到部门"
+          rules={[
+            {
+              required: true,
+              message: '【合并到部门】为必填项!',
+            },
+          ]}
+        >
+          <TreeSelect
+            treeDataSimpleMode
+            allowClear
+            style={{ width: '100%' }}
+            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+            loadData={onRootLoadData}
+            treeData={treeData}
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="mergeName"
+          label="合并后名称"
+          rules={[
+            {
+              required: true,
+              message: '【合并后的名称】为必填项!',
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+});
+export default MergeDialog;

src/pages/company.jsx

@@ -141,10 +141,7 @@ export default function companyPage() {
 
   const nodeContentRender = (d, i, arr, state) => {
     if (d.data.ftype == 0) {
-      return `<div style="text-align:center">
-          <div style="display: inline-block; vertical-align: top;">
-            <img src="./img/company.png" />
-          </div>
+      return `<div>
           <div style="display: inline-block; text-align: center; margin-left: 5px;">
             <div style="
               font-size: 24px;

src/pages/dragTree.jsx

@@ -1,22 +1,45 @@
-import { Tree, message } from 'antd';
+import { Tree, message, Modal, Popconfirm, Spin } 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 { HomeOutlined, FolderOutlined } from '@ant-design/icons';
-
+import {
+  HomeOutlined,
+  FolderOutlined,
+  ClusterOutlined,
+  ApartmentOutlined,
+} from '@ant-design/icons';
 import './index.less';
 
 const DragTree = () => {
   const [gData, setGData] = useState([]);
-  const [expandedKeys, setExpandedKeys] = useState([]);
+  const [expandedKeys, setExpandedKeys] = useState([undefined]);
+  const childRef = useRef(null);
+  const [tip, setTip] = useState('正在加载...');
+  const [loading, setLoading] = useState(false);
+  const [showCanceled, setShowCanceled] = useState(0);
+
+  const [open, setOpen] = useState(false);
+  const [mergeId, setMergeId] = useState(null);
+  const [copyopen, setCopyOpen] = useState(false);
+  const [copyId, setCopyId] = useState(null);
 
   useEffect(() => {
-    d3.json('/api/bs/hrmorganization/orgchart/getMovingTree').then((data) => {
+    getMoveTree(0);
+  }, [true]);
+
+  const getMoveTree = (showCanceled) => {
+    setLoading(true);
+    d3.json(
+      `/api/bs/hrmorganization/orgchart/getMovingTree?showCanceled=${showCanceled}`,
+    ).then((data) => {
       setGData(data.movingTree);
       setExpandedKeys(data.expandedKeys);
+      setLoading(false);
     });
-  }, [true]);
+  };
 
   const onDragEnter = (info) => {
     //console.log(info);
@@ -24,137 +47,339 @@ const DragTree = () => {
     // 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) => {
-    debugger;
-    //弹框操作
+    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]);
-    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);
+    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);
+        } else {
+          message.warning(res.msg, 2);
         }
-      }
-    };
-    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);
+        setLoading(false);
+      })
+      .catch((error) => {
+        message.error('接口异常,请联系管理员');
       });
-    } 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
+
+    setTimeout(function () {}, 1000);
+  };
+
+  /**
+   * 删除
+   * @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 }),
+    })
+      .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('接口异常,请联系管理员');
       });
-    } else {
-      let ar = [];
-      let i;
-      loop(data, dropKey, (_item, index, arr) => {
-        ar = arr;
-        i = index;
+  };
+
+  /**
+   * 封存
+   * @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,
+        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('接口异常,请联系管理员');
       });
-      if (dropPosition === -1) {
-        ar.splice(i, 0, dragObj);
-      } else {
-        ar.splice(i + 1, 0, dragObj);
-      }
+  };
+
+  /**
+   * 合并
+   * @param {*} nodeData
+   */
+  const onMerge = (nodeData) => {
+    if (childRef.current) {
+      childRef.current.getTreeData();
     }
-    setGData(data);
+    setMergeId(nodeData.id);
+    setOpen(true);
   };
 
-  const onDelete = (nodeData) => {
-    const extend = nodeData.type == '1' ? 'comp' : 'dept';
-    d3.json(`/api/bs/hrmorganization/comp/deleteByIds`, {
+  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(data),
+      body: JSON.stringify(params),
     })
-      .then(function (response) {
-        // 处理响应
-        console.log(response);
-        message.success('删除成功');
+      .then((response) => response.json())
+      .then((res) => {
+        if (res.code == 200) {
+          message.success('合并成功', 2);
+        } else {
+          message.warning(res.msg, 2);
+        }
+        setOpen(false);
+      })
+      .catch((error) => {
+        message.error('接口异常,请联系管理员');
+      });
+  };
+
+  /**
+   * 复制
+   * @param {*} nodeData
+   */
+  const onCopy = (nodeData) => {
+    setCopyOpen(true);
+    setCopyId(nodeData.id);
+  };
+
+  const onCopyCreate = (values) => {
+    fetch(`/api/bs/hrmorganization/dept/copyDepartment`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ ...values, ids: copyId }),
+    })
+      .then((response) => response.json())
+      .then((res) => {
+        if (res.code == 200) {
+          setCopyOpen(false);
+          message.success('复制成功', 2);
+        } else {
+          message.warning(res.msg, 2);
+        }
       })
-      .catch(function (error) {
+      .catch((error) => {
         message.error('接口异常,请联系管理员');
       });
   };
 
   const onTitleRender = (nodeData) => {
     let extend = nodeData.type == '1' ? 'companyExtend' : 'departmentExtend';
-    let attr = nodeData.type == '1' ? 'none' : 'inline-block';
+    let attr =
+      nodeData.type == '1' || nodeData.canceled == '1'
+        ? 'none'
+        : 'inline-block';
     let icon = nodeData.type == '1' ? <HomeOutlined /> : <FolderOutlined />;
     return (
-      <div>
-        <span>
-          {icon}
-          <span style={{ marginLeft: '5px' }}>{nodeData.title}</span>
-        </span>
-        <div id="drag-button-ops">
-          <span
-            className="drag-button"
-            onClick={() =>
-              window.open(
-                `/spa/organization/static/index.html#/main/organization/${extend}/${nodeData.id}`,
-                '_blank',
-              )
-            }
-          >
-            查看
-          </span>
-          <span className="drag-button" onClick={() => onDelete(nodeData)}>
-            删除
-          </span>
-          <span className="drag-button">封存</span>
-          <span style={{ display: attr }} className="drag-button">
-            合并
-          </span>
-          <span style={{ display: attr }} className="drag-button">
-            复制
+      <>
+        {nodeData.type == 0 ? (
+          <span>
+            {' '}
+            <ClusterOutlined />
+            <span style={{ marginLeft: '5px' }}>{nodeData.title}</span>
           </span>
-        </div>
-      </div>
+        ) : (
+          <>
+            <span>
+              {icon}
+              <span style={{ marginLeft: '5px' }}>{nodeData.title}</span>
+            </span>
+            <div id="drag-button-ops">
+              <span
+                className="drag-button"
+                onClick={() =>
+                  window.open(
+                    `/spa/organization/static/index.html#/main/organization/${extend}/${nodeData.id}`,
+                    '_blank',
+                  )
+                }
+              >
+                查看
+              </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>
+          </>
+        )}
+      </>
     );
   };
 
   return (
-    <Tree
-      className="draggable-tree"
-      defaultExpandedKeys={expandedKeys}
-      draggable
-      icon={false}
-      blockNode
-      onDragEnter={onDragEnter}
-      onDrop={onDrop}
-      treeData={gData}
-      titleRender={onTitleRender}
-    />
+    <>
+      <ApartmentOutlined
+        style={{ color: showCanceled == 0 ? '#1890ff' : '#eb2f96' }}
+        onClick={() => {
+          const value = showCanceled == 0 ? 1 : 0;
+          setShowCanceled(value);
+          getMoveTree(value);
+        }}
+      />
+      <Spin tip={tip} spinning={loading}>
+        <Tree
+          className="draggable-tree"
+          defaultExpandedKeys={expandedKeys}
+          draggable
+          icon={false}
+          blockNode
+          onDragEnter={onDragEnter}
+          onDrop={onDrop}
+          treeData={gData}
+          titleRender={onTitleRender}
+        />
+        <MergeDialog
+          ref={childRef}
+          open={open}
+          onCreate={onMergeCreate}
+          onCancel={() => {
+            setOpen(false);
+          }}
+        />
+        {/* <CopyDialog  open={copyopen}
+        onCreate={onCopyCreate}
+        onCancel={() => {
+          setCopyOpen(false);
+        }}/> */}
+      </Spin>
+    </>
   );
 };
 export default DragTree;

src/pages/index.less

@@ -18,6 +18,10 @@
   display: inline-block;
 }
 
+.ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
+  color: rgba(0, 0, 0, 0.85);
+}
+
 #drag-button-ops {
   display: none;
   width: 500px;

src/pages/user.jsx

@@ -99,7 +99,7 @@ export default function userPage() {
   // 获取数据
   useEffect(() => {
     document.cookie =
-      'ecology_JSessionid=aaaqxkKrIiwa59VyYrwMy; JSESSIONID=aaaqxkKrIiwa59VyYrwMy; loginidweaver=1; languageidweaver=7; loginuuids=1; __randcode__=61884b51-d206-4953-8fd2-78cfc6cc7044';
+      'ecology_JSessionid=aaaUMPsdM5DKIgXzYrwMy; JSESSIONID=aaaUMPsdM5DKIgXzYrwMy; __randcode__=f5b6cc86-28ff-416b-bc87-569246714d54; loginidweaver=1; languageidweaver=7; loginuuids=1';
     d3.json(
       // "/user/data"
       '/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0',