<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="printByControl(scope.row)" >控件打印</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<br>
|
<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 {replenishBoxBatchPrint} 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:[],
|
}
|
},
|
created(){
|
this.getList()
|
},
|
mounted(){
|
setTimeout(()=>{
|
// this.setup()
|
})
|
|
const that = this
|
let selected_device;
|
let devices = [];
|
|
BrowserPrint.getDefaultDevice("printer", function(device)
|
{
|
selected_device = device;
|
devices.push(device);
|
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
|
console.log(that.selected_device);
|
},1000);
|
|
},
|
methods:{
|
getList(){
|
this.printData = JSON.parse(sessionStorage.getItem("keyTwo"))
|
},
|
async printByControl(row){
|
let selected_device = this.selected_device
|
let printData
|
this.listLoading = true;
|
let res = await replenishBoxBatchPrint({orderCode:row.orderCode,batchCode:row.batchCode})
|
if(res.data.code === '200'){
|
this.listLoading = false;
|
printData = res.data.result
|
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
|
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>
|
