层级根据部门节点树动态指定

src/components/drawer/index.jsx

@@ -36,6 +36,7 @@ export default class DrawerComponents extends React.Component {
       showJob: true,
       isModalOpen: false,
       jobResponsibility: '',
+      personId: '',
     };
   }
 
@@ -47,6 +48,7 @@ export default class DrawerComponents extends React.Component {
       this.setState({
         jobResponsibility: node.jobResponsibility,
         isModalOpen: true,
+        personId: node.id,
       });
     }
   };
@@ -356,6 +358,7 @@ export default class DrawerComponents extends React.Component {
       showJob,
       jobResponsibility,
       isModalOpen,
+      personId,
     } = this.state;
     let arr = [];
     if (detailType == 'chart') {
@@ -453,6 +456,17 @@ export default class DrawerComponents extends React.Component {
             >
               关闭
             </Button>,
+            <Button
+              type="primary"
+              onClick={() =>
+                window.open(
+                  `/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${personId}`,
+                  '_blank',
+                )
+              }
+            >
+              人员详情
+            </Button>,
           ]}
         >
           <p>{jobResponsibility}</p>

src/components/topBar/index.jsx

@@ -21,9 +21,16 @@ const { TextArea } = Input;
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 import locale from 'antd/lib/date-picker/locale/zh_CN';
-import { HomeOutlined } from '@ant-design/icons';
+import { HomeOutlined, FolderOpenOutlined } from '@ant-design/icons';
 moment.locale('zh-cn');
 
+const defaultLevelOpt = [
+  { value: '1', label: '全部' },
+  { value: '2', label: '一级' },
+  { value: '3', label: '二级' },
+  { value: '4', label: '三级' },
+];
+
 export class TopBar extends React.Component {
   constructor(props) {
     super(props);
@@ -32,9 +39,11 @@ export class TopBar extends React.Component {
       rootTreeData: [], //根节点异步树
       treeLoadedKeys: [],
       treeExpandedKeys: [],
+      deptTreeData: [],
       requestData: {
         fclass: '0',
         root: undefined,
+        department: undefined,
         level: '2',
         fisvitual: '0',
         hidedept: '0',
@@ -42,6 +51,7 @@ export class TopBar extends React.Component {
       open: false,
       confirmLoading: false,
       description: '',
+      levelOpt: defaultLevelOpt,
     };
   }
 
@@ -142,8 +152,58 @@ export class TopBar extends React.Component {
     });
 
   onRootChange = (value) => {
-    let requestData = { ...this.state.requestData, root: value };
-    this.setState({ requestData });
+    const { fclass } = this.state.requestData;
+    if (fclass != '0') {
+      //顺胜项目二开 增加部门节点树
+      this.getDeptTreeData(
+        `/api/bs/hrmorganization/orgchart/getDepartmentTree?fclass=${fclass}&subcompany=${value}`,
+      );
+    }
+    this.handleFormChange({ department: undefined, root: value });
+  };
+
+  /**
+   * 部门节点树
+   */
+  getDeptTreeData = (url) => {
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.api_status) {
+          let arr = [...data.departmentTree];
+          arr.map((item, index) => {
+            item.icon = <FolderOpenOutlined />;
+          });
+          this.setState({
+            deptTreeData: arr,
+          });
+        }
+      });
+  };
+
+  onDeptChange = (value, label, extra) => {
+    var opt = this.buildLevelOpt(0);
+    var level = '1';
+    if (value != undefined) {
+      level = extra.triggerNode.props.level;
+      opt = this.buildLevelOpt(level);
+    }
+    this.handleFormChange({
+      department: value,
+      level: level === '1' ? level : `${level + 1}`,
+    });
+    this.setState({ levelOpt: opt });
+  };
+
+  /**
+   * 虚拟维度部门层级构建
+   */
+  buildLevelOpt = (level) => {
+    let opt = [{ value: '1', label: '全部' }];
+    for (let index = 1; index <= level; index++) {
+      opt.push({ value: `${index + 1}`, label: `${index}级` });
+    }
+    return opt;
   };
 
   onTreeExpand = (expandedKeys) => {
@@ -188,7 +248,16 @@ export class TopBar extends React.Component {
 
   render() {
     const { disabled, type } = this.props;
-    const { rootTreeData, open, confirmLoading, treeExpandedKeys } = this.state;
+    const {
+      rootTreeData,
+      open,
+      confirmLoading,
+      treeExpandedKeys,
+      requestData,
+      deptTreeData,
+      levelOpt,
+    } = this.state;
+    const { fclass, department } = requestData;
 
     return (
       <div className={style.topbarWrapper}>
@@ -198,18 +267,22 @@ export class TopBar extends React.Component {
             <Select
               defaultValue="0"
               style={{ width: 140 }}
-              value={this.state.requestData.fclass}
+              value={fclass}
               onChange={(value) => {
                 const requestData = {
                   fclass: value,
                   root: undefined,
-                  level: '2',
+                  department: undefined,
+                  level: value == '0' ? '2' : '1',
                   fisvitual: '0',
                   hidedept: '0',
                 };
                 this.handleFormChange(requestData);
                 this.setState({
                   rootTreeData: [],
+                  deptTreeData: [],
+                  levelOpt:
+                    value == '0' ? defaultLevelOpt : this.buildLevelOpt(0),
                 });
                 this.getNodeTreeNode(
                   `/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${value}`,
@@ -265,15 +338,15 @@ export class TopBar extends React.Component {
           <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="2">一级</Option>
-              <Option value="3">二级</Option>
-              <Option value="4">三级</Option>
+              {levelOpt.map((item) => (
+                <Option key={item.value} value={item.value}>
+                  {item.label}
+                </Option>
+              ))}
             </Select>
           </Col>
         </Row>
@@ -300,7 +373,25 @@ export class TopBar extends React.Component {
               />
             </Tooltip>
           </Col>
-          <Col span={16}>
+          {fclass != '0' ? (
+            <Col span={8}>
+              部门节点：
+              <TreeSelect
+                treeDataSimpleMode
+                allowClear
+                style={{ width: '75%' }}
+                value={department}
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                placeholder="请选择部门节点"
+                onChange={this.onDeptChange}
+                treeData={deptTreeData}
+                treeIcon
+              />
+            </Col>
+          ) : (
+            ''
+          )}
+          <Col span={10}>
             <Button
               type="primary"
               style={{ marginRight: '10px' }}
@@ -310,15 +401,6 @@ export class TopBar extends React.Component {
             >
               查询
             </Button>
-            <Button
-              type="primary"
-              style={{ marginRight: '10px' }}
-              onClick={() => {
-                window.open('#/statistics', 'blank');
-              }}
-            >
-              人数统计
-            </Button>
             <Dropdown overlay={this.menu}>
               <Button type="primary">导出</Button>
             </Dropdown>

src/pages/company.jsx

@@ -27,7 +27,6 @@ export default function companyPage() {
 
   const [sliderProgress, setSliderProgress] = useState(50);
   let addNodeChildFunc = null;
-  let topBarSearchRequest = null;
   const [hasRight, setHasRight] = useState('');
   const [timelineId, setTimelineId] = useState(0);
   const infoRef = useRef();
@@ -72,17 +71,10 @@ export default function companyPage() {
       }
 
       let idsStr = idsList.join(',');
-      let api = '';
-      if (topBarSearchRequest) {
-        let request = { ...topBarSearchRequest, ids: idsStr };
-        api =
-          '/api/bs/hrmorganization/orgchart/asyncCompanyData' +
-          qs.stringify(request, { addQueryPrefix: true });
-      } else {
-        api =
-          '/api/bs/hrmorganization/orgchart/asyncCompanyData?fclass=0&fisvitual=0&id=0&root=0&ids=' +
-          idsStr;
-      }
+      let request = { ...topbar.state.requestData, ids: idsStr };
+      let api =
+        '/api/bs/hrmorganization/orgchart/asyncCompanyData' +
+        qs.stringify(request, { addQueryPrefix: true });
       fetch(api)
         .then((res) => res.json())
         .then((data) => {
@@ -159,8 +151,8 @@ export default function companyPage() {
     let fclass = topbar.state.requestData.fclass;
     let statisticsStyle = fclass == 0 ? 'block' : 'none';
     if (d.data.ftype == 0) {
-      return `<div>
-          <div style="display: inline-block; text-align: center; margin-left: 5px;">
+      return `<div style = "text-align: center">
+          <div style="display: inline-block; margin-left: 5px;">
             <div style="
               font-size: 24px;
               font-family: Microsoft YaHei-Bold, Microsoft YaHei;
@@ -379,7 +371,6 @@ export default function companyPage() {
     if (cache) {
       requestData = { ...requestData, id: infoRef.current };
     }
-    topBarSearchRequest = requestData;
     let api =
       '/api/bs/hrmorganization/orgchart/companyData' +
       qs.stringify(requestData, { addQueryPrefix: true });