完善卷宗和合同的数据隔离的效果

2025-06-03 21:06:48 +08:00
parent 057563ba5e
commit 87ad3376fe
10 changed files with 326 additions and 108 deletions
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { type MetaFunction, type LoaderFunctionArgs } from "@remix-run/node";
 import { useLoaderData, useSearchParams, Link, useNavigate, useFetcher, useRouteLoaderData } from "@remix-run/react";
 import { Button } from '~/components/ui/Button';
@@ -45,6 +45,7 @@ export type LoaderData = {
  pageSize: number;
  totalPages: number;
  ruleTypes: ApiRuleType[]; // 添加评查点类型
+  initialLoad?: boolean; // 添加初始加载标志
 };

 // API返回的数据映射到前端模型
@@ -90,16 +91,12 @@ export async function loader({ request }: LoaderFunctionArgs) {
  
  // 从 URL 参数中提取查询条件
  const params = {
-    ruleType: url.searchParams.get("ruleType") || undefined,
-    groupId: url.searchParams.get("groupId") || undefined,
-    isActive: url.searchParams.get("isActive") ? url.searchParams.get("isActive") === "true" : undefined,
-    keyword: url.searchParams.get("keyword") || undefined,
    page: parseInt(url.searchParams.get("page") || "1", 10),
    pageSize: parseInt(url.searchParams.get("pageSize") || "10", 10)
  };
  
  try {
-    // 获取评查点类型列表
+    // 获取评查点类型列表，供前端筛选使用
    const typeResponse = await getRuleTypes();
    
    if (typeResponse.error) {
@@ -108,24 +105,14 @@ export async function loader({ request }: LoaderFunctionArgs) {
    
    const ruleTypes = typeResponse.error ? [] : typeResponse.data;
    
-    // 使用API调用获取数据
-    const response = await getRulesList(params);
-    
-    // API错误处理集中在rules.ts中，这里只需检查是否有错误
-    if (response.error) {
-      throw new Error(response.error);
-    }
-    
-    const apiRules = response.data?.rules || [];
-    const totalCount = response.data?.totalCount || 0;
-    const rules = apiRules.map((apiRule: ApiRule) => mapApiRuleToModel(apiRule));
-    
+    // 返回初始空数据，客户端将根据 sessionStorage 中的 reviewType 加载实际数据
    return Response.json({
-      rules,
-      totalCount,
+      rules: [],
+      totalCount: 0,
      currentPage: params.page,
      pageSize: params.pageSize,
-      ruleTypes
+      ruleTypes,
+      initialLoad: true
    }, {
      headers: {
        "Cache-Control": "max-age=60, s-maxage=180"
@@ -180,8 +167,7 @@ const priorityLabels = {
 export default function RulesIndex() {
  const loaderData = useLoaderData<typeof loader>();
  const rootData = useRouteLoaderData("root") as { userRole: UserRole };
-  const { rules, totalCount, currentPage, pageSize } = loaderData;
-  const ruleTypes = loaderData.ruleTypes || []; // 添加默认空数组避免undefined
+  const { rules: initialRules, totalCount: initialTotalCount, currentPage, pageSize, ruleTypes: initialRuleTypes, initialLoad } = loaderData;
  const [searchParams, setSearchParams] = useSearchParams();
  const navigate = useNavigate();
  const fetcher = useFetcher<ActionResponse>();
@@ -189,6 +175,11 @@ export default function RulesIndex() {
  // 状态管理
  const [ruleGroups, setRuleGroups] = useState<RuleGroup[]>([]);
  const [loadingGroups, setLoadingGroups] = useState(false);
+  const [reviewType, setReviewType] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [filteredRules, setFilteredRules] = useState<Rule[]>(initialRules);
+  const [filteredTotalCount, setFilteredTotalCount] = useState<number>(initialTotalCount);
+  const [ruleTypes, setRuleTypes] = useState<ApiRuleType[]>(initialRuleTypes);
  
  // 获取当前的ruleType值
  const ruleTypeParam = searchParams.get('ruleType');
@@ -200,6 +191,37 @@ export default function RulesIndex() {
  const userRole = rootData?.userRole || 'common';
  const isDeveloper = userRole === 'developer';
  
+  // 在组件渲染时初始化状态
+  useEffect(() => {
+    setFilteredRules(initialRules);
+    setFilteredTotalCount(initialTotalCount);
+    setRuleTypes(initialRuleTypes);
+  }, [initialRules, initialTotalCount, initialRuleTypes]);
+  
+  // 在组件挂载时从 sessionStorage 获取 reviewType
+  useEffect(() => {
+    try {
+      if (typeof window !== 'undefined') {
+        const storedReviewType = sessionStorage.getItem('reviewType');
+        if (storedReviewType !== reviewType) {
+          setReviewType(storedReviewType);
+          
+          if (initialLoad) {
+            // 如果是初始加载，立即加载数据
+            // 不需要更新 URL 参数，因为下一步的 loadRulesData 会处理
+          } else {
+            // 如果不是初始加载，更新 URL 参数
+            const newParams = new URLSearchParams(searchParams);
+            newParams.set('page', '1'); // 回到第一页
+            setSearchParams(newParams);
+          }
+        }
+      }
+    } catch (error) {
+      console.error('获取 sessionStorage 中的 reviewType 失败:', error);
+    }
+  }, [reviewType, searchParams, setSearchParams, initialLoad]);
+
  // 使用useEffect监听loaderData.error变化并显示Toast
  useEffect(() => {
    if(loaderData.error) {
@@ -254,6 +276,87 @@ export default function RulesIndex() {
    }
  }, [fetcher.data,fetcher.state]);

+  // 添加客户端数据加载函数
+  const loadRulesData = useCallback(async () => {
+    if (!reviewType) return;
+    
+    setLoading(true);
+    try {
+      // 构建查询参数
+      const queryParams = {
+        ruleType: ruleTypeParam || undefined,
+        groupId: searchParams.get('groupId') || undefined,
+        isActive: searchParams.get('isActive') ? searchParams.get('isActive') === 'true' : undefined,
+        keyword: searchParams.get('keyword') || undefined,
+        page: currentPage,
+        pageSize,
+        reviewType
+      };
+      
+      // 调用 API 获取数据
+      const response = await getRulesList(queryParams);
+      
+      if (response.data) {
+        const apiRules = response.data.rules || [];
+        const total = response.data.totalCount || 0;
+        const mappedRules = apiRules.map((apiRule: ApiRule) => mapApiRuleToModel(apiRule));
+        
+        setFilteredRules(mappedRules);
+        setFilteredTotalCount(total);
+      }
+    } catch (error) {
+      console.error('客户端加载评查点列表失败:', error);
+      toastService.error('加载评查点列表失败');
+    } finally {
+      setLoading(false);
+    }
+  }, [reviewType, ruleTypeParam, searchParams, currentPage, pageSize]);
+  
+  // 添加加载评查点类型的函数
+  const loadRuleTypes = useCallback(async () => {
+    if (!reviewType) return;
+    
+    try {
+      // 调用 API 获取评查点类型，传递 reviewType 参数
+      const response = await getRuleTypes(reviewType);
+      
+      if (response.data) {
+        const typesData = response.data;
+        // 这里可以添加类型过滤的逻辑，但实际上 API 中已经根据 reviewType 进行了过滤
+        
+        // 更新状态
+        const updatedTypes = typesData;
+        // 替换掉 loaderData 中的 ruleTypes
+        setRuleTypes(updatedTypes);
+      }
+    } catch (error) {
+      console.error('加载评查点类型失败:', error);
+      toastService.error('加载评查点类型失败');
+    }
+  }, [reviewType]);
+
+  // 在 reviewType 变化时加载评查点类型
+  useEffect(() => {
+    if (reviewType) {
+      loadRuleTypes();
+    }
+  }, [reviewType, loadRuleTypes]);
+
+  // 在 reviewType 变化或其他参数变化时加载数据
+  useEffect(() => {
+    if (reviewType) {
+      loadRulesData();
+    }
+  }, [reviewType, loadRulesData]);
+
+  // 在初始加载完成后，如果有 reviewType，立即加载数据
+  useEffect(() => {
+    if (initialLoad && reviewType) {
+      loadRuleTypes();
+      loadRulesData();
+    }
+  }, [initialLoad, reviewType, loadRuleTypes, loadRulesData]);
+
  // 筛选评查点
  const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
    const { name, value } = e.target;
@@ -349,7 +452,9 @@ export default function RulesIndex() {
    if (input) {
      (input as HTMLInputElement).value = '';
    }
-    setSearchParams(new URLSearchParams());
+    // 保留reviewType的过滤条件，只重置其他条件
+    const newParams = new URLSearchParams();
+    setSearchParams(newParams);
  };
  
  // 定义表格列配置
@@ -530,27 +635,29 @@ export default function RulesIndex() {
      
      {/* 评查点列表 - 使用Table组件 */}
      <Card className="ant-card">
-        <Table
-          columns={columns}
-          dataSource={rules}
-          rowKey="id"
-          emptyText="暂无评查点数据"
-          className="rules-table"
-        />
-        
-        {/* 分页 */}
-        {totalCount > 0 && (
-          <Pagination
-            currentPage={currentPage}
-            total={totalCount}
-            pageSize={pageSize}
-            onChange={handlePageChange}
-            onPageSizeChange={handlePageSizeChange}
-            showTotal={true}
-            showPageSizeChanger={true}
-            pageSizeOptions={[10, 20, 30, 50]}
+        <div className={loading ? "opacity-70 pointer-events-none transition-opacity" : ""}>
+          <Table
+            columns={columns}
+            dataSource={filteredRules.length > 0 ? filteredRules : initialRules}
+            rowKey="id"
+            emptyText="暂无评查点数据"
+            className="rules-table"
          />
-        )}
+          
+          {/* 分页 */}
+          {filteredTotalCount > 0 && (
+            <Pagination
+              currentPage={currentPage}
+              total={filteredTotalCount > 0 ? filteredTotalCount : initialTotalCount}
+              pageSize={pageSize}
+              onChange={handlePageChange}
+              onPageSizeChange={handlePageSizeChange}
+              showTotal={true}
+              showPageSizeChanger={true}
+              pageSizeOptions={[10, 20, 30, 50]}
+            />
+          )}
+        </div>
      </Card>
      
    </div>