8 changed files with 521 additions and 14 deletions
@ -0,0 +1,134 @@ |
|||||
|
import React, { useEffect, useState, useMemo } from 'react'; |
||||
|
import { connect } from 'react-redux'; |
||||
|
import { Table, Pagination, Skeleton, DatePicker } from '@douyinfe/semi-ui'; |
||||
|
import { SkeletonScreen } from "$components"; |
||||
|
import '../style.less' |
||||
|
|
||||
|
const HighQuarter = (props) => { |
||||
|
const { dispatch, actions } = props |
||||
|
const [limits, setLimits] = useState()//每页实际条数 |
||||
|
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' }]); |
||||
|
|
||||
|
|
||||
|
function handleRow(record, index) {// 给偶数行设置斑马纹 |
||||
|
if (index % 2 === 0) { |
||||
|
return { |
||||
|
style: { |
||||
|
background: '#FAFCFF', |
||||
|
} |
||||
|
}; |
||||
|
} else { |
||||
|
return {}; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const columns = [{ |
||||
|
title: '序号', |
||||
|
dataIndex: 'id', |
||||
|
key: 'id', |
||||
|
width: 60, |
||||
|
render: (text, record, index) => index + 1 |
||||
|
}, { |
||||
|
title: '月份', |
||||
|
dataIndex: 'year', |
||||
|
key: 'year', |
||||
|
width: 80 |
||||
|
}, |
||||
|
{ |
||||
|
title: '报表', |
||||
|
dataIndex: 'statement', |
||||
|
key: 'statement', |
||||
|
width: 200, |
||||
|
// render: (text, r, index) => { |
||||
|
|
||||
|
// } |
||||
|
}, { |
||||
|
title: '操作', |
||||
|
dataIndex: 'action', |
||||
|
width: 120, |
||||
|
render: (text, record) => { |
||||
|
return <div> |
||||
|
<span style={{ color: '#1890FF', cursor: 'pointer' }}>下载</span> |
||||
|
</div> |
||||
|
} |
||||
|
}]; |
||||
|
|
||||
|
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", }}>QUARTERLY ASSESSMENT</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style={{ width: '100%', height: '35px', lineHeight: '35px', marginTop: '20px' }}> |
||||
|
查询时间：<DatePicker defaultValue={new Date()} type="month" style={{ width: 200 }} /> |
||||
|
</div> |
||||
|
<div style={{ marginTop: 20 }}> |
||||
|
<Skeleton |
||||
|
// loading={loading} |
||||
|
loading={false} |
||||
|
active={true} |
||||
|
placeholder={SkeletonScreen()} |
||||
|
> |
||||
|
<Table |
||||
|
columns={columns} |
||||
|
dataSource={tableData} |
||||
|
bordered={false} |
||||
|
empty="暂无数据" |
||||
|
pagination={false} |
||||
|
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 |
||||
|
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> |
||||
|
</div> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
function mapStateToProps(state) { |
||||
|
const { auth, global } = state; |
||||
|
return { |
||||
|
user: auth.user, |
||||
|
actions: global.actions, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(HighQuarter); |
||||
Loading…
Reference in new issue