fix: 修复API加载失败时未使用mock数据降级导致按钮不显示的问题

tony.cheng

2026-03-17 e8341da1769be538eaec6a9d4bf29491b1301d66

 web-app/src/contexts/CaseDataContext.jsx

@@ -7,6 +7,8 @@
import { message } from 'antd';
import ProcessAPIService from '../services/ProcessAPIService';
import OutboundBotAPIService from '../services/OutboundBotAPIService';
import EvidenceAPIService from '../services/EvidenceAPIService';
import MediationAgreementAPIService from '../services/MediationAgreementAPIService';
import { getMergedParams } from '../utils/urlParams';
import { mockTimelineData } from '../mocks/timeline';
import { getFallbackStartTime, parseTimeString } from '../utils/timeFormatter';
@@ -30,6 +32,21 @@
  const [taskStartTime, setTaskStartTime] = useState(null);  // 任务开始时间
  const [isTaskTimeFallback, setIsTaskTimeFallback] = useState(false);  // 是否降级模式
  const [hasLoaded, setHasLoaded] = useState(false);  // 防止重复加载
  
  // 证据材料数据
  const [evidenceData, setEvidenceData] = useState({
    applicantMaterials: [],
    respondentMaterials: [],
    loading: false,
    error: null
  });
  
  // 调解协议数据
  const [agreementData, setAgreementData] = useState({
    content: '',
    loading: false,
    error: null
  });

  /**
   * 保存数据到localStorage
@@ -52,7 +69,16 @@
      if (!stored) return false;
      
      const jobs = JSON.parse(stored);
      const activeStatuses = ['Scheduling', 'Executing', 'Paused', 'Drafted'];
      const activeStatuses = [
        'Scheduling',
        'Executing',
        'Paused',
        'Drafted',
        'InProgress',
        'Calling',
        'Ringing',
        'Answered'
      ];
      
      // 过滤出活跃状态的任务
      const activeJobs = jobs.filter(job => activeStatuses.includes(job.callStatus));
@@ -117,9 +143,10 @@
              personId: item.personId,
              mediationId: item.mediationId,
              caseId: String(caseId), // 添加 caseId 字段用于轮询
              perTypeName: item.perTypeName || '', // 当事人类型名称（申请方当事人/被申请方当事人）
              perClassName: item.perClassName || '', // 添加人员类型名称
              trueName: item.trueName || '', // 添加真实姓名
              startTime: item.createdTime || item.start_time,
              startTime: item.createTime || item.createdTime || item.start_time, // 兼容 createTime 和 createdTime
              pollStartTime: Date.now(),
              retryCount: 0
            });
@@ -127,6 +154,7 @@
            failedJobs.push({
              personId: item.personId,
              message: item.message || '未知错误',
              perTypeName: item.perTypeName || '', // 当事人类型名称（申请方当事人/被申请方当事人）
              perClassName: item.perClassName || '', // 添加人员类型名称
              trueName: item.trueName || '', // 添加真实姓名
              errorCode: item.errorCode, // 添加错误码
@@ -137,19 +165,18 @@

        // 存储成功的任务到 localStorage
        if (successJobs.length > 0) {
          // 新任务发起时，先清除所有旧的成功任务（替换而不是追加）
          localStorage.setItem(OUTBOUND_JOBS_KEY, JSON.stringify(successJobs));
          console.log('存储外呼任务成功，数量:', successJobs.length);
          
          // 外呼成功后，清除对应的失败记录
          const storedFailedJobs = JSON.parse(localStorage.getItem(`${OUTBOUND_JOBS_KEY}_failed`) || '[]');
          if (storedFailedJobs.length > 0) {
            // 获取成功任务的 personId 列表
            const successPersonIds = successJobs.map(job => job.personId);
            // 过滤掉已成功的 personId 对应的失败记录
            const remainingFailedJobs = storedFailedJobs.filter(job => !successPersonIds.includes(job.personId));
            localStorage.setItem(`${OUTBOUND_JOBS_KEY}_failed`, JSON.stringify(remainingFailedJobs));
            console.log('外呼成功后清除失败记录，清除数量:', storedFailedJobs.length - remainingFailedJobs.length);
          }
          // 外呼成功后，清除所有失败记录（新任务开始时应清空旧记录）
          localStorage.removeItem(`${OUTBOUND_JOBS_KEY}_failed`);
          console.log('外呼成功后清除所有失败记录');
          
          // 触发自定义事件，通知 OutboundCallWidget 组件立即刷新
          setTimeout(() => {
            window.dispatchEvent(new CustomEvent('outbound-jobs-updated'));
          }, 300);
        }

        // 存储失败的任务到 localStorage（用于气泡显示）
@@ -236,6 +263,87 @@
      console.log('Using fallback start time:', new Date(fallbackTime).toLocaleString());
    }
  };

  /**
   * 加载证据材料数据
   * @param {Object} params - 参数对象
   * @param {string} params.caseId - 案件ID
   * @param {string} params.caseType - 案件类型
   * @param {string} params.platformCode - 平台编码
   */
  const loadEvidenceData = async (params) => {
    setEvidenceData(prev => ({ ...prev, loading: true, error: null }));
    
    try {
      const response = await EvidenceAPIService.getEvidenceList({
        case_id: params.caseId,
        case_type: params.caseType || params.caseTypeFirst,
        platform_code: params.platformCode
      });
      
      console.log('Evidence API response:', response);
      
      const responseData = response.data || [];
      
      // 分离申请人和被申请人材料
      const applicantData = responseData.find(item => item.per_type === '15_020008-1');
      const respondentData = responseData.find(item => item.per_type === '15_020008-2');
      
      const applicantList = applicantData?.file_list?.slice(0, applicantData.file_count) || [];
      const respondentList = respondentData?.file_list?.slice(0, respondentData.file_count) || [];
      
      setEvidenceData({
        applicantMaterials: applicantList,
        respondentMaterials: respondentList,
        loading: false,
        error: null
      });
      
      console.log('Evidence data loaded:', { applicantList, respondentList });
    } catch (err) {
      console.error('加载证据材料失败:', err);
      setEvidenceData(prev => ({
        ...prev,
        loading: false,
        error: err.message || '加载证据材料失败'
      }));
    }
  };

  /**
   * 加载调解协议数据
   * @param {string} caseId - 案件ID
   */
  const loadAgreementData = async (caseId) => {
    setAgreementData(prev => ({ ...prev, loading: true, error: null }));
    
    try {
      const response = await MediationAgreementAPIService.generateAgreement(caseId);
      
      if (response?.data?.agreeContent) {
        setAgreementData({
          content: response.data.agreeContent,
          loading: false,
          error: null
        });
        console.log('Agreement data loaded');
      } else {
        setAgreementData({
          content: '',
          loading: false,
          error: '协议内容为空'
        });
      }
    } catch (err) {
      console.error('加载调解协议失败:', err);
      setAgreementData({
        content: '',
        loading: false,
        error: err.message || '加载调解协议失败'
      });
    }
  };

  /**
   * 加载案件数据
   */
@@ -255,20 +363,43 @@
      
      console.log('Loading case data with params:', params);

      if (!params.caseId) {
        setError('caseId缺失');
        setLoading(false);
        return;
      }

      EvidenceAPIService.processCaseFilesOcr(params.caseId).catch((ocrError) => {
        console.error('触发案件文件OCR失败:', ocrError);
      });

      try {
        await OutboundBotAPIService.syncStatusByCase({ caseId: params.caseId });
      } catch (syncError) {
        console.error('同步外呼状态失败:', syncError);
      }
      try {
        await OutboundBotAPIService.backfillConversationByCase({ caseId: params.caseId });
      } catch (backfillError) {
        console.error('回补通话记录失败:', backfillError);
      }

      // 调用API获取数据
      // 将URL中的auth_token转换为authorization传入API
      const response = await ProcessAPIService.getCaseProcessInfo(
        params.caseId,
        {
          caseTypeFirst: params.caseTypeFirst,
          platform_code: params.platform_code
          platform_code: params.platform_code,
          authorization: params.auth_token || params.authorization || ''
        }
      );

      // 提取timeline数据
      const timelineData = response.timeline || response.data?.timeline || response;
      
      // 提取nodes数据（确保为数组）
      const nodesData = response.nodes || response.data?.nodes || [];
      // 提取nodes数据（确保为数组），兼容 nodeList 和 nodes 两种字段名
      const nodesData = response.data?.nodeList || response.data?.nodes || response.nodes || [];
      
      console.log('API Response:', response);
      console.log('Extracted nodesData:', nodesData);
@@ -277,6 +408,17 @@
      setCaseData(timelineData);
      setProcessNodes(Array.isArray(nodesData) ? nodesData : []);  // 确保为数组
      setHasLoaded(true);  // 标记已加载
      
      // 并行加载证据材料和调解协议数据（在终态检查之前，确保数据完整性）
      await Promise.all([
        loadEvidenceData({
          caseId: params.caseId,
          caseType: params.caseType || params.caseTypeFirst,
          caseTypeFirst: params.caseTypeFirst,
          platformCode: params.platform_code
        }),
        loadAgreementData(params.caseId)
      ]);
      
      // 检查终态状态（调解成功/失败/人工接管），终态不执行外呼和存储
      const mediationState = timelineData.mediation?.state;
@@ -303,9 +445,12 @@
      setError(err.message || '加载案件数据失败');
      
      // 显示错误提示
      message.error('加载案件数据失败，请稍后重试');
      message.error('加载案件数据失败，使用模拟数据');
      
      // 使用Mock数据（缓存数据不包含nodes，所以统一使用Mock）
      // 使用Mock数据作为降级方案
      const mockTimeline = mockTimelineData.data?.timeline || mockTimelineData;
      setCaseData(mockTimeline);
      setProcessNodes(mockTimelineData.data?.nodes || []);
      setHasLoaded(true);
      
    } finally {
@@ -352,7 +497,13 @@
    refreshData,
    loadCaseData,
    taskStartTime,      // 任务开始时间
    isTaskTimeFallback  // 是否降级模式
    isTaskTimeFallback, // 是否降级模式
    // 证据材料数据
    evidenceData,
    loadEvidenceData,
    // 调解协议数据
    agreementData,
    loadAgreementData
  };

  return (