refactor(售后工单页面): 全面优化页面UI与功能体验

1.  api层优化：新增驳回接口，优化提交接口过滤无用参数
2.  页面重构：统一页面布局为左右分栏拖拽面板，替换原有弹窗模式
3.  样式升级：采用类Word文档风格重构所有页面样式，新增中英双语标题
4.  功能新增：添加流程总览组件，新增PDF导出功能，新增驳回操作
5.  交互优化：调整卡片布局与间距，优化空状态提示，统一标签样式

klp-ui/src/views/wms/post/objection/index.vue

@@ -72,6 +72,8 @@
             <HeaderControlSection :complaintNo="currentRow.complaintNo" :flowStatus="currentRow.flowStatus"
               :meta="currentRow">
               <template #actions>
+                <!-- <el-button :loading="pdfLoading" size="mini" type="text" icon="el-icon-printer" @click="handlePrint"
+                  :disabled="pdfLoading" title="导出PDF">导出PDF</el-button> -->
                 <el-button v-if="currentRow.flowStatus === 1" size="mini" type="primary" plain
                   icon="el-icon-s-promotion" @click="handleOpinionDispatch">意见下发</el-button>
                 <el-button v-if="currentRow.flowStatus === 3" size="mini" type="warning" plain
@@ -90,6 +92,8 @@
 
             <el-divider />
 
+            <FlowOverviewSection :flowStatus="currentRow.flowStatus" />
+
             <CoilInfoSection :coilList="coilList" :loading="coilLoading" :editable="currentRow.flowStatus === 1"
               @refresh="loadCoilList(currentRow.acceptId)"
               @remove="handleRemoveCoil">
@@ -174,6 +178,8 @@ import { listComplaintAccept, getComplaintAccept, addComplaintAccept, updateComp
 import { listComplaintTask } from "@/api/flow/complaintTask";
 import { listAcceptCoilRel, addAcceptCoilRel, delAcceptCoilRel } from "@/api/flow/acceptCoilRel";
 import { listPlanExecuteRel } from "@/api/flow/planExecuteRel";
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
 import CoilSelector from "@/components/CoilSelector/index.vue";
 import CurrentCoilNo from "@/components/KLPService/Renderer/CurrentCoilNo.vue";
 import DragResizePanel from "@/components/DragResizePanel/index.vue";
@@ -184,18 +190,20 @@ import CoilInfoSection from "./components/CoilInfoSection.vue";
 import DepartmentOpinionSection from "./components/DepartmentOpinionSection.vue";
 import HandlingSchemeSection from "./components/HandlingSchemeSection.vue";
 import ExecutionFeedbackSection from "./components/ExecutionFeedbackSection.vue";
+import FlowOverviewSection from "./components/FlowOverviewSection.vue";
 
 export default {
   name: "AftermarketObjection",
   components: {
     CoilSelector, CurrentCoilNo, DragResizePanel,
     HeaderControlSection, BasicInfoSection, ContractInfoSection,
-    CoilInfoSection, DepartmentOpinionSection, HandlingSchemeSection, ExecutionFeedbackSection
+    CoilInfoSection, DepartmentOpinionSection, HandlingSchemeSection, ExecutionFeedbackSection, FlowOverviewSection
   },
   dicts: ['coil_quality_status'],
   data() {
     return {
       buttonLoading: false,
+      pdfLoading: false,
       loading: true,
       detailLoading: false,
       coilLoading: false,
@@ -395,6 +403,65 @@ export default {
         this.loadDetail(this.currentRow.acceptId);
       }
     },
+    async handlePrint() {
+      const element = this.$el.querySelector('.detail-content');
+      if (!element) return;
+
+      this.pdfLoading = true;
+
+      try {
+        // 临时隐藏操作按钮
+        element.classList.add('pdf-exporting');
+
+        const canvas = await html2canvas(element, {
+          scale: 2,
+          useCORS: true,
+          logging: false,
+          backgroundColor: '#ffffff'
+        });
+
+        // 恢复按钮
+        element.classList.remove('pdf-exporting');
+
+        const imgData = canvas.toDataURL('image/png');
+        const pdf = new jsPDF('p', 'mm', 'a4');
+        const pdfWidth = pdf.internal.pageSize.getWidth();
+        const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
+        const pageHeight = pdf.internal.pageSize.getHeight();
+
+        // 多页处理
+        if (pdfHeight <= pageHeight) {
+          pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
+        } else {
+          let posY = 0;
+          const ratio = pdfWidth / canvas.width;
+          const pageCanvasHeight = pageHeight / ratio;
+
+          while (posY < canvas.height) {
+            if (posY > 0) pdf.addPage();
+
+            const pieceCanvas = document.createElement('canvas');
+            pieceCanvas.width = canvas.width;
+            pieceCanvas.height = Math.min(pageCanvasHeight, canvas.height - posY);
+            const ctx = pieceCanvas.getContext('2d');
+            ctx.drawImage(canvas, 0, posY, canvas.width, pieceCanvas.height, 0, 0, canvas.width, pieceCanvas.height);
+
+            const pieceData = pieceCanvas.toDataURL('image/png');
+            pdf.addImage(pieceData, 'PNG', 0, 0, pdfWidth, pieceCanvas.height * ratio);
+            posY += pageCanvasHeight;
+          }
+        }
+
+        pdf.save(`${this.currentRow?.complaintNo || '售后单'}_处理记录.pdf`);
+        this.$modal.msgSuccess('PDF 导出成功');
+      } catch (err) {
+        console.error('PDF 导出失败:', err);
+        this.$modal.msgError('PDF 导出失败');
+        element.classList.remove('pdf-exporting');
+      } finally {
+        this.pdfLoading = false;
+      }
+    },
     handleSavePlan(planContent) {
       updateComplaintAccept({ acceptId: this.currentRow.acceptId, planContent }).then(() => {
         this.$modal.msgSuccess("处理方案保存成功");
@@ -581,11 +648,20 @@ export default {
   background: #f5f7fa;
 }
 
+/* ========== 右侧面板 — Word 文档风格 ========== */
 .right-panel {
   height: 100%;
   overflow-y: auto;
-  padding: 16px;
-  background: #fff;
+  padding: 12px 16px;
+  background: #faf8f5;   /* 暖白纸张底色 */
+}
+
+.right-panel .detail-content {
+  margin: 0 auto;
+  background: #ffffff;
+  padding: 28px 32px 36px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04);
+  min-height: 100%;
 }
 
 .empty-tip {
@@ -598,107 +674,155 @@ export default {
   gap: 8px;
 }
 
-.detail-content {
-  height: 100%;
-}
-
-.detail-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-
-.detail-header-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.detail-complaint-no {
-  font-size: 20px;
-  font-weight: 700;
-  color: #303133;
-  line-height: 1.2;
-}
-
-.detail-header-right {
-  flex-shrink: 0;
-}
-
-.detail-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  font-size: 12px;
-  color: #909399;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.detail-meta span {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.detail-meta i {
-  font-size: 13px;
-}
-
 .detail-section {
-  margin-bottom: 14px;
+  margin-bottom: 20px;
 }
 
 .detail-section-label {
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
-  color: #909399;
+  color: #8c8c8c;
   margin-bottom: 4px;
+  letter-spacing: 0.8px;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
 }
 
 .detail-section-text {
   font-size: 14px;
-  color: #303133;
-  line-height: 1.6;
+  color: #1a1a1a;
+  line-height: 1.8;
   word-break: break-all;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #eeeae4;
 }
 
+/* 文档级通用 section 标题 */
 .section-title {
+  font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
   width: 100%;
-  font-size: 14px;
-  font-weight: 600;
-  color: #303133;
-  margin: 16px 0 8px 0;
-  padding-left: 8px;
-  border-left: 3px solid #409eff;
-  white-space: nowrap;
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 22px 0 12px 0;
+  padding: 0 0 10px 0;
+  border-bottom: 1px solid #d4d0c8;
   display: flex;
   align-items: center;
+  gap: 10px;
+  letter-spacing: 0.3px;
 }
 
 .section-title:first-child {
   margin-top: 0;
 }
 
+.section-title .en-sub {
+  font-size: 11px;
+  font-weight: 400;
+  color: #8c8c8c;
+  letter-spacing: 0.5px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-style: italic;
+}
+
+.section-title i {
+  font-size: 16px;
+  color: #1a3c6e;
+}
+
 .empty-data {
-  color: #909399;
+  color: #8c8c8c;
   font-size: 13px;
   padding: 8px 0;
+  font-style: italic;
 }
 
 .plan-content {
-  padding: 8px;
-  background: #f5f7fa;
-  border-radius: 4px;
+  padding: 12px 16px;
+  background: #faf8f5;
+  border: 1px solid #e8e4de;
+  border-radius: 2px;
   font-size: 13px;
-  line-height: 1.6;
+  line-height: 1.8;
+  color: #1a1a1a;
 }
 
 .section-gap {
+  height: 16px;
+}
+
+/* 正式表格覆写 */
+.right-panel .el-table {
+  border: 1px solid #e8e4de !important;
+  border-radius: 2px !important;
+  font-size: 12px !important;
+}
+
+.right-panel .el-table thead th {
+  background-color: #2c3e50 !important;
+  color: #ffffff !important;
+  font-weight: 600 !important;
+  font-size: 11px !important;
+  letter-spacing: 0.5px !important;
+  border-bottom: none !important;
+  font-family: 'Georgia', 'Times New Roman', serif;
+}
+
+.right-panel .el-table thead th .cell {
+  color: #ffffff !important;
+}
+
+.right-panel .el-table__body tr:hover > td {
+  background-color: #f7f5f0 !important;
+}
+
+.right-panel .el-table--border td {
+  border-right: 1px solid #f0ece6 !important;
+}
+
+.right-panel .el-table--border th {
+  border-right: 1px solid #3a5166 !important;
+}
+
+.right-panel .el-table td {
+  padding: 6px 4px !important;
+  color: #3a3a3a !important;
+}
+
+.right-panel .el-divider--horizontal {
+  margin: 8px 0 4px;
+  background-color: #e0dcd6;
+}
+
+/* el-tag 文档风格微调 */
+.right-panel .el-tag {
+  border-radius: 2px;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  letter-spacing: 0.3px;
+}
+
+.right-panel .el-tag--mini {
+  padding: 0 6px;
+  line-height: 20px;
   height: 20px;
 }
+
+.right-panel .el-tag--small {
+  padding: 0 8px;
+}
+
+/* ===== PDF 导出时隐藏操作按钮 ===== */
+.detail-content.pdf-exporting .doc-header-right .el-button {
+  display: none !important;
+}
+
+.detail-content.pdf-exporting .el-button--text {
+  display: none !important;
+}
+
+.detail-content.pdf-exporting .el-table__fixed,
+.detail-content.pdf-exporting .el-table__fixed-right {
+  display: none !important;
+}
 </style>