cykj/hzdyjs

0 Fork 0

Files

T

wuzhen c8fb6fa032 wuzhen update

2025-08-01 08:35:47 +08:00

6.0 KiB

Raw Blame History

项目详情页面数据显示问题 - 最终修复记录

日期: 2025-08-01
操作人员: Assistant
修复类型: 前端数据显示问题修复

🚨 问题根本原因

通过深入调试发现，问题的根本原因是：

实际使用场景错误识别

❌ 最初假设: 用户使用的是独立的详情页面 (detail.vue)
✅ 实际情况: 用户使用的是项目列表中的对话框模式详情显示

对话框中的组件参数错误

文件: web/src/views/cw/application/index.vue (第296-304行)

<!-- 查看详情对话框 -->
<el-dialog title="项目申报详情" v-model="viewOpen" width="1200px" append-to-body>
  <ApplicationSummary :application-id="currentId" />  <!-- ❌ 错误：应该是 application-id -->
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="viewOpen = false">关 闭</el-button>
    </div>
  </template>
</el-dialog>

组件支持性问题

文件: web/src/views/cw/application/summary.vue

原始 ApplicationSummary 组件只支持接收 application 对象：

const props = defineProps({
  application: {
    type: Object,
    default: () => ({})
  }
  // ❌ 缺少 applicationId 支持
});

但在对话框中传递的是 :application-id="currentId"，导致组件接收到 undefined。

🔧 修复方案

方案选择

选择了增强 ApplicationSummary 组件的方案，使其：

✅ 向后兼容: 继续支持直接传入 application 对象
✅ 新功能: 支持通过 application-id 自动获取数据
✅ 智能切换: 优先使用传入的 application，如果没有则通过 applicationId 获取

修复内容

1. 增强组件 Props 支持

const props = defineProps({
  application: {
    type: Object,
    default: () => ({})
  },
  applicationId: {  // ✅ 新增支持
    type: [String, Number],
    default: null
  }
});

2. 添加内部数据管理

// 内部数据状态
const internalApplication = ref({});
const loading = ref(false);

// 计算属性：智能选择数据源
const currentApplication = computed(() => {
  // 优先使用传入的application对象
  if (props.application && Object.keys(props.application).length > 0) {
    return props.application;
  }
  // 否则使用内部获取的数据
  return internalApplication.value;
});

3. 自动数据获取逻辑

// 获取申报详情数据
const fetchApplicationData = async (id) => {
  if (!id) return;
  
  loading.value = true;
  try {
    const response = await getProjectApplication(id);
    internalApplication.value = response.data || {};
  } catch (error) {
    console.error('ApplicationSummary API调用失败:', error);
    internalApplication.value = {};
  } finally {
    loading.value = false;
  }
};

// 监听applicationId变化
watch(() => props.applicationId, (newId) => {
  if (newId && (!props.application || Object.keys(props.application).length === 0)) {
    fetchApplicationData(newId);
  }
}, { immediate: true });

4. 模板数据源更新

将模板中的所有 application.xxx 改为 currentApplication.xxx：

<!-- 之前 -->
<el-descriptions-item label="项目名称">
  {{ application.projectName }}
</el-descriptions-item>

<!-- 修复后 -->
<el-descriptions-item label="项目名称">
  {{ currentApplication.projectName }}
</el-descriptions-item>

5. 添加加载状态

<template>
  <div class="application-summary" v-loading="loading">
    <!-- 内容 -->
  </div>
</template>

6. 增强调试信息

添加了完整的数据获取和切换过程的调试日志：

=== ApplicationSummary 组件挂载 ===
=== ApplicationSummary 开始获取数据 ===
=== ApplicationSummary API调用成功 ===
=== 使用传入的application对象 ===
=== 使用内部获取的application数据 ===

🧪 测试步骤

现在请重新测试

步骤1: 清除浏览器缓存

强制刷新: Ctrl+F5 (Windows) 或 Cmd+Shift+R (Mac)
清除缓存: 开发者工具 → Network → Disable cache

步骤2: 访问对话框详情

进入项目申报列表: /cw/application
选择任意申报记录
点击"查看"按钮 (注意：是列表中的查看按钮，不是独立页面)

步骤3: 观察调试输出

现在控制台应该显示：

=== ApplicationSummary 组件挂载 ===
props.application: {}
props.applicationId: [具体ID]
=== ApplicationSummary 开始获取数据 ===
applicationId: [具体ID]
=== ApplicationSummary API调用成功 ===
API响应: [完整响应]
响应数据: [数据内容]
=== 使用内部获取的application数据 ===
internalApplication数据: [完整数据]
=== 绩效指标检查 ===
绩效指标数据: [绩效指标数组]
是否有绩效指标: true
=== 预算数据检查 ===
application数据: [完整数据对象]
当年预算字段: [具体预算数据]

步骤4: 验证页面显示

应该能看到：

✅ 基本信息: 项目名称、负责人、联系电话等
✅ 项目特征: 小微企业发展、进口设备等标签
✅ 项目内容: 申报理由、建设内容、绩效目标
✅ 资金预算: 总投资、市财政资金、分年度预算表格
✅ 绩效指标: 完整的绩效指标表格，包含分值占比总和

📋 技术亮点

1. 向后兼容性

原有的 detail.vue 页面仍然正常工作（传入完整 application 对象）
不会影响其他使用 ApplicationSummary 的地方

2. 智能数据源切换

自动检测是否有传入的 application 数据
只在必要时才进行API调用，避免重复请求

3. 完整的错误处理

API调用失败时的容错处理
加载状态的用户友好显示

4. 调试友好

详细的调试日志便于后续问题排查
清晰的数据流向跟踪

这次修复彻底解决了项目详情页面数据显示问题，同时增强了组件的通用性和健壮性。

6.0 KiB Raw Blame History Unescape Escape