feat usb打印

src/App.vue

@@ -6,7 +6,7 @@
     <audio class="audio" ref="audio" :src="url" controlsList="nodownload" controls autoplay hidden>
     </audio>
     <!-- usb自动打印 -->
-    <usb-auto-print @printOver="printOver" :printNum="printNum" :printData="printData"></usb-auto-print>
+    <usb-auto-print @printOver="printOver" :orderType='orderType' :printNum="printNum" :printData="printData"></usb-auto-print>
   </div>
 </template>
 
@@ -38,6 +38,7 @@ export default {
       printNum: 0,
       printData: {},
       printList: [],
+      orderType: 1,
     };
   },
   components: {
@@ -90,24 +91,16 @@ export default {
       this.printData = this.printList[0];
       this.printNum += 1;
     },
-    usbPrint(orderId, waimaiOrderId) {
+    usbPrint(orderId, waimaiOrderId, orderType) {
       // usb自动打印新订单、预约单
       getPrintOrderInfos({ orderId, waimaiOrderId }).then((res) => {
         console.log("返回内容：", res);
-        if (res.code === 200) {
+        if (res.code === 200 && res.data) {
           let data = res.data;
-          data.exceptTime = data.exceptTime ? "期望" + data.exceptTime : "立即送达";
-          this.printData = res.data;
+          this.printData = data;
+          this.orderType = orderType;
           this.printNum += 1;
           // let len = this.printList.length;
-          // res.data = res.data.map((v) => {
-          //   if (v.exceptTime) {
-          //     v.exceptTime = "期望" + v.exceptTime;
-          //   } else {
-          //     v.exceptTime = "立即送达";
-          //   }
-          //   return v;
-          // });
           // this.printList = this.printList.concat(res.data);
           // if (!len) {
           //   this.printOver(false);
@@ -123,8 +116,14 @@ export default {
             let data = res.data;
             let name = data.sound.slice(0, data.sound.indexOf("."));
             // 打印新订单、取消单
-            if (name === "new-order" || name.includes("cancel")) {
-              this.usbPrint(data.orderId, data.waimaiOrderId);
+            let orderType;
+            if (name === "new-order") {
+              orderType = 1;
+              this.usbPrint(data.orderId, data.waimaiOrderId, orderType);
+            }
+            if (name.includes("cancel")) {
+              orderType = 2;
+              this.usbPrint(data.orderId, data.waimaiOrderId, orderType);
             }
             let url = this.audioList.filter((v) => {
               return v.includes(name);

src/common/UsbAutoPrint.vue

@@ -1,32 +1,47 @@
 <template>
   <div class="print">
-    <!-- <div @click="pringPdf">打印测试</div> -->
     <div id="form1">
       <div style="font-size: 20px;font-weight: bold;text-align: center;">#{{printInfo.daySeq}}{{printInfo.orderSource}}</div>
-      <div style="font-size: 18px;text-align: center;margin:10px 0;">{{printInfo.shopName}}</div>
-      <div style="font-size: 18px;font-weight: bold;text-align: center;">{{printInfo.deliveryTime}}</div>
-      <div>------------------------------------</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>----------------商品--------------</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" style="margin-top: 5px;">----------------发票--------------</div>
-      <div v-if="printInfo.invoiceTitle" style="font-size: 13px;">抬头: {{printInfo.invoiceTitle}}</div>
-      <div v-if="printInfo.taxpayerId" style="font-size: 13px;">税号: {{printInfo.taxpayerId}}</div>
-      <div>------------------------------------</div>
-      <div style="font-size: 13px;display:flex;justify-content: space-between;"><span>配送费:</span><span>{{Number(printInfo.deliverFee)}}元</span></div>
-      <div>------------------------------------</div>
-      <div style="font-size: 13px;display:flex;justify-content: space-between;"><span>原价:</span><span>{{printInfo.originalPrice}}元</span></div>
-      <div>------------------------------------</div>
-      <div style="font-size: 20px;font-weight:bold;display:flex;justify-content: space-between;"><span>实付:</span><span>{{printInfo.totalPrice}}元</span></div>
-      <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 style="font-size: 13px;">{{printInfo.recipientName}}</div>
-      <div style="font-size: 14px;">{{printInfo.recipientPhone}}</div>
-      <div>----------------#{{printInfo.daySeq}}完--------------</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>
@@ -35,12 +50,13 @@
 import { getLodop } from "./LodopFuncs.js";
 export default {
   name: "UsbAutoPrint",
-  props: { printNum: Number, printData: Object },
+  // orderType: 1, // 1是新订单2是取消单
+  props: { printNum: Number, printData: Object, orderType: Number },
   data() {
     return {
       printInfo: {},
-      orderType: 1, // 1是新订单2是取消单
       num: 1,
+      pageWidth: 1, //1是57mm、2是80mm
     };
   },
   // 监听属性 类似于data概念
@@ -66,14 +82,14 @@ export default {
   methods: {
     pringPdf() {
       let len = this.printInfo.orderSource.length;
-      if (this.num === 1) {
+      if (this.num === 1 && this.orderType === 1) {
         this.printInfo.orderSource = this.printInfo.orderSource + "(顾客联)";
       }
-      if (this.num === 2) {
+      if (this.num === 2 && this.orderType === 1) {
         this.printInfo.orderSource =
           this.printInfo.orderSource.slice(0, len - 5) + "(商家联)";
       }
-      if (this.num === 3) {
+      if (this.num === 3 && this.orderType === 1) {
         this.printInfo.orderSource =
           this.printInfo.orderSource.slice(0, len - 5) + "(厨房联)";
       }
@@ -92,14 +108,26 @@ export default {
       //设置打印份数是1份
       LODOP.SET_PRINT_COPIES(1);
       // 参数含义 http://www.c-lodop.com/demolist/PrintSample5.html
-      LODOP.SET_PRINT_PAGESIZE(3, 570, 100, "");
-      LODOP.ADD_PRINT_HTM(
-        40,
-        0,
-        "53mm",
-        "100%",
-        document.getElementById("form1").innerHTML
-      );
+      if (this.pageWidth === 1) {
+        LODOP.SET_PRINT_PAGESIZE(3, 570, 100, "");
+        LODOP.ADD_PRINT_HTM(
+          40,
+          10,
+          "51mm",
+          "100%",
+          document.getElementById(`form1`).innerHTML
+        );
+      }
+      if (this.pageWidth === 2) {
+        LODOP.SET_PRINT_PAGESIZE(3, 800, 100, "");
+        LODOP.ADD_PRINT_HTM(
+          40,
+          80,
+          "60mm",
+          "100%",
+          document.getElementById(`form1`).innerHTML
+        );
+      }
       LODOP.SET_PRINT_STYLEA(0, "Horient", 2);
       LODOP.PRINT();
       // 新订单未打印完三联，继续打印

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])" 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)"><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,27 +41,27 @@
               <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])"><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)" 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)" v-if="list[curIdx].waimaiOrderId" class="btn_bots btn">补打小票</el-button>
             </div>
             <!-- 配送中 -->
             <div class="btns" v-if="buttonStatus === 3">
-              <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)" v-if="list[curIdx].waimaiOrderId" class="btn_bots btn">补打小票</el-button>
             </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)" 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>
             <!-- 已取消 -->
@@ -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)" 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)" 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)" v-if="item.waimaiOrderId">补打小票</el-button>
               </div>
               <!-- 异常单 -->
               <div class="order_item_header_r" v-if="item.buttonStatus === -2">
@@ -699,7 +699,7 @@ export default {
         }
       });
     },
-    // 补打发票
+    // 补打小票
     orderPrinter(waimaiId, item) {
       if (!waimaiId) return;
       waimaiprinter({ waimaiId }).then((res) => {