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
14 KiB
303 lines
14 KiB
import React, { useEffect, useState, useRef, useMemo } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Table, Button, Pagination, Skeleton, Popconfirm, Tooltip } from '@douyinfe/semi-ui';
|
|
import { SkeletonScreen, Setup } from "$components";
|
|
import ImportPositionRatingModal from '../components/importPositionRating';
|
|
import '../style.less';
|
|
|
|
const PositionRating = (props) => {
|
|
const { dispatch, actions, memberList } = props
|
|
const { getMemberList, getPositionRating, postPositionRating, delPositionRating } = actions.humanAffairs;
|
|
|
|
const form = useRef();//表单
|
|
let [archivesList, setArchivesList] = useState([]);//人员列表
|
|
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
|
|
const [order, setOrder] = useState({ orderBy: 'hiredate', orderDirection: 'DESC' }); //页码信息
|
|
const [importModal, setImportModal] = useState(false);
|
|
const [limits, setLimits] = useState()//每页实际条数
|
|
const page = useRef(query.page);//哪一页
|
|
|
|
useEffect(() => {
|
|
getMainList()
|
|
}, [query])
|
|
|
|
function getMainList(queryObj) {
|
|
dispatch(getPositionRating(queryObj || query)).then((res) => {
|
|
if (res.success) {
|
|
setArchivesList(res.payload?.data?.rows)
|
|
setLimits(res.payload?.data?.count)
|
|
}
|
|
})
|
|
}
|
|
//获取表格属性设置
|
|
const columns = [{
|
|
title: '序号',
|
|
width: 70,
|
|
dataIndex: "number",
|
|
key: "number",
|
|
render: (_, r, index) => <span>{index + 1}</span>,
|
|
}, {
|
|
title: (
|
|
<div>
|
|
<img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 部门名称
|
|
</div>
|
|
),
|
|
width: 160,
|
|
dataIndex: "department",
|
|
key: "department",
|
|
render: (_, r, index) => {
|
|
return (
|
|
<div style={{ display: 'flex' }}>
|
|
{
|
|
r.department.map((ite, idx) => {
|
|
let departmentsArr = []
|
|
for (let i = 0; i < r.department.length; i++) {
|
|
departmentsArr.push(r.department[i].depName)
|
|
}
|
|
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.depName}
|
|
</div>) : ('')
|
|
|
|
}
|
|
{
|
|
r.department.length > 1 && idx == 1 ? (
|
|
<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", }}>
|
|
+{r.department.length - 1}
|
|
</div>
|
|
</Tooltip>
|
|
) : ('')
|
|
}
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
)
|
|
},
|
|
}, {
|
|
title: (
|
|
<div>
|
|
<img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 姓名
|
|
</div>
|
|
),
|
|
width: 100,
|
|
dataIndex: "userName",
|
|
key: "userName",
|
|
render: (_, r, index) => {
|
|
return (r.userName ? r.userName : '-');
|
|
},
|
|
}, {
|
|
title: (
|
|
<div>
|
|
<img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 岗位
|
|
</div>
|
|
),
|
|
width: 120,
|
|
dataIndex: "userPost",
|
|
key: "userPost",
|
|
}, {
|
|
title: '评级时间',
|
|
width: 120,
|
|
dataIndex: "ratingTime",
|
|
key: "ratingTime",
|
|
}, {
|
|
title: '理论基础测评成绩',
|
|
width: 150,
|
|
dataIndex: "theoryBasicScore",
|
|
key: "theoryBasicScore",
|
|
}, {
|
|
title: '理论基础测评是否通过（≥60）',
|
|
width: 130,
|
|
dataIndex: "theoryPassed",
|
|
key: "theoryPassed",
|
|
}, {
|
|
title: '评级总成绩',
|
|
width: 100,
|
|
dataIndex: "totalScore",
|
|
key: "totalScore",
|
|
}, {
|
|
title: '评级总成绩是否通过（K≥60）',
|
|
width: 130,
|
|
dataIndex: "totalRatingPassed",
|
|
key: "totalRatingPassed",
|
|
}, {
|
|
title: '技术职级等级',
|
|
width: 150,
|
|
dataIndex: "technicalGrade",
|
|
key: "technicalGrade",
|
|
}, {
|
|
title: '操作',
|
|
width: 100,
|
|
dataIndex: "action",
|
|
key: "action",
|
|
render: (text, record) => <div style={{ color: "#1890FF" }}><Popconfirm
|
|
style={{ minWidth: "max-content" }}
|
|
title="提示"
|
|
content="确认删除条信息？"
|
|
onConfirm={() => { handleDel(record.id) }}
|
|
position={"leftBottom"}
|
|
>
|
|
<a style={{ cursor: 'pointer' }}>删除</a>
|
|
</Popconfirm></div>
|
|
}];
|
|
|
|
function handleRow(record, index) {//斑马条纹
|
|
// 给偶数行设置斑马纹
|
|
if (index % 2 === 0) {
|
|
return {
|
|
style: {
|
|
background: '#FAFCFF',
|
|
}
|
|
};
|
|
} else {
|
|
return {};
|
|
}
|
|
}
|
|
const handleImportModal = () => {
|
|
if (!memberList.length) {
|
|
dispatch(getMemberList())//查询人员列表
|
|
}
|
|
setImportModal(true);
|
|
}
|
|
|
|
const handleImportOk = (dataToSave) => {
|
|
dispatch(postPositionRating(dataToSave)).then(res => {
|
|
setImportModal(false);
|
|
setQuery({ limit: 10, page: 0 });
|
|
getMainList({ limit: 10, page: 0 });
|
|
})
|
|
}
|
|
const handleDel = (id) => {
|
|
dispatch(delPositionRating(id)).then(res => {
|
|
setQuery({ limit: 10, page: 0 });
|
|
getMainList({ limit: 10, page: 0 });
|
|
})
|
|
}
|
|
const scroll = useMemo(() => ({}), []);
|
|
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", }}>POSITION RATING</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ marginRight: 20, marginTop: 18 }}>
|
|
<div style={{ display: 'flex', margin: '16px 0px', justifyContent: 'flex-end' }}>
|
|
<div style={{ display: 'flex', marginRight: 20 }}>
|
|
<div style={{ padding: '6px 20px', background: '#0F7EFB', color: '#FFFFFF', fontSize: 14, cursor: "pointer" }}
|
|
onClick={() => { handleImportModal(); }}
|
|
>
|
|
导入
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ border: '1px solid #C7E1FF', background: '#F4F8FF', borderRadius: 2, height: 32, width: 669, padding: '8px 0px 7px 12px', display: 'flex', alignItems: 'center', color: '#0F7EFB', fontSize: 12 }}>
|
|
<img src="/assets/images/hrImg/!.png" alt="" style={{ width: 14, height: 14, marginRight: 8 }} />
|
|
表格中带有认证标识"
|
|
<img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} />
|
|
"信息的为系统基础数据，来源于项企PEP、钉钉等系统，其他数据均为导入或自定义数据
|
|
</div>
|
|
<div style={{ marginTop: 20 }}>
|
|
<Skeleton
|
|
// loading={loading}
|
|
loading={false}
|
|
active={true}
|
|
placeholder={SkeletonScreen()}
|
|
>
|
|
<Table
|
|
columns={columns}
|
|
dataSource={archivesList}
|
|
bordered={false}
|
|
empty="暂无数据"
|
|
pagination={false}
|
|
// onChange={({ sorter }) => {
|
|
// if (sorter.key == 'userCode') {
|
|
// if (sorter.sortOrder == 'descend') {
|
|
// setOrder({ orderBy: 'code', orderDirection: 'DESC' })
|
|
// } else {
|
|
// setOrder({ orderBy: 'code', orderDirection: 'ASC' })
|
|
// }
|
|
// } else if (sorter.key == 'age') {
|
|
// if (sorter.sortOrder == 'descend') {
|
|
// setOrder({ orderBy: 'age', orderDirection: 'DESC' })
|
|
// } else {
|
|
// setOrder({ orderBy: 'age', orderDirection: 'ASC' })
|
|
// }
|
|
// } else {
|
|
// if (sorter.sortOrder == 'descend') {
|
|
// setOrder({ orderBy: 'hiredate', orderDirection: 'DESC' })
|
|
// } else {
|
|
// setOrder({ orderBy: 'hiredate', orderDirection: 'ASC' })
|
|
// }
|
|
// }
|
|
// }}
|
|
onRow={handleRow}
|
|
scroll={scroll}
|
|
/>
|
|
</Skeleton>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
padding: "20px 20px",
|
|
}}
|
|
>
|
|
<div>
|
|
</div>
|
|
<div style={{ display: 'flex', }}>
|
|
<span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}>
|
|
共{limits}条信息
|
|
</span>
|
|
<Pagination
|
|
className="22"
|
|
total={limits}
|
|
showSizeChanger
|
|
currentPage={query.page + 1}
|
|
pageSizeOpts={[10, 20, 30, 40]}
|
|
onChange={(currentPage, pageSize) => {
|
|
setQuery({ limit: pageSize, page: currentPage - 1 });
|
|
page.current = currentPage - 1
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{importModal ?
|
|
<ImportPositionRatingModal
|
|
memberList={memberList}
|
|
onOk={handleImportOk}
|
|
onCancel={() => { setImportModal(false) }}
|
|
/> : ''}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
const { auth, global, MemberSearch, MemberList } = state;
|
|
return {
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
xqMembers: MemberSearch.data,
|
|
memberList: MemberList.data && MemberList.data.rows || []
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(PositionRating);
|
|
|