亚信科技组织图视图

README.md

@@ -1,6 +1,6 @@
 # 聚才林人员组织前端代码
 
-####分支介绍
+#### 分支介绍
 亚信科技
 
 #### 介绍

pc4mobx/organization/apis/orgchart.js

@@ -0,0 +1,8 @@
+import { WeaTools } from 'ecCom'
+
+
+export const getOrgChartData = (params) => {
+  return WeaTools.callApi(`/api/hrm/orgchart/getOrgChartData`, 'POST', params);
+}
+
+

pc4mobx/organization/components/orgchart/index.js

@@ -0,0 +1,145 @@
+import React from 'react'
+import * as mobx from 'mobx'
+import {
+    inject,
+    observer
+} from 'mobx-react'
+import {
+    WeaTop, WeaTab, WeaFormItem, WeaRightMenu, WeaLeftRightLayout, WeaDatePicker
+} from 'ecCom'
+import {
+    Spin,Button
+} from 'antd'
+import {
+    i18n
+} from '../../public/i18n';
+const toJS = mobx.toJS;
+import '../../style/common.less';
+import domtoimage from 'dom-to-image';
+import { saveAs } from 'file-saver';
+
+@inject('orgchart')
+@observer
+export default class OrgChart extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+		this.init();
+    console.log("22",document.getElementById("box_org_tree"));
+    window.addEventListener('message', this.messageHandle, false);
+	}
+
+	componentWillUnmount() {
+		window.removeEventListener('message', this.messageHandle, false);
+	}
+
+	componentWillReceiveProps(nextProps) {
+		if (this.props.location.key !== nextProps.location.key) {
+			this.init(true);
+		}
+	}
+
+  messageHandle = (e) => {
+      const {
+        orgchart: store
+      } = this.props;
+      if (e.data.act == 'initOrgChart') {
+        store.onInitOrgChart(e.data.status);
+      } else if (e.data.act == 'callChild') {
+        store.showSpin(e.data.status);
+      }
+	}
+
+  //导出架构图
+  exportImage = () => {
+    const node = document.getElementById("box_org_tree");
+    domtoimage.toBlob(node).then((blob) => {
+        // 调用file-save方法 直接保存图片
+        saveAs(blob, '组织架构.png')
+    })
+}
+
+    /**
+     * 添加多级路径
+     *
+     * @param {*} url
+     */
+  addContentPath = (url) => {
+      const ecologyContentPath = window.ecologyContentPath || '';
+      if (url && ecologyContentPath) {
+        //避免重复添加ecologyContentPath
+        //避免传入的参数不是链接
+        if (url.startsWith('/') && !url.startsWith(ecologyContentPath)) {
+          url = ecologyContentPath + url;
+        }
+      }
+      return url;
+    };
+
+  init(refresh = false) {
+    const {
+      orgchart: store
+    } = this.props;
+    //checkAuthorized('orgchart', null, () => initData(refresh));
+    store.initData(refresh);
+  }
+
+  getChildrenCom = () => {
+    const {
+      orgchart
+    } = this.props;
+    const {
+      date
+    } = orgchart;
+
+     let btns = [];
+     btns.push(
+           <div>
+              <h6 style={{float:'left'}}>日期选择:</h6>
+              <WeaDatePicker
+                  value={date}
+                  viewAttr={2}
+                  style={{marginLeft:'20px',marginRight:'40px'}}
+                  onChange={value => orgchart.changeDate(value)}
+                  endValue={new Date()}
+              />
+              <Button type="primary" onClick={() => this.exportImage()}>导出</Button>
+           </div>
+     )
+    return btns;
+  }
+
+
+
+  render() {
+
+    const {
+      orgchart: store
+    } = this.props;
+    const {
+      setIframe,
+      spinning
+    } = store;
+
+    return (
+
+      <div  style={{ height: '100%' }}>
+        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@hkptkq`} spinning={spinning}>
+          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@bj98s7`}
+                          title='人员分布图'
+                          icon={<i className='icon-coms-hrm' />}
+                          iconBgcolor='#217346'
+                          loading={true}
+                          buttons={this.getChildrenCom()}
+            >
+              <div className='org-frame' style={{ height: '100%',width:'100%' }}>
+                <iframe id='orgChartFrame' src={this.addContentPath('/hrm/hrm_e9/orgChart1/orgChart.html')} style={{border: 'none'}} width='100%' height='100%' ref={(dom) => setIframe(dom)}/>
+              </div> 
+            </WeaTop>
+          </Spin>
+      </div>
+      )
+    }
+}

pc4mobx/organization/index.js

@@ -34,7 +34,8 @@ import ResourceBasicInfo from "./components/resource/ResourceBasicInfo";
 import ResourceCard from "./components/resource/ResourceCard";
 import ManagerDetach from "./components/detach/ManagerDetach";
 import ColumnSetting from "./components/columnSetting";
-import PersonnelResume from "./components/resource/PersonnelResume"
+import PersonnelResume from "./components/resource/PersonnelResume";
+import OrgChart from "./components/orgchart/index";
 
 import stores from "./stores";
 import "./style/index";
@@ -102,7 +103,7 @@ const Routes = (
     <Route key="managerDetach" path="managerDetach" component={ManagerDetach} />
     <Route key="columnSetting" path="columnSetting" component={ColumnSetting} />
     <Route key="personnelResume" path="personnelResume/:id" component={PersonnelResume} />
-    
+    <Route key="orgChart" path="orgChart" component={OrgChart} />
   </Route>
 );
 

pc4mobx/organization/stores/index.js

@@ -28,7 +28,8 @@ import {ImportDialogStore} from "./importDialog";
 import {ResourceCardStore} from "./resourceCard";
 import {ManagerDetachStore} from "./managerDetach";
 import {ColumnSetting} from './columnSetting';
-import {PersonnelResumeStore} from './personnelResume'
+import {PersonnelResumeStore} from './personnelResume';
+import { OrgChartStore } from "./orgchart";
 
 
 module.exports = {
@@ -62,5 +63,6 @@ module.exports = {
   resourceCard:new ResourceCardStore(),
   managerDetach: new ManagerDetachStore(),
   columnSetting: new ColumnSetting(),
-  personnelResume:new PersonnelResumeStore()
+  personnelResume:new PersonnelResumeStore(),
+  orgchart:new OrgChartStore()
 };

pc4mobx/organization/stores/orgchart.js

@@ -0,0 +1,114 @@
+import {
+    observable,
+    action
+} from 'mobx';
+import { WeaTools } from 'ecCom';
+import * as mobx from 'mobx';
+import * as API from '../apis/orgchart'; 
+import {
+    Modal,
+    message,
+} from 'antd'
+import {
+    i18n
+} from '../public/i18n';
+import moment from "moment";
+const toJS = mobx.toJS;
+
+
+export class OrgChartStore {
+
+  @observable spinning = false;
+  @observable hasRight = '';
+  @observable date = moment(new Date()).format('YYYY-MM-DD');
+
+  iframe;
+  /********************* action list *********************/
+  initData = (refresh = false) => {
+    this.iframe = null;
+    //this.hasRight = true;
+    this.callInitData();
+  }
+
+
+  callInitData = () => {
+    if(this.spinning)
+			return;
+		this.spinning = true;
+    this.getChartData();
+  }
+
+  setIframe = (iframe) => {
+		if(iframe == null || this.iframe != null)
+			return;
+		this.iframe = iframe;
+		this.callInitData();
+	}
+
+  changeDate = (value) => {
+    this.date = value;
+    this.getChartData();
+  }
+
+  onInitOrgChart = (status) => {
+		this.spinning = false;
+		switch (status) {
+			case 0:
+				message.error(i18n.message.dataNone());
+				break;
+			case -1:
+				message.error(i18n.message.dataConstructError());
+				break
+		}
+	}
+
+  showSpin = (val) => {
+		this.spinning = (val === '0');
+	}
+
+  @action getChartData = (reset = false) => {
+    this.spinning = true;
+    const params = {};
+
+    Object.assign(params, {
+      arg0: 1,
+      arg3: true,
+      arg11: ';;B',
+      date: this.date
+    });
+    API.getOrgChartData(params).then(data => {
+      if (data.status === '1') {
+        const msgData = {
+          act: 'orgChart', // 自定义的消息类型、行为，用于switch条件判断等。。
+          orgData: data.data,
+          params: {
+            sorgid: 1,
+            isShow: params.arg11,
+            showNum: 'false',
+            shownum: 25
+          },
+          client: {
+            browser: WeaTools.ua.browser,
+            browserVersion: {
+              browser: WeaTools.ua.browser,
+              version: parseInt(WeaTools.ua.version)
+            },
+            version: parseInt(WeaTools.ua.version),
+            os: WeaTools.ua.os
+          }
+        };
+        const sendMsg = setInterval(() => {
+          if ($('#orgChartFrame')[0] != null) {
+            clearInterval(sendMsg);
+            $('#orgChartFrame')[0].contentWindow.postMessage(msgData, '*');
+          }
+        }, 500);
+        // this.iframe && this.iframe.contentWindow.postMessage(msgData, '*');
+      } else {
+        this.spinning = false;
+      }
+    }, error => {
+      this.spinning = false;
+    })
+  }
+}