合规页面

src/pages/business_envInformation/module/ComplianceManagement.less

@@ -68,7 +68,7 @@
         flex: 1;
         background-color: #FFFFFF;
         border-radius: 4px;
-        padding: 20px;
+        // padding: 20px;
         overflow: auto;
 
         .contentPlaceholder {

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

@@ -1,10 +1,248 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Form, Input, Button, Table, DatePicker, Space } from 'antd';
+import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
 import styles from './PermitManagement.less';
 
 const PermitManagement = () => {
+    const [form] = Form.useForm();
+    const [dataSource, setDataSource] = useState([
+        {
+            key: 1,
+            companyName: '北京某某环保科技有限公司',
+            permitNumber: 'PWX-BJ-2023-001',
+            issueOrg: '北京市生态环境局',
+            expireDate: '2025-12-31',
+            original: '已上传',
+            duplicate: '已上传',
+        },
+        {
+            key: 2,
+            companyName: '上海某某化工有限公司',
+            permitNumber: 'PWX-SH-2023-002',
+            issueOrg: '上海市生态环境局',
+            expireDate: '2025-10-15',
+            original: '已上传',
+            duplicate: '已上传',
+        },
+        {
+            key: 3,
+            companyName: '广州某某制造有限公司',
+            permitNumber: 'PWX-GZ-2023-003',
+            issueOrg: '广州市生态环境局',
+            expireDate: '2026-03-20',
+            original: '未上传',
+            duplicate: '已上传',
+        },
+        {
+            key: 4,
+            companyName: '深圳某某电子有限公司',
+            permitNumber: 'PWX-SZ-2023-004',
+            issueOrg: '深圳市生态环境局',
+            expireDate: '2025-08-10',
+            original: '已上传',
+            duplicate: '未上传',
+        },
+        {
+            key: 5,
+            companyName: '成都某某科技有限公司',
+            permitNumber: 'PWX-CD-2023-005',
+            issueOrg: '成都市生态环境局',
+            expireDate: '2026-01-25',
+            original: '已上传',
+            duplicate: '已上传',
+        },
+        {
+            key: 6,
+            companyName: '武汉某某工业有限公司',
+            permitNumber: 'PWX-WH-2023-006',
+            issueOrg: '武汉市生态环境局',
+            expireDate: '2025-11-30',
+            original: '已上传',
+            duplicate: '已上传',
+        },
+        {
+            key: 7,
+            companyName: '杭州某某环保有限公司',
+            permitNumber: 'PWX-HZ-2023-007',
+            issueOrg: '杭州市生态环境局',
+            expireDate: '2026-05-15',
+            original: '未上传',
+            duplicate: '已上传',
+        },
+        {
+            key: 8,
+            companyName: '南京某某化学有限公司',
+            permitNumber: 'PWX-NJ-2023-008',
+            issueOrg: '南京市生态环境局',
+            expireDate: '2025-09-20',
+            original: '已上传',
+            duplicate: '已上传',
+        },
+        {
+            key: 9,
+            companyName: '重庆某某重工有限公司',
+            permitNumber: 'PWX-CQ-2023-009',
+            issueOrg: '重庆市生态环境局',
+            expireDate: '2026-02-28',
+            original: '已上传',
+            duplicate: '未上传',
+        },
+        {
+            key: 10,
+            companyName: '天津某某制药有限公司',
+            permitNumber: 'PWX-TJ-2023-010',
+            issueOrg: '天津市生态环境局',
+            expireDate: '2025-07-10',
+            original: '已上传',
+            duplicate: '已上传',
+        },
+        {
+            key: 11,
+            companyName: '西安某某材料有限公司',
+            permitNumber: 'PWX-XA-2023-011',
+            issueOrg: '西安市生态环境局',
+            expireDate: '2026-04-05',
+            original: '未上传',
+            duplicate: '已上传',
+        },
+        {
+            key: 12,
+            companyName: '青岛某某机械有限公司',
+            permitNumber: 'PWX-QD-2023-012',
+            issueOrg: '青岛市生态环境局',
+            expireDate: '2025-12-15',
+            original: '已上传',
+            duplicate: '已上传',
+        },
+    ]);
+
+    const columns = [
+        {
+            title: '序号',
+            dataIndex: 'key',
+            key: 'key',
+            width: 80,
+            align: 'center',
+        },
+        {
+            title: '企业名称',
+            dataIndex: 'companyName',
+            key: 'companyName',
+            width: 200,
+        },
+        {
+            title: '排污许可证号',
+            dataIndex: 'permitNumber',
+            key: 'permitNumber',
+            width: 180,
+        },
+        {
+            title: '颁发机构',
+            dataIndex: 'issueOrg',
+            key: 'issueOrg',
+            width: 180,
+        },
+        {
+            title: '到期时间',
+            dataIndex: 'expireDate',
+            key: 'expireDate',
+            width: 120,
+        },
+        {
+            title: '正本',
+            dataIndex: 'original',
+            key: 'original',
+            width: 100,
+            align: 'center',
+        },
+        {
+            title: '副本',
+            dataIndex: 'duplicate',
+            key: 'duplicate',
+            width: 100,
+            align: 'center',
+        },
+        {
+            title: '操作',
+            key: 'action',
+            width: 150,
+            align: 'center',
+            render: (_, record) => (
+                <Space size="small">
+                    <a onClick={() => handleView(record)}>查看</a>
+                    <a onClick={() => handleEdit(record)}>编辑</a>
+                    <a onClick={() => handleDelete(record)}>删除</a>
+                </Space>
+            ),
+        },
+    ];
+
+    const handleSearch = (values) => {
+        console.log('搜索参数:', values);
+        // TODO: 实现搜索功能
+    };
+
+    const handleReset = () => {
+        form.resetFields();
+        // TODO: 重置搜索
+    };
+
+    const handleView = (record) => {
+        console.log('查看:', record);
+        // TODO: 实现查看功能
+    };
+
+    const handleEdit = (record) => {
+        console.log('编辑:', record);
+        // TODO: 实现编辑功能
+    };
+
+    const handleDelete = (record) => {
+        console.log('删除:', record);
+        // TODO: 实现删除功能
+    };
+
     return (
-        <div className={styles.container}>
+        <div className={styles.permitContainer}>
-            <div className={styles.content}>11待开发</div>
+            {/* 第一块：搜索表单 */}
+            <div className={styles.searchSection}>
+                <Form form={form} layout="inline" onFinish={handleSearch}>
+                    <Form.Item label="企业名称" name="companyName">
+                        <Input placeholder="请输入企业名称" style={{ width: 140 }} />
+                    </Form.Item>
+                    <Form.Item label="许可证号" name="permitNumber">
+                        <Input placeholder="请输入许可证号" style={{ width: 140 }} />
+                    </Form.Item>
+                    <Form.Item label="到期时间" name="expireDate">
+                        <DatePicker placeholder="请选择到期时间" style={{ width: 140 }} />
+                    </Form.Item>
+                    <Form.Item>
+                        <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
+                            查询
+                        </Button>
+                    </Form.Item>
+                    <Form.Item>
+                        <Button onClick={handleReset} icon={<RedoOutlined />}>
+                            重置
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </div>
+
+            {/* 第二块：表格 */}
+            <div className={styles.tableSection}>
+                <Table
+                    columns={columns}
+                    dataSource={dataSource}
+                    pagination={{
+                        pageSize: 10,
+                        showSizeChanger: true,
+                        showQuickJumper: true,
+                        showTotal: (total) => `共 ${total} 条`,
+                    }}
+                    bordered
+                />
+            </div>
         </div>
     );
 };

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

@@ -1,15 +1,85 @@
-.container {
+.permitContainer {
     width: 100%;
     height: 100%;
-    display: flex;
+    // padding: 20px;
-    align-items: center;
-    justify-content: center;
     background-color: #fff;
+    display: flex;
+    flex-direction: column;
+
+    .searchSection {
+        margin-bottom: 20px;
+        padding: 20px;
+        // background-color: #fafafa;
+        border-radius: 4px;
+
+        :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;
+                }
+            }
+
+            .ant-form-item-label {
+                font-weight: 500;
+                
+                label {
+                    color: #666666;
+                    font-size: 13px;
+                }
+            }
+
+            .ant-input::placeholder,
+            .ant-picker-input input::placeholder {
+                color: #00000040;
+                font-size: 13px;
+            }
+        }
+    }
+
+    .tableSection {
+        flex: 1;
+        overflow: auto;
+        padding: 0 20px;
+
+        :global {
+            .ant-table {
+                font-size: 14px;
+
+                .ant-table-thead > tr > th {
+                    background-color: #fafafa;
+                    font-weight: 500;
+                }
+
+                .ant-table-tbody > tr:hover > td {
+                    background-color: #f5f5f5;
+                }
+
+                a {
+                    color: #1890ff;
+                    text-decoration: none;
+
+                    &:hover {
+                        color: #40a9ff;
+                    }
+                }
+            }
 
-    .content {
+            .ant-pagination {
-        font-size: 24px;
+                margin-top: 16px;
-        color: #999999;
+                text-align: right;
-        font-weight: 400;
+            }
+        }
     }
 }