环保页面

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

@@ -1,14 +1,19 @@
 import React, { useState } from 'react';
-import { Form, Input, Button, Table, DatePicker, Space } from 'antd';
+import { Form, Input, Button, DatePicker, Space, Modal } from 'antd';
-import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
+import { SearchOutlined, RedoOutlined, CloseOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons';
+import StandardTable from '@/components/StandardTable';
 import styles from './PermitManagement.less';
+import licence1 from '@/assets/business_envinformation/licence1.svg';
+import licence2 from '@/assets/business_envinformation/licence2.svg';
 
 const PermitManagement = () => {
     const [form] = Form.useForm();
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const [currentImage, setCurrentImage] = useState(null);
     const [dataSource, setDataSource] = useState([
         {
             key: 1,
-            companyName: '北京某某环保科技有限公司',
+            companyName: '北京某某环保有限公司',
             permitNumber: 'PWX-BJ-2023-001',
             issueOrg: '北京市生态环境局',
             expireDate: '2025-12-31',
@@ -147,6 +152,8 @@ const PermitManagement = () => {
             dataIndex: 'expireDate',
             key: 'expireDate',
             width: 120,
+            sorter: (a, b) => new Date(a.expireDate) - new Date(b.expireDate),
+            showSorterTooltip: false,
         },
         {
             title: '正本',
@@ -154,6 +161,7 @@ const PermitManagement = () => {
             key: 'original',
             width: 100,
             align: 'center',
+            render: () => <a style={{ color: '#0080FF' }} onClick={() => { setCurrentImage(licence1); setIsModalVisible(true); }}>附件</a>
         },
         {
             title: '副本',
@@ -161,6 +169,7 @@ const PermitManagement = () => {
             key: 'duplicate',
             width: 100,
             align: 'center',
+            render: () => <a style={{ color: '#0080FF' }} onClick={() => { setCurrentImage(licence2); setIsModalVisible(true); }}>附件</a>
         },
         {
             title: '操作',
@@ -168,10 +177,15 @@ const PermitManagement = () => {
             width: 150,
             align: 'center',
             render: (_, record) => (
-                <Space size="small">
+                <Space size="middle">
-                    <a onClick={() => handleView(record)}>查看</a>
+                    <EyeOutlined 
-                    <a onClick={() => handleEdit(record)}>编辑</a>
+                        style={{ color: '#7ee370', fontSize: 16, cursor: 'pointer' }} 
-                    <a onClick={() => handleDelete(record)}>删除</a>
+                        onClick={() => handleView(record)}
+                    />
+                    <DeleteOutlined 
+                        style={{ color: '#ff7e72', fontSize: 16, cursor: 'pointer' }} 
+                        onClick={() => handleDelete(record)}
+                    />
                 </Space>
             ),
         },
@@ -208,21 +222,25 @@ const PermitManagement = () => {
             <div className={styles.searchSection}>
                 <Form form={form} layout="inline" onFinish={handleSearch}>
                     <Form.Item label="企业名称" name="companyName">
-                        <Input placeholder="请输入企业名称" style={{ width: 140 }} />
+                        <Input placeholder="请输入" style={{ width: 140, borderRadius: '2px' }} />
                     </Form.Item>
                     <Form.Item label="许可证号" name="permitNumber">
-                        <Input placeholder="请输入许可证号" style={{ width: 140 }} />
+                        <Input placeholder="请输入" style={{ width: 140, borderRadius: '2px' }} />
                     </Form.Item>
                     <Form.Item label="到期时间" name="expireDate">
-                        <DatePicker placeholder="请选择到期时间" style={{ width: 140 }} />
+                        <DatePicker placeholder="请选择" style={{ width: 140, borderRadius: '2px' }} />
                     </Form.Item>
                     <Form.Item>
-                        <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
+                        <Button 
+                            type="primary" 
+                            htmlType="submit"
+                            style={{ backgroundColor: '#00D48A', borderColor: '#00D48A', color: '#fff', borderRadius: '4px' }}
+                        >
                             查询
                         </Button>
                     </Form.Item>
                     <Form.Item>
-                        <Button onClick={handleReset} icon={<RedoOutlined />}>
+                        <Button onClick={handleReset} style={{ borderRadius: '4px' }}>
                             重置
                         </Button>
                     </Form.Item>
@@ -231,18 +249,35 @@ const PermitManagement = () => {
 
             {/* 第二块：表格 */}
             <div className={styles.tableSection}>
-                <Table
+                <StandardTable
                     columns={columns}
-                    dataSource={dataSource}
+                    data={{
-                    pagination={{
+                        list: dataSource,
-                        pageSize: 10,
+                        pagination: {
-                        showSizeChanger: true,
+                            total: dataSource.length,
-                        showQuickJumper: true,
+                            pageSize: 10,
-                        showTotal: (total) => `共 ${total} 条`,
+                            currentPage: 1,
+                            showTotal: (total) => `共 ${total} 条`,
+                        }
                     }}
-                    bordered
                 />
             </div>
+
+            {/* 图片弹窗 */}
+            <Modal
+                open={isModalVisible}
+                onCancel={() => setIsModalVisible(false)}
+                footer={null}
+                closeIcon={<CloseOutlined style={{ color: '#fff', fontSize: 20 }} />}
+                width="auto"
+                centered
+                styles={{
+                    mask: { backgroundColor: '#10101080' },
+                    content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+                }}
+            >
+                {currentImage && <img src={currentImage} alt="许可证" style={{ width: '100%', display: 'block' }} />}
+            </Modal>
         </div>
     );
 };

src/pages/business_envInformation/module/secondary_menu/PermitManagement.less

@@ -7,10 +7,10 @@
     flex-direction: column;
 
     .searchSection {
-        margin-bottom: 20px;
+        // margin-bottom: 20px;
         padding: 20px;
         // background-color: #fafafa;
-        border-radius: 4px;
+        // border-radius: 2px;
 
         :global {
             .ant-form-inline {
@@ -49,16 +49,60 @@
 
     .tableSection {
         flex: 1;
-        overflow: auto;
+        display: flex;
-        padding: 0 20px;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 0 20px 20px;
 
         :global {
+            .ant-spin-nested-loading {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+
+                .ant-spin-container {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    overflow: hidden;
+
+                    .ant-table-wrapper {
+                        flex: 1;
+                        display: flex;
+                        flex-direction: column;
+                        overflow: hidden;
+
+                        .ant-table {
+                            flex: 1;
+                            overflow: auto;
+                        }
+
+                        .ant-table-pagination {
+                            flex-shrink: 0;
+                            margin: 16px 0 0 0;
+                            padding: 0;
+                        }
+                    }
+                }
+            }
+
             .ant-table {
-                font-size: 14px;
+                font-size: 12px;
 
                 .ant-table-thead > tr > th {
                     background-color: #fafafa;
-                    font-weight: 500;
+                    font-weight: 400;
+                    color: #000000D9;
+                    border-right: none;
+                    text-align: center;
+                }
+
+                .ant-table-tbody > tr > td {
+                    border-right: none;
+                    color: #000000D9;
+                    font-weight: 400;
+                    text-align: center;
                 }
 
                 .ant-table-tbody > tr:hover > td {
@@ -76,7 +120,6 @@
             }
 
             .ant-pagination {
-                margin-top: 16px;
                 text-align: right;
             }
         }

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

@@ -1,10 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Form, Input, Button, DatePicker } from 'antd';
 import styles from './RegulationCompliance.less';
 
 const RegulationCompliance = () => {
+    const [form] = Form.useForm();
+
+    const handleSearch = (values) => {
+        console.log('搜索参数:', values);
+        // TODO: 实现搜索功能
+    };
+
+    const handleReset = () => {
+        form.resetFields();
+        // TODO: 重置搜索
+    };
+
     return (
-        <div className={styles.container}>
+        <div className={styles.regulationContainer}>
-            <div className={styles.content}>待开发</div>
+            {/* 第一块：搜索表单 */}
+            <div className={styles.searchSection}>
+                <Form form={form} layout="inline" onFinish={handleSearch}>
+                    <Form.Item label="法规名称" name="regulationName">
+                        <Input placeholder="请输入" style={{ width: 140, borderRadius: '2px' }} />
+                    </Form.Item>
+                    <Form.Item label="发布部门" name="regulationNumber">
+                        <Input placeholder="请输入" style={{ width: 140, borderRadius: '2px' }} />
+                    </Form.Item>
+                    <Form.Item label="发布日期" name="publishDate">
+                        <DatePicker placeholder="请选择" style={{ width: 140, borderRadius: '2px' }} />
+                    </Form.Item>
+                    <Form.Item>
+                        <Button 
+                            type="primary" 
+                            htmlType="submit"
+                            style={{ backgroundColor: '#00D48A', borderColor: '#00D48A', color: '#fff', borderRadius: '4px' }}
+                        >
+                            查询
+                        </Button>
+                    </Form.Item>
+                    <Form.Item>
+                        <Button onClick={handleReset} style={{ borderRadius: '4px' }}>
+                            重置
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </div>
+
+            {/* 第二块：表格区域（待开发） */}
+            <div className={styles.tableSection}>
+                <div className={styles.developingTip}>待开发</div>
+            </div>
         </div>
     );
 };

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

@@ -1,15 +1,61 @@
-.container {
+.regulationContainer {
     width: 100%;
     height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     background-color: #fff;
+    display: flex;
+    flex-direction: column;
+
+    .searchSection {
+        padding: 20px;
+
+        :global {
+            .ant-form-inline {
+                display: flex;
+                
+                .ant-form-item {
+                    margin-right: 16px;
+                    margin-bottom: 0;
+                }
+
+                .ant-form-item:nth-last-child(2) {
+                    margin-left: auto;
+                }
+
+                .ant-form-item:last-child {
+                    margin-right: 0;
+                }
+            }
 
-    .content {
+            .ant-form-item-label {
-        font-size: 24px;
+                font-weight: 500;
-        color: #999999;
+                
-        font-weight: 400;
+                label {
+                    color: #666666;
+                    font-size: 13px;
+                }
+            }
+
+            .ant-input::placeholder,
+            .ant-picker-input input::placeholder {
+                color: #00000040;
+                font-size: 13px;
+            }
+        }
     }
-}
 
+    .tableSection {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 0 20px 20px;
+        align-items: center;
+        justify-content: center;
+
+        .developingTip {
+            font-size: 24px;
+            color: #999999;
+            font-weight: 400;
+        }
+    }
+}