序列号打印

package.json

@@ -70,7 +70,8 @@
     "vue-print-nb": "^1.7.5",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "bwip-js": "4.5.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

src/views/mes/pro/qrcodeRecord/index.vue

@@ -313,7 +313,7 @@
     <div style="overflow: hidden;width: 0;height: 0;">
       <div id="tesla1Template">
         <div v-for="(item, index) in printData" :key="'tesla1' + index">
-          <tesla1 :templateData="item"></tesla1>
+          <tesla1 :templateData="item" :index="index"></tesla1>
         </div>
       </div>
     </div>

src/views/mes/pro/qrcodeRecord/template/tesla1.vue

@@ -6,8 +6,8 @@
         <div class="cdbh">Part Name:</div>
         <div class="cdbh1">{{templateData.specification}}</div>
       </div>
-      <div class="titles" style="">
-        <div id="qrCode" ref="qrCodeDiv"></div>
+      <div class="titles">
+        <canvas :id="'barcode' + index" style="width: 100%;height: 100%;"></canvas>
       </div>
       <div style="page-break-after:always"></div>
   </div>
@@ -17,31 +17,42 @@
 
 
 import dayjs from 'dayjs'
-import VueBarcode from 'vue-barcode'
-import QRCode from "qrcodejs2";
+import * as bwipjs from 'bwip-js'
+
 export default {
-  components: { VueBarcode },
-  props: ['templateData'],
+  props: ['templateData', 'index'],
   dicts: ['pro_requisition_type'],
   data() {
     return {
       date: dayjs().format('YYYY-MM-DD'),
+      // templateData: {itemCode: '', qrcode: '', specification: ''},
       mytable: {
   }
     }
   },
   mounted() {
-    if (this.$refs.qrCodeDiv) {
-      this.$refs.qrCodeDiv.innerHTML = '';
+    // if (this.$refs.qrCodeDiv) {
+    //   this.$refs.qrCodeDiv.innerHTML = '';
+    // }
+    // new QRCode(this.$refs.qrCodeDiv, {
+    //   text: "1234", // 需要转换为二维码的内容
+    //   width: 37, //宽度
+    //   height: 37, //高度
+    //   colorDark: '#000000', //二维码方块颜色
+    //   colorLight: '#ffffff', //背景颜色
+    //   correctLevel: QRCode.CorrectLevel.Q, //容错率：L M Q H 依次递减
+    // });
+    console.log('this.templateData.qrcode', this.templateData.qrcode)
+    let options = {
+        bcid: 'datamatrix',       // Barcode type
+        text: this.templateData.qrcode,    // Text to encode
+        scale: 3,               // 3x scaling factor
+        height: 4,
+        width: 4,              // Bar height, in millimeters
+        includetext: false,            // Show human-readable text
+        textxalign: 'center',        // Always good to set this
     }
-    new QRCode(this.$refs.qrCodeDiv, {
-      text: "1234", // 需要转换为二维码的内容
-      width: 37, //宽度
-      height: 37, //高度
-      colorDark: '#000000', //二维码方块颜色
-      colorLight: '#ffffff', //背景颜色
-      correctLevel: QRCode.CorrectLevel.Q, //容错率：L M Q H 依次递减
-    });
+    bwipjs.toCanvas('barcode' + this.index, options);
   },
   computed: {
   }
@@ -53,6 +64,7 @@ export default {
   font-family: "Arial narrow2";
   margin: 0;
   position: relative;
+  display: flex;
   width: 35.6mm;
   height: 12.7mm;
   padding: 2px 0 0 4px;
@@ -71,14 +83,17 @@ export default {
 }
 
 .cdbh{
-  height: 8px;
+  height: 6px;
 }
 .titles{
-  float: left;
   padding-top: 2px;
+  width: 37px;
+  height: 37px;
+  overflow: hidden;
 }
 .titles1{
-  float: left;
+  font-size: 6px;
+  line-height: 6px;
   width: 23mm;
 }