组织调整

2023-08-02 09:26:28 +08:00 · 2023-08-02 09:26:28 +08:00 · 12482afb8f
parent 303e8e5e50
commit 12482afb8f
5 changed files with 105 additions and 47 deletions
--- a/dist.zip
+++ b/dist.zip
--- a/src/components/dialog/copyDialog.jsx
+++ b/src/components/dialog/copyDialog.jsx
@ -1,25 +1,39 @@
-import { Form, Input, Modal, TreeSelect, message } from 'antd';
-import React, { useState, useEffect } from 'react';
+import { Form, Input, Modal, TreeSelect, message, Checkbox } from 'antd';
+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 [form] = Form.useForm();
-
+const CopyDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
  const [treeData, setData] = useState([]);
-  console.log(treeData);
-  useEffect(() => {
-    d3.json('/api/bs/hrmorganization/orgchart/getSubCompanyTree').then(
-      (data) => {
-        setData(data.companyTree);
-      },
-    );
-  }, [true]);
+  const [form] = Form.useForm();
+  const formRef = useRef(null);
+
+  useImperativeHandle(ref, () => ({
+    getTreeData() {
+      form.resetFields();
+      d3.json('/api/bs/hrmorganization/orgchart/getSubCompanyTree').then(
+        (data) => {
+          data.companyTree.map((item, index) => {
+            item.icon = <HomeOutlined />;
+          });
+          setData(data.companyTree);
+        },
+      );
+    },
+  }));

  /**
   * 根节点树异步加载
@ -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"
-          label="合并到部门"
+          name="company"
+          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"
-          label="合并后名称"
-          rules={[
-            {
-              required: true,
-              message: '【合并后的名称】为必填项!',
-            },
-          ]}
+          name="copySubDept"
+          valuePropName="checked"
+          label="是否复制子部门信息"
        >
-          <Input />
+          <Checkbox />
        </Form.Item>
      </Form>
    </Modal>
  );
-};
+});
 export default CopyDialog;
--- a/src/components/dialog/index.less
+++ b/src/components/dialog/index.less
@ -1,3 +1,5 @@
-.ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
-  color: #222526;
+.ant-select-tree
+  .ant-select-tree-treenode-disabled
+  .ant-select-tree-node-content-wrapper {
+  color: rgba(0, 0, 0, 0.85);
 }
--- a/src/components/dialog/mergeDialog.jsx
+++ b/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>

--- a/src/pages/dragTree.jsx
+++ b/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}
-        onCreate={onCopyCreate}
-        onCancel={() => {
-          setCopyOpen(false);
-        }}/> */}
+        <CopyDialog
+          ref={copyChildRef}
+          open={copyopen}
+          onCreate={onCopyCreate}
+          onCancel={() => {
+            setCopyOpen(false);
+          }}
+        />
      </Spin>
    </>
  );