cykj/hzdyjs
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
3134870b68df63424e760517aab75b5462a03fed
hzdyjs/docs/变更管理/code-adjust-record-2025-01-14-cursor.md
T
李旭明 0db0a99c85 0823
2025-08-23 09:58:59 +08:00

8.2 KiB
Raw Blame History

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

📝 变更概述

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

🎯 变更内容

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

问题描述:

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

根本原因分析:

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

修复方案:

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
  • 界面更简洁: 专注于业务核心信息
  • 操作便捷: 保留查看详情和解除限制功能

🔧 技术细节

问题原因深度分析

  1. JavaScript类型转换问题:

    // 问题代码
"1" === 1  // false (字符串与数字比较)

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

  2. 数据流类型不一致:

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

  3. 字典配置缺失:

    <dict-tag :options="schedule_status" :value="scope.row.status" />

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

测试验证

验证步骤:

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

预期结果:

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

📊 影响范围

直接影响:

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

间接影响:

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

🚀 后续优化建议

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

📋 变更文件清单

文件路径 变更类型 说明
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 新增 本变更记录文档

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

Reference in new issue View Git Blame Copy Permalink