You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
287 lines
9.7 KiB
JavaScript
287 lines
9.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
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: '北京某某环保有限公司',
|
|
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,
|
|
sorter: (a, b) => new Date(a.expireDate) - new Date(b.expireDate),
|
|
showSorterTooltip: false,
|
|
},
|
|
{
|
|
title: '正本',
|
|
dataIndex: 'original',
|
|
key: 'original',
|
|
width: 100,
|
|
align: 'center',
|
|
render: () => <a style={{ color: '#0080FF' }} onClick={() => { setCurrentImage(licence1); setIsModalVisible(true); }}>附件</a>
|
|
},
|
|
{
|
|
title: '副本',
|
|
dataIndex: 'duplicate',
|
|
key: 'duplicate',
|
|
width: 100,
|
|
align: 'center',
|
|
render: () => <a style={{ color: '#0080FF' }} onClick={() => { setCurrentImage(licence2); setIsModalVisible(true); }}>附件</a>
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
width: 150,
|
|
align: 'center',
|
|
render: (_, record) => (
|
|
<Space size="middle">
|
|
<EyeOutlined
|
|
style={{ color: '#7ee370', fontSize: 16, cursor: 'pointer' }}
|
|
onClick={() => handleView(record)}
|
|
/>
|
|
<DeleteOutlined
|
|
style={{ color: '#ff7e72', fontSize: 16, cursor: 'pointer' }}
|
|
onClick={() => handleDelete(record)}
|
|
/>
|
|
</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.permitContainer}>
|
|
{/* 第一块：搜索表单 */}
|
|
<div className={styles.searchSection}>
|
|
<Form form={form} layout="inline" onFinish={handleSearch}>
|
|
<Form.Item label="企业名称" name="companyName">
|
|
<Input placeholder="请输入" style={{ width: 160, borderRadius: '2px' }} />
|
|
</Form.Item>
|
|
<Form.Item label="许可证号" name="permitNumber">
|
|
<Input placeholder="请输入" style={{ width: 160, borderRadius: '2px' }} />
|
|
</Form.Item>
|
|
<Form.Item label="到期时间" name="expireDate">
|
|
<DatePicker placeholder="请选择" style={{ width: 160, 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}>
|
|
<StandardTable
|
|
columns={columns}
|
|
data={{
|
|
list: dataSource,
|
|
pagination: {
|
|
total: dataSource.length,
|
|
pageSize: 10,
|
|
currentPage: 1,
|
|
showTotal: (total) => `共 ${total} 条`,
|
|
}
|
|
}}
|
|
/>
|
|
</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>
|
|
);
|
|
};
|
|
|
|
export default PermitManagement;
|
|
|