From 4b1593d249889a21b60e13be5cada7a1b1c19b4e Mon Sep 17 00:00:00 2001
From: wkc <978997012@qq.com>
Date: Wed, 15 Apr 2026 15:52:21 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=B5=81=E7=A8=8B=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E6=A8=A1=E5=9E=8B=E8=BE=93=E5=87=BA=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E9=A1=BA=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...15-流程详情模型输出平铺展示前端实施记录.md |  21 +++
 .../components/ModelOutputDisplay.vue         | 156 +++++++++---------
 2 files changed, 97 insertions(+), 80 deletions(-)
 create mode 100644 doc/2026-04-15-流程详情模型输出平铺展示前端实施记录.md

diff --git a/doc/2026-04-15-流程详情模型输出平铺展示前端实施记录.md b/doc/2026-04-15-流程详情模型输出平铺展示前端实施记录.md
new file mode 100644
index 0000000..91a9ea7
--- /dev/null
+++ b/doc/2026-04-15-流程详情模型输出平铺展示前端实施记录.md
@@ -0,0 +1,21 @@
+# 流程详情模型输出平铺展示前端实施记录
+
+## 变更日期
+- 2026-04-15
+
+## 变更范围
+- 前端页面：`ruoyi-ui/src/views/loanPricing/workflow/components/ModelOutputDisplay.vue`
+
+## 实施内容
+- 将流程详情页“模型输出”区域的 `tab` 切换结构改为按分组顺序平铺展示。
+- 按页面最新要求调整分组顺序，当前展示顺序为“基本信息”在前，“测算结果”紧跟其后。
+- 保留个人客户、企业客户原有字段、分组顺序和格式化逻辑，不调整接口入参、出参和父组件传值。
+- 移除仅用于 tab 默认选中的本地状态与监听逻辑，简化组件展示职责。
+
+## 影响说明
+- 本次仅涉及前端展示层，不涉及后端接口、数据库脚本和业务计算逻辑。
+- 用户进入流程详情页后，可直接连续查看全部模型输出内容，无需逐个切换页签。
+
+## 验证计划
+- 使用项目既有 Node 环境执行前端生产构建，确认编译通过。
+- 本地打开流程详情页，检查个人客户与企业客户两类模型输出均按分组平铺展示。
diff --git a/ruoyi-ui/src/views/loanPricing/workflow/components/ModelOutputDisplay.vue b/ruoyi-ui/src/views/loanPricing/workflow/components/ModelOutputDisplay.vue
index 4aa649d..efb725b 100644
--- a/ruoyi-ui/src/views/loanPricing/workflow/components/ModelOutputDisplay.vue
+++ b/ruoyi-ui/src/views/loanPricing/workflow/components/ModelOutputDisplay.vue
@@ -3,11 +3,11 @@
     <div slot="header" class="card-header">
       <span class="card-title">模型输出</span>
     </div>
-    <el-tabs v-model="activeTab">
+    <div class="model-output-sections">
       <!-- 个人客户模型输出 -->
       <template v-if="custType === '个人' && retailOutput">
-        <!-- 基本信息 -->
-        <el-tab-pane label="基本信息" name="retail-basic">
+        <div class="model-section">
+          <h4 class="section-title">基本信息</h4>
           <el-descriptions :column="2" border size="small">
             <el-descriptions-item label="客户内码">{{ retailOutput.custIsn || '-' }}</el-descriptions-item>
             <el-descriptions-item label="客户名称">{{ retailOutput.custName || '-' }}</el-descriptions-item>
@@ -15,10 +15,23 @@
             <el-descriptions-item label="证件号码">{{ retailOutput.idNum || '-' }}</el-descriptions-item>
             <el-descriptions-item label="基准利率"><span class="rate-value">{{ retailOutput.baseLoanRate || '-' }}</span> %</el-descriptions-item>
           </el-descriptions>
-        </el-tab-pane>
+        </div>
 
-        <!-- 忠诚度分析 -->
-        <el-tab-pane label="忠诚度分析" name="retail-loyalty">
+        <div class="model-section">
+          <h4 class="section-title">测算结果</h4>
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item label="浮动BP"><span class="total-bp-value">{{ retailOutput.totalBp || '-' }}</span></el-descriptions-item>
+            <el-descriptions-item label="测算利率"><span class="calculate-rate">{{ retailOutput.calculateRate || '-' }}</span> %</el-descriptions-item>
+            <el-descriptions-item label="历史利率">{{ retailOutput.loanRateHistory || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="产品最低利率下限">{{ retailOutput.minRateProduct || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="平滑幅度">{{ retailOutput.smoothRange || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="最终测算利率"><span class="calculate-rate">{{ retailOutput.finalCalculateRate || '-' }}</span> %</el-descriptions-item>
+            <el-descriptions-item label="参考利率"><span class="calculate-rate">{{ retailOutput.referenceRate || '-' }}</span> %</el-descriptions-item>
+          </el-descriptions>
+        </div>
+
+        <div class="model-section">
+          <h4 class="section-title">忠诚度分析</h4>
           <el-descriptions :column="2" border size="small">
             <el-descriptions-item label="我行首贷客户">{{ formatBoolean(retailOutput.isFirstLoan) }}</el-descriptions-item>
             <el-descriptions-item label="用信天数">{{ retailOutput.faithDay || '-' }}</el-descriptions-item>
@@ -28,20 +41,20 @@
             <el-descriptions-item label="BP_年龄"><span class="bp-value">{{ retailOutput.bpAge || '-' }}</span></el-descriptions-item>
             <el-descriptions-item label="TOTAL_BP_忠诚度" :span="2"><span class="total-bp-value">{{ retailOutput.totalBpLoyalty || '-' }}</span></el-descriptions-item>
           </el-descriptions>
-        </el-tab-pane>
+        </div>
 
-        <!-- 贡献度分析 -->
-        <el-tab-pane label="贡献度分析" name="retail-contribution">
+        <div class="model-section">
+          <h4 class="section-title">贡献度分析</h4>
           <el-descriptions :column="2" border size="small">
             <el-descriptions-item label="存款年日均">{{ retailOutput.balanceAvg || '-' }}</el-descriptions-item>
             <el-descriptions-item label="贷款年日均">{{ retailOutput.loanAvg || '-' }}</el-descriptions-item>
             <el-descriptions-item label="派生率">{{ retailOutput.derivationRate || '-' }}</el-descriptions-item>
             <el-descriptions-item label="TOTAL_BP_贡献度"><span class="total-bp-value">{{ retailOutput.totalBpContribution || '-' }}</span></el-descriptions-item>
           </el-descriptions>
-        </el-tab-pane>
+        </div>
 
-        <!-- 关联度分析 -->
-        <el-tab-pane label="关联度分析" name="retail-relevance">
+        <div class="model-section">
+          <h4 class="section-title">关联度分析</h4>
           <el-descriptions :column="2" border size="small">
             <el-descriptions-item label="中间业务_个人_信用卡">{{ formatBoolean(retailOutput.midPerCard) }}</el-descriptions-item>
             <el-descriptions-item label="中间业务_个人_一码通">{{ formatBoolean(retailOutput.midPerPass) }}</el-descriptions-item>
@@ -58,10 +71,10 @@
             <el-descriptions-item label="BP_中间业务"><span class="bp-value">{{ retailOutput.bpMid || '-' }}</span></el-descriptions-item>
             <el-descriptions-item label="TOTAL_BP_关联度"><span class="total-bp-value">{{ retailOutput.totoalBpRelevance || '-' }}</span></el-descriptions-item>
           </el-descriptions>
-        </el-tab-pane>
+        </div>
 
-        <!-- 贷款特征 -->
-        <el-tab-pane label="贷款特征" name="retail-loan">
+        <div class="model-section">
+          <h4 class="section-title">贷款特征</h4>
           <el-descriptions :column="2" border size="small">
             <el-descriptions-item label="申请金额">{{ retailOutput.applyAmt || '-' }}</el-descriptions-item>
             <el-descriptions-item label="BP_贷款额度"><span class="bp-value">{{ retailOutput.bpLoanAmount || '-' }}</span></el-descriptions-item>
@@ -74,10 +87,10 @@
             <el-descriptions-item label="抵质押物三方所有">{{ formatBoolean(retailOutput.collThirdParty) }}</el-descriptions-item>
             <el-descriptions-item label="BP_抵押物"><span class="bp-value">{{ retailOutput.bpCollateral || '-' }}</span></el-descriptions-item>
           </el-descriptions>
-        </el-tab-pane>
+        </div>
 
-        <!-- 风险度分析 -->
-        <el-tab-pane label="风险度分析" name="retail-risk">
+        <div class="model-section">
+          <h4 class="section-title">风险度分析</h4>
           <el-descriptions :column="2" border size="small">
             <el-descriptions-item label="灰名单客户">{{ formatBoolean(retailOutput.greyCust) }}</el-descriptions-item>
             <el-descriptions-item label="本金逾期">{{ formatBoolean(retailOutput.prinOverdue) }}</el-descriptions-item>
@@ -86,26 +99,14 @@
             <el-descriptions-item label="BP_灰名单与逾期"><span class="bp-value">{{ retailOutput.bpGreyOverdue || '-' }}</span></el-descriptions-item>
             <el-descriptions-item label="TOTAL_BP_风险度"><span class="total-bp-value">{{ retailOutput.totoalBpRisk || '-' }}</span></el-descriptions-item>
           </el-descriptions>
-        </el-tab-pane>
+        </div>
 
-        <!-- 测算结果 -->
-        <el-tab-pane label="测算结果" name="retail-result">
-          <el-descriptions :column="2" border size="small">
-            <el-descriptions-item label="浮动BP"><span class="total-bp-value">{{ retailOutput.totalBp || '-' }}</span></el-descriptions-item>
-            <el-descriptions-item label="测算利率"><span class="calculate-rate">{{ retailOutput.calculateRate || '-' }}</span> %</el-descriptions-item>
-            <el-descriptions-item label="历史利率">{{ retailOutput.loanRateHistory || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="产品最低利率下限">{{ retailOutput.minRateProduct || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="平滑幅度">{{ retailOutput.smoothRange || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="最终测算利率"><span class="calculate-rate">{{ retailOutput.finalCalculateRate || '-' }}</span> %</el-descriptions-item>
-            <el-descriptions-item label="参考利率"><span class="calculate-rate">{{ retailOutput.referenceRate || '-' }}</span> %</el-descriptions-item>
-          </el-descriptions>
-        </el-tab-pane>
       </template>
 
       <!-- 企业客户模型输出 -->
       <template v-else-if="custType === '企业' && corpOutput">
-        <!-- 基本信息 -->
-        <el-tab-pane label="基本信息" name="corp-basic">
+        <div class="model-section">
+          <h4 class="section-title">基本信息</h4>
           <el-descriptions :column="2" border size="small">
             <el-descriptions-item label="客户内码">{{ corpOutput.custIsn || '-' }}</el-descriptions-item>
             <el-descriptions-item label="客户名称">{{ corpOutput.custName || '-' }}</el-descriptions-item>
@@ -113,10 +114,18 @@
             <el-descriptions-item label="证件号码">{{ corpOutput.idNum || '-' }}</el-descriptions-item>
             <el-descriptions-item label="基准利率"><span class="rate-value">{{ corpOutput.baseLoanRate || '-' }}</span> %</el-descriptions-item>
           </el-descriptions>
-        </el-tab-pane>
+        </div>
 
-        <!-- 忠诚度分析 -->
-        <el-tab-pane label="忠诚度分析" name="corp-loyalty">
+        <div class="model-section">
+          <h4 class="section-title">测算结果</h4>
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item label="浮动BP"><span class="total-bp-value">{{ corpOutput.totalBp || '-' }}</span></el-descriptions-item>
+            <el-descriptions-item label="测算利率"><span class="calculate-rate">{{ corpOutput.calculateRate || '-' }}</span> %</el-descriptions-item>
+          </el-descriptions>
+        </div>
+
+        <div class="model-section">
+          <h4 class="section-title">忠诚度分析</h4>
           <el-descriptions :column="2" border size="small">
             <el-descriptions-item label="我行首贷客户">{{ formatBoolean(corpOutput.isFirstLoan) }}</el-descriptions-item>
             <el-descriptions-item label="用信天数">{{ corpOutput.faithDay || '-' }}</el-descriptions-item>
@@ -124,20 +133,20 @@
             <el-descriptions-item label="BP_贷龄"><span class="bp-value">{{ corpOutput.bpAgeLoan || '-' }}</span></el-descriptions-item>
             <el-descriptions-item label="TOTAL_BP_忠诚度" :span="2"><span class="total-bp-value">{{ corpOutput.totalBpLoyalty || '-' }}</span></el-descriptions-item>
           </el-descriptions>
-        </el-tab-pane>
+        </div>
 
-        <!-- 贡献度分析 -->
-        <el-tab-pane label="贡献度分析" name="corp-contribution">
+        <div class="model-section">
+          <h4 class="section-title">贡献度分析</h4>
           <el-descriptions :column="2" border size="small">
             <el-descriptions-item label="存款年日均">{{ corpOutput.balanceAvg || '-' }}</el-descriptions-item>
             <el-descriptions-item label="贷款年日均">{{ corpOutput.loanAvg || '-' }}</el-descriptions-item>
             <el-descriptions-item label="派生率">{{ corpOutput.derivationRate || '-' }}</el-descriptions-item>
             <el-descriptions-item label="TOTAL_BP_贡献度"><span class="total-bp-value">{{ corpOutput.totalBpContribution || '-' }}</span></el-descriptions-item>
           </el-descriptions>
-        </el-tab-pane>
+        </div>
 
-        <!-- 关联度分析 -->
-        <el-tab-pane label="关联度分析" name="corp-relevance">
+        <div class="model-section">
+          <h4 class="section-title">关联度分析</h4>
           <el-descriptions :column="2" border size="small">
             <el-descriptions-item label="中间业务_企业_企业互联">{{ formatBoolean(corpOutput.midEntConnect) }}</el-descriptions-item>
             <el-descriptions-item label="中间业务_企业_有效价值客户">{{ formatBoolean(corpOutput.midEntEffect) }}</el-descriptions-item>
@@ -153,10 +162,10 @@
             <el-descriptions-item label="BP_代发工资"><span class="bp-value">{{ corpOutput.bpPayroll || '-' }}</span></el-descriptions-item>
             <el-descriptions-item label="TOTAL_BP_关联度"><span class="total-bp-value">{{ corpOutput.totoalBpRelevance || '-' }}</span></el-descriptions-item>
           </el-descriptions>
-        </el-tab-pane>
+        </div>
 
-        <!-- 企业类别 -->
-        <el-tab-pane label="企业类别" name="corp-category">
+        <div class="model-section">
+          <h4 class="section-title">企业类别</h4>
           <el-descriptions :column="2" border size="small">
             <el-descriptions-item label="净身企业">{{ formatBoolean(corpOutput.isCleanEnt) }}</el-descriptions-item>
             <el-descriptions-item label="开立基本结算账户">{{ formatBoolean(corpOutput.hasSettleAcct) }}</el-descriptions-item>
@@ -165,10 +174,10 @@
             <el-descriptions-item label="科技型企业">{{ formatBoolean(corpOutput.isTechEnt) }}</el-descriptions-item>
             <el-descriptions-item label="BP_企业客户类别"><span class="bp-value">{{ corpOutput.bpEntType || '-' }}</span></el-descriptions-item>
           </el-descriptions>
-        </el-tab-pane>
+        </div>
 
-        <!-- 贷款特征 -->
-        <el-tab-pane label="贷款特征" name="corp-loan">
+        <div class="model-section">
+          <h4 class="section-title">贷款特征</h4>
           <el-descriptions :column="2" border size="small">
             <el-descriptions-item label="贷款期限">{{ corpOutput.loanTerm || '-' }}</el-descriptions-item>
             <el-descriptions-item label="BP_贷款期限"><span class="bp-value">{{ corpOutput.bpLoanTerm || '-' }}</span></el-descriptions-item>
@@ -178,10 +187,10 @@
             <el-descriptions-item label="抵质押物三方所有">{{ formatBoolean(corpOutput.collThirdParty) }}</el-descriptions-item>
             <el-descriptions-item label="BP_抵押物"><span class="bp-value">{{ corpOutput.bpCollateral || '-' }}</span></el-descriptions-item>
           </el-descriptions>
-        </el-tab-pane>
+        </div>
 
-        <!-- 风险度分析 -->
-        <el-tab-pane label="风险度分析" name="corp-risk">
+        <div class="model-section">
+          <h4 class="section-title">风险度分析</h4>
           <el-descriptions :column="2" border size="small">
             <el-descriptions-item label="灰名单客户">{{ formatBoolean(corpOutput.greyCust) }}</el-descriptions-item>
             <el-descriptions-item label="本金逾期">{{ formatBoolean(corpOutput.prinOverdue) }}</el-descriptions-item>
@@ -190,17 +199,10 @@
             <el-descriptions-item label="BP_灰名单与逾期"><span class="bp-value">{{ corpOutput.bpGreyOverdue || '-' }}</span></el-descriptions-item>
             <el-descriptions-item label="TOTAL_BP_风险度"><span class="total-bp-value">{{ corpOutput.totoalBpRisk || '-' }}</span></el-descriptions-item>
           </el-descriptions>
-        </el-tab-pane>
+        </div>
 
-        <!-- 测算结果 -->
-        <el-tab-pane label="测算结果" name="corp-result">
-          <el-descriptions :column="2" border size="small">
-            <el-descriptions-item label="浮动BP"><span class="total-bp-value">{{ corpOutput.totalBp || '-' }}</span></el-descriptions-item>
-            <el-descriptions-item label="测算利率"><span class="calculate-rate">{{ corpOutput.calculateRate || '-' }}</span> %</el-descriptions-item>
-          </el-descriptions>
-        </el-tab-pane>
       </template>
-    </el-tabs>
+    </div>
   </el-card>
 </template>
 
@@ -221,24 +223,6 @@ export default {
       default: null
     }
   },
-  data() {
-    return {
-      activeTab: ''
-    }
-  },
-  watch: {
-    custType: {
-      immediate: true,
-      handler(val) {
-        // 根据客户类型设置默认 tab
-        if (val === '个人') {
-          this.activeTab = 'retail-basic'
-        } else if (val === '企业') {
-          this.activeTab = 'corp-basic'
-        }
-      }
-    }
-  },
   methods: {
     /** 格式化布尔值为中文 */
     formatBoolean(value) {
@@ -279,8 +263,20 @@ export default {
     padding: 20px;
   }
 
-  ::v-deep .el-tabs__header {
-    margin-bottom: 20px;
+  .model-output-sections {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .model-section {
+    .section-title {
+      margin: 0 0 12px;
+      font-size: 15px;
+      font-weight: 500;
+      color: #303133;
+      line-height: 1.4;
+    }
   }
 
   // BP 值样式