feat usb自动打印

src/common/LodopFuncs.js

@@ -141,8 +141,7 @@ export function getLodop(oOBJECT, oEMBED) {
                 document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
         }
         //===如下空白位置适合调用统一功能(如注册语句、语言选择等):==
-
-
+        LODOP.SET_LICENSES("","A4A7A0A3BA53E8548E00D14D5864728D8EA","","");
         //=======================================================
         return LODOP;
     } catch (err) {

src/common/UsbAutoPrint.vue

@@ -1,49 +1,4 @@
 <template>
-  <div class="print">
-    <div id="form1">
-      <div style="font-size: 20px;font-weight: bold;text-align: center;">#{{printInfo.daySeq}}{{printInfo.orderSource}}</div>
-      <div v-if="orderType === 2" style="font-size: 20px;font-weight: bold;text-align: center;">取消单</div>
-      <div style="font-size: 12px;text-align: center;margin:5px 0;">{{printInfo.shopName}}</div>
-      <div style="font-size: 16px;font-weight: bold;text-align: center;">{{printInfo.deliveryTime === '0' ? '立即送达' : '期望' + printInfo.deliveryTime}}</div>
-      <div v-if="pageWidth === 1" style="text-align: center;">------------------------------------</div>
-      <div v-if="pageWidth === 2" style="text-align: center;">----------------------------------------</div>
-      <div style="font-size: 13px;margin-bottom:5px;">下单时间：{{printInfo.createTime}}</div>
-      <div style="font-size: 13px;">订单编号：{{printInfo.outOrderId}}</div>
-      <div v-if="pageWidth === 1" style="text-align: center;">---------------商品-------------</div>
-      <div v-if="pageWidth === 2" style="text-align: center;">------------------商品----------------</div>
-      <div style="font-size: 18px; display: flex;flex-wrap:wrap;justify-content:space-between;" v-for="(v,i) in printInfo.orderGoodsDtoList" :key="i">
-        <div>{{v.foodName}}</div>
-        <div style="width:100%;text-align:right"><span style="margin-right:20px;">x{{v.quantity}}</span><span>{{v.price}}</span></div>
-      </div>
-      <div v-if="(printInfo.taxpayerId || printInfo.invoiceTitle) && num !== 3 && pageWidth === 1" style="margin-top: 5px; text-align: center;">---------------发票-------------</div>
-      <div v-if="(printInfo.taxpayerId || printInfo.invoiceTitle) && num !== 3 && pageWidth === 2" style="margin-top: 5px; text-align: center;">------------------发票----------------</div>
-      <div v-if="printInfo.invoiceTitle && num !== 3" style="font-size: 13px;">抬头: {{printInfo.invoiceTitle}}</div>
-      <div v-if="printInfo.taxpayerId && num !== 3" style="font-size: 13px;">税号: {{printInfo.taxpayerId}}</div>
-      <div v-if="printInfo.caution && num !== 3 && pageWidth === 1" style="margin-top: 5px;text-align: center;">---------------备注-------------</div>
-      <div v-if="printInfo.caution && num !== 3 && pageWidth === 2" style="margin-top: 5px;text-align: center;">------------------备注----------------</div>
-      <div v-if="printInfo.caution && num !== 3" style="font-size: 20px;font-weight: bold;">{{printInfo.caution}}</div>
-      <div v-if="printInfo.caution && num === 3 && pageWidth === 1" style="text-align: center;">------------------------------------</div>
-      <div v-if="printInfo.caution && num === 3 && pageWidth === 2" style="text-align: center;">----------------------------------------</div>
-      <div v-if="printInfo.caution && num === 3" style="font-size: 20px;font-weight: bold;">备注: {{printInfo.caution}}</div>
-      <div v-if="num !== 3 && pageWidth === 1" style="text-align: center;">------------------------------------</div>
-      <div v-if="num !== 3 && pageWidth === 2" style="text-align: center;">----------------------------------------</div>
-      <div v-if="num !== 3" style="font-size: 12px;display:flex;justify-content: space-between;"><span>配送费:</span><span>{{Number(printInfo.deliverFee)}}元</span></div>
-      <div v-if="num !== 3" style="font-size: 12px;display:flex;justify-content: space-between;"><span>餐盒费:</span><span>{{Number(printInfo.boxFee)}}元</span></div>
-      <div v-if="num !== 3 && pageWidth === 1" style="text-align: center;">------------------------------------</div>
-      <div v-if="num !== 3 && pageWidth === 2" style="text-align: center;">----------------------------------------</div>
-      <div v-if="num !== 3" style="font-size: 12px;display:flex;justify-content: space-between;"><span>原价:</span><span>{{printInfo.originalPrice}}元</span></div>
-      <div v-if="num !== 3 && pageWidth === 1" style="text-align: center;">------------------------------------</div>
-      <div v-if="num !== 3 && pageWidth === 2" style="text-align: center;">----------------------------------------</div>
-      <div v-if="num !== 3" style="font-size: 20px;font-weight:bold;display:flex;justify-content: space-between;"><span>实付:</span><span>{{printInfo.totalPrice}}元</span></div>
-      <div v-if="pageWidth === 1" style="text-align: center;">------------------------------------</div>
-      <div v-if="pageWidth === 2" style="text-align: center;">----------------------------------------</div>
-      <div style="font-size: 20px;font-weight: bold;">地址: {{printInfo.recipientAddress}}</div>
-      <div v-if="num !== 3" style="font-size: 13px;">{{printInfo.recipientName}}</div>
-      <div v-if="num !== 3" style="font-size: 14px;">{{printInfo.recipientPhone}}</div>
-      <div v-if="pageWidth === 1" style="text-align: center;">---------------#{{printInfo.daySeq}}完-------------</div>
-      <div v-if="pageWidth === 2" style="text-align: center;">------------------#{{printInfo.daySeq}}完----------------</div>
-    </div>
-  </div>
 </template>
 
 <script>
@@ -56,8 +11,6 @@ export default {
   data() {
     return {
       printInfo: {},
-      num: 1,
-      pageWidth: 1, //1是57mm、2是80mm
       usbPrinterList: [],
     };
   },
@@ -71,7 +24,9 @@ export default {
       handler() {
         if (JSON.stringify(this.printData) !== "{}") {
           this.printInfo = this.printData;
-          this.pringPdf();
+          this.usbPrinterList.forEach((e) => {
+            this.pringPdf(e);
+          });
         }
       },
     },
@@ -92,57 +47,72 @@ export default {
   mounted() {},
   // 方法集合
   methods: {
-    pringPdf() {
-      if (this.num === 1 && this.orderType === 1) {
+    pringPdf(data) {
+      if (this.orderType === 1) {
+        if (!data.openOrderPrint) return;
+        setTimeout(() => {
+          if (!data.printCustomerCount) return;
+          this.CreateOneFormPage(
+            1,
+            data.deviceName,
+            data.printCustomerCount,
+            data.width,
+            this.createHtml(1, data)
+          );
+        }, 500);
+        setTimeout(() => {
+          if (!data.printMerchantCount) return;
+          this.CreateOneFormPage(
+            2,
+            data.deviceName,
+            data.printMerchantCount,
+            data.width,
+            this.createHtml(2, data)
+          );
+        }, 550);
+        setTimeout(() => {
+          if (!data.printKitchenCount) return;
+          this.CreateOneFormPage(
+            3,
+            data.deviceName,
+            data.printKitchenCount,
+            data.width,
+            this.createHtml2(data)
+          );
+        }, 600);
+      } else {
+        if (!data.openOrderCancelPrint) return;
+        setTimeout(() => {
+          this.CreateOneFormPage(
+            1,
+            data.deviceName,
+            1,
+            data.width,
+            this.createHtml(1, data)
+          );
+        }, 500);
       }
-      if (this.num === 2 && this.orderType === 1) {
-      }
-      if (this.num === 3 && this.orderType === 1) {
-      }
-      setTimeout(() => {
-        this.CreateOneFormPage();
-      }, 500);
     },
-    CreateOneFormPage() {
+    CreateOneFormPage(num, deviceName, printCount, width, html) {
       LODOP = getLodop();
       LODOP.PRINT_INIT("订单小票");
       //选择操作系统中设为“默认”的打印机，“-1”代表默认打印机
-      LODOP.SET_PRINTER_INDEX(priterName);
-      //设置打印份数是1份
-      LODOP.SET_PRINT_COPIES(printerCount);
+      LODOP.SET_PRINTER_INDEX(deviceName);
+      //设置打印份数
+      LODOP.SET_PRINT_COPIES(printCount);
       // 参数含义 http://www.c-lodop.com/demolist/PrintSample5.html
-      if (this.pageWidth === 1) {
+      if (width === 58) {
         LODOP.SET_PRINT_PAGESIZE(3, 570, 100, "");
-        LODOP.ADD_PRINT_HTM(
-          40,
-          10,
-          "51mm",
-          "100%",
-          document.getElementById(`form1`).innerHTML
-        );
+        LODOP.ADD_PRINT_HTM(40, 10, "51mm", "100%", html);
       }
-      if (this.pageWidth === 2) {
+      if (width === 80) {
         LODOP.SET_PRINT_PAGESIZE(3, 800, 100, "");
-        LODOP.ADD_PRINT_HTM(
-          40,
-          80,
-          "60mm",
-          "100%",
-          document.getElementById(`form1`).innerHTML
-        );
+        LODOP.ADD_PRINT_HTM(40, 80, "60mm", "100%", html);
       }
       LODOP.SET_PRINT_STYLEA(0, "Horient", 2);
       LODOP.PRINT();
-      // 新订单未打印完三联，继续打印
-      if (this.orderType === 1 && this.num < 3) {
-        console.log("num", this.num);
-        this.num += 1;
-        this.pringPdf();
-        return;
-      }
       // 新订单第三联打完，出去打印下一单
-      if (this.orderType === 1 && this.num === 3) {
-        this.num = 1;
+      if (this.orderType === 1 && num === 3) {
         this.$emit("printOver", true);
       }
       // 取消单打印
@@ -152,12 +122,23 @@ export default {
       // LODOP.PRINT_DESIGN();
       // LODOP.PREVIEW();
     },
-    createHTML() {
+    createHtml(num, data) {
+      let pageWidth = data.width === 58 ? 1 : 2;
+      let printInfo = this.printInfo;
       let html1 = `<div id="form1">
       <div style="font-size: 20px;font-weight: bold;text-align: center;">#${
         printInfo.daySeq
       }${printInfo.orderSource}${
-        num === 1 ? "(顾客联)" : num === 2 ? "(商家联)" : ""
+        this.orderType === 1 && num === 1
+          ? "(顾客联)"
+          : this.orderType === 1 && num === 2
+          ? "(商家联)"
+          : ""
+      }</div>
+      <div style="display:${
+        this.orderType === 2 ? "block" : "none"
+      };font-size: 20px;font-weight: bold;text-align: center;">${
+        this.orderType === 2 ? "取消单" : ""
       }</div>
       <div style="font-size: 12px;text-align: center;margin:5px 0;">${
         printInfo.shopName
@@ -188,19 +169,29 @@ export default {
         <div style="width:100%;text-align:right"><span style="margin-right:20px;">x${printInfo.orderGoodsDtoList[index].quantity}</span><span>${printInfo.orderGoodsDtoList[index].price}</span></div>
       </div>`;
       }
-      let html3 = `<div  style="margin-top: 5px; text-align: center;">${
+      let html3 = `<div  style="display:${
+        printInfo.invoiceTitle || printInfo.taxpayerId ? "block" : "none"
+      };margin-top: 5px; text-align: center;">${
         pageWidth === 1
           ? "---------------发票-------------"
           : "------------------发票----------------"
       }</div>
-      <div style="font-size: 13px;">抬头: ${printInfo.invoiceTitle}</div>
-      <div style="font-size: 13px;">税号: ${printInfo.taxpayerId}</div>
-      <div style="margin-top: 5px;text-align: center;">${
+      <div style="display:${
+        printInfo.invoiceTitle ? "block" : "none"
+      };font-size: 13px;">抬头: ${printInfo.invoiceTitle}</div>
+      <div style="display:${
+        printInfo.taxpayerId ? "block" : "none"
+      };font-size: 13px;">税号: ${printInfo.taxpayerId}</div>
+      <div style="display:${
+        printInfo.caution ? "block" : "none"
+      };margin-top: 5px;text-align: center;">${
         pageWidth === 1
           ? "---------------备注-------------"
           : "------------------备注----------------"
       }</div>
-      <div style="font-size: 20px;font-weight: bold;">${printInfo.caution}</div>
+      <div style="cautionfont-size: 20px;font-weight: bold;">${
+        printInfo.caution
+      }</div>
       <div style="text-align: center;">${
         pageWidth === 1
           ? "------------------------------------"
@@ -238,10 +229,61 @@ export default {
       }</div>
       <div style="font-size: 13px;">${printInfo.recipientName}</div>
       <div style="font-size: 14px;">${printInfo.recipientPhone}</div>
-      <div v-if="pageWidth === 1" style="text-align: center;">${
+      <div style="text-align: center;">${
+        pageWidth === 1
+          ? "---------------#" + printInfo.daySeq + "完-------------"
+          : "------------------#" + printInfo.daySeq + "完----------------"
+      }</div>    </div>`;
+      return html1 + html2 + html3;
+    },
+    createHtml2(data) {
+      let pageWidth = data.width === 58 ? 1 : 2;
+      let printInfo = this.printInfo;
+      let html1 = `<div id="form1">
+      <div style="font-size: 20px;font-weight: bold;text-align: center;">#${
+        printInfo.daySeq
+      }${printInfo.orderSource}(厨房联)</div>
+      <div style="font-size: 12px;text-align: center;margin:5px 0;">${
+        printInfo.shopName
+      }</div>
+      <div style="font-size: 16px;font-weight: bold;text-align: center;">${
+        printInfo.deliveryTime === "0"
+          ? "立即送达"
+          : "期望" + printInfo.deliveryTime
+      }</div>
+      <div style="text-align: center;">${
+        pageWidth === 1
+          ? "------------------------------------"
+          : "----------------------------------------"
+      }</div>
+      <div style="font-size: 13px;margin-bottom:5px;">下单时间：${
+        printInfo.createTime
+      }</div>
+      <div style="font-size: 13px;">订单编号：${printInfo.outOrderId}</div>
+      <div style="text-align: center;">${
+        pageWidth === 1
+          ? "---------------商品-------------"
+          : "------------------商品----------------"
+      }</div>`;
+      let html2 = "";
+      for (let index = 0; index < printInfo.orderGoodsDtoList.length; index++) {
+        html2 += `<div style="font-size: 18px; display: flex;flex-wrap:wrap;justify-content:space-between;">
+        <div>${printInfo.orderGoodsDtoList[index].foodName}</div>
+        <div style="width:100%;text-align:right"><span style="margin-right:20px;">x${printInfo.orderGoodsDtoList[index].quantity}</span><span>${printInfo.orderGoodsDtoList[index].price}</span></div>
+      </div>`;
+      }
+      let html3 = `<div style="display:${
+        printInfo.caution ? "block" : "none"
+      };margin-top: 5px;text-align: center;">${
+        pageWidth === 1
+          ? "---------------备注-------------"
+          : "------------------备注----------------"
+      }</div>
+      <div style="font-size: 20px;font-weight: bold;">${printInfo.caution}</div>
+      <div style="text-align: center;">${
         pageWidth === 1
-          ? "---------------#{{printInfo.daySeq}}完-------------"
-          : "------------------#{{printInfo.daySeq}}完----------------"
+          ? "---------------#" + printInfo.daySeq + "完-------------"
+          : "------------------#" + printInfo.daySeq + "完----------------"
       }</div>    </div>`;
       return html1 + html2 + html3;
     },

src/components/shopCompoents/bindUsbPrint.vue

@@ -116,7 +116,7 @@ export default {
   },
   created() {},
   mounted() {
-    // this.getUsbPrint();
+    this.$store.dispatch("getUsbPrint");
   },
   methods: {
     ...mapMutations(["SET_USBPRINTER"]),
@@ -263,7 +263,7 @@ export default {
       height: 140px;
       cursor: pointer;
       background-color: #f3f3f7;
-      margin-right: 20px;
+      margin: 0 10px 10px 0;
       .online-bg {
         background-color: #fc7200;
       }