生产工单->打印工单

package.json

@@ -53,6 +53,7 @@
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
     "nprogress": "0.2.0",
+    "qrcodejs2": "^0.0.2",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",

src/views/mes/pro/workorder/print/productOrderDetail.vue

@@ -4,7 +4,8 @@
       <div class="titles">生产单</div>
       <div class="titles GOM">GOM</div>
       <div v-if="pageHeader.arrangeCode" class="barcode">
-        <vue-barcode
+        <div id="qrCode" ref="qrCodeDiv"></div>
+        <!-- <vue-barcode
         :value="pageHeader.arrangeCode"
         margin-right="5"
         :display-value="pageHeader.arrangeCode"
@@ -22,7 +23,7 @@
         margin-bottom="10"
         text-align="right"
         font-size="13"
-        font-weight="600">不支持vue-barcode</vue-barcode>
+        font-weight="600">不支持vue-barcode</vue-barcode> -->
       </div>
       <div>
         产品类别：{{ pageHeader.itemTypeName }}
@@ -230,9 +231,9 @@
 
 <script>
 import dayjs from 'dayjs'
-import VueBarcode from 'vue-barcode'
+import QRCode from 'qrcodejs2';
 export default {
-  components: { VueBarcode },
+  // components: { VueBarcode },
   props: ['workOrderTable'],
   data() {
     return {
@@ -360,6 +361,22 @@ export default {
       // },
     }
   },
+  mounted() {
+    if (this.$refs.qrCodeDiv) {
+        this.$refs.qrCodeDiv.innerHTML = '';
+    }
+    if(this.pageHeader.arrangeCode) {
+      new QRCode(this.$refs.qrCodeDiv, {
+        text: this.pageHeader.arrangeCode, // 需要转换为二维码的内容
+        width: 70, //宽度
+        height: 70, //高度
+        colorDark: '#000000', //二维码方块颜色
+        colorLight: '#ffffff', //背景颜色
+        correctLevel: QRCode.CorrectLevel.Q, //容错率：L M Q H 依次递减
+      });
+    }
+    
+  },
   computed: {
     workOrderInfo (){
       return this.workOrderTable.body.workOrderInfo
@@ -423,8 +440,8 @@ export default {
   }
   .barcode{
     position: absolute;
-    top: 0;
-    right: -10px;
+    top: 10px;
+    right: -5px;
     width: 300px;
     height: 80px;
     display: flex;