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 测试
|
|||
|
|
- 详情信息正确显示
|
|||
|
|
- 面包屑导航正确高亮
|
|||
|
|
- 返回按钮正常工作
|