地立项目架构图搜索条件增加部门分部

.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-01 11:53:26
+ * @LastEditTime: 2022-12-02 11:42:11
  * @FilePath: /org-chart-frant/.umirc.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -26,7 +26,7 @@ export default defineConfig({
   proxy: {
     '/api': {
       // 标识需要进行转换的请求的url
-      target: 'http://192.168.1.67:9002', // 服务端域名 / http://localhost:8686
+      target: 'http://192.168.0.152:8093/api', // 服务端域名 / http://localhost:8686
       changeOrigin: true, // 允许域名进行转换
       pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
     },

src/components/topBar/index.jsx

@@ -9,6 +9,7 @@ import {
   Col,
   Dropdown,
   Menu,
+  TreeSelect,
 } from 'antd';
 const { Option } = Select;
 import moment from 'moment';
@@ -21,20 +22,24 @@ export class TopBar extends React.Component {
     super(props);
     this.state = {
       fclasslist: [],
-      companylist: [],
-      deptartmentList: [],
+      companylist: [], //下拉框跟节点
+      companyData: [],
+      departmentData: [],
+      companyTreeData: [],
+      deptartmentTreeData: [],
       requestData: {
         date: moment(new Date()).format('YYYY-MM-DD'),
         fclass: '0',
         root: '0',
         level: '3',
         fisvitual: '0',
+        company: undefined,
+        department: undefined,
       },
     };
   }
 
   handleFormChange(payload) {
-    debugger;
     let requestData = { ...this.state.requestData, ...payload };
     this.setState({ requestData });
   }
@@ -52,6 +57,119 @@ export class TopBar extends React.Component {
     this.props.onExport('png');
   }
 
+  /**
+   * 分部
+   * @param {*} parentId
+   */
+  getCompanyTreeNode = (parentId) => {
+    let api =
+      '/api/bs/hrmorganization/jclorgchart/getCompanyTree?company=' + parentId;
+    fetch(api)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.code == 200) {
+          let arr = [...this.state.companyTreeData, ...data.data];
+          this.setState({
+            companyTreeData: arr,
+          });
+        }
+      });
+  };
+
+  /**
+   * 部门
+   * @param {} parentId
+   * @returns
+   */
+  getDepartmentTreeNode = (parentId) => {
+    let api =
+      '/api/bs/hrmorganization/jclorgchart/getDepartmentTree?department=' +
+      parentId;
+    fetch(api)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.code == 200) {
+          let arr = [...this.state.deptartmentTreeData, ...data.data];
+          this.setState({
+            deptartmentTreeData: arr,
+          });
+        }
+      });
+  };
+
+  onCompanyLoadData = (treeNode) =>
+    new Promise((resolve) => {
+      const { id } = treeNode.props;
+      setTimeout(() => {
+        this.getCompanyTreeNode(id);
+        resolve();
+      }, 300);
+    });
+
+  onDepartmentLoadData = (treeNode) =>
+    new Promise((resolve) => {
+      const { id } = treeNode.props;
+      setTimeout(() => {
+        this.getDepartmentTreeNode(id);
+        resolve();
+      }, 300);
+    });
+
+  onCompanyChange = (value, label, extra) => {
+    let company = value.length > 0 ? this.paramsUtil(value) : undefined;
+    let requestData = {
+      ...this.state.requestData,
+      company: company,
+      department: undefined,
+    };
+    this.setState({
+      companyData: value,
+      requestData,
+      departmentData: [],
+      deptartmentTreeData: [],
+    });
+    this.getDepartmentTreeList(company);
+  };
+
+  onDepartmentChange = (value) => {
+    let department = value.length > 0 ? this.paramsUtil(value) : undefined;
+    let requestData = { ...this.state.requestData, department: department };
+    this.setState({ departmentData: value, requestData });
+  };
+
+  getCompanyTreeList = () => {
+    let api = '/api/bs/hrmorganization/jclorgchart/getCompanyTree';
+    fetch(api)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.code == 200) {
+          this.setState({
+            companyTreeData: data.data,
+          });
+        }
+      });
+  };
+
+  getDepartmentTreeList = (company) => {
+    let api = `/api/bs/hrmorganization/jclorgchart/getDepartmentTree?company=${company}`;
+    fetch(api)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.code == 200) {
+          this.setState({
+            deptartmentTreeData: data.data,
+          });
+        }
+      });
+  };
+
+  paramsUtil = (param) => {
+    let arr = param.map(function (obj, index) {
+      return obj.value;
+    });
+    return arr.join(',');
+  };
+
   componentDidMount() {
     fetch(this.props.url)
       .then((res) => res.json())
@@ -61,6 +179,7 @@ export class TopBar extends React.Component {
           companylist: data.companylist,
         });
       });
+    this.getCompanyTreeList();
   }
 
   menu = (
@@ -80,10 +199,12 @@ export class TopBar extends React.Component {
   );
 
   render() {
+    const { companyTreeData, deptartmentTreeData } = this.state;
+
     return (
       <div className={style.topbarWrapper}>
         <Row>
-          <Col span={5}>
+          <Col span={6}>
             数据日期：
             <DatePicker
               placeholder="请选择日期"
@@ -105,7 +226,7 @@ export class TopBar extends React.Component {
             />
           </Col>
 
-          <Col span={4}>
+          <Col span={6}>
             维度：
             <Select
               defaultValue="0"
@@ -119,25 +240,44 @@ export class TopBar extends React.Component {
             </Select>
           </Col>
 
-          <Col span={4}>
-            根节点：
-            <Select
+          <Col span={6}>
+            分部：
+            <TreeSelect
               showSearch
-              filterOption={(input, option) =>
-                (option?.children).includes(input)
-              }
-              defaultValue="0"
-              style={{ width: 120 }}
-              value={this.state.requestData.root}
-              onChange={(value) => this.handleFormChange({ root: value })}
-            >
-              {this.state.companylist.map((item) => (
-                <Option value={item.id}>{item.fname}</Option>
-              ))}
-            </Select>
+              allowClear
+              treeDataSimpleMode
+              treeCheckable
+              treeCheckStrictly
+              style={{ width: '80%' }}
+              value={this.state.companyData}
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              placeholder="请选择分部节点"
+              onChange={this.onCompanyChange}
+              loadData={this.onCompanyLoadData}
+              treeData={companyTreeData}
+            />
           </Col>
 
-          <Col span={5}>
+          <Col span={6}>
+            部门：
+            <TreeSelect
+              showSearch
+              allowClear
+              treeDataSimpleMode
+              treeCheckable
+              treeCheckStrictly
+              style={{ width: '80%' }}
+              value={this.state.departmentData}
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              placeholder="请选择部门节点"
+              onChange={this.onDepartmentChange}
+              loadData={this.onDepartmentLoadData}
+              treeData={deptartmentTreeData}
+            />
+          </Col>
+        </Row>
+        <Row style={{ marginTop: '15px' }}>
+          <Col span={6}>
             显示层级：
             <Select
               defaultValue="3"
@@ -151,7 +291,7 @@ export class TopBar extends React.Component {
             </Select>
           </Col>
 
-          <Col span={3}>
+          <Col span={6}>
             <Checkbox
               style={{ marginTop: '5px' }}
               onChange={(e) =>
@@ -163,7 +303,7 @@ export class TopBar extends React.Component {
               显示虚拟组织
             </Checkbox>
           </Col>
-          <Col span={3}>
+          <Col span={6}>
             <Button
               type="primary"
               style={{ marginRight: '10px' }}

src/pages/company.jsx

@@ -17,7 +17,7 @@ export default function companyPage() {
   let orgChart = null;
 
   let topBarSearchRequest = null;
-  const [hasRight, setHasRight] = useState('true');
+  const [hasRight, setHasRight] = useState('');
 
   // 点击节点
   function onNodeClick(nodeId) {
@@ -90,7 +90,7 @@ export default function companyPage() {
         moment(new Date()).format('YYYY-MM-DD'),
     ).then((data) => {
       setData(data.data);
-      //setHasRight(data?.hasRight);
+      setHasRight('true');
     });
   }, [true]);
 

src/pages/user.jsx

@@ -24,7 +24,7 @@ export default function userPage() {
   let orgChart = null;
   let progressBtnRef = null;
 
-  const [hasRight, setHasRight] = useState('true');
+  const [hasRight, setHasRight] = useState('');
 
   // 点击节点
   function onNodeClick(nodeId) {
@@ -78,7 +78,7 @@ export default function userPage() {
     return `./img/department/${index}.png`;
   }
 
-  // 获取部门图片
+  // 获取分部图片
   function getSubcompanyImage() {
     let index = Math.floor(Math.random() * 3) + 1;
     return `./img/subcompany/${index}.png`;
@@ -87,14 +87,14 @@ export default function userPage() {
   // 获取数据
   useEffect(() => {
     document.cookie =
-      'ecology_JSessionid=aaa88PIn8LCwM_Y7mkOsy; JSESSIONID=aaa88PIn8LCwM_Y7mkOsy; loginidweaver=1; languageidweaver=7; loginuuids=1; __randcode__=e261bb82-0800-442e-889e-0720b8cf16fb';
+      'ecology_JSessionid=aaaYiMnZkKEdO-iKnOqty; JSESSIONID=aaaYiMnZkKEdO-iKnOqty; __randcode__=140d36b3-5a03-4e73-9434-768e655afbb4; loginidweaver=1; languageidweaver=7; loginuuids=1';
     d3.json(
       // "/user/data"
       '/api/bs/hrmorganization/jclorgchart/userData?fclass=0&root=0&date=' +
         moment(new Date()).format('YYYY-MM-DD'),
     ).then((data) => {
       setData(data.data);
-      //setHasRight(data?.hasRight);
+      setHasRight('true');
     });
   }, [true]);