feat 打印测试

src/App.vue

@@ -15,6 +15,7 @@ import { getSoundMsg } from "./api/setting.js";
 import { getPrintOrderInfos } from "./api/order.js";
 import bus from "./common/bus.js";
 import UsbAutoPrint from "./common/UsbAutoPrint";
+import { mapGetters } from "vuex";
 
 export default {
   name: "App",
@@ -39,11 +40,26 @@ export default {
       printData: {},
       printList: [],
       orderType: 1,
+      usbPrinterList: [],
     };
   },
   components: {
     UsbAutoPrint,
   },
+  computed: {
+    ...mapGetters(["usbPrinter"]),
+  },
+  watch: {
+    usbPrinter: {
+      handler(newVal) {
+        this.usbPrinterList = newVal.filter((v) => {
+          return v.status;
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   created() {},
   mounted() {
     // 进来准备关闭新订单提醒声音了
@@ -61,7 +77,8 @@ export default {
     });
     bus.$on("startUsbPrint", (e) => {
       console.log("进来准备开始USB打印");
-      this.usbPrint(e);
+      if (!this.usbPrinterList.length) return;
+      this.usbPrint(e, "", 1);
     });
     // 诱导用户触发点击动作，否则页面刷新后不会自动播放音频
     let userInfo = localStorage.getItem("userInfo");
@@ -91,7 +108,7 @@ export default {
       this.printData = this.printList[0];
       this.printNum += 1;
     },
-    usbPrint(orderId, waimaiOrderId, orderType) {
+    usbPrint(orderId, waimaiOrderId, orderType = 1) {
       // usb自动打印新订单、预约单
       getPrintOrderInfos({ orderId, waimaiOrderId }).then((res) => {
         // console.log("返回内容：", res);
@@ -106,8 +123,8 @@ export default {
     getSoundMsg() {
       getSoundMsg().then((res) => {
         if (res.code === 200) {
-          // console.log("提示音:", res.data);
           if (res.data) {
+            console.log("提示音:", res.data.sound);
             let data = res.data;
             let name = data.sound.slice(0, data.sound.indexOf("."));
             // 打印新订单、取消单

src/common/UsbAutoPrint.vue

@@ -7,7 +7,12 @@ import { mapGetters } from "vuex";
 export default {
   name: "UsbAutoPrint",
   // orderType: 1, // 1是新订单2是取消单
-  props: { printNum: Number, printData: Object, orderType: Number },
+  props: {
+    printNum: Number,
+    printData: Object,
+    orderType: Number,
+    deviceName: String,
+  },
   data() {
     return {
       printInfo: {},
@@ -25,7 +30,13 @@ export default {
         if (JSON.stringify(this.printData) !== "{}") {
           this.printInfo = this.printData;
           this.usbPrinterList.forEach((e) => {
-            this.pringPdf(e);
+            if (this.deviceName) {
+              if (e.deviceName === this.deviceName) {
+                this.pringPdf(e);
+              }
+            } else {
+              this.pringPdf(e);
+            }
           });
         }
       },
@@ -48,8 +59,10 @@ export default {
   // 方法集合
   methods: {
     pringPdf(data) {
-      if (this.orderType === 1) {
-        if (!data.openOrderPrint) return;
+      if (
+        (this.orderType === 1 && data.openOrderPrint) ||
+        (this.orderType === 2 && data.openOrderCancelPrint)
+      ) {
         setTimeout(() => {
           if (!data.printCustomerCount) return;
           this.CreateOneFormPage(
@@ -80,17 +93,6 @@ export default {
             this.createHtml2(data)
           );
         }, 600);
-      } else {
-        if (!data.openOrderCancelPrint) return;
-        setTimeout(() => {
-          this.CreateOneFormPage(
-            1,
-            data.deviceName,
-            1,
-            data.width,
-            this.createHtml(1, data)
-          );
-        }, 500);
       }
     },
     CreateOneFormPage(num, deviceName, printCount, width, html) {
@@ -102,14 +104,16 @@ export default {
       LODOP.SET_PRINT_COPIES(printCount);
       // 参数含义 http://www.c-lodop.com/demolist/PrintSample5.html
       if (width === 58) {
-        LODOP.SET_PRINT_PAGESIZE(3, 570, 100, "");
-        LODOP.ADD_PRINT_HTM(40, 10, "51mm", "100%", html);
+        LODOP.SET_PRINT_PAGESIZE(3, 580, 100, "");
+        LODOP.ADD_PRINT_HTM(40, 40, "51mm", "100%", html);
       }
       if (width === 80) {
         LODOP.SET_PRINT_PAGESIZE(3, 800, 100, "");
         LODOP.ADD_PRINT_HTM(40, 80, "60mm", "100%", html);
       }
       LODOP.SET_PRINT_STYLEA(0, "Horient", 2);
+      // LODOP.PRINT_DESIGN();
+      // LODOP.PREVIEW();
       LODOP.PRINT();
       // 新订单第三联打完，出去打印下一单
       if (this.orderType === 1 && num === 3) {
@@ -119,8 +123,6 @@ export default {
       if (this.orderType === 2) {
         this.$emit("printOver", true);
       }
-      // LODOP.PRINT_DESIGN();
-      // LODOP.PREVIEW();
     },
     createHtml(num, data) {
       let pageWidth = data.width === 58 ? 1 : 2;
@@ -150,7 +152,7 @@ export default {
       }</div>
       <div style="text-align: center;">${
         pageWidth === 1
-          ? "------------------------------------"
+          ? "----------------------------------"
           : "----------------------------------------"
       }</div>
       <div style="font-size: 13px;margin-bottom:5px;">下单时间：${
@@ -242,7 +244,12 @@ export default {
       let html1 = `<div id="form1">
       <div style="font-size: 20px;font-weight: bold;text-align: center;">#${
         printInfo.daySeq
-      }${printInfo.orderSource}(厨房联)</div>
+      }${printInfo.orderSource}${this.orderType === 1 ? "(厨房联)" : ""}</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
       }</div>

src/components/orderComponents/orderList.vue

@@ -20,7 +20,7 @@
             <div class="btns" v-if="buttonStatus === 0">
               <el-button size="small" @click.native="itemAddRemark(list[curIdx].id, list[curIdx])" class="btn_bots">添加备注</el-button>
               <el-button size="small" @click.native="iGnoreOrder(list[curIdx].id)" class="btn_bots">忽略订单</el-button>
-              <el-button size="small" @click.native="orderPrinter(list[curIdx].waimaiOrderId,list[curIdx])" class="btn_bots">补打小票</el-button>
+              <el-button size="small" @click.native="orderPrinter(list[curIdx].waimaiOrderId,list[curIdx].id)" class="btn_bots">补打小票</el-button>
               <el-button size="small" @click.native="sendNow(list[curIdx])" class="btn_bots btn">发起配送</el-button>
             </div>
             <!-- 预约单 -->
@@ -29,7 +29,7 @@
                 <el-dropdown>
                   <span class="el-dropdown-link">更多</span>
                   <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item @click.native="orderPrinter(list[curIdx].waimaiOrderId)"><span style="color: #fc7200">补打小票</span></el-dropdown-item>
+                    <el-dropdown-item @click.native="orderPrinter(list[curIdx].waimaiOrderId,list[curIdx].id)"><span style="color: #fc7200">补打小票</span></el-dropdown-item>
                     <el-dropdown-item @click.native="iGnoreOrder(list[curIdx].id)">忽略订单</el-dropdown-item>
                   </el-dropdown-menu>
                 </el-dropdown>
@@ -41,19 +41,19 @@
               <el-button v-else size="small" @click.native="cancelOrder(list[curIdx].id)" class="btn_bots">取消订单</el-button>
 
               <el-button size="small" @click.native="sendNow(list[curIdx])" class="btn_bots btn">发起配送</el-button>
-              <!-- <el-dropdown-item @click.native="orderPrinter(list[curIdx].waimaiOrderId,list[curIdx])"><span style="color: #fc7200">补打小票</span></el-dropdown-item> -->
+              <!-- <el-dropdown-item @click.native="orderPrinter(list[curIdx].waimaiOrderId,list[curIdx].id)"><span style="color: #fc7200">补打小票</span></el-dropdown-item> -->
 
             </div>
             <!-- 待接单 -->
             <div class="btns" v-if="buttonStatus === 1">
               <el-button size="small" @click.native="cancelOrder(list[curIdx].id)" class="btn_bots">取消订单</el-button>
-              <el-button size="small" @click.native="orderPrinter(list[curIdx].waimaiOrderId)" v-if="list[curIdx].waimaiOrderId" class="btn_bots">补打小票</el-button>
+              <el-button size="small" @click.native="orderPrinter(list[curIdx].waimaiOrderId,list[curIdx].id)" v-if="list[curIdx].waimaiOrderId" class="btn_bots">补打小票</el-button>
               <el-button size="small" @click.native="addTip(list[curIdx].id)" class="btn_bots btn">加小费</el-button>
             </div>
             <!-- 取货中 -->
             <div class="btns" v-if="buttonStatus === 2">
               <el-button size="small" @click.native="cancelOrder(list[curIdx].id)" class="btn_bots">取消订单</el-button>
-              <el-button size="small" @click.native="orderPrinter(list[curIdx].waimaiOrderId)" v-if="list[curIdx].waimaiOrderId" class="btn_bots btn">补打小票</el-button>
+              <el-button size="small" @click.native="orderPrinter(list[curIdx].waimaiOrderId,list[curIdx].id)" v-if="list[curIdx].waimaiOrderId" class="btn_bots btn">补打小票</el-button>
             </div>
             <!-- 配送中 -->
             <div class="btns" v-if="buttonStatus === 3">
@@ -61,12 +61,12 @@
             </div>
             <!-- 异常单 -->
             <div class="btns" v-if="buttonStatus === -2">
-              <el-button size="small" @click.native="orderPrinter(list[curIdx].waimaiOrderId)" v-if="list[curIdx].waimaiOrderId" class="btn_bots">补打小票</el-button>
+              <el-button size="small" @click.native="orderPrinter(list[curIdx].waimaiOrderId,list[curIdx].id)" v-if="list[curIdx].waimaiOrderId" class="btn_bots">补打小票</el-button>
               <el-button size="small" @click.native="orderBack(list[curIdx].id)" class="btn_bots btn">撤回订单</el-button>
             </div>
             <!-- 已取消 -->
             <div class="btns" v-if="buttonStatus === -1">
-              <!-- <el-button size='small' @click.native="orderPrinter(list[curIdx].waimaiOrderId)" class="btn_bots btn">再来一单</el-button> -->
+              <!-- <el-button size='small' @click.native="orderPrinter(list[curIdx].waimaiOrderId,list[curIdx].id)" class="btn_bots btn">再来一单</el-button> -->
             </div>
           </div>
         </div>
@@ -121,7 +121,7 @@
                 <el-tag v-if="[-1,7].includes(tabNum)" class="header_r">待接单</el-tag>
                 <span class="header_r">已发单{{ item.takeTimeTxt }}</span>
                 <!-- <el-button size='small' @click.stop="cancelOrder(item.id)">取消订单</el-button> -->
-                <el-button size="small" class="btn" @click.stop="orderPrinter(item.waimaiOrderId)" v-if="item.waimaiOrderId">补打小票</el-button>
+                <el-button size="small" class="btn" @click.stop="orderPrinter(item.waimaiOrderId,item.id)" v-if="item.waimaiOrderId">补打小票</el-button>
                 <!-- <el-button size='small' class="btn" @click.stop="addTip(item.id)">加&nbsp;小&nbsp;费</el-button> -->
               </div>
               <!-- 取货中 -->
@@ -129,13 +129,13 @@
                 <el-tag v-if="[-1,7].includes(tabNum)" class="header_r">取货中</el-tag>
                 <!-- <span v-show="Number(item.riderArriveMinute)" class="header_r">预计{{Number(item.riderArriveMinute)}}分钟取件</span> -->
                 <!-- <el-button size='small' @click.stop="cancelOrder(item.id)">取消订单</el-button> -->
-                <el-button size="small" class="btn" @click.stop="orderPrinter(item.waimaiOrderId)" v-if="item.waimaiOrderId">补打小票</el-button>
+                <el-button size="small" class="btn" @click.stop="orderPrinter(item.waimaiOrderId,item.id)" v-if="item.waimaiOrderId">补打小票</el-button>
               </div>
               <!-- 配送中 -->
               <div class="order_item_header_r" v-if="item.buttonStatus === 3">
                 <el-tag v-if="[-1,7].includes(tabNum)" class="header_r">配送中</el-tag>
                 <!-- <span class="header_r" v-if="item.exceptTime">预计{{ item.exceptTime }}送达,{{item.surPlusMinute >= 0 ? '剩余'+item.surPlusMinute + '分钟' : '超时' +item.surPlusMinute +"分钟" }}</span> -->
-                <el-button size="small" class="btn" @click.stop="orderPrinter(item.waimaiOrderId)" v-if="item.waimaiOrderId">补打小票</el-button>
+                <el-button size="small" class="btn" @click.stop="orderPrinter(item.waimaiOrderId,item.id)" v-if="item.waimaiOrderId">补打小票</el-button>
               </div>
               <!-- 异常单 -->
               <div class="order_item_header_r" v-if="item.buttonStatus === -2">
@@ -700,7 +700,10 @@ export default {
       });
     },
     // 补打小票
-    orderPrinter(waimaiId, item) {
+    orderPrinter(waimaiId, id) {
+      if(id){
+        bus.$emit('startUsbPrint',id)
+      }
       if (!waimaiId) return;
       waimaiprinter({ waimaiId }).then((res) => {
         if (res.code == 200) {

src/components/shopCompoents/bindUsbPrint.vue

@@ -71,35 +71,66 @@
         <el-button :loading="loading" size="medium" class="btn" @click="save">保存</el-button>
       </div>
     </el-dialog>
+    <!-- usb自动打印 -->
+    <usb-auto-print :orderType='orderType' :printNum="printNum" :printData="printData" :deviceName="deviceName"></usb-auto-print>
   </div>
 </template>
 
 <script>
 import { addUsbPrint, getUsbPrint } from "../../api/shop.js";
 import { getLodop } from "../../common/LodopFuncs.js";
+import UsbAutoPrint from "../../common/UsbAutoPrint";
 import { mapState, mapMutations, mapGetters } from "vuex";
 export default {
   name: "bindUsbPrint",
-  props: {
-    devices: {
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
-  },
+  props: {},
   data() {
     return {
       title: "设置USB打印机",
       showVisible: false,
       form: {},
-      revieweds: [],
       loading: false,
       showLoading: true,
-      isEdit: false,
       printerList: [],
-      dataList: [],
       form: {},
+      orderType: 1,
+      printNum: 0,
+      deviceName: '',
+      printData: {
+        actDtos: [],
+        boxFee: "2.0",
+        caution:
+          "隐私保护，非冲突模式 【如遇缺货】： 缺货时电话与我沟通 顾客未对餐具数量做选择",
+        createTime: "2021-11-16 19:07:10",
+        daySeq: "5",
+        deliverFee: "4.00",
+        deliveryTime: "0",
+        encryptRecipientPhone: "",
+        invoiceTitle: null,
+        isBook: 0,
+        openQrCode: null,
+        orderGoodsDtoList: [
+          { foodName: "测试商品1(不加糖)", price: 1, quantity: 3 },
+          { foodName: "测试商品2(半糖)", price: 2, quantity: 6 },
+          { foodName: "测试商品3(不加糖)", price: 3, quantity: 3 },
+          { foodName: "测试商品4(半糖)", price: 4, quantity: 6 },
+        ],
+        orderSource: "美团",
+        orderStatus: null,
+        orderidView: "32135861322341985",
+        originalPrice: 0.23,
+        outOrderId: "32135861322341985",
+        qrCode: null,
+        quantity: null,
+        recipientAddress: "那格隆(1单元1层**室)",
+        recipientName: "周女士",
+        recipientPhone: "135****1562",
+        recipientPrivacyPhone: null,
+        shipperPhone: "",
+        shopName: "测试门店",
+        taxpayerId: null,
+        totalPrice: 54.0,
+      },
     };
   },
   // 监听属性 类似于data概念
@@ -117,6 +148,9 @@ export default {
       immediate: true,
     },
   },
+  components: {
+    UsbAutoPrint,
+  },
   created() {},
   mounted() {
     setTimeout(() => {
@@ -129,15 +163,8 @@ export default {
   methods: {
     ...mapMutations(["SET_USBPRINTER"]),
     printTest() {
-      setTimeout(() => {
-        LODOP = getLodop();
-        LODOP.PRINT_INIT("测试打印");
-        LODOP.SET_PRINT_PAGESIZE(3, this.form.width * 10, 100, "");
-        LODOP.SET_PRINTER_INDEX(this.form.deviceName);
-        LODOP.ADD_PRINT_TEXT(60, 20, 500, 125, "该打印机可以正常打印！");
-        LODOP.SET_PRINT_STYLEA(0, "FontSize", 12); //设置对象风格
-        LODOP.PRINT();
-      }, 500);
+      this.deviceName = this.form.deviceName;
+      this.printNum += 1;
     },
     setPinter(i) {
       this.showVisible = true;