loan-pricing/ruoyi-ui/src/views/loanPricing/workflow/detail.vue

<template>
  <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>

    <!-- 两栏布局：左侧关键信息 + 右侧（流程详情+模型输出） -->
    <div v-if="!loading && workflowDetail" class="detail-layout">
      <!-- 左侧关键信息卡片 -->
      <div class="left-panel">
        <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="业务方流水号">{{ workflowDetail.serialNum }}</el-descriptions-item>
            <el-descriptions-item label="客户名称">{{ workflowDetail.custName }}</el-descriptions-item>
            <el-descriptions-item label="客户类型">{{ workflowDetail.custType }}</el-descriptions-item>
            <el-descriptions-item label="申请金额">{{ workflowDetail.applyAmt }} 元</el-descriptions-item>
            <el-descriptions-item label="基准利率">
              <span class="rate-value">{{ getBaseLoanRate() }}</span> %
            </el-descriptions-item>
            <el-descriptions-item label="浮动BP">
              <span class="total-bp-value">{{ getTotalBp() }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="测算利率">
              <span class="calculate-rate">{{ getCalculateRate() }}</span> %
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>

      <!-- 右侧面板：包含流程详情和模型输出 -->
      <div class="right-panel">
        <!-- 流程详情卡片 -->
        <el-card class="detail-card">
          <div slot="header" class="card-header">
            <span class="card-title">流程详情</span>
          </div>
          <el-tabs v-model="activeTab">
            <!-- 基本信息 -->
            <el-tab-pane label="基本信息" name="basic">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="机构编码">{{ workflowDetail.orgCode }}</el-descriptions-item>
                <el-descriptions-item label="运行模式">{{ workflowDetail.runType }}</el-descriptions-item>
                <el-descriptions-item label="客户内码">{{ workflowDetail.custIsn }}</el-descriptions-item>
                <el-descriptions-item label="证件类型">{{ workflowDetail.idType }}</el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>

            <!-- 业务信息 -->
            <el-tab-pane label="业务信息" name="business">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="贷款用途">{{ formatLoanPurpose(workflowDetail.loanPurpose) }}</el-descriptions-item>
                <el-descriptions-item label="是否有经营佐证">{{ formatBoolean(workflowDetail.bizProof) }}</el-descriptions-item>
                <el-descriptions-item label="抵质押类型">{{ workflowDetail.collType }}</el-descriptions-item>
                <el-descriptions-item label="抵质押物三方所有">{{ formatBoolean(workflowDetail.collThirdParty) }}</el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>

            <!-- 中间业务标识 -->
            <el-tab-pane label="中间业务标识" name="mid">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="个人快捷支付">{{ formatBoolean(workflowDetail.midPerQuickPay) }}</el-descriptions-item>
                <el-descriptions-item label="个人电费代扣">{{ formatBoolean(workflowDetail.midPerEleDdc) }}</el-descriptions-item>
                <el-descriptions-item label="企业电费代扣">{{ formatBoolean(workflowDetail.midEntEleDdc) }}</el-descriptions-item>
                <el-descriptions-item label="企业水费代扣">{{ formatBoolean(workflowDetail.midEntWaterDdc) }}</el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>

            <!-- 企业标识 -->
            <el-tab-pane label="企业标识" name="ent">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="净身企业">{{ formatBoolean(workflowDetail.isCleanEnt) }}</el-descriptions-item>
                <el-descriptions-item label="开立基本结算账户">{{ formatBoolean(workflowDetail.hasSettleAcct) }}</el-descriptions-item>
                <el-descriptions-item label="制造业企业">{{ formatBoolean(workflowDetail.isManufacturing) }}</el-descriptions-item>
                <el-descriptions-item label="省农担担保贷款">{{ formatBoolean(workflowDetail.isAgriGuar) }}</el-descriptions-item>
                <el-descriptions-item label="纳税信用等级A级">{{ formatBoolean(workflowDetail.isTaxA) }}</el-descriptions-item>
                <el-descriptions-item label="县级及以上农业龙头企业">{{ formatBoolean(workflowDetail.isAgriLeading) }}</el-descriptions-item>
                <el-descriptions-item label="普惠小微借款人">{{ formatBoolean(workflowDetail.isInclusiveFinance) }}</el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>

            <!-- 其他信息 -->
            <el-tab-pane label="其他信息" name="other">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="创建时间">{{ workflowDetail.createTime }}</el-descriptions-item>
                <el-descriptions-item label="创建者">{{ workflowDetail.createBy }}</el-descriptions-item>
                <el-descriptions-item label="更新时间">{{ workflowDetail.updateTime }}</el-descriptions-item>
                <el-descriptions-item label="更新者">{{ workflowDetail.updateBy }}</el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
          </el-tabs>
        </el-card>

        <!-- 模型输出卡片 -->
        <ModelOutputDisplay
          :cust-type="workflowDetail.custType"
          :retail-output="retailOutput"
          :corp-output="corpOutput"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getWorkflow } from "@/api/loanPricing/workflow"
import ModelOutputDisplay from "./components/ModelOutputDisplay.vue"

export default {
  name: "LoanPricingWorkflowDetail",
  components: {
    ModelOutputDisplay
  },
  data() {
    return {
      loading: true,
      workflowDetail: null,
      retailOutput: null,
      corpOutput: null,
      activeTab: 'basic'
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    /** 获取流程详情 */
    getDetail() {
      const serialNum = this.$route.params.serialNum
      if (!serialNum) {
        this.$modal.msgError("缺少业务方流水号参数")
        this.goBack()
        return
      }

      getWorkflow(serialNum).then(response => {
        // 适配新的 API 响应结构 LoanPricingWorkflowVO
        this.workflowDetail = response.data.loanPricingWorkflow
        this.retailOutput = response.data.modelRetailOutputFields
        this.corpOutput = response.data.modelCorpOutputFields
        this.loading = false
      }).catch(error => {
        this.$modal.msgError("获取流程详情失败：" + (error.message || "未知错误"))
        this.loading = false
      })
    },
    /** 返回上一页 */
    goBack() {
      this.$router.go(-1)
    },
    /** 格式化布尔值为中文 */
    formatBoolean(value) {
      if (value === 'true' || value === true) return '是'
      if (value === 'false' || value === false) return '否'
      return value || '-'
    },
    /** 格式化贷款用途 */
    formatLoanPurpose(value) {
      if (value === 'consumer') return '消费贷款'
      if (value === 'business') return '经营贷款'
      return value || '-'
    },
    /** 获取基准利率 */
    getBaseLoanRate() {
      if (this.workflowDetail.custType === '个人' && this.retailOutput) {
        return this.retailOutput.baseLoanRate || '-'
      } else if (this.workflowDetail.custType === '企业' && this.corpOutput) {
        return this.corpOutput.baseLoanRate || '-'
      }
      return '-'
    },
    /** 获取浮动BP */
    getTotalBp() {
      if (this.workflowDetail.custType === '个人' && this.retailOutput) {
        return this.retailOutput.totalBp || '-'
      } else if (this.workflowDetail.custType === '企业' && this.corpOutput) {
        return this.corpOutput.totalBp || '-'
      }
      return '-'
    },
    /** 获取测算利率 */
    getCalculateRate() {
      if (this.workflowDetail.custType === '个人' && this.retailOutput) {
        return this.retailOutput.calculateRate || '-'
      } else if (this.workflowDetail.custType === '企业' && this.corpOutput) {
        return this.corpOutput.calculateRate || '-'
      }
      return '-'
    }
  }
}
</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;
    }
  }

  // 两栏布局
  .detail-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;

    // 左侧关键信息卡片 (固定宽度)
    .left-panel {
      flex: 0 0 280px;
      max-width: 280px;

      .summary-card {
        ::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;
        }

        // 利率值样式
        .rate-value {
          color: #67c23a;
          font-weight: 500;
        }

        // TOTAL_BP 样式
        .total-bp-value {
          color: #e6a23c;
          font-weight: 600;
        }

        // 测算利率高亮样式
        .calculate-rate {
          color: #f56c6c;
          font-weight: 600;
          font-size: 16px;
        }
      }
    }

    // 右侧面板：包含流程详情和模型输出
    .right-panel {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 20px;

      .detail-card {
        ::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: 20px;
        }

        ::v-deep .el-tabs__header {
          margin-bottom: 20px;
        }
      }
    }
  }
}

// 响应式布局
@media screen and (max-width: 992px) {
  .workflow-detail-container {
    .detail-layout {
      // 切换为单列垂直布局
      flex-direction: column;

      .left-panel,
      .right-panel {
        flex: 1 1 100%;
        max-width: 100%;
      }
    }
  }
}
</style>