cykj/hzdyjs

0 Fork 0

Files

T

zlwu 50ecada4d4 提交

2025-07-28 01:26:18 +08:00

6.5 KiB

Raw Blame History

代码调整记录 - 学生信息审核对话框增加驳回按钮

调整时间: 2025-01-27 17:35:00
调整人员: cursor
调整类型: 功能增强

调整概述

在学生信息审核对话框(stuMsgDialog.vue)中，在确定按钮后新增了驳回按钮，为审核人员提供驳回学生信息的功能。

具体调整内容

1. 前端界面调整

文件: web/src/views/stuMsgAudit/stuMsgDialog.vue

1.1 增加驳回按钮

位置: 对话框footer部分，确定按钮后
样式: danger类型的红色按钮
文本: "驳回"
加载状态: 与确定按钮共享loading状态

1.2 按钮布局调整

<!-- 调整前 -->
<el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
<el-button @click="handleClose">取 消</el-button>

<!-- 调整后 -->
<el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
<el-button type="danger" @click="handleReject" :loading="loading">驳 回</el-button>
<el-button @click="handleClose">取 消</el-button>

2. 驳回功能逻辑

2.1 新增 handleReject 方法

功能: 处理学生信息驳回操作
确认机制: 弹出确认对话框，防止误操作
数据提交: 调用后端API /studentMsgBatch/studentMsgBatch/rejectStudentMsg

参数内容:

{
  batchId: props.batchInfo?.batchId || props.batchInfo?.id,
  userId: props.batchInfo?.userId,
  remark: '信息审核不通过，请重新填写'
}

2.2 错误处理机制

用户取消: 静默处理，不显示错误信息
网络错误: 显示具体错误信息或默认提示
成功驳回: 显示成功消息并关闭对话框

2.3 交互流程

点击驳回按钮
弹出确认对话框："确定要驳回这条学生信息吗？"
用户确认后显示loading状态
调用后端API处理驳回
成功后显示成功消息并关闭对话框
触发confirm事件通知父组件刷新数据

技术实现要点

1. 用户体验优化

使用红色danger按钮明确标识驳回操作的危险性
添加确认对话框防止误操作
与确定按钮共享loading状态，确保操作互斥

2. 代码复用

复用现有的loading状态管理
复用现有的错误处理机制
复用现有的对话框关闭逻辑

3. 数据流管理

通过emit触发confirm事件通知父组件
传递操作结果数据供父组件处理
保持与现有确定操作的一致性

测试建议

1. 功能测试

点击驳回按钮能正常弹出驳回原因输入框
输入框显示默认驳回原因："信息审核不通过，请重新填写"
用户可以修改默认的驳回原因
确认驳回后能正常调用后端API并传递用户输入的原因
驳回成功后能正常关闭对话框
驳回成功后父组件能正常刷新数据

2. 输入验证测试

驳回原因为空时显示验证错误："驳回原因不能为空"
驳回原因超过200字符时显示验证错误
验证错误时不能提交，必须修正后才能继续
只输入空格时的验证处理

3. 异常测试

用户取消驳回操作的处理
网络异常时的错误提示
后端返回错误时的处理

4. 界面测试

驳回按钮的位置和样式正确
loading状态显示正常
驳回原因输入框弹窗样式和文本正确
输入框为多行文本框（textarea）类型
弹窗标题显示为"驳回学生信息"
确认按钮文本显示为"确定驳回"

影响范围

直接影响

web/src/views/stuMsgAudit/stuMsgDialog.vue - 增加驳回按钮和处理逻辑

间接影响

需要后端提供对应的驳回API接口
父组件可能需要处理驳回操作的回调

备注

当前驳回备注为固定文本："信息审核不通过，请重新填写"
后续可考虑支持自定义驳回理由
驳回按钮与确定按钮共享loading状态，确保操作互斥
按钮顺序：确定 → 驳回 → 取消，符合用户操作习惯

优化更新记录

🔄 2025-01-27 17:45:00 - 驳回原因输入框优化

优化内容

在驳回功能基础上，将简单的确认弹窗升级为可填写驳回原因的输入框弹窗。

具体实现

弹窗类型变更：
- 从 proxy.$confirm 更改为 proxy.$prompt
- 支持多行文本输入 (inputType: 'textarea')
默认值设置：
- 默认驳回原因："信息审核不通过，请重新填写"
- 用户可直接使用或修改该默认值

输入验证机制：

inputValidator: (value: string) => {
  if (!value || value.trim() === '') {
    return '驳回原因不能为空';
  }
  if (value.trim().length > 200) {
    return '驳回原因不能超过200个字符';
  }
  return true;
}

界面优化：
- 弹窗标题："驳回学生信息"
- 提示文本："请填写驳回原因："
- 按钮文本："确定驳回" / "取消"
- 占位符："请输入驳回原因"

用户体验提升

✅ 支持自定义驳回原因，提高审核质量
✅ 默认值减少输入工作量
✅ 输入验证确保数据有效性
✅ 多行文本框支持详细说明

🔧 2025-01-27 18:00:00 - 修复 proxy.$prompt 方法不存在问题

问题描述

在Vue 3 + Element Plus环境中，proxy.$prompt 方法不存在，导致点击驳回按钮时报错：proxy.$prompt is not a function

解决方案

添加正确的导入：

import { ElMessageBox } from 'element-plus/es/components/message-box/index';

替换方法调用：
- 从 proxy.$prompt 更改为 ElMessageBox.prompt
- 保持所有参数和配置不变

优化错误处理：

// 优化取消操作的错误处理
if (error === 'cancel' || error === 'close') {
  return; // 用户取消操作
}

修复结果

✅ 驳回按钮点击正常，弹出输入框
✅ 输入验证功能正常工作
✅ 取消操作正确处理
✅ 驳回流程完整可用

后续优化建议

自定义驳回理由: 点击驳回时弹出输入框让用户填写具体的驳回理由 ✅ 已完成
权限控制: 根据用户角色显示或隐藏驳回按钮
操作日志: 记录详细的驳回操作日志
消息通知: 驳回后向学生发送消息通知
驳回原因模板: 提供常用驳回原因的快捷选择

6.5 KiB Raw Blame History Unescape Escape