Sfoglia il codice sorgente

✨ feat(city-selector): 增强城市级联选择器功能

- 为所有层级的地区请求添加排序参数,确保地区选项按id升序显示
- 优化级联选择逻辑,当前层级变化时自动清除所有下级选择
- 改进清除逻辑的条件判断,避免不必要的状态更新
- 添加代码注释,提高层级联动逻辑的可维护性
yourname 4 mesi fa
parent
commit
26e57e4760
1 ha cambiato i file con 32 aggiunte e 9 eliminazioni
  1. 32 9
      src/client/admin-shadcn/components/CityCascadeSelector.tsx

+ 32 - 9
src/client/admin-shadcn/components/CityCascadeSelector.tsx

@@ -51,6 +51,8 @@ export const CityCascadeSelector: React.FC<CityCascadeSelectorProps> = ({
           page: 1,
           pageSize: 100,
           filters: JSON.stringify({ level: 1 }),
+          sortOrder: 'ASC',
+          sortBy: 'id'
         },
       });
       if (res.status !== 200) throw new Error('获取省份数据失败');
@@ -69,6 +71,7 @@ export const CityCascadeSelector: React.FC<CityCascadeSelectorProps> = ({
           page: 1,
           pageSize: 100,
           filters: JSON.stringify({ level: 2, parentId: provinceValue }),
+          sortOrder: 'ASC',
         },
       });
       if (res.status !== 200) throw new Error('获取城市数据失败');
@@ -88,6 +91,7 @@ export const CityCascadeSelector: React.FC<CityCascadeSelectorProps> = ({
           page: 1,
           pageSize: 100,
           filters: JSON.stringify({ level: 3, parentId: cityValue }),
+          sortOrder: 'ASC',
         },
       });
       if (res.status !== 200) throw new Error('获取区县数据失败');
@@ -107,6 +111,7 @@ export const CityCascadeSelector: React.FC<CityCascadeSelectorProps> = ({
           page: 1,
           pageSize: 100,
           filters: JSON.stringify({ level: 4, parentId: districtValue }),
+          sortOrder: 'ASC',
         },
       });
       if (res.status !== 200) throw new Error('获取街道数据失败');
@@ -118,22 +123,40 @@ export const CityCascadeSelector: React.FC<CityCascadeSelectorProps> = ({
 
   // 清除下级选择器
   useEffect(() => {
-    if (!provinceValue && cityValue !== undefined) {
-      onCityChange?.(0);
+    // 当省份变化时,清除城市、区县、街道
+    if (provinceValue !== undefined) {
+      if (cityValue !== undefined) {
+        onCityChange?.(0);
+      }
+      if (districtValue !== undefined) {
+        onDistrictChange?.(0);
+      }
+      if (townValue !== undefined) {
+        onTownChange?.(0);
+      }
     }
-  }, [provinceValue, cityValue]);
+  }, [provinceValue]);
 
   useEffect(() => {
-    if (!cityValue && districtValue !== undefined) {
-      onDistrictChange?.(0);
+    // 当城市变化时,清除区县、街道
+    if (cityValue !== undefined) {
+      if (districtValue !== undefined) {
+        onDistrictChange?.(0);
+      }
+      if (townValue !== undefined) {
+        onTownChange?.(0);
+      }
     }
-  }, [cityValue, districtValue]);
+  }, [cityValue]);
 
   useEffect(() => {
-    if (!districtValue && townValue !== undefined) {
-      onTownChange?.(0);
+    // 当区县变化时,清除街道
+    if (districtValue !== undefined) {
+      if (townValue !== undefined) {
+        onTownChange?.(0);
+      }
     }
-  }, [districtValue, townValue]);
+  }, [districtValue]);
 
   const renderSelect = (
     label: string,