diff --git a/src/assets/business_envinformation/licence1.svg b/src/assets/business_envinformation/licence1.svg new file mode 100644 index 0000000..42718c9 --- /dev/null +++ b/src/assets/business_envinformation/licence1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/business_envinformation/licence2.svg b/src/assets/business_envinformation/licence2.svg new file mode 100644 index 0000000..42718c9 --- /dev/null +++ b/src/assets/business_envinformation/licence2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/pages/business_envInformation/module/secondary_menu/PermitManagement.js b/src/pages/business_envInformation/module/secondary_menu/PermitManagement.js index 3e94f49..8583b2b 100644 --- a/src/pages/business_envInformation/module/secondary_menu/PermitManagement.js +++ b/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 { SearchOutlined, RedoOutlined } from '@ant-design/icons'; +import { Form, Input, Button, DatePicker, Space, Modal } from 'antd'; +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: () => { setCurrentImage(licence1); setIsModalVisible(true); }}>附件 }, { title: '副本', @@ -161,6 +169,7 @@ const PermitManagement = () => { key: 'duplicate', width: 100, align: 'center', + render: () => { setCurrentImage(licence2); setIsModalVisible(true); }}>附件 }, { title: '操作', @@ -168,10 +177,15 @@ const PermitManagement = () => { width: 150, align: 'center', render: (_, record) => ( - - handleView(record)}>查看 - handleEdit(record)}>编辑 - handleDelete(record)}>删除 + + handleView(record)} + /> + handleDelete(record)} + /> ), }, @@ -208,21 +222,25 @@ const PermitManagement = () => {
- + - + - + - - @@ -231,18 +249,35 @@ const PermitManagement = () => { {/* 第二块：表格 */}
- `共 ${total} 条`, + data={{ + list: dataSource, + pagination: { + total: dataSource.length, + pageSize: 10, + currentPage: 1, + showTotal: (total) => `共 ${total} 条`, + } }} - bordered /> + + {/* 图片弹窗 */} + setIsModalVisible(false)} + footer={null} + closeIcon={} + width="auto" + centered + styles={{ + mask: { backgroundColor: '#10101080' }, + content: { padding: 0, background: 'transparent', boxShadow: 'none' } + }} + > + {currentImage && 许可证} + ); }; diff --git a/src/pages/business_envInformation/module/secondary_menu/PermitManagement.less b/src/pages/business_envInformation/module/secondary_menu/PermitManagement.less index 7408896..40c517d 100644 --- a/src/pages/business_envInformation/module/secondary_menu/PermitManagement.less +++ b/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; - padding: 0 20px; + display: flex; + 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; } } diff --git a/src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.js b/src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.js index c3d2968..6486d91 100644 --- a/src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.js +++ b/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 ( -
-
待开发
+
+ {/* 第一块：搜索表单 */} +
+ + + + + + + + + + + + + + + + + +
+ + {/* 第二块：表格区域（待开发） */} +
+
待开发
+
); }; diff --git a/src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.less b/src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.less index 022f9de..4df4009 100644 --- a/src/pages/business_envInformation/module/secondary_menu/RegulationCompliance.less +++ b/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 { - font-size: 24px; - color: #999999; - font-weight: 400; + .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; + 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; + } + } +}