wkc/loan-pricing

Fork 0

Files

wkc 39f687881a 抽离组件添加下拉框

2026-01-20 23:46:44 +08:00

3.7 KiB

Raw Blame History

设计文档：流程详情页面

架构概述

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

组件设计

详情页面组件 (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 路由

{
  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

变更内容：

移除 openDetail 状态变量
移除 handleView() 方法中的弹窗逻辑
修改"查看"按钮的点击事件，从 @click="handleView(scope.row)" 改为路由跳转

新的 handleView() 方法：

handleView(row) {
  this.$router.push({
    name: 'LoanPricingWorkflowDetail',
    params: { serialNum: row.serialNum }
  })
}

移除内容：

详情对话框模板（<el-dialog title="利率定价流程详情"...>）
detail 数据对象
openDetail 状态

UI/UX 设计

详情页面布局

页面标题：使用 el-page-header 组件，显示"流程详情"标题和返回按钮
内容区域：使用 el-card + el-descriptions 展示详情信息，保持与弹窗相同的两列布局
底部操作：返回按钮（也可以考虑移除，因为有页面标题的返回按钮）

响应式设计

移动端：el-descriptions 自动调整为单列
内容区域添加适当的内边距和外边距

加载状态

显示 loading 遮罩层，直到数据加载完成
处理 API 错误，显示错误提示并返回列表页

技术约束

框架版本：Vue Router 3.4.9
路由模式：History 模式（去掉 URL 中的 #）
权限控制：通过 permissions 字段控制路由访问
组件懒加载：使用 () => import() 动态导入

测试策略

单元测试

路由跳转逻辑
参数解析
API 调用

集成测试

从列表页跳转到详情页
详情页返回到列表页
权限控制（无权限用户无法访问）

UI 测试

详情信息正确显示
面包屑导航正确高亮
返回按钮正常工作

3.7 KiB Raw Blame History Unescape Escape