Просмотр исходного кода

✨ feat(component): 优化部门树选择组件的懒加载功能

- 添加parentId过滤条件,仅查询顶级部门(parentId=0)作为初始数据
- 修改queryKey,添加'root'标识顶级部门查询
- 重构部门树构建逻辑,直接映射部门数据为树节点格式
- 实现子部门懒加载功能,根据节点key查询对应子部门
- 添加loadData属性,启用TreeSelect的懒加载功能
- 设置isLeaf为false,确保所有节点都可展开查询子部门
yourname 8 месяцев назад
Родитель
Сommit
d73bd3b7d3
1 измененных файлов с 33 добавлено и 8 удалено
  1. 33 8
      src/client/admin/components/LazyDepartmentTreeSelect.tsx

+ 33 - 8
src/client/admin/components/LazyDepartmentTreeSelect.tsx

@@ -40,11 +40,18 @@ const LazyDepartmentTreeSelect: React.FC<LazyDepartmentTreeSelectProps> = ({
   const [treeData, setTreeData] = useState<DepartmentNode[]>([]);
   const [loadedKeys, setLoadedKeys] = useState<string[]>([]);
 
-  // 查询部门数据
+  // 查询部门数据 - 使用filter查询顶级部门
   const { data: departmentsData, isLoading } = useQuery({
-    queryKey: ['departments-tree'],
+    queryKey: ['departments-tree', 'root'],
     queryFn: async () => {
-      const response = await departmentsClient.$get({ query: { page: 1, pageSize: 100 } });
+      const filters = { parentId: 0 }; // 查询顶级部门(parentId=0表示顶级)
+      const response = await departmentsClient.$get({
+        query: {
+          page: 1,
+          pageSize: 100,
+          filters: JSON.stringify(filters)
+        }
+      });
       if (response.status !== 200) throw new Error('获取部门列表失败');
       return response.json();
     },
@@ -68,7 +75,12 @@ const LazyDepartmentTreeSelect: React.FC<LazyDepartmentTreeSelectProps> = ({
   useEffect(() => {
     if (departmentsData?.data) {
       const departments = departmentsData.data;
-      const tree = buildDepartmentTree(departments);
+      const tree = departments.map(dept => ({
+        title: dept.name,
+        value: dept.id,
+        key: dept.id.toString(),
+        isLeaf: false, // 初始设为false,实际加载时判断
+      }));
       
       // 如果需要显示根节点
       if (showRoot) {
@@ -87,17 +99,29 @@ const LazyDepartmentTreeSelect: React.FC<LazyDepartmentTreeSelectProps> = ({
     }
   }, [departmentsData, showRoot, rootLabel]);
 
-  // 处理懒加载
+  // 处理懒加载 - 使用filter查询子部门
   const handleLoadData = async (node: any) => {
     try {
       const parentId = parseInt(node.key);
-      const response = await departmentsClient.$get({ 
-        query: { page: 1, pageSize: 100 } 
+      const filters = { parentId: parentId === 0 ? 0 : parentId };
+      
+      const response = await departmentsClient.$get({
+        query: {
+          page: 1,
+          pageSize: 100,
+          filters: JSON.stringify(filters)
+        }
       });
       
       if (response.status === 200) {
         const data = await response.json();
-        const children = buildDepartmentTree(data.data, parentId);
+        // 直接使用返回的数据作为子部门
+        const children = data.data.map(dept => ({
+          title: dept.name,
+          value: dept.id,
+          key: dept.id.toString(),
+          isLeaf: false, // 设为false以便可以继续懒加载子部门
+        }));
         
         // 更新树数据
         setTreeData(prevTreeData => updateTreeData(prevTreeData, node.key, children));
@@ -151,6 +175,7 @@ const LazyDepartmentTreeSelect: React.FC<LazyDepartmentTreeSelectProps> = ({
       loading={isLoading}
       notFoundContent={isLoading ? <Spin size="small" /> : '暂无数据'}
       treeNodeFilterProp="title"
+      loadData={handleLoadData}
     />
   );
 };