diff --git a/src/pages/business_envInformation/module/ComplianceManagement.less b/src/pages/business_envInformation/module/ComplianceManagement.less index 79d9090..9c2da55 100644 --- a/src/pages/business_envInformation/module/ComplianceManagement.less +++ b/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 { diff --git a/src/pages/business_envInformation/module/secondary_menu/PermitManagement.js b/src/pages/business_envInformation/module/secondary_menu/PermitManagement.js index 7f0eccb..3e94f49 100644 --- a/src/pages/business_envInformation/module/secondary_menu/PermitManagement.js +++ b/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) => ( + + handleView(record)}>查看 + handleEdit(record)}>编辑 + handleDelete(record)}>删除 + + ), + }, + ]; + + 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 ( -
-
11待开发
+
+ {/* 第一块:搜索表单 */} +
+
+ + + + + + + + + + + + + + + +
+
+ + {/* 第二块:表格 */} +
+ `共 ${total} 条`, + }} + bordered + /> + ); }; diff --git a/src/pages/business_envInformation/module/secondary_menu/PermitManagement.less b/src/pages/business_envInformation/module/secondary_menu/PermitManagement.less index 022f9de..7408896 100644 --- a/src/pages/business_envInformation/module/secondary_menu/PermitManagement.less +++ b/src/pages/business_envInformation/module/secondary_menu/PermitManagement.less @@ -1,15 +1,85 @@ -.container { +.permitContainer { width: 100%; height: 100%; - display: flex; - align-items: center; - justify-content: center; + // padding: 20px; 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 { - font-size: 24px; - color: #999999; - font-weight: 400; + .ant-pagination { + margin-top: 16px; + text-align: right; + } + } } }