cykj/hzdyjs

0 Fork 0

Files

T

zlwu 4a6b28fe3e 提交

2025-08-01 12:16:41 +08:00

5.4 KiB

Raw Blame History

学生详情弹窗集成修改记录

修改时间: 2025-01-27 16:00:00
修改人员: AI Assistant
修改类型: 功能增强

修改概述

将学生详情弹窗(StudentDetailDialog.vue)从独立页面改造为可复用的弹窗组件，支持从学生花名册页面的列表视图和卡片视图中传递学生ID并显示详细信息。

修改内容

1. 学生详情弹窗组件改造

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

1.1 模板结构修改

将原有的独立页面结构包装在el-dialog组件中
添加弹窗标题、宽度、关闭行为等配置
保持原有的Tab页结构和表单布局

1.2 Props和Emits定义

// 定义props
interface Props {
  visible: boolean;
  studentId?: number | null;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  studentId: null
});

// 定义emits
const emit = defineEmits<{
  'update:visible': [value: boolean];
}>();

// 计算属性：控制弹窗显示
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
});

1.3 API调用修改

修改getPersonalInfoData方法，支持传入学生ID参数
使用正确的API路径：/studentMsg/studentMsg/personalInfo
通过查询参数userId传递学生ID

/** 获取学生个人信息 */
const getPersonalInfoData = async (studentId?: number) => {
  if (!studentId) {
    ElMessage.warning('学生ID不能为空');
    return;
  }
  
  try {
    loading.value = true;
    const response = await request({
      url: '/studentMsg/studentMsg/personalInfo',
      method: 'get',
      params: { userId: studentId }
    });
    // ... 处理响应数据
  } catch (error) {
    console.error('获取个人信息失败:', error);
    ElMessage.error('获取个人信息失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};

1.4 数据监听机制

添加watch监听器，监听props.visible和props.studentId的变化
当弹窗打开且有学生ID时，自动获取学生信息
在获取新数据前重置表单数据

// 监听学生ID变化，当弹窗打开且有学生ID时获取数据
watch(
  () => [props.visible, props.studentId],
  async ([visible, studentId]) => {
    if (visible && studentId && typeof studentId === 'number') {
      // 重置表单数据
      Object.keys(form).forEach((key) => {
        const value = form[key];
        if (typeof value === 'string') {
          (form as any)[key] = '';
        } else if (typeof value === 'number') {
          (form as any)[key] = undefined;
        } else if (typeof value === 'boolean') {
          (form as any)[key] = undefined;
        }
      });
      
      // 获取学生个人信息
      await getPersonalInfoData(studentId);
    }
  },
  { immediate: true }
);

2. 主页面集成

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

2.1 详情弹窗状态管理

// 详情弹窗
const detailDialog = reactive({
  visible: false,
  studentId: null as number | null
});

2.2 查看详情方法

const handleDetail = (row: any) => {
  detailDialog.studentId = row.id;
  detailDialog.visible = true;
};

2.3 组件使用

<!-- 学生详情弹窗 -->
<student-detail-dialog
  :visible="detailDialog.visible"
  :student-id="detailDialog.studentId"
  @update:visible="(val) => (detailDialog.visible = val)"
/>

3. 触发方式

3.1 列表视图

在操作列中添加"查看详情"按钮
点击按钮调用handleDetail(row)方法

3.2 卡片视图

卡片支持双击事件
双击卡片调用handleDetail(item)方法
添加视觉提示："双击查看详情"

功能特点

响应式设计: 弹窗支持不同屏幕尺寸的响应式布局
数据隔离: 每次打开弹窗都会重置表单数据，避免数据混淆
错误处理: 完善的错误提示和异常处理机制
用户体验: 加载状态提示，操作反馈及时
代码复用: 组件化设计，可在其他页面复用

技术要点

Vue 3 Composition API: 使用defineProps、defineEmits、computed等现代Vue 3特性
TypeScript支持: 完整的类型定义和类型安全
响应式数据: 使用reactive和ref管理组件状态
生命周期管理: 合理使用onMounted和watch监听器
API集成: 正确调用后端API并处理响应数据

测试验证

列表视图测试: 点击"查看详情"按钮，弹窗正常打开并显示学生信息
卡片视图测试: 双击学生卡片，弹窗正常打开并显示学生信息
数据验证: 确认显示的学生信息与列表/卡片中的基本信息一致
错误处理: 测试无效学生ID的情况，确认错误提示正常
响应式测试: 在不同屏幕尺寸下测试弹窗显示效果

注意事项

API路径: 确保后端API路径/studentMsg/studentMsg/personalInfo正确配置
权限控制: 确认用户有访问学生个人信息的权限
数据格式: 注意API返回的数据格式与表单字段的映射关系
性能优化: 避免频繁的API调用，合理使用缓存机制
用户体验: 提供清晰的加载状态和错误提示

修改完成: 学生详情弹窗已成功集成到学生花名册页面，支持从列表视图和卡片视图查看学生详细信息。

5.4 KiB Raw Blame History