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