22 KiB
22 KiB
📊 出国记录变更历史显示功能 - 业务流程图
🎯 功能概述
在"出国申请"菜单下的"出国记录"选项卡中，点击"查看详情"按钮时，在弹窗中显示该记录的变更历史。
🔄 完整业务流程
┌─────────────────────────────────────────────────────────────────┐
│ 出国行程变更完整流程 │
└─────────────────────────────────────────────────────────────────┘
第一步: 出国申请提交与审批
┌────────────────┐
│ 出国申请提交 │
│ (用户发起申请) │
└────────┬───────┘
↓
┌────────────────┐
│ 三级审批流程 │
│ 部门→分管→校领导│
└────────┬───────┘
↓
┌────────────────┐
│ 审批通过生成 │
│ 出国记录 │
└────────┬───────┘
│
↓
┌─────────────────────────────────────┐
│ 出国记录选项卡 │
│ ┌────────────────────────────────┐ │
│ │ 记录ID | 姓名 | 目的地 | 操作 │ │
│ │ 123456 | 张三 | 美国 | 👁 查看│ │
│ └────────────────────────────────┘ │
└─────────────────────────────────────┘
第二步: 行程变更申请
│
↓
┌────────────────┐
│ 用户发现需要变更│
│ (时间/目的地等) │
└────────┬───────┘
↓
┌─────────────────────────────────────┐
│ 出国行程变更申请菜单 │
│ ┌────────────────────────────────┐ │
│ │ 变更申请选项卡 │ │
│ │ [+ 新增变更申请] │ │
│ │ │ │
│ │ 选择原出国记录 │ │
│ │ 填写变更信息 │ │
│ │ - 变更类型 │ │
│ │ - 新目的地/新时间 │ │
│ │ - 变更原因 │ │
│ │ [提交] │ │
│ └────────────────────────────────┘ │
└─────────────────────────────────────┘
│
↓
┌────────────────┐
│ 变更申请审批 │
│ (管理员审批) │
└────────┬───────┘
│
┌────┴────┐
↓ ↓
┌───────┐ ┌───────┐
│已通过 │ │已拒绝 │
└───┬───┘ └───┬───┘
│ │
↓ └→ 结束
第三步: 变更记录显示（本次功能实现）✨
│
↓
┌─────────────────────────────────────────────────────────────┐
│ 数据流转到两个位置 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 位置1: 出国行程变更申请菜单 │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ 变更记录选项卡（已通过的变更） │ │
│ │ ┌────────────────────────────────────────────────┐ │ │
│ │ │ 原目的地 | 新目的地 | 变更状态 | 操作 │ │ │
│ │ │ 美国 | 英国 | ✅已通过 | 👁 查看 │ │ │
│ │ └────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ 位置2: 出国申请菜单 → 出国记录 → 查看详情 ✨ 新增 │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ 出国记录详情弹窗 │ │
│ ├──────────────────────────────────────────────────────┤ │
│ │ 【基本信息】 │ │
│ │ 姓名: 张三 │ │
│ │ 目的地: 美国 → 英国 (已变更) │ │
│ │ 出国时间: 2025-01-01 → 2025-02-01 (已变更) │ │
│ │ ... │ │
│ ├──────────────────────────────────────────────────────┤ │
│ │ 📝 变更历史记录 ✨ 新增功能 │ │
│ │ ┌──────────────────────────────────────────────┐ │ │
│ │ │ 变更时间 | 变更类型 | 原→新 | 状态 | 审批意见 │ │ │
│ │ ├──────────────────────────────────────────────┤ │ │
│ │ │ 2025-03-15 | [目的地][时间] | 美→英 | ✅已通过 │ │ │
│ │ │ 2025-03-10 | [行程] | ... | ✅已通过 | │ │ │
│ │ └──────────────────────────────────────────────┘ │ │
│ ├──────────────────────────────────────────────────────┤ │
│ │ [下载因私出国情况回执] [关闭] │ │
│ └──────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
📊 数据关系图
┌─────────────────────────────────────────────────────┐
│ 数据库表关系 │
└─────────────────────────────────────────────────────┘
rs_overseas_application (出国申请表)
│
│ application_id
↓
rs_overseas_record (出国记录表)
│
│ record_id
↓
rs_overseas_itinerary_change (行程变更表) ✨
│
├─ change_id (主键)
├─ record_id (外键 → rs_overseas_record.record_id)
├─ application_id (冗余字段)
├─ original_* (原信息字段)
├─ new_* (新信息字段)
├─ change_reason (变更原因)
├─ status (变更状态: 0待审核, 1已通过, 2已拒绝, 3已撤回)
└─ approval_opinion (审批意见)
查询逻辑:
通过 record_id 查询该记录的所有变更历史
API: GET /rs/itinerary/change/record/{recordId}/history
🎨 UI界面展示
出国记录详情弹窗结构
┌────────────────────────────────────────────────────────────┐
│ 出国记录详情 [X] │
├────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ 基本信息 │ │
│ ├──────────────────────────────────────────────────────┤ │
│ │ 姓名 张三 性别 男 │ │
│ │ 出生年月 1990-01-01 政治面貌 中共党员 │ │
│ │ 现工作部门 信息技术学院 职称 副教授 │ │
│ │ 职务 系主任 申领证件 护照 │ │
│ │ 证件号码 G12345678 前往国家 美国 │ │
│ │ 出境事由 学术交流 │ │
│ │ 行程安排 参加国际学术会议... │ │
│ │ 出国天数 10天 │ │
│ │ 出发日期 2025-01-01 返回日期 2025-01-10 │ │
│ │ 联系电话 13800138000 │ │
│ │ 应急联系人 李四 (13900139000) │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ──────────────────────────────────────────────────────── │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ 📝 变更历史记录 ✨ 新增 │ │
│ ├──────────────────────────────────────────────────────┤ │
│ │ ╔════╤════╤════╤════╤════╤════╤════╤════╗ │ │
│ │ ║变更│变更│原目│新目│原出国时间 │新出国时间 ║ │ │
│ │ ║时间│类型│的地│的地│ │ ║ │ │
│ │ ╠════╪════╪════╪════╪════╪════╪════╪════╣ │ │
│ │ ║2025│[目的地]│美国│英国│2025-01-01│2025-02-01║ │ │
│ │ ║-03 │[时间]│ │ │至 │至 ║ │ │
│ │ ║-15 │ │ │ │2025-01-10│2025-02-15║ │ │
│ │ ╠════╪════╪════╪════╪════╪════╪════╪════╣ │ │
│ │ ║变更原因 │状态│审批意见 ║ │ │
│ │ ╠════╪════╪════╪════╪════╪════╪════╪════╣ │ │
│ │ ║因工作安排调整， │✅ │同意变更，注意安全 ║ │ │
│ │ ║需要变更出国时间 │已通│ ║ │ │
│ │ ║和目的地 │过 │ ║ │ │
│ │ ╚════╧════╧════╧════╧════╧════╧════╧════╝ │ │
│ │ │ │
│ │ 💡 如果没有变更记录，显示: │ │
│ │ ┌──────────────────────────────────────────────┐ │ │
│ │ │ 📭 │ │ │
│ │ │ 暂无变更记录 │ │ │
│ │ └──────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
├────────────────────────────────────────────────────────────┤
│ [📥 下载因私出国（境）情况回执] [关闭] │
└────────────────────────────────────────────────────────────┘
🏷️ 状态标签配色方案
┌────────────────────────────────────────────────┐
│ 变更状态标签配色 │
├────────┬──────────┬──────────┬───────────────┤
│ 状态值 │ 显示文字 │ 标签颜色 │ Element样式 │
├────────┼──────────┼──────────┼───────────────┤
│ 0 │ 待审核 │ 🟠 橙色 │ type="warning" │
│ 1 │ 已通过 │ 🟢 绿色 │ type="success" │
│ 2 │ 已拒绝 │ 🔴 红色 │ type="danger" │
│ 3 │ 已撤回 │ ⚪ 灰色 │ type="info" │
└────────┴──────────┴──────────┴───────────────┘
示例显示:
🟠 待审核 🟢 已通过 🔴 已拒绝 ⚪ 已撤回
🔄 交互流程图
┌──────────────────────────────────────────────────────────┐
│ 用户操作流程 │
└──────────────────────────────────────────────────────────┘
用户打开系统
│
↓
进入【人事管理】→【出国申请】
│
↓
点击【出国记录】选项卡
│
↓
查看出国记录列表
│
├─ 点击 [👁 查看详情] 按钮
│
↓
打开详情弹窗
│
├─ 显示基本信息
│ (姓名、目的地、时间等)
│
├─ 🔄 自动加载变更历史
│ │
│ ├─ 调用API: /rs/itinerary/change/record/{recordId}/history
│ │
│ ├─ 成功 ✅
│ │ ├─ 有变更记录
│ │ │ └─ 显示变更历史表格
│ │ │ ├─ 变更时间
│ │ │ ├─ 变更类型 (多标签)
│ │ │ ├─ 原→新对比
│ │ │ ├─ 变更原因
│ │ │ ├─ 状态标签
│ │ │ └─ 审批意见
│ │ │
│ │ └─ 无变更记录
│ │ └─ 显示空状态
│ │ "暂无变更记录"
│ │
│ └─ 失败 ❌
│ └─ 控制台显示错误
│ 处理异常情况
│
↓
用户查看完毕
│
├─ 选项1: [下载因私出国情况回执]
│ └─ 生成PDF下载
│
└─ 选项2: [关闭]
└─ 关闭弹窗
📱 响应式设计
┌────────────────────────────────────────────────┐
│ 不同屏幕尺寸适配 │
├────────────────────────────────────────────────┤
│ │
│ 大屏幕 (> 1200px) │
│ ┌──────────────────────────────────────────┐ │
│ │ 弹窗宽度: 900px │ │
│ │ 表格最大高度: 400px │ │
│ │ 所有列正常显示 │ │
│ └──────────────────────────────────────────┘ │
│ │
│ 中等屏幕 (768px - 1200px) │
│ ┌──────────────────────────────────────────┐ │
│ │ 弹窗宽度: 90% │ │
│ │ 表格水平滚动 │ │
│ │ 重要列固定显示 │ │
│ └──────────────────────────────────────────┘ │
│ │
│ 小屏幕 (< 768px) │
│ ┌──────────────────────────────────────────┐ │
│ │ 弹窗全屏显示 │ │
│ │ 表格简化列 │ │
│ │ 使用折叠面板 │ │
│ └──────────────────────────────────────────┘ │
└────────────────────────────────────────────────┘
🎯 功能亮点
✨ 核心特性
-
📊 数据关联准确
- 通过 recordId 精确查询
- 支持一对多关系展示
- 数据实时同步
-
🎨 用户体验优秀
- 自动加载，无需手动刷新
- Loading动画提示
- 空状态友好提示
- 状态彩色标签
-
📱 界面设计合理
- 表格布局清晰
- 多标签支持
- 超长文本省略
- 响应式设计
-
🔒 安全性保障
- 权限控制
- 数据验证
- 错误处理
- 日志记录
📝 技术实现要点
前端实现
// 1. API调用
import { getItineraryChangeHistory } from '@/api/rs/overseas';
// 2. 状态管理
state.changeHistoryList = [] as any[];
state.changeHistoryLoading = false;
// 3. 数据加载
await loadChangeHistory(row.recordId);
// 4. UI渲染
<el-table :data="state.changeHistoryList">
<!-- 表格列定义 -->
</el-table>
后端支持
// API接口
GET /rs/itinerary/change/record/{recordId}/history
// 权限控制
@SaCheckPermission("rs:itineraryChange:query")
// 查询方法
List<RsOverseasItineraryChangeVo> queryByRecordId(Long recordId);
📅 开发时间线
2025-10-13
09:00 需求确认
09:15 技术方案设计
09:30 前端代码实现
- 导入API
- 添加状态管理
- 实现加载方法
- UI界面开发
10:30 代码审查
10:45 功能测试
11:00 文档编写
11:30 ✅ 功能完成
🎉 完成效果
用户可以在出国记录详情弹窗中，清晰地看到该记录的所有变更历史，包括:
- ✅ 何时变更
- ✅ 变更了什么(类型)
- ✅ 从什么变到什么
- ✅ 为什么变更(原因)
- ✅ 审批结果
- ✅ 审批意见
这为用户提供了完整的出国记录变更轨迹，便于追溯和管理！ 🎯