775 lines
30 KiB
JavaScript
775 lines
30 KiB
JavaScript
|
import React from 'react';
|
|||
|
|
import {
|
|||
|
|
inject,
|
|||
|
|
observer
|
|||
|
|
} from 'mobx-react';
|
|||
|
|
import {
|
|||
|
|
WeaTop,
|
|||
|
|
WeaTab,
|
|||
|
|
WeaOrgTree,
|
|||
|
|
WeaLeftRightLayout,
|
|||
|
|
WeaEchart,
|
|||
|
|
WeaYear,
|
|||
|
|
WeaDialog,
|
|||
|
|
WeaPopoverHrm,
|
|||
|
|
WeaRightMenu,
|
|||
|
|
WeaTools,
|
|||
|
|
WeaErrorPage,
|
|||
|
|
WeaAlertPage,
|
|||
|
|
WeaDatePicker,
|
|||
|
|
WeaBrowser,
|
|||
|
|
WeaNewScroll
|
|||
|
|
} from 'ecCom';
|
|||
|
|
import {
|
|||
|
|
WeaTableNew
|
|||
|
|
} from 'comsMobx';
|
|||
|
|
const WeaTable = WeaTableNew.WeaTable;
|
|||
|
|
import {
|
|||
|
|
Modal,
|
|||
|
|
Row,
|
|||
|
|
Col,
|
|||
|
|
Button,
|
|||
|
|
Spin,
|
|||
|
|
Icon,
|
|||
|
|
Calendar,
|
|||
|
|
Tooltip,
|
|||
|
|
Timeline
|
|||
|
|
} from 'antd';
|
|||
|
|
import '../style/checking.less';
|
|||
|
|
import * as mobx from 'mobx';
|
|||
|
|
import isEmpty from 'lodash/isEmpty';
|
|||
|
|
import cloneDeep from 'lodash/cloneDeep';
|
|||
|
|
import toString from 'lodash/toString';
|
|||
|
|
import moment from 'moment';
|
|||
|
|
import debounce from 'lodash/debounce'
|
|||
|
|
import * as Util from '../util/index';
|
|||
|
|
import {
|
|||
|
|
win32
|
|||
|
|
} from 'path';
|
|||
|
|
import {
|
|||
|
|
i18n
|
|||
|
|
} from '../public/i18n';
|
|||
|
|
import {
|
|||
|
|
WeaLocaleProvider
|
|||
|
|
} from 'ecCom';
|
|||
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|||
|
|
const toJS = mobx.toJS;
|
|||
|
|
|
|||
|
|
@inject('hrmOldChecking')
|
|||
|
|
@observer
|
|||
|
|
class main extends React.Component {
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props);
|
|||
|
|
this.state = {
|
|||
|
|
iWidth: window.innerWidth,
|
|||
|
|
oHeight: 300
|
|||
|
|
}
|
|||
|
|
if (window.innerHeight > 850) {
|
|||
|
|
this.state.oHeight = 450;
|
|||
|
|
} else if (window.innerHeight > 600) {
|
|||
|
|
this.state.oHeight = window.innerHeight / 2 - 100;
|
|||
|
|
} else {
|
|||
|
|
this.state.oHeight = 200;
|
|||
|
|
}
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
hrmOldChecking.init();
|
|||
|
|
}
|
|||
|
|
componentDidMount() {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
hrmOldChecking.hrmId = this.props.params.hrmId || '';
|
|||
|
|
this.getData();
|
|||
|
|
hrmOldChecking.getHrmNewWorkflwList();
|
|||
|
|
//document.title = hrmOldChecking.title;
|
|||
|
|
|
|||
|
|
//窗口大小变化
|
|||
|
|
jQuery(window).resize(() => {
|
|||
|
|
this.setState({
|
|||
|
|
iWidth: window.innerWidth
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentWillReceiveProps(nextProps) {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
if (this.props.location.key !== nextProps.location.key) {
|
|||
|
|
hrmOldChecking.init();
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
getData = () => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
const {
|
|||
|
|
tabkey
|
|||
|
|
} = hrmOldChecking;
|
|||
|
|
hrmOldChecking.getData(() => {
|
|||
|
|
tabkey == 1 && this.refs.chart && this.refs.chart.paint();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getRightMenu = () => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
let btns = [];
|
|||
|
|
btns.push({
|
|||
|
|
key: "add",
|
|||
|
|
icon: <i className='icon-coms-workflow'/>,
|
|||
|
|
content: getLabel('385037', "新建考勤流程"),
|
|||
|
|
onClick: key => {
|
|||
|
|
this.addChecking();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return btns;
|
|||
|
|
}
|
|||
|
|
addChecking = () => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
hrmOldChecking.updateNewVisible(true);
|
|||
|
|
}
|
|||
|
|
getTopButtons = () => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
let btns = [];
|
|||
|
|
btns.push(
|
|||
|
|
<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@avkel6@1`} type="primary" onClick={()=>this.addChecking()} >{getLabel('385037',"新建考勤流程")}</Button>
|
|||
|
|
);
|
|||
|
|
return btns;
|
|||
|
|
}
|
|||
|
|
chooseUser = (e) => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
let hrmId = '',
|
|||
|
|
hrmName = undefined;
|
|||
|
|
if (e.selected) {
|
|||
|
|
hrmId = e.node.props.id;
|
|||
|
|
hrmName = e.node.props.name;
|
|||
|
|
}
|
|||
|
|
if (hrmId) {
|
|||
|
|
hrmOldChecking.updateHrmId(hrmId);
|
|||
|
|
if (hrmName) hrmOldChecking.updateHrmName(hrmName);
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
changeUserRoot = (ids, names, datas) => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
hrmOldChecking.updateUserRoot(datas);
|
|||
|
|
}
|
|||
|
|
resetUserRoot = () => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
hrmOldChecking.updateUserRoot();
|
|||
|
|
hrmOldChecking.updateHrmId();
|
|||
|
|
hrmOldChecking.updateHrmName();
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
changeTab = (key) => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
hrmOldChecking.changeTabHandler(key);
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
changeDateTab = (key) => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
hrmOldChecking.changeDateTabHandler(key);
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
reFresh = () => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
changeDate = (v) => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
const {
|
|||
|
|
dateTabkey
|
|||
|
|
} = hrmOldChecking;
|
|||
|
|
if (dateTabkey == '2') {
|
|||
|
|
v = new moment(v).format('YYYY-MM');
|
|||
|
|
} else {
|
|||
|
|
v = new moment(v).format('YYYY');
|
|||
|
|
}
|
|||
|
|
hrmOldChecking.changeDateHandler(v);
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
handlerStatusClick = (item) => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
hrmOldChecking.handlerStatusClick(item.type);
|
|||
|
|
}
|
|||
|
|
renderLeft = () => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
const {
|
|||
|
|
oHeight
|
|||
|
|
} = this.state;
|
|||
|
|
let {
|
|||
|
|
tabkey,
|
|||
|
|
leftTitle,
|
|||
|
|
userRoot
|
|||
|
|
} = hrmOldChecking;
|
|||
|
|
userRoot = toJS(userRoot);
|
|||
|
|
const hrmId = this.props.params.hrmId || '';
|
|||
|
|
let org = <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@5zeki5`} dataUrl="/api/hrm/base/getHrmResourceTree" rootKey="rootManager"
|
|||
|
|
treeNodeClick={this.chooseUser}
|
|||
|
|
params={Array.isArray(userRoot) && userRoot[0] ? {rootid: userRoot[0].id} : {rootid:hrmId}}
|
|||
|
|
/>
|
|||
|
|
return <div className="wea-hrm-checking-left" style={{height: window.innerHeight - 125}}>
|
|||
|
|
<div className="left-header">
|
|||
|
|
<div className="header-title bb align-center">
|
|||
|
|
{getLabel('32997',"人员组织")}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="left-body">
|
|||
|
|
<WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@6uzr3s`} isSingle={true}
|
|||
|
|
linkUrl="/hrm/resource/HrmResource.jsp?id=" title={getLabel('179',"人力资源")} type="1" viewAttr="2"
|
|||
|
|
replaceDatas={userRoot}
|
|||
|
|
customIcon="icon-coms-Reset"
|
|||
|
|
addOnClick={this.resetUserRoot}
|
|||
|
|
onChange={this.changeUserRoot}
|
|||
|
|
/>
|
|||
|
|
{
|
|||
|
|
tabkey === '1'?
|
|||
|
|
<div style={{height: window.innerHeight - 235}}>
|
|||
|
|
{org}
|
|||
|
|
</div>:
|
|||
|
|
<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@4r111k`} height={oHeight} className="left-checking">
|
|||
|
|
{org}
|
|||
|
|
</WeaNewScroll>
|
|||
|
|
}
|
|||
|
|
{
|
|||
|
|
tabkey === '2' && this.renderDetail()
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
// 截取很magic的a标签数据
|
|||
|
|
sliceA = (str) => {
|
|||
|
|
if (str.indexOf('a>') > -1 && str.indexOf('<a') > -1) {
|
|||
|
|
str = str.match(/\>(.+)</)[1];
|
|||
|
|
}
|
|||
|
|
return str
|
|||
|
|
}
|
|||
|
|
renderDetail = () => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
const {
|
|||
|
|
oHeight
|
|||
|
|
} = this.state;
|
|||
|
|
let {
|
|||
|
|
calendarCheckedDay,
|
|||
|
|
calendarData
|
|||
|
|
} = hrmOldChecking;
|
|||
|
|
calendarData = toJS(calendarData);
|
|||
|
|
if (calendarCheckedDay) {
|
|||
|
|
let data = calendarData[calendarCheckedDay];
|
|||
|
|
return <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@mkdq0p`} height={window.innerHeight - 200 - oHeight} className="bt">
|
|||
|
|
<div className="detail-wrapper">
|
|||
|
|
<strong className="detail-header">
|
|||
|
|
<i className="icon-coms-New-schedule" />
|
|||
|
|
{data.date} {getLabel('20080',"考勤情况")}
|
|||
|
|
</strong>
|
|||
|
|
{isEmpty(data.signInfo) && <div className="empty align-center">{getLabel('386472',"当天没有考勤数据")}</div>}
|
|||
|
|
{!isEmpty(data.signInfo) && <Timeline ecId={`${this && this.props && this.props.ecId || ''}_Timeline@14di4e`}>
|
|||
|
|
{
|
|||
|
|
data.signInfo.map((i, index) => {
|
|||
|
|
return <Timeline.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@j1gd69@${index}`}>
|
|||
|
|
{
|
|||
|
|
i.item && i.item.map((d)=> {
|
|||
|
|
return <div className="item">
|
|||
|
|
<span className="title">{d.title}</span> :
|
|||
|
|
<span className="value">{this.sliceA(d.value)}</span></div>
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</Timeline.Item>
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</Timeline>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</WeaNewScroll>
|
|||
|
|
}
|
|||
|
|
return <div className="detail-wrapper align-center bt">
|
|||
|
|
<span>{getLabel('386473',"点击日历查看每天考勤情况")}</span>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getLocale = () => {
|
|||
|
|
return {
|
|||
|
|
firstDayOfWeek: 0,
|
|||
|
|
lang: {
|
|||
|
|
format: {
|
|||
|
|
eras: [getLabel(383357, "公元前"), getLabel(383358, "公元")],
|
|||
|
|
months: [getLabel(1492, "一月"), getLabel(1493, "二月"), getLabel(383385, "三月"), getLabel(383387, "四月"), getLabel(1496, "五月"), getLabel(383392, "六月"),
|
|||
|
|
getLabel(383393, "七月"), getLabel(383394, "八月"), getLabel(383395, "九月"), getLabel(383396, "十月"), getLabel(383397, "十一月"), getLabel(383398, "十二月")
|
|||
|
|
],
|
|||
|
|
shortMonths: [getLabel(1492, "一月"), getLabel(1493, "二月"), getLabel(383385, "三月"), getLabel(383387, "四月"), getLabel(1496, "五月"), getLabel(383392, "六月"),
|
|||
|
|
getLabel(383393, "七月"), getLabel(383394, "八月"), getLabel(383395, "九月"), getLabel(383396, "十月"), getLabel(383397, "十一月"), getLabel(383398, "十二月")
|
|||
|
|
],
|
|||
|
|
weekdays: [getLabel(24626, "星期天"), getLabel(383399, "星期一"), getLabel(383400, "星期二"), getLabel(383402, "星期三"), getLabel(383403, "星期四"),
|
|||
|
|
getLabel(383404, "星期五"), getLabel(383405, "星期六")
|
|||
|
|
],
|
|||
|
|
shortWeekdays: [getLabel(16106, "周日"), getLabel(16100, "周一"), getLabel(16101, "周二"), getLabel(16102, "周三"), getLabel(16103, "周四"), getLabel(16104, "周五"),
|
|||
|
|
getLabel(16105, "周六")
|
|||
|
|
],
|
|||
|
|
veryShortWeekdays: [getLabel(16106, "周日"), getLabel(16100, "周一"), getLabel(16101, "周二"), getLabel(16102, "周三"), getLabel(16103, "周四"), getLabel(16104, "周五"), getLabel(16105, "周六")],
|
|||
|
|
ampms: [getLabel(383408, "上午"), getLabel(383409, "下午")],
|
|||
|
|
datePatterns: [`yyyy'${getLabel(383372,"年")}'M'${getLabel(383373,"月")}'d'${getLabel(383374,"日")}' EEEE`, `yyyy'${getLabel(383372,"年")}'M'${getLabel(383373,"月")}'d'${getLabel(383374,"日")}'`, "yyyy-M-d", "yy-M-d"],
|
|||
|
|
timePatterns: [`ahh'${getLabel(383411,"时")}'mm'${getLabel(383412,"分")}'ss'${getLabel(383414,"秒")}' 'GMT'Z`, `ahh'${getLabel(383411,"时")}'mm'${getLabel(383412,"分")}'ss'${getLabel(383414,"秒")}'`, "H:mm:ss", "ah:mm"],
|
|||
|
|
dateTimePattern: '{date} {time}'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getTipText = (data) => {
|
|||
|
|
return <div>
|
|||
|
|
<div dangerouslySetInnerHTML={{__html: data.title}}></div>
|
|||
|
|
<div>{getLabel('24979',"开始时间")}： {data.start}</div>
|
|||
|
|
<div>{getLabel('743',"结束时间")}： {data.end}</div>
|
|||
|
|
{data.type && <div>{getLabel('500401',"类型")}： {data.type}</div>}
|
|||
|
|
<div>{data.workflowtype=='OVERTIME'?getLabel('132055',"时长（小时）"):getLabel('132014',"时长（天）")}： {data.count}</div>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
onMonthSelect = (date) => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
let {
|
|||
|
|
dateTabkey,
|
|||
|
|
pDate
|
|||
|
|
} = hrmOldChecking;
|
|||
|
|
let select = new moment(date.time).format('YYYY-MM');
|
|||
|
|
if (pDate.slice(0, 7) == select) {
|
|||
|
|
hrmOldChecking.updateCalendarCheckedDay(date.getDayOfMonth());
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
onyearMonthSelect = (date) => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
let select = new moment(date.time).format('YYYY-MM');
|
|||
|
|
hrmOldChecking.changeDateHandler(select);
|
|||
|
|
hrmOldChecking.updateDateTabkey('2');
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
monthDateCellRender = (date) => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
let {
|
|||
|
|
dateTabkey,
|
|||
|
|
pDate,
|
|||
|
|
calendarData,
|
|||
|
|
statusActiveType
|
|||
|
|
} = hrmOldChecking;
|
|||
|
|
calendarData = toJS(calendarData);
|
|||
|
|
let select = new moment(date.time).format('YYYY-MM');
|
|||
|
|
if (pDate.slice(0, 7) == select) {
|
|||
|
|
let day = date.getDayOfMonth();
|
|||
|
|
const data = calendarData[day];
|
|||
|
|
if (data && (data.types.indexOf(statusActiveType) > -1 || statusActiveType == 'ALL' || data.types.indexOf('NORMAL') > -1)) {
|
|||
|
|
return (
|
|||
|
|
<div className="calendar-item">
|
|||
|
|
<span className="icon-wrapper">
|
|||
|
|
{
|
|||
|
|
data.types && data.types.map((type, idx)=> {
|
|||
|
|
if (idx > 4) return;
|
|||
|
|
const ic = Util.getIconColor(type);
|
|||
|
|
if (type == statusActiveType || statusActiveType == 'ALL') {
|
|||
|
|
return <i className={`${ic.icon}`} style={{color: ic.color, marginRight: 2}} title={ic.name}>
|
|||
|
|
<span className="path1"></span>
|
|||
|
|
<span className="path2"></span>
|
|||
|
|
<span className="path3"></span>
|
|||
|
|
<span className="path4"></span>
|
|||
|
|
</i>
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</span>
|
|||
|
|
<span className="tip" style={{color: data.isWorkDay?'#FF1B10':'#1B9B12'}}>{data.tip}</span>
|
|||
|
|
<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@yy7p26`} height={85}>
|
|||
|
|
{
|
|||
|
|
data.workflow && data.workflow.map((item, index)=> {
|
|||
|
|
if (item.workflowtype == statusActiveType || statusActiveType == 'ALL') {
|
|||
|
|
const ic = Util.getIconColor(item.workflowtype);
|
|||
|
|
return <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@h7j0dw@${index}`} placement="right" title={this.getTipText(item)}>
|
|||
|
|
<div className='workflow-item' style={{backgroundColor: ic.bcolor}}>
|
|||
|
|
<div className="text-overflow" dangerouslySetInnerHTML={{__html: item.title}} style={{color: ic.color}}></div>
|
|||
|
|
</div>
|
|||
|
|
</Tooltip>
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</WeaNewScroll>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
yearDateCellRender = (date) => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
let {
|
|||
|
|
dateTabkey,
|
|||
|
|
pDate,
|
|||
|
|
yearData,
|
|||
|
|
statusActiveType
|
|||
|
|
} = hrmOldChecking;
|
|||
|
|
yearData = toJS(yearData);
|
|||
|
|
const d = date.getDayOfMonth();
|
|||
|
|
const m = date.getMonth() + 1;
|
|||
|
|
let data = {},
|
|||
|
|
ic = undefined;
|
|||
|
|
if (yearData !== undefined && !isEmpty(yearData)) {
|
|||
|
|
data = yearData[m][d];
|
|||
|
|
try {
|
|||
|
|
if (data.type !== 'NORMAL') ic = Util.getIconColor(data.type);
|
|||
|
|
} catch (e) {
|
|||
|
|
return <div className="date-item">{d}</div>
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
let content;
|
|||
|
|
if (ic && (statusActiveType == data.type || statusActiveType == 'ALL')) {
|
|||
|
|
content = <span><i className={`${ic.icon}`} style={{color: ic.color}}>
|
|||
|
|
<span className="path1"></span>
|
|||
|
|
<span className="path2"></span>
|
|||
|
|
<span className="path3"></span>
|
|||
|
|
<span className="path4"></span>
|
|||
|
|
</i>
|
|||
|
|
{data.tip && <span className="tip" style={{color: data.isWorkDay?'#FF1B10':'#1B9B12'}}>{data.tip}</span>}
|
|||
|
|
</span>
|
|||
|
|
} else {
|
|||
|
|
content = <span>
|
|||
|
|
{data.tip && <span className="tip" style={{color: data.isWorkDay?'#FF1B10':'#1B9B12'}}>{data.tip}</span>}
|
|||
|
|
{d}
|
|||
|
|
</span>
|
|||
|
|
}
|
|||
|
|
return <div className="date-item">
|
|||
|
|
{content}
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
renderCalendar = () => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
let {
|
|||
|
|
dateTabkey,
|
|||
|
|
pDate,
|
|||
|
|
pDate1
|
|||
|
|
} = hrmOldChecking;
|
|||
|
|
return <div className="calendar-wrapper">
|
|||
|
|
{dateTabkey == '2' &&
|
|||
|
|
<Calendar ecId={`${this && this.props && this.props.ecId || ''}_Calendar@zf2tig`}
|
|||
|
|
mode="month"
|
|||
|
|
dateCellRender={this.monthDateCellRender}
|
|||
|
|
locale={this.getLocale()}
|
|||
|
|
onSelect={this.onMonthSelect}
|
|||
|
|
value={new Date(pDate)}
|
|||
|
|
/>
|
|||
|
|
}
|
|||
|
|
{dateTabkey == '1' &&
|
|||
|
|
<WeaYear ecId={`${this && this.props && this.props.ecId || ''}_WeaYear@455zd2`} value={pDate1}
|
|||
|
|
dateCellRender={this.yearDateCellRender}
|
|||
|
|
onMonthSelect={this.onyearMonthSelect}
|
|||
|
|
/>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onStsClick = (item) => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
if (parseFloat(item.value) > 0) {
|
|||
|
|
hrmOldChecking.updateStsType(item.type);
|
|||
|
|
hrmOldChecking.getTableData();
|
|||
|
|
hrmOldChecking.updateVisible(true);
|
|||
|
|
} else {
|
|||
|
|
const content = getLabel('386474', "本月没有{params}数据！").replace('{params}', item.title);
|
|||
|
|
Modal.warning({
|
|||
|
|
title: i18n.confirm.defaultTitle(),
|
|||
|
|
content,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
renderStatistics = () => {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
const {
|
|||
|
|
iWidth
|
|||
|
|
} = this.state;
|
|||
|
|
let {
|
|||
|
|
chartOptions,
|
|||
|
|
groupitem2,
|
|||
|
|
groupitem3,
|
|||
|
|
groupitem4,
|
|||
|
|
count
|
|||
|
|
} = hrmOldChecking;
|
|||
|
|
chartOptions = toJS(chartOptions);
|
|||
|
|
groupitem4 = toJS(groupitem4);
|
|||
|
|
groupitem3 = toJS(groupitem3);
|
|||
|
|
groupitem2 = toJS(groupitem2);
|
|||
|
|
return (
|
|||
|
|
<div style={{minWidth: 860}}>
|
|||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@uwldcv`} className="statistics-wrapper">
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@t7s9mq`} span={8} className="chart-wrapper">
|
|||
|
|
<div className="chart-content">
|
|||
|
|
<div className="statistics-title bb">{getLabel('16732',"出勤统计")}</div>
|
|||
|
|
<div className="echart-item">
|
|||
|
|
<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@hyedqt`} style={{height: 160, width: 160, display: 'inline-block'}}
|
|||
|
|
ref="chart" option={chartOptions} useDefault={false}/>
|
|||
|
|
</div>
|
|||
|
|
<div className="echart-count">
|
|||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0pq0qp`}>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@d7sjb6`} span={12} className="number align-center cursor-pointer" style={{color: chartOptions.series[0].color[1]}} onClick={()=>this.onStsClick(chartOptions.series[0].data[1])}>{!isEmpty(chartOptions.series[0].data) && chartOptions.series[0].data[1].value} </Col>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@mezh5d`} span={12} className="number align-center cursor-pointer" style={{color: chartOptions.series[0].color[0]}} onClick={()=>this.onStsClick(chartOptions.series[0].data[0])}>{!isEmpty(chartOptions.series[0].data) && chartOptions.series[0].data[0].value} </Col>
|
|||
|
|
</Row>
|
|||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@c7pcue`}>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@47bnk5`} span={12} className="align-center">
|
|||
|
|
<span className="dot mr15" style={{backgroundColor: chartOptions.series[0].color[1]}}></span>
|
|||
|
|
<span className="">{!isEmpty(chartOptions.series[0].data) && chartOptions.series[0].data[1].name}（{i18n.label.day()}）</span>
|
|||
|
|
</Col>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3pj3uk`} span={12} className="align-center">
|
|||
|
|
<span className="dot mr15" style={{backgroundColor: chartOptions.series[0].color[0]}}></span>
|
|||
|
|
<span className="">{!isEmpty(chartOptions.series[0].data) && chartOptions.series[0].data[0].name}（{i18n.label.day()}）</span>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@dzmm1o`} span={16} className="abnormal-wrapper">
|
|||
|
|
<div className="statistics-title bb">{getLabel('132057',"异常考勤汇总")}</div>
|
|||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ps73j7`}>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@99rsef`} span={18} className="left br" style={{ paddingTop: iWidth >= 1684? 40: 10}}>
|
|||
|
|
{
|
|||
|
|
groupitem2 && groupitem2.map((d, i)=> {
|
|||
|
|
return <div className="item cursor-pointer" onClick={()=>this.onStsClick(d)}>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@aru0uq@${i}`} span={8}>
|
|||
|
|
<div className="icon-wrapper" style={{backgroundColor: d.color}}>
|
|||
|
|
<i className={d.icon}/>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@waaaj0@${i}`} span={16} className="message">
|
|||
|
|
<div className="information">{d.value}</div>
|
|||
|
|
<div>{d.title}{d.type=="OVERTIME"?`(${i18n.label.hour()})`:`(${i18n.label.day()})`}</div>
|
|||
|
|
</Col>
|
|||
|
|
</div>
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</Col>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jyz6kv`} span={6} className="right">
|
|||
|
|
{
|
|||
|
|
groupitem3 && groupitem3.map((d, i)=> {
|
|||
|
|
return <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@kmw1aq@${i}`} className="cursor-pointer" onClick={()=>this.onStsClick(d)}>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@mjmex3@${i}`} span={8} className="information" style={{textAlign:'left',paddingLeft:'30px'}}>{d.value}</Col>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@5gzurq@${i}`} span={16} style={{textAlign:'left',paddingLeft:'15px'}}>{d.title}</Col>
|
|||
|
|
</Row>
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@bu14i8`} gutter = {36} className="detail">
|
|||
|
|
{
|
|||
|
|
groupitem4 && groupitem4.map((d, i)=> {
|
|||
|
|
return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vg0d86@${i}`} span={8} style={{marginBottom: 20}}>
|
|||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@tptk22@${i}`} className="detail-title" title={d.title}>
|
|||
|
|
{d.title}</Row>
|
|||
|
|
<div className="detail-body">
|
|||
|
|
{
|
|||
|
|
d.item.map((i, index)=> {
|
|||
|
|
return <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@2d9g1v@${index}`}>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7wx5o9@${index}`} span={20} title={i.title}>{i.title}</Col>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zykqvx@${index}`} span={4} title={i.value}>{i.value}</Col>
|
|||
|
|
</Row>
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
onOperatesClick = (record, index, operate, flag, argumentString) => {
|
|||
|
|
if (toJS(operate) && toJS(operate).href.indexOf('addChecking') > -1) {
|
|||
|
|
this.addChecking();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getBtns = () => {
|
|||
|
|
let btns = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dv0r5u@1`} onClick={()=>console.log("more")} >{i18n.button.more()}</Button>];
|
|||
|
|
return btns;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
const {
|
|||
|
|
hrmOldChecking
|
|||
|
|
} = this.props;
|
|||
|
|
const {
|
|||
|
|
getStatusList,
|
|||
|
|
statusActiveType,
|
|||
|
|
tabDatas,
|
|||
|
|
tabkey,
|
|||
|
|
dateTabDatas,
|
|||
|
|
dateTabkey,
|
|||
|
|
pDate,
|
|||
|
|
hasRight,
|
|||
|
|
leftTitle,
|
|||
|
|
hrmName,
|
|||
|
|
loading,
|
|||
|
|
newVisible,
|
|||
|
|
visible,
|
|||
|
|
table
|
|||
|
|
} = hrmOldChecking;
|
|||
|
|
let {
|
|||
|
|
newWorklist
|
|||
|
|
} = hrmOldChecking;
|
|||
|
|
newWorklist = toJS(newWorklist);
|
|||
|
|
const statusList = getStatusList();
|
|||
|
|
const {
|
|||
|
|
query
|
|||
|
|
} = this.props.location;
|
|||
|
|
const getMsg = (name) => {
|
|||
|
|
const content = getLabel('386475', "您无权查看 {params} 的考勤数据！").replace('{params}', name);
|
|||
|
|
return content;
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<div className="wea-hrm-checking">
|
|||
|
|
<WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@vphkfx`} />
|
|||
|
|
<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@8zgzrw`}
|
|||
|
|
visible={visible}
|
|||
|
|
onCancel={()=>hrmOldChecking.updateVisible(false)}
|
|||
|
|
closable
|
|||
|
|
style={{width: 900, height: window.innerHeight-250>500?500:window.innerHeight-250}}
|
|||
|
|
title = {getLabel('386477',"考勤明细")}
|
|||
|
|
icon="icon-coms-hrm"
|
|||
|
|
iconBgcolor='#217346'
|
|||
|
|
moreBtn={{datas:[]}}
|
|||
|
|
>
|
|||
|
|
<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@p46r5s`} height={window.innerHeight-250>500?500:window.innerHeight-250} ref="scrollBar">
|
|||
|
|
<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@45kkjn`}
|
|||
|
|
comsWeaTableStore={table}
|
|||
|
|
hasOrder={true}
|
|||
|
|
needScroll={true}
|
|||
|
|
onOperatesClick={this.onOperatesClick}
|
|||
|
|
/>
|
|||
|
|
</WeaNewScroll>
|
|||
|
|
</WeaDialog>
|
|||
|
|
<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@e0k2op`}
|
|||
|
|
visible={newVisible}
|
|||
|
|
className="new-hrm-workflow"
|
|||
|
|
onCancel={()=>hrmOldChecking.updateNewVisible(false)}
|
|||
|
|
closable
|
|||
|
|
style={{width: 600, height: 400}}
|
|||
|
|
title = {getLabel('385037',"新建考勤流程")}
|
|||
|
|
icon="icon-portal-workflow"
|
|||
|
|
iconBgcolor='#0079de'
|
|||
|
|
>
|
|||
|
|
<div className="new-hrm-workflow-body">
|
|||
|
|
<div className="new-hrm-workflow-wrapper">
|
|||
|
|
<div className="hearder"><i className="icon-coms-hrm"/>{getLabel('15882',"人事管理")}<span>(</span>{newWorklist.length}<span>)</span></div>
|
|||
|
|
<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@y66kpb`} height={270}>
|
|||
|
|
{
|
|||
|
|
!isEmpty(newWorklist) && newWorklist.map((item)=> {
|
|||
|
|
return <div className="cursor-pointer item" onClick={()=> {hrmOldChecking.handlerNewWorkflow(item)}}>{item.title}</div>
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</WeaNewScroll>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</WeaDialog>
|
|||
|
|
<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@yw9iss`} spining={loading}>
|
|||
|
|
<div style={query.fromcard? {display:'none'} : {display:''}}>
|
|||
|
|
<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@r5ckz8`}
|
|||
|
|
title={`${hrmName || `'${getLabel('130758',"我")}'`}${getLabel('125404',"的考勤")}`}
|
|||
|
|
icon={<i className='icon-coms-hrm'/>}
|
|||
|
|
iconBgcolor='#217346'
|
|||
|
|
buttons={this.getTopButtons()}
|
|||
|
|
buttonSpace={10}
|
|||
|
|
showDropIcon={true}
|
|||
|
|
dropMenuDatas={this.getRightMenu()}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
{this.renderLeft()}
|
|||
|
|
<div style={{width: '100%', paddingLeft: 221}}>
|
|||
|
|
<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@7v4mva`}
|
|||
|
|
selectedKey={tabkey}
|
|||
|
|
keyParam='key'
|
|||
|
|
datas={[{title:getLabel('16558',"考勤统计"),key:"1"},{title:getLabel('386476',"考勤日历"),key:"2"}]}
|
|||
|
|
onChange={this.changeTab}
|
|||
|
|
/>
|
|||
|
|
<div className="picker-wrapper checking icon-cls">
|
|||
|
|
<div style={{width: 140, paddingLeft: 10, display:'none'}} className="text-overflow" title={hrmName} >{leftTitle} : {hrmName}</div>
|
|||
|
|
{[{title: i18n.label.year(),key:"1"}, {title: i18n.label.month() ,key:"2"}].map((item)=> {
|
|||
|
|
return <div span={1} onClick={this.changeDateTab.bind(this, item.key)} className={`cursor-pointer date-item ${item.key===dateTabkey?'active':'' }`}>
|
|||
|
|
{item.title}
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
)}
|
|||
|
|
<WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@kmnk8j`} arrow type={dateTabkey == '1' ? 'year': 'month'} date={pDate} onChange={this.changeDate}/>
|
|||
|
|
<span className="icon-coms-Refresh cursor-pointer" style={{left: dateTabkey=='1'?96: 120}} onClick={this.reFresh}/>
|
|||
|
|
{
|
|||
|
|
tabkey == '2' && <div className="status-info clearfix" style={{maxWidth: tabkey==2?window.innerWidth -700:window.innerWidth -900, float: 'right'}}>
|
|||
|
|
{
|
|||
|
|
statusList && statusList.map((item)=> {
|
|||
|
|
return <span className={`item cursor-pointer ${item.type == statusActiveType?'active':''}`} style={{width: window.e9_locale.userLanguage === 8 && 60}} onClick={()=> this.handlerStatusClick(item)} title={item.title}>
|
|||
|
|
<i className={`${item.icon}`} style={{color: item.color}}>
|
|||
|
|
<span className="path1"></span>
|
|||
|
|
<span className="path2"></span>
|
|||
|
|
<span className="path3"></span>
|
|||
|
|
<span className="path4"></span>
|
|||
|
|
</i>
|
|||
|
|
<span className="name" title={item.name} style={{width: window.e9_locale.userLanguage === 8 && 45}}>{item.name}</span>
|
|||
|
|
</span>
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@0vvlq2`} height={window.innerHeight - 153 - 65} className="bt">
|
|||
|
|
{!hasRight && <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@gkdsq5`} >
|
|||
|
|
<div>{getMsg(hrmName)}</div>
|
|||
|
|
</WeaAlertPage>}
|
|||
|
|
{
|
|||
|
|
hasRight && <div className="hrm-checking-content icon-cls">
|
|||
|
|
{tabkey == '1' && this.renderStatistics()}
|
|||
|
|
{tabkey == '2' && this.renderCalendar()}
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
</WeaNewScroll>
|
|||
|
|
</div>
|
|||
|
|
</Spin>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default main
|