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

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

## 问题描述

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

## 问题分析

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

## 修复内容

### 1. 修复组件导出问题

**文件**: `web/src/views/xg/xsjcxx/stuRoster/components/AdvancedSearchDialog.vue`
```typescript
// 添加默认导出
defineOptions({
  name: 'AdvancedSearchDialog'
});
```

**文件**: `web/src/views/xg/xsjcxx/stuRoster/components/StudentDetailDialog.vue`
```typescript
// 添加默认导出
defineOptions({
  name: 'StudentDetailDialog'
});
```

### 2. 添加学生个人信息API

**文件**: `web/src/api/xg/xsjcxx/stuRoster/index.ts`
```typescript
/**
 * 获取学生个人信息
 * @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模块
```typescript
import api from '@/api/xg/xsjcxx/stuRoster/index';
```

#### 3.2 修改API调用方法
```typescript
/** 获取学生个人信息 */
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`
```typescript
// 修复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;
    }
  })
```

## 修复效果

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

## 技术要点

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

## 测试验证

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

## 相关文件

- `web/src/views/xg/xsjcxx/stuRoster/index.vue` - 主页面
- `web/src/views/xg/xsjcxx/stuRoster/components/StudentDetailDialog.vue` - 学生详情弹窗
- `web/src/views/xg/xsjcxx/stuRoster/components/AdvancedSearchDialog.vue` - 高级搜索弹窗
- `web/src/api/xg/xsjcxx/stuRoster/index.ts` - API接口定义
- `web/src/api/xg/xsjcxx/stuRoster/types.ts` - 类型定义