hzdyjs/docs/变更管理/code-adjust-record-2025-01-27-audit-dialog.md

代码调整记录 - 2025-01-27 - audit-dialog

2025-01-27 19:00:00 - 调整审核对话框右侧表格高度和滚动条

变更内容

在学生信息审核对话框(web/src/views/stuMsgAudit/auditDialog.vue)中调整右侧表格的高度，为其添加纵向滚动条，确保表格内容能够充分显示。

具体修改

1. 右侧面板布局优化：

   • 为右侧面板设置固定高度600px和overflow: hidden
   • 搜索表单区域设置为flex-shrink: 0，防止被压缩

2. 表格卡片容器调整：

   • 设置表格卡片为flex: 1，自动占据剩余空间
   • 卡片内容区域使用flex布局：display: flex; flex-direction: column

3. 表格样式优化：

   • 为表格添加类名right-table
   • 设置表格高度为420px
   • 表格体容器最大高度350px，超出显示垂直滚动条

4. 空间分配优化：

   • 搜索表单区域：约100px
   • 表格区域：420px（含表头、表体和分页）
   • 分页组件：约50px
   • 间距和边距：约30px

变更文件

• web/src/views/stuMsgAudit/auditDialog.vue（样式和模板部分）

效果说明

• ✅ 右侧表格有固定高度和垂直滚动条
• ✅ 表格充分利用右侧面板空间
• ✅ 搜索表单不被压缩，保持正常显示
• ✅ 分页组件正常显示在表格下方
• ✅ 整体布局协调，左右两侧高度一致

测试验证

• ✅ 表格数据多时显示垂直滚动条
• ✅ 表格高度固定，不影响整体弹窗布局
• ✅ 搜索功能正常工作
• ✅ 分页功能正常工作

---

2025-01-27 18:45:00 - 固定审核对话框左侧部门树高度

变更内容

在学生信息审核对话框(web/src/views/stuMsgAudit/auditDialog.vue)中将左侧部门树设置为固定高度，防止树展开收起时改变整个弹窗的高度。

具体修改

1. 弹窗容器固定高度：

   • 将弹窗高度从90vh改为固定700px
   • 设置弹窗内容区域高度为calc(100% - 120px)

2. 主布局容器固定：

   • 将.layout-container高度从100%改为固定600px
   • 添加overflow: hidden防止内容溢出

3. 左侧面板固定尺寸：

   • 卡片容器设置固定高度600px
   • 左侧面板设置overflow: hidden

4. 部门树固定高度：

   • 将部门树高度设置为固定520px
   • 设置overflow-y: auto和overflow-x: hidden
   • 添加边框样式使其更清晰

5. 树节点样式优化：

   • 移除强制宽度设置，使用overflow: hidden和text-overflow: ellipsis
   • 长文本使用省略号显示，避免横向溢出

6. 响应式适配调整：

   • 小屏幕下左侧卡片高度400px，部门树高度320px

变更文件

• web/src/views/stuMsgAudit/auditDialog.vue（样式部分）

效果说明

• ✅ 弹窗整体高度固定，不会因为树展开收起而变化
• ✅ 部门树有固定高度和垂直滚动条
• ✅ 长文本使用省略号显示，避免布局错乱
• ✅ 响应式设计保持正常

测试验证

• ✅ 树展开收起时弹窗高度保持不变
• ✅ 部门树显示垂直滚动条
• ✅ 长文本正确显示省略号
• ✅ 响应式布局正常

---

2025-01-27 18:30:00 - 调整审核对话框左侧部门树高度

变更内容

在学生信息审核对话框(web/src/views/stuMsgAudit/auditDialog.vue)中调整左侧部门树的高度设置，使其充满整个左侧面板。

具体修改

1. 左侧面板容器调整：

   • 为.left-panel添加height: 100%属性
   • 为卡片容器设置display: flex; flex-direction: column布局

2. 卡片内容区域调整：

   • 新增.left-panel .el-card :deep(.el-card__body)样式
   • 设置flex布局和间距：flex: 1; display: flex; flex-direction: column; gap: 10px

3. 部门树高度调整：

   • 将原来的固定高度height: 500px改为flex: 1
   • 确保部门树自动占据剩余空间

4. 响应式适配：

   • 小屏幕下保持相同的flex布局模式
   • 将.left-panel高度从auto改为固定400px

变更文件

• web/src/views/stuMsgAudit/auditDialog.vue（样式部分）

效果说明

• 部门树现在会自动占据左侧面板的全部可用高度
• 与搜索框保持适当间距（10px gap）
• 响应式设计在小屏幕下仍然有效
• 解决了原来部门树高度偏小、离底部有距离的问题

测试验证

• ✅ 部门树高度充满左侧面板
• ✅ 搜索框与部门树间距合适
• ✅ 滚动条正常工作
• ✅ 响应式布局正常

---

时间: 2025-01-27 17:42:15
操作人: cursor
功能模块: 学生信息审核界面 - 部门树查询

调整内容

1. 修改 web/src/views/stuMsgAudit/auditDialog.vue

修改目标: 将 getDeptTree 方法中的API请求方式从 api.XgDeptTreeSelect(101) 替换为使用 request 方式调用后端 XgStuColBatchClassController.getBatchAuthScope 方法

具体变更:

1. 替换API调用方式:

   • 修改前: const res = await api.XgDeptTreeSelect(101);
   • 修改后: const res = await request({ url: '/stuColBatchClass/stuColBatchClass/getBatchAuthScope/${props.batchInfo.id}', method: 'get' });

2. 新增批次ID检查:

   if (!props.batchInfo?.id) {
     console.warn('批次ID不存在，无法获取部门树');
     return;
   }
   

3. 优化数据处理逻辑:

   • 检查 res.code === 200 确保接口调用成功
   • 简化错误处理，统一设置空数组 deptOptions.value = []

4. 移除无效注释代码:

   • 删除了所有注释掉的 api.deptTreeSelect() 相关备用代码

技术说明:

• 调用的后端接口: /stuColBatchClass/stuColBatchClass/getBatchAuthScope/{batchId}
• 接口功能: 获取用户在指定批次的组织权限范围
• 返回数据格式: R<List<XgStudentManagerDeptTreeVo>>
• 参数来源: props.batchInfo.id (批次ID)

解决的问题:

1. ✅ 修复了 linter 错误: Cannot find name 'api'
2. ✅ 将部门树查询与具体批次关联，实现权限范围过滤
3. ✅ 统一了前端请求方式，使用标准的 request 工具

影响范围

前端:

• web/src/views/stuMsgAudit/auditDialog.vue - 部门树查询逻辑

后端:

• 依赖 XgStuColBatchClassController.getBatchAuthScope 方法
• 依赖 xgStudentManagerSourceService.getCurrentUserAuthDeptTree() 获取用户权限

测试建议

1. 功能测试:

   • 打开学生信息审核界面
   • 验证部门树是否正确加载
   • 确认部门树数据与批次权限范围一致

2. 权限测试:

   • 使用不同权限的用户登录
   • 验证部门树显示的数据符合用户权限范围

3. 异常测试:

   • 测试无效批次ID的处理
   • 测试网络异常的错误处理

备注

• 此修改使部门树查询更加精确，只显示用户在当前批次有权限的组织范围
• 提升了界面的安全性和用户体验
• 符合项目的权限管理规范