1302 lines
44 KiB
JavaScript
1302 lines
44 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,
|
|||
|
|
WeaInputNumber,
|
|||
|
|
WeaDropdown,
|
|||
|
|
} from "ecCom";
|
|||
|
|
import { WeaTableNew } from "comsMobx";
|
|||
|
|
const WeaTable = WeaTableNew.WeaTable;
|
|||
|
|
import {
|
|||
|
|
Modal,
|
|||
|
|
Row,
|
|||
|
|
Col,
|
|||
|
|
Button,
|
|||
|
|
Spin,
|
|||
|
|
Icon,
|
|||
|
|
Calendar,
|
|||
|
|
Tooltip,
|
|||
|
|
Timeline,
|
|||
|
|
} from "antd";
|
|||
|
|
import "../style/newChecking.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";
|
|||
|
|
import AbsenceDialog from "./absenceDetail/Dialog";
|
|||
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|||
|
|
const toJS = mobx.toJS;
|
|||
|
|
let __this;
|
|||
|
|
const ButtonGroup = Button.Group;
|
|||
|
|
const { ButtonSelect } = WeaDropdown;
|
|||
|
|
|
|||
|
|
const WorkInfo = (props) => {
|
|||
|
|
const { groupitem, onStsClick } = props;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="work work-padding">
|
|||
|
|
<div>
|
|||
|
|
{groupitem &&
|
|||
|
|
groupitem.map((item) => {
|
|||
|
|
const { icon, value, title, color } = item;
|
|||
|
|
return (
|
|||
|
|
<div className="item">
|
|||
|
|
<div className="icon" style={{ backgroundColor: color }}>
|
|||
|
|
<i className={icon} />
|
|||
|
|
</div>
|
|||
|
|
<div className="info">
|
|||
|
|
<div className="value" onClick={() => onStsClick(item)}>
|
|||
|
|
{value}
|
|||
|
|
</div>
|
|||
|
|
<div className="title" title={title}>
|
|||
|
|
{title}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const LeaveInfo = (props) => {
|
|||
|
|
const { groupitem, onStsClick, hasBorder } = props;
|
|||
|
|
|
|||
|
|
const datasLen = groupitem.length;
|
|||
|
|
let width;
|
|||
|
|
if (datasLen === 1) {
|
|||
|
|
width = "100%";
|
|||
|
|
} else if (datasLen === 2) {
|
|||
|
|
width = "50%";
|
|||
|
|
} else {
|
|||
|
|
width = "33.3%";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className="leave-info-content"
|
|||
|
|
style={{ justifyContent: datasLen < 4 ? "space-around" : "flex-start" }}
|
|||
|
|
>
|
|||
|
|
{groupitem &&
|
|||
|
|
groupitem.map((item, index) => {
|
|||
|
|
const { value, title } = item;
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
key={index}
|
|||
|
|
className="item"
|
|||
|
|
style={{ width, textAlign: datasLen < 4 && "center" }}
|
|||
|
|
>
|
|||
|
|
<span onClick={() => onStsClick(item)}>{value}</span>
|
|||
|
|
<span title={title}>{title}</span>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const SignInfo = (props) => {
|
|||
|
|
const { groupitem, onStsClick } = props;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="sign">
|
|||
|
|
{groupitem &&
|
|||
|
|
groupitem.map((d) => {
|
|||
|
|
const { value, title } = d;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="cursor-pointer" onClick={() => onStsClick(d)}>
|
|||
|
|
<span className="sign-value abnormal-font">{value}</span>
|
|||
|
|
<span className="sign-title hrm-over-flow" title={title}>
|
|||
|
|
{title}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const NoData = (props) => {
|
|||
|
|
const { tip, loading } = props;
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="no-data">
|
|||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@o3bfwq`}
|
|||
|
|
type="flex"
|
|||
|
|
justify="space-around"
|
|||
|
|
align="middle"
|
|||
|
|
className="outterow"
|
|||
|
|
>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@faje8e`} span={24} style={{ textAlign: "center" }}>
|
|||
|
|
<i className="icon-coms-NoData f28" />
|
|||
|
|
<span
|
|||
|
|
style={{ verticalAlign: "super", marginLeft: 5 }}
|
|||
|
|
className="wea-f14"
|
|||
|
|
title={tip}
|
|||
|
|
>
|
|||
|
|
{tip}
|
|||
|
|
</span>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
@inject("hrmChecking")
|
|||
|
|
@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;
|
|||
|
|
}
|
|||
|
|
this.onStsClick.bind(this);
|
|||
|
|
__this = this;
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
hrmChecking.init();
|
|||
|
|
}
|
|||
|
|
componentDidMount() {
|
|||
|
|
const { hrmChecking, hrmCard } = this.props;
|
|||
|
|
hrmChecking.hrmId = this.props.params.hrmId || "";
|
|||
|
|
this.getData();
|
|||
|
|
hrmChecking.getHrmNewWorkflwList();
|
|||
|
|
hrmChecking.getwfinfo();
|
|||
|
|
if(hrmCard){
|
|||
|
|
hrmCard.setTopButtons(this.getTopButtons.bind(this));
|
|||
|
|
hrmCard.setTopRightMenus(this.getRightMenu.bind(this));
|
|||
|
|
hrmCard.setTopShowDropIcon(true);
|
|||
|
|
}
|
|||
|
|
//document.title = hrmChecking.title;
|
|||
|
|
}
|
|||
|
|
componentWillReceiveProps(nextProps) {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
if (this.props.location.key !== nextProps.location.key) {
|
|||
|
|
hrmChecking.init();
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
getData() {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
const { tabkey } = hrmChecking;
|
|||
|
|
hrmChecking.getData(() => {
|
|||
|
|
tabkey == 1 && this.refs.chart && this.refs.chart.paint();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentDidUpdate() {
|
|||
|
|
this.props.setParentRightMenu &&
|
|||
|
|
this.props.setParentRightMenu(this.getRightMenu());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getRightMenu() {
|
|||
|
|
const { hrmChecking } = 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 { hrmChecking } = this.props;
|
|||
|
|
hrmChecking.updateNewVisible(true);
|
|||
|
|
}
|
|||
|
|
getTopButtons() {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
let btns = [];
|
|||
|
|
btns.push(
|
|||
|
|
<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pvyiyy@topBtn`} type="primary" onClick={() => this.addChecking()}>
|
|||
|
|
{getLabel("385037", "新建考勤流程")}
|
|||
|
|
</Button>
|
|||
|
|
);
|
|||
|
|
return btns;
|
|||
|
|
}
|
|||
|
|
chooseUser(e) {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
let hrmId = "",
|
|||
|
|
hrmName = undefined;
|
|||
|
|
if (e.selected) {
|
|||
|
|
hrmId = e.node.props.id;
|
|||
|
|
hrmName = e.node.props.name;
|
|||
|
|
}
|
|||
|
|
if (hrmId) {
|
|||
|
|
hrmChecking.updateHrmId(hrmId);
|
|||
|
|
if (hrmName) hrmChecking.updateHrmName(hrmName);
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
changeUserRoot(ids, names, datas) {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
hrmChecking.updateUserRoot(datas);
|
|||
|
|
}
|
|||
|
|
resetUserRoot() {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
hrmChecking.updateUserRoot();
|
|||
|
|
hrmChecking.updateHrmId();
|
|||
|
|
hrmChecking.updateHrmName();
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
changeTab(key) {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
hrmChecking.changeTabHandler(key);
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
changeDateTab(key) {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
hrmChecking.changeDateTabHandler(key);
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
reFresh() {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
changeDate(v) {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
const { dateTabkey } = hrmChecking;
|
|||
|
|
if (dateTabkey == "2") {
|
|||
|
|
v = new moment(v).format("YYYY-MM");
|
|||
|
|
} else {
|
|||
|
|
v = new moment(v).format("YYYY");
|
|||
|
|
}
|
|||
|
|
hrmChecking.changeDateHandler(v);
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
handlerStatusClick(item) {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
hrmChecking.handlerStatusClick(item.type);
|
|||
|
|
}
|
|||
|
|
renderLeft() {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
const { oHeight } = this.state;
|
|||
|
|
let { tabkey, leftTitle, userRoot } = hrmChecking;
|
|||
|
|
userRoot = toJS(userRoot);
|
|||
|
|
const hrmId = this.props.params.hrmId || "";
|
|||
|
|
let org = (
|
|||
|
|
<WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@novss4`}
|
|||
|
|
dataUrl="/api/hrm/base/getHrmResourceTree"
|
|||
|
|
rootKey="rootManager"
|
|||
|
|
treeNodeClick={this.chooseUser.bind(this)}
|
|||
|
|
params={
|
|||
|
|
Array.isArray(userRoot) && userRoot[0]
|
|||
|
|
? { rootid: userRoot[0].id }
|
|||
|
|
: { rootid: hrmId }
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className="attendence-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@7otf28`}
|
|||
|
|
isSingle={true}
|
|||
|
|
linkUrl="/hrm/resource/HrmResource.jsp?id="
|
|||
|
|
title={getLabel("179", "人力资源")}
|
|||
|
|
type="1"
|
|||
|
|
viewAttr="2"
|
|||
|
|
replaceDatas={userRoot}
|
|||
|
|
customIcon="icon-coms-Reset"
|
|||
|
|
addOnClick={this.resetUserRoot.bind(this)}
|
|||
|
|
onChange={this.changeUserRoot.bind(this)}
|
|||
|
|
/>
|
|||
|
|
{tabkey === "1" ? (
|
|||
|
|
<div style={{ height: window.innerHeight - 235 }}>{org}</div>
|
|||
|
|
) : (
|
|||
|
|
<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@9fqpl0`} 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;
|
|||
|
|
}
|
|||
|
|
getNavbarHeight = () => {
|
|||
|
|
return $('.e9theme-layout2-navbar').height()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
renderDetail() {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
const { oHeight } = this.state;
|
|||
|
|
let { calendarCheckedDay, sData } = hrmChecking;
|
|||
|
|
if (calendarCheckedDay) {
|
|||
|
|
return (
|
|||
|
|
<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@l51d0b`}
|
|||
|
|
height={window.innerHeight - 200 - oHeight - this.getNavbarHeight()}
|
|||
|
|
className="bt"
|
|||
|
|
>
|
|||
|
|
<div className="detail-wrapper">
|
|||
|
|
<strong className="detail-header">
|
|||
|
|
<i className="icon-coms-New-schedule" />
|
|||
|
|
{sData.date} {getLabel("20080", "考勤情况")}
|
|||
|
|
</strong>
|
|||
|
|
{isEmpty(sData.signInfo) && (
|
|||
|
|
<div className="empty align-center">
|
|||
|
|
{getLabel("386472", "当天没有考勤数据")}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{!isEmpty(sData.signInfo) && (
|
|||
|
|
<Timeline ecId={`${this && this.props && this.props.ecId || ''}_Timeline@07qho9`}>
|
|||
|
|
{sData.signInfo.map((i, index) => {
|
|||
|
|
return (
|
|||
|
|
<Timeline.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@jdhzs1@${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>
|
|||
|
|
{getLabel("506048", "时长")}： {data.count}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
onMonthSelect(date) {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
let { dateTabkey, pDate } = hrmChecking;
|
|||
|
|
let select = new moment(date.time).format("YYYY-MM");
|
|||
|
|
if (pDate.slice(0, 7) == select) {
|
|||
|
|
hrmChecking.updateCalendarCheckedDay(date.getDayOfMonth());
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
onyearMonthSelect(date) {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
let select = new moment(date.time).format("YYYY-MM");
|
|||
|
|
hrmChecking.changeDateHandler(select);
|
|||
|
|
hrmChecking.updateDateTabkey("2");
|
|||
|
|
this.getData();
|
|||
|
|
}
|
|||
|
|
monthDateCellRender(date) {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
let { dateTabkey, pDate, calendarData, statusActiveType } = hrmChecking;
|
|||
|
|
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];
|
|||
|
|
const components = [];
|
|||
|
|
if (
|
|||
|
|
data &&
|
|||
|
|
(data.types.indexOf(statusActiveType) > -1 ||
|
|||
|
|
statusActiveType == "ALL" ||
|
|||
|
|
data.types.indexOf("NORMAL") > -1)
|
|||
|
|
) {
|
|||
|
|
components.push(
|
|||
|
|
<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@eothkc`}
|
|||
|
|
height={data.workflow && data.workflow.length > 0 ? 45 : 15}
|
|||
|
|
>
|
|||
|
|
{data.workflow &&
|
|||
|
|
data.workflow.map((item, i) => {
|
|||
|
|
if (
|
|||
|
|
item.workflowtype == statusActiveType ||
|
|||
|
|
statusActiveType == "ALL"
|
|||
|
|
) {
|
|||
|
|
const ic = Util.getIconColor(item.workflowtype);
|
|||
|
|
return (
|
|||
|
|
<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@8kx8c0@${i}`} 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>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
if (data && data.signInfo) {
|
|||
|
|
components.push(
|
|||
|
|
data.signInfo.map((info, i) => {
|
|||
|
|
const { title, signTime } = info;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@wd0lvm@${i}`} className="calendar-sign-info">
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6t3eg1@${i}`}
|
|||
|
|
span={24}
|
|||
|
|
className="text-overflow"
|
|||
|
|
title={`${title}: ${signTime}`}
|
|||
|
|
>{`${title}: ${signTime}`}</Col>
|
|||
|
|
</Row>
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
return components;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
yearDateCellRender(date) {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
let { dateTabkey, pDate, yearData, statusActiveType } = hrmChecking;
|
|||
|
|
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 { hrmChecking } = this.props;
|
|||
|
|
let { dateTabkey, pDate, pDate1 } = hrmChecking;
|
|||
|
|
return (
|
|||
|
|
<div className="calendar-wrapper">
|
|||
|
|
{dateTabkey == "2" && (
|
|||
|
|
<Calendar ecId={`${this && this.props && this.props.ecId || ''}_Calendar@3ikg64`}
|
|||
|
|
mode="month"
|
|||
|
|
dateCellRender={this.monthDateCellRender.bind(this)}
|
|||
|
|
// startOfMonth={26}
|
|||
|
|
locale={this.getLocale()}
|
|||
|
|
onSelect={this.onMonthSelect.bind(this)}
|
|||
|
|
value={new Date(pDate)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{dateTabkey == "1" && (
|
|||
|
|
<WeaYear ecId={`${this && this.props && this.props.ecId || ''}_WeaYear@6cz5ay`}
|
|||
|
|
value={pDate1}
|
|||
|
|
dateCellRender={this.yearDateCellRender.bind(this)}
|
|||
|
|
onMonthSelect={this.onyearMonthSelect.bind(this)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onStsClick(item) {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
const { id } = item;
|
|||
|
|
|
|||
|
|
if (parseFloat(item.value) > 0) {
|
|||
|
|
hrmChecking.updateStsType(item.type);
|
|||
|
|
if (id === "leaveDays") {
|
|||
|
|
hrmChecking.openAbsenceDialog();
|
|||
|
|
} else {
|
|||
|
|
const { type } = item;
|
|||
|
|
if (type === "OVERTIME") {
|
|||
|
|
hrmChecking.getOverTimeTabDatas().then(() => {
|
|||
|
|
hrmChecking.getTableData();
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
hrmChecking.getTableData();
|
|||
|
|
}
|
|||
|
|
hrmChecking.updateVisible(true);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
const content = getLabel("386474", "本月没有{params}数据！").replace(
|
|||
|
|
"{params}",
|
|||
|
|
item.title
|
|||
|
|
);
|
|||
|
|
Modal.warning({
|
|||
|
|
title: i18n.confirm.defaultTitle(),
|
|||
|
|
content,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
renderStatistics() {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
const { iWidth } = this.state;
|
|||
|
|
let {
|
|||
|
|
chartOptions,
|
|||
|
|
groupitem2,
|
|||
|
|
groupitem3,
|
|||
|
|
groupitem4,
|
|||
|
|
groupitem5,
|
|||
|
|
count,
|
|||
|
|
} = hrmChecking;
|
|||
|
|
chartOptions = toJS(chartOptions);
|
|||
|
|
groupitem4 = toJS(groupitem4);
|
|||
|
|
groupitem3 = toJS(groupitem3);
|
|||
|
|
groupitem2 = toJS(groupitem2);
|
|||
|
|
groupitem5 = toJS(groupitem5);
|
|||
|
|
|
|||
|
|
const { hasLeaveInfo, loading } = hrmChecking;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@5ubv2f`} className="statistics-wrapper" style={{ display: "block" }}>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gevw02`} 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@aoil9y`}
|
|||
|
|
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@669upx`}>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@o1k7rv`}
|
|||
|
|
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@bn8vsg`}
|
|||
|
|
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@wui1pj`}>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@q7ghoh`} span={12} className="align-center hrm-over-flow">
|
|||
|
|
<span
|
|||
|
|
className="dot mr15"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: chartOptions.series[0].color[1],
|
|||
|
|
}}
|
|||
|
|
></span>
|
|||
|
|
<span
|
|||
|
|
className=""
|
|||
|
|
title={`${
|
|||
|
|
!isEmpty(chartOptions.series[0].data) &&
|
|||
|
|
chartOptions.series[0].data[1].name
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{!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@z5wjc8`} span={12} className="align-center hrm-over-flow">
|
|||
|
|
<span
|
|||
|
|
className="dot mr15"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: chartOptions.series[0].color[0],
|
|||
|
|
}}
|
|||
|
|
></span>
|
|||
|
|
<span
|
|||
|
|
className=""
|
|||
|
|
title={`${
|
|||
|
|
!isEmpty(chartOptions.series[0].data) &&
|
|||
|
|
chartOptions.series[0].data[0].name
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{!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@wy2082`} span={16} className="abnormal-wrapper">
|
|||
|
|
<div className="statistics-title bb">
|
|||
|
|
{getLabel("132057", "异常考勤汇总")}
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
className="abnormal-wrapper-left"
|
|||
|
|
style={{
|
|||
|
|
width:
|
|||
|
|
jQuery(".attendence-checking").innerWidth() < 1300 && "74%",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<WorkInfo ecId={`${this && this.props && this.props.ecId || ''}_WorkInfo@4cv3pc`}
|
|||
|
|
groupitem={groupitem2}
|
|||
|
|
onStsClick={(d) => this.onStsClick(d)}
|
|||
|
|
/>
|
|||
|
|
<div style={{ height: "50%" }}>
|
|||
|
|
<div className="leave-info-header">
|
|||
|
|
<span className="icon">
|
|||
|
|
<i className="icon-coms-content-o" />
|
|||
|
|
</span>
|
|||
|
|
<span className="title">
|
|||
|
|
{getLabel("503887", "请假信息")}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
{hasLeaveInfo ? (
|
|||
|
|
<LeaveInfo ecId={`${this && this.props && this.props.ecId || ''}_LeaveInfo@fluc6j`}
|
|||
|
|
groupitem={groupitem5}
|
|||
|
|
onStsClick={(d) => this.onStsClick(d)}
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<NoData ecId={`${this && this.props && this.props.ecId || ''}_NoData@kyb7ks`}
|
|||
|
|
tip={getLabel("503888", "暂无请假信息")}
|
|||
|
|
loading={loading}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
className="abnormal-wrapper-right"
|
|||
|
|
style={{
|
|||
|
|
width:
|
|||
|
|
jQuery(".attendence-checking").innerWidth() < 1300 && "26%",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<SignInfo ecId={`${this && this.props && this.props.ecId || ''}_SignInfo@5d92ur`}
|
|||
|
|
groupitem={groupitem3}
|
|||
|
|
onStsClick={(d) => this.onStsClick(d)}
|
|||
|
|
hasBorder
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ypl2t2`} gutter={36} className="detail">
|
|||
|
|
{groupitem4 &&
|
|||
|
|
groupitem4.map((d, i) => {
|
|||
|
|
return (
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@1xe7eq@${i}`} span={8} style={{ marginBottom: 20 }}>
|
|||
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@1vptry@${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@46bdcd@${index}`}>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ufjixx@${index}`}
|
|||
|
|
span={20}
|
|||
|
|
className="hrm-over-flow"
|
|||
|
|
title={i.title}
|
|||
|
|
>
|
|||
|
|
{i.title}
|
|||
|
|
</Col>
|
|||
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@rukup9@${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@i6dog7`} onClick={() => console.log("more")}>{i18n.button.more()}</Button>,
|
|||
|
|
];
|
|||
|
|
return btns;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
handleInputChange = (value) => {
|
|||
|
|
this.props.hrmChecking.setInputValue(value);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
handleButtonGroupClick = (bool) => {
|
|||
|
|
this.props.hrmChecking.setIsDay(bool);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
const { hrmChecking } = this.props;
|
|||
|
|
const {
|
|||
|
|
getStatusList,
|
|||
|
|
statusActiveType,
|
|||
|
|
tabDatas,
|
|||
|
|
tabkey,
|
|||
|
|
dateTabDatas,
|
|||
|
|
dateTabkey,
|
|||
|
|
pDate,
|
|||
|
|
hasRight,
|
|||
|
|
leftTitle,
|
|||
|
|
hrmName,
|
|||
|
|
loading,
|
|||
|
|
newVisible,
|
|||
|
|
visible,
|
|||
|
|
table,
|
|||
|
|
setDialogHeight,
|
|||
|
|
kqDetailDialogHeight,
|
|||
|
|
stsType,
|
|||
|
|
|
|||
|
|
overTimeTabDatas,
|
|||
|
|
overTimeTabkey,
|
|||
|
|
handleOverTimeTabClick,
|
|||
|
|
tofirstUpperCase,
|
|||
|
|
groupwfinfo
|
|||
|
|
} = hrmChecking;
|
|||
|
|
let { newWorklist } = hrmChecking;
|
|||
|
|
newWorklist = toJS(newWorklist);
|
|||
|
|
const statusList = getStatusList();
|
|||
|
|
const { query } = this.props.location;
|
|||
|
|
|
|||
|
|
const getMsg = (name) => {
|
|||
|
|
const content = getLabel(
|
|||
|
|
"386475",
|
|||
|
|
"您无权查看 {params} 的考勤数据！"
|
|||
|
|
).replace("{params}", name);
|
|||
|
|
return content;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
let e9headerHeight = $(".e9header-right").height() || 80;
|
|||
|
|
|
|||
|
|
let coms = [
|
|||
|
|
<div style={query.fromcard ? { display: "none" } : { display: "" }}>
|
|||
|
|
<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@8mum9v@1`}
|
|||
|
|
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@qhy0lw@1`}
|
|||
|
|
selectedKey={tabkey}
|
|||
|
|
keyParam="key"
|
|||
|
|
datas={[
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
window.e9_locale.userLanguage == "8"
|
|||
|
|
? "Attendence Report"
|
|||
|
|
: getLabel("16558", "考勤统计"),
|
|||
|
|
key: "1",
|
|||
|
|
},
|
|||
|
|
{ title: getLabel("386476", "考勤日历"), key: "2" },
|
|||
|
|
]}
|
|||
|
|
onChange={this.changeTab.bind(this)}
|
|||
|
|
/>
|
|||
|
|
<div className="picker-wrapper checking icon-cls">
|
|||
|
|
<div
|
|||
|
|
style={{ width: 140, paddingLeft: 10, display: "none" }}
|
|||
|
|
className="text-overflow"
|
|||
|
|
title={hrmName}
|
|||
|
|
>
|
|||
|
|
{leftTitle} : {hrmName}
|
|||
|
|
</div>
|
|||
|
|
{[
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
window.e9_locale.userLanguage == "8"
|
|||
|
|
? "Year"
|
|||
|
|
: i18n.label.year(),
|
|||
|
|
key: "1",
|
|||
|
|
},
|
|||
|
|
{ title: i18n.label.month(), key: "2" },
|
|||
|
|
].map((item, i) => {
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
span={1}
|
|||
|
|
onClick={this.changeDateTab.bind(this, item.key)}
|
|||
|
|
style={
|
|||
|
|
i > 0 && window.e9_locale.userLanguage == "8"
|
|||
|
|
? { margin: "0 10px" }
|
|||
|
|
: {}
|
|||
|
|
}
|
|||
|
|
className={`cursor-pointer date-item ${
|
|||
|
|
item.key === dateTabkey ? "active" : ""
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{item.title}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
marginLeft: window.e9_locale.userLanguage == "8" && 10,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@dl0cdi@datepicker`}
|
|||
|
|
arrow
|
|||
|
|
type={dateTabkey == "1" ? "year" : "month"}
|
|||
|
|
date={pDate}
|
|||
|
|
onChange={this.changeDate.bind(this)}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<span
|
|||
|
|
className="icon-coms-Refresh cursor-pointer"
|
|||
|
|
style={{ marginLeft: 5 }}
|
|||
|
|
onClick={this.reFresh.bind(this)}
|
|||
|
|
/>
|
|||
|
|
{tabkey == "2" && (
|
|||
|
|
<div
|
|||
|
|
className="status-info clearfix"
|
|||
|
|
style={{
|
|||
|
|
maxWidth:
|
|||
|
|
tabkey == 2
|
|||
|
|
? window.innerWidth - 700
|
|||
|
|
: window.innerWidth - 900,
|
|||
|
|
float: "right",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{window.e9_locale.userLanguage != "8"
|
|||
|
|
? statusList &&
|
|||
|
|
statusList.map((item) => {
|
|||
|
|
return (
|
|||
|
|
<span
|
|||
|
|
className={`item cursor-pointer ${
|
|||
|
|
item.type == statusActiveType ? "active" : ""
|
|||
|
|
}`}
|
|||
|
|
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}>
|
|||
|
|
{item.name}
|
|||
|
|
</span>
|
|||
|
|
</span>
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
: statusList && (
|
|||
|
|
<ButtonSelect ecId={`${this && this.props && this.props.ecId || ''}_ButtonSelect@ssaf6p`}
|
|||
|
|
type="small"
|
|||
|
|
btnProps={{
|
|||
|
|
style: {
|
|||
|
|
padding: 0,
|
|||
|
|
background: "transparent",
|
|||
|
|
border: "none",
|
|||
|
|
color: "#000",
|
|||
|
|
fontSize: 14,
|
|||
|
|
},
|
|||
|
|
}}
|
|||
|
|
datas={statusList.reverse().map((item) => {
|
|||
|
|
return {
|
|||
|
|
key: item.type,
|
|||
|
|
text: (
|
|||
|
|
<span>
|
|||
|
|
<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
|
|||
|
|
style={{ marginLeft: 10 }}
|
|||
|
|
title={item.name}
|
|||
|
|
>
|
|||
|
|
{item.name}
|
|||
|
|
</span>
|
|||
|
|
</span>
|
|||
|
|
),
|
|||
|
|
show: (
|
|||
|
|
<span>
|
|||
|
|
<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
|
|||
|
|
style={{ marginLeft: 10 }}
|
|||
|
|
title={item.name}
|
|||
|
|
>
|
|||
|
|
{item.name}
|
|||
|
|
</span>
|
|||
|
|
</span>
|
|||
|
|
),
|
|||
|
|
};
|
|||
|
|
})}
|
|||
|
|
menuOnClick={(key, e) =>
|
|||
|
|
this.handlerStatusClick({ type: key })
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@873va8@scroll`}
|
|||
|
|
height={window.innerHeight - e9headerHeight - 10 - $(".wea-new-top-wapper").height() - $(".wea-tab").height() - $(".picker-wrapper").height() - 10 - $(".pt-menu-horizontal").height()}
|
|||
|
|
className="bt"
|
|||
|
|
>
|
|||
|
|
{!hasRight && (
|
|||
|
|
<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@trut6v`}>
|
|||
|
|
<div>{getMsg(hrmName)}</div>
|
|||
|
|
</WeaAlertPage>
|
|||
|
|
)}
|
|||
|
|
{hasRight && (
|
|||
|
|
<div className="hrm-checking-content icon-cls">
|
|||
|
|
{tabkey == "1" && this.renderStatistics()}
|
|||
|
|
{tabkey == "2" && this.renderCalendar()}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</WeaNewScroll>
|
|||
|
|
</div>
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
if(!query.fromcard){
|
|||
|
|
coms = (
|
|||
|
|
<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@7asvpr`} datas={this.getRightMenu()}>
|
|||
|
|
{coms}
|
|||
|
|
</WeaRightMenu>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="attendence-checking">
|
|||
|
|
<WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@vlriwi`} />
|
|||
|
|
<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1owcla`}
|
|||
|
|
visible={visible}
|
|||
|
|
onCancel={() => hrmChecking.updateVisible(false)}
|
|||
|
|
closable
|
|||
|
|
style={{ width: 900, height: 500 }}
|
|||
|
|
title={getLabel("386477", "考勤明细")}
|
|||
|
|
icon="icon-coms-hrm"
|
|||
|
|
iconBgcolor="#217346"
|
|||
|
|
moreBtn={{ datas: [] }}
|
|||
|
|
onChangeHeight={(h) => setDialogHeight(h)}
|
|||
|
|
>
|
|||
|
|
{stsType === "OVERTIME" && (
|
|||
|
|
<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@2qwfys`}
|
|||
|
|
datas={overTimeTabDatas}
|
|||
|
|
selectedKey={overTimeTabkey}
|
|||
|
|
keyParam="key"
|
|||
|
|
onChange={handleOverTimeTabClick}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@xg1n6d`}
|
|||
|
|
comsWeaTableStore={table}
|
|||
|
|
hasOrder={true}
|
|||
|
|
needScroll={true}
|
|||
|
|
scroll={{ y: kqDetailDialogHeight - 80 }}
|
|||
|
|
onOperatesClick={this.onOperatesClick.bind(this)}
|
|||
|
|
/>
|
|||
|
|
</WeaDialog>
|
|||
|
|
<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@hegaeo`}
|
|||
|
|
visible={newVisible}
|
|||
|
|
className="new-hrm-workflow"
|
|||
|
|
onCancel={() => hrmChecking.updateNewVisible(false)}
|
|||
|
|
closable
|
|||
|
|
style={{ width: 600, height: 400 }}
|
|||
|
|
title={getLabel("385037", "新建考勤流程")}
|
|||
|
|
icon="icon-portal-workflow"
|
|||
|
|
iconBgcolor="#0079de"
|
|||
|
|
hasScroll
|
|||
|
|
>
|
|||
|
|
<div className="new-hrm-workflow-body">
|
|||
|
|
{
|
|||
|
|
groupwfinfo && groupwfinfo.map(info => {
|
|||
|
|
const { img, color, typeName, wfs } = info;
|
|||
|
|
return (
|
|||
|
|
<div className="new-hrm-workflow-wrapper" style={{borderTop:`3px solid ${color}`}}>
|
|||
|
|
<div className="hearder">
|
|||
|
|
<span>
|
|||
|
|
<i className={img} style={{color}}/>
|
|||
|
|
</span>
|
|||
|
|
<span >
|
|||
|
|
{ `${typeName}(${wfs.length})` }
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
{
|
|||
|
|
wfs.map(item => {
|
|||
|
|
return <div className="cursor-pointer item" onClick={()=> {hrmChecking.handlerNewWorkflow(item)}}>{item.title}</div>
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</WeaDialog>
|
|||
|
|
<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@rp9oef`} spining={loading}>
|
|||
|
|
{coms}
|
|||
|
|
</Spin>
|
|||
|
|
<AbsenceDialog ecId={`${this && this.props && this.props.ecId || ''}_AbsenceDialog@hkyys7`} store={hrmChecking} />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//窗口大小变化
|
|||
|
|
jQuery(window).resize(function () {
|
|||
|
|
if (__this) {
|
|||
|
|
__this.setState({
|
|||
|
|
iWidth: window.innerWidth,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
export default main;
|