add print logic
This commit is contained in:
@@ -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",
|
||||
|
||||
174
src/components/PrintDom.vue
Normal file
174
src/components/PrintDom.vue
Normal file
@@ -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>
|
||||
77
src/utils/Lodop.js
Normal file
77
src/utils/Lodop.js
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user