完成评查点分组的增删改

app/routes/files.upload.tsx

@@ -31,10 +31,10 @@ export const meta: MetaFunction = () => {
 
 // 文件类型定义
 export enum FileType {
-  CONTRACT = "contract",
-  LICENSE = "license",
-  PUNISHMENT = "punishment",
-  OTHER = "other"
+  CONTRACT = "1",
+  LICENSE = "2",
+  PUNISHMENT = "3",
+  OTHER = "4"
 }
 
 // 文件类型标签映射
@@ -59,6 +59,13 @@ export const PRIORITY_LABELS: Record<Priority, string> = {
   [Priority.URGENT]: "紧急"
 };
 
+// 优先级中文映射
+const PRIORITY_TO_CHINESE: Record<Priority, string> = {
+  [Priority.NORMAL]: "普通",
+  [Priority.HIGH]: "优先",
+  [Priority.URGENT]: "紧急"
+};
+
 // 处理状态定义
 export enum ProcessingStatus {
   WAITING = "waiting",
@@ -128,46 +135,62 @@ async function uploadFileToServer(
   await new Promise(resolve => setTimeout(resolve, 500));
   
   try {
-    // 创建HTTP请求的参数（实际环境中会使用这些参数发送请求）
+    // 创建FormData对象，将文件和其他信息一起提交
+    const formData = new FormData();
+    
+    // 将二进制数据转换为Blob并添加到FormData
+    const blob = new Blob([binaryData], { type: fileType });
+    formData.append('file', blob, fileName);
+    
+    // 将 type_id 和 priority 添加到一个JSON对象中
+    const uploadInfo = {
+      type_id: Number(documentType), // 确保 type_id 是数字值
+      evaluation_level: PRIORITY_TO_CHINESE[priority] // 转换为中文优先级
+    };
+    
+    // 添加 JSON 字符串到 FormData
+    formData.append('upload_info', JSON.stringify(uploadInfo));
+    
+    // 创建HTTP请求的参数
     const requestParams = {
       method: 'POST',
       url: 'http://172.16.0.55:8000/admin/documents/upload',
       headers: {
-        'Content-Type': 'application/octet-stream',
-        'X-File-Name': encodeURIComponent(fileName),
-        'X-File-Type': fileType,
-        'X-Document-Type': documentType,
-        'X-Priority': priority
+        // FormData会自动设置Content-Type为multipart/form-data
+        'X-File-Name': encodeURIComponent(fileName)
       },
-      body: binaryData // 二进制数据作为请求体
+      body: formData
     };
     
+    // 打印 FormData 内容的正确方式
     console.log('[模拟API] 请求参数:', {
       url: requestParams.url,
       headers: requestParams.headers,
-      bodySize: binaryData.byteLength
+      uploadInfo, // 直接打印原始对象更有帮助
+      formDataEntries: Array.from(formData.entries()).map(([key, value]) => {
+        if (!(value instanceof Blob)) {
+          return { key, value };      
+        }
+      }),
+      fileName
     });
     
     // 实际API调用 - 在生产环境中实现
     const response = await fetch(requestParams.url, {
       method: requestParams.method,
       headers: requestParams.headers,
-      body: binaryData
+      body: requestParams.body
     });
     
     if (!response.ok) {
+      // 获取更多错误信息
+      const errorText = await response.text();
+      console.error(`上传失败 (${response.status}): ${errorText}`);
       throw new Error(`上传失败: ${response.status} ${response.statusText}`);
     }
     
     const data = await response.json();
     return data;
-    
-    // 模拟成功响应 (实际应用中这是服务器返回的)
-    return {
-      success: true,
-      fileId: `file_${Date.now()}`,
-      message: '文件上传成功'
-    };
   } catch (error) {
     console.error('[模拟API] 上传错误:', error);
     return {
@@ -344,7 +367,8 @@ export default function FilesUpload() {
     }
 
     setCurrentFile(selectedFiles[0]);
-    // 不再立即上传，而是等待表单提交
+    // 立即开始上传
+    startUpload(selectedFiles[0]);
   }, [fileType]);
   
   // 开始上传文件
@@ -410,6 +434,25 @@ export default function FilesUpload() {
       setUploadProgress(100);
       setUploadSpeed("完成");
       
+      // 创建新的文件对象并添加到队列
+      const newFile: UploadedFile = {
+        id: `file_${Date.now()}`,
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        fileType: fileType as FileType,
+        priority,
+        status: ProcessingStatus.PROCESSING,
+        uploadTime: getCurrentTime(),
+        processingInfo: {
+          progress: 0,
+          currentStep: 0
+        }
+      };
+      
+      // 添加到队列中
+      setQueueFiles(prev => [newFile, ...prev]);
+      
       // 完成上传后开始处理流程
       startProcessing(file);
     } catch (error) {
@@ -699,10 +742,10 @@ export default function FilesUpload() {
                 disabled={uploadStage !== "idle"}
               >
                 <option value="">请选择文件类型</option>
-                <option value={FileType.CONTRACT}>合同文档</option>
-                <option value={FileType.LICENSE}>专卖许可证</option>
-                <option value={FileType.PUNISHMENT}>行政处罚决定书</option>
-                <option value={FileType.OTHER}>其他文档</option>
+                <option value={FileType.CONTRACT}>{FILE_TYPE_LABELS[FileType.CONTRACT]}</option>
+                <option value={FileType.LICENSE}>{FILE_TYPE_LABELS[FileType.LICENSE]}</option>
+                <option value={FileType.PUNISHMENT}>{FILE_TYPE_LABELS[FileType.PUNISHMENT]}</option>
+                <option value={FileType.OTHER}>{FILE_TYPE_LABELS[FileType.OTHER]}</option>
               </select>
               <div className="form-tip">不同类型的文档将应用不同的审核规则</div>
             </div>
@@ -716,9 +759,9 @@ export default function FilesUpload() {
                 onChange={(e) => setPriority(e.target.value as Priority)}
                 disabled={uploadStage !== "idle"}
               >
-                <option value={Priority.NORMAL}>普通</option>
-                <option value={Priority.HIGH}>优先</option>
-                <option value={Priority.URGENT}>紧急</option>
+                <option value={Priority.NORMAL}>{PRIORITY_LABELS[Priority.NORMAL]}</option>
+                <option value={Priority.HIGH}>{PRIORITY_LABELS[Priority.HIGH]}</option>
+                <option value={Priority.URGENT}>{PRIORITY_LABELS[Priority.URGENT]}</option>
               </select>
               <div className="form-tip">优先级影响文档在队列中的处理顺序</div>
             </div>
@@ -736,19 +779,8 @@ export default function FilesUpload() {
                 multiple={false}
                 accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png"
                 tipText="支持单个或批量上传，文件格式：PDF、Word、Excel、图片"
+                shouldPreventFileSelect={!fileType}
               />
-              
-              {currentFile && (
-                <div className="mt-4 flex justify-end">
-                  <Button 
-                    type="primary"
-                    disabled={!currentFile || !fileType}
-                    onClick={() => formRef.current?.requestSubmit()}
-                  >
-                    开始上传
-                  </Button>
-                </div>
-              )}
             </>
           )}
           

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>
   );

app/routes/rule-groups.new.tsx

@@ -5,6 +5,14 @@ import { useEffect, useState } from "react";
 import { Button } from "~/components/ui/Button";
 import { Card } from "~/components/ui/Card";
 import ruleGroupsNewStyles from "~/styles/pages/rule-groups_new.css?url";
+import { 
+  getRuleGroups, 
+  getRuleGroup, 
+  createRuleGroup, 
+  updateRuleGroup,
+  type RuleGroup as ApiRuleGroup,
+  type RuleGroupCreateUpdateDto 
+} from "~/api/evaluation_points/rule-groups";
 
 // 类型定义
 interface RuleGroup {
@@ -65,6 +73,19 @@ export const meta: MetaFunction = ({ location }) => {
   ];
 };
 
+// 将API分组转换为前端分组模型
+function mapApiToFrontend(apiGroup: ApiRuleGroup): RuleGroup {
+  return {
+    id: apiGroup.id,
+    name: apiGroup.name,
+    code: apiGroup.code || '',
+    description: apiGroup.description,
+    status: apiGroup.is_enabled ? 'active' : 'inactive',
+    parentId: apiGroup.pid === '0' ? null : apiGroup.pid,
+    sortOrder: 0 // API中不存在sortOrder字段，使用默认值
+  };
+}
+
 // 数据加载器
 export async function loader({ request }: LoaderFunctionArgs) {
   console.log("rule-groups.new loader被调用，URL:", request.url);
@@ -74,85 +95,48 @@ export async function loader({ request }: LoaderFunctionArgs) {
     console.log("获取到的ID参数:", id);
     
     // 获取一级分组列表 (用于选择父级分组)
-    const parentGroups: ParentGroup[] = [
-      { id: "1", name: "合同基本要素检查" },
-      { id: "4", name: "销售合同专项检查" },
-      { id: "5", name: "行政处罚规范性检查" }
-    ];
-    
-    // 简化这里，初始时不获取数据，避免可能的错误
-    let group: RuleGroup | undefined = undefined;
-    
-    // 如果有ID才尝试获取数据
-    if (id) {
-      // 简化的模拟数据
-      const demoData: Record<string, RuleGroup> = {
-        "1": {
-          id: "1",
-          name: "合同基本要素检查",
-          code: "contract-base",
-          description: "检查合同基本要素是否完整规范",
-          status: "active",
-          parentId: null,
-          sortOrder: 0
-        },
-        "2": {
-          id: "2",
-          name: "必备要素检查",
-          code: "essential-elements",
-          description: "检查合同中的必要信息项是否齐全",
-          status: "active",
-          parentId: "1",
-          sortOrder: 1
-        },
-        "3": {
-          id: "3",
-          name: "合同主体检查",
-          code: "contract-parties",
-          description: "检查合同主体信息是否规范",
-          status: "active",
-          parentId: "1",
-          sortOrder: 2
-        },
-        "4": {
-          id: "4",
-          name: "销售合同专项检查",
-          code: "contract-sales",
-          description: "针对销售合同的专项合规检查",
-          status: "active",
-          parentId: null,
-          sortOrder: 3
-        },
-        "5": {
-          id: "5",
-          name: "行政处罚规范性检查",
-          code: "punishment",
-          description: "对行政处罚文书的合规性检查",
-          status: "inactive",
-          parentId: null,
-          sortOrder: 4
-        }
-      };
-      
-      group = demoData[id];
-      console.log("找到的group数据:", group);
+    const parentGroupsResponse = await getRuleGroups();
+    if (parentGroupsResponse.error) {
+      console.error("获取父分组列表失败:", parentGroupsResponse.error);
+      throw new Error(parentGroupsResponse.error);
     }
     
-    // 返回简化的数据结构
-    return json<LoaderData>({
+    const parentGroups: ParentGroup[] = parentGroupsResponse.data ? parentGroupsResponse.data.map(group => ({
+      id: group.id,
+      name: group.name
+    })) : [];
+    
+    // 初始化分组数据
+    let group: RuleGroup | undefined = undefined;
+    
+    // 如果有ID，获取分组详情
+    if (id) {
+      const groupResponse = await getRuleGroup(id);
+      if (groupResponse.error) {
+        console.error("获取分组详情失败:", groupResponse.error);
+        throw new Error(groupResponse.error);
+      }
+      
+      if (groupResponse.data) {
+        group = mapApiToFrontend(groupResponse.data);
+      }
+    }
+    
+    // 返回加载的数据
+    return Response.json({
       group,
       parentGroups,
       isEdit: !!group,
-      error: undefined // 显式返回error字段，无错误时为undefined
+      error: undefined
     });
   } catch (error) {
     console.error("loader函数出错:", error);
     // 返回一个基本的响应，避免500错误
-    return json<LoaderData>({
+    return Response.json({
       group: undefined,
       parentGroups: [],
       isEdit: false,
-      error: "加载数据时出错"
+      error: error instanceof Error ? error.message : "加载数据时出错"
     });
   }
 }
@@ -169,7 +153,6 @@ export async function action({ request }: ActionFunctionArgs) {
   const status = formData.get("status") as string || "active";
   const groupType = formData.get("groupType") as string;
   const parentId = groupType === "secondary" ? formData.get("parentId") as string : null;
-  const sortOrder = parseInt(formData.get("sortOrder") as string || "0", 10);
   
   // 表单验证
   const errors: ActionData["errors"] = {};
@@ -180,8 +163,8 @@ export async function action({ request }: ActionFunctionArgs) {
   
   if (!code || code.trim() === "") {
     errors.code = "分组编码不能为空";
-  } else if (!/^[a-zA-Z0-9-]+$/.test(code)) {
-    errors.code = "分组编码只能包含字母、数字和连字符";
+  } else if (!/^[a-zA-Z0-9-_]+$/.test(code)) {
+    errors.code = "分组编码只能包含字母、数字、连字符和下划线";
   }
   
   if (groupType === "secondary" && (!parentId || parentId.trim() === "")) {
@@ -189,38 +172,41 @@ export async function action({ request }: ActionFunctionArgs) {
   }
   
   if (Object.keys(errors).length > 0) {
-    return json<ActionData>({ 
+    return Response.json({ 
       errors,
       values: Object.fromEntries(formData) as Record<string, string>
     });
   }
   
   // 构建保存数据
-  const saveData = {
-    id,
+  const saveData: RuleGroupCreateUpdateDto = {
     name: name.trim(),
     code: code.trim(),
     description: description?.trim() || "",
-    status,
-    parentId,
-    sortOrder
+    is_enabled: status === "active",
+    pid: parentId === null ? "0" : parentId
   };
   
   try {
-    // 实际应用中应调用API
-    console.log("保存分组数据:", saveData);
+    // 根据是否有ID决定是创建还是更新
+    let response;
+    if (id) {
+      response = await updateRuleGroup(id, saveData);
+    } else {
+      response = await createRuleGroup(saveData);
+    }
     
-    // const response = await fetch(`${process.env.API_BASE_URL}/api/rule-groups${id ? `/${id}` : ''}`, {
-    //   method: id ? "PUT" : "POST",
-    //   headers: {
-    //     "Content-Type": "application/json",
-    //   },
-    //   body: JSON.stringify(saveData),
-    // });
-    // 
-    // if (!response.ok) {
-    //   throw new Error(`保存失败: ${response.status}`);
-    // }
+    // 处理API响应
+    if (response.error) {
+      console.error("保存分组失败:", response.error);
+      return json<ActionData>({
+        success: false,
+        errors: {
+          general: response.error
+        },
+        values: Object.fromEntries(formData) as Record<string, string>
+      });
+    }
     
     // 保存成功，重定向到列表页
     return redirect("/rule-groups");
@@ -229,7 +215,7 @@ export async function action({ request }: ActionFunctionArgs) {
     return json<ActionData>({
       success: false,
       errors: {
-        general: "保存分组失败，请稍后重试"
+        general: error instanceof Error ? error.message : "保存分组失败，请稍后重试"
       },
       values: Object.fromEntries(formData) as Record<string, string>
     });
@@ -384,11 +370,13 @@ export default function RuleGroupNew() {
                     defaultValue={group?.parentId || ""}
                   >
                     <option value="">请选择上级分组</option>
-                    {parentGroups.map((parent) => (
-                      <option key={parent.id} value={parent.id}>
-                        {parent.name}
-                      </option>
-                    ))}
+                    {parentGroups
+                      .filter((parent: ParentGroup) => !group?.id || parent.id !== group.id) // 过滤掉当前编辑的分组
+                      .map((parent: ParentGroup) => (
+                        <option key={parent.id} value={parent.id}>
+                          {parent.name}
+                        </option>
+                      ))}
                   </select>
                   {actionData?.errors?.parentId && (
                     <div className="form-error">{actionData.errors.parentId}</div>
@@ -415,7 +403,7 @@ export default function RuleGroupNew() {
                     {actionData?.errors?.code && (
                       <div className="form-error">{actionData.errors.code}</div>
                     )}
-                    <div className="form-tip">编码只能包含字母、数字和连字符，且必须唯一</div>
+                    <div className="form-tip">编码只能包含字母、数字、连字符和下划线，且必须唯一</div>
                   </div>
                 </div>
                 <div className="form-col">
@@ -477,7 +465,7 @@ export default function RuleGroupNew() {
               </div>
               
               {/* 排序 */}
-              <div className="form-group" style={{ maxWidth: "400px" }}>
+              <div className="form-group hidden" style={{ maxWidth: "400px" }}>
                 <label htmlFor="sortOrder" className="form-label">排序</label>
                 <input
                   type="number"