143 lines
3.7 KiB
Markdown
143 lines
3.7 KiB
Markdown
# 设计文档：流程详情页面
|
||
|
||
## 架构概述
|
||
|
||
将流程详情从对话框组件迁移到独立的页面组件，遵循若依框架现有的路由模式。
|
||
|
||
## 组件设计
|
||
|
||
### 详情页面组件 (detail.vue)
|
||
|
||
**位置**：`ruoyi-ui/src/views/loanPricing/workflow/detail.vue`
|
||
|
||
**页面结构**：
|
||
```
|
||
<template>
|
||
<div class="app-container">
|
||
<!-- 页面标题和操作栏 -->
|
||
<el-page-header @back="goBack" :content="pageTitle" />
|
||
|
||
<!-- 详情内容卡片 -->
|
||
<el-card class="mt-20">
|
||
<el-descriptions :column="2" border>
|
||
<!-- 基本信息 -->
|
||
<!-- 业务信息 -->
|
||
<!-- 业务标识 -->
|
||
<!-- 抵质押信息 -->
|
||
<!-- 其他信息 -->
|
||
</el-descriptions>
|
||
</el-card>
|
||
|
||
<!-- 返回按钮 -->
|
||
<el-row class="mt-20">
|
||
<el-col :span="24">
|
||
<el-button @click="goBack">返回</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
**数据获取**：
|
||
- 通过 `$route.params.serialNum` 获取业务方流水号
|
||
- 在 `created()` 钩子中调用 API 获取详情数据
|
||
- 处理加载状态和错误状态
|
||
|
||
**导航逻辑**：
|
||
- 返回按钮：`this.$router.go(-1)` 或跳转到列表页
|
||
- 面包屑导航：高亮"流程列表"菜单项
|
||
|
||
### 路由配置
|
||
|
||
**位置**：`ruoyi-ui/src/router/index.js` - `dynamicRoutes` 数组
|
||
|
||
**配置模式**：参考现有的 `/system/user-auth/role/:userId` 路由
|
||
|
||
```javascript
|
||
{
|
||
path: '/loanPricing/workflow-detail',
|
||
component: Layout,
|
||
hidden: true,
|
||
permissions: ['loanPricing:workflow:query'],
|
||
children: [
|
||
{
|
||
path: ':serialNum',
|
||
component: () => import('@/views/loanPricing/workflow/detail'),
|
||
name: 'LoanPricingWorkflowDetail',
|
||
meta: { title: '流程详情', activeMenu: '/loanPricing/workflow' }
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
**路由参数说明**：
|
||
- `:serialNum`：业务方流水号，用于 API 调用
|
||
- `activeMenu`：保持列表页菜单高亮
|
||
- `permissions`：复用现有权限 `loanPricing:workflow:query`
|
||
|
||
### 列表页修改
|
||
|
||
**修改位置**：`ruoyi-ui/src/views/loanPricing/workflow/index.vue`
|
||
|
||
**变更内容**：
|
||
1. 移除 `openDetail` 状态变量
|
||
2. 移除 `handleView()` 方法中的弹窗逻辑
|
||
3. 修改"查看"按钮的点击事件，从 `@click="handleView(scope.row)"` 改为路由跳转
|
||
|
||
**新的 `handleView()` 方法**：
|
||
```javascript
|
||
handleView(row) {
|
||
this.$router.push({
|
||
name: 'LoanPricingWorkflowDetail',
|
||
params: { serialNum: row.serialNum }
|
||
})
|
||
}
|
||
```
|
||
|
||
**移除内容**：
|
||
- 详情对话框模板（`<el-dialog title="利率定价流程详情"...>`）
|
||
- `detail` 数据对象
|
||
- `openDetail` 状态
|
||
|
||
## UI/UX 设计
|
||
|
||
### 详情页面布局
|
||
|
||
1. **页面标题**：使用 `el-page-header` 组件，显示"流程详情"标题和返回按钮
|
||
2. **内容区域**：使用 `el-card` + `el-descriptions` 展示详情信息，保持与弹窗相同的两列布局
|
||
3. **底部操作**：返回按钮（也可以考虑移除，因为有页面标题的返回按钮）
|
||
|
||
### 响应式设计
|
||
|
||
- 移动端：`el-descriptions` 自动调整为单列
|
||
- 内容区域添加适当的内边距和外边距
|
||
|
||
### 加载状态
|
||
|
||
- 显示 loading 遮罩层，直到数据加载完成
|
||
- 处理 API 错误，显示错误提示并返回列表页
|
||
|
||
## 技术约束
|
||
|
||
1. **框架版本**：Vue Router 3.4.9
|
||
2. **路由模式**：History 模式（去掉 URL 中的 #）
|
||
3. **权限控制**：通过 `permissions` 字段控制路由访问
|
||
4. **组件懒加载**：使用 `() => import()` 动态导入
|
||
|
||
## 测试策略
|
||
|
||
### 单元测试
|
||
- 路由跳转逻辑
|
||
- 参数解析
|
||
- API 调用
|
||
|
||
### 集成测试
|
||
- 从列表页跳转到详情页
|
||
- 详情页返回到列表页
|
||
- 权限控制（无权限用户无法访问）
|
||
|
||
### UI 测试
|
||
- 详情信息正确显示
|
||
- 面包屑导航正确高亮
|
||
- 返回按钮正常工作
|