add print logic

package.json

@@ -21,8 +21,10 @@
     "element-theme": "^2.0.1",
     "element-ui": "^2.15.7",
     "js-cookie": "^2.2.1",
+    "jsbarcode": "^3.11.5",
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
+    "qrcode": "^1.5.3",
     "qs": "^6.9.4",
     "quill": "^1.3.7",
     "sass": "^1.26.5",

src/components/PrintDom.vue

@@ -0,0 +1,174 @@
+<!-- 
+    filename: PrintDom.vue
+    author: liubin
+    date: 2023-08-11 13:59:22
+    description: 
+-->
+
+<template>
+  <div
+    class="print-area"
+    style="
+      box-sizing: border-box;
+      margin: 4px;
+      border: 1px solid #000;
+      padding: 8px;
+      display: inline-block;
+      width: calc(6cm - 8px);
+      height: 14.5cm;
+      font-family: Arial, Helvetica, sans-serif;
+    ">
+    <!-- 6cm - margin  -->
+    <h4
+      class="datetime"
+      style="
+        font-size: 10px;
+        margin: 0 0 10px 0;
+        font-weight: 400;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      ">
+      <span>{{ datetime.toLocaleDateString() }}</span>
+      <span>{{ datetime.toLocaleTimeString() }}</span>
+    </h4>
+    <h2 class="material-code" style="font-size: 20px; margin: 10px 0">884797</h2>
+    <h2 class="brand" style="font-size: 20px; letter-spacing: 1px; margin: 10px 0">RX-GZ-CN</h2>
+    <h3 class="bom-code" style="font-size: 14px; margin: 10px 0">MGGZ 5725 KA</h3>
+    <h2 class="shape" style="font-size: 20px; letter-spacing: 1px; margin: 10px 0">TG14/175</h2>
+    <h3 class="order-id" style="font-size: 14px; margin: 10px 0">Po: 50024779</h3>
+    <h3 class="client" style="font-size: 14px; text-transform: uppercase; margin: 10px 0">
+      chongqing linagyou k
+    </h3>
+    <h2
+      class="sale-order-id sale-item-id"
+      style="
+        display: flex;
+        align-items: center;
+        font-size: 20px;
+        justify-content: space-between;
+        margin: 10px 0;
+      ">
+      <span>22301675</span>
+      <span>00006</span>
+    </h2>
+    <h2 class="delivery-time" style="font-size: 20px; margin: 10px 0">2022.12.18</h2>
+    <h2
+      class="pan-no"
+      style="
+        padding: 4px;
+        border: 1px solid #000;
+        font-size: 18px;
+        margin: 10px 0;
+        /* background: #000; */
+        /* color: #fff; */
+      ">
+      Pallet 1
+    </h2>
+    <div
+      class="bottom-area"
+      style="margin-bottom: 8px; display: flex; align-items: flex-start; justify-content: space-between">
+      <div
+        class="qrcode"
+        style="flex-shrink: 0; width: 128px; height: 128px; /* border: 1px solid #0003; */">
+        <img id="qrcode" style="width: 100%; height: 100%" />
+      </div>
+      <div class="" style="text-align: right">
+        <h2 class="shape-count" style="font-size: 20px; margin: 0 0 10px 8px">2890</h2>
+        <h2 class="shape-placed" style="font-size: 20px; margin: 0 0 10px 8px">120</h2>
+        <h2 class="shape-24" style="font-size: 20px; margin: 0 0 10px 8px">24x120</h2>
+        <h2 class="shape-1" style="font-size: 20px; margin: 0 0 10px 8px">1x10</h2>
+      </div>
+    </div>
+    <!-- <h2 class="pack-code" style="font-size: 20px; margin: 0 0 10px">S653</h2> -->
+    <svg id="barcode"></svg>
+  </div>
+</template>
+
+<script>
+import JsBarcode from "jsbarcode";
+import QRCode from "qrcode";
+import { getLodop } from "@/utils/Lodop";
+
+export default {
+  name: "PrintDom",
+  components: {},
+  props: {},
+  data() {
+    return {
+      lodop: null,
+      datetime: new Date()
+    };
+  },
+  computed: {},
+  methods: {
+    print(data) {
+      console.log("print data", data);
+      // 初始化打印控件
+      if (!this.initPrintPlugin()) return this.close();
+
+      this.paintBarCode();
+      this.paintQrCode();
+      this.handlePrint();
+
+      this.close();
+    },
+    initPrintPlugin() {
+      this.lodop = getLodop();
+      if (!this.lodop) {
+        alert("请先安装打印控件");
+        return false;
+      }
+      return true;
+    },
+    paintBarCode(data) {
+      console.log("JSBarcode", JsBarcode);
+      JsBarcode("#barcode", "S653", {
+        format: "CODE128",
+        width: 2.5,
+        height: 48,
+        displayValue: true,
+        margin: 0,
+      });
+    },
+    paintQrCode(data) {
+      console.log("JSBarcode", QRCode);
+      QRCode.toDataURL(
+        "S653",
+        {
+          width: 128,
+          height: 128,
+        },
+        (err, url) => {
+          if (err) {
+            document.querySelector(".qrcode").innerHTML = "no QRCode";
+            return;
+          }
+          console.log("url", url);
+          document.querySelector("#qrcode").src = url;
+        }
+      );
+    },
+    handlePrint() {
+      this.lodop.PRINT_INIT("RGV小票打印");
+      // 纵向打印，宽度60mm，高度150mm，定义纸张名称
+      this.lodop.SET_PRINT_PAGESIZE(1, 600, 1500, "ZebraT231 Tag Paper");
+      this.lodop.ADD_PRINT_HTM(0, 0, "100%", "100%", document.querySelector(".print-area").outerHTML);
+      this.lodop.PREVIEW();
+    },
+    close() {
+      this.$emit("destroy");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.print-area {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  visibility: hidden;
+}
+</style>

src/utils/Lodop.js

@@ -0,0 +1,77 @@
+//用双端口加载主JS文件Lodop.js(或CLodopfuncs.js兼容老版本)以防其中某端口被占:
+var MainJS = "CLodopfuncs.js",
+  URL_WS1 = "ws://localhost:8000/" + MainJS, //ws用8000/18000
+  URL_WS2 = "ws://localhost:18000/" + MainJS,
+  URL_HTTP1 = "http://localhost:8000/" + MainJS, //http用8000/18000
+  URL_HTTP2 = "http://localhost:18000/" + MainJS,
+  URL_HTTP3 = "https://localhost.lodop.net:8443/" + MainJS; //https用8000/8443
+
+//==检查加载成功与否，如没成功则用http(s)再试==
+//==低版本CLODOP6.561/Lodop7.043及前)用本方法==
+function checkOrTryHttp() {
+  if (window.getCLodop) return true;
+  var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
+  var JS1 = document.createElement("script"),
+    JS2 = document.createElement("script"),
+    JS3 = document.createElement("script");
+  JS1.src = URL_HTTP1;
+  JS2.src = URL_HTTP2;
+  JS3.src = URL_HTTP3;
+  JS1.onerror = function (e) {
+    if (window.location.protocol !== "https:") head.insertBefore(JS2, head.firstChild);
+    else head.insertBefore(JS3, head.firstChild);
+  };
+  JS2.onerror = JS3.onerror = function () {
+    var JSelf = document.createElement("script");
+    JSelf.src = "/" + MainJS; //JSelf让其它电脑通过本机打印（仅适用CLodop自带例子）
+    document.head.insertBefore(JSelf, document.head.firstChild);
+  };
+  head.insertBefore(JS1, head.firstChild);
+}
+
+//==加载Lodop对象的主过程:==
+(function loadCLodop() {
+  if (!window.WebSocket && window.MozWebSocket) window.WebSocket = window.MozWebSocket;
+  //ws方式速度快(小于200ms)且可避免CORS错误,但要求Lodop版本足够新:
+  try {
+    var WSK1 = new WebSocket(URL_WS1);
+    WSK1.onopen = function (e) {
+      setTimeout(checkOrTryHttp, 200);
+    };
+    WSK1.onmessage = function (e) {
+      if (!window.getCLodop) eval(e.data);
+    };
+    WSK1.onerror = function (e) {
+      var WSK2 = new WebSocket(URL_WS2);
+      WSK2.onopen = function (e) {
+        setTimeout(checkOrTryHttp, 200);
+      };
+      WSK2.onmessage = function (e) {
+        if (!window.getCLodop) eval(e.data);
+      };
+      WSK2.onerror = function (e) {
+        checkOrTryHttp();
+      };
+    };
+  } catch (e) {
+    checkOrTryHttp();
+  }
+})();
+
+//==获取LODOP对象的主过程:==
+export function getLodop(oOBJECT, oEMBED) {
+  var LODOP;
+  try {
+    LODOP = window.getCLodop();
+    if (!LODOP && document.readyState !== "complete") {
+      alert("C-Lodop没准备好，请稍后再试！");
+      return;
+    }
+    //清理原例子内的object或embed元素，避免乱提示：
+    if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
+    if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
+    return LODOP;
+  } catch (err) {
+    alert("getLodop出错:" + err);
+  }
+}

src/views/atomViews/ListViewWithHead.vue

@@ -61,6 +61,8 @@
         }
       " />
     <Overlay v-if="overlayVisible" />
+
+    <PrintDom ref="print" v-if="printDOMmount" @destroy="printDOMmount = false" />
   </div>
 </template>
 
@@ -74,6 +76,7 @@ import DialogUpload from "@/components/DialogUpload.vue";
 import Overlay from "@/components/Overlay.vue";
 import moment from "moment";
 import AttachmentDialog from "@/components/attachmentDialog.vue";
+import PrintDom from "../../components/PrintDom.vue";
 
 const DIALOG_WITH_MENU = "DialogWithMenu";
 const DIALOG_JUST_FORM = "DialogJustForm";
@@ -90,6 +93,7 @@ export default {
     DialogUpload,
     Overlay,
     AttachmentDialog,
+    PrintDom,
   },
   props: {
     navigator: {
@@ -176,6 +180,7 @@ export default {
       cachedSearchCondition: {},
       needAttachmentDialog: false,
       tableSelectedIds: [],
+      printDOMmount: false,
     };
   },
   inject: ["urls"],
@@ -566,7 +571,7 @@ export default {
           break;
         }
         case "sync": {
-          this.$confirm(`是否开始同步`, "提示", {
+          return this.$confirm(`是否开始同步`, "提示", {
             confirmButtonText: "同步",
             cancelButtonText: "我再想想",
             type: "warning",
@@ -610,6 +615,18 @@ export default {
               });
           });
         }
+        case "print": {
+          return this.$confirm("开始打印么", "提示", {
+            confirmButtonText: "确认",
+            cancelButtonText: "我再想想",
+            type: "warning",
+          }).then(() => {
+            this.printDOMmount = true;
+            this.$nextTick(() => {
+              this.$refs["print"].print(data);
+            });
+          });
+        }
       }
     },