385 lines
13 KiB
JavaScript
385 lines
13 KiB
JavaScript
|
import {
|
||
|
|
inject,
|
||
|
|
observer,
|
||
|
|
} from 'mobx-react'
|
||
|
|
|
||
|
|
import {
|
||
|
|
WeaTop,
|
||
|
|
WeaTab,
|
||
|
|
WeaRightMenu,
|
||
|
|
WeaAlertPage,
|
||
|
|
WeaMoreButton,
|
||
|
|
} from 'ecCom'
|
||
|
|
|
||
|
|
import {
|
||
|
|
Row,
|
||
|
|
Col,
|
||
|
|
Spin,
|
||
|
|
Button,
|
||
|
|
} from 'antd'
|
||
|
|
|
||
|
|
import React from 'react'
|
||
|
|
import * as mobx from 'mobx'
|
||
|
|
|
||
|
|
import RgWrapper from './RgWrapper'
|
||
|
|
import Statistics from './Statistics'
|
||
|
|
import BarChart from './BarChart'
|
||
|
|
import PieChart from './PieChart'
|
||
|
|
import MoreWithAdSearch from './MoreWithAdSearch'
|
||
|
|
import More from './More'
|
||
|
|
import {
|
||
|
|
jumpToHrmCard,
|
||
|
|
jumpToHrmDept,
|
||
|
|
jumpToHrmSubCompany,
|
||
|
|
jumpToHrmPost,
|
||
|
|
jumpToHrmContract
|
||
|
|
} from '../../util/pulic-func'
|
||
|
|
import '../../style/report.css';
|
||
|
|
import {
|
||
|
|
i18n
|
||
|
|
} from '../../public/i18n';
|
||
|
|
|
||
|
|
const toJS = mobx.toJS;
|
||
|
|
|
||
|
|
@inject('hrmChangeReport')
|
||
|
|
|
||
|
|
@observer
|
||
|
|
class ChangeRelatedReport extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillMount() {
|
||
|
|
this.pre();
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
this.init();
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillReceiveProps(nextProps) {
|
||
|
|
const {
|
||
|
|
hrmChangeReport
|
||
|
|
} = this.props;
|
||
|
|
|
||
|
|
if (this.props.location.key !== nextProps.location.key) {
|
||
|
|
this.pre(nextProps);
|
||
|
|
hrmChangeReport.optionReset();
|
||
|
|
hrmChangeReport.conditionReset();
|
||
|
|
hrmChangeReport.paramReset();
|
||
|
|
hrmChangeReport.tabkeyReset();
|
||
|
|
hrmChangeReport.apiFinishedStatusReset();
|
||
|
|
hrmChangeReport.getSearchCondition('radioGroup');
|
||
|
|
// this.refs.page.click();
|
||
|
|
this.init();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
pre(nextProps) {
|
||
|
|
const {
|
||
|
|
hrmChangeReport
|
||
|
|
} = this.props;
|
||
|
|
let pathname;
|
||
|
|
|
||
|
|
if (!nextProps) {
|
||
|
|
pathname = this.props.location.pathname.split('/').pop();
|
||
|
|
} else {
|
||
|
|
pathname = nextProps.location.pathname.split('/').pop();
|
||
|
|
}
|
||
|
|
|
||
|
|
hrmChangeReport.setPathName(pathname);
|
||
|
|
hrmChangeReport.pathToTitle();
|
||
|
|
hrmChangeReport.getCurWindowWidth();
|
||
|
|
hrmChangeReport.setColIdUnusualStatus();
|
||
|
|
}
|
||
|
|
|
||
|
|
init() {
|
||
|
|
const {
|
||
|
|
hrmChangeReport
|
||
|
|
} = this.props, {
|
||
|
|
getRight
|
||
|
|
} = hrmChangeReport;
|
||
|
|
getRight();
|
||
|
|
hrmChangeReport.tabkeyReset();
|
||
|
|
}
|
||
|
|
|
||
|
|
handleMenuClick(key) {
|
||
|
|
if (key == '0') {
|
||
|
|
this.handleExportExcel();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
getDeadline() {
|
||
|
|
const {
|
||
|
|
hrmChangeReport
|
||
|
|
} = this.props;
|
||
|
|
const {
|
||
|
|
deadline
|
||
|
|
} = hrmChangeReport;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{color: '#989898', marginTop: 4, marginRight: 16}}>
|
||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@m2hrqq`}>
|
||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8rmbpe`}>
|
||
|
|
<p style={{textAlign: 'right'}}>{deadline}</p>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
search(val) {
|
||
|
|
const {
|
||
|
|
hrmChangeReport
|
||
|
|
} = this.props;
|
||
|
|
if (val !== undefined) {
|
||
|
|
hrmChangeReport.setSingleSearchCondition(val);
|
||
|
|
hrmChangeReport.getTableInfo('more', true);
|
||
|
|
} else {
|
||
|
|
hrmChangeReport.getTableInfo('bar', true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
handleExportExcel() {
|
||
|
|
const {
|
||
|
|
hrmChangeReport
|
||
|
|
} = this.props;
|
||
|
|
|
||
|
|
hrmChangeReport.exportAll();
|
||
|
|
|
||
|
|
// hrmChangeReport.getTableInfo('more', false);
|
||
|
|
}
|
||
|
|
|
||
|
|
iconSet() {
|
||
|
|
const icons = [
|
||
|
|
(<div className='hrm-report-box'><div style={{backgroundColor: '#2DB7F5'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-plus' /></div></div>),
|
||
|
|
(<div className='hrm-report-box'><div style={{backgroundColor: '#EB6D3A'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-Loss' /></div></div>),
|
||
|
|
(<div className='hrm-report-box'><div style={{backgroundColor: '#7DC756'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-Net-growth' /></div></div>),
|
||
|
|
(<div className='hrm-report-box'><div style={{backgroundColor: '#2DB7F5'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-hrm' /></div></div>),
|
||
|
|
(<div className='hrm-report-box'><div style={{backgroundColor: '#7DC756'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-Department-number' /></div></div>),
|
||
|
|
(<div className='hrm-report-box'><div style={{backgroundColor: '#D65DF4'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-Delayed' /></div></div>),
|
||
|
|
(<div className='hrm-report-box'><div style={{backgroundColor: '#50D0A3'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-Department-number' /></div></div>),
|
||
|
|
(<div className='hrm-report-box'><div style={{backgroundColor: '#FF986F'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-Proportion' /></div></div>),
|
||
|
|
(<div className='hrm-report-box'><div style={{backgroundColor: '#F57C4C'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-plus' /></div></div>),
|
||
|
|
(<div className='hrm-report-box'><div style={{backgroundColor: '#7DC756'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-synergism' /></div></div>),
|
||
|
|
(<div className='hrm-report-box'><div style={{backgroundColor: '#D55DF3'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-Department-number' /></div></div>),
|
||
|
|
];
|
||
|
|
|
||
|
|
return icons;
|
||
|
|
}
|
||
|
|
|
||
|
|
getIcons(i) {
|
||
|
|
const {
|
||
|
|
hrmChangeReport
|
||
|
|
} = this.props;
|
||
|
|
const {
|
||
|
|
pathname
|
||
|
|
} = hrmChangeReport;
|
||
|
|
let icons = this.iconSet();
|
||
|
|
|
||
|
|
switch (pathname) {
|
||
|
|
case 'add':
|
||
|
|
return icons.slice(i, i + 1);
|
||
|
|
case 'confirmation':
|
||
|
|
return icons.slice(i + 3, i + 4);
|
||
|
|
case 'transfer':
|
||
|
|
if (i < 2) {
|
||
|
|
return icons.slice(i + 3, i + 4);
|
||
|
|
} else {
|
||
|
|
return icons.slice(6, 7);
|
||
|
|
}
|
||
|
|
case 'contract':
|
||
|
|
return icons.slice(i + 8, i + 9);
|
||
|
|
default:
|
||
|
|
if (i < 2) {
|
||
|
|
return icons.slice(i + 3, i + 4);
|
||
|
|
} else {
|
||
|
|
return icons.slice(7, 8);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {
|
||
|
|
hrmChangeReport
|
||
|
|
} = this.props;
|
||
|
|
const {
|
||
|
|
title,
|
||
|
|
countDatas,
|
||
|
|
pathname,
|
||
|
|
option1,
|
||
|
|
option2,
|
||
|
|
option3,
|
||
|
|
chartTitle1,
|
||
|
|
chartTitle2,
|
||
|
|
chartTitle3,
|
||
|
|
isLeftEchartsShow,
|
||
|
|
isRightEchartsShow,
|
||
|
|
isPieChartsShow,
|
||
|
|
ids,
|
||
|
|
idsForPie,
|
||
|
|
yAxisData,
|
||
|
|
linkList,
|
||
|
|
visible1,
|
||
|
|
visible2,
|
||
|
|
tableStore,
|
||
|
|
conditionOfAdSearch,
|
||
|
|
form,
|
||
|
|
strokeColor,
|
||
|
|
isNeedWeaTab,
|
||
|
|
isNeedPieChart,
|
||
|
|
tabKey,
|
||
|
|
tabDatas,
|
||
|
|
isApiOneFinished,
|
||
|
|
isApiTwoFinished,
|
||
|
|
winWidth,
|
||
|
|
gridData,
|
||
|
|
isColIdUnusual,
|
||
|
|
loading,
|
||
|
|
authorized,
|
||
|
|
exportAll,
|
||
|
|
} = hrmChangeReport;
|
||
|
|
|
||
|
|
const btn = [
|
||
|
|
(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@grxtrg@1`} type="primary" onClick={exportAll} >{i18n.button.export1()}</Button>),
|
||
|
|
(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@burv91@2`} type="primary" onClick={() => hrmChangeReport.exportExcel()} >{i18n.button.export()}</Button>),
|
||
|
|
(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@2ekmsa@3`} />),
|
||
|
|
];
|
||
|
|
|
||
|
|
const btn1 = btn.slice(0, 1);
|
||
|
|
const btn2 = btn.slice(1, 3);
|
||
|
|
|
||
|
|
const dropMenuDatas = [{
|
||
|
|
key: '0',
|
||
|
|
content: i18n.button.export1(),
|
||
|
|
icon: <i className='icon-coms-leading-in' />
|
||
|
|
}, ]
|
||
|
|
|
||
|
|
if (!authorized) {
|
||
|
|
return (
|
||
|
|
<div style={{height: '100%'}}>
|
||
|
|
{loading ? <div className='hrm-loading-center'>
|
||
|
|
<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@hc8sxa`} spinning={loading} size='large'></Spin>
|
||
|
|
</div>
|
||
|
|
: <div className="hrm-wea-alert-page">
|
||
|
|
<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@vumjrg`}>
|
||
|
|
<div style={{ color: '#000' }}>
|
||
|
|
{i18n.message.authFailed()}
|
||
|
|
</div>
|
||
|
|
</WeaAlertPage>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
} else {
|
||
|
|
return (
|
||
|
|
<div style={{backgroundColor: '#fff'}} ref='page' className='hrm-report'>
|
||
|
|
<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@dohj9y`}
|
||
|
|
datas={dropMenuDatas}
|
||
|
|
onClick={(e) => this.handleMenuClick(e)}
|
||
|
|
collectParams={{favname: title,favouritetype:5}}
|
||
|
|
>
|
||
|
|
<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@t94b8n`}
|
||
|
|
title={title}
|
||
|
|
icon={<i className='icon-coms-hrm' />}
|
||
|
|
iconBgcolor='#217346'
|
||
|
|
loading={true}
|
||
|
|
buttons={btn1}
|
||
|
|
showDropIcon={true}
|
||
|
|
dropMenuDatas={dropMenuDatas}
|
||
|
|
onDropMenuClick={(e) => this.handleMenuClick(e)}
|
||
|
|
>
|
||
|
|
|
||
|
|
{ isNeedWeaTab ? <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@y6016h`}
|
||
|
|
selectedKey={tabKey}
|
||
|
|
datas={tabDatas}
|
||
|
|
keyParam='key'
|
||
|
|
onChange={(key) => hrmChangeReport.tabClick(key)}
|
||
|
|
/>
|
||
|
|
: ''}
|
||
|
|
|
||
|
|
<RgWrapper ecId={`${this && this.props && this.props.ecId || ''}_RgWrapper@efu7x1`} />
|
||
|
|
|
||
|
|
<Statistics ecId={`${this && this.props && this.props.ecId || ''}_Statistics@ilusyj`}
|
||
|
|
countDatas={toJS(countDatas)}
|
||
|
|
getIcons={(i) => this.getIcons(i)}
|
||
|
|
isNeedLink={ (pathname == 'contract') ? true : false}
|
||
|
|
linkIndex={0}
|
||
|
|
setVisible={(arg, bool) => hrmChangeReport.setVisible(arg, bool)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<BarChart ecId={`${this && this.props && this.props.ecId || ''}_BarChart@2a683q`}
|
||
|
|
option={[toJS(option1), toJS(option2)]}
|
||
|
|
pathname={pathname}
|
||
|
|
chartTitle={[typeof(chartTitle1) == 'function' ? `${chartTitle1()}(top 5)` : chartTitle1, typeof(chartTitle2) == 'function' ? `${chartTitle2()}(top 5)` : chartTitle2]}
|
||
|
|
isChartsShow={[isLeftEchartsShow, isRightEchartsShow]}
|
||
|
|
ids={toJS(ids)}
|
||
|
|
yAxisData={toJS(yAxisData)}
|
||
|
|
linkList={linkList}
|
||
|
|
linkStyle={'hrm-report-linkStyle'}
|
||
|
|
winWidth={winWidth}
|
||
|
|
gridData={toJS(gridData)}
|
||
|
|
yAxisScaleMaxLen={10}
|
||
|
|
setVisible={(arg, bool, dpId) => hrmChangeReport.setVisible(arg, bool, dpId)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{ isNeedPieChart ? <PieChart ecId={`${this && this.props && this.props.ecId || ''}_PieChart@0rh82u`}
|
||
|
|
option={toJS(option3)}
|
||
|
|
chartTitle={typeof(chartTitle3) == 'function' ? chartTitle3() : chartTitle3}
|
||
|
|
isChartsShow={isPieChartsShow}
|
||
|
|
linkStyle={'hrm-report-linkStyle'}
|
||
|
|
ids={toJS(idsForPie)}
|
||
|
|
canvasPosition={2}
|
||
|
|
winWidth={winWidth}
|
||
|
|
setVisible={(arg, bool, dpId) => hrmChangeReport.setVisible(arg, bool, dpId)}
|
||
|
|
/>
|
||
|
|
: ''}
|
||
|
|
|
||
|
|
{this.getDeadline()}
|
||
|
|
</WeaTop>
|
||
|
|
|
||
|
|
<More ecId={`${this && this.props && this.props.ecId || ''}_More@imv2qe`}
|
||
|
|
title={hrmChangeReport.getDialogTitle()}
|
||
|
|
visible={visible1}
|
||
|
|
buttons={btn2}
|
||
|
|
onCancel={() => hrmChangeReport.setVisible('1', false)}
|
||
|
|
search={(v) => this.search(v)}
|
||
|
|
tableStore={tableStore}
|
||
|
|
loading={tableStore.loading}
|
||
|
|
strokeColor={'#6FBCEA'}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<MoreWithAdSearch ecId={`${this && this.props && this.props.ecId || ''}_MoreWithAdSearch@zal0y0`}
|
||
|
|
title={hrmChangeReport.getDialogTitle()}
|
||
|
|
visible={visible2}
|
||
|
|
buttons={btn2}
|
||
|
|
onCancel={() => hrmChangeReport.setVisible('2', false)}
|
||
|
|
search={() => this.search()}
|
||
|
|
tableStore={tableStore}
|
||
|
|
loading={tableStore.loading}
|
||
|
|
searchsBaseValue={form.getFormParams().lastname}
|
||
|
|
condition={toJS(conditionOfAdSearch)}
|
||
|
|
form={form}
|
||
|
|
style={'hrm-report-scope'}
|
||
|
|
linkStyle={'hrm-report-linkStyle-table'}
|
||
|
|
isNeedReRender={true}
|
||
|
|
dataIndex={['resourcename', 'olddepartnemtname', 'oldsubcompanyname', 'oldjobtitlename', 'newdepartmentname', 'newjobtitlename', 'hrmname', 'typename', 'deptname', 'jobname']}
|
||
|
|
colId={['uid', 'departmentid', 'subcompanyid', 'jobid', 'newdepartnemtid', 'newjobid', 'olddepartnemtid', 'oldjobid', 'userid', 'typeid', 'deptid']}
|
||
|
|
jumpToHrmCard={jumpToHrmCard}
|
||
|
|
jumpToHrmDept={jumpToHrmDept}
|
||
|
|
jumpToHrmSubCompany={jumpToHrmSubCompany}
|
||
|
|
jumpToHrmPost={jumpToHrmPost}
|
||
|
|
jumpToHrmContract={jumpToHrmContract}
|
||
|
|
isColIdUnusual={isColIdUnusual}
|
||
|
|
onSearchChange={ (val) => form.updateFields({lastname: {value:val}})}
|
||
|
|
/>
|
||
|
|
</WeaRightMenu>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ChangeRelatedReport
|