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