流程详情页新增打印功能

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

@@ -3,25 +3,39 @@
     <!-- 页面头部：标题和返回按钮 -->
     <div class="page-header">
       <h2 class="page-title">流程详情</h2>
-      <el-button icon="el-icon-back" size="small" @click="goBack">返回</el-button>
+      <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 === '个人'"
+      <personal-workflow-detail
-      :detail-data="workflowDetail"
+        v-if="!loading && workflowDetail && workflowDetail.custType === '个人'"
-      :retail-output="retailOutput"
+        :detail-data="workflowDetail"
-      :bargaining-pool="bargainingPool"
+        :retail-output="retailOutput"
-      @refresh="getDetail"
+        :bargaining-pool="bargainingPool"
-    />
+        @refresh="getDetail"
+      />
 
-    <corporate-workflow-detail
+      <corporate-workflow-detail
-      v-if="!loading && workflowDetail && workflowDetail.custType === '企业'"
+        v-if="!loading && workflowDetail && workflowDetail.custType === '企业'"
-      :detail-data="workflowDetail"
+        :detail-data="workflowDetail"
-      :corp-output="corpOutput"
+        :corp-output="corpOutput"
-      :bargaining-pool="bargainingPool"
+        :bargaining-pool="bargainingPool"
-      @refresh="getDetail"
+        @refresh="getDetail"
-    />
+      />
+    </div>
   </div>
 </template>
 
@@ -72,6 +86,37 @@ export default {
     /** 返回上一页 */
     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() || '流程详情'
     }
   }
 }
@@ -92,6 +137,96 @@ export default {
       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>