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-item label="执行利率" :class="'execute-rate-item'">
              <div class="execute-rate-input-wrapper">
                <el-input
                  v-model="executeRateInput"
                  class="execute-rate-input"
                  placeholder="请输入执行利率"
                >
                  <template slot="append">%</template>
                </el-input>
                <el-button
                  type="primary"
                  size="small"
                  @click="handleSetExecuteRate"
                >
                  确定
                </el-button>
              </div>
            </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"
        />

        <!-- 议价池卡片 -->
        <BargainingPoolDisplay
          :branch-pool="bargainingPool && bargainingPool.branchPool"
          :sub-branch-pool="bargainingPool && bargainingPool.subBranchPool"
          :private-domain-pool="bargainingPool && bargainingPool.privateDomainPool"
          :excess-profit-share="bargainingPool && bargainingPool.excessProfitShare"
        />
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "LoanPricingWorkflowDetail",
  components: {
    ModelOutputDisplay,
    BargainingPoolDisplay
  },
  data() {
    return {
      loading: true,
      workflowDetail: null,
      retailOutput: null,
      corpOutput: null,
      bargainingPool: null,
      activeTab: 'basic',
      executeRateInput: ''
    }
  },
  watch: {
    'workflowDetail.executeRate': {
      handler(newVal) {
        this.executeRateInput = newVal || ''
      },
      immediate: true
    }
  },
  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.bargainingPool = response.data.bargainingPool
        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 '-'
    },
    /** 设定执行利率 */
    handleSetExecuteRate() {
      // 验证输入
      const value = this.executeRateInput
      if (value === null || value === undefined || value === '') {
        this.$modal.msgError("请输入执行利率")
        return
      }

      // 验证是否为有效数字
      const numValue = parseFloat(value)
      if (isNaN(numValue)) {
        this.$modal.msgError("请输入有效的数字")
        return
      }
      if (numValue < 0 || numValue > 100) {
        this.$modal.msgError("执行利率必须在 0 到 100 之间")
        return
      }

      // 调用 API
      setExecuteRate(this.workflowDetail.serialNum, value.toString()).then(() => {
        this.$modal.msgSuccess("执行利率设定成功")
        // 重新获取详情数据
        this.getDetail()
      }).catch(error => {
        this.$modal.msgError("设定失败：" + (error.msg || error.message || "未知错误"))
      })
    }
  }
}
</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;
        }

        // 执行利率输入区域
        .execute-rate-input-wrapper {
          display: flex;
          flex-direction: column;
          gap: 8px;
          width: 100%;

          .execute-rate-input {
            width: 100%;
          }
        }

        // 利率值样式
        .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>