wkc/loan-pricing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化信息展示

Browse Source
This commit is contained in:
wkc
2026-01-21 09:04:15 +08:00
parent 39f687881a
commit 3624198aa6
5 changed files with 215 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.claude/settings.local.json
View File

@@ -13,7 +13,8 @@
"Bash(cmd.exe:*)",
"Bash(powershell -Command:*)",
"Bash(openspec archive add-loan-pricing-create:*)",
"Bash(git add:*)"
"Bash(git add:*)",
"Bash(cd:*)"
],
"additionalDirectories": [
"d:\\利率定价\\loan-pricing-892\\loan-pricing-892-v2.0"

23
openspec/changes/improve-workflow-detail-layout/proposal.md Normal file
View File

@@ -0,0 +1,23 @@
# Change: 优化流程详情页面布局
## Why
当前流程详情页面 ([`ruoyi-ui/src/views/loanPricing/workflow/detail.vue`](../../ruoyi-ui/src/views/loanPricing/workflow/detail.vue)) 采用简单的标签页布局，所有信息平铺展示，缺乏信息层次感。用户需要在不同标签页之间切换才能查看关键信息，无法快速获取最重要的数据概览。页面视觉层次不够清晰，信息利用率不高。
## What Changes
- **页面布局重构**: 采用信息密集型两栏布局
- 左侧（约 30% 宽度）：展示关键信息摘要卡片（业务方流水号、客户名称、申请金额、贷款利率等核心字段）
- 右侧（约 70% 宽度）：保留现有标签页，展示完整的流程详细信息
- **页面头部简化**: 移除 `el-page-header`，使用简洁的页面标题，返回按钮移至页面右上角
- **样式优化**:
- 为左侧摘要卡片添加适当的阴影和圆角
- 优化卡片内部间距和字体大小
- 保持现有的简洁数据展示风格（不添加图标或额外的高亮效果）
- **响应式支持**: 在小屏幕设备上自动调整为单栏垂直布局
## Impact
- 受影响的规范: `loan-pricing-workflow-ui`
- 受影响的代码: [`ruoyi-ui/src/views/loanPricing/workflow/detail.vue`](../../ruoyi-ui/src/views/loanPricing/workflow/detail.vue)
- 破坏性变更: 无（仅改变 UI 布局，不影响功能和 API）

34
openspec/changes/improve-workflow-detail-layout/specs/loan-pricing-workflow-ui/spec.md Normal file
View File

@@ -0,0 +1,34 @@
## MODIFIED Requirements
### Requirement: 流程详情查看
系统 SHALL 提供流程详情查看功能，以独立页面形式展示完整的流程信息，采用信息密集型两栏布局。
#### Scenario: 查看流程详情
- **WHEN** 用户在流程列表页面且具有 `loanPricing:workflow:query` 权限，点击列表中某条记录的"查看"按钮
- **THEN** 系统导航至流程详情独立页面，展示两栏布局：
- **左侧摘要卡片**（约 30% 宽度）：显示核心信息
- 业务方流水号
- 客户名称
- 客户类型
- 申请金额
- 贷款利率
- 担保方式
- **右侧详情区域**（约 70% 宽度）：使用标签页组织完整信息
- 基本信息标签页：机构编码、运行模式、客户内码、证件类型
- 业务信息标签页：贷款用途、是否有经营佐证、抵质押类型、抵质押物三方所有
- 中间业务标识标签页：个人快捷支付、个人电费代扣、企业电费代扣、企业水费代扣
- 企业标识标签页：净身企业、开立基本结算账户、制造业企业、省农担担保贷款、纳税信用等级A级、县级及以上农业龙头企业、普惠小微借款人
- 其他信息标签页：创建时间、创建者、更新时间、更新者
#### Scenario: 页面头部和导航
- **WHEN** 用户访问流程详情页面
- **THEN** 系统显示简洁的页面标题区域，右上角放置返回按钮，移除原有的面包屑导航组件
#### Scenario: 响应式布局适配
- **WHEN** 用户在屏幕宽度小于 768px 的设备上访问流程详情页面
- **THEN** 系统自动调整为单栏垂直布局，左侧摘要卡片在上方，右侧详情标签页在下方
#### Scenario: 返回上一页
- **WHEN** 用户点击页面右上角的返回按钮
- **THEN** 系统返回至流程列表页面

19
openspec/changes/improve-workflow-detail-layout/tasks.md Normal file
View File

@@ -0,0 +1,19 @@
## 1. 实现页面布局重构
- [x] 1.1 创建左侧摘要卡片组件结构
- [x] 1.2 创建右侧标签页详情区域
- [x] 1.3 实现响应式布局（使用 `el-col` 的 `xs` 断点）
- [x] 1.4 调整页面头部（移除 `el-page-header`，添加返回按钮到右上角）
## 2. 样式优化
- [x] 2.1 添加卡片阴影和圆角样式
- [x] 2.2 优化间距和字体大小
- [x] 2.3 调整两栏布局的间距（`el-row` 的 `gutter` 属性）
## 3. 测试验证
- [x] 3.1 测试页面在不同屏幕尺寸下的显示效果
- [x] 3.2 验证所有数据字段正确显示
- [x] 3.3 确认返回按钮功能正常
- [x] 3.4 验证标签页切换功能正常

196
ruoyi-ui/src/views/loanPricing/workflow/detail.vue
View File

@@ -1,73 +1,88 @@
<template>
<div class="app-container" v-loading="loading">
<el-page-header @back="goBack" content="流程详情" />
<div class="app-container workflow-detail-container" v-loading="loading">
<!-- 页面头部：标题和返回按钮 -->
<div class="page-header">
<h2 class="page-title">流程详情</h2>
<el-button icon="el-icon-back" size="small" @click="goBack">返回</el-button>
</div>
<el-card class="mt-20" v-if="!loading && detail">
<el-tabs v-model="activeTab">
<!-- 基本信息 -->
<el-tab-pane label="基本信息" name="basic">
<el-descriptions :column="2" border>
<el-descriptions-item label="业务方流水号" :span="2">{{ detail.serialNum }}</el-descriptions-item>
<el-descriptions-item label="机构编码">{{ detail.orgCode }}</el-descriptions-item>
<el-descriptions-item label="运行模式">{{ detail.runType }}</el-descriptions-item>
<el-descriptions-item label="客户内码">{{ detail.custIsn }}</el-descriptions-item>
<!-- 两栏布局 -->
<el-row :gutter="20" v-if="!loading && detail">
<!-- 左侧摘要卡片（30%） -->
<el-col :xs="24" :sm="24" :md="8" :lg="7" :xl="6">
<el-card class="summary-card">
<div slot="header" class="card-header">
<span class="card-title">关键信息</span>
</div>
<el-descriptions :column="1" direction="vertical" border>
<el-descriptions-item label="业务方流水号">{{ detail.serialNum }}</el-descriptions-item>
<el-descriptions-item label="客户名称">{{ detail.custName }}</el-descriptions-item>
<el-descriptions-item label="证件类型" :span="2">{{ detail.idType }}</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<!-- 业务信息 -->
<el-tab-pane label="业务信息" name="business">
<el-descriptions :column="2" border>
<el-descriptions-item label="客户类型">{{ detail.custType }}</el-descriptions-item>
<el-descriptions-item label="担保方式">{{ detail.guarType }}</el-descriptions-item>
<el-descriptions-item label="申请金额">{{ detail.applyAmt }} 元</el-descriptions-item>
<el-descriptions-item label="贷款利率">{{ detail.loanRate }} %</el-descriptions-item>
<el-descriptions-item label="贷款用途">{{ detail.loanPurpose === 'consumer' ? '消费贷款' : detail.loanPurpose === 'business' ? '经营贷款' : detail.loanPurpose }}</el-descriptions-item>
<el-descriptions-item label="是否有经营佐证">{{ detail.bizProof === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="抵质押类型">{{ detail.collType }}</el-descriptions-item>
<el-descriptions-item label="抵质押物三方所有">{{ detail.collThirdParty === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="担保方式">{{ detail.guarType }}</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
</el-card>
</el-col>
<!-- 中间业务标识 -->
<el-tab-pane label="中间业务标识" name="mid">
<el-descriptions :column="2" border>
<el-descriptions-item label="个人快捷支付">{{ detail.midPerQuickPay === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="个人电费代扣">{{ detail.midPerEleDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="企业电费代扣">{{ detail.midEntEleDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="企业水费代扣">{{ detail.midEntWaterDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<!-- 右侧详情标签页（70%） -->
<el-col :xs="24" :sm="24" :md="16" :lg="17" :xl="18">
<el-card class="detail-card">
<el-tabs v-model="activeTab">
<!-- 基本信息 -->
<el-tab-pane label="基本信息" name="basic">
<el-descriptions :column="2" border>
<el-descriptions-item label="机构编码">{{ detail.orgCode }}</el-descriptions-item>
<el-descriptions-item label="运行模式">{{ detail.runType }}</el-descriptions-item>
<el-descriptions-item label="客户内码">{{ detail.custIsn }}</el-descriptions-item>
<el-descriptions-item label="证件类型">{{ detail.idType }}</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<!-- 企业标识 -->
<el-tab-pane label="企业标识" name="ent">
<el-descriptions :column="2" border>
<el-descriptions-item label="净身企业">{{ detail.isCleanEnt === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="开立基本结算账户">{{ detail.hasSettleAcct === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="制造业企业">{{ detail.isManufacturing === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="省农担担保贷款">{{ detail.isAgriGuar === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="纳税信用等级A级">{{ detail.isTaxA === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="县级及以上农业龙头企业">{{ detail.isAgriLeading === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="普惠小微借款人">{{ detail.isInclusiveFinance === 'true' ? '是' : '否' }}</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<!-- 业务信息 -->
<el-tab-pane label="业务信息" name="business">
<el-descriptions :column="2" border>
<el-descriptions-item label="贷款用途">{{ detail.loanPurpose === 'consumer' ? '消费贷款' : detail.loanPurpose === 'business' ? '经营贷款' : detail.loanPurpose }}</el-descriptions-item>
<el-descriptions-item label="是否有经营佐证">{{ detail.bizProof === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="抵质押类型">{{ detail.collType }}</el-descriptions-item>
<el-descriptions-item label="抵质押物三方所有">{{ detail.collThirdParty === 'true' ? '是' : '否' }}</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<!-- 其他信息 -->
<el-tab-pane label="其他信息" name="other">
<el-descriptions :column="2" border>
<el-descriptions-item label="创建时间">{{ detail.createTime }}</el-descriptions-item>
<el-descriptions-item label="创建者">{{ detail.createBy }}</el-descriptions-item>
<el-descriptions-item label="更新时间">{{ detail.updateTime }}</el-descriptions-item>
<el-descriptions-item label="更新者">{{ detail.updateBy }}</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
</el-tabs>
</el-card>
<!-- 中间业务标识 -->
<el-tab-pane label="中间业务标识" name="mid">
<el-descriptions :column="2" border>
<el-descriptions-item label="个人快捷支付">{{ detail.midPerQuickPay === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="个人电费代扣">{{ detail.midPerEleDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="企业电费代扣">{{ detail.midEntEleDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="企业水费代扣">{{ detail.midEntWaterDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<el-row :gutter="10" class="mt-20">
<el-col :span="24">
<el-button @click="goBack">返回</el-button>
<!-- 企业标识 -->
<el-tab-pane label="企业标识" name="ent">
<el-descriptions :column="2" border>
<el-descriptions-item label="净身企业">{{ detail.isCleanEnt === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="开立基本结算账户">{{ detail.hasSettleAcct === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="制造业企业">{{ detail.isManufacturing === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="省农担担保贷款">{{ detail.isAgriGuar === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="纳税信用等级A级">{{ detail.isTaxA === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="县级及以上农业龙头企业">{{ detail.isAgriLeading === 'true' ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="普惠小微借款人">{{ detail.isInclusiveFinance === 'true' ? '是' : '否' }}</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<!-- 其他信息 -->
<el-tab-pane label="其他信息" name="other">
<el-descriptions :column="2" border>
<el-descriptions-item label="创建时间">{{ detail.createTime }}</el-descriptions-item>
<el-descriptions-item label="创建者">{{ detail.createBy }}</el-descriptions-item>
<el-descriptions-item label="更新时间">{{ detail.updateTime }}</el-descriptions-item>
<el-descriptions-item label="更新者">{{ detail.updateBy }}</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
</div>
@@ -113,3 +128,66 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.workflow-detail-container {
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 0 4px;
.page-title {
margin: 0;
font-size: 20px;
font-weight: 500;
color: #303133;
}
}
.summary-card {
margin-bottom: 20px;
::v-deep .el-card__header {
padding: 16px 20px;
background-color: #fafafa;
border-bottom: 1px solid #ebeef5;
}
.card-header {
display: flex;
align-items: center;
.card-title {
font-size: 16px;
font-weight: 500;
color: #303133;
}
}
::v-deep .el-card__body {
padding: 16px;
}
}
.detail-card {
::v-deep .el-card__body {
padding: 20px;
}
::v-deep .el-tabs__header {
margin-bottom: 20px;
}
}
}
// 响应式：小屏幕下左侧卡片在顶部显示
@media screen and (max-width: 767px) {
.workflow-detail-container {
.summary-card {
margin-bottom: 20px;
}
}
}
</style>