feat: 新增质保书模板功能，优化标签样式与钢卷信息展示

klp-ui/src/views/mes/qc/certificate/book.vue

@@ -207,7 +207,8 @@
           :visible="true"
           :preview="true"
           :certificate="previewData" 
-          :items="previewItems" 
+          :items="previewItems"
+          :template-type="selectedTemplateType"
         />
       </div>
       <div slot="footer" class="dialog-footer">
@@ -222,8 +223,27 @@
       v-show="false"
       ref="hiddenPrintComponent"
       :certificate="printCertificateData" 
-      :items="printItemsData" 
+      :items="printItemsData"
+      :template-type="selectedTemplateType"
     />
+
+    <!-- 模板选择对话框 -->
+    <el-dialog title="选择质保书模板" :visible.sync="templateDialogVisible" width="500px" append-to-body>
+      <div class="template-selection">
+        <el-radio-group v-model="selectedTemplateType" class="template-radio-group">
+          <el-radio v-for="option in templateOptions" :key="option.value" :label="option.value" class="template-radio">
+            <div class="template-option">
+              <i class="el-icon-document"></i>
+              <span>{{ option.label }}</span>
+            </div>
+          </el-radio>
+        </el-radio-group>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="confirmTemplate">确 定</el-button>
+        <el-button @click="templateDialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -231,6 +251,7 @@
 import { listCertificate, getCertificate, delCertificate, addCertificate, updateCertificate } from "@/api/mes/qc/certificate";
 import { listCertificateItem } from "@/api/mes/qc/certificateItem";
 import CertificatePrintPreview from "./components/CertificatePrintPreview.vue";
+import { templateOptions } from "./components/templates";
 import { print as printPdf, downloadPdf } from "./lib/printUtils";
 
 export default {
@@ -240,6 +261,7 @@ export default {
   },
   data() {
     return {
+      templateOptions,
       buttonLoading: false,
       loading: true,
       ids: [],
@@ -258,6 +280,10 @@ export default {
       printComponentVisible: false,
       printCertificateData: {},
       printItemsData: [],
+      templateDialogVisible: false,
+      selectedTemplateType: 'chromium',
+      templateActionType: 'print',
+      templateDialogResolve: null,
       queryParams: {
         pageNum: 1,
         pageSize: 10,
@@ -449,6 +475,10 @@ export default {
     },
     /** 预览按钮操作 */
     async handlePreview(row) {
+      this.templateActionType = 'preview';
+      const confirmed = await this.showTemplateDialog();
+      if (!confirmed) return;
+      
       const certificateId = row.certificateId;
       this.loading = true;
       try {
@@ -468,6 +498,10 @@ export default {
     },
     /** 打印按钮操作 */
     async handlePrint(row) {
+      this.templateActionType = 'print';
+      const confirmed = await this.showTemplateDialog();
+      if (!confirmed) return;
+      
       const certificateId = row.certificateId;
       await this.preparePrintComponent(certificateId);
       await this.$nextTick();
@@ -517,6 +551,19 @@ export default {
       } finally {
         this.loading = false;
       }
+    },
+    showTemplateDialog() {
+      return new Promise((resolve) => {
+        this.templateDialogResolve = resolve;
+        this.templateDialogVisible = true;
+      });
+    },
+    confirmTemplate() {
+      this.templateDialogVisible = false;
+      if (this.templateDialogResolve) {
+        this.templateDialogResolve(true);
+        this.templateDialogResolve = null;
+      }
     }
   }
 };
@@ -538,4 +585,46 @@ export default {
   color: #1f79b9;
   font-weight: 500;
 }
+
+.template-selection {
+  padding: 20px;
+}
+
+.template-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.template-radio {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 15px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.template-radio:hover {
+  border-color: #409eff;
+  background-color: #ecf5ff;
+}
+
+.template-radio.is-checked {
+  border-color: #409eff;
+  background-color: #ecf5ff;
+}
+
+.template-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+}
+
+.template-option i {
+  font-size: 20px;
+  color: #409eff;
+}
 </style>