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.
89 lines
3.8 KiB
89 lines
3.8 KiB
import React, { useEffect, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Select, Input, Table, Spin, Button } from '@douyinfe/semi-ui';
|
|
import { RESERVEITEM_TYPE } from '../constants';
|
|
import '../style.less'
|
|
|
|
const ReserveItemsDepSummary = (props) => {
|
|
const { dispatch, actions, isRequesting, reserveItemReport } = props;
|
|
const [downloadUrl, setDownloadUrl] = useState(null);
|
|
const [downloadKey, setDownloadKey] = useState(null);
|
|
useEffect(() => {
|
|
dispatch(actions.businessManagement.getReserveItemReport(RESERVEITEM_TYPE.depSummary));
|
|
}, []);
|
|
|
|
const exportReport = (url) => {
|
|
setDownloadUrl(`/_file-server${url}`);
|
|
setDownloadKey(Math.random());
|
|
}
|
|
const columns = [
|
|
{
|
|
title: '序号',
|
|
dataIndex: 'name',
|
|
render: (text, record, index) => index + 1
|
|
},
|
|
{
|
|
title: '时间',
|
|
dataIndex: 'date',
|
|
},
|
|
{
|
|
title: '名称',
|
|
dataIndex: 'path',
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
render: (text, record, indexe) => (<Button theme='solid' type='secondary' onClick={() => exportReport(record.path)} > 导出</Button >)
|
|
},
|
|
];
|
|
|
|
|
|
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: 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", }}>SUMMARY OF DEPARTMENTAL RESERVE ITEMS</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ borderBottom: '1px solid #F2F3F5', marginLeft: '-20px', marginBottom: 16 }}></div>
|
|
{
|
|
downloadUrl ? <iframe key={downloadKey} src={downloadUrl} style={{ display: 'none' }} /> : ''
|
|
}
|
|
<div style={{ marginBottom: 22 }}>
|
|
<Spin spinning={isRequesting}>
|
|
<Table
|
|
rowKey={"id"}
|
|
columns={columns}
|
|
dataSource={reserveItemReport}
|
|
/>
|
|
</Spin>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
|
|
function mapStateToProps(state) {
|
|
const { auth, global, reserveItemReport } = state;
|
|
return {
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
reserveItemReport: reserveItemReport.data || [],
|
|
isRequesting: reserveItemReport.isRequesting
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(ReserveItemsDepSummary);
|