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;
|