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 |