下载中心和关于我们模块
This commit is contained in:
linxd
68
src/pages/download/download.less
Normal file
68
src/pages/download/download.less
Normal file
@ -0,0 +1,68 @@
|
||||
@import '~antd/es/style/themes/default.less';
|
||||
|
||||
.downloadContainer {
|
||||
padding: 24px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.downloadRow {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menuCol {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.downloadMenu {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.downloadContent {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.downloadCardList {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.downloadCard {
|
||||
margin-bottom: 24px;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cardDate {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
margin-bottom: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.downloadIcon {
|
||||
font-size: 24px;
|
||||
margin-right: 8px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.downloadButton {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
@ -1,5 +1,240 @@
|
||||
import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Menu, Row, Col, Pagination, Button, Typography, Space, message } from 'antd';
|
||||
import { FileOutlined, BookOutlined, DownloadOutlined } from '@ant-design/icons';
|
||||
import styles from './download.less';
|
||||
import { downloadFile } from './service';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
// 模拟模板文件数据
|
||||
const mockTemplateFiles = [
|
||||
{
|
||||
id: '1',
|
||||
title: '公开招标操作手册',
|
||||
description: '公开招标各角色操作手册',
|
||||
publishDate: '2025年2月3日',
|
||||
type: 'template',
|
||||
icon: <FileOutlined />,
|
||||
fileName: '公开招标操作手册.pdf',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '询价采购模板',
|
||||
description: '标准询价采购流程文档模板',
|
||||
publishDate: '2025年1月15日',
|
||||
type: 'template',
|
||||
icon: <FileOutlined />,
|
||||
fileName: '询价采购模板.docx',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '竞争性谈判模板',
|
||||
description: '竞争性谈判标准文档模板',
|
||||
publishDate: '2024年12月20日',
|
||||
type: 'template',
|
||||
icon: <FileOutlined />,
|
||||
fileName: '竞争性谈判模板.docx',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: '单一来源采购模板',
|
||||
description: '单一来源采购申请及实施模板',
|
||||
publishDate: '2024年12月5日',
|
||||
type: 'template',
|
||||
icon: <FileOutlined />,
|
||||
fileName: '单一来源采购模板.docx',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: '供应商评估表格',
|
||||
description: '供应商资质与能力评估标准表格',
|
||||
publishDate: '2024年11月18日',
|
||||
type: 'template',
|
||||
icon: <FileOutlined />,
|
||||
fileName: '供应商评估表格.xlsx',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
title: '合同范本模板',
|
||||
description: '标准采购合同范本',
|
||||
publishDate: '2024年11月1日',
|
||||
type: 'template',
|
||||
icon: <FileOutlined />,
|
||||
fileName: '合同范本模板.docx',
|
||||
},
|
||||
];
|
||||
|
||||
// 模拟操作手册数据
|
||||
const mockManuals = [
|
||||
{
|
||||
id: '7',
|
||||
title: '供应商注册指南',
|
||||
description: '供应商平台注册及资质提交操作指南',
|
||||
publishDate: '2025年1月25日',
|
||||
type: 'manual',
|
||||
icon: <BookOutlined />,
|
||||
fileName: '供应商注册指南.pdf',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
title: '投标操作指南',
|
||||
description: '电子投标全流程操作手册',
|
||||
publishDate: '2025年1月10日',
|
||||
type: 'manual',
|
||||
icon: <BookOutlined />,
|
||||
fileName: '投标操作指南.pdf',
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
title: '在线开标指南',
|
||||
description: '在线开标会议参与指南',
|
||||
publishDate: '2024年12月15日',
|
||||
type: 'manual',
|
||||
icon: <BookOutlined />,
|
||||
fileName: '在线开标指南.pdf',
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
title: '评标专家操作手册',
|
||||
description: '评标专家系统使用指南',
|
||||
publishDate: '2024年11月28日',
|
||||
type: 'manual',
|
||||
icon: <BookOutlined />,
|
||||
fileName: '评标专家操作手册.pdf',
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
title: '合同签署指南',
|
||||
description: '电子合同签署流程指南',
|
||||
publishDate: '2024年11月10日',
|
||||
type: 'manual',
|
||||
icon: <BookOutlined />,
|
||||
fileName: '合同签署指南.pdf',
|
||||
},
|
||||
];
|
||||
|
||||
const DownloadPage: React.FC = () => {
|
||||
return <>DownloadPage</>;
|
||||
const [activeMenu, setActiveMenu] = useState<string>('template');
|
||||
const [downloadData, setDownloadData] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 6,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
// 根据当前选中的菜单加载对应的下载数据
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
// 模拟API请求
|
||||
setTimeout(() => {
|
||||
const data = activeMenu === 'template' ? mockTemplateFiles : mockManuals;
|
||||
setDownloadData(data);
|
||||
setPagination((prevPagination) => ({
|
||||
...prevPagination,
|
||||
total: data.length,
|
||||
current: 1,
|
||||
}));
|
||||
setLoading(false);
|
||||
}, 500);
|
||||
}, [activeMenu]);
|
||||
|
||||
// 处理菜单切换
|
||||
const handleMenuClick = (e: any) => {
|
||||
setActiveMenu(e.key);
|
||||
};
|
||||
|
||||
// 处理分页变化
|
||||
const handlePageChange = (page: number, pageSize?: number) => {
|
||||
setPagination({
|
||||
...pagination,
|
||||
current: page,
|
||||
pageSize: pageSize || pagination.pageSize,
|
||||
});
|
||||
};
|
||||
|
||||
// 处理下载按钮点击
|
||||
const handleDownload = async (id: string, fileName: string) => {
|
||||
try {
|
||||
await downloadFile(id, fileName);
|
||||
} catch (error) {
|
||||
message.error('下载失败，请稍后重试');
|
||||
}
|
||||
};
|
||||
|
||||
// 计算当前页显示的数据
|
||||
const getCurrentPageData = () => {
|
||||
const { current, pageSize } = pagination;
|
||||
const startIndex = (current - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
return downloadData.slice(startIndex, endIndex);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.downloadContainer}>
|
||||
<Row gutter={16} className={styles.downloadRow}>
|
||||
<Col span={4} className={styles.menuCol}>
|
||||
<Menu
|
||||
mode="vertical"
|
||||
selectedKeys={[activeMenu]}
|
||||
onClick={handleMenuClick}
|
||||
className={styles.downloadMenu}
|
||||
>
|
||||
<Menu.Item key="template" icon={<FileOutlined />}>
|
||||
模板文件
|
||||
</Menu.Item>
|
||||
<Menu.Item key="manual" icon={<BookOutlined />}>
|
||||
操作手册
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Col>
|
||||
|
||||
<Col span={20}>
|
||||
<div className={styles.downloadContent}>
|
||||
<Title level={4}>{activeMenu === 'template' ? '模板文件' : '操作手册'}</Title>
|
||||
|
||||
<Row gutter={[16, 16]} className={styles.downloadCardList}>
|
||||
{getCurrentPageData().map((item) => (
|
||||
<Col xs={24} sm={12} md={8} key={item.id}>
|
||||
<Card
|
||||
hoverable
|
||||
className={styles.downloadCard}
|
||||
loading={loading}
|
||||
>
|
||||
<Space direction="vertical" size="small" style={{ width: '100%' }}>
|
||||
<div className={styles.cardTitle}>
|
||||
<span className={styles.downloadIcon}>{item.icon}</span>
|
||||
{item.title}
|
||||
</div>
|
||||
<div className={styles.cardDate}>{item.publishDate}</div>
|
||||
<Text type="secondary" ellipsis={{ tooltip: true }}>{item.description}</Text>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<DownloadOutlined />}
|
||||
className={styles.downloadButton}
|
||||
onClick={() => handleDownload(item.id, item.fileName)}
|
||||
>
|
||||
下载
|
||||
</Button>
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
<Pagination
|
||||
current={pagination.current}
|
||||
pageSize={pagination.pageSize}
|
||||
total={pagination.total}
|
||||
onChange={handlePageChange}
|
||||
showTotal={(total) => `共 ${total} 条记录`}
|
||||
style={{ marginTop: 24, textAlign: 'right' }}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DownloadPage;
|
||||
|
||||
75
src/pages/download/service.ts
Normal file
75
src/pages/download/service.ts
Normal file
@ -0,0 +1,75 @@
|
||||
import { message } from 'antd';
|
||||
import request from '@/utils/request';
|
||||
|
||||
/**
|
||||
* 获取下载中心文件列表
|
||||
* @param params 查询参数
|
||||
*/
|
||||
export async function getDownloadList(params: {
|
||||
type: string;
|
||||
current: number;
|
||||
pageSize: number;
|
||||
}) {
|
||||
try {
|
||||
// 实际项目中应该通过API获取数据
|
||||
// return request('/api/download/list', {
|
||||
// method: 'GET',
|
||||
// params,
|
||||
// });
|
||||
|
||||
// 模拟API请求返回数据
|
||||
return Promise.resolve({
|
||||
success: true,
|
||||
data: {
|
||||
list: [],
|
||||
total: 0,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
message.error('获取下载列表失败');
|
||||
return {
|
||||
success: false,
|
||||
data: {
|
||||
list: [],
|
||||
total: 0,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
* @param fileId 文件ID
|
||||
* @param fileName 文件名称
|
||||
*/
|
||||
export async function downloadFile(fileId: string, fileName: string) {
|
||||
try {
|
||||
// 实际项目中应该通过API下载文件
|
||||
// const response = await request(`/api/download/file/${fileId}`, {
|
||||
// method: 'GET',
|
||||
// responseType: 'blob',
|
||||
// });
|
||||
|
||||
// 创建下载链接
|
||||
// const blob = new Blob([response]);
|
||||
// const url = window.URL.createObjectURL(blob);
|
||||
// const link = document.createElement('a');
|
||||
// link.href = url;
|
||||
// link.download = fileName;
|
||||
// document.body.appendChild(link);
|
||||
// link.click();
|
||||
// window.URL.revokeObjectURL(url);
|
||||
// document.body.removeChild(link);
|
||||
|
||||
// 模拟下载成功
|
||||
message.success(`文件"${fileName}"开始下载`);
|
||||
return {
|
||||
success: true,
|
||||
};
|
||||
} catch (error) {
|
||||
message.error(`下载文件"${fileName}"失败`);
|
||||
return {
|
||||
success: false,
|
||||
};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user