all-project/docs/设计文档/database/code-adjust-record-2025-01-27-fix-batch-apply-display.md

修复班主任批量申请奖学金页面显示问题

📅 日期: 2025-01-27 15:15:00
👤 操作人: wuzhen
🎯 目标: 修复班主任批量申请奖学金页面中奖学金类型显示问题
🔄 状态: 代码修改完成，字段映射问题已解决

🐛 问题描述

用户反馈问题

班主任批量申请奖学金页面中奖学金的类型显示的有问题，不应该显示金额，应该显示类型名称，可以加个括弧里面备注上金额。

具体问题表现

1. 奖学金类型下拉框: 只显示类型名称，没有金额信息，用户难以选择
2. 批次信息展示: 奖学金类型标签显示字段错误，使用了不存在的字段
3. 学生选择区域: 等级和金额字段名称与API数据结构不匹配

🔍 问题根因分析

数据结构不匹配

• 后端API实际返回: Map<String, Object> (来自 getScholarshipTypesByBatch 方法)

  • name: 奖学金名称 (对应 typeInfo.getTypeName())
  • levelType: 奖学金等级
  • amount: 奖励金额 (对应 typeInfo.getAwardAmount())

• 前端代码错误使用:

  • type.typeName (错误，应为 type.name)
  • type.awardAmount (错误，应为 type.amount)

用户体验问题

• 下拉框只显示类型名称，缺少金额信息
• 用户无法直观了解不同类型的奖学金金额

🛠️ 修复内容

修改文件: web/src/views/jcbt/scholarship/application/index.vue

1. 批次信息展示区域修复 (第165行)

<!-- 修改前 -->
{{ type.typeName }} - {{ type.levelType }} (¥{{ type.awardAmount }})

<!-- 修改后 -->
{{ type.name }} - {{ type.levelType }} (¥{{ type.amount }})

2. 奖学金类型下拉框优化 (第263行)

<!-- 修改前 -->
:label="`${type.typeName} (¥${type.awardAmount})`"

<!-- 修改后 -->
:label="`${type.name} (¥${type.amount})`"

3. 等级显示字段 (第272行)

<!-- 保持不变，levelType字段正确 -->
:value="student.selectedScholarshipType?.levelType || ''"

4. 金额显示字段修复 (第280行)

<!-- 修改前 -->
:value="student.selectedScholarshipType?.awardAmount || ''"

<!-- 修改后 -->
:value="student.selectedScholarshipType?.amount || ''"

5. 提交数据字段修复 (第821-822行)

// 修改前
applicationReason: `班主任批量申请 - ${s.selectedScholarshipType.typeName}`,
applicationDescription: `申请等级：${s.selectedScholarshipType.levelType}，金额：${s.selectedScholarshipType.awardAmount}元`

// 修改后  
applicationReason: `班主任批量申请 - ${s.selectedScholarshipType.name}`,
applicationDescription: `申请等级：${s.selectedScholarshipType.levelType}，金额：${s.selectedScholarshipType.amount}元`

✅ 修复效果

用户体验改善

• ✅ 下拉框显示优化: 奖学金类型选择时显示"类型名称 (¥金额)"格式
• ✅ 信息展示完整: 批次信息区域正确显示奖学金类型、等级和金额
• ✅ 字段映射正确: 所有字段名称与后端API数据结构保持一致
• ✅ 数据提交准确: 提交时使用正确的字段名称

具体改善

1. 类型选择更直观: 用户可以直接看到每种奖学金的金额
2. 信息显示完整: 不再出现空白或undefined显示
3. 数据一致性: 前后端字段名称完全匹配

🧪 测试验证

测试步骤

1. 进入"奖学金申请管理"页面
2. 点击"班主任批量申请"按钮
3. 选择一个申报批次
4. 验证可申请奖学金类型标签显示格式
5. 选择学生并验证奖学金类型下拉框显示格式
6. 验证等级和金额字段显示正确

预期结果

• 奖学金类型下拉框显示: "国家奖学金 (¥8000)"
• 批次信息标签显示: "国家奖学金 - 一等 (¥8000)"
• 等级和金额字段正确显示对应数值

📋 相关文件

修改文件

• web/src/views/jcbt/scholarship/application/index.vue

相关API

• getScholarshipTypesByBatch(): 根据批次获取可申请的奖学金类型
• 数据结构: ScholarshipTypeVO

涉及字段

• name: 奖学金名称 (后端API返回字段)
• levelType: 奖学金等级
• amount: 奖励金额 (后端API返回字段)

💡 经验总结

技术要点

1. 字段映射一致性: 前端显示字段必须与后端API数据结构完全匹配
2. 用户体验优化: 下拉框显示应包含关键信息，便于用户选择
3. 数据验证重要性: 修改显示逻辑时需要检查所有相关使用位置

最佳实践

1. API数据结构文档化: 确保前端开发者了解准确的数据结构，特别是后端Map返回的字段名
2. 查看后端实现: 当前端显示异常时，应查看后端API的实际实现代码确认字段映射
3. 统一字段命名: 避免后端在构建Map时使用与VO类不同的字段名
4. 全面测试验证: 修改后需要测试所有相关功能点

根本原因总结

• 问题核心: 后端 getScholarshipTypesByBatch 方法返回的Map对象字段名与VO类字段名不一致
• 后端实现: scholarshipType.put("name", typeInfo.getTypeName()) 而不是 "typeName"
• 前端错误: 按照VO类字段名 typeName 和 awardAmount 访问数据，实际应该使用 name 和 amount