2.4 KiB
2.4 KiB
提案：将流程详情查看功能从弹窗改为独立页面
概述
将流程列表中的"查看流程"按钮功能从弹窗展示改为跳转到单独的页面展示。
动机
当前流程详情通过对话框（Dialog）展示，存在以下问题：
- 详情信息较多（20+字段），在弹窗中展示需要滚动，用户体验不佳
- 弹窗宽度固定（800px），长字段显示受限
- 无法通过 URL 直接分享或访问特定流程的详情页
- 不利于后续扩展（如添加编辑、审批等操作）
目标
- 创建独立的流程详情页面组件
- 修改列表页的"查看"按钮，从弹窗改为路由跳转
- 在动态路由中配置详情页路由
- 保持现有的 API 接口调用不变
影响范围
前端文件
- 修改：ruoyi-ui/src/views/loanPricing/workflow/index.vue - 移除详情对话框，修改查看按钮逻辑
- 新增：ruoyi-ui/src/views/loanPricing/workflow/detail.vue - 新的详情页面组件
- 修改：ruoyi-ui/src/router/index.js - 添加详情页动态路由
后端文件
- 无需修改，API 接口保持不变
相关规格
此变更将修改以下规格：
- loan-pricing-workflow-ui - 流程详情查看需求的实现方式变更
备选方案
方案 A：当前方案（独立页面）
- 优点：更好的用户体验，可扩展性强，支持 URL 分享
- 缺点：需要创建新组件和路由配置
方案 B：保留弹窗，优化展示
- 优点：改动较小
- 缺点：仍然受限于弹窗尺寸，用户体验改善有限
方案 C：抽屉（Drawer）式侧边栏
- 优点：利用垂直空间，可以展示更多信息
- 缺点：在移动端体验不佳
选择方案 A，因为它提供了最佳的用户体验和扩展性。
风险与缓解
| 风险 | 影响 | 缓解措施 |
|---|---|---|
| 路由配置错误导致 404 | 高 | 严格遵循现有路由模式，进行充分测试 |
| 详情页返回逻辑问题 | 中 | 添加面包屑导航和返回按钮 |
| 样式不一致 | 低 | 复用现有组件和样式 |
时间表
此变更预计在批准后立即实施，包含以下步骤：
- 创建详情页面组件
- 修改列表页查看逻辑
- 配置路由
- 测试验证