146 lines
3.7 KiB
JavaScript
146 lines
3.7 KiB
JavaScript
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>
|
|
)
|
|
}
|
|
}
|