hzdyjs/docs/变更管理/code-adjust-record-2025-01-01-student-dorm-building.md

学生信息管理-宿舍楼栋字段优化变更记录

📅 变更信息

• 变更日期: 2025-01-01
• 变更人员: AI Assistant
• 变更类型: 功能优化
• 影响模块: 学生信息管理 - 新增/编辑弹窗

🎯 变更目标

优化学生信息管理中的宿舍楼栋字段，从手动输入改为通过API获取的树形下拉选择，并为楼栋名称添加性别标识。

📋 变更内容

1. 前端页面修改

文件: web/src/views/studentMsg/studentMsg/index.vue

1.1 添加状态变量

const dormBuildingOptions = ref([]); // 宿舍楼栋选项

1.2 新增API调用函数

/** 获取宿舍楼栋树形数据 */
const getDormBuildingTree = async () => {
  try {
    const res = await service.get('/xgss/dormBuildingTree/list');
    if (res && res.data) {
      // 处理数据，为楼栋名称添加性别标识
      const processTreeData = (nodes: any[]): any[] => {
        return nodes.map(node => {
          const processedNode = { ...node };
          
          // 如果是楼栋类型，添加性别标识
          if (node.type === 'building' && node.buildingType) {
            const genderPrefix = node.buildingType === 1 ? '（男）' : node.buildingType === 2 ? '（女）' : '';
            processedNode.label = genderPrefix + node.label;
            processedNode.name = genderPrefix + node.name;
          }
          
          // 递归处理子节点
          if (node.children && node.children.length > 0) {
            processedNode.children = processTreeData(node.children);
          }
          
          return processedNode;
        });
      };
      
      dormBuildingOptions.value = processTreeData(res.data);
    }
  } catch (error) {
    console.error('获取宿舍楼栋数据失败:', error);
    ElMessage.error('获取宿舍楼栋数据失败');
  }
};

1.3 宿舍楼栋字段改为树形选择器

位置: 学籍信息Tab

<el-form-item label="宿舍楼栋" prop="dormitoryBuilding">
  <el-tree-select
    v-model="form.dormitoryBuilding"
    :data="dormBuildingOptions"
    :props="{ 
      label: 'label', 
      value: 'id', 
      children: 'children',
      disabled: (data) => data.type !== 'building'
    }"
    :check-strictly="true"
    :render-after-expand="false"
    placeholder="请选择宿舍楼栋"
    filterable
    clearable
    style="width: 100%"
  />
</el-form-item>

1.4 组件初始化调用

onMounted(() => {
  getDeptTree(); // 初始化部门数据
  getRegionTree(); // 初始化行政区划数据
  getDormBuildingTree(); // 初始化宿舍楼栋数据 - 新增
  getList(); // 初始化列表数据
});

🔧 技术实现要点

1. API接口

• URL: /xgss/dormBuildingTree/list
• 方法: GET
• 入参: 无
• 返回: 树形结构的宿舍楼栋数据

2. 数据处理逻辑

• 根据 buildingType 字段添加性别标识：
  • buildingType = 1: 添加"（男）"前缀
  • buildingType = 2: 添加"（女）"前缀
• 递归处理树形数据结构
• 保持原有数据结构不变，仅添加前缀

3. 选择限制

• 只能选择 type === 'building' 的节点
• 其他类型节点自动禁用
• 支持搜索过滤功能

✅ 功能验证

1. 界面功能

• 宿舍楼栋字段显示为树形下拉选择器
• 楼栋名称正确显示性别标识
• 只能选择楼栋类型节点
• 支持搜索和清空功能

2. 数据交互

• API正确调用
• 数据正确解析和处理
• 树形结构正确显示
• 选择值正确保存

🎯 预期效果

1. 用户体验优化: 从手动输入改为选择，减少输入错误
2. 数据标准化: 确保宿舍楼栋数据的规范性和一致性
3. 性别标识: 清晰显示楼栋的性别属性，便于管理
4. 数据准确性: 通过API获取最新的楼栋信息

📝 注意事项

1. 确保后端API /xgss/dormBuildingTree/list 正常可用
2. 数据结构需包含 type、buildingType、label、id 等字段
3. 如果API调用失败，会显示错误提示信息
4. 选择器支持键盘导航和筛选功能

🔄 后续优化建议

1. 可考虑添加楼栋可用性状态显示
2. 可添加楼栋详细信息预览功能
3. 可根据学生性别自动过滤对应性别的楼栋