抽离组件添加下拉框

2026-01-20 23:46:44 +08:00
parent f2448ff97f
commit 39f687881a
12 changed files with 1100 additions and 326 deletions
--- a/openspec/changes/change-view-workflow-to-page/design.md
+++ b/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 测试
+- 详情信息正确显示
+- 面包屑导航正确高亮
+- 返回按钮正常工作
--- a/openspec/changes/change-view-workflow-to-page/proposal.md
+++ b/openspec/changes/change-view-workflow-to-page/proposal.md
@@ -0,0 +1,67 @@
+# 提案：将流程详情查看功能从弹窗改为独立页面
+
+## 概述
+
+将流程列表中的"查看流程"按钮功能从弹窗展示改为跳转到单独的页面展示。
+
+## 动机
+
+当前流程详情通过对话框（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. 测试验证
--- a/openspec/changes/change-view-workflow-to-page/specs/loan-pricing-workflow-ui/spec.md
+++ b/openspec/changes/change-view-workflow-to-page/specs/loan-pricing-workflow-ui/spec.md
@@ -0,0 +1,29 @@
+# loan-pricing-workflow-ui 规格变更
+
+此规格定义了利率定价流程管理的前端用户界面需求。
+
+## MODIFIED Requirements
+
+### Requirement: 流程详情查看
+
+系统 SHALL 提供流程详情查看功能，以独立页面的形式展示完整的流程信息。
+
+#### Scenario: 查看流程详情
+- **WHEN** 用户在流程列表页面且具有 `loanPricing:workflow:query` 权限，点击列表中某条记录的"查看"按钮
+- **THEN** 系统跳转至独立的流程详情页面，路径为 `/loanPricing/workflow-detail/{serialNum}`，展示完整的流程信息（基本信息：业务方流水号、机构编码、客户内码、客户名称、证件类型；业务信息：客户类型、担保方式、申请金额、贷款利率、贷款用途；业务标识：中间业务标识、企业标识；抵质押信息：抵质押类型、是否三方所有；其他信息：创建时间、创建者、更新时间、更新者）
+
+#### Scenario: 详情页面导航
+- **WHEN** 用户在流程详情页面
+- **THEN** 系统显示页面标题"流程详情"、返回按钮，面包屑导航高亮"利率定价管理 > 流程列表"，点击返回按钮可返回流程列表页面
+
+#### Scenario: 详情页面路由配置
+- **WHEN** 系统初始化加载路由配置
+- **THEN** 系统在动态路由中注册详情页路由，组件路径为 `@/views/loanPricing/workflow/detail`，路由参数 `serialNum` 用于标识具体流程，访问权限为 `loanPricing:workflow:query`
+
+#### Scenario: URL 直接访问详情页
+- **WHEN** 用户直接在浏览器地址栏输入详情页 URL（如 `/loanPricing/workflow-detail/ABC123`）
+- **THEN** 系统加载详情页面组件，从路由参数中获取 `serialNum`，调用 API 获取对应的流程详情数据并展示
+
+#### Scenario: 详情页面数据加载
+- **WHEN** 用户访问流程详情页面，路由参数包含有效的 `serialNum`
+- **THEN** 系统在页面 created 钩子中调用 `GET /loanPricing/workflow/{serialNum}` 接口获取详情数据，显示 loading 状态，数据加载完成后隐藏 loading 并展示详情信息
--- a/openspec/changes/change-view-workflow-to-page/tasks.md
+++ b/openspec/changes/change-view-workflow-to-page/tasks.md
@@ -0,0 +1,57 @@
+# 任务清单：将流程详情从弹窗改为独立页面
+
+## 前端任务
+
+### 1. 创建详情页面组件
+- [x] 创建 `ruoyi-ui/src/views/loanPricing/workflow/detail.vue`
+- [x] 实现页面模板（el-page-header + el-card + el-descriptions）
+- [x] 实现数据获取逻辑（从 route.params 获取 serialNum）
+- [x] 实现 loading 状态和错误处理
+- [x] 实现返回逻辑（router.go(-1) 或跳转列表页）
+
+### 2. 配置动态路由
+- [x] 在 `ruoyi-ui/src/router/index.js` 的 `dynamicRoutes` 中添加详情页路由
+- [x] 配置路由参数 `:serialNum`
+- [x] 配置权限 `loanPricing:workflow:query`
+- [x] 配置 `activeMenu: '/loanPricing/workflow'` 保持菜单高亮
+
+### 3. 修改列表页组件
+- [x] 修改 `index.vue` 中的 `handleView()` 方法，改为路由跳转
+- [x] 移除 `openDetail` 状态变量
+- [x] 移除 `detail` 数据对象
+- [x] 移除详情对话框模板（`<el-dialog>`）
+- [x] 移除 API 导入中的 `getWorkflow`（如果详情页单独导入）
+
+## 验证任务
+
+### 4. 功能测试
+- [ ] 测试从列表页点击"查看"按钮跳转到详情页
+- [ ] 测试详情页正确显示流程信息
+- [ ] 测试详情页返回按钮正常工作
+- [ ] 测试面包屑导航正确高亮"流程列表"
+- [ ] 测试无权限用户无法访问详情页（403 或跳转登录）
+- [ ] 测试访问无效的 serialNum（显示错误提示）
+
+### 5. UI 测试
+- [ ] 测试详情信息完整显示（所有字段）
+- [ ] 测试长字段（如业务方流水号）正确显示
+- [ ] 测试布尔值字段正确转换为"是/否"
+- [ ] 测试移动端响应式布局（单列显示）
+
+### 6. 回归测试
+- [ ] 确认流程列表页面功能正常（查询、筛选、分页）
+- [ ] 确认新增流程功能正常
+- [ ] 确认其他菜单页面不受影响
+
+## 依赖关系
+
+- 任务 1（创建详情页面）和任务 2（配置路由）可以并行进行
+- 任务 3（修改列表页）依赖任务 2 完成（确保路由存在）
+- 所有验证任务（4-6）依赖任务 1-3 完成
+
+## 估算
+
+- 任务 1：创建详情页面组件（核心任务）- 已完成
+- 任务 2：配置动态路由（简单任务）- 已完成
+- 任务 3：修改列表页组件（简单任务）- 已完成
+- 任务 4-6：测试验证（重要任务）- 待用户进行手动测试