法规页面

src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.js

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { Form, Input, Button, DatePicker, Select } from 'antd';
+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 (
         <div className={styles.regulationContainer}>
@@ -71,7 +97,11 @@ const RegulationCompliance = () => {
 
                         {/* 第三行：操作按钮 */}
                         <div className={styles.actionButtons}>
-                            <div className={styles.actionButton}>
+                            <div
+                                className={styles.actionButton}
+                                onClick={() => showDrawer(mockRegulationDetail)}
+                                style={{ cursor: 'pointer' }}
+                            >
                                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                     <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                 </svg>
@@ -104,7 +134,11 @@ const RegulationCompliance = () => {
 
                         {/* 第三行：操作按钮 */}
                         <div className={styles.actionButtons}>
-                            <div className={styles.actionButton}>
+                            <div
+                                className={styles.actionButton}
+                                onClick={() => showDrawer(mockRegulationDetail)}
+                                style={{ cursor: 'pointer' }}
+                            >
                                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                     <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                 </svg>
@@ -137,7 +171,11 @@ const RegulationCompliance = () => {
 
                         {/* 第三行：操作按钮 */}
                         <div className={styles.actionButtons}>
-                            <div className={styles.actionButton}>
+                            <div
+                                className={styles.actionButton}
+                                onClick={() => showDrawer(mockRegulationDetail)}
+                                style={{ cursor: 'pointer' }}
+                            >
                                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                     <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                 </svg>
@@ -170,7 +208,11 @@ const RegulationCompliance = () => {
 
                         {/* 第三行：操作按钮 */}
                         <div className={styles.actionButtons}>
-                            <div className={styles.actionButton}>
+                            <div
+                                className={styles.actionButton}
+                                onClick={() => showDrawer(mockRegulationDetail)}
+                                style={{ cursor: 'pointer' }}
+                            >
                                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                     <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                 </svg>
@@ -203,7 +245,11 @@ const RegulationCompliance = () => {
 
                         {/* 第三行：操作按钮 */}
                         <div className={styles.actionButtons}>
-                            <div className={styles.actionButton}>
+                            <div
+                                className={styles.actionButton}
+                                onClick={() => showDrawer(mockRegulationDetail)}
+                                style={{ cursor: 'pointer' }}
+                            >
                                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                     <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                 </svg>
@@ -236,7 +282,11 @@ const RegulationCompliance = () => {
 
                         {/* 第三行：操作按钮 */}
                         <div className={styles.actionButtons}>
-                            <div className={styles.actionButton}>
+                            <div
+                                className={styles.actionButton}
+                                onClick={() => showDrawer(mockRegulationDetail)}
+                                style={{ cursor: 'pointer' }}
+                            >
                                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                     <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                 </svg>
@@ -269,7 +319,11 @@ const RegulationCompliance = () => {
 
                         {/* 第三行：操作按钮 */}
                         <div className={styles.actionButtons}>
-                            <div className={styles.actionButton}>
+                            <div
+                                className={styles.actionButton}
+                                onClick={() => showDrawer(mockRegulationDetail)}
+                                style={{ cursor: 'pointer' }}
+                            >
                                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                     <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                 </svg>
@@ -302,7 +356,11 @@ const RegulationCompliance = () => {
 
                         {/* 第三行：操作按钮 */}
                         <div className={styles.actionButtons}>
-                            <div className={styles.actionButton}>
+                            <div
+                                className={styles.actionButton}
+                                onClick={() => showDrawer(mockRegulationDetail)}
+                                style={{ cursor: 'pointer' }}
+                            >
                                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                     <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                 </svg>
@@ -335,7 +393,11 @@ const RegulationCompliance = () => {
 
                         {/* 第三行：操作按钮 */}
                         <div className={styles.actionButtons}>
-                            <div className={styles.actionButton}>
+                            <div
+                                className={styles.actionButton}
+                                onClick={() => showDrawer(mockRegulationDetail)}
+                                style={{ cursor: 'pointer' }}
+                            >
                                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                     <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                 </svg>
@@ -368,7 +430,11 @@ const RegulationCompliance = () => {
 
                         {/* 第三行：操作按钮 */}
                         <div className={styles.actionButtons}>
-                            <div className={styles.actionButton}>
+                            <div
+                                className={styles.actionButton}
+                                onClick={() => showDrawer(mockRegulationDetail)}
+                                style={{ cursor: 'pointer' }}
+                            >
                                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                     <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                 </svg>
@@ -401,7 +467,11 @@ const RegulationCompliance = () => {
 
                         {/* 第三行：操作按钮 */}
                         <div className={styles.actionButtons}>
-                            <div className={styles.actionButton}>
+                            <div
+                                className={styles.actionButton}
+                                onClick={() => showDrawer(mockRegulationDetail)}
+                                style={{ cursor: 'pointer' }}
+                            >
                                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                     <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                 </svg>
@@ -434,7 +504,11 @@ const RegulationCompliance = () => {
 
                         {/* 第三行：操作按钮 */}
                         <div className={styles.actionButtons}>
-                            <div className={styles.actionButton}>
+                            <div
+                                className={styles.actionButton}
+                                onClick={() => showDrawer(mockRegulationDetail)}
+                                style={{ cursor: 'pointer' }}
+                            >
                                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                     <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                 </svg>
@@ -448,6 +522,68 @@ const RegulationCompliance = () => {
                     </div>
                 </div>
             </div>
+
+            {/* 静态分页组件 */}
+            <div className={styles.paginationContainer}>
+                <div className={styles.pagination}>
+                    <span className={styles.totalItems}>共85条</span>
+                    {/* <select className={styles.pageSizeSelect}>
+                        <option value="10">10 / page</option>
+                    </select> */}
+                    <button className={styles.pageButton}>&lt;</button>
+                    <button className={styles.pageButton}>1</button>
+                    <span className={styles.ellipsis}>...</span>
+                    <button className={styles.pageButton}>4</button>
+                    <button className={styles.pageButton}>5</button>
+                    <button className={`${styles.pageButton} ${styles.active}`}>6</button>
+                    <button className={styles.pageButton}>7</button>
+                    <button className={styles.pageButton}>8</button>
+                    <span className={styles.ellipsis}>...</span>
+                    <button className={styles.pageButton}>50</button>
+                    <button className={styles.pageButton}>&gt;</button>
+                </div>
+            </div>
+
+            {/* 抽屉详情 */}
+            <Drawer
+                title="法规详情"
+                width={600}
+                placement="right"
+                onClose={onCloseDrawer}
+                visible={drawerVisible}
+                maskClosable={true}
+            >
+                {selectedRegulation && (
+                    <Descriptions bordered column={1} size="middle">
+                        <Descriptions.Item label="法规名称">
+                            {selectedRegulation.name}
+                        </Descriptions.Item>
+                        <Descriptions.Item label="发布日期">
+                            {selectedRegulation.publishDate}
+                        </Descriptions.Item>
+                        <Descriptions.Item label="发布部门">
+                            {selectedRegulation.department}
+                        </Descriptions.Item>
+                        <Descriptions.Item label="法规状态">
+                            <Tag color="green">{selectedRegulation.status}</Tag>
+                        </Descriptions.Item>
+                        <Descriptions.Item label="法规类别">
+                            {selectedRegulation.category}
+                        </Descriptions.Item>
+                        <Descriptions.Item label="版本号">
+                            {selectedRegulation.version}
+                        </Descriptions.Item>
+                        <Descriptions.Item label="更新时间">
+                            {selectedRegulation.updateTime}
+                        </Descriptions.Item>
+                        <Descriptions.Item label="法规内容">
+                            <div style={{ whiteSpace: 'pre-wrap', maxHeight: '300px', overflow: 'auto' }}>
+                                {selectedRegulation.content}
+                            </div>
+                        </Descriptions.Item>
+                    </Descriptions>
+                )}
+            </Drawer>
         </div>
     );
 };

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;
     }
 }