修改打印条码

src/views/produce/components/jobBooking/components/batchSemiProductJobBom.vue

@@ -667,6 +667,9 @@
         <el-button type="primary" @click="getLossParam">确 定</el-button>
       </span>
     </el-dialog>
+
+    <juRenPackOne ref="juRenPackOneRef" />
+    <juRenPack ref="juRenPackRef" />
   </div>
 </template>
 
@@ -680,10 +683,13 @@
   import { parameterGetByCode } from '@/api/system/dictionary-data';
   import { splitBatch } from '@/api/produce/feeding';
   import { juRenPrint, isJuRen } from '@/api/produce';
+  import juRenPackOne from '../../juRenPackOne.vue';
+  import juRenPack from '../../juRenPack.vue';
 
   export default {
     name: 'semiProductJobBom',
     mixins: [tabMixins],
+    components: { juRenPackOne, juRenPack },
     props: {
       list: {
         type: Array,
@@ -1918,51 +1924,13 @@
       },
 
       pritJuRen() {
-        const {
-          batchNo,
-          createDate,
-          enforceStandards,
-          layBy,
-          level,
-          netWeight,
-          notice,
-          productName,
-          purchaseOrigins,
-          specification,
-          warrantyPeriod,
-          warrantyPeriodUnit,
-          weightUnit
-        } = this.printData;
-
-        // if (this.printStyle == 'juRen1') {
-        //   const query = `?batchNo=${batchNo}&createDate=${createDate}&enforceStandards=${enforceStandards}&layBy=${layBy}&level=${level}&netWeight=${netWeight}&notice=${notice}&productName=${productName}&purchaseOrigins=${purchaseOrigins}&specification=${specification}&warrantyPeriod=${warrantyPeriod}&warrantyPeriodUnit=${warrantyPeriodUnit}&weightUnit=${weightUnit}`;
-        //   window.open('/printJuren' + query, '_blank');
-        // }
-
         if (this.printStyle == 'juRen1') {
-          // const routeUrl = this.$router.resolve({
-          //   path: '/produce/components/juRenPackOne',
-          //   query: {
-          //     batchNo,
-          //     createDate,
-          //     enforceStandards,
-          //     layBy,
-          //     level,
-          //     netWeight,
-          //     notice,
-          //     productName,
-          //     purchaseOrigins,
-          //     specification,
-          //     warrantyPeriod,
-          //     warrantyPeriodUnit,
-          //     weightUnit,
-          //     workOrderId: this.item.workOrderId
-          //   }
-          // });
-          // window.open(routeUrl.href, '_blank');
-
-          const query = `?batchNo=${batchNo}&createDate=${createDate}&enforceStandards=${enforceStandards}&layBy=${layBy}&level=${level}&netWeight=${netWeight}&notice=${notice}&productName=${productName}&purchaseOrigins=${purchaseOrigins}&specification=${specification}&warrantyPeriod=${warrantyPeriod}&warrantyPeriodUnit=${warrantyPeriodUnit}&weightUnit=${weightUnit}&workOrderId=${this.item.workOrderId}`;
-          window.open('/printJuRenOne' + query, '_blank');
+          this.$refs.juRenPackOneRef.open(
+            this.printData,
+            this.item.workOrderId
+          );
+
+          // this.$refs.juRenPackRef.open(this.printData);
         }
       }
     },

src/views/produce/components/juRenPack.vue

@@ -1,35 +1,87 @@
 <template>
-  <div class="label-container">
-    <!-- 第一行信息 -->
-    <div class="label-title">
-      <div class="label-info-left">
-        <div>{{ productName ? productName : ' ' }}</div>
-        <div>{{ purchaseOrigins ? purchaseOrigins : ' ' }}</div>
-        <div>{{ batchNo ? batchNo : ' ' }}</div>
-        <div>{{ specification ? specification : ' ' }}</div>
-        <div>{{ createDate ? createDate : ' ' }}</div>
-        <div>{{ layBy ? layBy : ' ' }}</div>
-        <div>{{ notice ? notice : ' ' }}</div>
-        <div>{{ enforceStandards ? enforceStandards : ' ' }}</div>
-      </div>
-
-      <div class="label-info-right">
-        <div class="right-div">{{ level ? level : ' ' }}</div>
-        <div class="right-div"
-          >{{ netWeight ? netWeight : ' '
-          }}{{ weightUnit ? weightUnit : ' ' }}</div
-        >
-        <div class="right-div"
-          >{{ warrantyPeriod ? warrantyPeriod : ' '
-          }}{{ warrantyPeriodUnit ? warrantyPeriodUnit : ' ' }}</div
+  <ele-modal
+    title="打印条码"
+    :visible.sync="QRvisible"
+    v-if="QRvisible"
+    width="800px"
+    :maxable="true"
+  >
+    <div id="printSection">
+      <div
+        style="
+          width: 90mm;
+          height: 60mm;
+          box-sizing: border-box;
+          font-size: 10px;
+          color: green;
+          margin: 0 auto;
+          font-weight: 700;
+        "
+      >
+        <!-- 第一行信息 -->
+        <div
+          style="
+            display: flex;
+            flex-direction: row;
+            padding: 0 45px;
+            box-sizing: border-box;
+          "
         >
+          <div
+            style="
+              display: flex;
+              flex-direction: column;
+              flex-wrap: wrap;
+              margin: 54px 0 0 62px;
+            "
+          >
+            <div style="height: 17px">{{
+              productName ? productName : ' '
+            }}</div>
+            <div style="height: 17px">{{
+              purchaseOrigins ? purchaseOrigins : ' '
+            }}</div>
+            <div style="height: 17px">{{ batchNo ? batchNo : ' ' }}</div>
+            <div style="height: 17px">{{
+              specification ? specification : ' '
+            }}</div>
+            <div style="height: 17px">{{ createDate ? createDate : ' ' }}</div>
+            <div style="height: 17px">{{ layBy ? layBy : ' ' }}</div>
+            <div style="height: 17px">{{ notice ? notice : ' ' }}</div>
+            <div style="height: 17px">{{
+              enforceStandards ? enforceStandards : ' '
+            }}</div>
+          </div>
+
+          <div
+            style="
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              margin: 37px 0 1px 30px;
+            "
+          >
+            <div style="height: 17px">{{ level ? level : ' ' }}</div>
+            <div style="height: 17px"
+              >{{ netWeight ? netWeight : ' '
+              }}{{ weightUnit ? weightUnit : ' ' }}</div
+            >
+            <div style="height: 17px"
+              >{{ warrantyPeriod ? warrantyPeriod : ' '
+              }}{{ warrantyPeriodUnit ? warrantyPeriodUnit : ' ' }}</div
+            >
+          </div>
+        </div>
       </div>
     </div>
-  </div>
+    <div slot="footer">
+      <el-button @click="print">打印预览</el-button>
+      <el-button @click="close">关闭</el-button>
+    </div>
+  </ele-modal>
 </template>
 
 <script>
-  // import JsBarcode from 'jsbarcode';
   export default {
     data() {
       return {
@@ -45,75 +97,83 @@
         specification: '',
         warrantyPeriod: '',
         warrantyPeriodUnit: '',
-        weightUnit: ''
+        weightUnit: '',
+        QRvisible: false
       };
     },
 
-    mounted() {
-      const {
-        batchNo,
-        createDate,
-        enforceStandards,
-        layBy,
-        level,
-        netWeight,
-        notice,
-        productName,
-        purchaseOrigins,
-        specification,
-        warrantyPeriod,
-        warrantyPeriodUnit,
-        weightUnit
-      } = this.$route.query;
-      this.productName = productName ? productName : '';
-      this.batchNo = batchNo ? batchNo : '';
-      this.createDate = createDate ? createDate : '';
-      this.enforceStandards = enforceStandards ? enforceStandards : '';
-      this.layBy = layBy ? layBy : '';
-      this.level = level ? level : '';
-      this.netWeight = netWeight ? netWeight : '';
-      this.notice = notice ? notice : '';
-      this.purchaseOrigins = purchaseOrigins ? purchaseOrigins : '';
-      this.specification = specification ? specification : '';
-      this.warrantyPeriod =
-        warrantyPeriod && !warrantyPeriod ? warrantyPeriod : '';
-      this.warrantyPeriodUnit = warrantyPeriodUnit ? warrantyPeriodUnit : '';
-      this.weightUnit = weightUnit ? weightUnit : '';
+    mounted() {},
 
-      if (this.warrantyPeriodUnit === '1') {
-        this.warrantyPeriodUnit = '分钟';
-      } else if (this.warrantyPeriodUnit === '2') {
-        this.warrantyPeriodUnit = '小时';
-      } else if (this.warrantyPeriodUnit === '3') {
-        this.warrantyPeriodUnit = '日';
-      } else if (this.warrantyPeriodUnit === '4') {
-        this.warrantyPeriodUnit = '月';
-      } else if (this.warrantyPeriodUnit === '5') {
-        this.warrantyPeriodUnit = '年';
-      } else {
-        this.warrantyPeriodUnit = '';
-      }
+    methods: {
+      open(item) {
+        this.QRvisible = true;
+        const {
+          batchNo,
+          createDate,
+          enforceStandards,
+          layBy,
+          level,
+          netWeight,
+          notice,
+          productName,
+          purchaseOrigins,
+          specification,
+          warrantyPeriod,
+          warrantyPeriodUnit,
+          weightUnit
+        } = item;
+
+        this.productName = productName ? productName : '';
+        this.batchNo = batchNo ? batchNo : '';
+        this.createDate = createDate ? createDate : '';
+        this.enforceStandards = enforceStandards ? enforceStandards : '';
+        this.layBy = layBy ? layBy : '';
+        this.level = level ? level : '';
+        this.netWeight = netWeight ? netWeight : '';
+        this.notice = notice ? notice : '';
+        this.purchaseOrigins = purchaseOrigins ? purchaseOrigins : '';
+        this.specification = specification ? specification : '';
+        this.warrantyPeriod =
+          warrantyPeriod && !warrantyPeriod ? warrantyPeriod : '';
+        this.warrantyPeriodUnit = warrantyPeriodUnit ? warrantyPeriodUnit : '';
+        this.weightUnit = weightUnit ? weightUnit : '';
 
-      this.$nextTick(() => {
-        window.print();
-      });
+        if (this.warrantyPeriodUnit === '1') {
+          this.warrantyPeriodUnit = '分钟';
+        } else if (this.warrantyPeriodUnit === '2') {
+          this.warrantyPeriodUnit = '小时';
+        } else if (this.warrantyPeriodUnit === '3') {
+          this.warrantyPeriodUnit = '日';
+        } else if (this.warrantyPeriodUnit === '4') {
+          this.warrantyPeriodUnit = '月';
+        } else if (this.warrantyPeriodUnit === '5') {
+          this.warrantyPeriodUnit = '年';
+        } else {
+          this.warrantyPeriodUnit = '';
+        }
+      },
 
-      // const { id, name, price } = this.$route.query;
-      // this.order = { id, name, price };
+      close() {
+        this.QRvisible = false;
+      },
 
-      // console.log('打印参数', this.$route.query);
-      // console.log('打印参数', this.$route.query);
-      // this.orderId = this.$route.query.orderId;
-      // this.type = this.$route.query.type;
-      // window.addEventListener('message', (event) => {
-      //   console.log('接收到的参数', event.data);
-      // });
-      // JsBarcode('#barCode', '123456789012', {
-      //   format: 'CODE128',
-      //   width: 4,
-      //   height: 40,
-      //   displayValue: true
-      // });
+      print() {
+        const printSection = document.getElementById('printSection');
+        // 创建打印任务
+        const printWindow = window.open('', '_blank');
+        printWindow.document.open();
+        printWindow.document.write('<html><head><title>打印预览</title>');
+        printWindow.document.write(
+          '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
+        );
+        printWindow.document.write('</head><body>');
+        printWindow.document.write(printSection.innerHTML);
+        printWindow.document.write('</body></html>');
+        printWindow.document.close();
+        printWindow.onload = function () {
+          printWindow.print();
+        };
+      }
     }
   };
 </script>
@@ -138,7 +198,6 @@
   }
   .label-info-left {
     display: flex;
-    // flex: 1;
     flex-direction: column;
     flex-wrap: wrap;
     margin: 54px 0 0 62px;
@@ -150,17 +209,11 @@
 
   .label-info-right {
     display: flex;
-    // flex: 1;
     flex-direction: column;
     justify-content: center;
     margin: 37px 0 1px 30px;
 
-    // .right-box {
-    //   // margin: 34px 0 1px 18px
-    // }
-
     .right-div {
-      // margin: 0 0 1px 18px;
       height: 17px;
     }
   }

src/views/produce/components/juRenPackOne.vue

@@ -1,53 +1,130 @@
 <template>
-  <div class="label-container" id="printSection">
-    <div class="ju_ren_one_level">
-      <span>{{ productName ? productName : ' ' }}</span>
-      <span class="ju_ren_one_level_two">{{ '' }}</span>
-    </div>
-
-    <div class="ju_ren_two_level">
-      <span>{{ purchaseOrigins ? purchaseOrigins : ' ' }}</span>
-    </div>
-
-    <div class="ju_ren_two_level">
-      <span>{{ specification ? specification : ' ' }}</span>
-      <span class="ju_ren_one_level_two"
-        >{{ netWeight ? netWeight : ' '
-        }}{{ weightUnit ? weightUnit : ' ' }}</span
+  <ele-modal
+    title="打印条码"
+    :visible.sync="QRvisible"
+    v-if="QRvisible"
+    width="800px"
+    :maxable="true"
+  >
+    <div id="printSection">
+      <div
+        style="
+          position: relative;
+          width: 90mm;
+          height: 70mm;
+          box-sizing: border-box;
+          font-size: 12px;
+          color: green;
+          margin: 0 auto;
+          font-weight: 700;
+        "
       >
+        <div style="display: flex; margin: 63px 0 0 64px; flex-direction: row">
+          <span style="display: inline-block; width: 70px; height: 19px">{{
+            productName ? productName : ' '
+          }}</span>
+          <span
+            style="
+              display: inline-block;
+              margin-left: 35px;
+              width: 70px;
+              height: 19px;
+            "
+            >{{ '' }}</span
+          >
+        </div>
+
+        <div style="margin-left: 64px">
+          <span style="display: inline-block; width: 70px; height: 19px">{{
+            purchaseOrigins ? purchaseOrigins : ' '
+          }}</span>
+        </div>
+
+        <div style="margin-left: 64px">
+          <span style="display: inline-block; width: 70px; height: 19px">{{
+            specification ? specification : ' '
+          }}</span>
+          <span
+            style="
+              display: inline-block;
+              width: 70px;
+              margin-left: 35px;
+              height: 19px;
+            "
+            >{{ netWeight ? netWeight : ' '
+            }}{{ weightUnit ? weightUnit : ' ' }}</span
+          >
+        </div>
+
+        <div style="margin: 2px 0 0 110px">
+          <span style="display: inline-block; height: 19px">{{
+            level ? level : ' '
+          }}</span>
+        </div>
+
+        <div style="margin: 3px 0 0 64px">
+          <span style="display: inline-block; width: 60px; height: 19px">{{
+            batchNo ? batchNo : ' '
+          }}</span>
+
+          <span
+            style="
+              display: inline-block;
+              margin-left: 42px;
+              width: 67px;
+              height: 19px;
+            "
+            >{{ createDate ? createDate : ' ' }}</span
+          >
+          <span
+            style="
+              display: inline-block;
+              margin-left: 42px;
+              width: 60px;
+              height: 19px;
+            "
+            >{{ warrantyPeriod ? warrantyPeriod : 0
+            }}{{ warrantyPeriodUnit ? warrantyPeriodUnit : ' ' }}</span
+          >
+        </div>
+
+        <div style="margin: 3px 0 0 64px">
+          <span style="display: inline-block; height: 19px">{{
+            notice ? notice : ' '
+          }}</span>
+        </div>
+
+        <div style="margin: 3px 0 0 64px">
+          <span style="display: inline-block; height: 19px">{{
+            layBy ? layBy : ' '
+          }}</span>
+        </div>
+
+        <div style="margin: 3px 0 0 64px">
+          <span style="display: inline-block; height: 19px">{{
+            enforceStandards ? enforceStandards : ' '
+          }}</span>
+        </div>
+
+        <div
+          style="
+            position: absolute;
+            top: 0;
+            right: 15px;
+            width: 60px;
+            height: 60px;
+          "
+        >
+          <img style="width: 100%; height: 100%" :src="url" />
+        </div>
+      </div>
     </div>
 
-    <div class="ju_ren_Three_level">
-      <span>{{ level ? level : ' ' }}</span>
-    </div>
-
-    <div class="ju_ren_four_level">
-      <span>{{ batchNo ? batchNo : ' ' }}</span>
-      <span class="ju_ren_two_level_two two_text">{{
-        createDate ? createDate : ' '
-      }}</span>
-      <span class="ju_ren_two_level_two"
-        >{{ warrantyPeriod ? warrantyPeriod : 0
-        }}{{ warrantyPeriodUnit ? warrantyPeriodUnit : ' ' }}</span
-      >
-    </div>
-
-    <div class="ju_ren_five_level">
-      <span>{{ notice ? notice : ' ' }}</span>
-    </div>
-
-    <div class="ju_ren_five_level">
-      <span>{{ layBy ? layBy : ' ' }}</span>
-    </div>
-
-    <div class="ju_ren_five_level">
-      <span>{{ enforceStandards ? enforceStandards : ' ' }}</span>
+    <div slot="footer">
+      <el-button @click="print">打印预览</el-button>
+      <el-button @click="close">关闭</el-button>
     </div>
-
-    <div class="qr_code">
-      <img :src="url" />
-    </div>
-  </div>
+  </ele-modal>
 </template>
 
 <script>
@@ -70,85 +147,105 @@
         weightUnit: '',
         url: '',
         workOrderId: '',
-        qrCodeUrl: ''
+        qrCodeUrl: '',
+        QRvisible: false
       };
     },
-    mounted() {
-      const {
-        batchNo,
-        createDate,
-        enforceStandards,
-        layBy,
-        level,
-        netWeight,
-        notice,
-        productName,
-        purchaseOrigins,
-        specification,
-        warrantyPeriod,
-        warrantyPeriodUnit,
-        weightUnit,
-        workOrderId
-      } = this.$route.query;
-      console.log('123');
-
-      this.productName = productName ? productName : '';
-      this.batchNo = batchNo ? batchNo : '';
-      this.createDate = createDate ? createDate : '';
-      this.enforceStandards = enforceStandards ? enforceStandards : '';
-      this.layBy = layBy ? layBy : '';
-      this.level = level ? level : '';
-      this.netWeight = netWeight ? netWeight : '';
-      this.notice = notice ? notice : '';
-      this.purchaseOrigins = purchaseOrigins ? purchaseOrigins : '';
-      this.specification = specification ? specification : '';
-      this.warrantyPeriod =
-        warrantyPeriod && !warrantyPeriod ? warrantyPeriod : '';
-      this.warrantyPeriodUnit = warrantyPeriodUnit ? warrantyPeriodUnit : '';
-      this.weightUnit = weightUnit ? weightUnit : '';
-      this.workOrderId = workOrderId ? workOrderId : '';
-
-      if (this.warrantyPeriodUnit === '1') {
-        this.warrantyPeriodUnit = '分钟';
-      } else if (this.warrantyPeriodUnit === '2') {
-        this.warrantyPeriodUnit = '小时';
-      } else if (this.warrantyPeriodUnit === '3') {
-        this.warrantyPeriodUnit = '日';
-      } else if (this.warrantyPeriodUnit === '4') {
-        this.warrantyPeriodUnit = '月';
-      } else if (this.warrantyPeriodUnit === '5') {
-        this.warrantyPeriodUnit = '年';
-      } else {
-        this.warrantyPeriodUnit = '';
-      }
+    mounted() {},
 
-      this.qrCodeUrl =
-        window.location.origin + `/traceability?id=${this.workOrderId}`;
+    methods: {
+      open(item, workOrderId) {
+        this.QRvisible = true;
+        const {
+          batchNo,
+          createDate,
+          enforceStandards,
+          layBy,
+          level,
+          netWeight,
+          notice,
+          productName,
+          purchaseOrigins,
+          specification,
+          warrantyPeriod,
+          warrantyPeriodUnit,
+          weightUnit
+        } = item;
+
+        this.productName = productName ? productName : '';
+        this.batchNo = batchNo ? batchNo : '';
+        this.createDate = createDate ? createDate : '';
+        this.enforceStandards = enforceStandards ? enforceStandards : '';
+        this.layBy = layBy ? layBy : '';
+        this.level = level ? level : '';
+        this.netWeight = netWeight ? netWeight : '';
+        this.notice = notice ? notice : '';
+        this.purchaseOrigins = purchaseOrigins ? purchaseOrigins : '';
+        this.specification = specification ? specification : '';
+        this.warrantyPeriod =
+          warrantyPeriod && !warrantyPeriod ? warrantyPeriod : '';
+        this.warrantyPeriodUnit = warrantyPeriodUnit ? warrantyPeriodUnit : '';
+        this.weightUnit = weightUnit ? weightUnit : '';
+        this.workOrderId = workOrderId ? workOrderId : '';
+
+        if (this.warrantyPeriodUnit === '1') {
+          this.warrantyPeriodUnit = '分钟';
+        } else if (this.warrantyPeriodUnit === '2') {
+          this.warrantyPeriodUnit = '小时';
+        } else if (this.warrantyPeriodUnit === '3') {
+          this.warrantyPeriodUnit = '日';
+        } else if (this.warrantyPeriodUnit === '4') {
+          this.warrantyPeriodUnit = '月';
+        } else if (this.warrantyPeriodUnit === '5') {
+          this.warrantyPeriodUnit = '年';
+        } else {
+          this.warrantyPeriodUnit = '';
+        }
 
-      // console.log(window.location.origin, 'window.location.origin');
+        this.qrCodeUrl =
+          window.location.origin + `/traceability?id=${this.workOrderId}`;
 
-      this.$nextTick(() => {
-        this.generateQRCodes();
-        // window.print();
-      });
+        // console.log(window.location.origin, 'window.location.origin');
 
-      // this.print();
-    },
+        this.$nextTick(() => {
+          this.generateQRCodes();
+        });
+      },
 
-    methods: {
       generateQRCodes() {
         if (this.workOrderId) {
           QRCode.toDataURL(this.qrCodeUrl)
             .then((url) => {
               // item.qrcode = url;
               this.url = url;
-              console.log(url, 'url');
               this.$forceUpdate();
             })
             .catch((err) => {
               console.error(err);
             });
         }
+      },
+
+      close() {
+        this.QRvisible = false;
+      },
+
+      print() {
+        const printSection = document.getElementById('printSection');
+        // 创建打印任务
+        const printWindow = window.open('', '_blank');
+        printWindow.document.open();
+        printWindow.document.write('<html><head><title>打印预览</title>');
+        printWindow.document.write(
+          '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
+        );
+        printWindow.document.write('</head><body>');
+        printWindow.document.write(printSection.innerHTML);
+        printWindow.document.write('</body></html>');
+        printWindow.document.close();
+        printWindow.onload = function () {
+          printWindow.print();
+        };
       }
 
       // print() {
@@ -173,6 +270,16 @@
 </script>
 
 <style scoped lang="scss">
+  @media print {
+    #printSection {
+      font-size: 34px;
+
+      span {
+        font-size: 34px;
+      }
+    }
+  }
+
   .label-container {
     position: relative;
     width: 90mm;

vue.config.js

@@ -43,7 +43,7 @@ module.exports = {
         // target: 'http://192.168.1.33:18086',
         // target: 'http://192.168.1.251:18186',
         // target: 'http://192.168.1.251:18087',
-        target: 'http://192.168.1.116:18086',
+        // target: 'http://192.168.1.116:18086',
         changeOrigin: true, // 只有这个值为true的情况下 才表示开启跨域
         pathRewrite: {
           '^/api': ''