标识卡打印修改

src/views/plan/workorder/index.vue

@@ -1987,8 +1987,10 @@ export default {
 
     /**打印标识卡弹出框**/
     printIdCard() {
-      this.$refs.printID.printDialogVisible = true;
       this.$refs.printID.init("20021221552");
+      this.$refs.printID.showPrint();
+      this.$refs.printID.printDialogVisible = true;
+      
     },
     //标识卡选择确认
     printIdFunc(obj) {

src/views/plan/workorder/printID.vue

@@ -1,15 +1,9 @@
 <template>
-	<div class="app-container">
-		<!-- 打印预览弹出层 -->
-		<el-dialog title="" :visible.sync="printDialogVisible" width="990px">
-      <div>
-        <el-input v-model="idCardsNum" placeholder="请输入板次数量" style="width:100px"/>
-        <el-button type="primary" icon="el-icon-check" circle @click="showPrint()"/>
-      </div>
-			<div id="printFrom" class="my-print-box">
-       <div v-for="(item, index) in printData.idCardList" :key="index">
-          <el-form>
-            <!-- 表头-工单信息 -->
+  <div class="app-container">
+    <el-dialog title="" :visible.sync="printDialogVisible" width="990px">
+      <div id="printFrom" class="my-print-box">
+        <div v-for="(item, index) in printData.idCardList" :key="index">
+          <el-form  class="print-card">
             <el-row>
               <el-col :span="7">
                 <img src="@/assets/logo/lanjv.png" class="report-logo" />
@@ -17,34 +11,34 @@
               <el-col :span="10" class="center-text">
                 <span>产品标识卡</span>
               </el-col>
-              
-            </el-row>
-            <el-row class="my-print-head">
-              <el-col><el-divider/></el-col>
             </el-row>
-
+            <div class="custom-divider"></div>
+            
             <el-row class="my-print-foot">
               <el-col :offset="1" :span="10">
-                <div>产品名称:{{ printData.factory }}</div><br/>
-                <div>批次号:{{ printData.factory }}</div><br/>
-                <div>生产日期:{{ printData.factory }}</div><br/>
-                <div>板次:{{ printData.factory }}</div><br/>
-                <div>数量:{{ printData.factory }}</div>
+                <div>产品名称: {{ printData.factory }}</div><br />
+                <div>批次号: {{ printData.factory }}</div><br />
+                <div>生产日期: {{ printData.factory }}</div><br />
+                <div>板次: {{ printData.factory }}</div><br />
+                <div>数量: {{ printData.factory }}</div>
               </el-col>
-              <el-col :offset="1" :span="10"> 
-                <canvas ref="qrCanvas"></canvas>
+              <el-col :offset="1" :span="10">
+                <canvas :id="'qrcode-' + index" class="qrcode"></canvas>
               </el-col>
             </el-row>
           </el-form>
+          <div style="clear: both; margin-bottom: 30px;"></div>
+          <div v-if="(index + 1) % 2 === 0" class="print-page"></div>
         </div>
-			</div>
-			<span slot="footer" class="dialog-footer">
-				<el-button type="primary" @click="handlePrint(printData)">打 印</el-button>
-			</span>
-		</el-dialog>
-	</div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handlePrint(printData)">打 印</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
+
 <script>
 import {
   getIdCardList,
@@ -79,7 +73,8 @@ export default {
         ignore: ["no-print"],
         workCenter: "暂无数据",
         factory: null,
-        idCardList: []
+        idCardList: [],
+        //gridStyle:'border: 1px solid lightgray; margin-bottom: -1px;'
       },
       workorderCode: '',
       //工单重新渲染表格
@@ -92,6 +87,10 @@ export default {
     };
   },
   created() {
+  },
+  mounted() {
+   //this.showPrint();
+
   },
   methods: {
       init(workorderCode){
@@ -101,41 +100,33 @@ export default {
     // 打印预览-浏览器打印
     handlePrint(params) {
       printJS({
-        printable: params.printable, // 'printFrom', // 标签元素id
-        type: params.type || "html",
-        maxWidth: 1500, // 最大宽度
-        font_size: "", // 设置字体大小
-        header: params.header, // '表单',
-        targetStyles: ["*"],
-        style: "@page {margin:0 10mm};", // 可选-打印时去掉眉页眉尾
-        ignoreElements: params.ignore || [], // ['no-print']
-        properties: params.properties || null,
-      });
+      printable: params.printable,
+      type: params.type || 'html',
+      maxWidth: 1500,
+      font_size: "", // 设置字体大小
+      header: params.header, // '表单',
+      targetStyles: ['*'],
+      style: `
+        @page { margin: 30mm 10mm; }
+        .print-page { page-break-after: always; }
+      `,
+      ignoreElements: params.ignore || [],
+    });
     },
     // 打印预览-点击打印预览按钮
-    showPrint() {
-      // 清楚缓存
-      //this.printData.workCenter = "暂无数据";
-      getIdCardList(this.workorderCode,this.idCardNum).then((response) => {
-        debugger
-        //this.reset();
-        this.printData.idCardList = response.idCards;
-        // 使用 Vue 的 nextTick 来确保 DOM 已经更新
-        this.$nextTick(() => {
-
-          //for(var i=0;0<response.idCards.length;i++){
-            let qrCanvasIndex = "qrCanvas"+0;
-            const canvas = this.$refs.qrCanvas;
-            const options = {
-              width: 350,  // 设定二维码的宽度
-              height: 350  // 设定二维码的高度
-            };
-            QRCode.toCanvas(canvas,response.idCards[0], options, error => {
-              if (error) console.error(error);
-            });
-          //}
+   async showPrint() {
+      console.log('执行了打印预览');
+     let response = await getIdCardList(this.workorderCode,this.idCardNum);
+     this.printData.idCardList = response.idCards;
+     this.$nextTick(() => {
+      this.printData.idCardList.forEach((item, index) => {
+        const canvas = document.getElementById('qrcode-' + index);
+        QRCode.toCanvas(canvas, item, { width: 350,margin:1 }, function (error) {
+          if (error) console.error(error);
+          console.log('success!');
         });
       });
+    })
     }
   },
 };
@@ -150,6 +141,7 @@ export default {
   text-align: left;
   font-size: 63px;
   font-weight: 800;
+  color: black;
 }
 
 .report-logo {
@@ -178,4 +170,25 @@ export default {
 .my-print-box{
   width:100%
 }
+.custom-divider {
+    width: 100%;
+    height: 1px;
+    background-color: #a5a4a4 !important;
+    margin: 20px 0 !important;
+    -webkit-print-color-adjust: exact;
+  }
+
+.print-page {
+  page-break-after: always;
+}
+@media print {
+  .custom-divider {
+    width: 100%;
+    height: 1px;
+    background-color: #a5a4a4 !important;
+    margin: 20px 0 !important;
+    -webkit-print-color-adjust: exact;
+  }
+}
+
 </style>