危化品页面开发
jiangxucong
6 days ago
parent
559ff884f0
commit
b261996328
@ -0,0 +1,194 @@
|
|||||||
|
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 './HazardousChemicals.less';
|
||||||
|
|
||||||
|
const { Option } = Select;
|
||||||
|
|
||||||
|
const HazardousChemicals = () => {
|
||||||
|
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: '化学品',
|
||||||
|
info: '浓硫酸是一种在工业和实验室中不可或缺的基础化学品，但它同时具有极强腐蚀性...',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
name: '二氧化碳',
|
||||||
|
type: '有毒品',
|
||||||
|
info: '二氧化碳是碳酸盐分解（如汽油、木材、煤炭）在不完全燃烧时产生的气体...',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3',
|
||||||
|
name: '氯氧化钠',
|
||||||
|
type: '有毒品',
|
||||||
|
info: '氯氧化钠是一种强氧化剂，俗称“漂粉精”、“火碱”或“烧碱”，它在工业上具有多种用途...',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '4',
|
||||||
|
name: '硫酸',
|
||||||
|
type: '腐蚀品',
|
||||||
|
info: '硫酸是一种在工业和实验室中不可或缺的基础化学品，但它同时具有极强腐蚀性...',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '5',
|
||||||
|
name: '二氧甲烷',
|
||||||
|
type: '有毒品',
|
||||||
|
info: '二氧甲烷一种不可燃、易爆易溶的气体或液体，因此对水的溶解能力和活性...',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '6',
|
||||||
|
name: '次氯酸钠',
|
||||||
|
type: '有毒品',
|
||||||
|
info: '次氯酸钠是一种强氧化剂，具有高效的消毒、漂白和杀菌能力和活性...',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 表格列配置
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '危化品名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
key: 'name',
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '危化品类型',
|
||||||
|
dataIndex: 'type',
|
||||||
|
key: 'type',
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '危化品信息',
|
||||||
|
dataIndex: 'info',
|
||||||
|
key: 'info',
|
||||||
|
width: 500,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 搜索处理
|
||||||
|
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 (
|
||||||
|
<div className={styles.container}>
|
||||||
|
{/* 页面标题 */}
|
||||||
|
<div className={styles.header}>
|
||||||
|
<div className={styles.titleBar}></div>
|
||||||
|
<h2 className={styles.title}>危化品</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 搜索和操作区域 */}
|
||||||
|
<Form
|
||||||
|
layout="inline"
|
||||||
|
className={styles.searchBar}
|
||||||
|
onFinish={handleSearch}
|
||||||
|
>
|
||||||
|
<Form.Item label="" name="searchValue">
|
||||||
|
<Input
|
||||||
|
placeholder='请输入危化品名称'
|
||||||
|
style={{ width: 200 }}
|
||||||
|
value={searchValue}
|
||||||
|
onChange={(e) => setSearchValue(e.target.value)}
|
||||||
|
allowClear
|
||||||
|
className={styles.searchInput}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<SearchOutlined />}
|
||||||
|
htmlType="submit"
|
||||||
|
loading={loading}
|
||||||
|
className={styles.searchButton}
|
||||||
|
>
|
||||||
|
查询
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
|
||||||
|
{/* 数据表格 */}
|
||||||
|
<div className={styles.tableContainer}>
|
||||||
|
<StandardTable
|
||||||
|
columns={columns}
|
||||||
|
data={{
|
||||||
|
list: dataSource,
|
||||||
|
pagination: pagination
|
||||||
|
}}
|
||||||
|
rowKey="key"
|
||||||
|
selectedRows={selectedRowKeys}
|
||||||
|
onSelectRow={setSelectedRowKeys}
|
||||||
|
onChange={handleTableChange}
|
||||||
|
loading={loading}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HazardousChemicals;
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import styles from './whp.less';
|
|
||||||
|
|
||||||
const Whp = () => {
|
|
||||||
return (
|
|
||||||
<div className={styles.container}>
|
|
||||||
<div className={styles.content}>
|
|
||||||
<h3>危化品</h3>
|
|
||||||
<p>内容待开发</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Whp;
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue