From 57cc610174a77b89f7cb6fbd8396ecb35f4bbef4 Mon Sep 17 00:00:00 2001
From: Chengliang <1546584672@qq.com>
Date: Mon, 8 Aug 2022 17:19:47 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E7=BB=87=E9=80=8F=E8=A7=86=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=AF=BC=E5=87=BA=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .umirc.ts          |  27 ++-
 src/pages/user.jsx | 471 ++++++++++++++++++++++++---------------------
 2 files changed, 273 insertions(+), 225 deletions(-)

diff --git a/.umirc.ts b/.umirc.ts
index e54955f..36b62ad 100644
--- a/.umirc.ts
+++ b/.umirc.ts
@@ -1,9 +1,17 @@
+/*
+ * @Author: Chengliang 1546584672@qq.com
+ * @Date: 2022-08-04 10:22:55
+ * @LastEditors: Chengliang 1546584672@qq.com
+ * @LastEditTime: 2022-08-08 16:31:31
+ * @FilePath: /org-chart-frant/.umirc.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import { defineConfig } from 'umi';
 
 export default defineConfig({
   hash: true,
-  history: { type: 'hash'},
-  base: "/spa/orgChart/",
+  history: { type: 'hash' },
+  base: '/spa/orgChart/',
   // exportStatic: {},
   publicPath: './',
   nodeModulesTransform: {
@@ -11,15 +19,16 @@ export default defineConfig({
   },
   routes: [
     { path: '/user', component: '@/pages/user' },
-    { path: '/company', component: '@/pages/company' }
+    { path: '/company', component: '@/pages/company' },
   ],
   fastRefresh: {},
   antd: {},
   proxy: {
-    "/api": { // 标识需要进行转换的请求的url
-     "target": "http://localhost:18089/api", // 服务端域名
-     "changeOrigin": true, // 允许域名进行转换
-     "pathRewrite": { "^/api": ''}  // 将请求url里的ci去掉
-    }
-  }
+    '/api': {
+      // 标识需要进行转换的请求的url
+      target: 'http://localhost:8686/api', // 服务端域名
+      changeOrigin: true, // 允许域名进行转换
+      pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
+    },
+  },
 });
diff --git a/src/pages/user.jsx b/src/pages/user.jsx
index 5f0c6c1..2542c1e 100644
--- a/src/pages/user.jsx
+++ b/src/pages/user.jsx
@@ -1,206 +1,217 @@
 import styles from './index.less';
-import React, { useEffect, useState } from "react";
-import {OrgChartComponent} from '@/components/orgChart'
+import React, { useEffect, useState } from 'react';
+import { OrgChartComponent } from '@/components/orgChart';
 import * as d3 from 'd3';
 import { TopBar } from '../components/topBar';
 import ToolBar from '../components/toolBar';
-import moment from "moment";
+import moment from 'moment';
 import qs from 'qs';
-import { message } from 'antd'; 
-
+import { message } from 'antd';
 
 export default function userPage() {
-    const [data, setData] = useState(null);
-    const [progressTop, setProgressTop] = useState(50);
-    let addNodeChildFunc = null;
-    let orgChart = null;
-    let progressBtnRef = null;
-    let topBarSearchRequest = null;
-    
-  
-    // 点击节点
-    function onNodeClick(nodeId) {
-      // alert('clicked ' + nodeId);
-    }
+  const [data, setData] = useState(null);
+  const [progressTop, setProgressTop] = useState(50);
+  let addNodeChildFunc = null;
+  let orgChart = null;
+  let progressBtnRef = null;
+  let topBarSearchRequest = null;
 
-    function onButtonClick(event, d) {
-      
-      if(d.children) {
-        let idsList = []
-        d.children.forEach(item => {
-          if(item.data.hasChildren && !item._children) {
-            idsList.push(item.data.id);
-          }
-        })
+  // 点击节点
+  function onNodeClick(nodeId) {
+    // alert('clicked ' + nodeId);
+  }
 
-        if(idsList.length == 0) {
-          return
+  function onButtonClick(event, d) {
+    if (d.children) {
+      let idsList = [];
+      d.children.forEach((item) => {
+        if (item.data.hasChildren && !item._children) {
+          idsList.push(item.data.id);
         }
-
-        let idsStr = idsList.join(",")
-
-        console.log("idsStr", idsStr);
-        
-        let api = "";
-        if(topBarSearchRequest) {
-          let request = {...topBarSearchRequest, ids: idsStr}
-          api = "/api/bs/hrmorganization/orgchart/asyncUserData" + qs.stringify(request, {addQueryPrefix: true})
-          
-        } else {
-          api = "/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&root=0&date=" + moment(new Date()).format("YYYY-MM-DD") + "&ids="+idsStr
-        }
-
-        fetch(api).then(res => res.json()).then(data => {
-          if(data.data) {
-            data.data.forEach(item => {
-              window.chart.addNode(item)
-            })
-          } 
-        })
-      }
-    }
-
-    // 获取部门图片
-    function getDepartmentImage() {
-      let index = Math.floor(Math.random() * 8) + 1
-      return `./img/department/${index}.png` 
-    }
-
-    // 获取部门图片
-    function getSubcompanyImage() {
-      let index = Math.floor(Math.random() * 3) + 1
-      return `./img/subcompany/${index}.png` 
-    }
-  
-    // 获取数据
-    useEffect(() => {
-      d3.json(
-        // "/user/data"
-        "/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=" + moment(new Date()).format("YYYY-MM-DD")
-      ).then(data => {
-        setData(data.data);
       });
-    }, [true]);
 
-    // ButtonContent渲染
-    const buttonContentRender = ({ node, state }) => {
-      return `
+      if (idsList.length == 0) {
+        return;
+      }
+
+      let idsStr = idsList.join(',');
+
+      console.log('idsStr', idsStr);
+
+      let api = '';
+      if (topBarSearchRequest) {
+        let request = { ...topBarSearchRequest, ids: idsStr };
+        api =
+          '/api/bs/hrmorganization/orgchart/asyncUserData' +
+          qs.stringify(request, { addQueryPrefix: true });
+      } else {
+        api =
+          '/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&root=0&date=' +
+          moment(new Date()).format('YYYY-MM-DD') +
+          '&ids=' +
+          idsStr;
+      }
+
+      fetch(api)
+        .then((res) => res.json())
+        .then((data) => {
+          if (data.data) {
+            data.data.forEach((item) => {
+              window.chart.addNode(item);
+            });
+          }
+        });
+    }
+  }
+
+  // 获取部门图片
+  function getDepartmentImage() {
+    let index = Math.floor(Math.random() * 8) + 1;
+    return `./img/department/${index}.png`;
+  }
+
+  // 获取部门图片
+  function getSubcompanyImage() {
+    let index = Math.floor(Math.random() * 3) + 1;
+    return `./img/subcompany/${index}.png`;
+  }
+
+  // 获取数据
+  useEffect(() => {
+    d3.json(
+      // "/user/data"
+      '/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=' +
+        moment(new Date()).format('YYYY-MM-DD'),
+    ).then((data) => {
+      setData(data.data);
+    });
+  }, [true]);
+
+  // ButtonContent渲染
+  const buttonContentRender = ({ node, state }) => {
+    return `
         <div style="margin-left: 16px; margin-top: 10px;">
           <img src="./img/button_content.png" />
         </div>
-      `
-    }
+      `;
+  };
 
-    // 节点宽度渲染
-    const nodeWidthRender = d => 
-    {
-      return 280;
-    }
+  // 节点宽度渲染
+  const nodeWidthRender = (d) => {
+    return 280;
+  };
 
-    const nodeHeightRender = d => {
-      return 160;
-    }
+  const nodeHeightRender = (d) => {
+    return 160;
+  };
 
-    // tool bar start
-    const handleTopLayoutClick = (progressBtn) => {
-      progressBtn.current.style.top= 50 + "px";
-      orgChart && orgChart.layout('top').render()
-    }
+  // tool bar start
+  const handleTopLayoutClick = (progressBtn) => {
+    progressBtn.current.style.top = 50 + 'px';
+    orgChart && orgChart.layout('top').render();
+  };
 
-    const handleLeftLayoutClick = (progressBtn) => {
-      progressBtn.current.style.top= 50 + "px";
-      orgChart && orgChart.layout('left').render()
-    }
+  const handleLeftLayoutClick = (progressBtn) => {
+    progressBtn.current.style.top = 50 + 'px';
+    orgChart && orgChart.layout('left').render();
+  };
 
-    const handleZoomIn = (progressBtn) => {
-      if(progressBtn) {
-        let top = (parseInt(progressBtn.current.style.top) - 10)
-        if(top <= 0) {
-          top = 30;
-        }
-        progressBtn.current.style.top = top + "px";
+  const handleZoomIn = (progressBtn) => {
+    if (progressBtn) {
+      let top = parseInt(progressBtn.current.style.top) - 10;
+      if (top <= 0) {
+        top = 30;
       }
-      orgChart && orgChart.zoomIn();
+      progressBtn.current.style.top = top + 'px';
     }
+    orgChart && orgChart.zoomIn();
+  };
 
-    const handleZoomOut = (progressBtn) => {
-      if(progressBtn) {
-        let top = (parseInt(progressBtn.current.style.top) + 10)
-        if(top >= 100) {
-          top = 70;
-        }
-        progressBtn.current.style.top = top + "px";
+  const handleZoomOut = (progressBtn) => {
+    if (progressBtn) {
+      let top = parseInt(progressBtn.current.style.top) + 10;
+      if (top >= 100) {
+        top = 70;
       }
-      orgChart && orgChart.zoomOut();
+      progressBtn.current.style.top = top + 'px';
     }
+    orgChart && orgChart.zoomOut();
+  };
 
-    // tool bar end
+  // tool bar end
 
+  // top bar start
 
-    // top bar start
+  function downloadPdf(chart) {
+    chart.exportImg({
+      save: false,
+      onLoad: (base64) => {
+        var pdf = new jsPDF();
+        var img = new Image();
+        img.src = base64;
+        img.onload = function () {
+          pdf.addImage(
+            img,
+            'JPEG',
+            5,
+            5,
+            595 / 3,
+            ((img.height / img.width) * 595) / 3,
+          );
+          pdf.save('chart.pdf');
+        };
+      },
+    });
+  }
 
-    function downloadPdf(chart) {
-      chart.exportImg({
-        save: false,
-        onLoad: (base64) => {
-          var pdf = new jsPDF();
-          var img = new Image();
-          img.src = base64;
-          img.onload = function () {
-            pdf.addImage(
-              img,
-              'JPEG',
-              5,
-              5,
-              595 / 3,
-              ((img.height / img.width) * 595) / 3
-            );
-            pdf.save('chart.pdf');
-          };
-        },
-      });
+  const handleExport = (type) => {
+    if (type == 'png') {
+      orgChart && orgChart.exportImg({ full: true });
+    } else {
+      orgChart && downloadPdf(orgChart);
     }
+  };
 
-    const handleExport = (type) => {
-      if(type == "png") {
-        orgChart && orgChart.exportImg({full:true});
-      } else {
-        orgChart && downloadPdf(orgChart)
-      }
-    }
-
-    const handleSearch = (requestData) => {
-      topBarSearchRequest = requestData
-      let api = "/api/bs/hrmorganization/orgchart/userData" + qs.stringify(requestData, {addQueryPrefix: true})
-      fetch(api).then(res => res.json()).then(data => {
-        if(data.data && data.data.length > 0) {
-          setData(data.data)
+  const handleSearch = (requestData) => {
+    topBarSearchRequest = requestData;
+    let api =
+      '/api/bs/hrmorganization/orgchart/userData' +
+      qs.stringify(requestData, { addQueryPrefix: true });
+    fetch(api)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.data && data.data.length > 0) {
+          setData(data.data);
         } else {
-          message.warning("暂无数据");
+          message.warning('暂无数据');
         }
-      })
-    }
+      });
+  };
 
-    // top bar end
+  // top bar end
 
-    const nodeContentRender = (d, i, arr, state) => {
-      // 集团地址
-      let companyUrl = "/spa/organization/static/index.html#/main/organization/group"
-      // 分部地址
-      let subcompanyUrl = "/spa/organization/static/index.html#/main/organization/companyExtend/"
-      // 部门地址
-      let departmentUrl = "/spa/organization/static/index.html#/main/organization/departmentExtend/"
-      // 岗位地址
-      let jobtitleUrl = "/spa/organization/static/index.html#/main/organization/jobExtend/";
+  const nodeContentRender = (d, i, arr, state) => {
+    // 集团地址
+    let companyUrl =
+      '/spa/organization/static/index.html#/main/organization/group';
+    // 分部地址
+    let subcompanyUrl =
+      '/spa/organization/static/index.html#/main/organization/companyExtend/';
+    // 部门地址
+    let departmentUrl =
+      '/spa/organization/static/index.html#/main/organization/departmentExtend/';
+    // 岗位地址
+    let jobtitleUrl =
+      '/spa/organization/static/index.html#/main/organization/jobExtend/';
 
-      // 人员地址
-      let userUrl = "/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/";
+    // 人员地址
+    let userUrl = '/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/';
 
-      // 通讯录
-      let addressBookUrl = "/spa/hrm/index_mobx.html#/main/hrm/addressBook";
+    // 通讯录
+    let addressBookUrl = '/spa/hrm/index_mobx.html#/main/hrm/addressBook';
 
-      if(d.data.ftype == 0 || d.data.ftype == 1 || d.data.ftype == 2) {
-        return `<div>
+    if (d.data.ftype == 0 || d.data.ftype == 1 || d.data.ftype == 2) {
+      return `<div>
           <div style="position: relative;">
             <img src="./img/user-card/card-label-start.png" />
             <span style="display: inline-block;
@@ -214,16 +225,30 @@ export default function userPage() {
               font-family: Microsoft YaHei-Bold, Microsoft YaHei;
               font-weight: bold;
               color: #000000;
-            " onclick="window.open('${d.data.ftype == 0 ? companyUrl : 
-                        d.data.ftype == 1 ? subcompanyUrl + d.data.fnumber : 
-                        d.data.ftype == 2 ? departmentUrl + d.data.fnumber : ""}', '_blank')">${d.data.fname}</span>
+            " onclick="window.open('${
+              d.data.ftype == 0
+                ? companyUrl
+                : d.data.ftype == 1
+                ? subcompanyUrl + d.data.fnumber
+                : d.data.ftype == 2
+                ? departmentUrl + d.data.fnumber
+                : ''
+            }', '_blank')">${d.data.fname}</span>
             <span style="margin-left: 70px;">
               <img src="./img/user-card/line1.png" />
               <img src="./img/user-card/line2.png" />
             </span>
-            <div style="background: url('./img/user-card/user-card.png'); height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;" onclick="window.open('${userUrl + d.data.fleader}', '_blank')">
-              <div onclick="window.open('${userUrl + d.data.fleader}', '_blank')" style="display: inline-block; background: url('./img/user-card/avatar-outer.png'); background-size: 100% 100%; width: 90px; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
-                <img src="${d.data.fleaderimg ? d.data.fleaderimg : "./img/default_avator.png"}" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;"/>
+            <div style="background: url('./img/user-card/user-card.png'); height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;" onclick="window.open('${
+              userUrl + d.data.fleader
+            }', '_blank')">
+              <div onclick="window.open('${
+                userUrl + d.data.fleader
+              }', '_blank')" style="display: inline-block; background: url('./img/user-card/avatar-outer.png'); background-size: 100% 100%; width: 90px; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
+                <img src="${
+                  d.data.fleaderimg
+                    ? d.data.fleaderimg
+                    : './img/default_avator.png'
+                }" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;"/>
               </div>
               <div style="display: inline-block; margin-left: 6px;">
                 <div style="
@@ -241,15 +266,19 @@ export default function userPage() {
                   margin-bottom: 19px;
                 ">${d.data.fname} / ${d.data.fleaderjob}</div>
                 <div style="display: flex;" onclick="window.open('${addressBookUrl}', '_blank')">
-                  <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 69px;">编制: ${d.data.fplan}</div>
-                  <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 69px; margin-left: 10px;">在岗: ${d.data.fonjob}</div>
+                  <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 69px;">编制: ${
+                    d.data.fplan
+                  }</div>
+                  <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 69px; margin-left: 10px;">在岗: ${
+                    d.data.fonjob
+                  }</div>
                 </div>
               </div>
             </div>
           </div>
-        </div>`
-      } else if(d.data.ftype == 3) {
-        return `<div>
+        </div>`;
+    } else if (d.data.ftype == 3) {
+      return `<div>
           <div style="position: relative;">
             <img src="./img/user-card/card-label-start.png" />
             <span style="display: inline-block;
@@ -264,7 +293,7 @@ export default function userPage() {
               font-weight: bold;
               color: #000000;
             " onclick="window.open('${
-              jobtitleUrl + d.data.fnumber  
+              jobtitleUrl + d.data.fnumber
             }', '_blank')">${d.data.fname}</span>
             <span style="margin-left: 70px;">
               <img src="./img/user-card/line1.png" />
@@ -280,7 +309,7 @@ export default function userPage() {
                 color: #333333;
                 margin-bottom: 23px;
                 " onclick="window.open('${
-                  jobtitleUrl + d.data.fnumber  
+                  jobtitleUrl + d.data.fnumber
                 }', '_blank')">${d.data.fname}</div>
                 <div style="
                 font-size: 13px;
@@ -294,10 +323,12 @@ export default function userPage() {
               </div>
             </div>
           </div>
-        </div>`
-      } else if(d.data.ftype == 4) {
-        return `<div>
-          <div style="position: relative;" onclick="window.open('${userUrl + d.data.fnumber}', '_blank')">
+        </div>`;
+    } else if (d.data.ftype == 4) {
+      return `<div>
+          <div style="position: relative;" onclick="window.open('${
+            userUrl + d.data.fnumber
+          }', '_blank')">
             <img src="./img/user-card/card-label-start.png" />
             <span >
               <img src="./img/user-card/line1.png" />
@@ -305,7 +336,11 @@ export default function userPage() {
             </span>
             <div style="background: url('./img/user-card/user-card.png'); height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;">
               <div style="display: inline-block; background: url('./img/user-card/avatar-outer.png'); background-size: 100% 100%; width: 90px; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
-                <img src="${d.data.fleaderimg ? d.data.fleaderimg : "./img/default_avator.png"}" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;"/>
+                <img src="${
+                  d.data.fleaderimg
+                    ? d.data.fleaderimg
+                    : './img/default_avator.png'
+                }" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;"/>
               </div>
               <div style="display: inline-block; margin-left: 6px;">
                 <div style="
@@ -319,53 +354,57 @@ export default function userPage() {
                   font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                   font-weight: 400;
                   color: #333333;
-                ">${d.data.department ? d.data.department + " / " : ""}${d.data.fleaderjob}</div>
+                ">${d.data.department ? d.data.department + ' / ' : ''}${
+        d.data.fleaderjob
+      }</div>
                 <div style="
                   font-size: 10px;
                   font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                   font-weight: 400;
                   color: #333333;
                   margin-bottom: 10px;
-                ">${d.data.mobile ? d.data.mobile : ""}</div>
+                ">${d.data.mobile ? d.data.mobile : ''}</div>
                 <div style="
                   font-size: 10px;
                   font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                   font-weight: 400;
                   color: #333333;
-                ">${d.data.address ? "地址：" + d.data.address : ""}</div>
+                ">${d.data.address ? '地址：' + d.data.address : ''}</div>
               </div>
             </div>
           </div>
-        </div>`
-      }
+        </div>`;
     }
+  };
 
-    return (
-      <div className={styles.contentWrapper}>
-        <TopBar 
-          onExport={() => {handleExport()}}
-          onSearch={(requestData) => {handleSearch(requestData)}}
-          url="/api/bs/hrmorganization/orgchart/getCondition?type=user"
-        />
-        <ToolBar 
-          onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
-          onLeftLayoutClick={(progressBtn) => handleLeftLayoutClick(progressBtn)}
-          onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
-          onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
-        />
-        <OrgChartComponent
-          setChart={(chart) => orgChart = chart}
-          setClick={click => (addNodeChildFunc = click)}
-          onNodeClick={onNodeClick}
-          onButtonClick={onButtonClick}
-          data={data}
-          buttonContent={
-            buttonContentRender
-          }
-          nodeWidth={nodeWidthRender}
-          nodeHeight={nodeHeightRender}
-          nodeContent={nodeContentRender}
-        />
-      </div>
-    );
+  return (
+    <div className={styles.contentWrapper}>
+      <TopBar
+        onExport={(type) => {
+          handleExport(type);
+        }}
+        onSearch={(requestData) => {
+          handleSearch(requestData);
+        }}
+        url="/api/bs/hrmorganization/orgchart/getCondition?type=user"
+      />
+      <ToolBar
+        onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
+        onLeftLayoutClick={(progressBtn) => handleLeftLayoutClick(progressBtn)}
+        onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
+        onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
+      />
+      <OrgChartComponent
+        setChart={(chart) => (orgChart = chart)}
+        setClick={(click) => (addNodeChildFunc = click)}
+        onNodeClick={onNodeClick}
+        onButtonClick={onButtonClick}
+        data={data}
+        buttonContent={buttonContentRender}
+        nodeWidth={nodeWidthRender}
+        nodeHeight={nodeHeightRender}
+        nodeContent={nodeContentRender}
+      />
+    </div>
+  );
 }