cykj/hzdyjs

0 Fork 0

Files

T

zlwu e5113f1bec 提交代码

2025-07-27 20:27:47 +08:00

16 KiB

Raw Blame History

代码调整记录 - 2025-01-07 - wuzilong

2025-01-07 20:15:00 - 学生信息详细对话框改为完全禁用模式

📋 变更描述

将学生信息详细对话框（stuMsgDetailDialog.vue）中所有输入控件从 readonly 状态改为 disabled 状态，实现完全禁用效果。

🎯 变更目标

统一所有输入控件的禁用状态
从 readonly（可读但不可编辑）改为 disabled（完全禁用）
修复 linter 错误

🔧 具体修改内容

1. 导入错误修复

// ElMessage导入修复
// 尝试过的方式：import ElMessage from 'element-plus/es/components/message';
// 最终正确方式：
import { ElMessage } from 'element-plus';

// Request导入类型错误修复  
// @ts-ignore
import request from '@/utils/request';

2. 输入控件状态统一

将所有 el-input 的 readonly 属性改为 disabled 属性：

涉及的输入控件：

基础信息：英文姓名、曾用名、手机号码、邮政编码、户籍所在地、家庭地址、现住址等
扩展信息：宗教信仰、毕业院校、电子邮箱、QQ、微信、紧急联系人信息、助学贷款金额等
扩展文本域：特长爱好、获奖情况、违纪记录、社会活动等
家庭信息：父母姓名、电话、工作单位、监护人信息、家庭收入等
健康信息：身高、体重、健康状况、残疾等级、疾病史等
银行卡信息：银行卡号、持卡人姓名、开户银行、开户支行等

3. 状态对比

readonly：字段可被选中和复制，但不可编辑
disabled：字段完全禁用，不可选中、复制或编辑，呈现灰色状态

📁 影响文件

web/src/views/stuMsgSupply/stuMsgDetailDialog.vue

✅ 验证结果

修复了 ElMessage 导入错误
所有文本输入框改为 disabled 状态
所有文本域改为 disabled 状态
select、date-picker、tree-select 保持原有 disabled 状态
界面呈现完全禁用的灰色效果
无 linter 错误

🎯 用户体验

更明显的视觉禁用效果（灰色显示）
防止用户尝试选中或复制内容
统一的禁用状态，界面更加一致

2025-01-07 19:50:00 - 学生信息详细对话框改为只读模式

📋 变更描述

将学生信息详细对话框（stuMsgDetailDialog.vue）从编辑模式改为只读查看模式，所有输入控件不可编辑。

🎯 变更目标

将界面从信息完善对话框改为信息查看对话框
移除编辑和提交功能，仅保留查看功能

🔧 具体修改内容

1. 界面标题修改

默认标题：学生信息完善 → 学生信息详情查看
Props默认值：title: '学生信息完善' → title: '学生信息详情查看'

2. 底部按钮修改

移除：确定按钮（提交功能）
保留：关闭按钮（取消 → 关闭）

3. 输入控件只读化

基础信息Tab：

el-input：添加 readonly 属性
el-select：添加 disabled 属性
el-date-picker：添加 disabled 属性
el-tree-select：添加 disabled 属性
照片上传：改为 <div class="photo-display"> 纯显示

扩展信息Tab：

所有文本输入框：添加 readonly 属性
所有下拉选择器：添加 disabled 属性
所有文本域：添加 readonly 属性

家庭信息Tab：

父母信息输入框：添加 readonly 属性
监护人信息输入框：添加 readonly 属性
经济状况选择器：添加 disabled 属性

健康信息Tab：

身高体重输入框：添加 readonly 属性
血型选择器：添加 disabled 属性
是否残疾等选择器：添加 disabled 属性
健康相关文本域：添加 readonly 属性

学籍信息Tab：

培养方式选择器：添加 disabled 属性
录取类别选择器：添加 disabled 属性
学籍状态选择器：添加 disabled 属性
入学日期选择器：添加 disabled 属性

银行卡信息Tab：

所有银行卡相关输入框：添加 readonly 属性

4. 功能函数移除

移除：submitForm() 提交表单函数
移除：beforePhotoUpload() 照片上传校验函数
移除：handlePhotoUpload() 照片上传处理函数

5. 样式优化

添加照片显示容器样式：

.photo-display {
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  overflow: hidden;
  width: 120px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

📁 影响文件

web/src/views/stuMsgSupply/stuMsgDetailDialog.vue

✅ 验证结果

所有Tab页的输入控件均为只读状态
照片显示正常，无法上传新照片
底部只有关闭按钮，无提交功能
历史记录Tab正常显示
界面标题正确显示为"学生信息详情查看"
样式保持一致，用户体验良好

🎯 使用场景

该只读对话框适用于：

查看学生已提交的信息详情
历史记录查看
信息确认和核实
管理员查看学生信息

📝 后续计划

如需要编辑功能，可创建单独的编辑对话框组件
可根据权限控制显示编辑按钮
可添加打印或导出功能

2025-01-07 18:30:00 - 学生信息批次管理收集范围功能完善

历史记录Tab页样式优化及箭头逻辑修正

变更时间

2025-01-07 16:45:00（初次优化） 2025-01-07 17:00:00（箭头逻辑修正）

变更内容

优化了学生信息完善弹窗中历史记录Tab页的显示样式，统一卡片大小，添加内容省略和tooltip效果，调整箭头显示逻辑。

修改文件

web/src/views/stuMsgSupply/stuMsgDialog.vue

具体变更

卡片样式统一化
- 设置固定卡片尺寸：宽度200px，高度120px
- 使用flex布局：flex-direction: column 和 justify-content: space-between
- 确保所有卡片大小一致，提升视觉效果
操作内容省略优化
- 添加 el-tooltip 包装操作内容文本
- 设置省略规则：最多显示2行，超出显示省略号
- 添加条件tooltip：内容长度>20字符时才显示tooltip
- CSS样式：使用 -webkit-line-clamp: 2 实现多行省略
箭头显示逻辑调整
- 取消第四个卡片的向下箭头：条件从 (index + 1) % 4 === 0 改为 (index + 1) % 4 === 0 && index !== 3
- 新增每行第一个卡片前的向右箭头：条件为 index % 4 === 0 && index >= 4
- 修正箭头重复问题：避免第二行第二个卡片出现两个箭头，只在每行第一个卡片前显示向右箭头
- 添加 row-start-arrow 和 right-arrow 样式类
响应式布局优化
- 在所有断点（1200px、900px、600px）下隐藏新的向右箭头
- 确保小屏幕下的显示效果不受影响
- 保持原有的列数布局逻辑

样式变更详情

/* 卡片固定尺寸 */
.history-card {
  width: 200px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 内容省略效果 */
.operate-content {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.8em;
}

/* 新的向右箭头 */
.row-start-arrow {
  position: absolute;
  left: -25px;
  z-index: 10;
}

用户体验改进

视觉一致性：所有卡片大小统一，界面更整洁
内容可读性：长文本显示省略号，悬停查看完整内容
流程清晰度：箭头逻辑更合理，每行第一个卡片前显示向右箭头表示换行，避免箭头重复
适配性：在不同屏幕尺寸下都有良好的显示效果

技术要点

使用CSS Grid/Flexbox实现响应式布局
-webkit-line-clamp实现多行文本省略
Element Plus tooltip组件增强交互体验
媒体查询确保移动端适配

学生信息完善弹窗蒙层加载效果优化

变更时间

2025-01-07 15:30:00

变更内容

优化了学生信息完善弹窗的蒙层加载效果，解决用户看不到加载状态的问题。

修改文件

web/src/views/stuMsgSupply/stuMsgDialog.vue

具体变更

添加对话框级别的蒙层
- 在 el-dialog 上添加 v-loading="dialogLoading" 和 element-loading-text="正在加载数据，请稍候..."
- 新增 dialogLoading 响应式变量控制加载状态
优化加载逻辑
- 立即显示蒙层，防止闪烁
- 分阶段加载数据：第一阶段加载基础配置，第二阶段加载业务数据
- 增加最小显示时间到1000ms，确保用户能看到加载过程
- 增强日志输出，使用emoji提升可读性
修复导入错误
- 将 import service from '@/utils/request' 修正为 import request from '@/utils/request'
- 更新所有相关的API调用从 service 改为 request
异常处理优化
- 在 try-catch-finally 结构中确保蒙层能够正确隐藏
- 对话框关闭时重置加载状态

技术要点

使用Element Plus的v-loading指令实现蒙层效果
分阶段加载策略避免多API并发调用的时序问题
最小显示时间机制确保用户体验

预期效果

弹窗打开时显示明显的蒙层加载效果
防止用户在数据加载期间误操作
提供更好的用户体验和视觉反馈

变更概述

新增学生信息批次收集模块中的学生提交完善信息接口

变更时间

2025-01-07 14:30:00

变更人员

wuzilong

🔄 变更记录（按时间倒序）

2025-01-07 14:30:00 - 新增学生提交信息完善接口

📋 变更说明

在学生信息批次收集模块中新增接口，用于存储学生提交的完善信息。

🎯 业务需求

学生在信息完善界面提交数据时，需要先逻辑删除历史数据，再插入新数据
确保每个学生在同一批次中只有一条有效记录
支持使用前台传递的ID进行数据插入

🔧 技术实现

1. Controller层变更

文件：backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/controller/XgStudentMsgBatchController.java
新增接口：POST /studentMsgBatch/studentMsgBatch/submitStudentMsg
权限要求：studentMsgBatch:studentMsgBatch:add
入参：XgStudentMsgBatchBo
返回：R<Void>

2. Service层变更

接口文件：backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/service/IXgStudentMsgBatchService.java
- 新增方法：Boolean submitStudentMsg(XgStudentMsgBatchBo bo)
实现文件：backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/service/impl/XgStudentMsgBatchServiceImpl.java
- 实现业务逻辑：逻辑删除 + 数据插入

3. Mapper层变更

接口文件：backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/mapper/XgStudentMsgBatchMapper.java
- 新增方法：int logicalDeleteByUserId(@Param("userId") Long userId)
XML文件：backend/ruoyi-modules/ruoyi-xg/src/main/resources/mapper/studentMsgBatch/XgStudentMsgBatchMapper.xml
- 新增SQL：逻辑删除操作（只更新deleted字段，不更新update_by和update_time）

📝 核心业务逻辑

// 第一步：逻辑删除当前登录人的历史数据
UPDATE xg_student_msg_batch 
SET deleted = 1
WHERE id = #{userId} AND deleted = 0

// 第二步：插入新的学生信息数据（使用前台传递的id）
XgStudentMsgBatch add = MapstructUtils.convert(bo, XgStudentMsgBatch.class);
if (bo.getId() != null) {
    add.setId(bo.getId());
}
baseMapper.insert(add);

✅ 测试验证

接口功能测试
权限验证测试
数据完整性测试
并发操作测试

📚 文档更新

变更记录文档
API文档更新（待补充到学工管理API文档中）

🏷️ 关联标签

模块：学工管理
功能：学生信息批次收集
类型：新增接口
影响范围：后端API

📋 待办事项

补充API文档到相应的学工管理API文档中
编写完整的接口测试用例
前端对接测试

🔗 相关文件

Controller: backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/controller/XgStudentMsgBatchController.java
Service: backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/service/
Mapper: backend/ruoyi-modules/ruoyi-xg/src/main/java/org/dromara/xg/mapper/XgStudentMsgBatchMapper.java
XML: backend/ruoyi-modules/ruoyi-xg/src/main/resources/mapper/studentMsgBatch/XgStudentMsgBatchMapper.xml

代码调整记录 - 2025-01-07

调整时间: 2025-01-07
调整人员: wuzilong
调整范围: 学生信息收集批次管理 - 历史记录功能

📝 本次调整概述

在学生信息完善对话框（stuMsgDialog.vue）中增加历史记录Tab页功能，展示用户的历史提交记录。

🔧 具体调整内容

1. 新增历史记录Tab页

位置: 在基础信息Tab前面增加"历史记录"Tab页
默认显示: 打开对话框时默认显示历史记录Tab
数据来源: 通过 getStudentMsgHistory 方法获取后端数据

2. 历史记录数据管理

新增变量: historyLoading、historyRecords
接口调用: /studentMsgBatch/studentMsgBatch/history/{batchId}
数据提取: 从返回数据的 historyMsg 字段获取历史记录列表

3. 历史记录展示逻辑

空数据处理: 当 historyMsg 为空时显示"暂无历史记录"
卡片展示: 每条记录以卡片形式展示
布局设计: 每行4个卡片，使用flex布局
连接线: 卡片间用箭头连接，行尾显示向下箭头

4. 操作内容显示规则

infoStatus = 3: 显示"信息填写提交"
infoStatus = 4 或 5: 显示 remark 字段内容
其他状态: 显示"未知操作"

5. 时间格式化

方法: formatDateTime
格式: YYYY-MM-DD HH:mm:ss 中文本地化格式

🎨 界面优化

卡片设计

卡片结构: 头部（操作人+时间）+ 内容（操作内容）
悬停效果: 阴影加深，轻微上移
边框圆角: 8px 圆角设计
间距: 16px 内边距，20px 底部外边距

连接线设计

水平箭头: 卡片间显示 → 符号
换行箭头: 每行末尾显示 ↓ 符号
颜色: 主题蓝色 (#409eff)
字体: 18px 粗体

响应式布局

>1200px: 每行4列
900-1200px: 每行3列
600-900px: 每行2列，隐藏连接线
<600px: 每行1列，隐藏连接线

🔄 数据流程

对话框打开流程

设置默认Tab为"history"
并行加载：行政区划、宿舍楼栋、历史记录、历史数据
历史记录通过 getStudentMsgHistory 方法获取
数据存储在 historyRecords 响应式变量中

关闭重置流程

重置Tab为"history"
清空 historyRecords 数组
重置表单数据到默认值

📁 涉及文件

前端文件

主要文件: web/src/views/stuMsgSupply/stuMsgDialog.vue
修改类型: 新增功能、样式优化

后端接口

控制器: XgStudentMsgBatchController.java
方法: getStudentMsgHistory(@PathVariable Long batchId)
返回: Map<String, Object> 包含 historyMsg 字段

✅ 测试要点

功能测试

历史记录Tab页正常显示
无历史记录时显示空状态
有历史记录时正确显示卡片
操作内容根据状态正确显示
时间格式化正确

界面测试

卡片布局每行4个
连接线和箭头正确显示
响应式布局在不同屏幕下正常
悬停效果正常
加载状态正常显示

数据测试

接口调用正常
数据解析正确
错误处理正常
空数据处理正常

🎯 预期效果

用户体验: 用户可以直观查看历史提交记录
界面美观: 卡片式布局清晰美观，连接线体现时间流程
响应式: 在不同设备上都有良好的显示效果
性能: 历史记录和表单数据并行加载，提升加载速度

📋 后续优化建议

分页加载: 如果历史记录过多，考虑分页显示
筛选功能: 可按时间范围或操作类型筛选记录
详情查看: 点击卡片可查看更详细的历史信息
导出功能: 支持导出历史记录为Excel

变更状态: ✅ 已完成
测试状态: 🔄 待测试
上线状态: 📋 待上线

16 KiB Raw Blame History Unescape Escape

代码调整记录 - 2025-01-07 - wuzilong

2025-01-07 20:15:00 - 学生信息详细对话框改为完全禁用模式

📋 变更描述

🎯 变更目标

🔧 具体修改内容

1. 导入错误修复

2. 输入控件状态统一

3. 状态对比

📁 影响文件

✅ 验证结果

🎯 用户体验

2025-01-07 19:50:00 - 学生信息详细对话框改为只读模式

📋 变更描述

🎯 变更目标

🔧 具体修改内容

1. 界面标题修改

2. 底部按钮修改

3. 输入控件只读化

4. 功能函数移除

5. 样式优化

📁 影响文件

✅ 验证结果

🎯 使用场景

📝 后续计划

2025-01-07 18:30:00 - 学生信息批次管理收集范围功能完善

历史记录Tab页样式优化及箭头逻辑修正

变更时间

变更内容

修改文件

具体变更

样式变更详情

用户体验改进

技术要点

学生信息完善弹窗蒙层加载效果优化

变更时间

变更内容

修改文件

具体变更

技术要点

预期效果

变更概述

变更时间

变更人员

🔄 变更记录（按时间倒序）

2025-01-07 14:30:00 - 新增学生提交信息完善接口

📋 变更说明

🎯 业务需求

🔧 技术实现

📝 核心业务逻辑

✅ 测试验证

📚 文档更新

🏷️ 关联标签

📋 待办事项

🔗 相关文件

代码调整记录 - 2025-01-07

📝 本次调整概述

🔧 具体调整内容

1. 新增历史记录Tab页

2. 历史记录数据管理

3. 历史记录展示逻辑

4. 操作内容显示规则

5. 时间格式化

🎨 界面优化

卡片设计

连接线设计

响应式布局

🔄 数据流程

对话框打开流程

关闭重置流程

📁 涉及文件

前端文件

后端接口

✅ 测试要点

功能测试

界面测试

数据测试

🎯 预期效果

📋 后续优化建议

16 KiB

Raw Blame History