454 lines
13 KiB
JavaScript
454 lines
13 KiB
JavaScript
import { inject, observer } from 'mobx-react'
|
||
|
||
import {
|
||
WeaTop,
|
||
WeaInput,
|
||
WeaEchart,
|
||
WeaRightMenu,
|
||
WeaRadioGroup,
|
||
WeaMoreButton,
|
||
WeaLocaleProvider,
|
||
WeaDialog
|
||
} from 'ecCom'
|
||
import {
|
||
WeaTableNew
|
||
} from 'comsMobx'
|
||
import { Row, Col, Tabs, Spin, Button } from 'antd'
|
||
|
||
import React from 'react'
|
||
import * as mobx from 'mobx'
|
||
|
||
import RadioGroupWrapper from './RadioGroupWrapper'
|
||
import ReportChart from './ReportChart'
|
||
import DataStatistics from './DataStatistics'
|
||
import More from './More'
|
||
import { addContentPath } from '../../util/index.js'
|
||
|
||
import '../../style/report.css'
|
||
import { i18n } from '../../public/i18n'
|
||
import { Authority } from '../../public/coms/index.js'
|
||
|
||
const toJS = mobx.toJS
|
||
const TabPane = Tabs.TabPane
|
||
const getLabel = WeaLocaleProvider.getLabel
|
||
|
||
const WeaTable = WeaTableNew.WeaTable;
|
||
|
||
@inject('hrmPerStatusReport')
|
||
@observer
|
||
class BasicConditionAnalysis extends React.Component {
|
||
constructor (props) {
|
||
super(props)
|
||
}
|
||
|
||
componentWillMount () {
|
||
this.pre()
|
||
}
|
||
|
||
componentDidMount () {
|
||
const { hrmPerStatusReport: store } = this.props
|
||
store.getRight().then(hasRight => {
|
||
hasRight && this.init()
|
||
})
|
||
}
|
||
|
||
componentWillReceiveProps (nextProps) {
|
||
const { hrmPerStatusReport } = this.props
|
||
|
||
if (this.props.location.key !== nextProps.location.key) {
|
||
this.pre(nextProps)
|
||
hrmPerStatusReport.optionReset()
|
||
hrmPerStatusReport.conditionReset()
|
||
hrmPerStatusReport.paramReset()
|
||
hrmPerStatusReport.apiFinishedStatusReset()
|
||
hrmPerStatusReport.getSearchCondition()
|
||
hrmPerStatusReport.tabKeyReset()
|
||
this.refs.page && this.refs.page.click()
|
||
this.init()
|
||
}
|
||
}
|
||
|
||
pre (nextProps) {
|
||
const { hrmPerStatusReport } = this.props
|
||
let pathname
|
||
|
||
if (!nextProps) {
|
||
pathname = this.props.location.pathname.split('/').pop()
|
||
} else {
|
||
pathname = nextProps.location.pathname.split('/').pop()
|
||
}
|
||
|
||
hrmPerStatusReport.optionReset()
|
||
hrmPerStatusReport.setPathName(pathname)
|
||
hrmPerStatusReport.pathToTitle()
|
||
hrmPerStatusReport.getCurWindowWidth()
|
||
}
|
||
|
||
init () {
|
||
const { hrmPerStatusReport } = this.props
|
||
const { pathname } = hrmPerStatusReport
|
||
hrmPerStatusReport.setKey('1')
|
||
if (pathname !== 'basicConditionAnalysis')
|
||
hrmPerStatusReport.setIntervalShow(false)
|
||
}
|
||
|
||
getTabPanes () {
|
||
const { hrmPerStatusReport } = this.props
|
||
const { tabKey } = hrmPerStatusReport
|
||
return (
|
||
<div style={{ margin: '8px 16px' }}>
|
||
<Tabs
|
||
ecId={`${(this && this.props && this.props.ecId) || ''}_Tabs@gs0hfe`}
|
||
activeKey={tabKey}
|
||
onTabClick={key => {
|
||
hrmPerStatusReport.setKey(key)
|
||
hrmPerStatusReport.getData()
|
||
}}
|
||
type='card'
|
||
>
|
||
<TabPane
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_TabPane@9cn3g1`}
|
||
tab={i18n.label.ageStatus()}
|
||
key='1'
|
||
></TabPane>
|
||
<TabPane
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_TabPane@esi1fz`}
|
||
tab={i18n.label.genderStatus()}
|
||
key='2'
|
||
></TabPane>
|
||
<TabPane
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_TabPane@7y3472`}
|
||
tab={getLabel('548320', '司龄状况')}
|
||
key='3'
|
||
></TabPane>
|
||
<TabPane
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_TabPane@b43k25`}
|
||
tab={i18n.label.eduStatus()}
|
||
key='4'
|
||
></TabPane>
|
||
<TabPane
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_TabPane@wlbzlu`}
|
||
tab={i18n.label.maritalStatus()}
|
||
key='5'
|
||
></TabPane>
|
||
<TabPane
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_TabPane@uzc70h`}
|
||
tab={i18n.label.proTitleStatus()}
|
||
key='6'
|
||
></TabPane>
|
||
<TabPane
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_TabPane@g0s8cy`}
|
||
tab={i18n.label.rankStatus()}
|
||
key='7'
|
||
></TabPane>
|
||
<TabPane
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_TabPane@w5q6jf`}
|
||
tab={i18n.label.workNature()}
|
||
key='10'
|
||
></TabPane>
|
||
<TabPane
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_TabPane@4fswhv`}
|
||
tab={i18n.label.stateStatistics()}
|
||
key='11'
|
||
></TabPane>
|
||
<TabPane
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_TabPane@k2w6ke`}
|
||
tab={i18n.label.securtitylevel()}
|
||
key='12'
|
||
></TabPane>
|
||
</Tabs>
|
||
{this.getChart(hrmPerStatusReport.getTabName())}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
getChart (tagName) {
|
||
const { hrmPerStatusReport } = this.props
|
||
const {
|
||
option1,
|
||
option2,
|
||
isIntervalShow,
|
||
interval,
|
||
tabKey,
|
||
pathname,
|
||
chartTitle1,
|
||
chartTitle2,
|
||
isEchartsShow,
|
||
isLeftEchartsShow,
|
||
isRightEchartsShow,
|
||
ids,
|
||
yAxisData,
|
||
linkList,
|
||
winWidth,
|
||
cmd
|
||
} = hrmPerStatusReport
|
||
|
||
return (
|
||
<ReportChart
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_ReportChart@8tx6up`}
|
||
option={[toJS(option1), toJS(option2)]}
|
||
isIntervalShow={isIntervalShow}
|
||
interval={interval}
|
||
tabKey={tabKey}
|
||
pathname={pathname}
|
||
chartTitle={[
|
||
typeof chartTitle1 == 'function'
|
||
? `${chartTitle1()}(Top5)`
|
||
: chartTitle1,
|
||
typeof chartTitle2 == 'function'
|
||
? `${chartTitle2()}(Top5)`
|
||
: chartTitle2
|
||
]}
|
||
isChartsShow={[isEchartsShow, isLeftEchartsShow, isRightEchartsShow]}
|
||
ids={toJS(ids)}
|
||
yAxisData={toJS(yAxisData)}
|
||
linkList={linkList}
|
||
tagName={tagName}
|
||
cmd={cmd}
|
||
winWidth={winWidth}
|
||
setGap={val => hrmPerStatusReport.setGap(val)}
|
||
getData={tag => hrmPerStatusReport.getData(tag)}
|
||
showDialog = {name => {
|
||
hrmPerStatusReport.name = name;
|
||
hrmPerStatusReport.setDialogVisible(true);
|
||
}}
|
||
/>
|
||
)
|
||
}
|
||
|
||
getDeadline () {
|
||
const { hrmPerStatusReport } = this.props
|
||
const { deadline } = hrmPerStatusReport
|
||
|
||
return (
|
||
<div style={{ color: '#989898', marginTop: 4, marginRight: 16 }}>
|
||
<Row
|
||
ecId={`${(this && this.props && this.props.ecId) || ''}_Row@9z095w`}
|
||
>
|
||
<Col
|
||
ecId={`${(this && this.props && this.props.ecId) || ''}_Col@mifi75`}
|
||
>
|
||
<p style={{ textAlign: 'right' }}>{deadline}</p>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
search (v) {
|
||
const { hrmPerStatusReport } = this.props
|
||
hrmPerStatusReport.setSearchCondition(v)
|
||
hrmPerStatusReport.getData('search')
|
||
}
|
||
|
||
handleMenuClick (key) {
|
||
if (key == '0') this.refs.a.click()
|
||
}
|
||
|
||
render () {
|
||
const { hrmPerStatusReport } = this.props
|
||
const {
|
||
title,
|
||
pathname,
|
||
countDatas,
|
||
visible,
|
||
tableStore,
|
||
strokeColor,
|
||
href,
|
||
paramsStr,
|
||
isApiOneFinished,
|
||
isApiTwoFinished,
|
||
authorityStore,
|
||
dialogVisible,
|
||
name
|
||
} = hrmPerStatusReport
|
||
|
||
const btn = [
|
||
<Button
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_Button@zo2az2@1`}
|
||
type='primary'
|
||
onClick={() => this.refs.a.click()}
|
||
>
|
||
<a
|
||
ref='a'
|
||
href={addContentPath(
|
||
pathname == 'departmentStatistics'
|
||
? '/api/hrm/resourceState/downloadExcel?cmd=DepartmentRp' +
|
||
paramsStr
|
||
: '/api/hrm/resourceState/downloadExcel?cmd=JobRp' + paramsStr
|
||
)}
|
||
>
|
||
{i18n.button.export1()}
|
||
</a>
|
||
</Button>,
|
||
<Button
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_Button@4f1zjp@2`}
|
||
type='primary'
|
||
onClick={() => this.refs.a1.click()}
|
||
>
|
||
<a href={addContentPath(href)} ref='a1'>
|
||
{i18n.button.export()}
|
||
</a>
|
||
</Button>,
|
||
<WeaMoreButton
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_WeaMoreButton@e4ss8c@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' />
|
||
},
|
||
{
|
||
key: '1',
|
||
content: i18n.button.more(),
|
||
disabled: true,
|
||
icon: <i className='icon-coms-task-list' />
|
||
}
|
||
]
|
||
|
||
const dropMenuDatas1 = dropMenuDatas.slice(0, 1)
|
||
const dropMenuDatas2 = dropMenuDatas.slice(1, 2)
|
||
|
||
return (
|
||
<Authority
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_Authority@q2pgvy`}
|
||
store={authorityStore}
|
||
>
|
||
<Spin
|
||
ecId={`${(this && this.props && this.props.ecId) || ''}_Spin@565xx0`}
|
||
spinning={!(isApiOneFinished && isApiTwoFinished)}
|
||
>
|
||
<div style={{ backgroundColor: '#fff' }} ref='page'>
|
||
<WeaRightMenu
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_WeaRightMenu@5l9z5o`}
|
||
datas={
|
||
pathname == 'departmentStatistics' ||
|
||
pathname == 'postStatistics'
|
||
? dropMenuDatas1
|
||
: dropMenuDatas2
|
||
}
|
||
onClick={e => this.handleMenuClick(e)}
|
||
collectParams={{ favname: title, favouritetype: 5 }}
|
||
>
|
||
<WeaTop
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_WeaTop@qwurqz`}
|
||
title={title}
|
||
icon={<i className='icon-coms-hrm' />}
|
||
iconBgcolor='#217346'
|
||
loading={true}
|
||
buttons={
|
||
pathname == 'departmentStatistics' ||
|
||
pathname == 'postStatistics'
|
||
? btn1
|
||
: []
|
||
}
|
||
showDropIcon={true}
|
||
dropMenuDatas={
|
||
pathname == 'departmentStatistics' ||
|
||
pathname == 'postStatistics'
|
||
? dropMenuDatas1
|
||
: dropMenuDatas2
|
||
}
|
||
onDropMenuClick={e => this.handleMenuClick(e)}
|
||
>
|
||
<RadioGroupWrapper
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_RadioGroupWrapper@2kc6vr`}
|
||
/>
|
||
{pathname == 'basicConditionAnalysis' ? this.getTabPanes() : ''}
|
||
{pathname !== 'basicConditionAnalysis' ? (
|
||
<DataStatistics
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_DataStatistics@9vnmnn`}
|
||
countDatas={toJS(countDatas)}
|
||
pathname={pathname}
|
||
/>
|
||
) : (
|
||
''
|
||
)}
|
||
{pathname !== 'basicConditionAnalysis' ? this.getChart() : ''}
|
||
{this.getDeadline()}
|
||
</WeaTop>
|
||
|
||
<More
|
||
ecId={`${
|
||
(this && this.props && this.props.ecId) || ''
|
||
}_More@6dxvt0`}
|
||
title={hrmPerStatusReport.getChartTitle()}
|
||
visible={visible}
|
||
buttons={btn2}
|
||
onCancel={() => hrmPerStatusReport.setVisible(false)}
|
||
search={v => this.search(v)}
|
||
tableStore={tableStore}
|
||
loading={tableStore.loading}
|
||
strokeColor={'#6FBCEA'}
|
||
/>
|
||
|
||
<WeaDialog
|
||
onCancel={() =>hrmPerStatusReport.setDialogVisible(false)}
|
||
title={`明细数据（${name}）`}
|
||
visible={dialogVisible}
|
||
style={{ width: 1200, height: 450 }}
|
||
buttons={<Button type="primary" onClick={() => hrmPerStatusReport.exportExcel()}>导出明细</Button>}
|
||
>
|
||
<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@pgmg3x`}
|
||
comsWeaTableStore={tableStore}
|
||
hasOrder={true}
|
||
needScroll={true}
|
||
//getColumns={c => this.reRenderColumns(c)}
|
||
//onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
|
||
/>
|
||
</WeaDialog>
|
||
|
||
</WeaRightMenu>
|
||
</div>
|
||
</Spin>
|
||
</Authority>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default BasicConditionAnalysis
|