Merge pull request 'feature/cl' (#6) from feature/cl into master

Reviewed-on: http://221.226.25.34:3000/liang.cheng/org-chart-frant/pulls/6

.idea/workspace.xml

@@ -2,11 +2,8 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="449daba1-1dd3-4ffd-906d-6ef641fb81de" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.umirc.ts" beforeDir="false" afterPath="$PROJECT_DIR$/.umirc.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/d3-org-chart.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/d3-org-chart.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/company.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/company.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/dragTree.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/dragTree.jsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/index.less" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/index.less" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -16,10 +13,10 @@
   </component>
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-      <file pinned="false" current-in-tab="false">
+      <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/d3-org-chart.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="-20">
+            <state relative-caret-position="-146">
               <folding>
                 <element signature="e#0#49#0" expanded="true" />
                 <element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
@@ -37,17 +34,6 @@
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/src/components/dialog/index.jsx">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="-2297">
-              <folding>
-                <element signature="e#0#26#0" expanded="true" />
-              </folding>
-            </state>
-          </provider>
-        </entry>
-      </file>
     </leaf>
   </component>
   <component name="Git.Settings">
@@ -68,9 +54,9 @@
     </packageJsonPaths>
   </component>
   <component name="ProjectFrameBounds" fullScreen="true">
-    <option name="y" value="28" />
+    <option name="x" value="1440" />
-    <option name="width" value="1440" />
+    <option name="width" value="1920" />
-    <option name="height" value="872" />
+    <option name="height" value="1080" />
   </component>
   <component name="ProjectInspectionProfilesVisibleTreeState">
     <entry key="Project Default">
@@ -347,9 +333,6 @@
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
-      <pane id="PackagesPane" />
-      <pane id="CatdeaLogs" />
-      <pane id="Scope" />
       <pane id="ProjectPane">
         <subPane>
           <expand>
@@ -379,12 +362,15 @@
           <select />
         </subPane>
       </pane>
+      <pane id="PackagesPane" />
+      <pane id="Scope" />
+      <pane id="CatdeaLogs" />
     </panes>
   </component>
   <component name="PropertiesComponent">
     <property name="WebServerToolWindowFactoryState" value="false" />
     <property name="aspect.path.notification.shown" value="true" />
-    <property name="com.android.tools.idea.instantapp.provision.ProvisionBeforeRunTaskProvider.myTimeStamp" value="1690341396252" />
+    <property name="com.android.tools.idea.instantapp.provision.ProvisionBeforeRunTaskProvider.myTimeStamp" value="1690446615685" />
     <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
     <property name="nodejs_npm_path_reset_for_default_project" value="true" />
     <property name="project.structure.last.edited" value="Project" />
@@ -420,16 +406,17 @@
       <workItem from="1689842557088" duration="205000" />
       <workItem from="1690192167781" duration="39000" />
       <workItem from="1690341272941" duration="164000" />
+      <workItem from="1690446551998" duration="218000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="408000" />
+    <option name="totallyTimeSpent" value="626000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="0" y="0" width="1440" height="900" extended-state="0" />
+    <frame x="1440" y="0" width="1920" height="1080" extended-state="0" />
     <layout>
-      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.25679544" />
+      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.19382322" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info id="JRebel" order="2" side_tool="true" />
       <window_info id="Image Layers" order="3" />
@@ -449,7 +436,7 @@
       <window_info anchor="bottom" id="Docker" order="9" show_stripe_button="false" />
       <window_info anchor="bottom" id="Messages" order="10" />
       <window_info anchor="bottom" id="Database Changes" order="11" show_stripe_button="false" />
-      <window_info active="true" anchor="bottom" id="Version Control" order="12" visible="true" weight="0.32891566" />
+      <window_info active="true" anchor="bottom" id="Version Control" order="12" visible="true" weight="0.26039603" />
       <window_info anchor="bottom" id="JRebel Console" order="13" side_tool="true" />
       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
@@ -480,9 +467,18 @@
     <option name="myLimit" value="2678400000" />
   </component>
   <component name="editorHistoryManager">
+    <entry file="file://$PROJECT_DIR$/src/components/dialog/index.jsx">
+      <provider selected="true" editor-type-id="text-editor">
+        <state>
+          <folding>
+            <element signature="e#0#26#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/src/d3-org-chart.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-20">
+        <state relative-caret-position="-146">
           <folding>
             <element signature="e#0#49#0" expanded="true" />
             <element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
@@ -499,15 +495,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/dialog/index.jsx">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-2297">
-          <folding>
-            <element signature="e#0#26#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
   </component>
   <component name="ideajad">
     <property name="annotate" value="false" />

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/d3-org-chart.js

@@ -230,8 +230,8 @@ export class OrgChart {
         top: {
           nodeLeftX: (node) => -node.width / 2,
           nodeRightX: (node) => node.width / 2,
-          //nodeTopY: (node) => 0,
+          nodeTopY: (node) => 0,
-          nodeTopY: (node) => node.height / 0.3,
+          //nodeTopY: (node) => node.height / 0.3,
           nodeBottomY: (node) => node.height,
           nodeJoinX: (node) => node.x - node.width / 2,
           nodeJoinY: (node) => node.y + node.height,

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">
+      return `<div>
-          <div style="display: inline-block; vertical-align: top;">
-            <img src="./img/company.png" />
-          </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,133 +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) => {
+    fetch('/api/bs/hrmorganization/dept/dragDepartment', {
-      for (let i = 0; i < data.length; i++) {
+      method: 'POST',
-        if (data[i].key === key) {
+      headers: {
-          return callback(data[i], i, data);
+        '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);
         }
-        if (data[i].children) {
+        setLoading(false);
-          loop(data[i].children, key, callback);
+      })
-        }
+      .catch((error) => {
-      }
+        message.error('接口异常,请联系管理员');
-    };
+      });
-    const data = [...gData];
 
-    // Find dragObject
+    setTimeout(function () {}, 1000);
-    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);
   };
 
+  /**
+   * 删除
+   * @param {*} nodeData
+   */
   const onDelete = (nodeData) => {
     const extend = nodeData.type == '1' ? 'comp' : 'dept';
-    d3.json(`/api/bs/hrmorganization/${extend}/deleteByIds`)
+    fetch(`/api/bs/hrmorganization/${extend}/deleteByIds`, {
-      .header('Content-Type', 'application/json')
+      method: 'POST',
-      .post(JSON.stringify({ ids: nodeData.id }))
+      headers: {
-      .then(function (response) {
+        'Content-Type': 'application/json',
-        message.success('删除成功');
+      },
+      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(function (error) {
+      .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,
+        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) {
+          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((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>
+        {nodeData.type == 0 ? (
-          {icon}
+          <span>
-          <span style={{ marginLeft: '5px' }}>{nodeData.title}</span>
+            {' '}
-        </span>
+            <ClusterOutlined />
-        <div id="drag-button-ops">
+            <span style={{ marginLeft: '5px' }}>{nodeData.title}</span>
-          <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>
-          <span className="drag-button" onClick={onDelete(nodeData)}>
+              {icon}
-            封存
+              <span style={{ marginLeft: '5px' }}>{nodeData.title}</span>
-          </span>
+            </span>
-          <span style={{ display: attr }} className="drag-button">
+            <div id="drag-button-ops">
-            合并
+              <span
-          </span>
+                className="drag-button"
-          <span style={{ display: attr }} className="drag-button">
+                onClick={() =>
-            复制
+                  window.open(
-          </span>
+                    `/spa/organization/static/index.html#/main/organization/${extend}/${nodeData.id}`,
-        </div>
+                    '_blank',
-      </div>
+                  )
+                }
+              >
+                查看
+              </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"
+      <ApartmentOutlined
-      defaultExpandedKeys={expandedKeys}
+        style={{ color: showCanceled == 0 ? '#1890ff' : '#eb2f96' }}
-      draggable
+        onClick={() => {
-      icon={false}
+          const value = showCanceled == 0 ? 1 : 0;
-      blockNode
+          setShowCanceled(value);
-      onDragEnter={onDragEnter}
+          getMoveTree(value);
-      onDrop={onDrop}
+        }}
-      treeData={gData}
+      />
-      titleRender={onTitleRender}
+      <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',