抽离组件 添加下拉框

openspec/changes/change-view-workflow-to-page/design.md

@@ -0,0 +1,142 @@
+# 设计文档：流程详情页面
+
+## 架构概述
+
+将流程详情从对话框组件迁移到独立的页面组件，遵循若依框架现有的路由模式。
+
+## 组件设计
+
+### 详情页面组件 (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 测试
+- 详情信息正确显示
+- 面包屑导航正确高亮
+- 返回按钮正常工作