273 lines
10 KiB
JavaScript
273 lines
10 KiB
JavaScript
|
import React from 'react'
|
|||
|
|
import {inject,observer} from 'mobx-react';
|
|||
|
|
import {WeaAlertPage} from 'ecCom'
|
|||
|
|
import {
|
|||
|
|
WeaReportGroup,
|
|||
|
|
WeaTop,
|
|||
|
|
WeaTab,
|
|||
|
|
WeaRightMenu,
|
|||
|
|
WeaDialog,
|
|||
|
|
WeaInput,
|
|||
|
|
WeaFormItem,
|
|||
|
|
WeaTools,
|
|||
|
|
WeaRadioGroup,
|
|||
|
|
WeaNewScroll} from 'ecCom'
|
|||
|
|
import {Tabs,Button,Spin} from 'antd'
|
|||
|
|
import * as mobx from 'mobx';
|
|||
|
|
import { toJS } from 'mobx';
|
|||
|
|
import {WeaTableNew} from 'comsMobx';
|
|||
|
|
import '../../style/schedulediffreport.less';
|
|||
|
|
import {routerShape} from 'react-router';
|
|||
|
|
import debounce from 'lodash/debounce'
|
|||
|
|
const WeaTable = WeaTableNew.WeaTable;
|
|||
|
|
const TabPane = Tabs.TabPane;
|
|||
|
|
import * as Util from '../../util/index';
|
|||
|
|
import {i18n} from '../../public/i18n';
|
|||
|
|
import isEmpty from 'lodash/isEmpty';
|
|||
|
|
|
|||
|
|
@inject('hrmScheduleDiffReport')
|
|||
|
|
@observer
|
|||
|
|
class Main extends React.Component{
|
|||
|
|
static contextTypes = {
|
|||
|
|
router: routerShape
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props);
|
|||
|
|
const funcs = ['getReportData'];
|
|||
|
|
funcs.forEach(f=> this[f] = this[f].bind(this));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentDidMount() {
|
|||
|
|
const { hrmScheduleDiffReport } = this.props;
|
|||
|
|
this.init();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentWillReceiveProps(nextProps) {
|
|||
|
|
const { hrmScheduleDiffReport } = this.props;
|
|||
|
|
if(this.props.location.key !== nextProps.location.key) {
|
|||
|
|
this.init();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
init(){
|
|||
|
|
const { hrmScheduleDiffReport } = this.props;
|
|||
|
|
hrmScheduleDiffReport.getSearchCondition();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
doSearch(){
|
|||
|
|
const { hrmScheduleDiffReport } = this.props;
|
|||
|
|
hrmScheduleDiffReport.getData();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getRightMenu(){
|
|||
|
|
const { hrmScheduleDiffReport } = this.props;
|
|||
|
|
let btns =[];
|
|||
|
|
const btnImportExcel = {
|
|||
|
|
icon: <i className='icon-coms-export'/>,
|
|||
|
|
content:i18n.button.export()
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
btns.push(btnImportExcel);
|
|||
|
|
return btns;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onRightMenuClick(key){
|
|||
|
|
const { hrmScheduleDiffReport } = this.props;
|
|||
|
|
switch(key){
|
|||
|
|
case '0':
|
|||
|
|
hrmScheduleDiffReport.exportExcel();
|
|||
|
|
break;
|
|||
|
|
case '1':
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getTopButtons() {
|
|||
|
|
const { hrmScheduleDiffReport } = this.props;
|
|||
|
|
let btns =[];
|
|||
|
|
const btnExportExcel = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@mvi039`} type="primary" onClick={()=>hrmScheduleDiffReport.exportExcel()} >{i18n.button.export()}</Button>;
|
|||
|
|
btns.push(btnExportExcel);
|
|||
|
|
return btns;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getTableRow(){
|
|||
|
|
const { hrmScheduleDiffReport } = this.props;
|
|||
|
|
let {reportdata} = hrmScheduleDiffReport;
|
|||
|
|
reportdata = toJS(reportdata);
|
|||
|
|
let rows =[];
|
|||
|
|
!isEmpty(reportdata.titlerows) && reportdata.titlerows.forEach(row =>{
|
|||
|
|
let cells = [];
|
|||
|
|
!isEmpty(row) && row.forEach( cell => {
|
|||
|
|
cells.push(<td rowspan={cell.rowspan||''} colspan={cell.colspan||''}>{cell.value}</td>);
|
|||
|
|
})
|
|||
|
|
rows.push(<tr>{cells}</tr>);
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
!isEmpty(reportdata.datarows) && reportdata.datarows.forEach(row =>{
|
|||
|
|
let cells = [];
|
|||
|
|
!isEmpty(row) && row.forEach( cell => {
|
|||
|
|
cells.push(<td className="data" rowspan={cell.rowspan||''} colspan={cell.colspan||''}>{cell.value}</td>);
|
|||
|
|
})
|
|||
|
|
rows.push(<tr>{cells}</tr>);
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return rows;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getBtns() {
|
|||
|
|
return [
|
|||
|
|
(<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@v5h2ye@1`} onClick={()=>this.getDetial('SIGININ')}>{i18n.label.signInDetail()}</Button></span>),
|
|||
|
|
(<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ow43u4@2`} onClick={()=>this.getDetial('SIGINOUT')}>{i18n.label.signOutDetail()}</Button></span>),
|
|||
|
|
(<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ctyif4@3`} onClick={()=>this.getDetial('BELATE')}>{i18n.label.lateDetail()}</Button></span>),
|
|||
|
|
(<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@r96kmf@4`} onClick={()=>this.getDetial('LEAVEEARLY')}>{i18n.label.earlyRetreatDetail()}</Button></span>),
|
|||
|
|
(<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0axbot@5`} onClick={()=>this.getDetial('ABSENT')}>{i18n.label.absenteeismDetail()}</Button></span>),
|
|||
|
|
(<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@setpat@6`} onClick={()=>this.getDetial('NOSIGN')}>{i18n.label.leakageOfSignatureDetail()}</Button></span>),
|
|||
|
|
(<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@27dre2@7`} onClick={()=>this.getDetial('LEAVE')}>{i18n.label.leaveDetail()}</Button></span>),
|
|||
|
|
(<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yiwh81@8`} onClick={()=>this.getDetial('EVECTION')}>{i18n.label.businessTripDetail()}</Button></span>),
|
|||
|
|
(<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@id7mlt@9`} onClick={()=>this.getDetial('OUTDAYS')}>{i18n.label.publicDetail()}</Button></span>),
|
|||
|
|
(<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7s686q@10`} onClick={()=>this.getDetial('OVERTIME')}>{i18n.label.overtimeWorkDetail()}</Button></span>),
|
|||
|
|
(<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5o7cew@11`} onClick={()=>this.getDetial('OTHER')}>{i18n.label.attendanceAnomalyDetail()}</Button></span>)
|
|||
|
|
]
|
|||
|
|
return btns;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getDetialBtns() {
|
|||
|
|
const { hrmScheduleDiffReport } = this.props;
|
|||
|
|
let btns =[];
|
|||
|
|
const btnExportExcel = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@krzb1y`} type="primary" onClick={()=>hrmScheduleDiffReport.exportDetialExcel()} >{i18n.button.export()}</Button>;
|
|||
|
|
btns.push(btnExportExcel);
|
|||
|
|
return btns;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getDetailRightMenu = () => {
|
|||
|
|
const { hrmScheduleDiffReport } = this.props;
|
|||
|
|
let rightMenu = [];
|
|||
|
|
rightMenu.push({
|
|||
|
|
key: '1',
|
|||
|
|
content: i18n.button.export(),
|
|||
|
|
icon: <i className='icon-coms-export'/>,
|
|||
|
|
onClick: ()=>hrmScheduleDiffReport.exportDetialExcel()
|
|||
|
|
});
|
|||
|
|
return rightMenu;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getDetial(stsType){
|
|||
|
|
const { hrmScheduleDiffReport } = this.props;
|
|||
|
|
hrmScheduleDiffReport.stsType=stsType;
|
|||
|
|
hrmScheduleDiffReport.getTabTableData();
|
|||
|
|
hrmScheduleDiffReport.updateVisible(true);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getReportData(params){
|
|||
|
|
const { hrmScheduleDiffReport } = this.props;
|
|||
|
|
hrmScheduleDiffReport.getReportData(params);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render(){
|
|||
|
|
const { hrmScheduleDiffReport } = this.props;
|
|||
|
|
let { title,form,table, config, loading, reportdata,visible,dialogTitle, lastname,selectedKey,setSelectedKey,topTab} = hrmScheduleDiffReport;
|
|||
|
|
let qSize = reportdata.qSize;
|
|||
|
|
reportdata = toJS(reportdata);
|
|||
|
|
let cols =[];
|
|||
|
|
for(let i=0;i<qSize+13;i++){
|
|||
|
|
let width="6%";
|
|||
|
|
if(i==0||i==1)width="9%";
|
|||
|
|
cols.push(<col style={{width:width}} />);
|
|||
|
|
}
|
|||
|
|
return( <div className='wea-hrm-schedulediffreport'>
|
|||
|
|
<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ck6z5t`}
|
|||
|
|
visible={visible}
|
|||
|
|
onCancel={()=>hrmScheduleDiffReport.updateVisible(false)}
|
|||
|
|
onClo
|
|||
|
|
closable
|
|||
|
|
style={{width: 900, height: window.innerHeight-250>500?500:window.innerHeight-250}}
|
|||
|
|
title = {dialogTitle}
|
|||
|
|
icon="icon-coms-hrm"
|
|||
|
|
iconBgcolor='#217346'
|
|||
|
|
buttons = {this.getDetialBtns()}
|
|||
|
|
moreBtn={{datas: this.getDetailRightMenu()}}
|
|||
|
|
>
|
|||
|
|
{/* <WeaTab
|
|||
|
|
searchType={['base']}
|
|||
|
|
searchsBaseValue={lastname}
|
|||
|
|
onSearch={v => {hrmScheduleDiffReport.getTableData()}}
|
|||
|
|
onSearchChange={v => {
|
|||
|
|
hrmScheduleDiffReport.lastname = v;
|
|||
|
|
}}
|
|||
|
|
/> */}
|
|||
|
|
{!isEmpty(topTab) &&
|
|||
|
|
<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@t9875j`}
|
|||
|
|
datas={topTab}
|
|||
|
|
keyParam="key" //主键
|
|||
|
|
selectedKey={selectedKey}
|
|||
|
|
onChange={key => setSelectedKey(key)}
|
|||
|
|
/>
|
|||
|
|
}
|
|||
|
|
<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@ogbqtr`} height={window.innerHeight-250>500?500:window.innerHeight-250} ref="scrollBar">
|
|||
|
|
<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@hbn1eb`}
|
|||
|
|
comsWeaTableStore={table}
|
|||
|
|
/>
|
|||
|
|
</WeaNewScroll>
|
|||
|
|
</WeaDialog>
|
|||
|
|
<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@5tcs7x`} spinning={loading}>
|
|||
|
|
<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@xlbh1j`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)}>
|
|||
|
|
<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@jryjcl`}
|
|||
|
|
title={title()}
|
|||
|
|
loading={false}
|
|||
|
|
icon={<i className='icon-coms-hrm' />}
|
|||
|
|
iconBgcolor='#217346'
|
|||
|
|
buttons={this.getTopButtons()}
|
|||
|
|
buttonSpace={10}
|
|||
|
|
showDropIcon={true}
|
|||
|
|
dropMenuDatas={this.getRightMenu()}
|
|||
|
|
onDropMenuClick={this.onRightMenuClick.bind(this)}
|
|||
|
|
>
|
|||
|
|
<div className="content">
|
|||
|
|
<div className='wea-hrm-schedulediffreport-condition'>
|
|||
|
|
{
|
|||
|
|
!isEmpty(config) && <WeaRadioGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaRadioGroup@70narl`} config={config} onChange={debounce(this.getReportData.bind(this),150)}/>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
{
|
|||
|
|
!isEmpty(reportdata) &&
|
|||
|
|
<div className='wea-hrm-schedulediffreport-content'>
|
|||
|
|
<table className='wea-hrm-schedulediffreport-table'>
|
|||
|
|
<colgroup>
|
|||
|
|
{cols}
|
|||
|
|
</colgroup>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td className="title" colspan={qSize+13}>{reportdata.title}</td>
|
|||
|
|
</tr>
|
|||
|
|
{this.getTableRow()}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<table border="0" width="100%">
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td align="right" style={{height:50}}>{i18n.label.reportDate()}：{Util.DateFormat(new Date(), "yyyy-MM-dd") }</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
{
|
|||
|
|
!isEmpty(reportdata) &&<div className='wea-hrm-schedulediffreport-foot'>
|
|||
|
|
<table className='table-foot' border="0" width="100%">
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>{this.getBtns()}</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
</WeaTop>
|
|||
|
|
</WeaRightMenu>
|
|||
|
|
</Spin>
|
|||
|
|
</div> );
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
export default Main
|