document.write( "" ); document.write( "" ); document.write( "" ); document.write( "" ); document.write( "" ); document.write( "" ); document.write( "" ); document.write( "" ); document.write( "" ); document.write( "" ); document.write( "" ); document.write( "" ); document.write( "" ); var bCanclePrint = false; var allPrinters; var pageIndex = 1; var app = new Vue({ el: '#app', data: { form: { paperType: '1', density: '3', pageCount: '1', quantityCount: '2', printMode: '1' }, formLabelWidth: "120px", options: [], tags: [], isBarCode:false, isInit: false, versionInit: false, isVersion:false, isInitApi: false, isDraw: false, isEditTag: false, editIndex: 0, dialogInitDrawingBoardParam: false, dialogDrawLableNameTextParam: false, dialogDrawLableVersionTextParam: false, dialogDrawLableBarCodeParam: false, dialogDrawLableQrCodeParam: false, dialogDrawLableLineParam: false, dialogDrawLableGraphParam: false, dialogDrawLableImageParam: false, value: '', imgSrc: '', initSdkParam: {//初始化数据 "fontDir": "", }, // 画布初始化参数 InitDrawingBoardParam: { "width": 50, "height": 30, "rotate": 0, "path": "ZT001.ttf", "verticalShift": 0, "HorizontalShift": 0 }, // 初始化名称文本参数 DrawLableNameTextParam: { "x": 20.0, "y": 1.0, "height": 10, "width": 50, "value": document.getElementById("name").value, "fontFamily": "宋体", "rotate": 0, "fontSize": 4.0, "textAlignHorizonral": 0, "textAlignVertical": 0, "letterSpacing": 1.0, "lineSpacing": 1.0, "lineMode": 0, "fontStyle": [false, false, false, false], }, // 初始化型号 DrawLableVersionTextParam: { "x": 10.0, "y": 8.0, "height": 10, "width": 50, "value": document.getElementById("version").value, "fontFamily": "宋体", "rotate": 0, "fontSize": 4.0, "textAlignHorizonral": 0, "textAlignVertical": 0, "letterSpacing": 1.0, "lineSpacing": 1.0, "lineMode": 0, "fontStyle": [false, false, false, false], }, // 初始化条形码参数 DrawLableBarCodeParam: { "x": 5.0, "y": 10.0, "height": 10, "width": 40, "value": document.getElementById("materialQrCode").value,// 获取当前打印的码值 "codeType": 20, "rotate": 0, "fontSize": 4.0, "textHeight": 0, "textPosition": 0, }, // 初始化二维码参数 DrawLableQrCodeParam: { "x": 20.0, "y": 10.0, "height": 10, "width": 10, "value": document.getElementById("materialQrCode").value, //获取当前打印的码值 "rotate": 0, "codeType": 31, }, // 初始化线条参数 DrawLableLineParam: { "x": 2.0, "y": 2.0, "height": 2, "width": 50, "rotate": 0, "lineType": 2, "dashwidth": [1, 1], }, // 初始化图形参数 DrawLableGraphParam: { "x": 2.0, "y": 5.0, "height": 30, "width": 40, "rotate": 0, "graphType": 3, "cornerRadius": 0, "lineWidth": 4, "lineType": 2, "dashwidth": [1, 1], }, // 初始化图片参数 DrawLableImageParam: { "x": 2.0, "y": 2.0, "height": 10, "width": 50, "rotate": 0, "imageProcessingType": 0, "imageProcessingValue": 127, "imageData": "", "imgSrc": '' }, DrawLableGraphParamDemo: { "x": 2.0, "y": 2.0, "width": 46, "height": 26, "rotate": 0, "graphType": 3, "cornerRadius": 0, "lineWidth": 0.5, "lineType": 1, "dashwidth": [1, 1], }, }, mounted() { // 初始化打印服务 let instance = getInstance(); if (!instance) { // 如果失败 this.$alert('初始化打印服务失败,请重试', '提示', { confirmButtonText: '确定', callback: action => { // 关闭当前页 var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); } }); } }, methods: { // sdk重新初始化 initSdkApi() { initSdk(this.initSdkParam); this.isInitApi = true }, // 选择打印机 selectPrinterApi() { let printerName = ''; for (let index = 0; index < this.options.length; index++) { if (this.value === this.options[index].value) printerName = this.options[index].label } // 选中打印设备(默认选中第一个) selectPrinter(printerName, parseInt(this.value), (data => { var arrParse = JSON.parse(JSON.stringify(data)); if (!arrParse.resultAck.result) { this.$alert('打印设备选择失败,请重试', '提示', { confirmButtonText: '确定', callback: action => { // 关闭当前页 var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); } }); } else if (isJSON(arrParse.resultAck.info)) { //选择成功,打印机连接成功 // console.log(data) } })); }, // 用于重新获取打印机 refreshPrinters() { getAllPrinters(data => { // 返回结果规范化 let arrParse = JSON.parse(JSON.stringify(data)); if (!arrParse.resultAck.result || arrParse.resultAck.result === 'false') { this.$alert('打印机获取失败,请重试', '提示', { confirmButtonText: '确定', callback: action => { // 关闭当前页 var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); } }); } else if (isJSON(arrParse.resultAck.info)) { // 获取所有打印设备 allPrinters = JSON.parse(arrParse.resultAck.info); // 所有设备名称 let allPrintersName = Object.keys(allPrinters); // 所有设备对应值 let allPrintersValue = Object.values(allPrinters); // 下拉框值 this.options = []; for (i = 0; i < allPrintersName.length; i++) { // 选择项 let newopt = {}; // 选择项标题 newopt.label = allPrintersName[i]; // 选择项值 newopt.value = allPrintersValue[i]; // 添加选择项 this.options.push(newopt) } // 选中打印设备(默认选中第一个) selectPrinter(allPrintersName[0], parseInt(allPrintersValue[0]), (data => { // 返回结果规范化 var arrParse = JSON.parse(JSON.stringify(data)); if (!arrParse.resultAck.result || arrParse.resultAck.result === 'false') { this.$alert('打印设备选择失败,请重试', '提示', { confirmButtonText: '确定', callback: action => { // 关闭当前页 var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); } }); } else if (isJSON(arrParse.resultAck.info)) { //选择成功,打印机连接成功 // console.log(data) } })); } }); }, // 初始化画板 InitDrawingBoardApi() { // 用于弹出“初始化绘图板参数”对话框 this.dialogInitDrawingBoardParam = true; this.isDraw = false; this.imgSrc = ""; }, handleClose(index) { this.tags.splice(index, 1); }, clickTag(tag, index) { this.isEditTag = true; this.editIndex = index; switch (tag.name) { case "名称": this.DrawLableNameTextParam = {...tag}; this.dialogDrawLableNameTextParam = true; break; case "型号": this.DrawLableVersionTextParam = {...tag}; this.dialogDrawLableVersionTextParam = true; break; case "一维码": this.DrawLableBarCodeParam = {...tag}; this.dialogDrawLableBarCodeParam = true; break; case "二维码": this.DrawLableQrCodeParam = {...tag}; this.dialogDrawLableQrCodeParam = true; break; case "线条": this.DrawLableLineParam = {...tag}; this.dialogDrawLableLineParam = true; break; case "形状": this.DrawLableGraphParam = {...tag}; this.dialogDrawLableGraphParam = true; break; case "图片": this.DrawLableImageParam = {...tag}; this.dialogDrawLableImageParam = true; break; } }, // 初始化画布 InitDrawingBoardPar(callbackFunction) { // 如果没有填写高度或者宽度 if (!this.InitDrawingBoardParam.width || !this.InitDrawingBoardParam.height) { this.$message({ message: '请选填写画板宽高', type: 'warning' }); return } // 设置宽度 this.InitDrawingBoardParam.width = Number(this.InitDrawingBoardParam.width); // 设置高度 this.InitDrawingBoardParam.height = Number(this.InitDrawingBoardParam.height); // 创建画板 /** * 1.绘制元素前,必须先初始化画板,否则会引起崩溃! 2.初始化画板时会清空画板上次绘制的内容! */ InitDrawingBoard(this.InitDrawingBoardParam, res => { // 返回结果规范化 var arrParse = JSON.parse(JSON.stringify(res)); if (arrParse.resultAck.result !== 0) { // 如果初始化失败 this.isInit = false; // 隐藏生成按钮 this.$message({ // 发起提示 message: '初始化画布失败,请重试', type: 'warning' }); } else { // 展示生成按钮 this.isInit = true; let version = $("#version").val(); if ("noMaterial" !== version) { this.versionInit = true; } } }); // 关闭弹窗 this.dialogInitDrawingBoardParam = false; }, // 文本 DrawLableNameTextApi() { this.DrawLableNameTextParam.width = Number(this.DrawLableNameTextParam.width); this.DrawLableNameTextParam.height = Number(this.DrawLableNameTextParam.height); this.DrawLableNameTextParam.x = Number(this.DrawLableNameTextParam.x); this.DrawLableNameTextParam.y = Number(this.DrawLableNameTextParam.y); this.DrawLableNameTextParam.fontSize = Number(this.DrawLableNameTextParam.fontSize); this.DrawLableNameTextParam.textAlignHorizonral = Number(this.DrawLableNameTextParam.textAlignHorizonral); this.DrawLableNameTextParam.lineSpacing = Number(this.DrawLableNameTextParam.lineSpacing); DrawLableText(this.DrawLableNameTextParam, res => { var arrParse = JSON.parse(JSON.stringify(res)); //⼀维码绘制失败,退出绘制 if (arrParse.resultAck.result !== 0) { this.$message({ // 发起提示 message: '绘制失败,请重试', type: 'warning' }); } }); this.DrawLableNameTextParam.name = "名称"; if (this.isEditTag) { this.$set(this.tags, this.editIndex, this.DrawLableNameTextParam); } else { this.tags.push(this.DrawLableNameTextParam) } this.dialogDrawLableNameTextParam = false; this.isDraw = true }, // 型号 DrawLableVersionTextApi() { this.DrawLableVersionTextParam.width = Number(this.DrawLableVersionTextParam.width); this.DrawLableVersionTextParam.height = Number(this.DrawLableVersionTextParam.height); this.DrawLableVersionTextParam.x = Number(this.DrawLableVersionTextParam.x); this.DrawLableVersionTextParam.y = Number(this.DrawLableVersionTextParam.y); this.DrawLableVersionTextParam.fontSize = Number(this.DrawLableVersionTextParam.fontSize); this.DrawLableVersionTextParam.textAlignHorizonral = Number(this.DrawLableVersionTextParam.textAlignHorizonral); this.DrawLableVersionTextParam.lineSpacing = Number(this.DrawLableVersionTextParam.lineSpacing); DrawLableText(this.DrawLableVersionTextParam, res => { var arrParse = JSON.parse(JSON.stringify(res)); //⼀维码绘制失败,退出绘制 if (arrParse.resultAck.result !== 0) { this.$message({ // 发起提示 message: '绘制失败,请重试', type: 'warning' }); } }); this.DrawLableVersionTextParam.name = "型号"; if (this.isEditTag) { this.$set(this.tags, this.editIndex, this.DrawLableVersionTextParam); } else { this.tags.push(this.DrawLableVersionTextParam) } this.dialogDrawLableVersionTextParam = false; this.isVersion = true; this.isDraw = true }, // 一维码 DrawLableBarCodeApi() { this.DrawLableBarCodeParam.width = Number(this.DrawLableBarCodeParam.width); this.DrawLableBarCodeParam.height = Number(this.DrawLableBarCodeParam.height); this.DrawLableBarCodeParam.x = Number(this.DrawLableBarCodeParam.x); this.DrawLableBarCodeParam.y = Number(this.DrawLableBarCodeParam.y); this.DrawLableBarCodeParam.textHeight = Number(this.DrawLableBarCodeParam.textHeight); if (this.isVersion) { this.DrawLableBarCodeParam.y = Number(this.DrawLableBarCodeParam.y) + (Number(this.DrawLableVersionTextParam.y) * 0.8); } this.DrawLableBarCodeParam.name = "条形码"; if (this.isEditTag) { this.$set(this.tags, this.editIndex, this.DrawLableBarCodeParam); } else { this.tags.push(this.DrawLableBarCodeParam) } this.isBarCode = true; this.dialogDrawLableBarCodeParam = false; this.isDraw = true }, // 二维码 DrawLableQrCodeApi() { this.DrawLableQrCodeParam.width = Number(this.DrawLableQrCodeParam.width); this.DrawLableQrCodeParam.height = Number(this.DrawLableQrCodeParam.width); this.DrawLableQrCodeParam.x = Number(this.DrawLableQrCodeParam.x); this.DrawLableQrCodeParam.y = Number(this.DrawLableQrCodeParam.y); this.DrawLableQrCodeParam.name = "二维码"; if (this.isVersion) { this.DrawLableQrCodeParam.y = Number(this.DrawLableQrCodeParam.y) + (Number(this.DrawLableVersionTextParam.y) * 0.8); } if (this.isEditTag) { this.$set(this.tags, this.editIndex, this.DrawLableQrCodeParam); } else { this.tags.push(this.DrawLableQrCodeParam) } this.dialogDrawLableQrCodeParam = false; this.isDraw = true; this.isBarCode = false; }, DragList(List) { List.forEach(res => { }) }, // 预览时进行绘制 generateImagePreviewImagepi() { let List = [...this.tags]; // 创建画布 InitDrawingBoard(this.InitDrawingBoardParam, (data => { List.forEach(res => { switch (res.name) { case "名称": DrawLableText(res); break; case "型号": DrawLableText(res); break; case "条形码": DrawLableBarCode(res); break; case "二维码": DrawLableQrCode(res); break; case "线条": DrawLableLine(res); break; case "形状": DrawLableGraph(res); break; case "图片": DrawLableImage(res); break; } }); // 标签预览 generateImagePreviewImage(generateImagePreviewImageParam['displayScale'], (data => { var arrParse = JSON.parse(JSON.stringify(data)); //var Epc = document.getElementById('searchRfidBox'); var base64Data = arrParse.resultAck.info; var obj = JSON.parse(base64Data); var data = obj.ImageData; var errorCode = obj.errorCode; this.imgSrc = "data:image/jpeg;base64," + data; // self.isInit = false })) })); }, //清空 emptyImagePreviewImage() { this.imgSrc = ""; this.tags = []; this.isDraw = false }, DrawLableTextNameApiDemo(DrawLableTextParamDemo, callbackFunction) { DrawLableText(DrawLableTextParamDemo, callbackFunction); }, DrawLableTextVersionNameApiDemo(DrawLableTextParamDemo, callbackFunction) { DrawLableText(DrawLableTextParamDemo, callbackFunction); }, DrawLableGraphApiDemo(callbackFunction) { DrawLableGraph(this.DrawLableGraphParamDemo, callbackFunction); }, DrawLableLineApiDemo(DrawLableLineParamDemo, callbackFunction) { DrawLableLine(DrawLableLineParamDemo, callbackFunction); }, DrawLableBarCodeApiDemo(drawLableBarCodeParamDemo, callableFunction) { DrawLableBarCode(drawLableBarCodeParamDemo, callableFunction) }, DrawLableQrCodeApiDemo(drawLableQrCodeParamDemo, callableFunction) { DrawLableQrCode(drawLableQrCodeParamDemo, callableFunction) }, downLoadServer(){ window.open("/download/zipDownload","_self"); }, /** * 开始打印任务 * @param {*} pageCount 打印页数 * @param {*} quantityCount 打印份数 * @param {*} density 浓度 * @param {*} paperType 纸张类型 * @param {*} paperType 材质 * @param {*} paperType 打印模式 */ startPrintJob(index) { let { pageCount = "1", quantityCount = "1", density = "3", paperType = "1", printMode = "1" } = this.form; const self = this; switch (index) { case 1: quantityCount = 1; break; case 2: quantityCount = 1; pageCount = 2; break; case 4: pageCount = 2; break; } if (this.value === "") { self.$message({ message: '请选择连接打印机', type: 'warning' }); return; } if (!this.form.quantityCount && (index === 3 || index === 4)) { self.$message({ message: '请选填写打印份数', type: 'warning' }); return; } // 为了防止打印时未生成对应图像事先初始化 // 初始化画板 if (this.isBarCode) { // 如果打印条形码 if (this.isVersion) { InitDrawingBoard(this.InitDrawingBoardParam, (data1 => { this.DrawLableTextNameApiDemo(this.DrawLableNameTextParam, (data => { this.DrawLableTextVersionNameApiDemo(this.DrawLableVersionTextParam, (data => { this.DrawLableBarCodeApiDemo(this.DrawLableBarCodeParam, (data => { // 提交数据 var totalCount = parseInt(pageCount) * parseInt(quantityCount); startJob(parseInt(density), parseInt(paperType), parseInt(printMode), totalCount, function (data) { bCanclePrint = false; var arrParse = JSON.parse(JSON.stringify(data)); if (arrParse.resultAck.result !== 0) { self.$message({ message: '打印失败!', type: 'warning' }); return; } var intPageCount = parseInt(pageCount); var intQuantityCount = parseInt(quantityCount); self.sendCommitJob(self.DrawLableTextParamDemo, pageIndex, intPageCount, intQuantityCount); }); })) })) })) })) } else { // 不打印型号 InitDrawingBoard(this.InitDrawingBoardParam, (data1 => { this.DrawLableTextNameApiDemo(this.DrawLableNameTextParam, (data => { this.DrawLableBarCodeApiDemo(this.DrawLableBarCodeParam, (data => { // 提交数据 var totalCount = parseInt(pageCount) * parseInt(quantityCount); startJob(parseInt(density), parseInt(paperType), parseInt(printMode), totalCount, function (data) { bCanclePrint = false; var arrParse = JSON.parse(JSON.stringify(data)); if (arrParse.resultAck.result !== 0) { self.$message({ message: '打印失败!', type: 'warning' }); return; } var intPageCount = parseInt(pageCount); var intQuantityCount = parseInt(quantityCount); self.sendCommitJob(self.DrawLableTextParamDemo, pageIndex, intPageCount, intQuantityCount); }); })) })) })) } } else { // 如果打印二维码 if (this.isVersion) { InitDrawingBoard(this.InitDrawingBoardParam, (data1 => { this.DrawLableTextNameApiDemo(this.DrawLableNameTextParam, (data => { this.DrawLableTextVersionNameApiDemo(this.DrawLableVersionTextParam, (data => { this.DrawLableQrCodeApiDemo(this.DrawLableBarCodeParam, (data => { // 提交数据 var totalCount = parseInt(pageCount) * parseInt(quantityCount); startJob(parseInt(density), parseInt(paperType), parseInt(printMode), totalCount, function (data) { bCanclePrint = false; var arrParse = JSON.parse(JSON.stringify(data)); if (arrParse.resultAck.result !== 0) { self.$message({ message: '打印失败!', type: 'warning' }); return; } var intPageCount = parseInt(pageCount); var intQuantityCount = parseInt(quantityCount); self.sendCommitJob(self.DrawLableTextParamDemo, pageIndex, intPageCount, intQuantityCount); }); })) })) })) })) } else { InitDrawingBoard(this.InitDrawingBoardParam, (data1 => { this.DrawLableTextNameApiDemo(this.DrawLableNameTextParam, (data => { this.DrawLableQrCodeApiDemo(this.DrawLableQrCodeParam, (data => { // 提交数据 var totalCount = parseInt(pageCount) * parseInt(quantityCount); startJob(parseInt(density), parseInt(paperType), parseInt(printMode), totalCount, function (data) { bCanclePrint = false; var arrParse = JSON.parse(JSON.stringify(data)); if (arrParse.resultAck.result !== 0) { self.$message({ message: '打印失败!', type: 'warning' }); return; } var intPageCount = parseInt(pageCount); var intQuantityCount = parseInt(quantityCount); self.sendCommitJob(self.DrawLableTextParamDemo, pageIndex, intPageCount, intQuantityCount); }); })) })) })) } } }, /** * 提交打印数据 * @param {string} printData 打印数据 * @param {string} printerInfo 打印机信息 * @param {number} pageIndex 页序号 * @param {number} pageCount 页数 * @param {number} quantityCount 单页的份数 */ sendCommitJob(printData, pageIndex, pageCount, quantityCount) { if (bCanclePrint) { return; } const self = this; var jsonObj = {"printerImageProcessingInfo": {"printQuantity": quantityCount}}; commitJob(null, JSON.stringify(jsonObj), function (data) { var arrParse = JSON.parse(JSON.stringify(data)); var resultInfo = "commitJob ok"; if (arrParse.resultAck.printQuantity === pageCount && arrParse.resultAck.onPrintPageCompleted === quantityCount) { //所有⻚数据的所有份数打印完成 endJob(function (data) { // 停止打印 var arrParse = JSON.parse(JSON.stringify(data)); if (String(arrParse.resultAck.info).indexOf("endJob ok") > -1) { // document.getElementById("printId").disabled = false; } }); return; } //异常导致打印取消 if (arrParse.resultAck.errorCode !== 0 && (arrParse.resultAck.cacheStatus === "cancel")) { // document.getElementById("printId").disabled = false; return; } //异常导致打印暂停 if (arrParse.resultAck.errorCode !== 0 && (arrParse.resultAck.cacheStatus === "pause")) { cancleJobApi(); return; } //当前⻚所有份数打印完成,但是未打印完所有⻚数据,继续发送下⼀⻚数据 if (String(arrParse.resultAck.info).indexOf(resultInfo) > -1 && pageIndex !== pageCount) { pageIndex++; setTimeout(function () { // 初始化画板 if (this.isBarCode) { // 如果绘制条形码 if (self.isVersion) { // 如果绘制型号 InitDrawingBoard(self.InitDrawingBoardParam, (data1 => { self.DrawLableTextNameApiDemo(self.DrawLableNameTextParam, (data => { // 添加型号 self.DrawLableTextVersionNameApiDemo(self.DrawLableVersionTextParam, (data => { self.DrawLableBarCodeApiDemo(self.DrawLableBarCodeParam, (data => { self.sendCommitJob(self.DrawLableTextParamDemo, pageIndex, pageCount, quantityCount); })) })) })) })) } else { // 如果不绘制型号 InitDrawingBoard(self.InitDrawingBoardParam, (data1 => { self.DrawLableTextNameApiDemo(self.DrawLableNameTextParam, (data => { self.DrawLableBarCodeApiDemo(self.DrawLableBarCodeParam, (data => { self.sendCommitJob(self.DrawLableTextParamDemo, pageIndex, pageCount, quantityCount); })) })) })) } } else { // 如果绘制二维码 // 如果绘制型号 if (self.isVersion) { InitDrawingBoard(self.InitDrawingBoardParam, (data1 => { self.DrawLableTextNameApiDemo(self.DrawLableNameTextParam, (data => { // 添加型号 self.DrawLableTextVersionNameApiDemo(self.DrawLableVersionTextParam, (data => { self.DrawLableQrCodeApiDemo(self.DrawLableQrCodeParam, (data => { self.sendCommitJob(self.DrawLableTextParamDemo, pageIndex, pageCount, quantityCount); })) })) })) })) } else { // 如果不绘制型号 InitDrawingBoard(self.InitDrawingBoardParam, (data1 => { self.DrawLableTextNameApiDemo(self.DrawLableNameTextParam, (data => { self.DrawLableQrCodeApiDemo(self.DrawLableQrCodeParam, (data => { self.sendCommitJob(self.DrawLableTextParamDemo, pageIndex, pageCount, quantityCount); })) })) })) } } // 提交数据 }, 500); } }); } }, });