组织架构图优化

.umirc.ts

@@ -2,7 +2,7 @@
  * @Author: Chengliang 1546584672@qq.com
  * @Date: 2022-08-04 10:22:55
  * @LastEditors: Chengliang 1546584672@qq.com
- * @LastEditTime: 2022-12-16 11:24:29
+ * @LastEditTime: 2023-07-24 09:57:14
  * @FilePath: /org-chart-frant/.umirc.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -26,7 +26,8 @@ export default defineConfig({
   proxy: {
     '/api': {
       // 标识需要进行转换的请求的url
-      target: 'http://127.0.0.1:8686/api', // 服务端域名 / http://localhost:8686
+      //target: 'http://127.0.0.1:8686/api', // 服务端域名 / http://localhost:8686
+      target: 'http://221.226.25.34:11080/api',
       changeOrigin: true, // 允许域名进行转换
       pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
     },

src/components/dialog/index.jsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { TreeSelect, Modal, message } from 'antd';
+
+export default class OperateDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      treeData: [],
+      open: false,
+      confirmLoading: false,
+      title: '',
+      operateType: '',
+      root: '',
+      type: 1,
+    };
+  }
+
+  componentDidMount() {}
+
+  handleOk = () => {
+    const { type } = this.state;
+    if (type === 1) {
+      this.props.addFolderNode();
+    } else {
+      this.props.deleteNode();
+    }
+    setTimeout(() => {
+      this.setState({ open: false });
+      message.success('操作成功');
+    }, 200);
+    // if (description.length == 0) {
+    //   return message.error('请填写描述信息');
+    // }
+    // this.setState({ confirmLoading: true });
+    // let api =
+    //   '/api/bs/hrmorganization/orgchart/versionRecord?fclass=' +
+    //   requestData.fclass +
+    //   '&description=' +
+    //   description;
+    // fetch(api)
+    //   .then((res) => res.json())
+    //   .then((data) => {
+    //     if (data.api_status) {
+    //       this.setState({
+    //         open: false,
+    //         confirmLoading: false,
+    //         description: '',
+    //       });
+    //       message.success('版本记录成功,请重新刷新页面', 2, 3);
+    //     } else {
+    //       message.error('版本记录失败,请联系相关人员处理数据', 2, 3);
+    //     }
+    //   });
+  };
+
+  /**
+   * 根节点树数据
+   * @param {} parentId
+   * @returns
+   */
+  getNodeTreeNode = (parentId) => {
+    this.setState({ confirmLoading: true });
+    fetch(`/api/bs/hrmorganization/orgchart/getSubCompanyTree`)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.api_status) {
+          let arr = [];
+          arr = [...this.state.treeData, ...data.companyTree];
+          this.setState({
+            treeData: arr,
+            confirmLoading: false,
+          });
+        }
+      });
+  };
+
+  /**
+   * 根节点树异步加载
+   * @param {} parentId
+   * @returns
+   */
+  onRootLoadData = (treeNode) =>
+    new Promise((resolve) => {
+      const { id } = treeNode.props;
+      setTimeout(() => {
+        let api = `/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=${id}`;
+        this.getNodeTreeNode(api);
+        resolve(undefined);
+      }, 500);
+    });
+
+  showOperate = (id, title, type) => {
+    this.setState({
+      open: true,
+      confirmLoading: true,
+      title: title,
+      type: type,
+    });
+    this.getNodeTreeNode(id);
+  };
+
+  onRootChange = (value) => {
+    this.setState({ root: value });
+  };
+
+  render() {
+    const { treeData, open, confirmLoading, title } = this.state;
+    return (
+      <>
+        <Modal
+          title={title}
+          cancelText="取消"
+          okText="确定"
+          open={open}
+          onOk={this.handleOk}
+          confirmLoading={confirmLoading}
+          onCancel={() => this.setState({ open: false })}
+        >
+          <TreeSelect
+            treeDataSimpleMode
+            allowClear
+            style={{ width: '100%' }}
+            value={this.state.root}
+            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+            placeholder="请选择要删除的节点"
+            onChange={this.onRootChange}
+            loadData={this.onRootLoadData}
+            treeData={treeData}
+          />
+        </Modal>
+      </>
+    );
+  }
+}

src/components/drawer/index.jsx

@@ -239,7 +239,7 @@ export default class DrawerComponents extends React.Component {
                         <img src="./img/department.png" style="width: 58px; height: 58px;position:absolute;left:29px; border-radius: 50%; margin-top: 16px;position:absolute;left:29px;z-index:999"/>
                     </div>
                     <div style="display: inline-block; margin-left: 6px;width: 55%">
-                        <div class="dept-box" style="font-size: 15px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 900;color: #333333;height: 25px;line-height: 25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
+                        <div class="dept-box" style="font-size: 15px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 900;color: #333333;height: 25px;line-height: 25px;width:110px,white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                             ${d.data.fname}
                         </div>        
                         <div style="font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;height: 25px;line-height: 25px;">

src/components/toolBar/index.jsx

@@ -10,6 +10,8 @@ import fullscreen from './img/fullscreen.png';
 import fit from './img/fit.png';
 import compact from './img/compact.png';
 import expandAll from './img/expandAll.png';
+import deleteNode from './img/folder-remove.png';
+import folderAdd from './img/folder-add.png';
 
 export default class ToolBar extends React.Component {
   progressBtn = React.createRef();
@@ -101,6 +103,20 @@ export default class ToolBar extends React.Component {
             this.props.onLeftLayoutClick(this.progressBtn);
           }}
         />
+        {/* <img
+          className={styles.toolBarItem}
+          src={folderAdd}
+          onClick={() => {
+            this.props.onFolderAddNode(this.progressBtn);
+          }}
+        />
+        <img
+          className={styles.toolBarItem}
+          src={deleteNode}
+          onClick={() => {
+            this.props.onDeleteNode(this.progressBtn);
+          }}
+        /> */}
         <img
           className={styles.toolBarItem}
           src={fullscreen}

src/pages/company.jsx

@@ -6,6 +6,7 @@ import { TopBar } from '../components/topBar';
 import ToolBar from '../components/toolBar';
 import TimeLine from '../components/timeline';
 import DrawerComponents from '../components/drawer';
+import OperateDialog from '../components/dialog';
 import jsPDF from 'jspdf';
 import moment from 'moment';
 import qs from 'qs';
@@ -13,6 +14,7 @@ import { message, Spin } from 'antd';
 
 let active = 'top';
 let drawerCom = null;
+let operateCom = null;
 let timeLine = null;
 let orgChart = null;
 let topbar = null;
@@ -217,6 +219,32 @@ export default function companyPage() {
     orgChart && orgChart.fit();
   };
 
+  const handleFolderAddNode = (progressBtn) => {
+    progressBtn.current.style.top = 50 + 'px';
+    operateCom &&
+      operateCom.showOperate(topbar.state.requestData.root, '新增节点', 1);
+  };
+
+  const addFolderNode = (id) => {
+    orgChart &&
+      orgChart.addNode({
+        id: 'd_10091',
+        fname: '测试增加节点',
+        parentId: 's_10',
+        ftype: '2',
+      });
+  };
+
+  const handleDeleteNode = (progressBtn) => {
+    progressBtn.current.style.top = 50 + 'px';
+    operateCom &&
+      operateCom.showOperate(topbar.state.requestData.root, '删除节点', 2);
+  };
+
+  const deleteNode = (id) => {
+    orgChart && orgChart.removeNode('d_10091');
+  };
+
   const handleCompact = (progressBtn) => {
     progressBtn.current.style.top = 50 + 'px';
     orgChart &&
@@ -406,6 +434,8 @@ export default function companyPage() {
           }
           onFullscreen={(progressBtn) => handleFullscreen(progressBtn)}
           onFit={(progressBtn) => handleFit(progressBtn)}
+          onFolderAddNode={(progressBtn) => handleFolderAddNode(progressBtn)}
+          onDeleteNode={(progressBtn) => handleDeleteNode(progressBtn)}
           onCompact={(progressBtn) => handleCompact(progressBtn)}
           onExpandAll={(progressBtn) => handleExpandAll(progressBtn)}
           onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
@@ -432,8 +462,12 @@ export default function companyPage() {
             nodeContent={nodeContentRender}
           />
         </Spin>
-
         <DrawerComponents ref={(r) => (drawerCom = r)} />
+        <OperateDialog
+          ref={(r) => (operateCom = r)}
+          addFolderNode={addFolderNode}
+          deleteNode={deleteNode}
+        />
       </div>
     )
   );

src/pages/user.jsx

@@ -99,7 +99,7 @@ export default function userPage() {
   // 获取数据
   useEffect(() => {
     document.cookie =
-      'ecology_JSessionid=aaapuc_tMLwUT4NtMrnLy; JSESSIONID=aaapuc_tMLwUT4NtMrnLy; Systemlanguid=7; languageidweaver=7; loginuuids=1; __randcode__=7e56748f-fcc0-41fd-aac7-44d6bce54bad; loginidweaver=sysadmin';
+      'ecology_JSessionid=aaauntrtgZdkuanT5w2Ly; JSESSIONID=aaauntrtgZdkuanT5w2Ly; loginidweaver=1; languageidweaver=7; loginuuids=1; __randcode__=c5235342-7633-4eec-a754-b36eefdf8c9e';
     d3.json(
       // "/user/data"
       '/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0',