diff --git a/src/pages/business_emergencyPlan/components/LawsAndRegulations.js b/src/pages/business_emergencyPlan/components/LawsAndRegulations.js new file mode 100644 index 0000000..854f191 --- /dev/null +++ b/src/pages/business_emergencyPlan/components/LawsAndRegulations.js @@ -0,0 +1,188 @@ +import React, { useState, useEffect } from 'react'; +import { Input, Button, Select, message, Modal, Form } from 'antd'; +import { SearchOutlined, PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons'; +import StandardTable from '@/components/StandardTable'; +import styles from './LawsAndRegulations.less'; + +const { Option } = Select; + +const LawsAndRegulations = () => { + const [loading, setLoading] = useState(false); + const [selectedRowKeys, setSelectedRowKeys] = useState([]); + const [searchValue, setSearchValue] = useState(''); + const [pagination, setPagination] = useState({ + current: 1, + pageSize: 10, + total: 48, + showSizeChanger: true, + showQuickJumper: true, + showTotal: (total, range) => `共${total}条`, + }); + + // 模拟数据 + const [dataSource, setDataSource] = useState([ + { + key: '1', + name: '大气污染物综合排放标准', + type: '国家标准', + file: 'SLAB USER(CN) .pdf', + remark: '无', + }, + { + key: '2', + name: '危险化学品安全管理条例', + type: '行业与领域规范', + file: 'SLAB USER(CN) .pdf', + remark: '针对危险化学品的生产、储存、使用、经营、运输等环节提出了具体要求。', + }, + { + key: '3', + name: '安全生产事故应急预案管理办法', + type: '行业与领域规范', + file: 'SLAB USER(CN) .pdf', + remark: '细化了生产经营单位需要安全生产责任的具体内容。', + }, + ]); + + // 表格列配置 + const columns = [ + { + title: '法规名称', + dataIndex: 'name', + key: 'name', + width: 250, + }, + { + title: '法规类型', + dataIndex: 'type', + key: 'type', + width: 150, + }, + { + title: '附件', + dataIndex: 'file', + key: 'file', + width: 180, + render: (text) => ( + {text} + ), + }, + { + title: '备注', + dataIndex: 'remark', + key: 'remark', + width: 400, + }, + ]; + + // 搜索处理 + const handleSearch = () => { + setLoading(true); + // 模拟搜索请求 + setTimeout(() => { + setLoading(false); + message.success('查询完成'); + }, 1000); + }; + + // 新增处理 + const handleAdd = () => { + message.info('新增功能待实现'); + }; + + // 批量删除处理 + const handleBatchDelete = () => { + if (selectedRowKeys.length === 0) { + message.warning('请选择要删除的数据'); + return; + } + Modal.confirm({ + title: '确认删除', + content: `确定要删除选中的 ${selectedRowKeys.length} 条数据吗?`, + onOk() { + setDataSource(dataSource.filter(item => !selectedRowKeys.includes(item.key))); + setSelectedRowKeys([]); + message.success('删除成功'); + }, + }); + }; + + // 编辑处理 + const handleEdit = (record) => { + message.info(`编辑 ${record.name} 的信息`); + }; + + // 删除处理 + const handleDelete = (record) => { + Modal.confirm({ + title: '确认删除', + content: `确定要删除 ${record.name} 吗?`, + onOk() { + setDataSource(dataSource.filter(item => item.key !== record.key)); + message.success('删除成功'); + }, + }); + }; + + // 分页处理 + const handleTableChange = (pagination) => { + setPagination(pagination); + }; + + return ( +
+ {/* 页面标题 */} +
+
+

法律法规

+
+ + {/* 搜索和操作区域 */} +
+ + setSearchValue(e.target.value)} + allowClear + className={styles.searchInput} + /> + + + + +
+ + {/* 数据表格 */} +
+ +
+
+ ); +}; + +export default LawsAndRegulations; diff --git a/src/pages/business_emergencyPlan/components/LawsAndRegulations.less b/src/pages/business_emergencyPlan/components/LawsAndRegulations.less new file mode 100644 index 0000000..ac0aafc --- /dev/null +++ b/src/pages/business_emergencyPlan/components/LawsAndRegulations.less @@ -0,0 +1,111 @@ +.container { + padding: 20px; + background: #fff; + height: 100vh; + width: 100%; + box-sizing: border-box; + margin: 0; + max-width: none; +} + +.header { + display: flex; + align-items: center; + margin-bottom: 15px; + + .titleBar { + width: 3px; + height: 16px; + background: #2E4CD4; + margin-right: 12px; + } + + .title { + margin: 0; + font-size: 14px; + font-weight: 500; + color: #333; + } +} + +.searchBar { + margin-bottom: 10px; + padding: 5px; + + + .searchInput { + border-radius: 4px !important; + } + + .searchButton { + background-color: #2E4CD4 !important; + border-color: #2E4CD4 !important; + border-radius: 4px !important; + + &:hover { + background-color: #1e3bb8 !important; + border-color: #1e3bb8 !important; + } + } + +} + +.tableContainer { + background: #fff; + border-radius: 0px; + overflow: hidden; + + .actionButtons { + display: flex; + gap: 8px; + font-size: 10px; + justify-content: center; + + .ant-btn-link { + padding: 0; + height: auto; + font-size: 10px; + } + } +} + +// 表格样式优化 +.tableContainer { + :global { + .ant-table-thead>tr>th { + background: #F5F5FA; + font-weight: 500; + color: #333333; + font-size: 14px; + text-align: center; + } + + .ant-table-tbody>tr>td { + color: #666666; + font-size: 13px; + text-align: center; + } + + .ant-table-tbody>tr:hover>td { + background: #f5f5f5; + } + + .ant-pagination { + margin-top: 10px; + text-align: right; + } + + // 覆盖操作列按钮样式 + .ant-btn.ant-btn-sm { + font-size: 13px !important; + height: 20px !important; + padding: 0px 4px !important; + } + + .ant-btn-link.ant-btn-sm { + font-size: 13px !important; + height: auto !important; + padding: 0 !important; + } + } +} \ No newline at end of file diff --git a/src/pages/business_emergencyPlan/components/flfg.js b/src/pages/business_emergencyPlan/components/flfg.js deleted file mode 100644 index e665054..0000000 --- a/src/pages/business_emergencyPlan/components/flfg.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import styles from './flfg.less'; - -const Flfg = () => { - return ( -
-
-

法律法规

-

内容待开发

-
-
- ); -}; - -export default Flfg; diff --git a/src/pages/business_emergencyPlan/components/flfg.less b/src/pages/business_emergencyPlan/components/flfg.less deleted file mode 100644 index 4c5baa2..0000000 --- a/src/pages/business_emergencyPlan/components/flfg.less +++ /dev/null @@ -1,21 +0,0 @@ -.container { - padding: 20px; - - .content { - background: #fff; - border-radius: 8px; - padding: 20px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - - h3 { - margin-bottom: 16px; - color: #333; - font-size: 18px; - } - - p { - color: #666; - font-size: 14px; - } - } -}