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 |