亚信安全组织架构图改造

.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-15 11:50:19
+ * @LastEditTime: 2023-05-23 15:18:17
  * @FilePath: /org-chart-frant/.umirc.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -11,7 +11,7 @@ import { defineConfig } from 'umi';
 export default defineConfig({
   hash: true,
   history: { type: 'hash' },
-  base: '/spa/orgChart/',
+  base: '/spa/aischart/',
   // exportStatic: {},
   publicPath: './',
   nodeModulesTransform: {
@@ -26,7 +26,7 @@ export default defineConfig({
   proxy: {
     '/api': {
       // 标识需要进行转换的请求的url
-      target: 'http://hr.jinyosolar.cn:90/api', // 服务端域名 / http://localhost:8686
+      target: 'http://127.0.0.1:8686/api', // 服务端域名 / http://localhost:8686
       changeOrigin: true, // 允许域名进行转换
       pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
     },

src/components/topBar/index.jsx

@@ -4,7 +4,6 @@ import {
   DatePicker,
   Select,
   Button,
-  Checkbox,
   Row,
   Col,
   Dropdown,
@@ -21,21 +20,13 @@ export class TopBar extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      fclasslist: [],
-      companylist: [], //下拉框跟节点
+      deptartmentTreeData: [], //部门异步树
       treeExpandedKeys: [],
-      companyData: [],
-      departmentData: [],
-      companyTreeData: [],
-      deptartmentTreeData: [],
+      levelOptions: [], //层级数据，hrm中层级字段
       requestData: {
-        date: moment(new Date()).format('YYYY-MM-DD'),
-        fclass: '0',
-        root: '0',
-        level: '3',
-        fisvitual: '0',
-        company: undefined,
-        department: undefined,
+        date: moment(new Date()).format('YYYY-MM-DD'), //日期
+        department: [],
+        level: '2', //显示层级
       },
     };
   }
@@ -44,69 +35,54 @@ export class TopBar extends React.Component {
     let requestData = { ...this.state.requestData, ...payload };
     this.setState({ requestData });
   }
-  //日期可选择未来
-  // disabledDate (current)  {
-  //   // return current && current >moment().subtract(1, "days");
-  // return current && current > moment().endOf("day");
-  // }
 
   handleExportMenuClick(e) {
     this.props.onExport(e.key == '1' ? 'png' : 'pdf');
   }
 
-  handleExportButtonClick() {
-    this.props.onExport('png');
-  }
-
   /**
-   * 分部
-   * @param {*} parentId
+   * 部门树数据
+   * @param {} parentId
+   * @returns
    */
-  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,
-          });
-        }
-      });
+  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,
+    //       });
+    //     }
+    //   });
+    let treeData = [];
+    if (parentId === null) {
+      treeData = [
+        { id: 1, pId: 0, value: '1', title: 'Expand to load' },
+        { id: 2, pId: 0, value: '2', title: 'Expand to load' },
+        { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
+      ];
+    } else {
+      treeData = [
+        { id: 6, pId: 1, value: '3', title: 'Tree Node', isLeaf: true },
+      ];
+    }
+
+    let arr = [...this.state.deptartmentTreeData, ...treeData];
+    this.setState({
+      deptartmentTreeData: 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;
@@ -116,55 +92,12 @@ export class TopBar extends React.Component {
       }, 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: [],
-      treeExpandedKeys: [],
-    });
-    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;
@@ -179,17 +112,32 @@ export class TopBar extends React.Component {
   };
 
   componentDidMount() {
-    fetch(this.props.url)
-      .then((res) => res.json())
-      .then((data) => {
-        this.setState({
-          fclasslist: data.fclasslist,
-          companylist: data.companylist,
-        });
-      });
-    this.getCompanyTreeList();
+    // fetch(this.props.url)
+    //   .then((res) => res.json())
+    //   .then((data) => {
+    //     this.setState({
+    //      levelOptions: data.levelOptions
+    //     });
+    //   });
+
+    const options = [
+      { value: '1', label: '一级' },
+      { value: '2', label: '二级' },
+      { value: '3', label: '三级' },
+    ];
+    const treeData = [
+      { id: 1, pId: 0, value: '1', title: 'Expand to load' },
+      { id: 2, pId: 0, value: '2', title: 'Expand to load' },
+      { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
+    ];
+    this.setState({
+      levelOptions: options,
+    });
+    this.getDepartmentTreeNode(null);
   }
 
+  /**
+   * 导出多选 */
   menu = (
     <Menu
       onClick={this.handleExportMenuClick.bind(this)}
@@ -207,16 +155,14 @@ export class TopBar extends React.Component {
   );
 
   render() {
-    const { companyTreeData, deptartmentTreeData, treeExpandedKeys } =
-      this.state;
-
+    const { deptartmentTreeData, treeExpandedKeys } = this.state;
     return (
       <div className={style.topbarWrapper}>
         <Row>
           <Col span={6}>
-            数据日期：
+            日期追溯：
             <DatePicker
-              placeholder="请选择日期"
+              placeholder="日期选择"
               style={{ width: 130 }}
               locale={locale}
               allowClear={false}
@@ -234,40 +180,6 @@ export class TopBar extends React.Component {
               }
             />
           </Col>
-
-          <Col span={6}>
-            维度：
-            <Select
-              defaultValue="0"
-              style={{ width: 120 }}
-              value={this.state.requestData.fclass}
-              onChange={(value) => this.handleFormChange({ fclass: value })}
-            >
-              {this.state.fclasslist.map((item) => (
-                <Option value={item.id}>{item.companyname}</Option>
-              ))}
-            </Select>
-          </Col>
-
-          <Col span={6}>
-            分部：
-            <TreeSelect
-              showSearch
-              allowClear
-              treeDataSimpleMode
-              treeCheckable
-              treeCheckStrictly
-              showCheckedStrategy={TreeSelect.SHOW_ALL}
-              style={{ width: '80%' }}
-              value={this.state.companyData}
-              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-              placeholder="请选择分部节点"
-              onChange={this.onCompanyChange}
-              loadData={this.onCompanyLoadData}
-              treeData={companyTreeData}
-            />
-          </Col>
-
           <Col span={6}>
             部门：
             <TreeSelect
@@ -279,42 +191,23 @@ export class TopBar extends React.Component {
               treeExpandedKeys={treeExpandedKeys}
               treeCheckStrictly
               style={{ width: '80%' }}
-              value={this.state.departmentData}
+              value={this.state.requestData.department}
               dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-              placeholder="请选择部门节点"
+              placeholder="部门选择"
               onChange={this.onDepartmentChange}
               loadData={this.onDepartmentLoadData}
               treeData={deptartmentTreeData}
               onTreeExpand={this.onTreeExpand}
             />
           </Col>
-        </Row>
-        <Row style={{ marginTop: '15px' }}>
           <Col span={6}>
             显示层级：
             <Select
-              defaultValue="3"
-              style={{ width: 120 }}
+              style={{ width: 130 }}
               value={this.state.requestData.level}
               onChange={(value) => this.handleFormChange({ level: value })}
-            >
-              <Option value="1">一级</Option>
-              <Option value="2">二级</Option>
-              <Option value="3">三级</Option>
-            </Select>
-          </Col>
-
-          <Col span={6}>
-            <Checkbox
-              style={{ marginTop: '5px' }}
-              onChange={(e) =>
-                this.handleFormChange({
-                  fisvitual: e.target.checked ? '1' : '0',
-                })
-              }
-            >
-              显示虚拟组织
-            </Checkbox>
+              options={this.state.levelOptions}
+            />
           </Col>
           <Col span={6}>
             <Button

src/department/index.js

@@ -1,5 +0,0 @@
-import React from 'react'
-
-export default () => {
-    return <div>Hello</div>
-}

src/pages/company.jsx

@@ -12,17 +12,13 @@ import { message } from 'antd';
 let active = 'top';
 export default function companyPage() {
   const [data, setData] = useState(null);
-  const [sliderProgress, setSliderProgress] = useState(50);
   let addNodeChildFunc = null;
   let orgChart = null;
-
   let topBarSearchRequest = null;
   const [hasRight, setHasRight] = useState('');
 
   // 点击节点
-  function onNodeClick(nodeId) {
-    // alert('clicked ' + nodeId);
-  }
+  function onNodeClick(nodeId) {}
 
   // 扩展按钮点击
   function onButtonClick(event, d) {
@@ -33,15 +29,10 @@ export default function companyPage() {
           idsList.push(item.data.id);
         }
       });
-
       if (idsList.length == 0) {
         return;
       }
-
       let idsStr = idsList.join(',');
-
-      console.log('idsStr', idsStr);
-
       let api = '';
       if (topBarSearchRequest) {
         let request = { ...topBarSearchRequest, ids: idsStr };
@@ -75,17 +66,17 @@ export default function companyPage() {
     return `./img/department/1.png`;
   }
 
-  // 获取部门图片
+  // 获取分部图片
   function getSubcompanyImage() {
     let index = Math.floor(Math.random() * 3) + 1;
-    // return `./img/subcompany/${index}.png`;
     return `./img/subcompany/2.png`;
   }
 
-  // 获取数据
+  //获取数据
   useEffect(() => {
+    document.cookie =
+      'ecology_JSessionid=aaa_5XehwlWEjcCKl0cHy; JSESSIONID=aaa_5XehwlWEjcCKl0cHy; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; __randcode__=706b3e41-eafb-4e55-bc1c-a4cf0f9fdaa7';
     d3.json(
-      // "/company/data"
       '/api/bs/hrmorganization/jclorgchart/companyData?fclass=0&isvitual=0&root=0&date=' +
         moment(new Date()).format('YYYY-MM-DD'),
     ).then((data) => {
@@ -296,7 +287,6 @@ export default function companyPage() {
       });
   };
   useEffect(() => {
-    console.log('data', data);
     if (active == 'left') {
       orgChart &&
         orgChart
@@ -313,7 +303,6 @@ export default function companyPage() {
   }, [data]);
   // top bar end
   if (hasRight === false) {
-    //return message.error("对不起，您暂时没有权限", 2);
     return (
       <div style={{ width: '100%', top: '40%', position: 'absolute' }}>
         <img
@@ -336,7 +325,7 @@ export default function companyPage() {
             handleSearch(requestData);
           }}
           type="company"
-          url="/api/bs/hrmorganization/jclorgchart/getCondition?type=company"
+          url="/api/bs/hrmorganization/jclorgchart/getSearchCondition"
         />
         <ToolBar
           onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}