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

tony.cheng

2026-03-17 e8341da1769be538eaec6a9d4bf29491b1301d66

 web-app/src/components/dashboard/TabContainer.jsx

@@ -165,6 +165,16 @@
  const timeline = caseData || {};
  const caseState = timeline.mediation?.state;
  
  // 调试日志：输出关键数据
  useEffect(() => {
    console.log('===== MediationBoard 数据状态 =====');
    console.log('caseData:', caseData);
    console.log('timeline:', timeline);
    console.log('caseState:', caseState);
    console.log('mediation:', timeline.mediation);
    console.log('================================');
  }, [caseData, caseState, timeline]);
  
  // person_type到avatar类型的映射
  const getAvatarType = (personType) => {
    const typeMap = {
@@ -354,10 +364,22 @@

  // 状态控制按钮显示逻辑
  const shouldShowControlButton = () => {
    return caseState === 0 || caseState === 1 || caseState === 5;
    const show = caseState === 0 || caseState === 1 || caseState === 5;
    console.log('状态控制按钮显示检查:', {
      caseState,
      show,
      conditions: {
        'caseState === 0': caseState === 0,
        'caseState === 1': caseState === 1,
        'caseState === 5': caseState === 5
      }
    });
    return show;
  };

  const getControlButtonProps = () => {
    console.log('获取按钮属性:', { caseState });
    
    if (caseState === 0 || caseState === 1) {
      return {
        text: '终止',
@@ -371,38 +393,66 @@
        action: 'resume'
      };
    }
    
    console.log('未匹配到按钮属性，返回null');
    return null;
  };

  // 处理状态控制按钮点击
  const handleControlButtonClick = (action) => {
    console.log('状态控制按钮点击:', { action });
    setControlAction(action);
    setConfirmModalVisible(true);
  };

  // 处理确认对话框确认
  const handleConfirmOk = async () => {
    if (!controlAction) return;
    console.log('确认对话框确认:', { controlAction, remark });
    
    if (!controlAction) {
      console.warn('控制动作为空');
      return;
    }
    
    setControlLoading(true);
    try {
      const params = getMergedParams();
      const actionCode = controlAction === 'terminate' ? 0 : 1;
      
      console.log('准备调用API:', {
        caseId: params.caseId,
        actionCode,
        userName: localStorage.getItem('userName') || '调解员',
        remark: remark || ''
      });
      
      // 验证必要参数
      if (!params.caseId) {
        throw new Error('案件ID不能为空');
      }
      
      await ProcessAPIService.updateMediationState(params.caseId, {
        action: actionCode,
        userName: localStorage.getItem('userName') || '调解员'
        userName: localStorage.getItem('userName') || '调解员',
        remark: remark || ''
      });
      
      message.success('案件状态更新成功');
      setConfirmModalVisible(false);
      setRemark('');
      setControlAction(null);
      
      // 刷新数据
      refreshData();
    } catch (error) {
      console.error('状态更新失败:', error);
      message.error(error.message || '状态更新失败，请稍后重试');
      const errorMessage = error.message || '状态更新失败，请稍后重试';
      message.error(errorMessage);
      
      // 如果是网络错误，提供更多帮助信息
      if (errorMessage.includes('网络') || errorMessage.includes('Network')) {
        message.info('请检查网络连接或联系管理员');
      }
    } finally {
      setControlLoading(false);
    }
@@ -510,46 +560,51 @@
      </div>

      {/* 状态控制按钮区域 */}
      {shouldShowControlButton() && (
        <div style={{
          marginTop: 20,
          paddingTop: 15,
          borderTop: '1px solid #e9ecef',
          display: 'flex',
          justifyContent: 'center',
          gap: 12
        }}>
          <button
            onClick={() => handleControlButtonClick(getControlButtonProps().action)}
            disabled={controlLoading}
            style={{
              padding: '10px 20px',
              borderRadius: 'var(--border-radius)',
              fontWeight: 600,
              fontSize: '0.9rem',
              cursor: controlLoading ? 'not-allowed' : 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: 6,
              border: 'none',
              ...(getControlButtonProps().style === 'terminate' ? {
                background: '#1A6FB8',
                color: 'white',
              } : {
                background: '#52c41a',
                color: 'white',
              }),
              opacity: controlLoading ? 0.6 : 1,
            }}
          >
            {controlLoading ? (
              <><i className="fas fa-spinner fa-spin"></i>处理中...</>
            ) : (
              <><i className="fas fa-pause-circle"></i>{getControlButtonProps().text}</>
            )}
          </button>
        </div>
      )}
      {shouldShowControlButton() && (() => {
        const buttonProps = getControlButtonProps();
        if (!buttonProps) return null;
        
        return (
          <div style={{
            marginTop: 20,
            paddingTop: 15,
            borderTop: '1px solid #e9ecef',
            display: 'flex',
            justifyContent: 'center',
            gap: 12
          }}>
            <button
              onClick={() => handleControlButtonClick(buttonProps.action)}
              disabled={controlLoading}
              style={{
                padding: '10px 20px',
                borderRadius: 'var(--border-radius)',
                fontWeight: 600,
                fontSize: '0.9rem',
                cursor: controlLoading ? 'not-allowed' : 'pointer',
                display: 'flex',
                alignItems: 'center',
                gap: 6,
                border: 'none',
                ...(buttonProps.style === 'terminate' ? {
                  background: '#1A6FB8',
                  color: 'white',
                } : {
                  background: '#52c41a',
                  color: 'white',
                }),
                opacity: controlLoading ? 0.6 : 1,
              }}
            >
              {controlLoading ? (
                <><i className="fas fa-spinner fa-spin"></i>处理中...</>
              ) : (
                <><i className="fas fa-pause-circle"></i>{buttonProps.text}</>
              )}
            </button>
          </div>
        );
      })()}

      {/* 状态控制确认对话框 */}
      <Modal