代码调整记录 - 2025-01-14 - cursor

📝 变更概述

变更日期: 2025-01-14 15:30:00
处理人员: cursor
变更类型: 前端功能修复 + UI优化

🎯 变更内容

1. 修复预约时段状态切换功能 (XljkConsultationSchedule)

问题描述:

心理健康咨询预约时段管理页面，点击编辑按钮后状态切换异常
无论当前状态如何，都会变成停用状态
显示双重状态标签，界面异常

根本原因分析:

状态值类型不一致: 前端接收的status是字符串类型（"0", "1"），但切换逻辑使用数字比较（=== 1）
字典数据缺失: schedule_status字典未正确配置，导致显示异常
状态更新接口数据类型错误: 发送数字状态但接收端可能期望字符串

修复方案:

1.1 修复状态切换逻辑

文件: web/src/views/xljk/consultation/schedule/index.vue

修改前:

const handleUpdate = async (row?: XljkConsultationScheduleVO) => {
  if (row && row.id) {
    try {
      await updateXljkSchedule({
        id: row.id,
        status: row.status === 1 ? 0 : 1  // 错误：字符串与数字比较
      } as XljkConsultationScheduleForm);
      ElMessage.success('状态更新成功');
      getList();
    } catch (error) {
      console.error('更新时段状态失败', error);
      ElMessage.error('状态更新失败');
    }
  }
};

修改后:

const handleUpdate = async (row?: XljkConsultationScheduleVO) => {
  if (row && row.id) {
    try {
      // 修复：将字符串状态正确转换为数字进行比较
      const currentStatus = parseInt(row.status as string);
      const newStatus = currentStatus === 1 ? 0 : 1;
      
      console.log(`状态切换调试 - 当前状态: ${row.status} (${typeof row.status}), 转换后: ${currentStatus}, 新状态: ${newStatus}`);
      
      await updateXljkSchedule({
        id: row.id,
        status: newStatus.toString()
      } as XljkConsultationScheduleForm);
      
      ElMessage.success(`状态已${newStatus === 0 ? '启用' : '停用'}`);
      getList();
    } catch (error) {
      console.error('更新时段状态失败', error);
      ElMessage.error('状态更新失败');
    }
  }
};

修复要点:

✅ 使用 parseInt() 将字符串状态转换为数字进行比较
✅ 添加调试日志输出，便于问题排查
✅ 改进用户提示消息，明确显示状态变更结果
✅ 确保发送的状态值类型一致性

1.2 创建字典数据配置

文件: backend/script/sql/xljk-dict-data.sql

新增内容:

-- 预约时段状态字典
INSERT INTO sys_dict_type VALUES (102, '000000', '预约时段状态', 'schedule_status', 103, 1, sysdate(), NULL, NULL, '预约时段状态列表');

-- 预约时段状态字典数据
INSERT INTO sys_dict_data VALUES (300, '000000', 1, '正常', '0', 'schedule_status', '', 'success', 'Y', 103, 1, sysdate(), NULL, NULL, '正常状态');
INSERT INTO sys_dict_data VALUES (301, '000000', 2, '停用', '1', 'schedule_status', '', 'danger', 'N', 103, 1, sysdate(), NULL, NULL, '停用状态');

配置要点:

✅ 创建 schedule_status 字典类型
✅ 配置状态值：0-正常（success样式）、1-停用（danger样式）
✅ 同时创建相关的预约状态和时段类型字典

2. 优化预约时段管理列表列宽 (2025-01-14 15:45:00)

调整目标: 缩小上午时段、下午时段、创建时间3个列的列宽，优化页面布局

列宽调整对比:

字段名称	调整前	调整后	变化
上午时段	`min-width="150"`	`min-width="120"`	-30px
下午时段	`min-width="150"`	`min-width="120"`	-30px
创建时间	`width="150"`	`width="120"`	-30px

修改位置: web/src/views/xljk/consultation/schedule/index.vue (第84-102行)

修改内容:

<!-- 上午时段列 -->
<el-table-column label="上午时段" align="center" min-width="120">

<!-- 下午时段列 -->
<el-table-column label="下午时段" align="center" min-width="120">

<!-- 创建时间列 -->
<el-table-column label="创建时间" align="center" prop="createTime" width="120">

优化效果:

✅ 总体节省空间：90px (30px × 3列)
✅ 上午/下午时段列保持响应式 (min-width)
✅ 创建时间列固定宽度更紧凑
✅ 为其他列提供更多显示空间
✅ 提升页面整体布局效率

表格布局更新:

原总最小宽度: 1115px
新总最小宽度: 1025px
空间优化: 节省90px宽度

3. 移除预约限制管理页面创建时间字段 (2025-01-14 16:00:00)

调整目标: 移除预约限制管理（未到访记录）列表界面的创建时间字段显示

页面位置: web/src/views/xljk/consultation/noshow/index.vue

移除字段:

<!-- 已移除的创建时间列 -->
<el-table-column label="创建时间" align="center" prop="createTime" width="150">
  <template #default="scope">
    <span>{{ parseTime(scope.row.createTime) }}</span>
  </template>
</el-table-column>

修改位置: 第92-96行

优化效果:

✅ 简化界面: 移除不必要的时间信息显示
✅ 节省空间: 释放150px列宽空间
✅ 聚焦核心: 突出学生信息、限制状态等关键信息
✅ 提升体验: 减少信息冗余，提高页面简洁度

当前保留字段:

学生姓名、学号、院系、专业、班级
未到访日期、限制到期日、状态
操作（查看、解除限制）

表格布局优化:

移除列宽: 150px
界面更简洁: 专注于业务核心信息
操作便捷: 保留查看详情和解除限制功能

🔧 技术细节

问题原因深度分析

JavaScript类型转换问题: ```javascript // 问题代码 "1" === 1 // false (字符串与数字比较)

// 修复代码
parseInt("1") === 1 // true (转换后比较)


2. **数据流类型不一致**:

后端返回 → status: "0" (字符串) 前端比较 → status === 1 (数字) 结果 → 永远返回false，总是执行 : 1 分支


3. **字典配置缺失**:
   ```vue
   <dict-tag :options="schedule_status" :value="scope.row.status" />

当 schedule_status 字典为空时，dict-tag 组件无法正确渲染，可能显示原始值或双重标签。

测试验证

验证步骤:

✅ 启动前端开发服务器
✅ 导航至心理健康 → 咨询管理 → 预约时段
✅ 检查状态列显示是否正常（应显示"正常"或"停用"）
✅ 点击编辑按钮测试状态切换
✅ 观察控制台调试日志
✅ 验证状态在正常/停用之间正确切换

预期结果:

状态列正确显示"正常"/"停用"标签
点击编辑按钮后状态正确切换
用户提示消息明确显示变更结果
控制台输出调试信息供问题排查

📊 影响范围

直接影响:

✅ 心理健康咨询预约时段管理功能恢复正常
✅ 状态切换功能可正确启用/停用时段

间接影响:

✅ 改善用户体验，操作反馈更清晰
✅ 为类似的状态切换功能提供标准修复模式
✅ 完善了心理健康模块的字典数据配置

🚀 后续优化建议

统一类型处理: 考虑在前端建立统一的状态值处理工具函数
完善错误处理: 添加更详细的错误处理和用户提示
字典数据管理: 建立字典数据的统一管理和维护机制
测试用例: 为状态切换功能添加单元测试和集成测试

📋 变更文件清单

文件路径	变更类型	说明
`web/src/views/xljk/consultation/schedule/index.vue`	修改	修复状态切换逻辑 + 优化列宽布局
`web/src/views/xljk/consultation/noshow/index.vue`	修改	移除创建时间字段显示
`backend/script/sql/xljk-dict-data.sql`	新增	创建心理健康模块字典数据配置
`docs/变更管理/code-adjust-record-2025-01-14-cursor.md`	新增	本变更记录文档

验证完成: ✅ 功能测试通过
文档更新: ✅ 已同步更新
代码审查: ✅ 自检完成

code-adjust-record-2025-01-14-cursor.md 8.2 KB Geschiedenis Ruwe