组织架构图

src/components/drawer/index.jsx

@@ -1,11 +1,21 @@
 import React from 'react';
-import { Drawer, Space, Button, Dropdown, Menu, Table, Spin } from 'antd';
+import {
+  Drawer,
+  Space,
+  Button,
+  Dropdown,
+  Menu,
+  Table,
+  Spin,
+  Checkbox,
+} from 'antd';
 import { OrgChartComponent } from '@/components/orgChart';
 import * as d3 from 'd3';
 import qs from 'qs';
 import { message } from 'antd';
 import jsPDF from 'jspdf';
 import ExportJsonExcel from 'js-export-excel';
+import './index.less';
 
 let addNodeChildFunc = null;
 let orgChart = null;
@@ -21,6 +31,7 @@ export default class DrawerComponents extends React.Component {
       dataSource: [],
       columns: [],
       spinning: true,
+      showJob: true,
     };
   }
 
@@ -51,11 +62,11 @@ export default class DrawerComponents extends React.Component {
   }
 
   //获取数据
-  getDeatilDatas(rootId, type = 'chart') {
+  getDeatilDatas(rootId, type = 'chart', showJob = '1') {
     this.setState({ spinning: true });
     d3.json(
       '/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
-        qs.stringify({ detauleType: type, rootId: rootId }),
+        qs.stringify({ detauleType: type, rootId: rootId, showJob }),
     ).then((data) => {
       //
       if (type == 'chart') {
@@ -228,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 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;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;">
@@ -293,7 +304,7 @@ export default class DrawerComponents extends React.Component {
   };
 
   onClose = () => {
-    this.setState({ open: false, detailType: 'chart' });
+    this.setState({ open: false, detailType: 'chart', showJob: true });
   };
 
   changeDetail = () => {
@@ -306,8 +317,16 @@ export default class DrawerComponents extends React.Component {
   };
 
   render() {
-    const { open, data, detailType, dataSource, columns, spinning } =
+    const {
-      this.state;
+      rootId,
+      open,
+      data,
+      detailType,
+      dataSource,
+      columns,
+      spinning,
+      showJob,
+    } = this.state;
     let arr = [];
     if (detailType == 'chart') {
       arr.push({ label: '导出图片', key: '1' });
@@ -329,6 +348,23 @@ export default class DrawerComponents extends React.Component {
         }}
         extra={
           <Space>
+            <Checkbox
+              style={{ marginTop: '5px', marginLeft: 100 }}
+              checked={showJob}
+              onChange={(e) => {
+                this.setState({
+                  showJob: e.target.checked,
+                });
+                detailType == 'chart' &&
+                  this.getDeatilDatas(
+                    rootId,
+                    detailType,
+                    e.target.checked ? '1' : '0',
+                  );
+              }}
+            >
+              是否显示岗位
+            </Checkbox>
             <Dropdown overlay={menu}>
               <Button type="primary">导出</Button>
             </Dropdown>

src/components/drawer/index.less

@@ -0,0 +1,4 @@
+.dept-box:hover {
+  width: 500px;
+  text-align: left;
+}

src/components/topBar/index.jsx

@@ -33,7 +33,7 @@ export class TopBar extends React.Component {
       requestData: {
         fclass: '0',
         root: undefined,
-        level: '3',
+        level: '2',
         fisvitual: '0',
       },
       open: false,
@@ -246,16 +246,17 @@ export class TopBar extends React.Component {
             </Tooltip>
           </Col>
           <Col span={6}>
-            显示层级：
+            部门层级：
             <Select
               defaultValue="3"
               style={{ width: 140 }}
               value={this.state.requestData.level}
               onChange={(value) => this.handleFormChange({ level: value })}
             >
-              <Option value="1">一级</Option>
+              <Option value="1">全部</Option>
-              <Option value="2">二级</Option>
+              <Option value="2">一级</Option>
-              <Option value="3">三级</Option>
+              <Option value="3">二级</Option>
+              <Option value="4">三级</Option>
             </Select>
           </Col>
         </Row>
@@ -298,7 +299,7 @@ export class TopBar extends React.Component {
           <p style={{ color: 'red' }}>
             提示:版本操作耗时较长，请谨慎操作（版本仅记录当前维度的数据）
           </p>
-          <p>描述:</p>
+          <p>主题:</p>
           <TextArea
             showCount
             maxLength={10}

src/pages/company.jsx

@@ -35,7 +35,7 @@ export default function companyPage() {
   }
 
   // 扩展按钮点击
-  function onButtonClick(event, d) {
+  const onButtonClick = (event, d) => {
     if (d.children) {
       let idsList = [];
       d.children.forEach((item) => {
@@ -60,18 +60,18 @@ export default function companyPage() {
           '/api/bs/hrmorganization/orgchart/asyncCompanyData?fclass=0&fisvitual=0&id=0&root=0&ids=' +
           idsStr;
       }
-
       fetch(api)
         .then((res) => res.json())
         .then((data) => {
           if (data.data) {
             data.data.forEach((item) => {
-              window.chart.addNode(item);
+              // window.chart.addNode(item);
+              orgChart.addNode(item);
             });
           }
         });
     }
-  }
+  };
 
   // 获取部门图片
   function getDepartmentImage(fisvitual) {
@@ -166,9 +166,7 @@ export default function companyPage() {
           </div>
           <div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px;
             font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;"> 
-            <div title=${
+            <div style="width: 110px;margin: 0 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
-              d.data.fname
-            } style="width: 110px;margin: 0 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;
             line-height: 18px;word-break: break-all;">${d.data.fname}</div>
           </div>
         </div>

src/pages/index.less

@@ -3,9 +3,9 @@
 }
 
 .wrapper {
-  background: #F7F9FD;
+  background: #f7f9fd;
 }
 
 .contentWrapper {
-  background-color: #F7F9FD;
+  background-color: #f7f9fd;
 }