<template>
|
<div class="app-container">
|
<div style="margin-bottom: 40px;">
|
<img src="../../assets/back.svg" style="width:30px;height:30px" @click="goBefore()" align="left"></img>
|
</div>
|
<el-table
|
v-loading="listLoading"
|
:key="tableKey"
|
:data="printData"
|
border
|
fit
|
highlight-current-row
|
>
|
<el-table-column label="批次号" prop="batchCode" align="center" width="80" >
|
<template slot-scope="scope">
|
<span>{{ scope.row.batchCode }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="合同单号" prop="orderCode" align="center" >
|
<template slot-scope="scope">
|
<span>{{ scope.row.orderCode }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="首位标签" prop="startCode" align="center" >
|
<template slot-scope="scope">
|
<span>{{ scope.row.startCode }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="末尾标签" prop="endCode" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.endCode }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center">
|
<template slot-scope="scope">
|
<el-button type="text" @click="printByHtml(scope.row)" >网页打印</el-button>
|
<el-button type="text" @click="printByControl(scope.row)" >控件打印</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div v-show="false">
|
<div id="printMe">
|
<el-row style="position: absolute;z-index: -1;">
|
<el-col :span="12" style="padding:3px 3px 3px 3px;">
|
<div style="height:125px;width:180px;border:2px solid;border-radius:10px;"></div>
|
</el-col>
|
<el-col :span="12" style="padding:3px 3px 3px 7px;">
|
<div style="height:125px;width:180px;border:2px solid;border-radius:10px;"></div>
|
</el-col>
|
</el-row>
|
<el-row style="padding-top: 6px">
|
<el-col :span="12" align="center" >
|
<span style="font-size: 13px;">{{"新疆流向专用"}}</span>
|
</el-col>
|
<el-col :span="12" align="center">
|
<span style="font-size: 13px;margin-top: 3px">{{"新疆流向专用"}}</span>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="12" align="left">
|
<el-row>
|
<el-col :span="14" style="padding-left: 15px">
|
<el-row>
|
<el-col :span="24" align="left">
|
<span style="font-size: 10px;" id="itemnameOne">{{itemnameOne}}</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24" align="left">
|
<span style="font-size: 10px;" id="typeOne">{{typeOne}}</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24" align="left">
|
<span style="font-size: 10px;" id="createddateOne">{{createddateOne}}</span>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col :span="10">
|
<el-col :span="24" align="center" style="margin-top: 10px">
|
<div id="qrcode1" ref="qrcode" class="qrcode"/>
|
</el-col>
|
</el-col>
|
</el-row>
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" style="margin-left: 15px">-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" align="left">-->
|
<!-- <span style="font-size: 8px;" id="manufacturerOne">{{manufacturerOne}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
</el-col>
|
<el-col :span="12" align="left">
|
<el-row>
|
<el-col :span="14" style="padding-left: 15px">
|
<!-- <el-row >-->
|
<!-- <el-col :span="24" align="left" style="margin-top: 5px">-->
|
<!-- <span style="font-size: 8px;" id="itemcodeTwo">{{itemcodeTwo}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<el-row>
|
<el-col :span="24" align="left">
|
<span style="font-size: 10px;" id="itemnameTwo">{{itemnameTwo}}</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24" align="left">
|
<span style="font-size: 10px;" id="typeTwo">{{typeTwo}}</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24" align="left">
|
<span style="font-size: 10px;" id="createddateTwo">{{createddateTwo}}</span>
|
</el-col>
|
</el-row>
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" align="left">-->
|
<!-- <span style="font-size: 8px;" id="manufacturerTwo">{{manufacturerTwo}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
</el-col>
|
<el-col :span="10">
|
<el-col :span="24" align="center" style="margin-top: 10px">
|
<div id="qrcode2" class="qrcode" ref="qrcode"/>
|
</el-col>
|
</el-col>
|
<!-- <el-col :span="24" style="padding-left: 15px">-->
|
<!-- <el-row>-->
|
<!-- <el-col align="left">-->
|
<!-- <span style="font-size: 8px;" id="manufacturerTwo"></span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- </el-col>-->
|
</el-row>
|
</el-col>
|
</el-row>
|
<el-row style="height: 38px">
|
<el-col :span="12" align="left" class="barcode">
|
<svg id="barcode1"/>
|
</el-col>
|
<el-col :span="12" align="left" class="barcode">
|
<svg id="barcode2"/>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12" align="left">
|
<el-row>
|
<el-col :span="14" style="padding-left: 15px">
|
<el-row>
|
<el-col :span="24" align="left">
|
<span style="font-size: 10px;" id="itemcodeOne">{{itemcodeOne}}</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24" align="left">
|
<span style="font-size: 10px;" id="manufacturerOne">{{manufacturerOne}}</span>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col :span="12" align="left">
|
<el-row>
|
<el-col :span="14" style="padding-left: 15px">
|
<el-row>
|
<el-col :span="24" align="left">
|
<span style="font-size: 10px;" id="itemcodeTwo">{{itemcodeTwo}}</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24" align="left">
|
<span style="font-size: 10px;" id="manufacturerTwo">{{manufacturerTwo}}</span>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
<!-- <el-row>-->
|
<!-- <el-col :span="12" align="left">-->
|
<!-- <span style="font-size: 8px;padding-left: 15px;" id="itemcodeOne"></span>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="12" align="left">-->
|
<!-- <span style="font-size: 8px;padding-left: 15px" id="itemcodeTwo"></span>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="12" align="left">-->
|
<!-- <span style="font-size: 8px;padding-left: 15px" id="manufacturerOne"></span>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="12" align="left">-->
|
<!-- <span style="font-size: 8px;padding-left: 15px" id="manufacturerTwo"></span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
</div>
|
</div>
|
<div v-show="false">
|
<div id="printMeSingle" >
|
<el-row style="position: absolute;z-index: -1;">
|
<el-col :span="12" style="padding:3px 3px 3px 3px;">
|
<div style="height:125px;width:180px;border:2px solid;border-radius:10px;"></div>
|
</el-col>
|
</el-row>
|
<el-row style="padding-top: 6px">
|
<el-col :span="12" align="center">
|
<span style="font-size: 13px;">{{"新疆流向专用"}}</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12" align="left">
|
<el-row>
|
<el-col :span="14" style="padding-left: 15px">
|
<el-row>
|
<el-col :span="24" align="left">
|
<span style="font-size: 10px;" id="itemname">{{itemnameOne}}</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24" align="left">
|
<span style="font-size: 10px;" id="type">{{typeOne}}</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24" align="left">
|
<span style="font-size: 10px;" id="createddate">{{createddateOne}}</span>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col :span="10">
|
<el-col :span="24" align="center" style="margin-top: 10px">
|
<div id="qrcode" ref="qrcode" class="qrcode"/>
|
</el-col>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
<el-row style="height: 38px">
|
<el-col :span="12" align="left" class="barcode">
|
<svg id="barcode"/>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12" align="left">
|
<el-row>
|
<el-col :span="14" style="padding-left: 15px">
|
<el-row>
|
<el-col :span="24" align="left">
|
<span style="font-size: 10px;" id="itemcode">{{itemcodeOne}}</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24" align="left">
|
<span style="font-size: 10px;" id="manufacturer">{{manufacturerOne}}</span>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<div v-show="false">
|
<div id="printMeNull">
|
<span>{{"."}}</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import JsBarcode from "jsbarcode";
|
import QRCode from "qrcodejs2";
|
import {printBarCode, printZPL} from "../../api/contract";
|
import axios from "axios";
|
|
export default {
|
name: "print",
|
computed: {
|
...mapGetters([
|
'printBar',
|
])
|
},
|
data(){
|
return{
|
listLoading:false,
|
tableKey:'',
|
printData:[],
|
itemcode:'',
|
createddate:'',
|
itemname:'',
|
type:'',
|
manufacturer:'',
|
itemcodeOne:'',
|
itemcodeTwo:'',
|
createddateOne:'',
|
createddateTwo:'',
|
itemnameOne:'',
|
itemnameTwo:'',
|
typeOne:'',
|
typeTwo:'',
|
manufacturerOne:'',
|
manufacturerTwo:'',
|
selected_device:'',
|
devices:[],
|
}
|
},
|
created(){
|
this.getList()
|
},
|
mounted(){
|
setTimeout(()=>{
|
// this.setup()
|
})
|
|
const that = this
|
let selected_device;
|
let devices = [];
|
let model;
|
// axios.get("http://127.0.0.1:9100/available").then(res=>{
|
// debugger
|
// console.log(res);
|
// selected_device = res.data[0]
|
// });
|
BrowserPrint.getDefaultDevice("printer", function(device)
|
{
|
selected_device = device;
|
devices.push(device);
|
var zebraPrinter = new Zebra.Printer(device);
|
zebraPrinter.getInfo(function(info){model = info.model}, function(error){});
|
var option = document.createElement("option");
|
option.text = device.name;
|
BrowserPrint.getLocalDevices(function(device_list){
|
for(var i = 0; i < device_list.length; i++)
|
{
|
var device = device_list[i];
|
if(!selected_device || device.uid != selected_device.uid)
|
{
|
devices.push(device);
|
var option = document.createElement("option");
|
option.text = device.name;
|
option.value = device.uid;
|
}
|
}
|
|
}, function(){alert("Error getting local devices")},"printer");
|
|
|
}, function(error){
|
alert(error);
|
});
|
setTimeout(()=>{
|
that.selected_device = selected_device
|
},1000);
|
setTimeout(()=>{
|
if (model !== 'undefined' && model !== undefined){
|
this.$message({
|
message:"当前连接打印机："+model,
|
type:"success"
|
})
|
}
|
|
},3000);
|
|
},
|
methods:{
|
getList(){
|
this.printData = JSON.parse(sessionStorage.getItem("key"))
|
},
|
async printByControl(row){
|
row.disabled = true
|
let selected_device = this.selected_device
|
let printData
|
const params = {}
|
params['orderCode'] = row.orderCode
|
params['batchCode'] = row.batchCode
|
params['needBlank'] = this.$route.query.ifPrintBlank
|
this.listLoading = true;
|
let res = await printZPL(params)
|
if(res.data.code === '200'){
|
this.listLoading = false;
|
printData = res.data.result
|
this.selected_device.send(printData, function(success){
|
selected_device.read(function(response){
|
}, function(error){console.error(error);});
|
}, function(errorMessage){alert("Error: " + errorMessage);})
|
}else{
|
this.listLoading = false;
|
this.$message({
|
message:res.data.message,
|
type:"warning"
|
})
|
}
|
},
|
async printByHtml(row){
|
let printData;
|
if ( row != null){
|
const params = {}
|
params['orderCode'] = row.orderCode
|
params['batchCode'] = row.batchCode
|
params['needBlank'] = this.$route.query.ifPrintBlank
|
this.listLoading = true;
|
let res = await printBarCode(params)
|
if(res.data.code === '200'){
|
this.listLoading = false;
|
printData = res.data.result.productCodeVos
|
}else{
|
this.listLoading = false;
|
this.$message({
|
message:res.data.message,
|
type:"warning"
|
})
|
}
|
}else {
|
this.$message({
|
message: '请选择行',
|
type: 'warning'
|
})
|
}
|
let length = printData.length/2
|
for(let i = 0;i<length;i++){
|
if(printData[2*i].id === null ||printData[2*i+1].id === null){
|
|
if(printData[2*i].id === null && printData[2*i+1].id === null){
|
var oldWindow = window.document.body.innerHTML
|
var jubuData = document.getElementById("printMeNull").innerHTML;
|
window.document.body.innerHTML= jubuData
|
window.print()
|
window.document.body.innerHTML = oldWindow
|
}else{
|
|
document.getElementById('itemcode').innerHTML = printData[2*i].itemcode
|
document.getElementById('createddate').innerHTML = printData[2*i].createddate
|
document.getElementById('itemname').innerHTML = printData[2*i].itemname
|
document.getElementById('type').innerHTML = printData[2*i].type
|
document.getElementById('manufacturer').innerHTML = printData[2*i].manufacturer
|
JsBarcode('#barcode', printData[2*i].itemcode, {
|
format: 'CODE128',
|
lineColor: '#000',
|
background: '#EBEEF5',
|
width: 8,
|
height: 300,
|
displayValue: false
|
})
|
var oldWindow = window.document.body.innerHTML
|
var jubuData = document.getElementById("printMeSingle").innerHTML;
|
window.document.body.innerHTML= jubuData
|
document.getElementById("qrcode").innerHTML = ""
|
let qrcode = new QRCode('qrcode', {
|
width: 300,
|
height: 300, // 高度
|
text: printData[2*i].itemcode, // 二维码内容
|
// format: 'CODE128',
|
render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
|
background: '#f0f', // 背景色
|
// foreground: '#ff0' // 前景色
|
})
|
window.print()
|
window.document.body.innerHTML = oldWindow
|
}
|
}
|
else{
|
document.getElementById('itemcodeOne').innerHTML = printData[2*i].itemcode
|
document.getElementById('itemcodeTwo').innerHTML = printData[2*i+1].itemcode
|
document.getElementById('createddateOne').innerHTML = printData[2*i].createddate
|
document.getElementById('createddateTwo').innerHTML = printData[2*i+1].createddate
|
document.getElementById('itemnameOne').innerHTML = printData[2*i].itemname
|
document.getElementById('itemnameTwo').innerHTML = printData[2*i+1].itemname
|
document.getElementById('typeOne').innerHTML = printData[2*i].type
|
document.getElementById('typeTwo').innerHTML = printData[2*i+1].type
|
document.getElementById('manufacturerOne').innerHTML = printData[2*i].manufacturer
|
document.getElementById('manufacturerTwo').innerHTML = printData[2*i+1].manufacturer
|
JsBarcode('#barcode1', printData[2*i].itemcode, {
|
format: 'CODE128',
|
lineColor: '#000',
|
background: '#EBEEF5',
|
width: 8,
|
height: 300,
|
displayValue: false
|
}),
|
JsBarcode('#barcode2', printData[2*i+1].itemcode, {
|
format: 'CODE128',
|
lineColor: '#000',
|
background: '#EBEEF5',
|
width: 8,
|
height: 300,
|
displayValue: false
|
})
|
var oldWindow = window.document.body.innerHTML
|
var jubuData = document.getElementById("printMe").innerHTML;
|
window.document.body.innerHTML= jubuData
|
document.getElementById("qrcode1").innerHTML = ""
|
let qrcode = new QRCode('qrcode1', {
|
width: 300,
|
height: 300, // 高度
|
text: printData[2*i].itemcode, // 二维码内容
|
// format: 'CODE128',
|
render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
|
background: '#f0f', // 背景色
|
// foreground: '#ff0' // 前景色
|
})
|
document.getElementById("qrcode2").innerHTML = ""
|
let qrcode2 = new QRCode('qrcode2', {
|
width: 300,
|
height: 300, // 高度
|
text: printData[2*i+1].itemcode, // 二维码内容
|
// format: 'CODE128',
|
render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
|
background: '#f0f', // 背景色
|
// foreground: '#ff0' // 前景色
|
})
|
// LODOP.ADD_PRINT_HTM(0, 0, 350, 1050, document.getElementById("printMe").innerHTML)
|
// LODOP.PREVIEW();
|
window.print()
|
window.document.body.innerHTML = oldWindow
|
}
|
}
|
window.document.body.innerHTML= jubuData
|
window.location.reload();
|
},
|
goBefore(){
|
// this.$store.commit('SET_PRINT', this.printData)
|
this.$router.go(-1)
|
// this.$router.push({path:'/contract/print',query:{printData:this.printData}})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
@media print {
|
#printMe{
|
font-size: 5px !important;
|
}
|
}
|
/deep/ .el-col-24 {
|
padding: 0;
|
margin: 0;
|
height:20px;
|
}
|
/deep/ .el-col-12 {
|
padding: 0;
|
margin: 0;
|
height:20px;
|
}
|
/deep/ .el-col-11 {
|
padding: 0;
|
margin: 0;
|
height:11px;
|
}
|
/deep/ .el-col-9 {
|
padding: 0;
|
margin: 0;
|
height:11px;
|
}
|
/deep/ .el-col-8 {
|
padding: 0;
|
margin: 0;
|
height:11px;
|
}
|
/deep/ .el-col-6 {
|
padding: 0;
|
margin: 0;
|
height:11px;
|
}
|
/deep/ .el-col-4 {
|
padding: 0;
|
margin: 0;
|
height:11px;
|
}
|
/deep/ .el-col-24 {
|
padding: 0;
|
margin: 0;
|
height:11px;
|
}
|
.qrcode{
|
transform: scale(0.1);
|
transform-origin:10% -1%
|
}
|
.barcode{
|
transform: scale(0.08);
|
transform-origin:9% 100%
|
}
|
.barcodeTwo{
|
transform: scale(0.1);
|
}
|
</style>
|
|
<!--<template>-->
|
<!-- <div class="app-container">-->
|
<!-- <div style="margin-bottom: 40px;">-->
|
<!-- <img src="../../assets/back.svg" style="width:30px;height:30px" @click="goBefore()" align="left"></img>-->
|
<!-- </div>-->
|
<!-- <el-table-->
|
<!-- v-loading="listLoading"-->
|
<!-- :key="tableKey"-->
|
<!-- :data="printData"-->
|
<!-- border-->
|
<!-- fit-->
|
<!-- highlight-current-row-->
|
<!-- >-->
|
<!-- <el-table-column label="批次号" prop="batchCode" align="center" width="80" >-->
|
<!-- <template slot-scope="scope">-->
|
<!-- <span>{{ scope.row.batchCode }}</span>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column label="合同单号" prop="orderCode" align="center" >-->
|
<!-- <template slot-scope="scope">-->
|
<!-- <span>{{ scope.row.orderCode }}</span>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column label="首位标签" prop="startCode" align="center" >-->
|
<!-- <template slot-scope="scope">-->
|
<!-- <span>{{ scope.row.startCode }}</span>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column label="末尾标签" prop="endCode" align="center">-->
|
<!-- <template slot-scope="scope">-->
|
<!-- <span>{{ scope.row.endCode }}</span>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column label="操作" align="center">-->
|
<!-- <template slot-scope="scope">-->
|
<!-- <el-button type="text" @click="printByHtml(scope.row)" >网页打印</el-button>-->
|
<!-- <el-button type="text" @click="printByControl(scope.row)" >控件打印</el-button>-->
|
<!--<!– <el-button type="text" @click="reset(scope.row)">恢复</el-button>–>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<!-- </el-table>-->
|
<!-- <div v-show="false">-->
|
<!-- <div id="printMe" >-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="12" align="center">-->
|
<!-- <span style="font-size: 10px;">{{"新疆流向专用"}}</span>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="12" align="center">-->
|
<!-- <span style="font-size: 10px;margin-top: 3px">{{"新疆流向专用"}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="12" align="left" class="barcode">-->
|
<!-- <svg id="barcode1"/>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="12" align="left" class="barcode">-->
|
<!-- <svg id="barcode2"/>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="12" align="left">-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="14" style="padding-left: 15px">-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" align="left" style="margin-top: 3px;">-->
|
<!-- <span style="font-size: 8px;" id="itemcodeOne">{{itemcodeOne}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" align="left">-->
|
<!-- <span style="font-size: 8px;" id="itemnameOne">{{itemnameOne}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" align="left">-->
|
<!-- <span style="font-size: 8px;" id="typeOne">{{typeOne}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" align="left">-->
|
<!-- <span style="font-size: 8px;" id="createddateOne">{{createddateOne}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="10">-->
|
<!-- <el-col :span="24" align="center" style="margin-top: 10px">-->
|
<!-- <div id="qrcode1" ref="qrcode" class="qrcode"/>-->
|
<!-- </el-col>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" style="margin-left: 15px">-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" align="left">-->
|
<!-- <span style="font-size: 8px;" id="manufacturerOne">{{manufacturerOne}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="12" align="left">-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="14" style="padding-left: 15px">-->
|
<!-- <el-row >-->
|
<!-- <el-col :span="24" align="left" style="margin-top: 5px">-->
|
<!-- <span style="font-size: 8px;" id="itemcodeTwo">{{itemcodeTwo}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" align="left">-->
|
<!-- <span style="font-size: 8px;" id="itemnameTwo">{{itemnameTwo}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" align="left">-->
|
<!-- <span style="font-size: 8px;" id="typeTwo">{{typeTwo}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" align="left">-->
|
<!-- <span style="font-size: 8px;" id="createddateTwo">{{createddateTwo}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <!– <el-row>–>-->
|
<!-- <!– <el-col :span="24" align="left">–>-->
|
<!-- <!– <span style="font-size: 8px;" id="manufacturerTwo">{{manufacturerTwo}}</span>–>-->
|
<!-- <!– </el-col>–>-->
|
<!-- <!– </el-row>–>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="10">-->
|
<!-- <el-col :span="24" align="center" style="margin-top: 10px">-->
|
<!-- <div id="qrcode2" class="qrcode" ref="qrcode"/>-->
|
<!-- </el-col>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="24" style="padding-left: 15px">-->
|
<!-- <el-row>-->
|
<!-- <el-col align="left">-->
|
<!-- <span style="font-size: 8px;" id="manufacturerTwo"></span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div v-show="false">-->
|
<!-- <div id="printMeSingle" >-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="12" align="center">-->
|
<!-- <span style="font-size: 10px;">{{"新疆流向专用"}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="12" align="left" class="barcode">-->
|
<!-- <svg id="barcode"/>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="12" align="left">-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="14" style="padding-left: 15px">-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" align="left" style="margin-top: 3px;">-->
|
<!-- <span style="font-size: 8px;" id="itemcode">{{itemcode}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" align="left">-->
|
<!-- <span style="font-size: 8px;" id="itemname">{{itemname}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" align="left">-->
|
<!-- <span style="font-size: 8px;" id="type">{{type}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" align="left">-->
|
<!-- <span style="font-size: 8px;" id="createddate">{{createddate}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="10">-->
|
<!-- <el-col :span="24" align="center" style="margin-top: 10px">-->
|
<!-- <div id="qrcode" ref="qrcode" class="qrcode"/>-->
|
<!-- </el-col>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" style="margin-left: 15px">-->
|
<!-- <el-row>-->
|
<!-- <el-col :span="24" align="left">-->
|
<!-- <span style="font-size: 8px;" id="manufacturer">{{manufacturer}}</span>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div v-show="false">-->
|
<!-- <div id="printMeNull">-->
|
<!-- <span>{{"."}}</span>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!--</template>-->
|
|
<!--<script>-->
|
<!--import { mapGetters } from 'vuex'-->
|
<!--import JsBarcode from "jsbarcode";-->
|
<!--import QRCode from "qrcodejs2";-->
|
<!--import { printBarCode ,printZPL} from "../../api/contract";-->
|
|
<!--export default {-->
|
<!-- name: "print",-->
|
<!-- computed: {-->
|
<!-- ...mapGetters([-->
|
<!-- 'printBar',-->
|
<!-- ])-->
|
<!-- },-->
|
<!-- data(){-->
|
<!-- return{-->
|
<!-- listLoading:false,-->
|
<!-- tableKey:'',-->
|
<!-- printData:[],-->
|
<!-- itemcode:'',-->
|
<!-- createddate:'',-->
|
<!-- itemname:'',-->
|
<!-- type:'',-->
|
<!-- manufacturer:'',-->
|
<!-- itemcodeOne:'',-->
|
<!-- itemcodeTwo:'',-->
|
<!-- createddateOne:'',-->
|
<!-- createddateTwo:'',-->
|
<!-- itemnameOne:'',-->
|
<!-- itemnameTwo:'',-->
|
<!-- typeOne:'',-->
|
<!-- typeTwo:'',-->
|
<!-- manufacturerOne:'',-->
|
<!-- manufacturerTwo:'',-->
|
<!-- selected_device:'',-->
|
<!-- devices:[],-->
|
<!-- device_information:'',-->
|
<!-- test:'1',-->
|
<!-- }-->
|
<!-- },-->
|
<!-- created(){-->
|
<!-- this.getList()-->
|
<!-- },-->
|
<!-- mounted(){-->
|
<!-- BrowserPrint.getApplicationConfiguration(function (success){-->
|
<!-- console.log(success);},function (error){-->
|
<!-- console.log(error);})-->
|
|
<!-- let selected_device;-->
|
<!-- let devices = [];-->
|
<!-- BrowserPrint.getDefaultDevice("printer", function(device) {-->
|
<!-- var zebraPrinter = new Zebra.Printer(device);-->
|
<!-- zebraPrinter.getStatus(function(status){-->
|
<!-- console.log(status.getMessage());-->
|
<!-- debugger-->
|
<!-- }, function(error){})-->
|
<!-- //Add device to list of devices and to html select element-->
|
<!-- selected_device = device;-->
|
<!-- devices.push(device);-->
|
<!-- var html_select = document.getElementById("selected_device");-->
|
<!-- var option = document.createElement("option");-->
|
<!-- option.text = device.name;-->
|
<!-- // html_select.add(option);-->
|
|
<!-- //Discover any other devices available to the application-->
|
<!-- BrowserPrint.getLocalDevices(function(device_list){-->
|
<!-- for(var i = 0; i < device_list.length; i++)-->
|
<!-- {-->
|
<!-- //Add device to list of devices and to html select element-->
|
<!-- var device = device_list[i];-->
|
<!-- if(!selected_device || device.uid != selected_device.uid)-->
|
<!-- {-->
|
<!-- devices.push(device);-->
|
<!-- var option = document.createElement("option");-->
|
<!-- option.text = device.name;-->
|
<!-- option.value = device.uid;-->
|
<!-- html_select.add(option);-->
|
<!-- }-->
|
<!-- }-->
|
|
<!-- }, function(){alert("Error getting local devices")},"printer");-->
|
|
<!-- }, function(error){-->
|
<!-- alert(error);-->
|
<!-- })-->
|
<!-- setTimeout(()=>{-->
|
<!-- this.selected_device = selected_device-->
|
<!-- this.devices = devices-->
|
<!-- debugger-->
|
<!-- /*selected_device.send('~hs', undefined, undefined);-->
|
<!-- selected_device.read(function(readData) {-->
|
<!-- if(readData === undefined || readData === null || readData === "")-->
|
<!-- {-->
|
<!-- alert("No Response from Device");-->
|
<!-- }-->
|
<!-- else-->
|
<!-- {-->
|
<!-- console.log(readData);-->
|
<!-- }-->
|
|
<!-- }, undefined)*/-->
|
|
<!-- let zebraPrinter = new Zebra.Printer(selected_device);-->
|
<!-- zebraPrinter.getStatus(function(status){console.log(status.getMessage());}, function(error){});-->
|
|
<!-- },1000)-->
|
<!-- // setInterval(()=>{-->
|
<!-- // debugger-->
|
<!-- // let zebraPrinter = new Zebra.Printer(selected_device);-->
|
<!-- // zebraPrinter.getStatus(function(status){console.log(status.getMessage());}, function(error){});-->
|
<!-- // },1000)-->
|
<!-- },-->
|
<!-- methods:{-->
|
<!-- getList(){-->
|
<!-- //this.printData = this.$route.query.printData;-->
|
<!-- //this.printData = this.printBar;-->
|
<!-- this.printData = JSON.parse(sessionStorage.getItem("key"))-->
|
|
<!-- // for(let i = 0;i<this.printData.length;i++){-->
|
<!-- // for(let j=0;j<this.printData[i].length;j++){-->
|
<!-- // if(this.printData[i][j].originalcode !== null){-->
|
<!-- // this.$set(this.printData[i],'first',this.printData[i][j].originalcode)-->
|
<!-- // break-->
|
<!-- // }-->
|
<!-- // }-->
|
<!-- // for(let k = this.printData[i].length-1;k>0;k--){-->
|
<!-- //-->
|
<!-- // if(this.printData[i][k].originalcode !== null){-->
|
<!-- // this.$set(this.printData[i],'last',this.printData[i][k].originalcode)-->
|
<!-- // break-->
|
<!-- // }-->
|
<!-- // }-->
|
<!-- // }-->
|
<!-- },-->
|
<!-- setup(){-->
|
<!-- BrowserPrint.getDefaultDevice("printer", function(device) {-->
|
<!-- //Add device to list of devices and to html select element-->
|
<!-- this.selected_device = device;-->
|
<!-- this.devices = [];-->
|
<!-- var zebraPrinter = new Zebra.Printer(device);-->
|
<!-- zebraPrinter.getInfo(function(info){-->
|
<!-- this.device_information = Object.assign(device,{friendname:info.model});-->
|
<!-- this.devices.push(device)-->
|
<!-- console.log(this.device_information);-->
|
<!-- }, function(error){})-->
|
<!-- var html_select = document.getElementById("selected_device");-->
|
<!-- var option = document.createElement("option");-->
|
<!-- option.text = device.name;-->
|
<!-- // html_select.add(option);-->
|
|
<!-- //Discover any other devices available to the application-->
|
<!-- BrowserPrint.getLocalDevices(function(device_list){-->
|
<!-- for(var i = 0; i < device_list.length; i++)-->
|
<!-- {-->
|
<!-- //Add device to list of devices and to html select element-->
|
<!-- var device = device_list[i];-->
|
<!-- if(!selected_device || device.uid != selected_device.uid)-->
|
<!-- {-->
|
<!-- devices.push(device);-->
|
<!-- var option = document.createElement("option");-->
|
<!-- option.text = device.name;-->
|
<!-- option.value = device.uid;-->
|
<!-- html_select.add(option);-->
|
<!-- }-->
|
<!-- }-->
|
|
<!-- }, function(){alert("Error getting local devices")},"printer");-->
|
|
<!-- }, function(error){-->
|
<!-- alert(error);-->
|
<!-- })-->
|
<!-- },-->
|
<!-- async printByControl(row){-->
|
<!-- row.disabled = true-->
|
<!-- let selected_device = this.selected_device-->
|
<!-- let printData-->
|
<!-- const params = {}-->
|
<!-- params['orderCode'] = row.orderCode-->
|
<!-- params['batchCode'] = row.batchCode-->
|
<!-- params['needBlank'] = this.$route.query.ifPrintBlank-->
|
<!-- this.listLoading = true;-->
|
<!-- let res = await printZPL(params)-->
|
<!-- if(res.data.code === '200'){-->
|
<!-- this.listLoading = false;-->
|
<!-- printData = res.data.result-->
|
<!-- console.log(printData);-->
|
<!-- this.selected_device.send(printData, function(success){-->
|
<!-- selected_device.read(function(response){-->
|
<!-- console.log(response);-->
|
<!-- }, function(error){console.error(error);});-->
|
<!-- }, function(errorMessage){alert("Error: " + errorMessage);})-->
|
<!-- }else{-->
|
<!-- this.listLoading = false;-->
|
<!-- this.$message({-->
|
<!-- message:res.data.message,-->
|
<!-- type:"warning"-->
|
<!-- })-->
|
<!-- }-->
|
<!-- },-->
|
<!-- async printByHtml(row){-->
|
<!-- let printData;-->
|
<!-- if ( row != null){-->
|
<!-- const params = {}-->
|
<!-- params['orderCode'] = row.orderCode-->
|
<!-- params['batchCode'] = row.batchCode-->
|
<!-- debugger-->
|
<!-- params['needBlank'] = this.$route.query.ifPrintBlank-->
|
<!-- this.listLoading = true;-->
|
<!-- let res = await printBarCode(params)-->
|
<!-- if(res.data.code === '200'){-->
|
<!-- this.listLoading = false;-->
|
<!-- printData = res.data.result.productCodeVos-->
|
<!-- }else{-->
|
<!-- this.listLoading = false;-->
|
<!-- this.$message({-->
|
<!-- message:res.data.message,-->
|
<!-- type:"warning"-->
|
<!-- })-->
|
<!-- }-->
|
<!-- }else {-->
|
<!-- this.$message({-->
|
<!-- message: '请选择行',-->
|
<!-- type: 'warning'-->
|
<!-- })-->
|
<!-- }-->
|
<!-- let length = printData.length/2-->
|
<!-- for(let i = 0;i<length;i++){-->
|
<!-- if(printData[2*i].id === null ||printData[2*i+1].id === null){-->
|
|
<!-- if(printData[2*i].id === null && printData[2*i+1].id === null){-->
|
<!-- var oldWindow = window.document.body.innerHTML-->
|
<!-- var jubuData = document.getElementById("printMeNull").innerHTML;-->
|
<!-- window.document.body.innerHTML= jubuData-->
|
<!-- window.print()-->
|
<!-- window.document.body.innerHTML = oldWindow-->
|
<!-- }else{-->
|
|
<!-- document.getElementById('itemcode').innerHTML = printData[2*i].itemcode-->
|
<!-- document.getElementById('createddate').innerHTML = printData[2*i].createddate-->
|
<!-- document.getElementById('itemname').innerHTML = printData[2*i].itemname-->
|
<!-- document.getElementById('type').innerHTML = printData[2*i].type-->
|
<!-- document.getElementById('manufacturer').innerHTML = printData[2*i].manufacturer-->
|
<!-- JsBarcode('#barcode', printData[2*i].itemcode, {-->
|
<!-- format: 'CODE128',-->
|
<!-- lineColor: '#000',-->
|
<!-- background: '#EBEEF5',-->
|
<!-- width: 8,-->
|
<!-- height: 300,-->
|
<!-- displayValue: false-->
|
<!-- })-->
|
<!-- var oldWindow = window.document.body.innerHTML-->
|
<!-- var jubuData = document.getElementById("printMeSingle").innerHTML;-->
|
<!-- window.document.body.innerHTML= jubuData-->
|
<!-- document.getElementById("qrcode").innerHTML = ""-->
|
<!-- let qrcode = new QRCode('qrcode', {-->
|
<!-- width: 400,-->
|
<!-- height: 400, // 高度-->
|
<!-- text: printData[2*i].itemcode, // 二维码内容-->
|
<!-- // format: 'CODE128',-->
|
<!-- render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）-->
|
<!-- background: '#f0f', // 背景色-->
|
<!-- // foreground: '#ff0' // 前景色-->
|
<!-- })-->
|
<!-- window.print()-->
|
<!-- window.document.body.innerHTML = oldWindow-->
|
<!-- }-->
|
<!-- }-->
|
<!-- else{-->
|
<!-- document.getElementById('itemcodeOne').innerHTML = printData[2*i].itemcode-->
|
<!-- document.getElementById('itemcodeTwo').innerHTML = printData[2*i+1].itemcode-->
|
<!-- document.getElementById('createddateOne').innerHTML = printData[2*i].createddate-->
|
<!-- document.getElementById('createddateTwo').innerHTML = printData[2*i+1].createddate-->
|
<!-- document.getElementById('itemnameOne').innerHTML = printData[2*i].itemname-->
|
<!-- document.getElementById('itemnameTwo').innerHTML = printData[2*i+1].itemname-->
|
<!-- document.getElementById('typeOne').innerHTML = printData[2*i].type-->
|
<!-- document.getElementById('typeTwo').innerHTML = printData[2*i+1].type-->
|
<!-- document.getElementById('manufacturerOne').innerHTML = printData[2*i].manufacturer-->
|
<!-- document.getElementById('manufacturerTwo').innerHTML = printData[2*i+1].manufacturer-->
|
<!-- JsBarcode('#barcode1', printData[2*i].itemcode, {-->
|
<!-- format: 'CODE128',-->
|
<!-- lineColor: '#000',-->
|
<!-- background: '#EBEEF5',-->
|
<!-- width: 8,-->
|
<!-- height: 300,-->
|
<!-- displayValue: false-->
|
<!-- }),-->
|
<!-- JsBarcode('#barcode2', printData[2*i+1].itemcode, {-->
|
<!-- format: 'CODE128',-->
|
<!-- lineColor: '#000',-->
|
<!-- background: '#EBEEF5',-->
|
<!-- width: 8,-->
|
<!-- height: 300,-->
|
<!-- displayValue: false-->
|
<!-- })-->
|
<!-- var oldWindow = window.document.body.innerHTML-->
|
<!-- var jubuData = document.getElementById("printMe").innerHTML;-->
|
<!-- window.document.body.innerHTML= jubuData-->
|
<!-- document.getElementById("qrcode1").innerHTML = ""-->
|
<!-- let qrcode = new QRCode('qrcode1', {-->
|
<!-- width: 400,-->
|
<!-- height: 400, // 高度-->
|
<!-- text: printData[2*i].itemcode, // 二维码内容-->
|
<!-- // format: 'CODE128',-->
|
<!-- render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）-->
|
<!-- background: '#f0f', // 背景色-->
|
<!-- // foreground: '#ff0' // 前景色-->
|
<!-- })-->
|
<!-- document.getElementById("qrcode2").innerHTML = ""-->
|
<!-- let qrcode2 = new QRCode('qrcode2', {-->
|
<!-- width: 400,-->
|
<!-- height: 400, // 高度-->
|
<!-- text: printData[2*i+1].itemcode, // 二维码内容-->
|
<!-- // format: 'CODE128',-->
|
<!-- render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）-->
|
<!-- background: '#f0f', // 背景色-->
|
<!-- // foreground: '#ff0' // 前景色-->
|
<!-- })-->
|
<!-- // LODOP.ADD_PRINT_HTM(0, 0, 350, 1050, document.getElementById("printMe").innerHTML)-->
|
<!-- // LODOP.PREVIEW();-->
|
<!-- window.print()-->
|
<!-- window.document.body.innerHTML = oldWindow-->
|
<!-- }-->
|
<!-- }-->
|
<!-- window.document.body.innerHTML= jubuData-->
|
<!-- window.location.reload();-->
|
<!-- },-->
|
<!-- goBefore(){-->
|
<!-- // this.$store.commit('SET_PRINT', this.printData)-->
|
<!-- this.$router.go(-1)-->
|
<!-- // this.$router.push({path:'/contract/print',query:{printData:this.printData}})-->
|
<!-- }-->
|
<!-- }-->
|
<!--}-->
|
<!--</script>-->
|
|
<!--<style scoped>-->
|
<!--@media print {-->
|
<!-- #printMe{-->
|
<!-- font-size: 5px !important;-->
|
<!-- }-->
|
<!--}-->
|
<!--/deep/ .el-col-24 {-->
|
<!-- padding: 0;-->
|
<!-- margin: 0;-->
|
<!-- height:20px;-->
|
<!--}-->
|
<!--/deep/ .el-col-12 {-->
|
<!-- padding: 0;-->
|
<!-- margin: 0;-->
|
<!-- height:20px;-->
|
<!--}-->
|
<!--/deep/ .el-col-11 {-->
|
<!-- padding: 0;-->
|
<!-- margin: 0;-->
|
<!-- height:11px;-->
|
<!--}-->
|
<!--/deep/ .el-col-9 {-->
|
<!-- padding: 0;-->
|
<!-- margin: 0;-->
|
<!-- height:11px;-->
|
<!--}-->
|
<!--/deep/ .el-col-8 {-->
|
<!-- padding: 0;-->
|
<!-- margin: 0;-->
|
<!-- height:11px;-->
|
<!--}-->
|
<!--/deep/ .el-col-6 {-->
|
<!-- padding: 0;-->
|
<!-- margin: 0;-->
|
<!-- height:11px;-->
|
<!--}-->
|
<!--/deep/ .el-col-4 {-->
|
<!-- padding: 0;-->
|
<!-- margin: 0;-->
|
<!-- height:11px;-->
|
<!--}-->
|
<!--/deep/ .el-col-24 {-->
|
<!-- padding: 0;-->
|
<!-- margin: 0;-->
|
<!-- height:11px;-->
|
<!--}-->
|
<!--.qrcode{-->
|
<!-- transform: scale(0.1);-->
|
<!-- transform-origin:10% 0%-->
|
<!--}-->
|
<!--.barcode{-->
|
<!-- transform: scale(0.08);-->
|
<!-- transform-origin:10% 3%-->
|
<!--}-->
|
<!--.barcodeTwo{-->
|
<!-- transform: scale(0.1);-->
|
<!--}-->
|
<!--</style>-->
|
