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>
      <div class="page-actions">
        <el-button
          class="workflow-print-button"
          icon="el-icon-printer"
          size="small"
          type="primary"
          :disabled="loading || !workflowDetail"
          @click="handlePrint"
        >
          打印
        </el-button>
        <el-button icon="el-icon-back" size="small" @click="goBack">返回</el-button>
      </div>
    </div>

    <div class="workflow-print-area">
      <!-- 根据客户类型渲染对应的详情组件 -->
      <personal-workflow-detail
        v-if="!loading && workflowDetail && workflowDetail.custType === '个人'"
        :detail-data="workflowDetail"
        :retail-output="retailOutput"
        :bargaining-pool="bargainingPool"
        @refresh="getDetail"
      />

      <corporate-workflow-detail
        v-if="!loading && workflowDetail && workflowDetail.custType === '企业'"
        :detail-data="workflowDetail"
        :corp-output="corpOutput"
        :bargaining-pool="bargainingPool"
        @refresh="getDetail"
      />
    </div>
  </div>
</template>

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

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

      getWorkflow(serialNum).then(response => {
        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)
    },
    /** 打印流程详情 */
    handlePrint() {
      this.$nextTick(() => {
        const originalTitle = document.title
        document.title = this.buildPrintFileName()
        window.print()
        document.title = originalTitle
      })
    },
    /** 生成打印文件名 */
    buildPrintFileName() {
      const custName = this.sanitizePrintFileName(this.workflowDetail?.custName || '流程详情')
      return `${custName}_${this.formatPrintTimestamp(new Date())}`
    },
    /** 格式化打印时间戳 */
    formatPrintTimestamp(date) {
      const pad = value => String(value).padStart(2, '0')
      return [
        date.getFullYear(),
        pad(date.getMonth() + 1),
        pad(date.getDate())
      ].join('') + [
        pad(date.getHours()),
        pad(date.getMinutes()),
        pad(date.getSeconds())
      ].join('')
    },
    /** 清理文件名中的非法字符 */
    sanitizePrintFileName(value) {
      return String(value).replace(/[\\/:*?"<>|]/g, '').trim() || '流程详情'
    }
  }
}
</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;
    }

    .page-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }
}
</style>

<style lang="scss">
@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  body {
    background: #fff !important;
  }

  .sidebar-container,
  .fixed-header,
  .navbar,
  .tags-view-container,
  .page-actions,
  .el-loading-mask,
  .execute-rate-input-wrapper .el-button {
    display: none !important;
  }

  .main-container,
  .app-main,
  .app-container,
  .workflow-detail-container,
  .workflow-print-area {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .workflow-detail-container .page-header {
    display: block !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }

  .workflow-detail-container .page-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #000 !important;
  }

  .personal-workflow-detail .detail-layout,
  .corporate-workflow-detail .detail-layout {
    display: block !important;
  }

  .personal-workflow-detail .left-panel,
  .corporate-workflow-detail .left-panel,
  .personal-workflow-detail .right-panel,
  .corporate-workflow-detail .right-panel {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }

  .el-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #dcdfe6 !important;
    margin-bottom: 12px !important;
  }

  .el-card__header {
    background: #f5f7fa !important;
  }

  .el-descriptions {
    page-break-inside: avoid;
  }

  .el-input__inner,
  .el-input-group__append {
    border-color: #dcdfe6 !important;
    color: #000 !important;
  }
}
</style>