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.
271 lines
16 KiB
271 lines
16 KiB
import React, { useEffect, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Select, Input, Button, CheckboxGroup } from '@douyinfe/semi-ui';
|
|
import { IconSearch } from '@douyinfe/semi-icons';
|
|
import PersonnelModal from '../components/personnelModal';
|
|
import ImportMembersModal from './import-members-modal'
|
|
import '../style.less'
|
|
|
|
const Rest = (props) => {
|
|
const { dispatch, actions, history, user, loading, socket, xqMembers } = props
|
|
|
|
const { humanAffairs } = actions;
|
|
let [departmentValue, setDepartmentValue] = useState('');
|
|
|
|
let [archivesList, setArchivesList] = useState(['', '', '', '', '', '', '', '', '', '']);
|
|
const [personnelModal, setPersonnelModal] = useState(false);//档案弹框
|
|
const [exportModalVs, setExportModalVs] = useState(false);
|
|
const options = [
|
|
{ label: '离职', value: 'abc' },
|
|
{ label: '请假', value: 'hotsoon' },
|
|
{ label: '放假', value: 'pipixia' },
|
|
{ label: '在岗', value: 'toutiao' },
|
|
{ label: '加班', value: 'jiaban' }
|
|
]
|
|
|
|
let [seachValue, setSeachValue] = useState('');
|
|
let [typeChoose, setTypeChoose] = useState([]);
|
|
useEffect(() => {
|
|
getMemberSearchList()
|
|
}, [])
|
|
|
|
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 typeOnChange(e) {//角色选择
|
|
console.log('e.target.value', e.target.value);
|
|
setTypeChoose(e.target.value);
|
|
}
|
|
function seachValueChange() {
|
|
|
|
}
|
|
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={departmentValue} onChange={setDepartmentValue} placeholder='部门' style={{ width: 200 }} showClear>
|
|
<Select.Option value='abc'>抖音</Select.Option>
|
|
<Select.Option value='ulikecam'>轻颜相机</Select.Option>
|
|
<Select.Option value='xigua'>西瓜视频</Select.Option>
|
|
</Select>
|
|
</div>
|
|
<div style={{ marginLeft: 12, marginRight: 18 }}>
|
|
<Input suffix={<IconSearch />}
|
|
showClear
|
|
placeholder='请输入或选择关键词'
|
|
value={seachValue}
|
|
style={{ width: 346 }}
|
|
onChange={seachValueChange}>
|
|
</Input>
|
|
</div>
|
|
<Button theme='solid' type='primary' style={{ width: 80, borderRadius: 2, height: 32, background: '#DBECFF', color: '#005ABD' }}>查询</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' }}>
|
|
11条
|
|
</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>
|
|
<CheckboxGroup options={options} onChange={typeOnChange} value={typeChoose} direction='horizontal' aria-label="CheckboxGroup 示例" />
|
|
</div>
|
|
<div style={{ display: 'flex', marginLeft: 30, alignItems: 'center' }}>
|
|
<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>
|
|
</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="/assets/images/hrImg/mc.png" alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ marginLeft: 4 }}>
|
|
<div style={{ display: 'flex' }}>
|
|
<div style={{ color: '#005ABD', fontSize: 14, marginRight: 6 }}>
|
|
0012
|
|
</div>
|
|
<div style={{ padding: '0px 4px 1px 4px ', color: '#FFFFFF', fontSize: 12, background: 'rgba(0,90,189,0.8)', borderRadius: 2 }}>
|
|
行业服务部
|
|
</div>
|
|
{/* <div>
|
|
|
|
</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 }}>
|
|
刘昊然
|
|
</div>
|
|
<div style={{ background: '#FFFBE3', padding: '2px 6px 1px', color: '#D3A000', fontSize: 12, borderRadius: '8px 0px 8px 0px' }}>
|
|
请假中
|
|
</div>
|
|
</div>
|
|
<div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12 }}>
|
|
23岁
|
|
</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/man.png" alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ fontSize: 14, color: '#282828', marginLeft: 12, marginRight: 9 }}>
|
|
男
|
|
</div>
|
|
</div>
|
|
<div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12 }}>
|
|
未婚
|
|
</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 }}>
|
|
人力资源部副部长
|
|
</div>
|
|
</div>
|
|
<div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12 }}>
|
|
9年经验
|
|
</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 }}>
|
|
入职3年
|
|
</div>
|
|
</div>
|
|
<div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12 }}>
|
|
本科
|
|
</div>
|
|
</div>
|
|
<div style={{ marginTop: 16, marginLeft: 4 }}>
|
|
<Button theme='solid' type='primary' style={{ width: 212, borderRadius: 17, height: 28 }}
|
|
onClick={() => {
|
|
history.push(`/personnelFilesDetail`);
|
|
}}>详情</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{//成员弹框
|
|
personnelModal ?
|
|
<PersonnelModal
|
|
visible={true}
|
|
// pepList={pepList}
|
|
// memberEdit={memberEdit}
|
|
// editObj={editObj}
|
|
// pomsList={pomsList}
|
|
// anxinDelete={anxinDelete}
|
|
// anxincloudArr={anxincloudArr}
|
|
cancel={() => {
|
|
setPersonnelModal(false);
|
|
}}
|
|
close={() => {
|
|
setPersonnelModal(false);
|
|
// getUserList()
|
|
}} >
|
|
</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);
|
|
|