You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
975 lines
54 KiB
975 lines
54 KiB
import React, { useEffect, useState, useMemo } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Select, Input, Button, Tooltip, DatePicker, Table } from '@douyinfe/semi-ui';
|
|
import { IconSearch } from '@douyinfe/semi-icons';
|
|
import ReactECharts from 'echarts-for-react';
|
|
import * as echarts from 'echarts';
|
|
import DeleteModal from '../components/deleteModal';
|
|
import PersonnelModal from '../components/personnelModal';
|
|
import moment from 'moment'
|
|
import { UserAttribute } from '$utils'
|
|
import { isAuthorized } from '$utils'
|
|
|
|
|
|
import '../style.less'
|
|
|
|
const Rest = (props) => {
|
|
const { dispatch, actions, user, loading, socket, history } = props
|
|
|
|
const { humanAffairs } = actions;
|
|
const [option, setOption] = useState({});
|
|
const [leaveoption, setLeaveOption] = useState({});
|
|
const [tableData, setTableData] = useState([]) //表格数据
|
|
const [leaveData, setLeaveData] = useState([]) //表格数据
|
|
const [tableStatistic, setTableStatistic] = useState({}) //加班总数据
|
|
const [leaveStatistic, setLeaveStatistic] = useState({}) //请假总数据
|
|
|
|
const [deleteModal, setDeleteModal] = useState(false) //删除弹框
|
|
const [personnelModal, setPersonnelModal] = useState(false);//档案弹框
|
|
const [columns, setColumns] = useState([//表格属性
|
|
{
|
|
title: "实例号",
|
|
dataIndex: "storyId",
|
|
key: 'storyId',
|
|
render: (text, r, index) => {
|
|
return <span style={{ color: '#1890FF' }}>{text}</span>;
|
|
},
|
|
}, {
|
|
title: "事由",
|
|
dataIndex: "reason",
|
|
key: 'reason',
|
|
render: (text, r, index) => {
|
|
return text;
|
|
},
|
|
}, {
|
|
title: "类型",
|
|
dataIndex: "compensate",
|
|
key: 'compensate',
|
|
render: (text, r, index) => {
|
|
return text;
|
|
},
|
|
}, {
|
|
title: "发起时间",
|
|
dataIndex: "createTime",
|
|
key: 'createTime',
|
|
render: (text, r, index) => {
|
|
return moment(text).format('YYYY-MM-DD HH:mm');
|
|
},
|
|
}, {
|
|
title: "开始时间",
|
|
dataIndex: "startTime",
|
|
key: 'startTime',
|
|
render: (text, r, index) => {
|
|
return moment(text).format('YYYY-MM-DD HH:mm');
|
|
},
|
|
}, {
|
|
title: "结束时间",
|
|
dataIndex: "endTime",
|
|
key: 'endTime',
|
|
render: (text, r, index) => {
|
|
return moment(text).format('YYYY-MM-DD HH:mm');
|
|
},
|
|
}, {
|
|
title: "核定时间",
|
|
dataIndex: "duration",
|
|
key: 'duration',
|
|
render: (text, r, index) => {
|
|
return (text / 60 / 60 + '小时');
|
|
},
|
|
},
|
|
])
|
|
const [leaveColumns, setLeaveColumns] = useState([//表格属性
|
|
{
|
|
title: "实例号",
|
|
dataIndex: "storyId",
|
|
key: 'storyId',
|
|
render: (text, r, index) => {
|
|
return <span style={{ color: '#1890FF' }}>{text}</span>;
|
|
},
|
|
}, {
|
|
title: "事由",
|
|
dataIndex: "reason",
|
|
key: 'reason',
|
|
render: (text, r, index) => {
|
|
return text;
|
|
},
|
|
}, {
|
|
title: "类型",
|
|
dataIndex: "type",
|
|
key: 'type',
|
|
render: (text, r, index) => {
|
|
return text;
|
|
},
|
|
}, {
|
|
title: "发起时间",
|
|
dataIndex: "createTime",
|
|
key: 'createTime',
|
|
render: (text, r, index) => {
|
|
return moment(text).format('YYYY-MM-DD HH:mm');
|
|
},
|
|
}, {
|
|
title: "开始时间",
|
|
dataIndex: "startTime",
|
|
key: 'startTime',
|
|
render: (text, r, index) => {
|
|
return moment(text).format('YYYY-MM-DD HH:mm');
|
|
},
|
|
}, {
|
|
title: "结束时间",
|
|
dataIndex: "endTime",
|
|
key: 'endTime',
|
|
render: (text, r, index) => {
|
|
return moment(text).format('YYYY-MM-DD HH:mm');
|
|
},
|
|
}, {
|
|
title: "核定时间",
|
|
dataIndex: "duration",
|
|
key: 'duration',
|
|
render: (text, r, index) => {
|
|
return (text / 60 / 60 + '小时');
|
|
},
|
|
},
|
|
])
|
|
|
|
const [pepUserCode, setPepUserCode] = useState('');
|
|
const [pepUserId, setPepUserId] = useState('');
|
|
const [pepObj, setPepObj] = useState({});
|
|
const scroll = useMemo(() => ({ y: 248 }), []);
|
|
|
|
const [startDate, setStartDate] = useState('');//开始时间
|
|
const [endDate, setEndDate] = useState('');//结束时间
|
|
|
|
useEffect(() => {
|
|
setPepUserCode(history?.location?.search.slice(1).split('-')[0])
|
|
setPepUserId(history?.location?.search.slice(1).split('-')[1])
|
|
peopleDetail()
|
|
}, [])
|
|
useEffect(() => {
|
|
getWorkOption()//加班信息
|
|
getLeaveOption()//请假信息
|
|
}, [startDate, endDate])
|
|
function peopleDetail() {
|
|
dispatch(humanAffairs.getMemberList({ keywordTarget: 'number', keyword: history?.location?.search.slice(1).split('-')[0] })).then((res) => {//搜索项企用户
|
|
if (res.success) {
|
|
setPepObj(res.payload?.data?.rows[0])
|
|
}
|
|
})
|
|
}
|
|
function getWorkOption() {//加班折线图
|
|
let date = [];
|
|
let showdate = []
|
|
let showdate1 = []
|
|
dispatch(humanAffairs.getMemberOvertime({ pepUserId: history?.location?.search.slice(1).split('-')[1], startDate: startDate, endDate: endDate })).then((res) => {//搜索项企用户
|
|
if (res.success) {
|
|
setTableData(res.payload?.data?.data)
|
|
setTableStatistic(res.payload?.data)
|
|
let textdate = [];
|
|
for (let i = 0; i < res.payload?.data?.dayStatisticData?.length; i++) {
|
|
if (textdate.findIndex((ev) => {
|
|
return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM') && ev.compensate == res.payload.data.dayStatisticData[i].compensate
|
|
}) !== -1) {
|
|
textdate[textdate.findIndex((ev) => {
|
|
return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM') && ev.compensate == res.payload.data.dayStatisticData[i].compensate
|
|
})].num
|
|
=
|
|
textdate[textdate.findIndex((ev) => {
|
|
return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM') && ev.compensate == res.payload.data.dayStatisticData[i].compensate
|
|
})].num + res.payload.data.dayStatisticData[i].duration / 3600
|
|
}
|
|
else {
|
|
textdate.push({
|
|
time: moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM'),
|
|
num: res.payload.data.dayStatisticData[i].duration / 3600,
|
|
compensate: res.payload.data.dayStatisticData[i].compensate
|
|
})
|
|
}
|
|
|
|
}
|
|
for (let l = 0; l < textdate.length; l++) {
|
|
if (textdate[l].compensate == '调休') {
|
|
showdate.push([textdate[l].time, textdate[l].num])
|
|
}
|
|
else {
|
|
showdate1.push([textdate[l].time, textdate[l].num])
|
|
}
|
|
|
|
}
|
|
|
|
if (!startDate && !endDate) {
|
|
for (let i = 0; i < 12; i++) {
|
|
date.unshift(moment(new Date()).subtract(i, 'months').format('YYYY/MM'));
|
|
}
|
|
}
|
|
else {
|
|
let nowdate = moment(startDate).format('YYYY/MM')
|
|
date.push(nowdate)
|
|
for (let o = 0; o < 10000; o++) {
|
|
if (nowdate !== moment(endDate).format('YYYY/MM')) {
|
|
nowdate = moment(nowdate).add(1, 'months').format('YYYY/MM')
|
|
date.push(nowdate)
|
|
}
|
|
else {
|
|
break
|
|
}
|
|
}
|
|
}
|
|
let data = {
|
|
legend: {
|
|
data: ["调休", "折算"],
|
|
left: 'right',
|
|
icon: 'roundRect',
|
|
itemHeight: 3, // 粗细
|
|
},
|
|
color: ['#0F7EFB', '#FE9812'], //两条折线的颜色
|
|
xAxis: [
|
|
{
|
|
boundaryGap: false,
|
|
data: date,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
name: '小时'
|
|
},
|
|
],
|
|
dataZoom: [
|
|
{
|
|
id: "dataZoomX",
|
|
type: "slider",
|
|
start: 0,
|
|
end: 100,
|
|
handleIcon:
|
|
"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
|
|
handleSize: "80%",
|
|
},
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: "调休",
|
|
type: "line",
|
|
areaStyle: {
|
|
color: 'rgba(14,156,255,0.5)',
|
|
opacity: 0.1
|
|
},
|
|
smooth: true,
|
|
data: showdate,
|
|
},
|
|
{
|
|
name: "折算",
|
|
type: "line",
|
|
areaStyle: {
|
|
color: 'rgba(254,152,18,0.2)',
|
|
},
|
|
smooth: true,
|
|
data: showdate1,
|
|
},
|
|
],
|
|
}
|
|
setOption(data)
|
|
}
|
|
})
|
|
}
|
|
function getLeaveOption() {//请假折线图
|
|
let date = [];
|
|
let showdate = []
|
|
dispatch(humanAffairs.getMemberVacate({ pepUserId: history?.location?.search.slice(1).split('-')[1], startDate: startDate, endDate: endDate })).then((res) => {//搜索项企用户
|
|
if (res.success) {
|
|
setLeaveData(res.payload?.data?.data)
|
|
let year = 0;
|
|
let compassionate = 0;
|
|
let sick = 0;
|
|
let other = 0;
|
|
let all = 0;
|
|
for (let i = 0; i < res.payload?.data?.statistic.length; i++) {
|
|
if (res.payload?.data?.statistic[i].type == '事假') {
|
|
compassionate = compassionate + (res.payload?.data?.statistic[i].sumDuration / 60 / 60)
|
|
}
|
|
else if (res.payload?.data?.statistic[i].type == '病假') {
|
|
sick = sick + (res.payload?.data?.statistic[i].sumDuration / 60 / 60)
|
|
}
|
|
else if (res.payload?.data?.statistic[i].type == '年休假') {
|
|
year = year + (res.payload?.data?.statistic[i].sumDuration / 60 / 60)
|
|
}
|
|
else {
|
|
other = other + (res.payload?.data?.statistic[i].sumDuration / 60 / 60)
|
|
}
|
|
all = all + (res.payload?.data?.statistic[i].sumDuration / 60 / 60)
|
|
}
|
|
setLeaveStatistic({
|
|
compassionate, sick, year, other, all
|
|
})
|
|
let textdate = [];
|
|
for (let i = 0; i < res.payload?.data?.dayStatisticData?.length; i++) {
|
|
if (textdate.findIndex((ev) => {
|
|
return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM')
|
|
}) !== -1) {
|
|
textdate[textdate.findIndex((ev) => {
|
|
return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM')
|
|
})].num
|
|
=
|
|
textdate[textdate.findIndex((ev) => {
|
|
return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM')
|
|
})].num + res.payload.data.dayStatisticData[i].duration / 3600
|
|
}
|
|
else {
|
|
textdate.push({
|
|
time: moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM'),
|
|
num: res.payload.data.dayStatisticData[i].duration / 3600
|
|
})
|
|
}
|
|
|
|
}
|
|
for (let l = 0; l < textdate.length; l++) {
|
|
showdate.push([textdate[l].time, textdate[l].num])
|
|
}
|
|
|
|
if (!startDate && !endDate) {
|
|
for (let i = 0; i < 12; i++) {
|
|
date.unshift(moment(new Date()).subtract(i, 'months').format('YYYY/MM'));
|
|
}
|
|
}
|
|
else {
|
|
let nowdate = moment(startDate).format('YYYY/MM')
|
|
date.push(nowdate)
|
|
for (let o = 0; o < 10000; o++) {
|
|
if (nowdate !== moment(endDate).format('YYYY/MM')) {
|
|
nowdate = moment(nowdate).add(1, 'months').format('YYYY/MM')
|
|
date.push(nowdate)
|
|
}
|
|
else {
|
|
break
|
|
}
|
|
}
|
|
}
|
|
let data = {
|
|
legend: {
|
|
data: ["请假"],
|
|
left: 'right',
|
|
icon: 'roundRect',
|
|
itemHeight: 3, // 粗细
|
|
},
|
|
color: ['#0F7EFB', '#FE9812'], //两条折线的颜色
|
|
xAxis: [
|
|
{
|
|
boundaryGap: false,
|
|
data: date,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
name: '小时'
|
|
},
|
|
],
|
|
dataZoom: [
|
|
{
|
|
id: "dataZoomX",
|
|
type: "slider",
|
|
start: 0,
|
|
end: 100,
|
|
handleIcon:
|
|
"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
|
|
handleSize: "80%",
|
|
},
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: "请假",
|
|
type: "line",
|
|
areaStyle: {
|
|
color: 'rgba(14,156,255,0.5)',
|
|
opacity: 0.1
|
|
},
|
|
smooth: true,
|
|
data: showdate,
|
|
},
|
|
],
|
|
}
|
|
setLeaveOption(data)
|
|
}
|
|
})
|
|
}
|
|
function handleChange(date) {
|
|
if (date.length > 1) {
|
|
setStartDate(moment(date[0]).format('YYYY-MM-DD'))
|
|
setEndDate(moment(date[1]).format('YYYY-MM-DD'))
|
|
}
|
|
else {
|
|
setStartDate('')
|
|
setEndDate('')
|
|
}
|
|
}
|
|
return (
|
|
<>
|
|
<div style={{ padding: '0px 12px' }}>
|
|
<div style={{ display: 'flex' }}>
|
|
<div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>人事管理</div>
|
|
<div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14, margin: '0px 8px' }}>/</div>
|
|
<div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>档案中心</div>
|
|
<div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14, margin: '0px 8px' }}>/</div>
|
|
<div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>人员档案</div>
|
|
<div style={{ color: '#033C9A', fontSize: 14, margin: '0px 8px' }}>/</div>
|
|
<div style={{ color: '#033C9A', fontSize: 14 }}>档案详情</div>
|
|
</div>
|
|
<div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, padding: '20px 0px 20px 19px ', marginTop: 12 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<div style={{ display: 'flex', alignItems: 'baseline' }}>
|
|
<div style={{ width: 20, height: 20, marginRight: 10, cursor: "pointer" }} onClick={() => {
|
|
history.goBack();
|
|
}}>
|
|
<img src="/assets/images/hrImg/back.png" alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ width: 0, height: 20, borderLeft: '3px solid #0F7EFB', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
|
|
<div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#033C9A', marginLeft: 8 }}>{pepObj?.userName}的个人档案</div>
|
|
</div>
|
|
<div style={{ display: 'flex', marginRight: 20 }}>
|
|
{
|
|
isAuthorized('EDITPROFILE') ? <div style={{ padding: '6px 20px', background: '#0F7EFB', color: '#FFFFFF', fontSize: 14, cursor: "pointer" }}
|
|
onClick={() => {
|
|
setPersonnelModal(true);
|
|
}}
|
|
>
|
|
编辑档案
|
|
</div> : ''
|
|
}
|
|
{
|
|
isAuthorized('DELETEFILES') ? <div style={{ padding: '6px 20px', background: '#FF5254', color: '#FFFFFF', fontSize: 14, cursor: "pointer", marginLeft: 20 }}
|
|
onClick={() => { setDeleteModal(true) }}
|
|
>
|
|
删除档案
|
|
</div> : ''
|
|
}
|
|
|
|
</div>
|
|
</div>
|
|
<div style={{ borderBottom: '1px solid #DCDEE0', margin: '16px 0px 16px -20px' }}></div>
|
|
<div style={{ display: 'flex', width: '100%' }}>
|
|
<div style={{ width: 160, height: 240, marginLeft: 17 }}>
|
|
<img src={pepObj.idPhoto ? '/_file-server/' + pepObj.idPhoto : '/assets/images/hrImg/defaultAvatar.png'} alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ marginLeft: 40, marginTop: 8, width: '61.452%' }}>
|
|
<div style={{ display: 'flex' }}>
|
|
{/* 基本信息 */}
|
|
<div style={{ width: '60%' }}>
|
|
<div style={{ color: '#4A4A4A', fontSize: 14, fontWeight: 'bold' }}>
|
|
基本信息
|
|
</div>
|
|
<div style={{ display: 'flex', marginTop: 13 }}>
|
|
<div style={{ display: 'flex', width: '40.82%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 48 }}>
|
|
证件号：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.idNumber || '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '59.18%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
|
|
联系方式：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.phoneNumber || '暂无'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', marginTop: 8 }}>
|
|
<div style={{ display: 'flex', width: '40.82%' }}>
|
|
<div style={{ display: 'flex', width: '45.57%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 48, textAlign: 'end' }}>
|
|
姓名：
|
|
</div>
|
|
<div style={{ color: '#005ABD', fontSize: 13 }}>
|
|
{pepObj.userName || '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '54.43%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 48, textAlign: 'end' }}>
|
|
性别：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.gender || '暂无'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '59.18%' }}>
|
|
<div style={{ display: 'flex', width: '53.166%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
|
|
出生日期：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.birthday || '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '46.834%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
|
|
政治面貌：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.politicsStatus || '暂无'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', marginTop: 8 }}>
|
|
<div style={{ display: 'flex', width: '40.82%' }}>
|
|
<div style={{ display: 'flex', width: '45.57%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 48, textAlign: 'end' }}>
|
|
年龄：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.birthday ? moment(new Date()).diff(pepObj.birthday, 'years') + '岁' : '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '54.43%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 48, textAlign: 'end' }}>
|
|
籍贯：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.nativePlace || '暂无'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '59.18%' }}>
|
|
<div style={{ display: 'flex', width: '53.166%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
|
|
婚育状态：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.marital || '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '46.834%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
|
|
工作地点：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.workPlace || '暂无'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* 学历信息 */}
|
|
<div style={{ width: '40%' }}>
|
|
<div style={{ color: '#4A4A4A', fontSize: 14, fontWeight: 'bold' }}>
|
|
学历信息
|
|
</div>
|
|
<div style={{ display: 'flex', marginTop: 13 }}>
|
|
<div style={{ display: 'flex', width: '43.05%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
|
|
毕业院校：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.graduatedFrom || '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '56.95' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
|
|
毕业时间：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.graduationDate || '暂无'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', marginTop: 9 }}>
|
|
<div style={{ display: 'flex', width: '43.05%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60, textAlign: 'end' }}>
|
|
学历：
|
|
</div>
|
|
<div style={{ color: '#005ABD', fontSize: 13 }}>
|
|
{pepObj.educationBackground || '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '56.95' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60, textAlign: 'end' }}>
|
|
专业：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.specialty || '暂无'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* 职务信息 */}
|
|
<div style={{ marginTop: 20 }}>
|
|
<div style={{ color: '#4A4A4A', fontSize: 14, fontWeight: 'bold' }}>
|
|
职务信息
|
|
</div>
|
|
<div style={{ marginTop: 13, display: 'flex' }}>
|
|
<div style={{ display: 'flex', width: '15.715%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
|
|
员工编号：
|
|
</div>
|
|
<div style={{ color: '#005ABD', fontSize: 13 }}>
|
|
{pepObj.userCode || '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '17.072%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
|
|
入职时间：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.hiredate || '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '32.395%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 84 }}>
|
|
转试用期时间：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.turnProbationPeriod || '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
|
|
转正时间：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.regularDate || '暂无'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ marginTop: 9, display: 'flex' }}>
|
|
<div style={{ display: 'flex', width: '15.715%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
|
|
员工职位：
|
|
</div>
|
|
<div style={{ color: '#005ABD', fontSize: 13 }}>
|
|
{
|
|
pepObj.userJob ? UserAttribute.jobDataSource[pepObj.userJob - 1] : '暂无'
|
|
}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '17.072%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
|
|
员工岗位：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{
|
|
pepObj.userPost || '暂无'
|
|
}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '32.395%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 84, textAlign: 'end' }}>
|
|
所属机构：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{
|
|
pepObj.userOrganization ? UserAttribute.organizationDataSource[pepObj.userOrganization - 1] : '暂无'
|
|
}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
|
|
所属部门：
|
|
</div>
|
|
{
|
|
pepObj.departmrnt?.map((ite, idx) => {
|
|
let departmentsArr = []
|
|
for (let i = 0; i < pepObj.departmrnt.length; i++) {
|
|
departmentsArr.push(pepObj.departmrnt[i].name)
|
|
}
|
|
return (
|
|
<div key={idx}>
|
|
{idx < 3 ?
|
|
(<div style={{ padding: '0px 4px 1px 4px ', color: '#FFFFFF', fontSize: 12, background: 'rgba(0,90,189,0.8)', borderRadius: 2, marginRight: 4 }}>
|
|
{ite.name}
|
|
</div>) : ('')
|
|
}
|
|
{
|
|
pepObj.departmrnt.length > 3 && idx == 3 ? (
|
|
<Tooltip content={departmentsArr.join(',')} trigger="click" style={{ lineHeight: 2 }}>
|
|
<div style={{ padding: '0px 4px 1px 4px ', color: 'rgba(0,90,189,0.8)', fontSize: 12, marginRight: 4, cursor: "pointer", }}>
|
|
+{pepObj.departmrnt.length - 3}
|
|
</div>
|
|
</Tooltip>
|
|
) : ('')
|
|
}
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex' }}>
|
|
<div style={{ marginTop: 9, display: 'flex', width: '15.715%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
|
|
工作经验：
|
|
</div>
|
|
<div style={{ color: '#005ABD', fontSize: 13 }}>
|
|
{pepObj.experienceYear ? pepObj.experienceYear + '年' : '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ marginTop: 9, display: 'flex', width: '17.072%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
|
|
入职年限：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.hiredate ? String(moment(new Date()).diff(pepObj.hiredate, 'years', true)).substring(0, 3) + '年' : '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ marginTop: 9, display: 'flex', width: '32.395%' }}>
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 84, textAlign: 'end' }}>
|
|
试用期：
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
{pepObj.regularDate ? moment(pepObj.regularDate).diff(pepObj.hiredate, 'months', true).toFixed(1) + '个月' : '暂无'}
|
|
</div>
|
|
</div>
|
|
{
|
|
pepObj.vitae ? (
|
|
<a href={`/_file-server/${pepObj.vitae}`}
|
|
style={{ display: 'flex', width: 139, height: 27, background: '#E5F2FF', borderRadius: 14, cursor: "pointer", alignItems: 'center', justifyContent: 'center' }}>
|
|
<div style={{ width: 18, height: 18 }}>
|
|
<img src="/assets/images/hrImg/resume.png" alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ marginLeft: 10, fontSize: 13, color: '#4A4A4A' }}>
|
|
他/她的简历
|
|
</div>
|
|
</a>) : ''
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ borderRight: '1px solid #DCDEE0', margin: '-16px 0px -20px 0px' }}></div>
|
|
<div style={{ marginLeft: 30, marginTop: 8, paddingRight: 30, width: '38%' }}>
|
|
<div style={{ color: '#4A4A4A', fontSize: 14 }}>
|
|
他/她的历史工作经历与职务
|
|
</div>
|
|
<div style={{ marginTop: 12, fontSize: 13, display: 'flex', alignItems: 'center' }}>
|
|
<div style={{ width: 4, height: 4, borderRadius: '50%', marginRight: 6, background: '#005ABD' }}></div>{pepObj.occupationalHistory || '暂无'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ borderBottom: '1px solid #DCDEE0', margin: '24px 0px 24px -20px' }}></div>
|
|
<div style={{ paddingLeft: 17 }}>
|
|
<div style={{ color: '#4A4A4A', fontSize: 14, marginBottom: 10, fontWeight: 'bold' }}>
|
|
基本动作
|
|
</div>
|
|
<div style={{ color: '#4A4A4A', fontSize: 14, display: 'flex', alignItems: 'center' }}>
|
|
时间筛选：<DatePicker onChange={handleChange} type="dateRange" density="compact" style={{ width: 242 }} />
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', margin: '5px 0px 12px' }}>
|
|
<div style={{ width: 18, height: 18 }}>
|
|
<img src="/assets/images/hrImg/information.png" alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ marginLeft: 12, color: '#4A4A4A', fontSize: 14 }}>
|
|
加班信息
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '100%' }}>
|
|
<div style={{ width: 540, boxShadow: '0px 0px 8px 1px rgba(0,0,0,0.1)', padding: 13 }}>
|
|
<ReactECharts
|
|
option={option}
|
|
notMerge={true}
|
|
lazyUpdate={true}
|
|
theme={"theme_name"}
|
|
/>
|
|
</div>
|
|
<div style={{ marginLeft: 17, boxShadow: '0px 0px 8px 1px rgba(0,0,0,0.1)', width: '64.424%' }}>
|
|
<div style={{ display: 'flex', background: '#F4F5FC', height: 40, alignItems: 'center', width: '100%' }}>
|
|
<div style={{ width: 6, height: 40, background: '#005ABD' }}></div>
|
|
<div style={{ display: 'flex', alignItems: 'center', marginLeft: 24, width: '19.964%' }}>
|
|
<div style={{ fontSize: 13, color: '#4A4A4A' }}>
|
|
加班次数：
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
|
|
{tableData.length}次
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', width: '19.124%' }}>
|
|
<div style={{ fontSize: 13, color: '#4A4A4A' }}>
|
|
工作日：
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
|
|
{tableStatistic.sumPayWorkday / 3600 + tableStatistic.sumTakeRestWorkday / 3600 || 0}小时
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', width: '19.87%' }}>
|
|
<div style={{ fontSize: 13, color: '#4A4A4A' }}>
|
|
普通假日：
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
|
|
{tableStatistic.sumTakeRestDayoff / 3600 + tableStatistic.sumPayDayoff / 3600 || 0}小时
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', width: '19.03%' }}>
|
|
<div style={{ fontSize: 13, color: '#4A4A4A' }}>
|
|
法定假日：
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
|
|
{tableStatistic.sumPayFestivals / 3600 + tableStatistic.sumTakeRestFestivals / 3600 || 0}小时
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', width: '19.217%' }}>
|
|
<div style={{ fontSize: 13, color: '#4A4A4A' }}>
|
|
累计加班时长：
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
|
|
{(tableStatistic.sumPayWorkday / 3600 + tableStatistic.sumTakeRestWorkday / 3600 + tableStatistic.sumTakeRestDayoff / 3600 + tableStatistic.sumPayDayoff / 3600 + tableStatistic.sumPayFestivals / 3600 + tableStatistic.sumTakeRestFestivals / 3600) || 0}小时
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Table
|
|
columns={columns}
|
|
dataSource={tableData}
|
|
bordered={false}
|
|
empty="暂无数据"
|
|
pagination={false}
|
|
scroll={scroll}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', margin: '19px 0px 12px' }}>
|
|
<div style={{ width: 18, height: 18 }}>
|
|
<img src="/assets/images/hrImg/information.png" alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ marginLeft: 12, color: '#4A4A4A', fontSize: 14 }}>
|
|
请假信息
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', width: '100%' }}>
|
|
<div style={{ width: 540, boxShadow: '0px 0px 8px 1px rgba(0,0,0,0.1)', padding: 13 }}>
|
|
<ReactECharts
|
|
option={leaveoption}
|
|
notMerge={true}
|
|
lazyUpdate={true}
|
|
theme={"theme_name2"}
|
|
/>
|
|
</div>
|
|
<div style={{ marginLeft: 17, boxShadow: '0px 0px 8px 1px rgba(0,0,0,0.1)', width: '64.424%' }}>
|
|
<div style={{ display: 'flex', background: '#F4F5FC', height: 40, alignItems: 'center', width: '100%' }}>
|
|
<div style={{ width: 6, height: 40, background: '#005ABD' }}></div>
|
|
<div style={{ display: 'flex', alignItems: 'center', marginLeft: 24, width: '16.964%' }}>
|
|
<div style={{ fontSize: 13, color: '#4A4A4A' }}>
|
|
请假次数：
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
|
|
{leaveData.length}次
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', width: '15.124%' }}>
|
|
<div style={{ fontSize: 13, color: '#4A4A4A' }}>
|
|
年休假：
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
|
|
{leaveStatistic.year}小时
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', width: '15.87%' }}>
|
|
<div style={{ fontSize: 13, color: '#4A4A4A' }}>
|
|
事假：
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
|
|
{leaveStatistic.compassionate}小时
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', width: '15.03%' }}>
|
|
<div style={{ fontSize: 13, color: '#4A4A4A' }}>
|
|
病假：
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
|
|
{leaveStatistic.sick}小时
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', width: '18%' }}>
|
|
<div style={{ fontSize: 13, color: '#4A4A4A' }}>
|
|
其他类型请假：
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
|
|
{leaveStatistic.other}小时
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', width: '16.217%' }}>
|
|
<div style={{ fontSize: 13, color: '#4A4A4A' }}>
|
|
合计请假时长：
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
|
|
{leaveStatistic.all}小时
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Table
|
|
columns={leaveColumns}
|
|
dataSource={leaveData}
|
|
bordered={false}
|
|
empty="暂无数据"
|
|
pagination={false}
|
|
scroll={scroll}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{//新增档案弹框
|
|
personnelModal ?
|
|
<PersonnelModal
|
|
visible={true}
|
|
editObj={pepObj}
|
|
adminEdit={true}
|
|
cancel={() => {
|
|
setPersonnelModal(false);
|
|
}}
|
|
close={() => {
|
|
setPersonnelModal(false);
|
|
peopleDetail()
|
|
}} >
|
|
</PersonnelModal> : ''
|
|
}
|
|
{//删除弹框
|
|
deleteModal ?
|
|
<DeleteModal
|
|
visible={true}
|
|
pepUserId={pepUserId}
|
|
cancel={() => {
|
|
setDeleteModal(false);
|
|
}}
|
|
close={() => {
|
|
setDeleteModal(false);
|
|
history.goBack()
|
|
}} >
|
|
</DeleteModal> : ''
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
const { auth, global, members, webSocket } = state;
|
|
return {
|
|
// loading: members.isRequesting,
|
|
// user: auth.user,
|
|
actions: global.actions,
|
|
// members: members.data,
|
|
// socket: webSocket.socket
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Rest);
|
|
|