学生花名册详情弹窗API调用修复记录

修改时间: 2025-07-17 16:30:00
修改人员: AI Assistant
修改类型: 功能修复

问题描述

学生花名册主界面(web/src/views/xg/xsjcxx/stuRoster/index.vue)中的学生详情弹窗(StudentDetailDialog.vue)没有调用API获取学生数据，导致详情弹窗显示空白。

问题分析

组件导入错误: StudentDetailDialog和AdvancedSearchDialog组件使用<script setup>语法，但没有默认导出，导致主页面导入失败
API缺失: stuRoster的API文件中缺少获取学生个人信息的API方法
API调用错误: StudentDetailDialog组件中直接使用request调用API，而不是使用统一的API模块

修复内容

1. 修复组件导出问题

文件: web/src/views/xg/xsjcxx/stuRoster/components/AdvancedSearchDialog.vue

// 添加默认导出
defineOptions({
  name: 'AdvancedSearchDialog'
});

文件: web/src/views/xg/xsjcxx/stuRoster/components/StudentDetailDialog.vue

// 添加默认导出
defineOptions({
  name: 'StudentDetailDialog'
});

2. 添加学生个人信息API

文件: web/src/api/xg/xsjcxx/stuRoster/index.ts

/**
 * 获取学生个人信息
 * @param userId 用户ID，可为空，为空时使用当前登录用户ID
 */
export function getStudentPersonalInfo(userId?: number): AxiosPromise<any> {
  return request({
    url: '/studentMsg/studentMsg/personalInfo',
    method: 'get',
    params: { userId }
  });
}

export default {
  XgDeptTreeSelect,
  deptTreeSelect,
  listStudentRoster,
  exportStudentRoster,
  getStudentPersonalInfo  // 新增
};

3. 修复StudentDetailDialog组件API调用

文件: web/src/views/xg/xsjcxx/stuRoster/components/StudentDetailDialog.vue

3.1 导入API模块

import api from '@/api/xg/xsjcxx/stuRoster/index';

3.2 修改API调用方法

/** 获取学生个人信息 */
const getPersonalInfoData = async (studentId?: number) => {
  if (!studentId) {
    ElMessage.warning('学生ID不能为空');
    return;
  }

  try {
    loading.value = true;
    // 使用统一的API模块
    const response = await api.getStudentPersonalInfo(studentId);
    if (response.code === 200) {
      const data = response.data;
      // 将是否字段的数值转换为字符串
      const booleanFields = [
        'isPoorStudent',
        'isMinority',
        'isOrphan',
        'isLeftBehindChild',
        'isSingleChild',
        'isLowIncome',
        'hasLoan',
        'isDisabled',
        'isBoarder'
      ];

      booleanFields.forEach((field) => {
        if (data[field] !== undefined && data[field] !== null) {
          data[field] = String(data[field]);
        }
      });
      // 将API返回的数据映射到表单
      Object.assign(form, data);
    } else {
      ElMessage.error(response.msg || '获取个人信息失败');
    }
  } catch (error) {
    console.error('获取个人信息失败:', error);
    ElMessage.error('获取个人信息失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};

4. 修复主页面API响应处理

文件: web/src/views/xg/xsjcxx/stuRoster/index.vue

// 修复API响应数据结构处理
api
  .listStudentRoster(queryParams)
  .then((response: any) => {
    if (response.code === 200) {
      studentList.value = response.data.rows || [];
      total.value = response.data.total || 0;
    } else {
      ElMessage.error(response.msg || '查询失败');
      studentList.value = [];
      total.value = 0;
    }
  })

修复效果

组件导入正常: StudentDetailDialog和AdvancedSearchDialog组件可以正常导入和使用
API调用成功: 学生详情弹窗可以正确调用后端API获取学生个人信息
数据展示完整: 详情弹窗可以显示学生的完整个人信息，包括基础信息、扩展信息、家庭信息、健康信息、学籍信息、银行卡信息等
错误处理完善: 添加了完善的错误处理和用户提示

技术要点

Vue 3 Composition API: 使用<script setup>语法和defineOptions进行组件定义
API模块化: 统一使用API模块进行接口调用，便于维护和管理
类型安全: 使用TypeScript进行类型定义，提高代码质量
错误处理: 完善的错误处理和用户友好的提示信息

测试验证

打开学生花名册页面
点击学生列表中的"查看详情"按钮
验证详情弹窗是否正确显示学生个人信息
验证各个Tab页（基础信息、扩展信息、家庭信息、健康信息、学籍信息、银行卡信息）是否正常显示
验证API调用是否成功，网络请求是否正常

5.1 KiB Raw Blame History