fix(设备管理): 修复批量删除后表格刷新问题并优化表格布局

添加forceRefresh参数强制刷新设备数据,解决批量删除后缓存未更新问题
优化表格布局样式,添加flex布局确保表格正确显示和滚动
This commit is contained in:
zhang1106
2025-12-29 16:29:10 +08:00
parent a7499de748
commit 8d023ff11f
+24 -4
View File
@@ -380,12 +380,12 @@ function DeviceManagement() {
}, [allDevices, status, type, debouncedKeyword, searchDevices]); }, [allDevices, status, type, debouncedKeyword, searchDevices]);
// 获取所有设备(支持搜索、筛选和分页)- 使用缓存和useCallback // 获取所有设备(支持搜索、筛选和分页)- 使用缓存和useCallback
const fetchDevices = useCallback(async (page = 1, pageSize = 10) => { const fetchDevices = useCallback(async (page = 1, pageSize = 10, forceRefresh = false) => {
try { try {
setLoading(true); setLoading(true);
// 先获取所有设备数据(使用缓存) // 先获取所有设备数据(使用缓存,批量删除后强制刷新
const allData = await fetchAllDevices(); const allData = await fetchAllDevices(forceRefresh);
setAllDevices(allData); setAllDevices(allData);
// 更新分页信息(筛选后的数据会通过useMemo自动更新) // 更新分页信息(筛选后的数据会通过useMemo自动更新)
@@ -655,7 +655,7 @@ function DeviceManagement() {
message.success(response.data.message || '批量删除成功'); message.success(response.data.message || '批量删除成功');
setSelectedDevices([]); setSelectedDevices([]);
setSelectAll(false); setSelectAll(false);
fetchDevices(); fetchDevices(1, 10, true);
} catch (error) { } catch (error) {
message.error('批量删除失败'); message.error('批量删除失败');
console.error('批量删除设备失败:', error); console.error('批量删除设备失败:', error);
@@ -1285,6 +1285,12 @@ function DeviceManagement() {
<div style={{ padding: '24px' }}> <div style={{ padding: '24px' }}>
<style>{` <style>{`
/* 表格自适应换行样式 */ /* 表格自适应换行样式 */
.device-table-wrapper {
display: flex;
flex-direction: column;
min-height: 0;
}
.device-table-wrapper .ant-table { .device-table-wrapper .ant-table {
width: 100% !important; width: 100% !important;
max-width: 100% !important; max-width: 100% !important;
@@ -1293,6 +1299,8 @@ function DeviceManagement() {
.device-table-wrapper .ant-table-container { .device-table-wrapper .ant-table-container {
width: 100% !important; width: 100% !important;
max-width: 100% !important; max-width: 100% !important;
display: flex;
flex-direction: column;
} }
.device-table-wrapper .ant-table-content { .device-table-wrapper .ant-table-content {
@@ -1301,6 +1309,10 @@ function DeviceManagement() {
overflow-x: hidden !important; overflow-x: hidden !important;
} }
.device-table-wrapper .ant-table-thead {
flex-shrink: 0;
}
.device-table-wrapper .ant-table-thead > tr > th { .device-table-wrapper .ant-table-thead > tr > th {
white-space: normal !important; white-space: normal !important;
word-break: break-word !important; word-break: break-word !important;
@@ -1310,6 +1322,11 @@ function DeviceManagement() {
padding: 12px 8px !important; padding: 12px 8px !important;
} }
.device-table-wrapper .ant-table-tbody {
flex-shrink: 1;
min-height: 0;
}
.device-table-wrapper .ant-table-tbody > tr > td { .device-table-wrapper .ant-table-tbody > tr > td {
white-space: normal !important; white-space: normal !important;
word-break: break-word !important; word-break: break-word !important;
@@ -1568,6 +1585,7 @@ function DeviceManagement() {
<p>暂无设备数据</p> <p>暂无设备数据</p>
</div> </div>
)} )}
{filteredDevicesMemo.length > 0 && (
<div className="device-table-wrapper"> <div className="device-table-wrapper">
<Table <Table
columns={columns} columns={columns}
@@ -1585,6 +1603,7 @@ function DeviceManagement() {
}} }}
style={{ width: '100%', maxWidth: '100%' }} style={{ width: '100%', maxWidth: '100%' }}
size="middle" size="middle"
showHeader={filteredDevicesMemo.length > 0}
rowSelection={{ rowSelection={{
selectedRowKeys: selectedDevices, selectedRowKeys: selectedDevices,
onChange: handleSelectionChange, onChange: handleSelectionChange,
@@ -1625,6 +1644,7 @@ function DeviceManagement() {
}} }}
/> />
</div> </div>
)}
</Card> </Card>
<Modal <Modal