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.
303 lines
20 KiB
303 lines
20 KiB
import React, { useEffect, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Select, Input, Button, RadioGroup, Radio, Tooltip } from '@douyinfe/semi-ui';
|
|
import { IconSearch } from '@douyinfe/semi-icons';
|
|
import PersonnelModal from '../components/personnelModal';
|
|
import ImportMembersModal from './import-members-modal'
|
|
import '../style.less'
|
|
import moment from 'moment'
|
|
import { set } from 'nprogress';
|
|
|
|
const Rest = (props) => {
|
|
const { dispatch, actions, history, user, loading, socket, xqMembers } = props
|
|
|
|
const { humanAffairs } = actions;
|
|
|
|
let [archivesList, setArchivesList] = useState([]);
|
|
const [personnelModal, setPersonnelModal] = useState(false);//档案弹框
|
|
const [exportModalVs, setExportModalVs] = useState(false);
|
|
const [keyword, setKeyword] = useState('');//搜索内容
|
|
const [keywordTarget, setKeywordTarget] = useState('');//搜索类型
|
|
const [downloadUrl, setDownloadUrl] = useState('')
|
|
const optionsList = {
|
|
dimission: '离职',
|
|
onJob: '在职',
|
|
vacate: '请假',
|
|
inOffice: '在岗',
|
|
dayoff: '放假',
|
|
}
|
|
let [typeChoose, setTypeChoose] = useState('');
|
|
useEffect(() => {
|
|
getMemberSearchList()
|
|
}, [typeChoose])
|
|
|
|
function getMemberSearchList () {//搜索项企用户
|
|
dispatch(humanAffairs.getMemberSearch())
|
|
dispatch(humanAffairs.getMemberList({ keywordTarget, keyword, state: typeChoose })).then((res) => {//搜索项企用户
|
|
if (res.success) {
|
|
setArchivesList(res.payload?.data?.rows)
|
|
}
|
|
})
|
|
}
|
|
|
|
function typeOnChange (e) {//角色选择
|
|
setTypeChoose(e.target.value);
|
|
}
|
|
function seachValueChange (value) {
|
|
setKeyword(value)
|
|
}
|
|
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: '#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: 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={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>EMPLOYEE FILE</div>
|
|
</div>
|
|
<div style={{ display: 'flex', marginRight: 20 }}>
|
|
<div style={{ padding: '6px 20px', background: '#0F7EFB', color: '#FFFFFF', fontSize: 14, cursor: "pointer" }}
|
|
onClick={() => {
|
|
setPersonnelModal(true);
|
|
}}>
|
|
新增档案
|
|
</div>
|
|
<div onClick={() => setExportModalVs(true)} style={{ padding: '6px 20px', background: '#00BA85', color: '#FFFFFF', fontSize: 14, cursor: "pointer", marginLeft: 20 }}>
|
|
导入员工信息
|
|
</div>
|
|
</div>
|
|
</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: 9 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<div style={{ display: 'flex', alignItems: 'baseline' }}>
|
|
<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={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>EMPLOYEE FILE DETAILS</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', marginTop: 16, marginBottom: 17 }}>
|
|
<div>
|
|
<Select value={keywordTarget} onChange={setKeywordTarget} placeholder='请选择搜索类型' style={{ width: 200 }} showClear>
|
|
<Select.Option value='role'>职位</Select.Option>
|
|
<Select.Option value='dep'>部门</Select.Option>
|
|
<Select.Option value='number'>编号</Select.Option>
|
|
<Select.Option value='name'>姓名</Select.Option>
|
|
</Select>
|
|
</div>
|
|
<div style={{ marginLeft: 12, marginRight: 18 }}>
|
|
<Input suffix={<IconSearch />}
|
|
showClear
|
|
placeholder='请输入或选择关键词'
|
|
value={keyword}
|
|
style={{ width: 346 }}
|
|
onChange={seachValueChange}>
|
|
</Input>
|
|
</div>
|
|
<Button theme='solid' type='primary' style={{ width: 80, borderRadius: 2, height: 32, background: '#DBECFF', color: '#005ABD' }}
|
|
onClick={() => {
|
|
dispatch(humanAffairs.getMemberList({ keywordTarget, keyword, state: typeChoose })).then((res) => {//搜索项企用户
|
|
if (res.success) {
|
|
setArchivesList(res.payload.data.rows)
|
|
}
|
|
})
|
|
}}>查询</Button>
|
|
</div>
|
|
<div style={{ borderBottom: '1px solid #F2F3F5', marginLeft: '-20px', marginBottom: 16 }}></div>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 22 }}>
|
|
<div style={{ display: 'flex', }}>
|
|
<div style={{ color: '#646566', fontSize: 14 }}>
|
|
当前显示
|
|
</div>
|
|
<div style={{ color: '#005ABD', fontSize: 14, margin: '0px 10px' }}>
|
|
{archivesList.length || 0}条
|
|
</div>
|
|
<div style={{ color: '#646566', fontSize: 14 }}>
|
|
结果
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', marginRight: 30, alignItems: 'center' }}>
|
|
<div style={{ color: '#4A4A4A', fontSize: 13 }}>
|
|
人员状态：
|
|
</div>
|
|
<div>
|
|
<RadioGroup onChange={typeOnChange} value={typeChoose} aria-label="单选组合示例" name="demo-radio-group">
|
|
<Radio value=''>全部</Radio>
|
|
<Radio value='dimission'>离职</Radio>
|
|
<Radio value='onJob'>在职</Radio>
|
|
</RadioGroup>
|
|
</div>
|
|
<div style={{ display: 'flex', marginLeft: 30, alignItems: 'center', cursor: 'pointer' }} onClick={() => {
|
|
setDownloadUrl(`members/export?token=${user.token}×tamp=${moment().valueOf()}`)
|
|
|
|
}}>
|
|
<div style={{ width: 20, height: 20 }}>
|
|
<img src="/assets/images/hrImg/export.png" alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ marginLeft: 4, color: '#005ABD', fontSize: 13 }} >
|
|
导出
|
|
</div>
|
|
{
|
|
downloadUrl ? <iframe src={`/_api/${downloadUrl}`} style={{ display: 'none' }} /> : ''
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', marginLeft: 30 }}>
|
|
{
|
|
archivesList?.map((item, index) => {
|
|
return (
|
|
<div key={index} style={{ display: 'flex', width: 368, border: '1px solid #F9F9F9', boxShadow: '0px 0px 4px 1px rgba(0,0,0,0.08)', padding: 10, marginRight: 40, marginBottom: 20 }}>
|
|
<div style={{ width: 128, height: 192 }}>
|
|
<img src={item.idPhoto ? '/_file-server/' + item.idPhoto : '/assets/images/hrImg/defaultAvatar.png'} alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ marginLeft: 4 }}>
|
|
<div style={{ display: 'flex' }}>
|
|
<div style={{ color: '#005ABD', fontSize: 14, marginRight: 6 }}>
|
|
{item.userCode}
|
|
</div>
|
|
{
|
|
item.departmrnt.map((ite, idx) => {
|
|
let departmentsArr = []
|
|
for (let i = 0; i < item.departmrnt.length; i++) {
|
|
departmentsArr.push(item.departmrnt[i].name)
|
|
}
|
|
return (
|
|
<div key={idx} style={{ display: 'flex' }}>
|
|
{idx == 0 ?
|
|
(<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>) : ('')
|
|
|
|
}
|
|
{
|
|
item.departmrnt.length > 1 && idx == 1 ? (
|
|
<Tooltip content={departmentsArr.join(',')} trigger="click" style={{ lineHeight: 2 }}>
|
|
<div style={{ padding: '0px 4px 1px 4px ', color: '#FFFFFF', fontSize: 12, background: 'rgba(0,90,189,0.8)', borderRadius: 2, marginRight: 4, cursor: "pointer", }}>
|
|
...
|
|
</div>
|
|
</Tooltip>
|
|
) : ('')
|
|
}
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
<div style={{ marginTop: 16, display: 'flex', marginLeft: 4 }}>
|
|
<div style={{ display: 'flex', width: 159 }}>
|
|
<div style={{ width: 20, height: 20 }}>
|
|
<img src="/assets/images/hrImg/mc.png" alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#282828', marginLeft: 12, marginRight: 9 }}>
|
|
{item.userName}
|
|
</div>
|
|
<div style={{
|
|
background: item.state == 'dimission' ? '#FFDDDE' : item.state == 'onJob' ? '#EAF4FF' : item.state == 'vacate' ? '#FFFBE3' : item.state == 'inOffice' ? '#F0FFEA' : '#E4FEFF',
|
|
color: item.state == 'dimission' ? '#F62D30' : item.state == 'onJob' ? '#0F7EFB' : item.state == 'vacate' ? '#D3A000' : item.state == 'inOffice' ? '#58A61F' : '#00B6B9',
|
|
padding: '2px 6px 1px', fontSize: 12, borderRadius: '8px 0px 8px 0px'
|
|
}}>
|
|
{
|
|
optionsList[item.state]
|
|
}
|
|
</div>
|
|
</div>
|
|
<div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12 }}>
|
|
{item.birthday ? moment(new Date()).diff(item.birthday, 'years') + '岁' : '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ marginTop: 16, display: 'flex', marginLeft: 4 }}>
|
|
<div style={{ display: 'flex', width: 159 }}>
|
|
<div style={{ width: 20, height: 20 }}>
|
|
<img src={item.gender == '女' ? "/assets/images/hrImg/woman.png" : "/assets/images/hrImg/man.png"} alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#282828', marginLeft: 12, marginRight: 9 }}>
|
|
{item.gender || '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12 }}>
|
|
{item.marital || '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ marginTop: 16, display: 'flex', marginLeft: 4 }}>
|
|
<div style={{ display: 'flex', width: 159 }}>
|
|
<div style={{ width: 20, height: 20 }}>
|
|
<img src="/assets/images/hrImg/post.png" alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#282828', marginLeft: 12, marginRight: 9 }}>
|
|
{item.roleName || '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12 }}>
|
|
{item.experienceYear ? item.experienceYear + '年经验' : '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ marginTop: 16, display: 'flex', marginLeft: 4 }}>
|
|
<div style={{ display: 'flex', width: 159 }}>
|
|
<div style={{ width: 20, height: 20 }}>
|
|
<img src="/assets/images/hrImg/year.png" alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#282828', marginLeft: 12, marginRight: 9 }}>
|
|
{item.hiredate ? '入职' + moment(new Date()).diff(item.hiredate, 'years') + '年' : '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12 }}>
|
|
{item.educationBackground || '暂无'}
|
|
</div>
|
|
</div>
|
|
<div style={{ marginTop: 16, marginLeft: 4 }}>
|
|
<Button theme='solid' type='primary' style={{ width: 212, borderRadius: 17, height: 28 }}
|
|
onClick={() => {
|
|
history.push(`/personnelFilesDetail?${item.pepUserId}`);
|
|
}}>详情</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{//新增档案弹框
|
|
personnelModal ?
|
|
<PersonnelModal
|
|
visible={true}
|
|
cancel={() => {
|
|
setPersonnelModal(false);
|
|
}}
|
|
close={() => {
|
|
setPersonnelModal(false);
|
|
getMemberSearchList()
|
|
}} >
|
|
</PersonnelModal> : ''
|
|
}
|
|
{
|
|
exportModalVs ? <ImportMembersModal user={user}
|
|
onCancel={() => setExportModalVs(false)} xqMembers={xqMembers} /> : ''
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
function mapStateToProps (state) {
|
|
const { auth, global, MemberSearch, webSocket } = state;
|
|
return {
|
|
// loading: members.isRequesting,
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
xqMembers: MemberSearch.data,
|
|
// socket: webSocket.socket
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Rest);
|
|
|