Merge branch 'dev_print' into dev

src/App.vue

@@ -5,6 +5,7 @@
     <iframe id="iframeDom" allow="autoplay" style="display:none" :src="src" sandbox=""></iframe>
     <audio class="audio" ref="audio" :src="url" controlsList="nodownload" controls autoplay hidden>
     </audio>
+    
   </div>
 </template>
 
@@ -62,6 +63,7 @@ export default {
   },
   destroyed() {},
   methods: {
+    
     getSoundMsg() {
       getSoundMsg().then((res) => {
         if (res.code === 200) {

src/common/LodopFuncs.js

@@ -0,0 +1,151 @@
+//==本JS是加载Lodop插件及CLodop服务的综合示例，可直接使用，建议看懂后融进自己页面程序==
+
+var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;
+
+//==判断是否需要CLodop(那些不支持插件的浏览器):==
+function needCLodop() {
+    try {
+        var ua = navigator.userAgent;
+        if (ua.match(/Windows\sPhone/i))
+            return true;
+        if (ua.match(/iPhone|iPod|iPad/i))
+            return true;
+        if (ua.match(/Android/i))
+            return true;
+        if (ua.match(/Edge\D?\d+/i))
+            return true;
+
+        var verTrident = ua.match(/Trident\D?\d+/i);
+        var verIE = ua.match(/MSIE\D?\d+/i);
+        var verOPR = ua.match(/OPR\D?\d+/i);
+        var verFF = ua.match(/Firefox\D?\d+/i);
+        var x64 = ua.match(/x64/i);
+        if ((!verTrident) && (!verIE) && (x64))
+            return true;
+        else if (verFF) {
+            verFF = verFF[0].match(/\d+/);
+            if ((verFF[0] >= 41) || (x64))
+                return true;
+        } else if (verOPR) {
+            verOPR = verOPR[0].match(/\d+/);
+            if (verOPR[0] >= 32)
+                return true;
+        } else if ((!verTrident) && (!verIE)) {
+            var verChrome = ua.match(/Chrome\D?\d+/i);
+            if (verChrome) {
+                verChrome = verChrome[0].match(/\d+/);
+                if (verChrome[0] >= 41)
+                    return true;
+            }
+        }
+        return false;
+    } catch (err) {
+        return true;
+    }
+}
+
+//加载CLodop时用双端口(http是8000/18000,而https是8443/8444)以防其中某端口被占,
+//主JS文件“CLodopfuncs.js”是固定文件名，其内容是动态的，与当前打印环境有关:
+function loadCLodop() {
+    if (CLodopJsState == "loading" || CLodopJsState == "complete") return;
+    CLodopJsState = "loading";
+    var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
+    var JS1 = document.createElement("script");
+    var JS2 = document.createElement("script");
+
+    if (window.location.protocol=='https:') {
+      JS1.src = "https://localhost.lodop.net:8443/CLodopfuncs.js";
+      JS2.src = "https://localhost.lodop.net:8444/CLodopfuncs.js";
+    } else {
+      JS1.src = "http://localhost:8000/CLodopfuncs.js";
+      JS2.src = "http://localhost:18000/CLodopfuncs.js";
+    }
+    JS1.onload  = JS2.onload  = function()    {CLodopJsState = "complete";}
+    JS1.onerror = JS2.onerror = function(evt) {CLodopJsState = "complete";}
+    head.insertBefore(JS1, head.firstChild);
+    head.insertBefore(JS2, head.firstChild);
+    CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));
+}
+
+if (needCLodop()){loadCLodop();}//开始加载
+
+//==获取LODOP对象主过程,判断是否安装、需否升级:==
+export function getLodop(oOBJECT, oEMBED) {
+    var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
+    var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
+    var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
+    var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
+    var strHtmFireFox = "<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>";
+    var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>";
+    var strCLodopInstall_1 = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";
+    var strCLodopInstall_2 = "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";
+    var strCLodopInstall_3 = "，成功后请刷新或重启浏览器。</font>";
+    var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新或重启浏览器。</font>";
+    var LODOP;
+    try {
+        var ua = navigator.userAgent;
+        var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));
+        if (needCLodop()) {
+            try {
+                LODOP = getCLodop();
+            } catch (err) {}
+            if (!LODOP && CLodopJsState !== "complete") {
+                if (CLodopJsState == "loading") alert("网页还没下载完毕，请稍等一下再操作."); else alert("没有加载CLodop的主js，请先调用loadCLodop过程.");
+                return;
+            }
+            if (!LODOP) {
+                document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;
+                return;
+            } else {
+                if (CLODOP.CVERSION < "4.1.4.2") {
+                    document.body.innerHTML = strCLodopUpdate + document.body.innerHTML;
+                }
+                if (oEMBED && oEMBED.parentNode)
+                    oEMBED.parentNode.removeChild(oEMBED); //清理旧版无效元素
+                if (oOBJECT && oOBJECT.parentNode)
+                    oOBJECT.parentNode.removeChild(oOBJECT);
+            }
+        } else {
+            var is64IE = isIE && !!(ua.match(/x64/i));
+            //==如果页面有Lodop就直接使用,否则新建:==
+            if (oOBJECT || oEMBED) {
+                if (isIE)
+                    LODOP = oOBJECT;
+                else
+                    LODOP = oEMBED;
+            } else if (!CreatedOKLodopObject) {
+                LODOP = document.createElement("object");
+                LODOP.setAttribute("width", 0);
+                LODOP.setAttribute("height", 0);
+                LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");
+                if (isIE)
+                    LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
+                else
+                    LODOP.setAttribute("type", "application/x-print-lodop");
+                document.documentElement.appendChild(LODOP);
+                CreatedOKLodopObject = LODOP;
+            } else
+                LODOP = CreatedOKLodopObject;
+            //==Lodop插件未安装时提示下载地址:==
+            if ((!LODOP) || (!LODOP.VERSION)) {
+                if (ua.indexOf('Chrome') >= 0)
+                    document.body.innerHTML = strHtmChrome + document.body.innerHTML;
+                if (ua.indexOf('Firefox') >= 0)
+                    document.body.innerHTML = strHtmFireFox + document.body.innerHTML;
+                document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML;
+                return LODOP;
+            }
+        }
+        if (LODOP.VERSION < "6.2.2.6") {
+            if (!needCLodop())
+                document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
+        }
+        //===如下空白位置适合调用统一功能(如注册语句、语言选择等):==
+
+
+        //=======================================================
+        return LODOP;
+    } catch (err) {
+        alert("getLodop出错:" + err);
+    }
+}

src/common/UsbAutoPrint.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="print">
+    <!-- <div @click="pringPdf">打印测试</div> -->
+    <div id="form1">
+      <div style="font-size: 24px;font-weight: bold;text-align: center;">{{title}}</div>
+      <div style="font-size: 18px;text-align: center;margin:10px 0;">美团测试门店郑州</div>
+      <div style="font-size: 18px;font-weight: bold;">期望09月15日 18:45送达</div>
+      <div>------------------------------------</div>
+      <div style="font-size: 13px;margin-bottom:5px;">下单时间：2021-09-15 15:43:37</div>
+      <div style="font-size: 13px;">订单编号：211108142923315141</div>
+      <div>----------------商品--------------</div>
+      <div style="font-size: 20px;">黄焖汁辣酱黄焖鸡酱料228g*2瓶黄焖鸡米饭调料家用排骨秘制佐料包黄焖汁辣酱黄焖鸡酱料228g*2瓶黄焖鸡米饭调料家用排骨秘制佐料包</div>
+      <div style="font-size: 20px;text-align: right;"> x1 0.01</div>
+      <div style="margin-top: 5px;">----------------发票--------------</div>
+      <div style="font-size: 13px;">抬头: 苏州盈点点信息科技有限公司</div>
+      <div style="font-size: 13px;">税号: 921232543123154132313</div>
+      <div>------------------------------------</div>
+      <div style="font-size: 13px;display:flex;justify-content: space-between;"><span>配送费:</span><span>6.2元</span></div>
+      <div>------------------------------------</div>
+      <div style="font-size: 13px;display:flex;justify-content: space-between;"><span>原价:</span><span>16.2元</span></div>
+      <div>------------------------------------</div>
+      <div style="font-size: 18px;font-weight:bold;display:flex;justify-content: space-between;"><span>实付:</span><span>22.4元</span></div>
+      <div>------------------------------------</div>
+      <div style="font-size: 18px;font-weight: bold;">地址: 上地街道彩虹集团公司1号楼11111上地街道彩虹集团公司1号楼11111</div>
+      <div style="font-size: 13px;">周**</div>
+      <div style="font-size: 14px;">18502378946,976</div>
+      <div>----------------#3完--------------</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getLodop } from "./LodopFuncs.js";
+export default {
+  name: "UsbAutoPrint",
+  props: { content: Number },
+  data() {
+    return {
+      title: "#3饿百零售(顾客联)",
+    };
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {
+    content: {
+      handler(newVal, oldVal) {
+        if (newVal) {
+          console.log("需要打印的内容：", newVal);
+          this.$nextTick(() => {
+            this.pringPdf();
+          });
+        }
+      },
+      deep: true,
+    },
+  },
+
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    console.log("需要打印的内容：", this.content);
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    // this.$nextTick(() => {
+    //   this.pringPdf();
+    // });
+  },
+  // 方法集合
+  methods: {
+    pringPdf() {
+      this.CreateOneFormPage();
+    },
+    CreateOneFormPage() {
+      LODOP = getLodop();
+      LODOP.PRINT_INIT("订单小票");
+      //选择操作系统中设为“默认”的打印机，“-1”代表默认打印机
+      LODOP.SET_PRINTER_INDEX(-1);
+      //设置打印份数是1份
+      LODOP.SET_PRINT_COPIES(2);
+      // 参数含义 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
+      );
+      LODOP.SET_PRINT_STYLE('FontStretch',"ultra-expanded")
+      LODOP.ADD_PRINT_TEXT(50,10,550,40,'这是一个测试文字')//增加纯文本项
+      LODOP.PRINT();
+      // LODOP.PRINT_DESIGN();
+      // LODOP.PREVIEW();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.print {
+  display: none;
+}
+</style>

src/components/about.vue

@@ -29,7 +29,9 @@ export default {
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   // 方法集合
-  methods: {},
+  methods: {
+    
+  },
 };
 </script>
 

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)" 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>
             <!-- 预约单 -->
@@ -41,6 +41,8 @@
               <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>
+
             </div>
             <!-- 待接单 -->
             <div class="btns" v-if="buttonStatus === 1">
@@ -262,6 +264,8 @@
     </el-dialog>
     <!-- 支付二维码弹出层 -->
     <qr-code v-if="showCode" @paySuccess="paySuccess" @refreshCode="recharge" @closeCode="showCode = false" ref="code" :payAmount="payAmount" :link="link" :paymentType="paymentType" :orderSn="orderSn"></qr-code>
+    <!-- usb自动打印 -->
+    <usb-auto-print :content="content"></usb-auto-print>
   </div>
 </template>
 
@@ -273,6 +277,7 @@ import OrderDetail from "./orderDetail.vue";
 import orderTrack from "./orderTrack.vue";
 import { mapState } from "vuex";
 import sendOrderPopup from "./sendOrderPopup.vue";
+import UsbAutoPrint from "../../common/UsbAutoPrint";
 import qrCode from "../../common/qrCode.vue";
 import {
   sendValuation,
@@ -354,6 +359,7 @@ export default {
       exceptTime: "",
       delayTime: "", // 预约延迟时间
       riderArriveTime: {}, //骑手预计取货送达时间
+      content: 0,
     };
   },
   props: {
@@ -366,6 +372,7 @@ export default {
     OrderDetail,
     orderTrack,
     qrCode,
+    UsbAutoPrint,
   },
   watch: {
     tabNum(newVal, oldVal) {
@@ -697,7 +704,11 @@ export default {
       });
     },
     // 补打发票
-    orderPrinter(waimaiId) {
+    orderPrinter(waimaiId, item) {
+      if (item) {
+        this.content = ++this.content;
+        return;
+      }
       if (!waimaiId) return;
       waimaiprinter({ waimaiId }).then((res) => {
         if (res.code == 200) {

src/components/orderComponents/sendOrderPopup.vue

@@ -403,6 +403,8 @@ export default {
     closeCode() {
       this.showCode = false;
       this.loading = false;
+      // 关闭二维码也关闭计价页面
+      this.dialogTableVisible = false;
     },
     paySuccess() {
       this.showCode = false;
@@ -415,8 +417,8 @@ export default {
       bus.$emit("pullData", 2);
       if (this.$route.name === "manualCreate") {
         this.$router.push({
-          name: 'HomeIndex',
-          params:{tabNum:2}
+          name: "HomeIndex",
+          params: { tabNum: 2 },
         });
       }
     },
@@ -463,7 +465,7 @@ export default {
             //     params:{tabNum:2}
             //   });
             // }
-            this.paySuccess()
+            this.paySuccess();
           } else if (
             (this.payId == 1 || this.payId == 2) &&
             res.data.status == 1

src/components/shopCompoents/printerAdd.vue

@@ -74,20 +74,25 @@ export default {
       form: {},
       revieweds: [],
       loading: false,
+      isEdit: false,
     };
   },
   created() {},
   methods: {
     changeType(v) {
+      if (this.isEdit) {
+        return;
+      }
       this.$set(this.form, "deviceType", v.type);
       this.form.deviceId = v.id;
     },
     init(e, shopId) {
       if (e) {
-        console.log(e);
+        this.isEdit = true;
         this.title = "编辑打印机";
         this.form = e;
       } else {
+        this.isEdit = false;
         this.title = "添加打印机";
         this.form = {
           name: "",