组织调整

src/components/dialog/copyDialog.jsx

@@ -1,25 +1,39 @@
-import { Form, Input, Modal, TreeSelect, message } from 'antd';
+import { Form, Input, Modal, TreeSelect, message, Checkbox } from 'antd';
-import React, { useState, useEffect } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
 import * as d3 from 'd3';
 import './index.less';
+import { HomeOutlined } from '@ant-design/icons';
+import './index.less';
 
 const layout = {
-  labelCol: { span: 6 },
+  labelCol: { span: 8 },
   wrapperCol: { span: 14 },
 };
 
-const CopyDialog = ({ open, onCreate, onCancel }) => {
+const CopyDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
+  const [treeData, setData] = useState([]);
   const [form] = Form.useForm();
+  const formRef = useRef(null);
 
-  const [treeData, setData] = useState([]);
+  useImperativeHandle(ref, () => ({
-  console.log(treeData);
+    getTreeData() {
-  useEffect(() => {
+      form.resetFields();
       d3.json('/api/bs/hrmorganization/orgchart/getSubCompanyTree').then(
         (data) => {
+          data.companyTree.map((item, index) => {
+            item.icon = <HomeOutlined />;
+          });
           setData(data.companyTree);
         },
       );
-  }, [true]);
+    },
+  }));
 
   /**
    * 根节点树异步加载
@@ -33,7 +47,9 @@ const CopyDialog = ({ open, onCreate, onCancel }) => {
         d3.json(
           `/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=${id}`,
         ).then((data) => {
-          debugger;
+          data.companyTree.map((item, index) => {
+            item.icon = <HomeOutlined />;
+          });
           let arr = [...treeData, ...data.companyTree];
           setData(arr);
         });
@@ -44,7 +60,7 @@ const CopyDialog = ({ open, onCreate, onCancel }) => {
   return (
     <Modal
       open={open}
-      title="部门复制"
+      title="部门合并"
       okText="确认"
       cancelText="取消"
       onCancel={onCancel}
@@ -59,41 +75,38 @@ const CopyDialog = ({ open, onCreate, onCancel }) => {
           });
       }}
     >
-      <Form {...layout} form={form} name="form_in_modal">
+      <Form ref={formRef} {...layout} form={form} name="form_in_modal">
         <Form.Item
-          name="department"
+          name="company"
-          label="合并到部门"
+          label="复制到分部"
           rules={[
             {
               required: true,
-              message: '【合并到部门】为必填项!',
+              message: '【复制到分部】为必填项!',
             },
           ]}
         >
           <TreeSelect
+            className="custom-tree-select"
             treeDataSimpleMode
             allowClear
             style={{ width: '100%' }}
             dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
             loadData={onRootLoadData}
             treeData={treeData}
+            treeIcon
           />
         </Form.Item>
 
         <Form.Item
-          name="mergeName"
+          name="copySubDept"
-          label="合并后名称"
+          valuePropName="checked"
-          rules={[
+          label="是否复制子部门信息"
-            {
-              required: true,
-              message: '【合并后的名称】为必填项!',
-            },
-          ]}
         >
-          <Input />
+          <Checkbox />
         </Form.Item>
       </Form>
     </Modal>
   );
-};
+});
 export default CopyDialog;

src/components/dialog/index.less

@@ -1,3 +1,5 @@
-.ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
+.ant-select-tree
-  color: #222526;
+  .ant-select-tree-treenode-disabled
+  .ant-select-tree-node-content-wrapper {
+  color: rgba(0, 0, 0, 0.85);
 }

src/components/dialog/mergeDialog.jsx

@@ -8,6 +8,8 @@ import React, {
 } from 'react';
 import * as d3 from 'd3';
 import './index.less';
+import { HomeOutlined, FolderOutlined } from '@ant-design/icons';
+import './index.less';
 
 const layout = {
   labelCol: { span: 6 },
@@ -19,11 +21,16 @@ const MergeDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
   const [form] = Form.useForm();
   const formRef = useRef(null);
 
+  const [treeLine, setTreeLine] = useState(true);
+
   useImperativeHandle(ref, () => ({
     getTreeData() {
       form.resetFields();
       d3.json('/api/bs/hrmorganization/orgchart/getDepartmentTree').then(
         (data) => {
+          data.departmentTree.map((item, index) => {
+            item.icon = <HomeOutlined />;
+          });
           setData(data.departmentTree);
         },
       );
@@ -42,6 +49,13 @@ const MergeDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
         d3.json(
           `/api/bs/hrmorganization/orgchart/getDepartmentTree?subcompany=${id}`,
         ).then((data) => {
+          data.departmentTree.map((item, index) => {
+            if (item.key.indexOf('d') > -1) {
+              item.icon = <FolderOutlined />;
+            } else {
+              item.icon = <HomeOutlined />;
+            }
+          });
           let arr = [...treeData, ...data.departmentTree];
           setData(arr);
         });
@@ -79,12 +93,14 @@ const MergeDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
           ]}
         >
           <TreeSelect
+            className="custom-tree-select"
             treeDataSimpleMode
             allowClear
             style={{ width: '100%' }}
             dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
             loadData={onRootLoadData}
             treeData={treeData}
+            treeIcon
           />
         </Form.Item>
 

src/pages/dragTree.jsx

@@ -17,7 +17,8 @@ const DragTree = () => {
   const [gData, setGData] = useState([]);
   const [expandedKeys, setExpandedKeys] = useState([undefined]);
   const childRef = useRef(null);
-  const [tip, setTip] = useState('正在加载...');
+  const copyChildRef = useRef(null);
+  const [tip, setTip] = useState('正在加载,请稍候...');
   const [loading, setLoading] = useState(false);
   const [showCanceled, setShowCanceled] = useState(0);
 
@@ -30,10 +31,10 @@ const DragTree = () => {
     getMoveTree(0);
   }, [true]);
 
-  const getMoveTree = (showCanceled) => {
+  const getMoveTree = (showCanceled, expandedKeys = '') => {
     setLoading(true);
     d3.json(
-      `/api/bs/hrmorganization/orgchart/getMovingTree?showCanceled=${showCanceled}`,
+      `/api/bs/hrmorganization/orgchart/getMovingTree?showCanceled=${showCanceled}&expandedKeys=${expandedKeys}`,
     ).then((data) => {
       setGData(data.movingTree);
       setExpandedKeys(data.expandedKeys);
@@ -122,6 +123,7 @@ const DragTree = () => {
             }
           }
           setGData(data);
+          message.success('转移成功', 2);
         } else {
           message.warning(res.msg, 2);
         }
@@ -145,7 +147,7 @@ const DragTree = () => {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ ids: nodeData.id }),
+      body: JSON.stringify({ ids: nodeData.id.substring(1) }),
     })
       .then((response) => response.json())
       .then((res) => {
@@ -179,7 +181,7 @@ const DragTree = () => {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        id: nodeData.id,
+        id: nodeData.id.substring(1),
         canceled: nodeData.canceled != '0',
       }),
     })
@@ -229,6 +231,7 @@ const DragTree = () => {
       .then((response) => response.json())
       .then((res) => {
         if (res.code == 200) {
+          getMoveTree(0, values.department);
           message.success('合并成功', 2);
         } else {
           message.warning(res.msg, 2);
@@ -245,6 +248,9 @@ const DragTree = () => {
    * @param {*} nodeData
    */
   const onCopy = (nodeData) => {
+    if (copyChildRef.current) {
+      copyChildRef.current.getTreeData();
+    }
     setCopyOpen(true);
     setCopyId(nodeData.id);
   };
@@ -255,12 +261,13 @@ const DragTree = () => {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ ...values, ids: copyId }),
+      body: JSON.stringify({ ...values, ids: copyId.substring(1) }),
     })
       .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);
@@ -282,7 +289,6 @@ const DragTree = () => {
       <>
         {nodeData.type == 0 ? (
           <span>
-            {' '}
             <ClusterOutlined />
             <span style={{ marginLeft: '5px' }}>{nodeData.title}</span>
           </span>
@@ -290,14 +296,25 @@ const DragTree = () => {
           <>
             <span>
               {icon}
-              <span style={{ marginLeft: '5px' }}>{nodeData.title}</span>
+              <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={() =>
                   window.open(
-                    `/spa/organization/static/index.html#/main/organization/${extend}/${nodeData.id}`,
+                    `/spa/organization/static/index.html#/main/organization/${extend}/${nodeData.id.substring(
+                      1,
+                    )}`,
                     '_blank',
                   )
                 }
@@ -343,12 +360,17 @@ const DragTree = () => {
     );
   };
 
+  const onExpand = (info) => {
+    setExpandedKeys(info);
+  };
+
   return (
     <>
       <ApartmentOutlined
         style={{ color: showCanceled == 0 ? '#1890ff' : '#eb2f96' }}
         onClick={() => {
           const value = showCanceled == 0 ? 1 : 0;
+          setTip('正在加载,请稍候...');
           setShowCanceled(value);
           getMoveTree(value);
         }}
@@ -356,7 +378,9 @@ const DragTree = () => {
       <Spin tip={tip} spinning={loading}>
         <Tree
           className="draggable-tree"
-          defaultExpandedKeys={expandedKeys}
+          //defaultExpandedKeys={expandedKeys}
+          expandedKeys={expandedKeys}
+          onExpand={onExpand}
           draggable
           icon={false}
           blockNode
@@ -373,11 +397,14 @@ const DragTree = () => {
             setOpen(false);
           }}
         />
-        {/* <CopyDialog  open={copyopen}
+        <CopyDialog
+          ref={copyChildRef}
+          open={copyopen}
           onCreate={onCopyCreate}
           onCancel={() => {
             setCopyOpen(false);
-        }}/> */}
+          }}
+        />
       </Spin>
     </>
   );