451 lines
13 KiB
JavaScript
451 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 = {() => 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
|
|
} = 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={'明细数据'}
|
|
visible={dialogVisible}
|
|
style={{ width: 800, height: 500 }}
|
|
hasScroll
|
|
buttons={<Button type="primary">导出明细</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
|