# 设计文档：流程详情页面

## 架构概述

将流程详情从对话框组件迁移到独立的页面组件，遵循若依框架现有的路由模式。

## 组件设计

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