完成评查点分组的增删改

app/routes/rule-groups._index.tsx

@@ -1,4 +1,4 @@
-import { json, type MetaFunction } from "@remix-run/node";
+import { type MetaFunction } from "@remix-run/node";
 import { useLoaderData, Link, useNavigate, useSearchParams } from "@remix-run/react";
 import { useState, useEffect } from "react";
 import indexStyles from "~/styles/pages/rule-groups_index.css?url";
@@ -8,7 +8,7 @@ import { StatusDot } from "~/components/ui/StatusDot";
 import { Table } from "~/components/ui/Table";
 import { FilterPanel, FilterSelect, SearchFilter } from "~/components/ui/FilterPanel";
 import { Pagination } from "~/components/ui/Pagination";
-import { getRuleGroups, getChildGroups, type RuleGroup } from "~/api/evaluation_points/rule-groups";
+import { getRuleGroups, getChildGroups, type RuleGroup, deleteRuleGroup } from "~/api/evaluation_points/rule-groups";
 
 export function links() {
   return [{ rel: "stylesheet", href: indexStyles }];
@@ -27,10 +27,10 @@ export async function loader() {
     if (response.error) {
       throw new Error(response.error);
     }
-    return json({ groups: response.data });
+    return Response.json({ groups: response.data });
   } catch (error) {
     console.error('加载评查点分组失败:', error);
-    return json({ groups: [] });
+    return Response.json({ groups: [] });
   }
 }
 
@@ -39,8 +39,72 @@ export default function RuleGroupsIndex() {
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
   const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
-  const [groups, setGroups] = useState<RuleGroup[]>(initialGroups);
+  const [groups, setGroups] = useState<RuleGroup[]>(initialGroups || []);
   const [loading, setLoading] = useState<Record<string, boolean>>({});
+  const [filteredChildrenMap, setFilteredChildrenMap] = useState<Record<string, RuleGroup[]>>({});
+  const [initialLoading, setInitialLoading] = useState<boolean>(true);
+  
+  // 初始加载时自动加载所有子分组
+  useEffect(() => {
+    const loadAllChildGroups = async () => {
+      if (!initialGroups || initialGroups.length === 0) {
+        setInitialLoading(false);
+        return;
+      }
+      
+      try {
+        // 创建一个加载状态对象，标记所有父分组正在加载
+        const loadingState: Record<string, boolean> = {};
+        initialGroups.forEach((group: RuleGroup) => {
+          loadingState[group.id] = true;
+        });
+        setLoading(loadingState);
+        
+        // 并行加载所有父分组的子分组
+        const promises = initialGroups.map(async (group: RuleGroup) => {
+          try {
+            const response = await getChildGroups(group.id);
+            if (response.error) {
+              console.error(`加载分组 ${group.id} 的子分组失败:`, response.error);
+              return { parentId: group.id, children: [] };
+            }
+            return { parentId: group.id, children: response.data };
+          } catch (error) {
+            console.error(`加载分组 ${group.id} 的子分组出错:`, error);
+            return { parentId: group.id, children: [] };
+          }
+        });
+        
+        const results = await Promise.all(promises);
+        
+        // 更新分组数据
+        setGroups(prev => {
+          const newGroups = [...prev];
+          results.forEach(({ parentId, children }) => {
+            const parentIndex = newGroups.findIndex(g => g.id === parentId);
+            if (parentIndex !== -1) {
+              newGroups[parentIndex] = {
+                ...newGroups[parentIndex],
+                children
+              };
+            }
+          });
+          return newGroups;
+        });
+        
+        // 展开所有父分组
+        setExpandedGroups(initialGroups.map((group: RuleGroup) => group.id));
+      } catch (error) {
+        console.error('自动加载所有子分组失败:', error);
+      } finally {
+        // 清除所有加载状态
+        setLoading({});
+        setInitialLoading(false);
+      }
+    };
+    
+    loadAllChildGroups();
+  }, [initialGroups]);
   
   // 处理展开/收起
   const toggleGroup = async (groupId: string) => {
@@ -53,6 +117,26 @@ export default function RuleGroupsIndex() {
     // 展开分组
     setLoading(prev => ({ ...prev, [groupId]: true }));
     try {
+      const parentGroup = groups.find(g => g.id === groupId);
+      
+      // 如果已经加载过子分组，直接展开
+      if (parentGroup && parentGroup.children && parentGroup.children.length > 0) {
+        setExpandedGroups(prev => [...prev, groupId]);
+        
+        // 应用现有的过滤条件到已加载的子分组
+        const nameFilter = searchParams.get('name') || '';
+        const codeFilter = searchParams.get('code') || '';
+        const statusFilter = searchParams.get('is_enabled') || '';
+        
+        if ((nameFilter || codeFilter || statusFilter) && parentGroup.children) {
+          applyFiltersToChildren(groupId, parentGroup.children);
+        }
+        
+        setLoading(prev => ({ ...prev, [groupId]: false }));
+        return;
+      }
+      
+      // 否则加载子分组
       const response = await getChildGroups(groupId);
       if (response.error) {
         throw new Error(response.error);
@@ -70,6 +154,15 @@ export default function RuleGroupsIndex() {
       }));
       
       setExpandedGroups(prev => [...prev, groupId]);
+      
+      // 应用现有的过滤条件到新加载的子分组
+      const nameFilter = searchParams.get('name') || '';
+      const codeFilter = searchParams.get('code') || '';
+      const statusFilter = searchParams.get('is_enabled') || '';
+      
+      if ((nameFilter || codeFilter || statusFilter) && response.data) {
+        applyFiltersToChildren(groupId, response.data);
+      }
     } catch (error) {
       console.error('加载子分组失败:', error);
     } finally {
@@ -83,23 +176,46 @@ export default function RuleGroupsIndex() {
       // 展开所有分组
       const expandedIds = groups.map(g => g.id);
       setExpandedGroups(expandedIds);
-      
-      // 加载所有子分组
-      for (const group of groups) {
-        if (!group.children || group.children.length === 0) {
-          await toggleGroup(group.id);
-        }
-      }
     } else {
       setExpandedGroups([]);
     }
   };
   
   // 处理删除分组
-  const handleDeleteGroup = (groupId: string) => {
+  const handleDeleteGroup = async (groupId: string) => {
     if (confirm("确定要删除该分组吗？此操作将同时删除该分组下的所有评查点，且不可恢复。")) {
-      console.log('删除分组ID:', groupId);
-      // TODO: 实现删除分组的API调用
+      try {
+        const result = await deleteRuleGroup(groupId);
+        if (result.success) {
+          // 从本地状态中移除被删除的分组
+          setGroups(prev => {
+            // 如果是一级分组，直接过滤掉
+            const filteredGroups = prev.filter(g => g.id !== groupId);
+            
+            // 如果是二级分组，需要从父分组的 children 中移除
+            return filteredGroups.map(group => {
+              if (group.children) {
+                return {
+                  ...group,
+                  children: group.children.filter(child => child.id !== groupId)
+                };
+              }
+              return group;
+            });
+          });
+          
+          // 如果被删除的分组当前是展开状态，从展开列表中移除
+          setExpandedGroups(prev => prev.filter(id => id !== groupId));
+          
+          // 显示成功消息
+          alert('删除成功');
+        } else {
+          alert(`删除失败: ${result.error}`);
+        }
+      } catch (error) {
+        console.error('删除分组失败:', error);
+        alert('删除分组失败，请稍后重试');
+      }
     }
   };
 
@@ -132,9 +248,9 @@ export default function RuleGroupsIndex() {
     const { value } = e.target;
     const newParams = new URLSearchParams(searchParams);
     if (value) {
-      newParams.set('status', value);
+      newParams.set('is_enabled', value);
     } else {
-      newParams.delete('status');
+      newParams.delete('is_enabled');
     }
     newParams.set('page', '1');
     setSearchParams(newParams);
@@ -143,10 +259,145 @@ export default function RuleGroupsIndex() {
   // 处理重置筛选
   const handleReset = () => {
     setSearchParams(new URLSearchParams());
+    setFilteredChildrenMap({});
+    
+    // 清空输入框内容（通过DOM操作）
+    const nameInput = document.querySelector('input[placeholder="请输入分组名称"]') as HTMLInputElement;
+    const codeInput = document.querySelector('input[placeholder="请输入分组编码"]') as HTMLInputElement;
+    const statusSelect = document.querySelector('select[name="is_enabled"]') as HTMLSelectElement;
+    
+    if (nameInput) nameInput.value = '';
+    if (codeInput) codeInput.value = '';
+    if (statusSelect) statusSelect.value = '';
   };
 
+  // 应用筛选条件到子分组
+  const applyFiltersToChildren = (parentId: string, children: RuleGroup[]) => {
+    const nameFilter = searchParams.get('name') || '';
+    const codeFilter = searchParams.get('code') || '';
+    const statusFilter = searchParams.get('is_enabled') || '';
+    
+
+    if (!nameFilter && !codeFilter && !statusFilter) {
+      setFilteredChildrenMap(prev => ({...prev, [parentId]: []}));
+      return;
+    }
+    
+    const filteredChildren = children.filter(child => {
+      // 筛选名称
+      if (nameFilter && !child.name.toLowerCase().includes(nameFilter.toLowerCase())) {
+        return false;
+      }
+      
+      // 筛选编码
+      if (codeFilter && (!child.code || !child.code.toLowerCase().includes(codeFilter.toLowerCase()))) {
+        return false;
+      }
+      
+      // 筛选状态
+      if (statusFilter) {
+        const isEnabled = statusFilter === 'true';
+        if (child.is_enabled !== isEnabled) {
+          return false;
+        }
+      }
+      
+      return true;
+    });
+    
+    setFilteredChildrenMap(prev => ({...prev, [parentId]: filteredChildren}));
+  };
+  
+  // 当筛选条件变化时，重新计算过滤结果
+  useEffect(() => {
+    const nameFilter = searchParams.get('name') || '';
+    const codeFilter = searchParams.get('code') || '';
+    const statusFilter = searchParams.get('is_enabled') || '';
+    
+    if (!nameFilter && !codeFilter && !statusFilter) {
+      setFilteredChildrenMap({});
+      return;
+    }
+    
+    // 检查所有已加载的子分组
+    groups.forEach(group => {
+      if (group.children && group.children.length > 0) {
+        applyFiltersToChildren(group.id, group.children);
+      }
+    });
+    
+    // 查找匹配的子分组，自动展开它们的父级
+    const parentsToExpand: string[] = [];
+    
+    groups.forEach(group => {
+      if (group.children && group.children.length > 0) {
+        const hasMatchingChild = group.children.some(child => {
+          const nameMatch = !nameFilter || child.name.toLowerCase().includes(nameFilter.toLowerCase());
+          const codeMatch = !codeFilter || (child.code && child.code.toLowerCase().includes(codeFilter.toLowerCase()));
+          const statusMatch = !statusFilter || (statusFilter === 'true' ? child.is_enabled : !child.is_enabled);
+          
+          return nameMatch && codeMatch && statusMatch;
+        });
+        
+        if (hasMatchingChild && !expandedGroups.includes(group.id)) {
+          parentsToExpand.push(group.id);
+        }
+      }
+    });
+    
+    if (parentsToExpand.length > 0) {
+      setExpandedGroups(prev => [...prev, ...parentsToExpand]);
+    }
+  }, [searchParams, groups]);
+  
+  // 检查父级分组是否匹配筛选条件
+  const parentMatchesFilter = (group: RuleGroup): boolean => {
+    const nameFilter = searchParams.get('name') || '';
+    const codeFilter = searchParams.get('code') || '';
+    const statusFilter = searchParams.get('is_enabled') || '';
+    
+    // 筛选名称
+    if (nameFilter && !group.name.toLowerCase().includes(nameFilter.toLowerCase())) {
+      return false;
+    }
+    
+    // 筛选编码
+    if (codeFilter && (!group.code || !group.code.toLowerCase().includes(codeFilter.toLowerCase()))) {
+      return false;
+    }
+    
+    // 筛选状态
+    if (statusFilter) {
+      const isEnabled = statusFilter === 'true';
+      if (group.is_enabled !== isEnabled) {
+        return false;
+      }
+    }
+    
+    return true;
+  };
+  
+  // 检查父级分组是否有匹配的子分组
+  const hasMatchingChildren = (parentId: string): boolean => {
+    const filteredChildren = filteredChildrenMap[parentId];
+    return filteredChildren && filteredChildren.length > 0;
+  };
+  
   // 处理表格数据，包括父子级关系
   const processedData = groups.flatMap(group => {
+    const parentMatches = parentMatchesFilter(group);
+    const hasMatched = hasMatchingChildren(group.id);
+    
+    // 如果有筛选条件但父级和子级都不匹配，则不显示
+    const nameFilter = searchParams.get('name') || '';
+    const codeFilter = searchParams.get('code') || '';
+    const statusFilter = searchParams.get('is_enabled') || '';
+    const hasFilters = nameFilter || codeFilter || statusFilter;
+    
+    if (hasFilters && !parentMatches && !hasMatched) {
+      return [];
+    }
+    
     // 先添加父级分组
     const result: (RuleGroup & { isParent?: boolean, parentId?: string })[] = [
       { ...group, isParent: true }
@@ -154,14 +405,39 @@ export default function RuleGroupsIndex() {
     
     // 如果有子级分组并且当前已展开，则添加子级分组
     if (group.children && expandedGroups.includes(group.id)) {
-      group.children.forEach(child => {
-        result.push({ ...child, parentId: group.id });
-      });
+      // 如果有筛选条件并且有过滤后的子分组，则显示过滤后的子分组
+      if (hasFilters && filteredChildrenMap[group.id]) {
+        filteredChildrenMap[group.id].forEach(child => {
+          result.push({ ...child, parentId: group.id });
+        });
+      } 
+      // 否则显示所有子分组
+      else if (!hasFilters) {
+        group.children.forEach(child => {
+          result.push({ ...child, parentId: group.id });
+        });
+      }
     }
     
     return result;
   });
 
+  // 计算一级分组的评查点数量（累加其所有二级分组的评查点数量）
+  const calculateTotalRuleCount = (record: RuleGroup & { isParent?: boolean, parentId?: string }) => {
+    // 如果是二级分组，直接返回其评查点数量
+    if (!record.isParent) {
+      return record.ruleCount || 0;
+    }
+    
+    // 如果是一级分组，累加其所有子分组的评查点数量
+    let totalCount = 0;
+    if (record.children && record.children.length > 0) {
+      totalCount = record.children.reduce((sum, child) => sum + (child.ruleCount || 0), 0);
+    }
+    
+    return totalCount;
+  };
+
   // 定义表格列配置
   const columns = [
     {
@@ -205,24 +481,26 @@ export default function RuleGroupsIndex() {
     {
       title: "分组编码",
       key: "code",
-      render: (_: unknown, record: RuleGroup) => record.code
+      render: (_: unknown, record: RuleGroup) => (
+        <span>{record.code || '-'}</span>
+      )
     },
     {
       title: "评查点数量",
       key: "ruleCount",
-      render: (_: unknown, record: RuleGroup) => (
+      render: (_: unknown, record: RuleGroup & { isParent?: boolean, parentId?: string }) => (
         <Link to={`/rule-groups/${record.id}/rules`} className="badge bg-primary text-white">
-          {record.ruleCount || 0}
+          {calculateTotalRuleCount(record)}
         </Link>
       )
     },
     {
       title: "状态",
-      key: "status",
+      key: "is_enabled",
       render: (_: unknown, record: RuleGroup) => (
         <StatusDot 
-          status={record.status ? 'success' : 'error'} 
-          text={record.status ? '启用' : '禁用'} 
+          status={record.is_enabled ? 'success' : 'error'} 
+          text={record.is_enabled ? '启用' : '禁用'} 
           align="left"
         />
       )
@@ -230,7 +508,9 @@ export default function RuleGroupsIndex() {
     {
       title: "创建时间",
       key: "createdAt",
-      render: (_: unknown, record: RuleGroup) => record.createdAt
+      render: (_: unknown, record: RuleGroup) => (
+        <span>{record.createdAt || '-'}</span>
+      )
     },
     {
       title: "操作",
@@ -296,9 +576,9 @@ export default function RuleGroupsIndex() {
             <Button type="default" icon="ri-refresh-line" onClick={handleReset} className="mr-2">
               重置
             </Button>
-            <Button type="primary" icon="ri-search-line">
+            {/* <Button type="primary" icon="ri-search-line" onClick={() => {}}>
               搜索
-            </Button>
+            </Button> */}
           </>
         }
         noActionDivider={true}
@@ -323,8 +603,8 @@ export default function RuleGroupsIndex() {
         
         <FilterSelect
           label="状态"
-          name="status"
-          value={searchParams.get('status') || ''}
+          name="is_enabled"
+          value={searchParams.get('is_enabled') || ''}
           options={[
             { value: "true", label: "启用" },
             { value: "false", label: "禁用" }
@@ -336,22 +616,31 @@ export default function RuleGroupsIndex() {
       
       {/* 数据表格 - 使用Table组件 */}
       <Card bodyClassName="px-4 py-4">
-        <Table
-          columns={columns}
-          dataSource={processedData}
-          rowKey="id"
-          emptyText="暂无分组数据"
-          className="tree-table"
-        />
-        
-        {/* 分页 - 使用Pagination组件 */}
-        <Pagination
-          currentPage={1}
-          total={groups.length}
-          pageSize={10}
-          onChange={() => {}}
-          showTotal={true}
-        />
+        {initialLoading ? (
+          <div className="flex justify-center items-center py-10">
+            <i className="ri-loader-4-line animate-spin text-2xl mr-2"></i>
+            <span>正在加载分组数据...</span>
+          </div>
+        ) : (
+          <>
+            <Table
+              columns={columns}
+              dataSource={processedData}
+              rowKey="id"
+              emptyText="暂无分组数据"
+              className="tree-table"
+            />
+            
+            {/* 分页 - 使用Pagination组件 */}
+            <Pagination
+              currentPage={1}
+              total={processedData.length}
+              pageSize={10}
+              onChange={() => {}}
+              showTotal={true}
+            />
+          </>
+        )}
       </Card>
     </div>
   );