diff --git a/src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.js b/src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.js index e7dbecb..8dcaeff 100644 --- a/src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.js +++ b/src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.js @@ -1,10 +1,12 @@ -import React from 'react'; -import { Form, Input, Button, DatePicker, Select } from 'antd'; +import React, { useState } from 'react'; +import { Form, Input, Button, DatePicker, Select, Drawer, Descriptions, Tag } from 'antd'; import styles from './RegulationCompliance.less'; import stipulation1 from '@/assets/business_envinformation/stipulation1.svg'; const RegulationCompliance = () => { const [form] = Form.useForm(); + const [drawerVisible, setDrawerVisible] = useState(false); + const [selectedRegulation, setSelectedRegulation] = useState(null); const handleSearch = (values) => { console.log('搜索参数:', values); @@ -16,6 +18,30 @@ const RegulationCompliance = () => { // TODO: 重置搜索 }; + // 显示抽屉详情 + const showDrawer = (regulation) => { + setSelectedRegulation(regulation); + setDrawerVisible(true); + }; + + // 关闭抽屉 + const onCloseDrawer = () => { + setDrawerVisible(false); + setSelectedRegulation(null); + }; + + // 模拟法规数据(实际应该从后端获取) + const mockRegulationDetail = { + name: '2025排污许可条例', + publishDate: '2025-08-24', + department: '环保部门名称', + content: '在此输入具体的法规内容...', + status: '有效', + category: '排污许可', + version: '1.0', + updateTime: '2025-08-24' + }; + return (
@@ -71,7 +97,11 @@ const RegulationCompliance = () => { {/* 第三行:操作按钮 */}
-
+
showDrawer(mockRegulationDetail)} + style={{ cursor: 'pointer' }} + > @@ -104,7 +134,11 @@ const RegulationCompliance = () => { {/* 第三行:操作按钮 */}
-
+
showDrawer(mockRegulationDetail)} + style={{ cursor: 'pointer' }} + > @@ -137,7 +171,11 @@ const RegulationCompliance = () => { {/* 第三行:操作按钮 */}
-
+
showDrawer(mockRegulationDetail)} + style={{ cursor: 'pointer' }} + > @@ -170,7 +208,11 @@ const RegulationCompliance = () => { {/* 第三行:操作按钮 */}
-
+
showDrawer(mockRegulationDetail)} + style={{ cursor: 'pointer' }} + > @@ -203,7 +245,11 @@ const RegulationCompliance = () => { {/* 第三行:操作按钮 */}
-
+
showDrawer(mockRegulationDetail)} + style={{ cursor: 'pointer' }} + > @@ -236,7 +282,11 @@ const RegulationCompliance = () => { {/* 第三行:操作按钮 */}
-
+
showDrawer(mockRegulationDetail)} + style={{ cursor: 'pointer' }} + > @@ -269,7 +319,11 @@ const RegulationCompliance = () => { {/* 第三行:操作按钮 */}
-
+
showDrawer(mockRegulationDetail)} + style={{ cursor: 'pointer' }} + > @@ -302,7 +356,11 @@ const RegulationCompliance = () => { {/* 第三行:操作按钮 */}
-
+
showDrawer(mockRegulationDetail)} + style={{ cursor: 'pointer' }} + > @@ -335,7 +393,11 @@ const RegulationCompliance = () => { {/* 第三行:操作按钮 */}
-
+
showDrawer(mockRegulationDetail)} + style={{ cursor: 'pointer' }} + > @@ -368,7 +430,11 @@ const RegulationCompliance = () => { {/* 第三行:操作按钮 */}
-
+
showDrawer(mockRegulationDetail)} + style={{ cursor: 'pointer' }} + > @@ -401,7 +467,11 @@ const RegulationCompliance = () => { {/* 第三行:操作按钮 */}
-
+
showDrawer(mockRegulationDetail)} + style={{ cursor: 'pointer' }} + > @@ -434,7 +504,11 @@ const RegulationCompliance = () => { {/* 第三行:操作按钮 */}
-
+
showDrawer(mockRegulationDetail)} + style={{ cursor: 'pointer' }} + > @@ -448,6 +522,68 @@ const RegulationCompliance = () => {
+ + {/* 静态分页组件 */} +
+
+ 共85条 + {/* */} + + + ... + + + + + + ... + + +
+
+ + {/* 抽屉详情 */} + + {selectedRegulation && ( + + + {selectedRegulation.name} + + + {selectedRegulation.publishDate} + + + {selectedRegulation.department} + + + {selectedRegulation.status} + + + {selectedRegulation.category} + + + {selectedRegulation.version} + + + {selectedRegulation.updateTime} + + +
+ {selectedRegulation.content} +
+
+
+ )} +
); }; diff --git a/src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.less b/src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.less index d7a35ca..f26410a 100644 --- a/src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.less +++ b/src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.less @@ -136,6 +136,69 @@ } } + } + + .paginationContainer { + position: fixed; + bottom: 10px; + right: 10px; + z-index: 1000; + } + + .pagination { + display: flex; + align-items: center; + gap: 8px; + // background: #fff; + padding: 8px 30px; + border-radius: 4px; + // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + } + + .totalItems { + font-size: 12px; + color: #666; + margin-right: 8px; + } + + .pageSizeSelect { + font-size: 12px; + border: 1px solid #d9d9d9; + border-radius: 2px; + padding: 2px 6px; + margin-right: 8px; + background: #fff; + } + + .pageButton { + width: 28px; + height: 28px; + border: 1px solid #d9d9d9; + background: #fff; + color: #333; + font-size: 12px; + border-radius: 2px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s; + + &:hover { + border-color: #00D48A; + color: #00D48A; + } + + &.active { + background: #00D48A; + border-color: #00D48A; + color: #fff; + } + } + .ellipsis { + font-size: 12px; + color: #999; + padding: 0 4px; } } \ No newline at end of file