|
|
|
@ -1,16 +1,28 @@ |
|
|
|
import React, { useEffect, useState, useMemo } from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import { Table, Pagination, Skeleton, DatePicker } from '@douyinfe/semi-ui'; |
|
|
|
import { Table, Pagination, Skeleton, DatePicker,Button } from '@douyinfe/semi-ui'; |
|
|
|
import { SkeletonScreen } from "$components"; |
|
|
|
import '../style.less' |
|
|
|
import moment from 'moment' |
|
|
|
|
|
|
|
const Quarter = (props) => { |
|
|
|
const { dispatch, actions } = props |
|
|
|
const [limits, setLimits] = useState()//每页实际条数 |
|
|
|
const [year, setYear] = useState(null) |
|
|
|
const [month, setMonth] = useState(null) |
|
|
|
const { dispatch, actions, employeeAssessmentList } = props |
|
|
|
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 |
|
|
|
const [tableData, setTableData] = useState([{ id: 1, year: '1月', statement: '中层季度测试12.xlsx' }, { id: 2, year: '2月', statement: '测试12.xlsx' }, { id: 3, year: '3月', statement: '测试12.xlsx' }, { id: 4, year: '4月', statement: '测试12.xlsx' }, { id: 5, year: '5月', statement: '测试12.xlsx' }, { id: 6, year: '6月', statement: '测试12.xlsx' }, { id: 7, year: '7月', statement: '测试12.xlsx' }, { id: 8, year: '8月', statement: '测试12.xlsx' }, { id: 9, year: '9月', statement: '测试12.xlsx' }, { id: 10, year: '10月', statement: '测试12.xlsx' }, { id: 11, year: '11月', statement: '测试12.xlsx' }, { id: 12, year: '12月', statement: '测试12.xlsx' }]); |
|
|
|
|
|
|
|
|
|
|
|
const { getemployeeAssessmentList } = actions.humanAffairs; |
|
|
|
const [downloadUrl, setDownloadUrl] = useState(null); |
|
|
|
const [downloadKey, setDownloadKey] = useState(null); |
|
|
|
useEffect(() => { |
|
|
|
getList() |
|
|
|
}, [query]) |
|
|
|
function getList() { |
|
|
|
dispatch(getemployeeAssessmentList(query, 3)) |
|
|
|
} |
|
|
|
function exportReport(url){ |
|
|
|
setDownloadUrl(`/_file-server${url}`); |
|
|
|
setDownloadKey(Math.random()); |
|
|
|
} |
|
|
|
function handleRow(record, index) {// 给偶数行设置斑马纹 |
|
|
|
if (index % 2 === 0) { |
|
|
|
return { |
|
|
|
@ -31,14 +43,15 @@ const Quarter = (props) => { |
|
|
|
render: (text, record, index) => index + 1 |
|
|
|
}, { |
|
|
|
title: '月份', |
|
|
|
dataIndex: 'year', |
|
|
|
key: 'year', |
|
|
|
width: 80 |
|
|
|
dataIndex: 'yearMonth', |
|
|
|
key: 'yearMonth', |
|
|
|
width: 80, |
|
|
|
render: (text, record, index) => `${record.year}-${record.month}` |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '报表', |
|
|
|
dataIndex: 'statement', |
|
|
|
key: 'statement', |
|
|
|
dataIndex: 'name', |
|
|
|
key: 'name', |
|
|
|
width: 200, |
|
|
|
// render: (text, r, index) => { |
|
|
|
|
|
|
|
@ -49,11 +62,24 @@ const Quarter = (props) => { |
|
|
|
width: 120, |
|
|
|
render: (text, record) => { |
|
|
|
return <div> |
|
|
|
<span style={{ color: '#1890FF', cursor: 'pointer' }}>下载</span> |
|
|
|
<span onClick={() => exportReport(record.path)} style={{ color: '#1890FF', cursor: 'pointer' }}>下载</span> |
|
|
|
</div> |
|
|
|
} |
|
|
|
}]; |
|
|
|
function getTime(date, dateString) { |
|
|
|
if (date) { |
|
|
|
setYear(moment(date).format('YYYY')) |
|
|
|
setMonth(moment(date).format('MM')) |
|
|
|
} else { |
|
|
|
setYear(null) |
|
|
|
setMonth(null) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
function search() { |
|
|
|
let query = { limit: 10, page: 0, year: year, month: month } |
|
|
|
setQuery(query) |
|
|
|
} |
|
|
|
const scroll = useMemo(() => ({}), []); |
|
|
|
return ( |
|
|
|
<> |
|
|
|
@ -61,20 +87,21 @@ const Quarter = (props) => { |
|
|
|
<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 }}>员工考核</div> |
|
|
|
<div style={{ color: '#033C9A', fontSize: 14, margin: '0px 8px' }}>/</div> |
|
|
|
<div style={{ color: '#033C9A', fontSize: 14 }}>季度考核</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", }}>QUARTERLY ASSESSMENT</div> |
|
|
|
<div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#033C9A', marginLeft: 8 }}>正式员工考核</div> |
|
|
|
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>FORMAL EMPLOYEE ASSESSMENT</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ width: '100%', height: '35px', lineHeight: '35px', marginTop: '20px' }}> |
|
|
|
查询时间：<DatePicker defaultValue={new Date()} type="month" style={{ width: 200 }} /> |
|
|
|
查询时间：<DatePicker type="month" style={{ width: 200 }} onChange={getTime} /> |
|
|
|
<Button onClick={search} theme='solid' type='primary' style={{ marginLeft: 15 }}>查询</Button> |
|
|
|
</div> |
|
|
|
<div style={{ marginTop: 20 }}> |
|
|
|
<Skeleton |
|
|
|
@ -85,7 +112,7 @@ const Quarter = (props) => { |
|
|
|
> |
|
|
|
<Table |
|
|
|
columns={columns} |
|
|
|
dataSource={tableData} |
|
|
|
dataSource={employeeAssessmentList.rows} |
|
|
|
bordered={false} |
|
|
|
empty="暂无数据" |
|
|
|
pagination={false} |
|
|
|
@ -101,15 +128,15 @@ const Quarter = (props) => { |
|
|
|
<div></div> |
|
|
|
<div style={{ display: 'flex', }}> |
|
|
|
<span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}> |
|
|
|
共{limits}条信息 |
|
|
|
共{employeeAssessmentList.count}条信息 |
|
|
|
</span> |
|
|
|
<Pagination |
|
|
|
total={limits} |
|
|
|
total={employeeAssessmentList.count} |
|
|
|
showSizeChanger |
|
|
|
currentPage={query.page + 1} |
|
|
|
pageSizeOpts={[10, 20, 30, 40]} |
|
|
|
onChange={(currentPage, pageSize) => { |
|
|
|
setQuery({ limit: pageSize, page: currentPage - 1 }); |
|
|
|
setQuery({ limit: pageSize, page: currentPage - 1, year: year, month: month }); |
|
|
|
page.current = currentPage - 1 |
|
|
|
}} |
|
|
|
/> |
|
|
|
@ -117,17 +144,22 @@ const Quarter = (props) => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{ |
|
|
|
downloadUrl ? <iframe key={downloadKey} src={downloadUrl} style={{ display: 'none' }} /> : '' |
|
|
|
} |
|
|
|
</div> |
|
|
|
</> |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
function mapStateToProps(state) { |
|
|
|
const { auth, global } = state; |
|
|
|
const { auth, global, employeeAssessmentList } = state; |
|
|
|
return { |
|
|
|
user: auth.user, |
|
|
|
actions: global.actions, |
|
|
|
employeeAssessmentList: employeeAssessmentList.data || {} |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps)(Quarter); |
|
|
|
|
