政策法规和通知中心
This commit is contained in:
linxd
@ -44,6 +44,11 @@ export default [
|
|||||||
path: '/policy',
|
path: '/policy',
|
||||||
component: '@/pages/policy/policy',
|
component: '@/pages/policy/policy',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'policyInfo',
|
||||||
|
path: '/policy/policyInfo',
|
||||||
|
component: '@/pages/policy/policyInfo',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'notice',
|
name: 'notice',
|
||||||
path: '/notice',
|
path: '/notice',
|
||||||
|
|||||||
64
src/pages/notice/notice.less
Normal file
64
src/pages/notice/notice.less
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
@import '~antd/es/style/themes/default.less';
|
||||||
|
|
||||||
|
.noticeContainer {
|
||||||
|
min-height: calc(100vh - 200px);
|
||||||
|
padding: 24px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noticeHeader {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageTitle {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
color: rgb(0, 79, 142);
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noticeRow {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuCol {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuTitle {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 0 16px;
|
||||||
|
color: rgb(0, 79, 142);
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noticeMenu {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentCard {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noticeContent {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableHeader {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableTitle {
|
||||||
|
color: rgb(0, 79, 142);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noticeTitle {
|
||||||
|
color: #333;
|
||||||
|
transition: color 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: rgb(0, 79, 142);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,5 +1,194 @@
|
|||||||
import React from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Table, Menu, Typography, Row, Col, Card } from 'antd';
|
||||||
|
import { history } from 'umi';
|
||||||
|
import { BellOutlined, AppstoreOutlined } from '@ant-design/icons';
|
||||||
|
import styles from './notice.less';
|
||||||
|
|
||||||
|
const { Title } = Typography;
|
||||||
|
|
||||||
|
// 模拟系统更新通知数据
|
||||||
|
const mockSystemNotices = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
title: '系统将于2023年9月15日进行版本升级',
|
||||||
|
publishDate: '2023-09-10',
|
||||||
|
type: 'system',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
title: '招标模块功能优化更新通知',
|
||||||
|
publishDate: '2023-08-25',
|
||||||
|
type: 'system',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
title: '系统安全性能升级维护通知',
|
||||||
|
publishDate: '2023-08-10',
|
||||||
|
type: 'system',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
title: '移动端应用同步更新通知',
|
||||||
|
publishDate: '2023-07-28',
|
||||||
|
type: 'system',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '5',
|
||||||
|
title: '供应商管理模块功能升级通知',
|
||||||
|
publishDate: '2023-07-15',
|
||||||
|
type: 'system',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 模拟其他通知数据
|
||||||
|
const mockOtherNotices = [
|
||||||
|
{
|
||||||
|
id: '6',
|
||||||
|
title: '关于开展2023年度供应商评估工作的通知',
|
||||||
|
publishDate: '2023-09-05',
|
||||||
|
type: 'other',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '7',
|
||||||
|
title: '关于调整采购审批流程的通知',
|
||||||
|
publishDate: '2023-08-20',
|
||||||
|
type: 'other',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '8',
|
||||||
|
title: '关于加强信息安全管理的通知',
|
||||||
|
publishDate: '2023-08-05',
|
||||||
|
type: 'other',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '9',
|
||||||
|
title: '关于开展采购人员培训的通知',
|
||||||
|
publishDate: '2023-07-25',
|
||||||
|
type: 'other',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '10',
|
||||||
|
title: '关于优化供应商准入机制的通知',
|
||||||
|
publishDate: '2023-07-10',
|
||||||
|
type: 'other',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const NoticePage: React.FC = () => {
|
const NoticePage: React.FC = () => {
|
||||||
return <>NoticePage</>;
|
const [activeMenu, setActiveMenu] = useState<string>('system');
|
||||||
|
const [noticeData, setNoticeData] = useState<any[]>([]);
|
||||||
|
const [loading, setLoading] = useState<boolean>(true);
|
||||||
|
const [pagination, setPagination] = useState({
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 根据当前选中的菜单加载对应的通知数据
|
||||||
|
useEffect(() => {
|
||||||
|
setLoading(true);
|
||||||
|
// 模拟API请求
|
||||||
|
setTimeout(() => {
|
||||||
|
const data = activeMenu === 'system' ? mockSystemNotices : mockOtherNotices;
|
||||||
|
setNoticeData(data);
|
||||||
|
setPagination((prevPagination) => ({
|
||||||
|
...prevPagination,
|
||||||
|
total: data.length,
|
||||||
|
}));
|
||||||
|
setLoading(false);
|
||||||
|
}, 500);
|
||||||
|
}, [activeMenu]);
|
||||||
|
|
||||||
|
// 处理菜单切换
|
||||||
|
const handleMenuClick = (e: any) => {
|
||||||
|
setActiveMenu(e.key);
|
||||||
|
setPagination({
|
||||||
|
...pagination,
|
||||||
|
current: 1,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理表格分页变化
|
||||||
|
const handleTableChange = (newPagination: any) => {
|
||||||
|
setPagination(newPagination);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理点击通知标题
|
||||||
|
const handleNoticeClick = (id: string) => {
|
||||||
|
history.push(`/notice/noticeInfo?id=${id}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 定义表格列
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '序号',
|
||||||
|
dataIndex: 'index',
|
||||||
|
key: 'index',
|
||||||
|
width: 80,
|
||||||
|
render: (_: any, __: any, index: number) => {
|
||||||
|
return (pagination.current - 1) * pagination.pageSize + index + 1;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '标题',
|
||||||
|
dataIndex: 'title',
|
||||||
|
key: 'title',
|
||||||
|
render: (text: string, record: any) => (
|
||||||
|
<a onClick={() => handleNoticeClick(record.id)} className={styles.noticeTitle}>
|
||||||
|
{text}
|
||||||
|
</a>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '发布时间',
|
||||||
|
dataIndex: 'publishDate',
|
||||||
|
key: 'publishDate',
|
||||||
|
width: 150,
|
||||||
|
align: 'center' as 'center',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.noticeContainer}>
|
||||||
|
<Row className={styles.noticeRow}>
|
||||||
|
<Col span={3} className={styles.menuCol}>
|
||||||
|
<Menu
|
||||||
|
mode="vertical"
|
||||||
|
selectedKeys={[activeMenu]}
|
||||||
|
onClick={handleMenuClick}
|
||||||
|
className={styles.noticeMenu}
|
||||||
|
>
|
||||||
|
<Menu.Item key="system" icon={<AppstoreOutlined />}>
|
||||||
|
系统更新通知
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item key="other" icon={<BellOutlined />}>
|
||||||
|
其他通知
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col span={21}>
|
||||||
|
<div className={styles.noticeContent}>
|
||||||
|
<Table
|
||||||
|
columns={columns}
|
||||||
|
dataSource={noticeData}
|
||||||
|
rowKey="id"
|
||||||
|
pagination={{
|
||||||
|
...pagination,
|
||||||
|
showTotal: (total) => `共 ${total} 条记录`,
|
||||||
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
|
}}
|
||||||
|
loading={loading}
|
||||||
|
onChange={handleTableChange}
|
||||||
|
bordered
|
||||||
|
className={styles.noticeTable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default NoticePage;
|
export default NoticePage;
|
||||||
|
|||||||
99
src/pages/notice/noticeInfo.less
Normal file
99
src/pages/notice/noticeInfo.less
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
@import '~antd/es/style/themes/default.less';
|
||||||
|
|
||||||
|
.noticeInfoContainer {
|
||||||
|
padding: 24px;
|
||||||
|
background-color: #fff;
|
||||||
|
min-height: calc(100vh - 200px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.noticeInfoHeader {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backButton {
|
||||||
|
color: rgb(0, 79, 142);
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: lighten(rgb(0, 79, 142), 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.noticeInfoContent {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titleContainer {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: rgb(0, 79, 142);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metaInfo {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
color: #999;
|
||||||
|
|
||||||
|
.metaLeft, .metaCenter, .metaRight {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metaCenter {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metaRight {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 16px 0;
|
||||||
|
border-top: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentBody {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.8;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgb(0, 79, 142);
|
||||||
|
}
|
||||||
|
|
||||||
|
ol, ul {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding-left: 24px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loadingContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notFoundContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 400px;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
@ -1,8 +1,247 @@
|
|||||||
import React from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { useLocation } from 'umi';
|
import { useLocation } from 'umi';
|
||||||
|
import { Typography, Button, Divider, Spin, message } from 'antd';
|
||||||
|
import { ArrowLeftOutlined } from '@ant-design/icons';
|
||||||
|
import styles from './noticeInfo.less';
|
||||||
|
|
||||||
|
const { Title, Text } = Typography;
|
||||||
|
|
||||||
|
interface NoticeDetail {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
content: string;
|
||||||
|
publishDate: string;
|
||||||
|
publisher: string;
|
||||||
|
type: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface NoticeDetails {
|
||||||
|
[key: string]: NoticeDetail;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 模拟通知详情数据
|
||||||
|
const mockNoticeDetails: NoticeDetails = {
|
||||||
|
'1': {
|
||||||
|
id: '1',
|
||||||
|
title: '系统将于2023年9月15日进行版本升级',
|
||||||
|
publishDate: '2023-09-10',
|
||||||
|
publisher: '系统管理员',
|
||||||
|
type: 'system',
|
||||||
|
content: `
|
||||||
|
<p>尊敬的用户：</p>
|
||||||
|
<p>为了提供更好的用户体验和系统功能，我们计划于2023年9月15日晚上22:00至次日凌晨2:00进行系统版本升级。在此期间，系统将暂停服务，请您提前做好相关工作安排。</p>
|
||||||
|
|
||||||
|
<p><strong>本次升级内容：</strong></p>
|
||||||
|
<ol>
|
||||||
|
<li>优化招标采购流程，提高操作效率</li>
|
||||||
|
<li>增加供应商评价功能，完善评价体系</li>
|
||||||
|
<li>优化系统响应速度，提升用户体验</li>
|
||||||
|
<li>修复已知问题，提高系统稳定性</li>
|
||||||
|
<li>增强系统安全性，保障数据安全</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<p><strong>升级注意事项：</strong></p>
|
||||||
|
<ol>
|
||||||
|
<li>请您在系统升级前保存并提交所有未完成的工作</li>
|
||||||
|
<li>系统升级后，建议清除浏览器缓存再登录系统</li>
|
||||||
|
<li>如遇到任何问题，请联系系统管理员</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<p>感谢您的理解与支持！</p>
|
||||||
|
<p>系统管理团队</p>
|
||||||
|
<p>2023年9月10日</p>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'2': {
|
||||||
|
id: '2',
|
||||||
|
title: '招标模块功能优化更新通知',
|
||||||
|
publishDate: '2023-08-25',
|
||||||
|
publisher: '系统管理员',
|
||||||
|
type: 'system',
|
||||||
|
content: `
|
||||||
|
<p>尊敬的用户：</p>
|
||||||
|
<p>我们很高兴地通知您，招标模块已完成功能优化升级，现已上线。本次更新主要针对招标流程进行了优化，提高了操作效率和用户体验。</p>
|
||||||
|
|
||||||
|
<p><strong>主要更新内容：</strong></p>
|
||||||
|
<ol>
|
||||||
|
<li>简化招标发布流程，减少操作步骤</li>
|
||||||
|
<li>优化投标文件管理功能，支持批量上传和下载</li>
|
||||||
|
<li>增加招标项目进度跟踪功能，实时掌握项目状态</li>
|
||||||
|
<li>完善评标功能，支持多种评标方法</li>
|
||||||
|
<li>增加中标结果自动生成功能，提高工作效率</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<p><strong>使用建议：</strong></p>
|
||||||
|
<ol>
|
||||||
|
<li>请参考系统内置的操作指南熟悉新功能</li>
|
||||||
|
<li>如有任何问题或建议，请通过系统反馈功能提交</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<p>感谢您对我们工作的支持！</p>
|
||||||
|
<p>系统管理团队</p>
|
||||||
|
<p>2023年8月25日</p>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'6': {
|
||||||
|
id: '6',
|
||||||
|
title: '关于开展2023年度供应商评估工作的通知',
|
||||||
|
publishDate: '2023-09-05',
|
||||||
|
publisher: '采购管理部',
|
||||||
|
type: 'other',
|
||||||
|
content: `
|
||||||
|
<p>各相关部门：</p>
|
||||||
|
<p>为加强供应商管理，提高采购质量，根据《中远海运集团供应商管理实施细则》的要求，现决定开展2023年度供应商评估工作，具体事项通知如下：</p>
|
||||||
|
|
||||||
|
<p><strong>一、评估对象</strong></p>
|
||||||
|
<p>2023年度与我集团有业务往来的所有供应商。</p>
|
||||||
|
|
||||||
|
<p><strong>二、评估时间</strong></p>
|
||||||
|
<p>2023年9月15日至10月15日。</p>
|
||||||
|
|
||||||
|
<p><strong>三、评估内容</strong></p>
|
||||||
|
<ol>
|
||||||
|
<li>供应商资质情况</li>
|
||||||
|
<li>产品质量及服务水平</li>
|
||||||
|
<li>价格合理性</li>
|
||||||
|
<li>交货及时性</li>
|
||||||
|
<li>售后服务响应速度</li>
|
||||||
|
<li>合同履约情况</li>
|
||||||
|
<li>社会责任履行情况</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<p><strong>四、评估方法</strong></p>
|
||||||
|
<p>采用百分制评分，根据评分结果将供应商分为A、B、C、D四个等级。</p>
|
||||||
|
|
||||||
|
<p><strong>五、工作要求</strong></p>
|
||||||
|
<ol>
|
||||||
|
<li>各部门应指定专人负责本部门供应商评估工作</li>
|
||||||
|
<li>评估过程应客观公正，实事求是</li>
|
||||||
|
<li>评估结果应于10月20日前报送采购管理部汇总</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<p>特此通知。</p>
|
||||||
|
<p>采购管理部</p>
|
||||||
|
<p>2023年9月5日</p>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'7': {
|
||||||
|
id: '7',
|
||||||
|
title: '关于调整采购审批流程的通知',
|
||||||
|
publishDate: '2023-08-20',
|
||||||
|
publisher: '采购管理部',
|
||||||
|
type: 'other',
|
||||||
|
content: `
|
||||||
|
<p>各相关部门：</p>
|
||||||
|
<p>为提高采购效率，优化业务流程，经公司研究决定，对采购审批流程进行调整，现将有关事项通知如下：</p>
|
||||||
|
|
||||||
|
<p><strong>一、调整内容</strong></p>
|
||||||
|
<ol>
|
||||||
|
<li>采购金额50万元以下的项目，由部门经理审批后直接提交采购部执行，无需总经理审批</li>
|
||||||
|
<li>采购金额50万元至200万元的项目，由部门经理和分管副总经理审批后提交采购部执行</li>
|
||||||
|
<li>采购金额200万元以上的项目，仍按原流程执行，需经总经理审批</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<p><strong>二、实施时间</strong></p>
|
||||||
|
<p>本通知自2023年9月1日起实施。</p>
|
||||||
|
|
||||||
|
<p><strong>三、注意事项</strong></p>
|
||||||
|
<ol>
|
||||||
|
<li>各部门应严格按照新的审批流程执行，不得擅自变更</li>
|
||||||
|
<li>采购部应加强对采购项目的监督管理，确保采购质量</li>
|
||||||
|
<li>审批人应认真履行审批职责，对采购项目的必要性、合理性进行审核</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<p>特此通知。</p>
|
||||||
|
<p>采购管理部</p>
|
||||||
|
<p>2023年8月20日</p>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const NoticeInfo: React.FC = () => {
|
const NoticeInfo: React.FC = () => {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const id = new URLSearchParams(location.search).get("id")
|
const id = new URLSearchParams(location.search).get("id");
|
||||||
return <>NoticeInfo -------- {id}</>;
|
const [noticeDetail, setNoticeDetail] = useState<NoticeDetail | null>(null);
|
||||||
|
const [loading, setLoading] = useState<boolean>(true);
|
||||||
|
|
||||||
|
// 模拟获取通知详情数据
|
||||||
|
useEffect(() => {
|
||||||
|
// 实际项目中应该通过API获取数据
|
||||||
|
setTimeout(() => {
|
||||||
|
if (id && mockNoticeDetails[id]) {
|
||||||
|
setNoticeDetail(mockNoticeDetails[id]);
|
||||||
|
} else {
|
||||||
|
// 处理ID不存在的情况
|
||||||
|
message.error('通知不存在');
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
}, 500);
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
// 处理返回列表
|
||||||
|
const handleBack = () => {
|
||||||
|
window.history.back();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className={styles.loadingContainer}>
|
||||||
|
<Spin size="large" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!noticeDetail) {
|
||||||
|
return (
|
||||||
|
<div className={styles.notFoundContainer}>
|
||||||
|
<Title level={4}>未找到相关通知</Title>
|
||||||
|
<Button type="primary" onClick={handleBack}>返回列表</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.noticeInfoContainer}>
|
||||||
|
<div className={styles.noticeInfoHeader}>
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
icon={<ArrowLeftOutlined />}
|
||||||
|
onClick={handleBack}
|
||||||
|
className={styles.backButton}
|
||||||
|
>
|
||||||
|
返回列表
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.noticeInfoContent}>
|
||||||
|
<div className={styles.titleContainer}>
|
||||||
|
<Title level={2} className={styles.title}>
|
||||||
|
{noticeDetail.title}
|
||||||
|
</Title>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.metaInfo}>
|
||||||
|
<div className={styles.metaLeft}>
|
||||||
|
<Text type="secondary">发布时间: {noticeDetail.publishDate}</Text>
|
||||||
|
</div>
|
||||||
|
<div className={styles.metaCenter}>
|
||||||
|
<Text type="secondary">发布人: {noticeDetail.publisher}</Text>
|
||||||
|
</div>
|
||||||
|
<div className={styles.metaRight}>
|
||||||
|
<Text type="secondary">
|
||||||
|
通知类型: {noticeDetail.type === 'system' ? '系统更新通知' : '其他通知'}
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Divider className={styles.divider} />
|
||||||
|
|
||||||
|
<div className={styles.contentBody}>
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: noticeDetail.content }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default NoticeInfo;
|
export default NoticeInfo;
|
||||||
|
|||||||
28
src/pages/policy/policy.less
Normal file
28
src/pages/policy/policy.less
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
@import '~antd/es/style/themes/default.less';
|
||||||
|
|
||||||
|
.policyContainer {
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
// min-height: calc(100vh - 200px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.policyHeader {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageTitle {
|
||||||
|
color: rgb(0, 79, 142);
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.policyTitle {
|
||||||
|
color: #333;
|
||||||
|
transition: color 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: rgb(0, 79, 142);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,5 +1,146 @@
|
|||||||
import React from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Table, Typography } from 'antd';
|
||||||
|
import { history } from 'umi';
|
||||||
|
import styles from './policy.less';
|
||||||
|
|
||||||
|
const { Title } = Typography;
|
||||||
|
|
||||||
|
// 模拟政策法规数据
|
||||||
|
const mockPolicyData = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
title: '关于进一步规范招标采购活动的管理办法',
|
||||||
|
publishDate: '2023-08-15',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
title: '中远海运集团供应商管理实施细则(2023年修订版)',
|
||||||
|
publishDate: '2023-07-20',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
title: '关于加强采购合同履约管理的通知',
|
||||||
|
publishDate: '2023-06-10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
title: '中远海运集团招标采购管理办法',
|
||||||
|
publishDate: '2023-05-25',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '5',
|
||||||
|
title: '关于优化招标采购流程提高采购效率的实施意见',
|
||||||
|
publishDate: '2023-04-18',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '6',
|
||||||
|
title: '中远海运集团电子招标采购平台操作指南',
|
||||||
|
publishDate: '2023-03-30',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '7',
|
||||||
|
title: '关于进一步加强采购风险防控的指导意见',
|
||||||
|
publishDate: '2023-02-15',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '8',
|
||||||
|
title: '中远海运集团采购评审专家管理办法',
|
||||||
|
publishDate: '2023-01-10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '9',
|
||||||
|
title: '关于推进绿色采购的实施方案',
|
||||||
|
publishDate: '2022-12-20',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '10',
|
||||||
|
title: '中远海运集团采购人员职业道德规范',
|
||||||
|
publishDate: '2022-11-05',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const PolicyPage: React.FC = () => {
|
const PolicyPage: React.FC = () => {
|
||||||
return <>PolicyPage</>;
|
const [policyData, setPolicyData] = useState<any[]>([]);
|
||||||
|
const [loading, setLoading] = useState<boolean>(true);
|
||||||
|
const [pagination, setPagination] = useState({
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 模拟获取政策法规数据
|
||||||
|
useEffect(() => {
|
||||||
|
// 实际项目中应该通过API获取数据
|
||||||
|
setTimeout(() => {
|
||||||
|
setPolicyData(mockPolicyData);
|
||||||
|
setPagination((prevPagination) => ({
|
||||||
|
...prevPagination,
|
||||||
|
total: mockPolicyData.length,
|
||||||
|
}));
|
||||||
|
setLoading(false);
|
||||||
|
}, 500);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 处理表格分页变化
|
||||||
|
const handleTableChange = (newPagination: any) => {
|
||||||
|
setPagination(newPagination);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理点击政策标题
|
||||||
|
const handlePolicyClick = (id: string) => {
|
||||||
|
history.push(`/policy/policyInfo?id=${id}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 定义表格列
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '序号',
|
||||||
|
dataIndex: 'index',
|
||||||
|
key: 'index',
|
||||||
|
width: 80,
|
||||||
|
render: (_: any, __: any, index: number) => {
|
||||||
|
return (pagination.current - 1) * pagination.pageSize + index + 1;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '标题',
|
||||||
|
dataIndex: 'title',
|
||||||
|
key: 'title',
|
||||||
|
render: (text: string, record: any) => (
|
||||||
|
<a onClick={() => handlePolicyClick(record.id)} className={styles.policyTitle}>
|
||||||
|
{text}
|
||||||
|
</a>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '发布时间',
|
||||||
|
dataIndex: 'publishDate',
|
||||||
|
key: 'publishDate',
|
||||||
|
width: 150,
|
||||||
|
align: 'center' as 'center',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.policyContainer}>
|
||||||
|
<div className={styles.policyTable}>
|
||||||
|
<Table
|
||||||
|
columns={columns}
|
||||||
|
dataSource={policyData}
|
||||||
|
rowKey="id"
|
||||||
|
pagination={{
|
||||||
|
...pagination,
|
||||||
|
showTotal: (total) => `共 ${total} 条记录`,
|
||||||
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
|
}}
|
||||||
|
loading={loading}
|
||||||
|
onChange={handleTableChange}
|
||||||
|
bordered
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default PolicyPage;
|
export default PolicyPage;
|
||||||
|
|||||||
107
src/pages/policy/policyInfo.less
Normal file
107
src/pages/policy/policyInfo.less
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@import '~antd/es/style/themes/default.less';
|
||||||
|
|
||||||
|
.policyInfoContainer {
|
||||||
|
padding: 24px;
|
||||||
|
background-color: #fff;
|
||||||
|
min-height: calc(100vh - 200px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.policyInfoHeader {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backButton {
|
||||||
|
color: rgb(0, 79, 142);
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: lighten(rgb(0, 79, 142), 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.policyInfoContent {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titleContainer {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: rgb(0, 79, 142);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metaInfo {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
color: #999;
|
||||||
|
|
||||||
|
.metaLeft, .metaRight {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metaRight {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 16px 0;
|
||||||
|
border-top: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentBody {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.8;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgb(0, 79, 142);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachmentsSection {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachmentsTitle {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgb(0, 79, 142);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachmentsList {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachmentButton {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loadingContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notFoundContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 400px;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
293
src/pages/policy/policyInfo.tsx
Normal file
293
src/pages/policy/policyInfo.tsx
Normal file
@ -0,0 +1,293 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useLocation } from 'umi';
|
||||||
|
import { Typography, Button, Space, Divider, Row, Col, Spin, message } from 'antd';
|
||||||
|
import { DownloadOutlined, ArrowLeftOutlined, FilePdfOutlined, FileWordOutlined, FileExcelOutlined } from '@ant-design/icons';
|
||||||
|
import styles from './policyInfo.less';
|
||||||
|
|
||||||
|
const { Title, Text } = Typography;
|
||||||
|
|
||||||
|
interface PolicyDetail {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
publishDate: string;
|
||||||
|
publisher: string;
|
||||||
|
content: string;
|
||||||
|
attachments: {
|
||||||
|
name: string;
|
||||||
|
url: string;
|
||||||
|
type: string;
|
||||||
|
}[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PolicyDetails {
|
||||||
|
[key: string]: PolicyDetail;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 模拟政策法规详情数据
|
||||||
|
const mockPolicyDetails: PolicyDetails = {
|
||||||
|
'1': {
|
||||||
|
id: '1',
|
||||||
|
title: '关于进一步规范招标采购活动的管理办法',
|
||||||
|
publishDate: '2023-08-15',
|
||||||
|
publisher: '中远海运集团采购管理部',
|
||||||
|
content: `
|
||||||
|
<p><strong>第一章 总则</strong></p>
|
||||||
|
<p>第一条 为进一步规范集团招标采购活动，提高采购效率，降低采购成本，防范采购风险，根据《中华人民共和国招标投标法》《中华人民共和国招标投标法实施条例》等法律法规，结合集团实际情况，制定本办法。</p>
|
||||||
|
<p>第二条 本办法适用于集团总部及各下属单位的招标采购活动。</p>
|
||||||
|
<p>第三条 招标采购活动应当遵循公开、公平、公正和诚实信用的原则。</p>
|
||||||
|
|
||||||
|
<p><strong>第二章 招标采购组织机构及职责</strong></p>
|
||||||
|
<p>第四条 集团设立采购管理委员会，负责审议集团采购管理制度、采购策略、重大采购事项等。</p>
|
||||||
|
<p>第五条 集团采购管理部是集团采购管理的职能部门，负责组织实施集团采购管理工作。</p>
|
||||||
|
<p>第六条 各单位应当设立采购管理部门，负责本单位采购管理工作。</p>
|
||||||
|
|
||||||
|
<p><strong>第三章 招标采购方式</strong></p>
|
||||||
|
<p>第七条 招标采购方式包括公开招标、邀请招标、竞争性谈判、竞争性磋商、询价采购、单一来源采购等。</p>
|
||||||
|
<p>第八条 采购金额达到下列标准之一的，应当采用公开招标方式：</p>
|
||||||
|
<p>（一）货物类项目采购金额在200万元以上；</p>
|
||||||
|
<p>（二）工程类项目采购金额在400万元以上；</p>
|
||||||
|
<p>（三）服务类项目采购金额在100万元以上。</p>
|
||||||
|
<p>第九条 符合下列情形之一的，可以采用邀请招标方式：</p>
|
||||||
|
<p>（一）技术复杂、有特殊要求或者受自然环境限制，只有少量供应商可供选择；</p>
|
||||||
|
<p>（二）采用公开招标方式的费用占采购项目总价值的比例过大。</p>
|
||||||
|
|
||||||
|
<p><strong>第四章 招标采购程序</strong></p>
|
||||||
|
<p>第十条 招标采购程序包括：采购需求提出、采购方式确定、采购文件编制、采购公告发布、投标文件接收与开标、评标、定标、合同签订等环节。</p>
|
||||||
|
<p>第十一条 采购需求部门应当提出书面采购申请，明确采购需求、技术规格、数量、交货期等要求。</p>
|
||||||
|
<p>第十二条 采购管理部门根据采购金额、采购内容等因素，确定采购方式。</p>
|
||||||
|
<p>第十三条 采购文件应当包括采购项目的技术要求、商务条件、评标方法与标准、合同主要条款等内容。</p>
|
||||||
|
|
||||||
|
<p><strong>第五章 评标与定标</strong></p>
|
||||||
|
<p>第十四条 评标委员会由采购人代表和评审专家组成，成员人数为5人以上单数，其中评审专家不得少于成员总数的三分之二。</p>
|
||||||
|
<p>第十五条 评标方法可以采用最低评标价法、综合评分法等。</p>
|
||||||
|
<p>第十六条 评标委员会按照招标文件确定的评标方法和标准，对投标文件进行评审和比较，提出书面评标报告。</p>
|
||||||
|
|
||||||
|
<p><strong>第六章 合同管理</strong></p>
|
||||||
|
<p>第十七条 采购合同应当明确双方的权利义务、技术要求、合同价格、履行期限、履行地点和方式、验收标准和方法、违约责任等内容。</p>
|
||||||
|
<p>第十八条 采购合同签订后，采购人应当加强对合同履行情况的监督检查，确保合同全面履行。</p>
|
||||||
|
|
||||||
|
<p><strong>第七章 供应商管理</strong></p>
|
||||||
|
<p>第十九条 集团应当建立供应商库，对供应商实行动态管理。</p>
|
||||||
|
<p>第二十条 对供应商的考核评价应当包括供应商资质、产品质量、价格水平、交货期、售后服务等方面。</p>
|
||||||
|
|
||||||
|
<p><strong>第八章 监督检查</strong></p>
|
||||||
|
<p>第二十一条 集团审计部门应当对招标采购活动进行监督检查。</p>
|
||||||
|
<p>第二十二条 任何单位和个人不得以任何方式干涉招标采购活动。</p>
|
||||||
|
|
||||||
|
<p><strong>第九章 附则</strong></p>
|
||||||
|
<p>第二十三条 本办法由集团采购管理部负责解释。</p>
|
||||||
|
<p>第二十四条 本办法自发布之日起施行。</p>
|
||||||
|
`,
|
||||||
|
attachments: [
|
||||||
|
{ name: '招标采购管理办法.pdf', url: '/files/招标采购管理办法.pdf', type: 'pdf' },
|
||||||
|
{ name: '招标采购流程图.docx', url: '/files/招标采购流程图.docx', type: 'word' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'2': {
|
||||||
|
id: '2',
|
||||||
|
title: '中远海运集团供应商管理实施细则(2023年修订版)',
|
||||||
|
publishDate: '2023-07-20',
|
||||||
|
publisher: '中远海运集团采购管理部',
|
||||||
|
content: `
|
||||||
|
<p><strong>第一章 总则</strong></p>
|
||||||
|
<p>第一条 为规范集团供应商管理工作，建立健全供应商评价体系，提高采购质量和效率，根据《中远海运集团招标采购管理办法》，制定本细则。</p>
|
||||||
|
<p>第二条 本细则适用于集团总部及各下属单位的供应商管理工作。</p>
|
||||||
|
|
||||||
|
<p><strong>第二章 供应商分类</strong></p>
|
||||||
|
<p>第三条 供应商按照提供的产品或服务类型，分为货物类供应商、工程类供应商和服务类供应商。</p>
|
||||||
|
<p>第四条 供应商按照合作关系，分为战略供应商、核心供应商和一般供应商。</p>
|
||||||
|
|
||||||
|
<p><strong>第三章 供应商准入</strong></p>
|
||||||
|
<p>第五条 供应商准入应当符合以下基本条件：</p>
|
||||||
|
<p>（一）具有独立承担民事责任的能力；</p>
|
||||||
|
<p>（二）具有良好的商业信誉和健全的财务会计制度；</p>
|
||||||
|
<p>（三）具有履行合同所必需的设备和专业技术能力；</p>
|
||||||
|
<p>（四）有依法缴纳税收和社会保障资金的良好记录；</p>
|
||||||
|
<p>（五）参加采购活动前三年内，在经营活动中没有重大违法记录；</p>
|
||||||
|
<p>（六）法律、行政法规规定的其他条件。</p>
|
||||||
|
|
||||||
|
<p><strong>第四章 供应商评价</strong></p>
|
||||||
|
<p>第六条 供应商评价指标包括企业资质、财务状况、技术能力、质量保证、价格水平、交货期、售后服务、社会责任等。</p>
|
||||||
|
<p>第七条 供应商评价采用百分制，评价结果分为A、B、C、D四个等级：</p>
|
||||||
|
<p>（一）A级：90分以上，优秀供应商；</p>
|
||||||
|
<p>（二）B级：75-89分，良好供应商；</p>
|
||||||
|
<p>（三）C级：60-74分，合格供应商；</p>
|
||||||
|
<p>（四）D级：60分以下，不合格供应商。</p>
|
||||||
|
|
||||||
|
<p><strong>第五章 供应商退出</strong></p>
|
||||||
|
<p>第八条 供应商有下列情形之一的，应当从供应商库中退出：</p>
|
||||||
|
<p>（一）连续两次评价结果为D级；</p>
|
||||||
|
<p>（二）提供虚假材料谋取中标、成交的；</p>
|
||||||
|
<p>（三）与采购人、其他供应商恶意串通的；</p>
|
||||||
|
<p>（四）向采购人、评标委员会成员行贿或者提供其他不正当利益的；</p>
|
||||||
|
<p>（五）在采购活动中有其他违法违规行为的。</p>
|
||||||
|
|
||||||
|
<p><strong>第六章 附则</strong></p>
|
||||||
|
<p>第九条 本细则由集团采购管理部负责解释。</p>
|
||||||
|
<p>第十条 本细则自发布之日起施行。</p>
|
||||||
|
`,
|
||||||
|
attachments: [
|
||||||
|
{ name: '供应商管理实施细则.pdf', url: '/files/供应商管理实施细则.pdf', type: 'pdf' },
|
||||||
|
{ name: '供应商评价表.xlsx', url: '/files/供应商评价表.xlsx', type: 'excel' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'3': {
|
||||||
|
id: '3',
|
||||||
|
title: '关于加强采购合同履约管理的通知',
|
||||||
|
publishDate: '2023-06-10',
|
||||||
|
publisher: '中远海运集团采购管理部',
|
||||||
|
content: `
|
||||||
|
<p>各单位：</p>
|
||||||
|
<p>为进一步加强采购合同履约管理，防范合同风险，提高采购质量，经集团研究决定，现就加强采购合同履约管理有关事项通知如下：</p>
|
||||||
|
|
||||||
|
<p><strong>一、高度重视采购合同履约管理</strong></p>
|
||||||
|
<p>各单位要充分认识加强采购合同履约管理的重要性，将合同履约管理作为采购管理的重要环节，纳入采购全过程管理。要明确合同履约管理责任，建立健全合同履约管理制度，规范合同履约管理流程。</p>
|
||||||
|
|
||||||
|
<p><strong>二、严格合同签订管理</strong></p>
|
||||||
|
<p>各单位要严格执行合同审查制度，重点审查合同主体、标的、数量、质量、价款、履行期限、履行地点和方式、违约责任等内容。要加强合同条款设计，合理设置付款条件、验收标准、质保期、违约责任等条款，防范合同风险。</p>
|
||||||
|
|
||||||
|
<p><strong>三、加强合同履行监督</strong></p>
|
||||||
|
<p>各单位要建立合同履行台账，对合同履行情况进行动态跟踪。要加强对供应商履约情况的监督检查，重点关注产品质量、交货期、服务质量等方面。对发现的问题，要及时督促供应商整改。</p>
|
||||||
|
|
||||||
|
<p><strong>四、规范合同验收程序</strong></p>
|
||||||
|
<p>各单位要严格执行合同验收制度，按照合同约定的验收标准和方法进行验收。验收人员应当如实记录验收情况，出具验收报告。验收不合格的，要及时通知供应商整改或者退货。</p>
|
||||||
|
|
||||||
|
<p><strong>五、加强合同档案管理</strong></p>
|
||||||
|
<p>各单位要建立健全合同档案管理制度，对合同文本、履行记录、验收报告、付款凭证等资料进行归档管理。要加强合同信息化管理，提高合同管理效率。</p>
|
||||||
|
|
||||||
|
<p><strong>六、严肃合同履约考核</strong></p>
|
||||||
|
<p>各单位要将合同履约情况纳入供应商评价体系，对供应商履约情况进行考核评价。对履约情况良好的供应商，可以在同等条件下优先考虑；对履约情况不良的供应商，要依据合同约定追究违约责任，并在供应商评价中予以扣分或者降级。</p>
|
||||||
|
|
||||||
|
<p>特此通知。</p>
|
||||||
|
`,
|
||||||
|
attachments: [
|
||||||
|
{ name: '合同履约管理通知.pdf', url: '/files/合同履约管理通知.pdf', type: 'pdf' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const PolicyInfo: React.FC = () => {
|
||||||
|
const location = useLocation();
|
||||||
|
const id = new URLSearchParams(location.search).get("id");
|
||||||
|
const [policyDetail, setPolicyDetail] = useState<PolicyDetail | null>(null);
|
||||||
|
const [loading, setLoading] = useState<boolean>(true);
|
||||||
|
|
||||||
|
// 模拟获取政策法规详情数据
|
||||||
|
useEffect(() => {
|
||||||
|
// 实际项目中应该通过API获取数据
|
||||||
|
setTimeout(() => {
|
||||||
|
if (id && mockPolicyDetails[id]) {
|
||||||
|
setPolicyDetail(mockPolicyDetails[id]);
|
||||||
|
} else {
|
||||||
|
// 处理ID不存在的情况
|
||||||
|
message.error('政策法规不存在');
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
}, 500);
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
// 处理返回列表
|
||||||
|
const handleBack = () => {
|
||||||
|
window.history.back();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理下载附件
|
||||||
|
const handleDownload = (url: string, name: string) => {
|
||||||
|
message.success(`开始下载: ${name}`);
|
||||||
|
console.log('下载附件:', url, name);
|
||||||
|
// 实际项目中应该调用下载API
|
||||||
|
// window.open(url);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 根据文件类型获取图标
|
||||||
|
const getFileIcon = (type: string) => {
|
||||||
|
switch (type) {
|
||||||
|
case 'pdf':
|
||||||
|
return <FilePdfOutlined />;
|
||||||
|
case 'word':
|
||||||
|
return <FileWordOutlined />;
|
||||||
|
case 'excel':
|
||||||
|
return <FileExcelOutlined />;
|
||||||
|
default:
|
||||||
|
return <DownloadOutlined />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className={styles.loadingContainer}>
|
||||||
|
<Spin size="large" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!policyDetail) {
|
||||||
|
return (
|
||||||
|
<div className={styles.notFoundContainer}>
|
||||||
|
<Title level={4}>未找到相关政策法规</Title>
|
||||||
|
<Button type="primary" onClick={handleBack}>返回列表</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.policyInfoContainer}>
|
||||||
|
<div className={styles.policyInfoHeader}>
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
icon={<ArrowLeftOutlined />}
|
||||||
|
onClick={handleBack}
|
||||||
|
className={styles.backButton}
|
||||||
|
>
|
||||||
|
返回列表
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.policyInfoContent}>
|
||||||
|
<div className={styles.titleContainer}>
|
||||||
|
<Title level={2} className={styles.title}>
|
||||||
|
{policyDetail.title}
|
||||||
|
</Title>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.metaInfo}>
|
||||||
|
<div className={styles.metaLeft}>
|
||||||
|
<Text type="secondary">发布时间: {policyDetail.publishDate}</Text>
|
||||||
|
</div>
|
||||||
|
<div className={styles.metaRight}>
|
||||||
|
<Text type="secondary">发布人: {policyDetail.publisher}</Text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Divider className={styles.divider} />
|
||||||
|
|
||||||
|
<div className={styles.contentBody}>
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: policyDetail.content }} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{policyDetail.attachments && policyDetail.attachments.length > 0 && (
|
||||||
|
<div className={styles.attachmentsSection}>
|
||||||
|
<Divider className={styles.divider} />
|
||||||
|
<div className={styles.attachmentsTitle}>附件下载</div>
|
||||||
|
<div className={styles.attachmentsList}>
|
||||||
|
{policyDetail.attachments.map((attachment: any, index: number) => (
|
||||||
|
<Button
|
||||||
|
key={index}
|
||||||
|
type="primary"
|
||||||
|
ghost
|
||||||
|
icon={getFileIcon(attachment.type)}
|
||||||
|
onClick={() => handleDownload(attachment.url, attachment.name)}
|
||||||
|
className={styles.attachmentButton}
|
||||||
|
>
|
||||||
|
{attachment.name}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PolicyInfo;
|
||||||
Reference in New Issue
Block a user