Jelajahi Sumber

✨ feat(areas): 优化区域树数据缓存更新策略

- 在创建、编辑、删除和切换状态操作成功后,不仅更新根级区域树缓存,还会根据父节点ID更新对应子树缓存
- 实现更精准的缓存失效机制,确保区域树数据展示实时性
- 提升用户操作后界面数据刷新的准确性和效率
yourname 3 bulan lalu
induk
melakukan
cec69b6d21
1 mengubah file dengan 29 tambahan dan 1 penghapusan
  1. 29 1
      web/src/client/admin/pages/AreasTreePage.tsx

+ 29 - 1
web/src/client/admin/pages/AreasTreePage.tsx

@@ -82,8 +82,15 @@ export const AreasTreePage: React.FC = () => {
         if (res.status !== 201) throw new Error('创建省市区失败');
       });
     },
-    onSuccess: () => {
+    onSuccess: (_, variables) => {
+      // 更新根级缓存
       queryClient.invalidateQueries({ queryKey: ['areas-tree-province'] });
+
+      // 如果创建的是子节点,更新父节点的子树缓存
+      if (variables.parentId) {
+        queryClient.invalidateQueries({ queryKey: ['areas-subtree', variables.parentId] });
+      }
+
       setIsCreateDialogOpen(false);
     },
   });
@@ -100,7 +107,14 @@ export const AreasTreePage: React.FC = () => {
       });
     },
     onSuccess: () => {
+      // 更新根级缓存
       queryClient.invalidateQueries({ queryKey: ['areas-tree-province'] });
+
+      // 如果更新的节点有父节点,更新父节点的子树缓存
+      if (selectedArea?.parentId) {
+        queryClient.invalidateQueries({ queryKey: ['areas-subtree', selectedArea.parentId] });
+      }
+
       setIsEditDialogOpen(false);
       setSelectedArea(null);
     },
@@ -117,7 +131,14 @@ export const AreasTreePage: React.FC = () => {
       });
     },
     onSuccess: () => {
+      // 更新根级缓存
       queryClient.invalidateQueries({ queryKey: ['areas-tree-province'] });
+
+      // 如果删除的节点有父节点,更新父节点的子树缓存
+      if (selectedArea?.parentId) {
+        queryClient.invalidateQueries({ queryKey: ['areas-subtree', selectedArea.parentId] });
+      }
+
       setIsDeleteDialogOpen(false);
       setSelectedArea(null);
     },
@@ -135,7 +156,14 @@ export const AreasTreePage: React.FC = () => {
       });
     },
     onSuccess: () => {
+      // 更新根级缓存
       queryClient.invalidateQueries({ queryKey: ['areas-tree-province'] });
+
+      // 如果状态切换的节点有父节点,更新父节点的子树缓存
+      if (selectedArea?.parentId) {
+        queryClient.invalidateQueries({ queryKey: ['areas-subtree', selectedArea.parentId] });
+      }
+
       setIsStatusDialogOpen(false);
       setSelectedArea(null);
     },