接警记录页面
wangyunfei
19 hours ago
parent
192a367fd3
commit
ce3291c5ed
@ -1,3 +1,44 @@
|
|||||||
.container {
|
.container {
|
||||||
padding: 20px;
|
background-color: transparent;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonRow {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 5px;
|
||||||
|
padding: 10px 20px 10px 30px;
|
||||||
|
background-color: #EBF0FE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #333333;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(46, 76, 212, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(180deg, #556FEB 0%, #8DAAF7 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentArea {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #EBF0FE;
|
||||||
|
margin-left: 5px;
|
||||||
|
// margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,170 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Input, Button, Select, message } from 'antd';
|
||||||
|
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
|
||||||
|
import StandardTable from '@/components/StandardTable';
|
||||||
|
import styles from './jjjl.less';
|
||||||
|
|
||||||
|
import iconsc from '@/assets/yjzygl/iconsc.svg';
|
||||||
|
|
||||||
|
const { Option } = Select;
|
||||||
|
|
||||||
|
const Jjjl = () => {
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
||||||
|
const [searchValue, setSearchValue] = useState('');
|
||||||
|
const [pagination, setPagination] = useState({
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
|
showTotal: (total, range) => `共${total}条`,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 数据源
|
||||||
|
const [dataSource, setDataSource] = useState([]);
|
||||||
|
|
||||||
|
// 表格列配置
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '编号',
|
||||||
|
dataIndex: 'number',
|
||||||
|
key: 'number',
|
||||||
|
width: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
width: 120,
|
||||||
|
render: (text, record) => (
|
||||||
|
<div className={styles.actionButtons}>
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
size="small"
|
||||||
|
onClick={() => handleEdit(record)}
|
||||||
|
>
|
||||||
|
修改
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
size="small"
|
||||||
|
danger
|
||||||
|
onClick={() => handleDelete(record)}
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 搜索处理
|
||||||
|
const handleSearch = () => {
|
||||||
|
setLoading(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setLoading(false);
|
||||||
|
message.success('查询完成');
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 新增处理
|
||||||
|
const handleAdd = () => {
|
||||||
|
message.info('新增功能待开发');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 批量删除处理
|
||||||
|
const handleBatchDelete = () => {
|
||||||
|
if (selectedRowKeys.length === 0) {
|
||||||
|
message.warning('请选择要删除的数据');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
message.info('删除功能待开发');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 编辑处理
|
||||||
|
const handleEdit = (record) => {
|
||||||
|
message.info('编辑功能待开发');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除处理
|
||||||
|
const handleDelete = (record) => {
|
||||||
|
message.info('删除功能待开发');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分页处理
|
||||||
|
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>
|
||||||
|
|
||||||
|
{/* 搜索和操作区域 */}
|
||||||
|
<div className={styles.searchBar}>
|
||||||
|
<div className={styles.searchLeft}>
|
||||||
|
<Select
|
||||||
|
placeholder="请选择"
|
||||||
|
value={searchValue}
|
||||||
|
onChange={setSearchValue}
|
||||||
|
style={{width: 180, height: 30, borderRadius: 2}}
|
||||||
|
allowClear
|
||||||
|
>
|
||||||
|
<Option value="选项1">选项1</Option>
|
||||||
|
<Option value="选项2">选项2</Option>
|
||||||
|
</Select>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<SearchOutlined />}
|
||||||
|
onClick={handleSearch}
|
||||||
|
loading={loading}
|
||||||
|
className={styles.customButton}
|
||||||
|
>
|
||||||
|
查询
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className={styles.searchRight}>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={handleAdd}
|
||||||
|
className={styles.customButton}
|
||||||
|
>
|
||||||
|
新增
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
danger
|
||||||
|
style={{width: 70, height: 30, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center'}}
|
||||||
|
icon={<img src={iconsc} alt="delete" style={{width: 14, height: 14, marginTop: -2}}/>}
|
||||||
|
onClick={handleBatchDelete}
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 数据表格 */}
|
||||||
|
<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 Jjjl;
|
||||||
|
|
||||||
@ -0,0 +1,139 @@
|
|||||||
|
.container {
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
height:100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// background-color: pink;
|
||||||
|
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 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
|
||||||
|
.searchLeft {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchRight {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 自定义按钮样式
|
||||||
|
.customButton {
|
||||||
|
background-color: #2E4CD4 !important;
|
||||||
|
border-color: #2E4CD4 !important;
|
||||||
|
border-radius: 2px !important;
|
||||||
|
height: 30px !important;
|
||||||
|
width: 75px;
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #1e3bb8 !important;
|
||||||
|
border-color: #1e3bb8 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: #2E4CD4 !important;
|
||||||
|
border-color: #2E4CD4 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// // 所有按钮统一样式
|
||||||
|
// .ant-btn {
|
||||||
|
// border-radius: 4px !important;
|
||||||
|
// height: 28px !important;
|
||||||
|
// display: flex !important;
|
||||||
|
// align-items: center !important;
|
||||||
|
// justify-content: center !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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue