mirror of
https://gitee.com/san-bing/JChargePointProtocol
synced 2026-05-05 02:19:56 +08:00
* !44 comment * !39 添加下行日志打印 * !36 扩展计价领域模型 * !35 webui 初步成型 * !34 webui 初步成型
This commit is contained in:
三丙
970
jcpp-web-ui/src/components/GunManagement.tsx
Normal file
970
jcpp-web-ui/src/components/GunManagement.tsx
Normal file
@@ -0,0 +1,970 @@
|
||||
/*
|
||||
* 开源代码，仅供学习和交流研究使用，商用请联系三丙
|
||||
* 微信：mohan_88888
|
||||
* 抖音：程序员三丙
|
||||
* 付费课程知识星球：https://t.zsxq.com/aKtXo
|
||||
*/
|
||||
import React, {useEffect, useMemo, useState} from 'react';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Checkbox,
|
||||
Col,
|
||||
Dropdown,
|
||||
Form,
|
||||
Input,
|
||||
Modal,
|
||||
Popconfirm,
|
||||
Row,
|
||||
Select,
|
||||
Space,
|
||||
Table,
|
||||
Tag,
|
||||
Typography
|
||||
} from 'antd';
|
||||
import {DeleteOutlined, PlusOutlined, ReloadOutlined, SearchOutlined, TableOutlined} from '@ant-design/icons';
|
||||
import type {ColumnsType, TableProps} from 'antd/es/table';
|
||||
import {formatTimestamp, generateGunCode, showMessage} from '../utils';
|
||||
import {getErrorMessage} from '../services/api';
|
||||
import * as gunService from '../services/gunService';
|
||||
import * as stationService from '../services/stationService';
|
||||
import {pileService} from '../services/pileService';
|
||||
import type {Gun, GunCreateRequest, PileOption, StationOption} from '../types';
|
||||
|
||||
const { confirm } = Modal;
|
||||
|
||||
const GunManagement: React.FC = () => {
|
||||
const [dataSource, setDataSource] = useState<Gun[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searchForm] = Form.useForm();
|
||||
const [form] = Form.useForm();
|
||||
const [stationOptions, setStationOptions] = useState<StationOption[]>([]);
|
||||
const [pileOptions, setPileOptions] = useState<PileOption[]>([]);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [modalLoading, setModalLoading] = useState(false);
|
||||
const [isEdit, setIsEdit] = useState(false);
|
||||
const [currentRecord, setCurrentRecord] = useState<Gun | null>(null);
|
||||
|
||||
// 分页和搜索状态
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total: number) => `共 ${total} 条记录`
|
||||
});
|
||||
|
||||
const [searchParams, setSearchParams] = useState<{
|
||||
page: number;
|
||||
size: number;
|
||||
gunName?: string;
|
||||
gunCode?: string;
|
||||
gunNo?: string;
|
||||
stationId?: string;
|
||||
sortField?: string;
|
||||
sortOrder?: string;
|
||||
}>({
|
||||
page: 1,
|
||||
size: 10
|
||||
});
|
||||
|
||||
// 批量删除相关状态
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||||
const [batchDeleting, setBatchDeleting] = useState(false);
|
||||
|
||||
// 列可见性配置
|
||||
interface ColumnConfig {
|
||||
key: string;
|
||||
title: string;
|
||||
defaultVisible: boolean;
|
||||
}
|
||||
|
||||
const columnConfigs: ColumnConfig[] = [
|
||||
{ key: 'gunName', title: '充电枪名称', defaultVisible: true },
|
||||
{ key: 'gunCode', title: '充电枪编码', defaultVisible: true },
|
||||
{ key: 'gunNo', title: '枪号', defaultVisible: true },
|
||||
{ key: 'stationName', title: '所属充电站', defaultVisible: true },
|
||||
{ key: 'pileName', title: '所属充电桩', defaultVisible: true },
|
||||
{ key: 'runStatus', title: '运行状态', defaultVisible: true },
|
||||
{ key: 'createdTime', title: '创建时间', defaultVisible: true },
|
||||
{ key: 'updatedTime', title: '更新时间', defaultVisible: false },
|
||||
];
|
||||
|
||||
// 列可见性状态
|
||||
const [visibleColumns, setVisibleColumns] = useState<Record<string, boolean>>(() => {
|
||||
const defaultVisible: Record<string, boolean> = {};
|
||||
columnConfigs.forEach(config => {
|
||||
defaultVisible[config.key] = config.defaultVisible;
|
||||
});
|
||||
return defaultVisible;
|
||||
});
|
||||
|
||||
// 列顺序状态（不包含action列，action列始终在最后）
|
||||
const [columnOrder, setColumnOrder] = useState<string[]>(() => {
|
||||
return columnConfigs.map(config => config.key);
|
||||
});
|
||||
|
||||
// 完整的表格列定义
|
||||
const allColumns: ColumnsType<Gun> = useMemo(() => [
|
||||
{
|
||||
title: '充电枪名称',
|
||||
dataIndex: 'gunName',
|
||||
key: 'gunName',
|
||||
width: 200,
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '充电枪编码',
|
||||
dataIndex: 'gunCode',
|
||||
key: 'gunCode',
|
||||
width: 150,
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '枪号',
|
||||
dataIndex: 'gunNo',
|
||||
key: 'gunNo',
|
||||
width: 55,
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '所属充电站',
|
||||
dataIndex: 'stationName',
|
||||
key: 'stationName',
|
||||
width: 150,
|
||||
sorter: true,
|
||||
render: (stationName: string) => stationName || '-',
|
||||
},
|
||||
{
|
||||
title: '所属充电桩',
|
||||
dataIndex: 'pileName',
|
||||
key: 'pileName',
|
||||
width: 150,
|
||||
sorter: true,
|
||||
render: (pileName: string, record: Gun) => (
|
||||
<div>
|
||||
<div style={{ fontWeight: 500 }}>{pileName || record.pileCode || '-'}</div>
|
||||
{record.pileCode && pileName && (
|
||||
<div style={{ fontSize: '12px', color: '#666' }}>{record.pileCode}</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '运行状态',
|
||||
dataIndex: 'runStatus',
|
||||
key: 'runStatus',
|
||||
width: 100,
|
||||
render: (status: string) => {
|
||||
const getRunStatusColor = (status: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
'IDLE': 'green',
|
||||
'INSERTED': 'orange',
|
||||
'CHARGING': 'blue',
|
||||
'CHARGE_COMPLETE': 'cyan',
|
||||
'DISCHARGE_READY': 'purple',
|
||||
'DISCHARGING': 'magenta',
|
||||
'DISCHARGE_COMPLETE': 'lime',
|
||||
'RESERVED': 'geekblue',
|
||||
'FAULT': 'red'
|
||||
};
|
||||
return colors[status] || 'default';
|
||||
};
|
||||
|
||||
const getRunStatusText = (status: string) => {
|
||||
const texts: Record<string, string> = {
|
||||
'IDLE': '空闲',
|
||||
'INSERTED': '已插枪',
|
||||
'CHARGING': '充电中',
|
||||
'CHARGE_COMPLETE': '充电完成',
|
||||
'DISCHARGE_READY': '放电准备',
|
||||
'DISCHARGING': '放电中',
|
||||
'DISCHARGE_COMPLETE': '放电完成',
|
||||
'RESERVED': '预约中',
|
||||
'FAULT': '故障'
|
||||
};
|
||||
return texts[status] || status;
|
||||
};
|
||||
|
||||
return <Tag color={getRunStatusColor(status)}>{getRunStatusText(status)}</Tag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createdTime',
|
||||
key: 'createdTime',
|
||||
width: 95,
|
||||
sorter: true,
|
||||
render: (timestamp: number) => {
|
||||
const formatted = formatTimestamp(timestamp);
|
||||
if (!formatted || formatted === '-') return formatted;
|
||||
const parts = formatted.split(' ');
|
||||
return (
|
||||
<div style={{ lineHeight: '1.3', fontSize: '13px' }}>
|
||||
<div>{parts[0]}</div>
|
||||
<div style={{ color: '#666' }}>{parts[1]}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updatedTime',
|
||||
key: 'updatedTime',
|
||||
width: 95,
|
||||
sorter: true,
|
||||
render: (timestamp: number) => {
|
||||
const formatted = formatTimestamp(timestamp);
|
||||
if (!formatted || formatted === '-') return formatted;
|
||||
const parts = formatted.split(' ');
|
||||
return (
|
||||
<div style={{ lineHeight: '1.3', fontSize: '13px' }}>
|
||||
<div>{parts[0]}</div>
|
||||
<div style={{ color: '#666' }}>{parts[1]}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
fixed: 'right',
|
||||
render: (record: Gun) => (
|
||||
<Space>
|
||||
<Button type="link" size="small" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button type="link" size="small" onClick={() => handleView(record)}>
|
||||
查看
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="确认删除充电枪"
|
||||
description={
|
||||
<div>
|
||||
<p>确定要删除充电枪 <strong>{record.gunName}</strong> 吗？</p>
|
||||
<p style={{ color: '#ff4d4f', margin: 0 }}>此操作不可撤销，请谨慎操作！</p>
|
||||
</div>
|
||||
}
|
||||
onConfirm={() => handleDelete(record)}
|
||||
okText="确定删除"
|
||||
okType="danger"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button type="link" size="small" danger>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
], []);
|
||||
|
||||
// 根据可见性和顺序过滤并排序列
|
||||
const visibleColumnsData = useMemo(() => {
|
||||
// 先按照用户定义的顺序排序（不包含action）
|
||||
const orderedColumns = columnOrder.map(key => {
|
||||
return allColumns.find(col => col.key === key);
|
||||
}).filter(Boolean) as ColumnsType<Gun>;
|
||||
|
||||
// 过滤出可见的列
|
||||
const filtered = orderedColumns.filter(column => {
|
||||
return visibleColumns[column.key as string];
|
||||
});
|
||||
|
||||
// 找到操作列并确保始终在最后
|
||||
const actionColumn = allColumns.find(col => col.key === 'action');
|
||||
|
||||
return actionColumn ? [...filtered, actionColumn] : filtered;
|
||||
}, [visibleColumns, columnOrder, allColumns]);
|
||||
|
||||
// 列选择器变更处理
|
||||
const handleColumnVisibilityChange = (checkedValues: string[]) => {
|
||||
const newVisibleColumns: Record<string, boolean> = {};
|
||||
columnConfigs.forEach(config => {
|
||||
newVisibleColumns[config.key] = checkedValues.includes(config.key);
|
||||
});
|
||||
setVisibleColumns(newVisibleColumns);
|
||||
};
|
||||
|
||||
// 移动列顺序
|
||||
const moveColumn = (index: number, direction: 'up' | 'down') => {
|
||||
const visibleKeys = columnOrder.filter(key => visibleColumns[key]);
|
||||
const currentKey = visibleKeys[index];
|
||||
const targetIndex = direction === 'up' ? index - 1 : index + 1;
|
||||
|
||||
if (targetIndex >= 0 && targetIndex < visibleKeys.length) {
|
||||
const targetKey = visibleKeys[targetIndex];
|
||||
|
||||
// 在原始顺序中交换位置
|
||||
const newOrder = [...columnOrder];
|
||||
const currentOriginalIndex = newOrder.indexOf(currentKey);
|
||||
const targetOriginalIndex = newOrder.indexOf(targetKey);
|
||||
|
||||
[newOrder[currentOriginalIndex], newOrder[targetOriginalIndex]] =
|
||||
[newOrder[targetOriginalIndex], newOrder[currentOriginalIndex]];
|
||||
|
||||
setColumnOrder(newOrder);
|
||||
}
|
||||
};
|
||||
|
||||
// 列选择器菜单
|
||||
const columnSelectorMenu = {
|
||||
items: [
|
||||
{
|
||||
key: 'column-selector',
|
||||
label: (
|
||||
<div style={{ padding: '8px 0', minWidth: 200 }} onClick={e => e.stopPropagation()}>
|
||||
<Typography.Text strong style={{ fontSize: 12 }}>自定义列显示</Typography.Text>
|
||||
|
||||
{/* 列可见性选择 */}
|
||||
<div style={{ marginTop: 8, marginBottom: 12 }}>
|
||||
<Typography.Text style={{ fontSize: 11, color: '#666' }}>选择显示列：</Typography.Text>
|
||||
<Checkbox.Group
|
||||
value={Object.keys(visibleColumns).filter(key => visibleColumns[key])}
|
||||
onChange={handleColumnVisibilityChange}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{columnOrder.map(key => {
|
||||
const config = columnConfigs.find(c => c.key === key);
|
||||
if (!config) return null;
|
||||
return (
|
||||
<Checkbox key={config.key} value={config.key} style={{ fontSize: 11 }}>
|
||||
{config.title}
|
||||
</Checkbox>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Checkbox.Group>
|
||||
</div>
|
||||
|
||||
{/* 列顺序调整 */}
|
||||
<div>
|
||||
<Typography.Text style={{ fontSize: 11, color: '#666' }}>调整列顺序：</Typography.Text>
|
||||
<div style={{ maxHeight: 120, overflowY: 'auto', marginTop: 4 }}>
|
||||
{columnOrder.filter(key => visibleColumns[key]).map((key, index, visibleKeys) => {
|
||||
const config = columnConfigs.find(c => c.key === key);
|
||||
if (!config) return null;
|
||||
|
||||
return (
|
||||
<div key={key} style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '2px 0',
|
||||
fontSize: 11,
|
||||
gap: 4
|
||||
}}>
|
||||
<span style={{ flex: 1, minWidth: 0 }}>{config.title}</span>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
onClick={() => moveColumn(index, 'up')}
|
||||
disabled={index === 0}
|
||||
style={{ padding: '0 4px', height: 20, fontSize: 10 }}
|
||||
>
|
||||
↑
|
||||
</Button>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
onClick={() => moveColumn(index, 'down')}
|
||||
disabled={index === visibleKeys.length - 1}
|
||||
style={{ padding: '0 4px', height: 20, fontSize: 10 }}
|
||||
>
|
||||
↓
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 加载数据
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await gunService.getGuns(searchParams);
|
||||
const { records, total } = response;
|
||||
setDataSource(records);
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
current: searchParams.page,
|
||||
pageSize: searchParams.size,
|
||||
total
|
||||
}));
|
||||
} catch (error: any) {
|
||||
console.error('加载充电枪数据失败:', error);
|
||||
const errorMessage = getErrorMessage(error);
|
||||
showMessage.error(errorMessage);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载充电站选项
|
||||
const loadStationOptions = async () => {
|
||||
try {
|
||||
const response = await stationService.getStationOptions();
|
||||
setStationOptions(Array.isArray(response) ? response : []);
|
||||
} catch (error: any) {
|
||||
console.error('加载充电站选项失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载充电桩选项
|
||||
const loadPileOptions = async () => {
|
||||
try {
|
||||
const response = await pileService.getPileOptions();
|
||||
setPileOptions(response.data || []);
|
||||
} catch (error: any) {
|
||||
console.error('加载充电桩选项失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 监听搜索参数变化
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [searchParams]);
|
||||
|
||||
// 初始化加载充电站选项和充电桩选项
|
||||
useEffect(() => {
|
||||
loadStationOptions();
|
||||
loadPileOptions();
|
||||
}, []);
|
||||
|
||||
// 处理表格变化
|
||||
const handleTableChange: TableProps<Gun>['onChange'] = (pag, filters, sorter) => {
|
||||
let newParams = {
|
||||
...searchParams,
|
||||
page: pag.current || 1,
|
||||
size: pag.pageSize || 10
|
||||
};
|
||||
|
||||
// 处理排序
|
||||
if (sorter && !Array.isArray(sorter) && sorter.field) {
|
||||
newParams.sortField = sorter.field as string;
|
||||
newParams.sortOrder = sorter.order === 'ascend' ? 'asc' : 'desc';
|
||||
} else {
|
||||
delete newParams.sortField;
|
||||
delete newParams.sortOrder;
|
||||
}
|
||||
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = (values: any) => {
|
||||
const newParams = {
|
||||
page: 1,
|
||||
size: pagination.pageSize,
|
||||
...values
|
||||
};
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
// 重置搜索
|
||||
const handleReset = () => {
|
||||
searchForm.resetFields();
|
||||
const newParams = {
|
||||
page: 1,
|
||||
size: pagination.pageSize
|
||||
};
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
// 显示新建模态框
|
||||
const showCreateModal = () => {
|
||||
setIsEdit(false);
|
||||
setCurrentRecord(null);
|
||||
setModalVisible(true);
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
// 处理编辑
|
||||
const handleEdit = (record: Gun) => {
|
||||
setIsEdit(true);
|
||||
setCurrentRecord(record);
|
||||
setModalVisible(true);
|
||||
form.setFieldsValue({
|
||||
...record,
|
||||
gunNo: record.gunNo.toString()
|
||||
});
|
||||
};
|
||||
|
||||
// 处理查看
|
||||
const handleView = (record: Gun) => {
|
||||
showMessage.info('查看功能待实现');
|
||||
};
|
||||
|
||||
// 生成充电枪编码
|
||||
const handleGenerateGunCode = () => {
|
||||
const pileId = form.getFieldValue('pileId');
|
||||
const gunNo = form.getFieldValue('gunNo');
|
||||
|
||||
if (!pileId || !gunNo) {
|
||||
showMessage.warning('请先选择充电桩和填写枪号');
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedPile = pileOptions.find(p => p.id === pileId);
|
||||
if (selectedPile) {
|
||||
const code = generateGunCode(selectedPile.pileCode, gunNo);
|
||||
form.setFieldValue('gunCode', code);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理表单提交
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setModalLoading(true);
|
||||
|
||||
if (isEdit && currentRecord) {
|
||||
// 编辑功能待实现
|
||||
showMessage.info('编辑功能待实现');
|
||||
} else {
|
||||
// 新建充电枪
|
||||
const createData: GunCreateRequest = {
|
||||
gunName: values.gunName,
|
||||
gunNo: values.gunNo,
|
||||
gunCode: values.gunCode,
|
||||
stationId: values.stationId,
|
||||
pileId: values.pileId
|
||||
};
|
||||
await gunService.createGun(createData);
|
||||
showMessage.success('充电枪创建成功');
|
||||
}
|
||||
|
||||
setModalVisible(false);
|
||||
// 清空选择状态并重新加载数据
|
||||
setSelectedRowKeys([]);
|
||||
loadData();
|
||||
} catch (error: any) {
|
||||
if (error.errorFields) {
|
||||
// 表单验证错误
|
||||
return;
|
||||
}
|
||||
showMessage.error(getErrorMessage(error));
|
||||
} finally {
|
||||
setModalLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 取消模态框
|
||||
const handleCancel = () => {
|
||||
setModalVisible(false);
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
// 处理删除
|
||||
const handleDelete = async (record: Gun) => {
|
||||
try {
|
||||
console.log('开始删除充电枪:', record.gunName, 'ID:', record.id);
|
||||
await gunService.deleteGun(record.id);
|
||||
console.log('删除充电枪成功:', record.gunName);
|
||||
showMessage.success(`充电枪 "${record.gunName}" 删除成功`);
|
||||
// 清空选择状态并重新加载数据
|
||||
setSelectedRowKeys([]);
|
||||
loadData();
|
||||
} catch (error: any) {
|
||||
console.error('删除充电枪失败:', error);
|
||||
console.error('错误详情:', {
|
||||
response: error?.response,
|
||||
data: error?.response?.data,
|
||||
status: error?.response?.status,
|
||||
message: error?.message
|
||||
});
|
||||
|
||||
const errorMessage = getErrorMessage(error);
|
||||
console.log('处理后的错误消息:', errorMessage);
|
||||
|
||||
showMessage.error(`删除充电枪 "${record.gunName}" 失败：${errorMessage}`);
|
||||
}
|
||||
};
|
||||
|
||||
// 批量删除
|
||||
const handleBatchDelete = async () => {
|
||||
if (selectedRowKeys.length === 0) {
|
||||
showMessage.warning('请先选择要删除的记录');
|
||||
return;
|
||||
}
|
||||
|
||||
confirm({
|
||||
title: '确认批量删除',
|
||||
content: (
|
||||
<div>
|
||||
<p>您确定要删除选中的 <strong style={{ color: '#ff4d4f' }}>{selectedRowKeys.length}</strong> 条充电枪吗？</p>
|
||||
<p style={{ color: '#ff4d4f', marginTop: 8 }}>⚠️ 此操作不可撤销，请谨慎操作！</p>
|
||||
</div>
|
||||
),
|
||||
okText: '确认删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
width: 420,
|
||||
centered: true,
|
||||
onOk: async () => {
|
||||
setBatchDeleting(true);
|
||||
let successCount = 0;
|
||||
let failCount = 0;
|
||||
const failedNames: string[] = [];
|
||||
const failedReasons: string[] = [];
|
||||
|
||||
try {
|
||||
// 使用 for...of 循环按顺序删除
|
||||
for (const key of selectedRowKeys) {
|
||||
try {
|
||||
await gunService.deleteGun(key as string);
|
||||
successCount++;
|
||||
|
||||
// 每删除一个都更新进度提示
|
||||
if (selectedRowKeys.length > 3) {
|
||||
showMessage.loading(`正在删除... (${successCount}/${selectedRowKeys.length})`);
|
||||
}
|
||||
} catch (error: any) {
|
||||
failCount++;
|
||||
const record = dataSource.find(item => item.id === key);
|
||||
const gunName = record?.gunName || `ID: ${key}`;
|
||||
failedNames.push(gunName);
|
||||
|
||||
// 获取详细错误信息
|
||||
const errorMessage = getErrorMessage(error);
|
||||
failedReasons.push(`${gunName}: ${errorMessage}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 显示删除结果
|
||||
if (failCount === 0) {
|
||||
showMessage.success(`批量删除成功，共删除 ${successCount} 条充电枪`);
|
||||
} else if (successCount === 0) {
|
||||
// 全部失败
|
||||
showMessage.error(
|
||||
`批量删除失败，所有 ${failCount} 条充电枪都删除失败。失败原因：${failedReasons.join('; ')}`
|
||||
);
|
||||
} else {
|
||||
// 部分成功
|
||||
showMessage.warning(
|
||||
`删除完成：成功 ${successCount} 条，失败 ${failCount} 条。失败原因：${failedReasons.join('; ')}`
|
||||
);
|
||||
}
|
||||
|
||||
// 重新加载数据并清空选择
|
||||
setSelectedRowKeys([]);
|
||||
loadData();
|
||||
} catch (error: any) {
|
||||
// 处理整体操作异常
|
||||
const errorMessage = getErrorMessage(error);
|
||||
showMessage.error(`批量删除操作失败：${errorMessage}`);
|
||||
} finally {
|
||||
setBatchDeleting(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 行选择配置
|
||||
const rowSelection = {
|
||||
selectedRowKeys,
|
||||
onChange: (newSelectedRowKeys: React.Key[]) => {
|
||||
setSelectedRowKeys(newSelectedRowKeys);
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16
|
||||
}}>
|
||||
<h2 style={{ margin: 0, fontSize: 20, fontWeight: 600, color: '#262626' }}>
|
||||
充电枪管理
|
||||
</h2>
|
||||
<Space>
|
||||
{selectedRowKeys.length > 0 && (
|
||||
<Button
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={handleBatchDelete}
|
||||
loading={batchDeleting}
|
||||
>
|
||||
批量删除 ({selectedRowKeys.length})
|
||||
</Button>
|
||||
)}
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={showCreateModal}>
|
||||
新建充电枪
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* 搜索表单 */}
|
||||
<Card style={{ marginBottom: 16 }}>
|
||||
<Form
|
||||
form={searchForm}
|
||||
onFinish={handleSearch}
|
||||
>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={6}>
|
||||
<Form.Item label="充电枪名称" name="gunName" style={{ marginBottom: 0 }}>
|
||||
<Input
|
||||
placeholder="请输入充电枪名称"
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item label="充电枪编码" name="gunCode" style={{ marginBottom: 0 }}>
|
||||
<Input
|
||||
placeholder="请输入充电枪编码"
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item label="枪号" name="gunNo" style={{ marginBottom: 0 }}>
|
||||
<Input
|
||||
placeholder="请输入枪号"
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item label="所属充电站" name="stationId" style={{ marginBottom: 0 }}>
|
||||
<Select
|
||||
placeholder="请选择充电站"
|
||||
allowClear
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
>
|
||||
{stationOptions.map(station => (
|
||||
<Select.Option key={station.id} value={station.id}>
|
||||
{station.stationName}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={[16, 16]} style={{ marginTop: 16 }}>
|
||||
<Col span={6}>
|
||||
<Form.Item label="所属充电桩" name="pileId" style={{ marginBottom: 0 }}>
|
||||
<Select
|
||||
placeholder="请选择充电桩"
|
||||
allowClear
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
>
|
||||
{pileOptions.map(pile => (
|
||||
<Select.Option key={pile.id} value={pile.id}>
|
||||
{pile.label}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item label="运行状态" name="runStatus" style={{ marginBottom: 0 }}>
|
||||
<Select
|
||||
placeholder="请选择运行状态"
|
||||
allowClear
|
||||
>
|
||||
<Select.Option value="IDLE">空闲</Select.Option>
|
||||
<Select.Option value="INSERTED">已插枪</Select.Option>
|
||||
<Select.Option value="CHARGING">充电中</Select.Option>
|
||||
<Select.Option value="CHARGE_COMPLETE">充电完成</Select.Option>
|
||||
<Select.Option value="DISCHARGE_READY">放电准备</Select.Option>
|
||||
<Select.Option value="DISCHARGING">放电中</Select.Option>
|
||||
<Select.Option value="DISCHARGE_COMPLETE">放电完成</Select.Option>
|
||||
<Select.Option value="RESERVED">预约中</Select.Option>
|
||||
<Select.Option value="FAULT">故障</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item style={{ marginBottom: 0 }}>
|
||||
<Space>
|
||||
<Button icon={<ReloadOutlined />} onClick={handleReset}>
|
||||
重置
|
||||
</Button>
|
||||
<Button type="primary" icon={<SearchOutlined />} htmlType="submit">
|
||||
搜索
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
{/* 数据表格 */}
|
||||
<Card
|
||||
title="充电枪列表"
|
||||
extra={
|
||||
<Dropdown
|
||||
menu={columnSelectorMenu}
|
||||
placement="bottomRight"
|
||||
trigger={['click']}
|
||||
overlayStyle={{ minWidth: 180 }}
|
||||
>
|
||||
<Button
|
||||
icon={<TableOutlined />}
|
||||
type="text"
|
||||
size="small"
|
||||
style={{ padding: '4px 8px' }}
|
||||
title="自定义列"
|
||||
/>
|
||||
</Dropdown>
|
||||
}
|
||||
>
|
||||
<Table
|
||||
rowSelection={rowSelection}
|
||||
columns={visibleColumnsData}
|
||||
dataSource={dataSource}
|
||||
loading={loading}
|
||||
pagination={{
|
||||
...pagination,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
|
||||
}}
|
||||
onChange={handleTableChange}
|
||||
rowKey="id"
|
||||
size="small"
|
||||
scroll={{ x: 900 }}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* 新增/编辑充电枪Modal */}
|
||||
<Modal
|
||||
title={isEdit ? '编辑充电枪' : '新建充电枪'}
|
||||
open={modalVisible}
|
||||
onOk={handleSubmit}
|
||||
onCancel={handleCancel}
|
||||
confirmLoading={modalLoading}
|
||||
width={600}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
>
|
||||
{isEdit && (
|
||||
<Form.Item name="id" hidden>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
<Form.Item
|
||||
label="充电枪名称"
|
||||
name="gunName"
|
||||
rules={[{ required: true, message: '请输入充电枪名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入充电枪名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="所属充电站"
|
||||
name="stationId"
|
||||
rules={[{ required: true, message: '请选择充电站' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择充电站"
|
||||
showSearch
|
||||
allowClear
|
||||
filterOption={(input, option) =>
|
||||
(option?.children as unknown as string)?.toLowerCase().includes(input.toLowerCase())
|
||||
}
|
||||
>
|
||||
{stationOptions.map(station => (
|
||||
<Select.Option key={station.id} value={station.id}>
|
||||
{station.label}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="所属充电桩"
|
||||
name="pileId"
|
||||
rules={[{ required: true, message: '请选择充电桩' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择充电桩"
|
||||
showSearch
|
||||
allowClear
|
||||
filterOption={(input, option) =>
|
||||
(option?.children as unknown as string)?.toLowerCase().includes(input.toLowerCase())
|
||||
}
|
||||
>
|
||||
{pileOptions.map(pile => (
|
||||
<Select.Option key={pile.id} value={pile.id}>
|
||||
{pile.label}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="枪号"
|
||||
name="gunNo"
|
||||
rules={[{ required: true, message: '请输入枪号' }]}
|
||||
>
|
||||
<Input placeholder="请输入枪号" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="充电枪编码"
|
||||
name="gunCode"
|
||||
rules={[{ required: true, message: '请输入充电枪编码' }]}
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入充电枪编码"
|
||||
disabled={isEdit}
|
||||
suffix={
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={handleGenerateGunCode}
|
||||
disabled={isEdit}
|
||||
style={{
|
||||
height: '24px',
|
||||
lineHeight: '24px',
|
||||
padding: '0 8px',
|
||||
fontSize: '12px',
|
||||
color: '#1890ff',
|
||||
fontWeight: 500,
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
boxShadow: 'none'
|
||||
}}
|
||||
>
|
||||
生成
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GunManagement;
|
||||
Reference in New Issue
Block a user