|
|
|
@ -5,6 +5,8 @@ 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 '../style.less' |
|
|
|
@ -18,7 +20,8 @@ const Rest = (props) => { |
|
|
|
const [tableData, setTableData] = useState([{}, {}, {}, {}, {}, {}, {}]) //表格数据 |
|
|
|
const [leaveData, setLeaveData] = useState([{}, {}, {}, {}, {}, {}, {}]) //表格数据 |
|
|
|
|
|
|
|
const [deleteModal, setDeleteModal] = useState(false) //表格数据 |
|
|
|
const [deleteModal, setDeleteModal] = useState(false) //删除弹框 |
|
|
|
const [personnelModal, setPersonnelModal] = useState(false);//档案弹框 |
|
|
|
const [columns, setColumns] = useState([//表格属性 |
|
|
|
{ |
|
|
|
title: "实例号", |
|
|
|
@ -125,35 +128,27 @@ const Rest = (props) => { |
|
|
|
]) |
|
|
|
|
|
|
|
const [pepUserId, setPepUserId] = useState(''); |
|
|
|
const [pepObj, setPepObj] = useState({}); |
|
|
|
const scroll = useMemo(() => ({ y: 248 }), []); |
|
|
|
|
|
|
|
const [startDate, setStartDate] = useState('');//开始时间 |
|
|
|
const [endDate, setEndDate] = useState('');//结束时间 |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
getMemberSearchList() |
|
|
|
getWorkOption()//加班信息 |
|
|
|
getLeaveOption()//请假信息 |
|
|
|
setPepUserId(history?.location?.search.slice(1)) |
|
|
|
peopleDetail() |
|
|
|
}, []) |
|
|
|
function peopleDetail () { |
|
|
|
dispatch(humanAffairs.getMemberList({keywordTarget:'number',keyword:history?.location?.search.slice(1)})).then((res) => {//搜索项企用户 |
|
|
|
dispatch(humanAffairs.getMemberList({ keywordTarget: 'number', keyword: history?.location?.search.slice(1) })).then((res) => {//搜索项企用户 |
|
|
|
if (res.success) { |
|
|
|
console.log('res.success', res.payload.data); |
|
|
|
// setArchivesList(res.payload.data) |
|
|
|
// let mytableData = JSON.parse(JSON.stringify(res.payload.data.rows)); |
|
|
|
// let mytableKey = [] |
|
|
|
// for (let index = 0; index < mytableData.length; index++) { |
|
|
|
// mytableData[index].key = mytableData[index].id |
|
|
|
// mytableKey.push(mytableData[index].id) |
|
|
|
// } |
|
|
|
// setTableKey(mytableKey) |
|
|
|
// setTableData(mytableData) |
|
|
|
// setLimits(res.payload.data.count) |
|
|
|
// mylimits.current = res.payload.data.rows.length |
|
|
|
setPepObj(res.payload?.data?.rows[0]) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
function getWorkOption () {//请假折线图 |
|
|
|
dispatch(humanAffairs.getMemberOvertime({pepUserId:history?.location?.search.slice(1),startDate:'',endDate:''})).then((res) => {//搜索项企用户 |
|
|
|
dispatch(humanAffairs.getMemberOvertime({ pepUserId: history?.location?.search.slice(1), startDate: startDate, endDate: endDate })).then((res) => {//搜索项企用户 |
|
|
|
if (res.success) { |
|
|
|
console.log('res.success', res.payload.data); |
|
|
|
} |
|
|
|
@ -244,6 +239,11 @@ const Rest = (props) => { |
|
|
|
setOption(data) |
|
|
|
} |
|
|
|
function getLeaveOption () {//请假折线图 |
|
|
|
dispatch(humanAffairs.getMemberVacate({ pepUserId: history?.location?.search.slice(1), startDate: startDate, endDate: endDate })).then((res) => {//搜索项企用户 |
|
|
|
if (res.success) { |
|
|
|
console.log('res.success', res.payload.data); |
|
|
|
} |
|
|
|
}) |
|
|
|
var date = []; |
|
|
|
date.push([2017, 6, 1].join("/")); |
|
|
|
date.push([2017, 6, 2].join("/")); |
|
|
|
@ -309,21 +309,10 @@ const Rest = (props) => { |
|
|
|
} |
|
|
|
setLeaveOption(data) |
|
|
|
} |
|
|
|
function getMemberSearchList () {//搜索项企用户 |
|
|
|
dispatch(humanAffairs.getMemberSearch()).then((res) => {//搜索项企用户 |
|
|
|
if (res.success) { |
|
|
|
// let mytableData = JSON.parse(JSON.stringify(res.payload.data.rows)); |
|
|
|
// let mytableKey = [] |
|
|
|
// for (let index = 0; index < mytableData.length; index++) { |
|
|
|
// mytableData[index].key = mytableData[index].id |
|
|
|
// mytableKey.push(mytableData[index].id) |
|
|
|
// } |
|
|
|
// setTableKey(mytableKey) |
|
|
|
// setTableData(mytableData) |
|
|
|
// setLimits(res.payload.data.count) |
|
|
|
// mylimits.current = res.payload.data.rows.length |
|
|
|
} |
|
|
|
}) |
|
|
|
function handleChange (date) { |
|
|
|
setStartDate(moment(date[0]).format('YYYY-MM-DD')) |
|
|
|
setEndDate(moment(date[1]).format('YYYY-MM-DD')) |
|
|
|
|
|
|
|
} |
|
|
|
return ( |
|
|
|
<> |
|
|
|
@ -346,10 +335,14 @@ const Rest = (props) => { |
|
|
|
<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 }}>张小小的个人档案</div> |
|
|
|
<div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#033C9A', marginLeft: 8 }}>{pepObj.userName}的个人档案</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', marginRight: 20 }}> |
|
|
|
<div style={{ padding: '6px 20px', background: '#0F7EFB', color: '#FFFFFF', fontSize: 14, cursor: "pointer" }}> |
|
|
|
<div style={{ padding: '6px 20px', background: '#0F7EFB', color: '#FFFFFF', fontSize: 14, cursor: "pointer" }} |
|
|
|
onClick={() => { |
|
|
|
setPersonnelModal(true); |
|
|
|
}} |
|
|
|
> |
|
|
|
编辑档案 |
|
|
|
</div> |
|
|
|
<div style={{ padding: '6px 20px', background: '#FF5254', color: '#FFFFFF', fontSize: 14, cursor: "pointer", marginLeft: 20 }} |
|
|
|
@ -362,7 +355,7 @@ const Rest = (props) => { |
|
|
|
<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="/assets/images/hrImg/mc.png" alt="" style={{ width: '100%', height: '100%' }} /> |
|
|
|
<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' }}> |
|
|
|
@ -377,7 +370,7 @@ const Rest = (props) => { |
|
|
|
证件号： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}> |
|
|
|
3211011290000022 |
|
|
|
{pepObj.idNumber || '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', width: '59.18%' }}> |
|
|
|
@ -385,26 +378,26 @@ const Rest = (props) => { |
|
|
|
联系方式： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}> |
|
|
|
13221212211 |
|
|
|
{pepObj.phoneNumber || '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', marginTop: 8 }}> |
|
|
|
<div style={{ display: 'flex', width: '40.82%' }}> |
|
|
|
<div style={{ display: 'flex', width: '52.57%' }}> |
|
|
|
<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: '47.43%' }}> |
|
|
|
<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> |
|
|
|
@ -414,7 +407,7 @@ const Rest = (props) => { |
|
|
|
出生日期： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}> |
|
|
|
1998年6月15日 |
|
|
|
{pepObj.birthday || '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', width: '46.834%' }}> |
|
|
|
@ -422,27 +415,27 @@ const Rest = (props) => { |
|
|
|
政治面貌： |
|
|
|
</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: '52.57%' }}> |
|
|
|
<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 }}> |
|
|
|
22岁 |
|
|
|
{pepObj.birthday ? moment(new Date()).diff(pepObj.birthday, 'years') + '岁' : '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', width: '47.43%' }}> |
|
|
|
<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> |
|
|
|
@ -452,7 +445,7 @@ const Rest = (props) => { |
|
|
|
婚育状态： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}> |
|
|
|
已婚已育 |
|
|
|
{pepObj.marital || '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', width: '46.834%' }}> |
|
|
|
@ -460,7 +453,7 @@ const Rest = (props) => { |
|
|
|
工作地点： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}> |
|
|
|
江西-南昌 |
|
|
|
{pepObj.workPlace || '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -477,7 +470,7 @@ const Rest = (props) => { |
|
|
|
毕业院校： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}> |
|
|
|
江苏大学 |
|
|
|
{pepObj.graduatedFrom || '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', width: '56.95' }}> |
|
|
|
@ -485,7 +478,7 @@ const Rest = (props) => { |
|
|
|
毕业时间： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}> |
|
|
|
2022年12月31日 |
|
|
|
{pepObj.graduationDate || '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -495,7 +488,7 @@ const Rest = (props) => { |
|
|
|
学历： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#005ABD', fontSize: 13 }}> |
|
|
|
本科 |
|
|
|
{pepObj.educationBackground || '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', width: '56.95' }}> |
|
|
|
@ -503,7 +496,7 @@ const Rest = (props) => { |
|
|
|
专业： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}> |
|
|
|
法学 |
|
|
|
{pepObj.specialty || '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -520,16 +513,22 @@ const Rest = (props) => { |
|
|
|
员工编号： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#005ABD', fontSize: 13 }}> |
|
|
|
0001 |
|
|
|
{pepObj.userCode || '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', width: '85.285%' }}> |
|
|
|
<div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}> |
|
|
|
所属部门： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#FFFFFF', fontSize: 12, padding: '0px 4px 1px', background: 'rgba(0,90,189,0.8)' }}> |
|
|
|
行业服务部 |
|
|
|
</div> |
|
|
|
{ |
|
|
|
pepObj.departmrnt?.map((ite, idx) => { |
|
|
|
return ( |
|
|
|
<div key={idx} style={{ color: '#FFFFFF', fontSize: 12, padding: '0px 4px 1px', background: 'rgba(0,90,189,0.8)', marginRight: 4 }}> |
|
|
|
{ite.name} |
|
|
|
</div> |
|
|
|
) |
|
|
|
}) |
|
|
|
} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ marginTop: 9, display: 'flex' }}> |
|
|
|
@ -538,7 +537,7 @@ const Rest = (props) => { |
|
|
|
员工职位： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#005ABD', fontSize: 13 }}> |
|
|
|
产品经理 |
|
|
|
{pepObj.roleName || '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', width: '19.072%' }}> |
|
|
|
@ -546,7 +545,7 @@ const Rest = (props) => { |
|
|
|
入职时间： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}> |
|
|
|
0001 |
|
|
|
{pepObj.hiredate || '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', width: '21.395%' }}> |
|
|
|
@ -554,7 +553,7 @@ const Rest = (props) => { |
|
|
|
转试用期时间： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}> |
|
|
|
2022年12月31日 |
|
|
|
{pepObj.turnProbationPeriod || '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', width: '' }}> |
|
|
|
@ -562,7 +561,7 @@ const Rest = (props) => { |
|
|
|
转正时间： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}> |
|
|
|
2022年12月31日 |
|
|
|
{pepObj.regularDate || '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -572,7 +571,7 @@ const Rest = (props) => { |
|
|
|
工作经验： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#005ABD', fontSize: 13 }}> |
|
|
|
10年 |
|
|
|
{pepObj.experienceYear ? pepObj.experienceYear + '年' : '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ marginTop: 9, display: 'flex', width: '19.072%' }}> |
|
|
|
@ -580,7 +579,7 @@ const Rest = (props) => { |
|
|
|
入职年限： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}> |
|
|
|
10年 |
|
|
|
{pepObj.hiredate ? moment(new Date()).diff(pepObj.hiredate, 'years') + '年' : '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ marginTop: 9, display: 'flex', width: '39.4%' }}> |
|
|
|
@ -588,17 +587,21 @@ const Rest = (props) => { |
|
|
|
试用期： |
|
|
|
</div> |
|
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}> |
|
|
|
3个月 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div 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' }}> |
|
|
|
他/她的简历 |
|
|
|
{pepObj.regularDate ? moment(pepObj.regularDate).diff(pepObj.hiredate, 'months', true) + '个月' : '暂无'} |
|
|
|
</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> |
|
|
|
@ -608,7 +611,7 @@ const Rest = (props) => { |
|
|
|
他/她的历史工作经历与职务 |
|
|
|
</div> |
|
|
|
<div style={{ marginTop: 12, fontSize: 13, display: 'flex', alignItems: 'center' }}> |
|
|
|
<div style={{ width: 4, height: 4, borderRadius: '50%', marginRight: 6, background: '#005ABD' }}></div>2017年就职于XX公司，担任总经理职务 |
|
|
|
<div style={{ width: 4, height: 4, borderRadius: '50%', marginRight: 6, background: '#005ABD' }}></div>{pepObj.occupationalHistory || '暂无'} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -618,7 +621,7 @@ const Rest = (props) => { |
|
|
|
基础动作 |
|
|
|
</div> |
|
|
|
<div style={{ color: '#4A4A4A', fontSize: 14, display: 'flex', alignItems: 'center' }}> |
|
|
|
时间筛选：<DatePicker type="dateRange" density="compact" style={{ width: 242 }} /> |
|
|
|
时间筛选：<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 }}> |
|
|
|
@ -769,24 +772,31 @@ const Rest = (props) => { |
|
|
|
</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} |
|
|
|
// pepList={pepList} |
|
|
|
// memberEdit={memberEdit} |
|
|
|
// editObj={editObj} |
|
|
|
// pomsList={pomsList} |
|
|
|
// anxinDelete={anxinDelete} |
|
|
|
// anxincloudArr={anxincloudArr} |
|
|
|
cancel={() => { |
|
|
|
setDeleteModal(false); |
|
|
|
// getMemberSearchList() |
|
|
|
}} |
|
|
|
close={() => { |
|
|
|
setDeleteModal(false); |
|
|
|
// getUserList() |
|
|
|
history.goBack() |
|
|
|
}} > |
|
|
|
</DeleteModal> : '' |
|
|
|
|
