mirror of
https://gitee.com/san-bing/JChargePointProtocol
synced 2026-05-05 02:19:56 +08:00
1114 lines
35 KiB
TypeScript
1114 lines
35 KiB
TypeScript
/*
|
||
* 开源代码，仅供学习和交流研究使用，商用请联系三丙
|
||
* 微信：mohan_88888
|
||
* 抖音：程序员三丙
|
||
* 付费课程知识星球：https://t.zsxq.com/aKtXo
|
||
*/
|
||
import React, {useCallback, 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, TableOutlined} from '@ant-design/icons';
|
||
import type {ColumnsType, TableProps} from 'antd/es/table';
|
||
import {pileService} from '../services/pileService';
|
||
import * as stationService from '../services/stationService';
|
||
import * as protocolService from '../services/protocolService';
|
||
import {getErrorMessage} from '../services/api';
|
||
import {Pile, PileCreateRequest, PileQueryRequest, PileUpdateRequest, StationOption} from '../types';
|
||
import {
|
||
debounce,
|
||
formatTimestamp,
|
||
generatePileCode,
|
||
getProtocolText,
|
||
getStatusColor,
|
||
getStatusText,
|
||
getTypeText,
|
||
showMessage
|
||
} from '../utils';
|
||
|
||
const { confirm } = Modal;
|
||
|
||
|
||
const PileManagement: React.FC = () => {
|
||
// 状态管理
|
||
const [loading, setLoading] = useState(false);
|
||
const [dataSource, setDataSource] = useState<Pile[]>([]);
|
||
const [modalVisible, setModalVisible] = useState(false);
|
||
const [modalTitle, setModalTitle] = useState('');
|
||
const [isEdit, setIsEdit] = useState(false);
|
||
const [stationOptions, setStationOptions] = useState<StationOption[]>([]);
|
||
const [stationLoading, setStationLoading] = useState(false);
|
||
|
||
// 协议选项
|
||
const [protocolOptions, setProtocolOptions] = useState<protocolService.ProtocolOption[]>([]);
|
||
|
||
// 批量删除相关状态
|
||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||
const [batchDeleting, setBatchDeleting] = useState(false);
|
||
|
||
// 表单实例
|
||
const [form] = Form.useForm();
|
||
const [searchForm] = Form.useForm();
|
||
|
||
// 分页和搜索状态
|
||
const [pagination, setPagination] = useState({
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
showTotal: (total: number) => `共 ${total} 条记录`
|
||
});
|
||
|
||
const [searchParams, setSearchParams] = useState<PileQueryRequest>({
|
||
page: 1, // 修改为从1开始，与后端保持一致
|
||
size: 10
|
||
});
|
||
|
||
// 列可见性配置
|
||
interface ColumnConfig {
|
||
key: string;
|
||
title: string;
|
||
defaultVisible: boolean;
|
||
}
|
||
|
||
const columnConfigs: ColumnConfig[] = [
|
||
{ key: 'pileName', title: '充电桩名称', defaultVisible: true },
|
||
{ key: 'pileCode', title: '充电桩编码', defaultVisible: true },
|
||
{ key: 'protocol', title: '协议', defaultVisible: false },
|
||
{ key: 'brand', title: '品牌', defaultVisible: false },
|
||
{ key: 'model', title: '型号', defaultVisible: false },
|
||
{ key: 'manufacturer', title: '制造商', defaultVisible: false },
|
||
{ key: 'type', title: '类型', defaultVisible: false },
|
||
{ key: 'status', title: '状态', defaultVisible: true },
|
||
{ key: 'connectedAt', title: '连接时间', defaultVisible: true },
|
||
{ key: 'disconnectedAt', title: '断线时间', defaultVisible: true },
|
||
{ key: 'lastActiveTime', 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<Pile> = useMemo(() => [
|
||
{
|
||
title: '充电桩名称',
|
||
dataIndex: 'pileName',
|
||
key: 'pileName',
|
||
width: 150,
|
||
sorter: true,
|
||
render: (text: string) => (
|
||
<div style={{
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap'
|
||
}} title={text}>
|
||
{text}
|
||
</div>
|
||
)
|
||
},
|
||
{
|
||
title: '充电桩编码',
|
||
dataIndex: 'pileCode',
|
||
key: 'pileCode',
|
||
width: 140,
|
||
sorter: true,
|
||
render: (text: string) => (
|
||
<div style={{
|
||
wordBreak: 'break-word',
|
||
whiteSpace: 'pre-wrap',
|
||
lineHeight: '1.3'
|
||
}}>
|
||
{text}
|
||
</div>
|
||
)
|
||
},
|
||
{
|
||
title: '协议',
|
||
dataIndex: 'protocol',
|
||
key: 'protocol',
|
||
width: 110,
|
||
render: (protocol: string) => getProtocolText(protocol)
|
||
},
|
||
{
|
||
title: '品牌',
|
||
dataIndex: 'brand',
|
||
key: 'brand',
|
||
width: 100,
|
||
sorter: true
|
||
},
|
||
{
|
||
title: '型号',
|
||
dataIndex: 'model',
|
||
key: 'model',
|
||
width: 100
|
||
},
|
||
{
|
||
title: '制造商',
|
||
dataIndex: 'manufacturer',
|
||
key: 'manufacturer',
|
||
width: 120,
|
||
sorter: true
|
||
},
|
||
{
|
||
title: '类型',
|
||
dataIndex: 'type',
|
||
key: 'type',
|
||
width: 100,
|
||
render: (type: 'AC' | 'DC') => (
|
||
<Tag color={type === 'AC' ? 'blue' : 'orange'}>
|
||
{getTypeText(type)}
|
||
</Tag>
|
||
)
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
key: 'status',
|
||
width: 65,
|
||
render: (status: string) => (
|
||
<Tag color={getStatusColor(status)}>
|
||
{getStatusText(status)}
|
||
</Tag>
|
||
)
|
||
},
|
||
{
|
||
title: '连接时间',
|
||
dataIndex: 'connectedAt',
|
||
key: 'connectedAt',
|
||
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: 'disconnectedAt',
|
||
key: 'disconnectedAt',
|
||
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: 'lastActiveTime',
|
||
key: 'lastActiveTime',
|
||
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: '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: 140,
|
||
fixed: 'right',
|
||
render: (_, record) => (
|
||
<Space size="small">
|
||
<Button type="link" size="small" onClick={() => handleEdit(record)} style={{ padding: '0 4px' }}>
|
||
编辑
|
||
</Button>
|
||
<Popconfirm
|
||
title="确认删除充电桩"
|
||
description={
|
||
<div>
|
||
<p>确定要删除充电桩 <strong>{record.pileName}</strong> 吗？</p>
|
||
<p style={{ color: '#ff4d4f', margin: 0 }}>此操作不可撤销，请谨慎操作！</p>
|
||
</div>
|
||
}
|
||
onConfirm={() => handleDelete(record)}
|
||
okText="确定删除"
|
||
okType="danger"
|
||
cancelText="取消"
|
||
>
|
||
<Button type="link" size="small" danger style={{ padding: '0 4px' }}>
|
||
删除
|
||
</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<Pile>;
|
||
|
||
// 过滤出可见的列
|
||
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 pileService.getPiles(searchParams);
|
||
const { records, total } = response.data;
|
||
setDataSource(records);
|
||
setPagination(prev => ({
|
||
...prev,
|
||
current: searchParams.page, // 现在页码从1开始，直接使用
|
||
pageSize: searchParams.size,
|
||
total
|
||
}));
|
||
} catch (error: any) {
|
||
console.error('加载充电桩数据失败:', error);
|
||
const errorMessage = getErrorMessage(error);
|
||
showMessage.error(errorMessage);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 搜索充电站选项（带防抖）
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
const searchStationOptions = useCallback(
|
||
debounce(async (keyword: string) => {
|
||
setStationLoading(true);
|
||
try {
|
||
const response = await stationService.searchStationOptions({
|
||
keyword,
|
||
page: 1, // 修改为从1开始
|
||
size: 20
|
||
});
|
||
setStationOptions(Array.isArray(response) ? response : []);
|
||
} catch (error: any) {
|
||
console.error('搜索充电站选项失败:', error);
|
||
showMessage.error('搜索充电站列表失败');
|
||
} finally {
|
||
setStationLoading(false);
|
||
}
|
||
}, 300),
|
||
[]
|
||
);
|
||
|
||
// 初始化加载充电站选项
|
||
const loadInitialStationOptions = async () => {
|
||
try {
|
||
const response = await stationService.searchStationOptions({
|
||
page: 1, // 修改为从1开始
|
||
size: 20
|
||
});
|
||
setStationOptions(Array.isArray(response) ? response : []);
|
||
} catch (error: any) {
|
||
console.error('加载充电站选项失败:', error);
|
||
showMessage.error('加载充电站列表失败');
|
||
}
|
||
};
|
||
|
||
// 加载协议选项
|
||
const loadProtocolOptions = async () => {
|
||
try {
|
||
const protocols = await protocolService.getSupportedProtocols();
|
||
setProtocolOptions(protocols);
|
||
} catch (error: any) {
|
||
console.error('加载协议选项失败:', error);
|
||
showMessage.error('加载协议选项失败');
|
||
}
|
||
};
|
||
|
||
// 表格变化处理
|
||
const handleTableChange: TableProps<Pile>['onChange'] = (pag, filters, sorter) => {
|
||
let newParams = {
|
||
...searchParams,
|
||
page: pag.current || 1, // 直接使用current，不再减1
|
||
size: pag.pageSize || 10
|
||
};
|
||
|
||
// 处理排序
|
||
if (sorter && !Array.isArray(sorter) && sorter.field) {
|
||
newParams = {
|
||
...newParams,
|
||
sortField: sorter.field as string, // 修改为sortField
|
||
sortOrder: sorter.order === 'ascend' ? 'asc' : 'desc' // 修改为小写
|
||
};
|
||
} else {
|
||
delete newParams.sortField; // 修改为sortField
|
||
delete newParams.sortOrder;
|
||
}
|
||
|
||
// 只更新搜索参数，让useEffect自动处理数据加载和分页状态同步
|
||
setSearchParams(newParams);
|
||
};
|
||
|
||
// 搜索处理
|
||
const handleSearch = (values: any) => {
|
||
const newParams: PileQueryRequest = {
|
||
page: 1, // 搜索时重置为第1页
|
||
size: pagination.pageSize,
|
||
...values
|
||
};
|
||
setSearchParams(newParams);
|
||
};
|
||
|
||
// 重置搜索
|
||
const handleReset = () => {
|
||
searchForm.resetFields();
|
||
const newParams: PileQueryRequest = {
|
||
page: 1, // 重置时回到第1页
|
||
size: pagination.pageSize
|
||
};
|
||
setSearchParams(newParams);
|
||
};
|
||
|
||
// 显示新建Modal
|
||
const showCreateModal = async () => {
|
||
form.resetFields();
|
||
// 设置默认值
|
||
form.setFieldsValue({
|
||
protocol: 'yunkuaichongV150',
|
||
type: 'AC'
|
||
});
|
||
setModalTitle('新建充电桩');
|
||
setIsEdit(false);
|
||
await loadInitialStationOptions();
|
||
setModalVisible(true);
|
||
};
|
||
|
||
// 编辑充电桩
|
||
const handleEdit = async (record: Pile) => {
|
||
form.resetFields();
|
||
form.setFieldsValue({
|
||
id: record.id,
|
||
pileName: record.pileName,
|
||
pileCode: record.pileCode,
|
||
protocol: record.protocol,
|
||
type: record.type,
|
||
brand: record.brand,
|
||
model: record.model,
|
||
manufacturer: record.manufacturer,
|
||
stationId: record.stationId
|
||
});
|
||
setModalTitle('编辑充电桩');
|
||
setIsEdit(true);
|
||
await loadInitialStationOptions();
|
||
setModalVisible(true);
|
||
};
|
||
|
||
|
||
// 生成充电桩编码
|
||
const handleGeneratePileCode = () => {
|
||
const code = generatePileCode();
|
||
form.setFieldValue('pileCode', code);
|
||
};
|
||
|
||
// Modal确认
|
||
const handleModalOk = async () => {
|
||
try {
|
||
const values = await form.validateFields();
|
||
let response;
|
||
|
||
if (isEdit) {
|
||
// 编辑
|
||
const updateData: PileUpdateRequest = {
|
||
pileName: values.pileName,
|
||
protocol: values.protocol,
|
||
type: values.type,
|
||
brand: values.brand,
|
||
model: values.model,
|
||
manufacturer: values.manufacturer,
|
||
stationId: values.stationId
|
||
};
|
||
response = await pileService.updatePile(values.id, updateData);
|
||
showMessage.success(`充电桩 "${values.pileName}" 更新成功`);
|
||
} else {
|
||
// 新建
|
||
const createData: PileCreateRequest = {
|
||
pileName: values.pileName,
|
||
pileCode: values.pileCode,
|
||
protocol: values.protocol,
|
||
type: values.type,
|
||
brand: values.brand,
|
||
model: values.model,
|
||
manufacturer: values.manufacturer,
|
||
stationId: values.stationId
|
||
};
|
||
response = await pileService.createPile(createData);
|
||
showMessage.success(`充电桩 "${values.pileName}" 创建成功`);
|
||
}
|
||
|
||
setModalVisible(false);
|
||
// 清空选择状态并重新加载数据
|
||
setSelectedRowKeys([]);
|
||
loadData();
|
||
} catch (error: any) {
|
||
console.error('操作失败:', error);
|
||
|
||
// 获取错误消息和HTTP状态码
|
||
const errorMessage = error?.response?.data?.message || getErrorMessage(error) || '操作失败，请重试';
|
||
const httpStatus = error?.response?.status || 500;
|
||
|
||
// 使用Toast显示错误消息
|
||
showMessage.error(errorMessage);
|
||
}
|
||
};
|
||
|
||
// Modal取消
|
||
const handleModalCancel = () => {
|
||
setModalVisible(false);
|
||
form.resetFields();
|
||
};
|
||
|
||
// 删除充电桩
|
||
const handleDelete = async (record: Pile) => {
|
||
try {
|
||
console.log('开始删除充电桩:', record.pileName, 'ID:', record.id);
|
||
const response = await pileService.deletePile(record.id);
|
||
console.log('删除充电桩成功:', record.pileName, 'response:', response);
|
||
showMessage.success(`充电桩 "${record.pileName}" 删除成功`);
|
||
// 清空选择状态并重新加载数据
|
||
setSelectedRowKeys([]);
|
||
loadData();
|
||
} catch (error: any) {
|
||
console.error('删除充电桩失败:', error);
|
||
console.error('错误详情:', {
|
||
response: error?.response,
|
||
data: error?.response?.data,
|
||
status: error?.response?.status,
|
||
message: error?.message
|
||
});
|
||
|
||
// 获取错误消息和HTTP状态码
|
||
const baseErrorMessage = getErrorMessage(error);
|
||
console.log('处理后的错误消息:', baseErrorMessage);
|
||
|
||
const errorMessage = `删除充电桩 "${record.pileName}" 失败：${baseErrorMessage}`;
|
||
const httpStatus = error?.response?.status || 500;
|
||
|
||
// 使用Toast显示错误消息
|
||
showMessage.error(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 pileService.deletePile(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 pileName = record?.pileName || `ID: ${key}`;
|
||
failedNames.push(pileName);
|
||
|
||
// 获取详细错误信息
|
||
const errorMessage = getErrorMessage(error);
|
||
failedReasons.push(`${pileName}: ${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);
|
||
},
|
||
onSelectAll: (selected: boolean, selectedRows: Pile[], changeRows: Pile[]) => {
|
||
console.log('onSelectAll:', selected, selectedRows, changeRows);
|
||
},
|
||
onSelect: (record: Pile, selected: boolean, selectedRows: Pile[]) => {
|
||
console.log('onSelect:', record, selected, selectedRows);
|
||
},
|
||
};
|
||
|
||
// 充电站选项过滤函数
|
||
const filterStationOption = (input: string, option: any) => {
|
||
const label = option.children;
|
||
return label.toLowerCase().includes(input.toLowerCase());
|
||
};
|
||
|
||
// 组件挂载时加载数据
|
||
useEffect(() => {
|
||
loadData();
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [searchParams]);
|
||
|
||
useEffect(() => {
|
||
loadInitialStationOptions();
|
||
loadProtocolOptions();
|
||
}, []);
|
||
|
||
return (
|
||
<div style={{ padding: '0' }}>
|
||
{/* 页面头部 */}
|
||
<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="pileName" style={{ marginBottom: 0 }}>
|
||
<Input
|
||
placeholder="请输入充电桩名称"
|
||
allowClear
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Form.Item label="充电桩编码" name="pileCode" style={{ marginBottom: 0 }}>
|
||
<Input
|
||
placeholder="请输入充电桩编码"
|
||
allowClear
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Form.Item label="品牌" name="brand" style={{ marginBottom: 0 }}>
|
||
<Input
|
||
placeholder="请输入品牌"
|
||
allowClear
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Form.Item label="制造商" name="manufacturer" style={{ marginBottom: 0 }}>
|
||
<Input
|
||
placeholder="请输入制造商"
|
||
allowClear
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
<Row gutter={[16, 16]} style={{ marginTop: 16 }}>
|
||
<Col span={6}>
|
||
<Form.Item label="协议" name="protocol" style={{ marginBottom: 0 }}>
|
||
<Select
|
||
placeholder="请选择协议"
|
||
allowClear
|
||
showSearch
|
||
optionFilterProp="children"
|
||
filterOption={(input, option) =>
|
||
String(option?.children || '').toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||
}
|
||
>
|
||
{protocolOptions.map(protocol => (
|
||
<Select.Option key={protocol.value} value={protocol.value}>
|
||
{protocol.label}
|
||
</Select.Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Form.Item label="型号" name="model" style={{ marginBottom: 0 }}>
|
||
<Input
|
||
placeholder="请输入型号"
|
||
allowClear
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Form.Item label="类型" name="type" style={{ marginBottom: 0 }}>
|
||
<Select
|
||
placeholder="请选择类型"
|
||
allowClear
|
||
>
|
||
<Select.Option value="AC">交流桩</Select.Option>
|
||
<Select.Option value="DC">直流桩</Select.Option>
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Form.Item label="状态" name="status" style={{ marginBottom: 0 }}>
|
||
<Select
|
||
placeholder="请选择状态"
|
||
allowClear
|
||
>
|
||
<Select.Option value="ONLINE">在线</Select.Option>
|
||
<Select.Option value="OFFLINE">离线</Select.Option>
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
<Row style={{ marginTop: 16 }}>
|
||
<Col span={24} style={{ textAlign: 'right' }}>
|
||
<Space>
|
||
<Button onClick={handleReset}>重置</Button>
|
||
<Button type="primary" htmlType="submit">搜索</Button>
|
||
</Space>
|
||
</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={modalTitle}
|
||
open={modalVisible}
|
||
width={800}
|
||
onOk={handleModalOk}
|
||
onCancel={handleModalCancel}
|
||
>
|
||
<Form
|
||
form={form}
|
||
labelCol={{ span: 6 }}
|
||
wrapperCol={{ span: 16 }}
|
||
>
|
||
{isEdit && (
|
||
<Form.Item name="id" hidden>
|
||
<Input />
|
||
</Form.Item>
|
||
)}
|
||
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
label="充电桩名称"
|
||
name="pileName"
|
||
rules={[{ required: true, message: '请输入充电桩名称' }]}
|
||
>
|
||
<Input placeholder="请输入充电桩名称" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
label="充电桩编码"
|
||
name="pileCode"
|
||
rules={[{ required: true, message: '请输入充电桩编码' }]}
|
||
>
|
||
<Input
|
||
placeholder="请输入充电桩编码"
|
||
disabled={isEdit}
|
||
suffix={
|
||
<Button
|
||
type="link"
|
||
size="small"
|
||
onClick={handleGeneratePileCode}
|
||
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>
|
||
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
label="协议"
|
||
name="protocol"
|
||
rules={[{ required: true, message: '请选择协议' }]}
|
||
>
|
||
<Select placeholder="请选择协议">
|
||
{protocolOptions.map(protocol => (
|
||
<Select.Option key={protocol.value} value={protocol.value}>
|
||
{protocol.label}
|
||
</Select.Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
label="类型"
|
||
name="type"
|
||
rules={[{ required: true, message: '请选择类型' }]}
|
||
>
|
||
<Select placeholder="请选择类型">
|
||
<Select.Option value="AC">交流桩</Select.Option>
|
||
<Select.Option value="DC">直流桩</Select.Option>
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item label="品牌" name="brand">
|
||
<Input placeholder="请输入品牌" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item label="型号" name="model">
|
||
<Input placeholder="请输入型号" />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item label="制造商" name="manufacturer">
|
||
<Input placeholder="请输入制造商" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
label="充电站"
|
||
name="stationId"
|
||
rules={[{ required: true, message: '请选择充电站' }]}
|
||
>
|
||
<Select
|
||
placeholder="请选择充电站"
|
||
showSearch
|
||
loading={stationLoading}
|
||
onSearch={searchStationOptions}
|
||
filterOption={filterStationOption}
|
||
allowClear
|
||
>
|
||
{(stationOptions || []).map(station => (
|
||
<Select.Option key={station.id} value={station.id}>
|
||
{station.label}
|
||
</Select.Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default PileManagement;
|