<template>
|
<div class="container">
|
|
<div class="entry-container">
|
流向码：
|
<el-input v-model="inputCode" placeholder="请输入流向码，按回车（Enter）键查询"
|
style="width: 40%;padding-bottom: 20px" @keyup.enter.native="handleSearch"></el-input>
|
<el-button @click="handleSearch">查询</el-button>
|
<el-button @click="printBox">网页补打标签</el-button>
|
<el-button @click="printByControl">控件补打标签</el-button>
|
<el-button @click="exportCSV">导出电子标签</el-button>
|
<el-button @click="clearAll">清空</el-button>
|
<el-button @click="GetDevices">获取打印机</el-button>
|
<el-table
|
ref="multipleTable"
|
v-loading="listLoading"
|
:data="product"
|
@selection-change="handleSelectionChange"
|
style="width: 100%">
|
<el-table-column
|
type="selection"
|
width="55">
|
</el-table-column>
|
<el-table-column
|
label="电子合同编号"
|
prop="ordercode">
|
</el-table-column>
|
<el-table-column
|
label="流向码"
|
prop="originalcode">
|
</el-table-column>
|
<el-table-column
|
label="产品名称"
|
prop="itemname">
|
</el-table-column>
|
<el-table-column
|
label="生产厂家"
|
prop="manufacturer">
|
</el-table-column>
|
<el-table-column
|
label="总装药量"
|
prop="explosivecontent">
|
</el-table-column>
|
<el-table-column
|
label="箱含量"
|
prop="boxnumber">
|
</el-table-column>
|
<el-table-column
|
label="产品类型"
|
prop="type">
|
</el-table-column>
|
<el-table-column
|
label="产品级别"
|
prop="level">
|
</el-table-column>
|
<el-table-column
|
label="创建时间"
|
prop="createddate">
|
</el-table-column>
|
|
</el-table>
|
|
<br>
|
<el-pagination
|
v-show="recordTotal>0"
|
:current-page="currentPage"
|
:page-sizes="[10, 20, 30, 50]"
|
:page-size="pageSize"
|
:total="recordTotal"
|
layout="total, sizes, prev, pager, next, jumper"
|
background
|
style="float:right;"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
<div v-show="false">
|
<div id="printMe" >
|
<el-row>
|
<el-col :span="12" align="left">
|
<span id="boxrangeOne" style="font-size: 10px;">{{boxrangeOne}}</span>
|
</el-col>
|
<el-col :span="12" align="left">
|
<span id="boxrangeTwo" style="font-size: 10px;margin-top: 3px">{{boxrangeTwo}}</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="createddateOne">{{createddateOne}}</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-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="5" align="left">
|
<span style="font-size: 8px;">总装药量:</span>
|
</el-col>
|
<el-col :span="3" align="left">
|
<span style="font-size: 8px;display: inline-block" id="totalNumOne"></span>
|
</el-col>
|
<el-col :span="4" align="left">
|
<span style="font-size: 8px;" >箱含量:</span>
|
</el-col>
|
<el-col :span="3" align="left">
|
<span style="font-size: 8px;display: inline-block" id="numOne"></span>
|
</el-col>
|
</el-row>
|
<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="createddateTwo">{{createddateTwo}}</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-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 :span="5" align="left">
|
<span style="font-size: 8px;">总装药量:</span>
|
</el-col>
|
<el-col :span="3" align="left">
|
<span style="font-size: 8px;display: inline-block" id="totalNumTwo"></span>
|
</el-col>
|
<el-col :span="5" align="left">
|
<span style="font-size: 8px;">箱含量:</span>
|
</el-col>
|
<el-col :span="3" align="left">
|
<span style="font-size: 8px;display: inline-block" id="numTwo"></span>
|
</el-col>
|
</el-row>
|
<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>
|
</template>
|
|
<script>
|
import {parseError} from "../../utils/messageDialog";
|
import {getDirectionBoxCode, getPrintByControlBox} from "../../api/contract";
|
import CsvExportor from "csv-exportor";
|
import {parseTime} from "../../utils";
|
import JsBarcode from "jsbarcode";
|
import QRCode from "qrcodejs2";
|
|
export default {
|
name: "replenishBox",
|
data() {
|
return {
|
pageSize: 10,
|
recordTotal: 0,
|
currentPage: 1,
|
pageTotal: 0,
|
listLoading: false,
|
product: [],
|
inputCode: '',
|
printData:[],
|
boxrangeOne:'',
|
boxrangeTwo:'',
|
itemcodeOne:'',
|
itemcodeTwo:'',
|
createddateOne:'',
|
createddateTwo:'',
|
itemnameOne:'',
|
itemnameTwo:'',
|
typeOne:'',
|
typeTwo:'',
|
manufacturerOne:'',
|
manufacturerTwo:'',
|
selected_device:'',
|
devices:[],
|
}
|
},
|
created() {
|
},
|
mounted() {
|
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: {
|
handleSearch() {
|
const _this = this;
|
if (_this.inputCode !== "") {
|
if (_this.inputCode.length === 23 || _this.inputCode.length === 20) {
|
_this.inputCode = _this.inputCode.slice(0, _this.inputCode.length - 1)
|
}
|
}
|
getDirectionBoxCode(_this.inputCode).then(res => {
|
const response = res.data;
|
if (response.code === "200") {
|
const result = response.result;
|
let exist = false;
|
if (_this.product != null && _this.product.length > 0) {
|
_this.product.forEach(item => {
|
if (result.originalcode === item.originalcode) {
|
exist = true;
|
}
|
});
|
}
|
if (!exist){
|
_this.product.push(response.result);
|
}
|
_this.listLoading = false;
|
} else {
|
_this.$message.error(response.message);
|
}
|
}).catch(error => {
|
_this.listLoading = false;
|
parseError({error: error, vm: _this})
|
});
|
},
|
handleSizeChange: function (val) {
|
this.pageSize = val;
|
this.currentPage = 1;
|
this.handleSearch()
|
},
|
handleCurrentChange: function (val) {
|
this.currentPage = val;
|
this.handleSearch()
|
},
|
|
exportCSV(){
|
let allData = this.product;
|
if (allData == null || allData.length === 0){
|
parseError({ error: '表格数据为空', vm: this });
|
return
|
}
|
const filterVal = [
|
'ordercode',
|
'originalcode',
|
'itemname',
|
'manufacturer',
|
'explosivecontent',
|
'boxnumber',
|
'type',
|
'level',
|
'createddate',
|
'boxrange',
|
'price',
|
'crc',
|
]
|
const tHeader = [
|
'合同单号',
|
'电子标签号',
|
'产品名称',
|
'生产厂家',
|
'总装药量',
|
'箱含量',
|
'产品类型',
|
'产品级别',
|
'创建时间',
|
'包装标识码',
|
'进价',
|
'校验码',
|
]
|
const data = this.formatJson(filterVal, allData);
|
// if (type == 'csv') {
|
this.downCsv(data, tHeader)
|
},
|
|
formatJson(filterVal, jsonData) {
|
return jsonData.map((v) =>
|
filterVal.map((j) => {
|
if (j === 'createddate') {
|
return parseTime(v[j], '{y}-{m}-{d}')
|
}else {
|
return v[j]
|
}
|
})
|
)
|
},
|
async printByControl(){
|
if(this.printData.length === 0){
|
this.$message({
|
type:'warning',
|
message:'请选择要补打的箱码'
|
})
|
}else{
|
let printData = ""
|
let selected_device = this.selected_device
|
for(let i=0;i<this.printData.length;i++){
|
if(i === 0){
|
printData = this.printData[i].originalcode
|
}else{
|
printData = printData + ',' + this.printData[i].originalcode
|
}
|
}
|
let res = await getPrintByControlBox({codes:printData})
|
if(res.data.code === "200"){
|
this.selected_device.send(res.data.result, function(success){
|
selected_device.read(function(response){
|
console.log(response);
|
}, function(error){console.error(error);});
|
}, function(errorMessage){alert("Error: " + errorMessage);})
|
}
|
}
|
},
|
printBox(){
|
if(this.printData.length === 0){
|
this.$message({
|
message:'请选择要补打的箱码',
|
type:'warning'
|
})
|
}else{
|
let length = this.printData.length/2
|
for(let i = 0;i<length;i++){
|
if(i === length - 0.5 && this.printData.length%2 === 1){
|
document.getElementById('boxrangeOne').innerHTML = "新疆专用-包装标志码"+this.printData[2*i].boxrange
|
document.getElementById('itemcodeOne').innerHTML = this.printData[2*i].originalcode
|
document.getElementById('createddateOne').innerHTML = this.printData[2*i].createddate
|
document.getElementById('itemnameOne').innerHTML = this.printData[2*i].itemname
|
document.getElementById('typeOne').innerHTML = this.printData[2*i].type
|
document.getElementById('manufacturerOne').innerHTML = this.printData[2*i].manufacturer
|
document.getElementById('totalNumOne').innerHTML = this.printData[2*i].explosivecontent
|
document.getElementById('numOne').innerHTML = this.printData[2*i].boxnumber
|
JsBarcode('#barcode1', this.printData[2*i].originalcode, {
|
format: 'CODE128',
|
lineColor: '#000',
|
background: '#EBEEF5',
|
width: 8,
|
height: 300,
|
displayValue: false
|
})
|
}else{
|
document.getElementById('boxrangeOne').innerHTML = "新疆专用-包装标志码"+this.printData[2*i].boxrange
|
document.getElementById('boxrangeTwo').innerHTML = "新疆专用-包装标志码"+this.printData[2*i+1].boxrange
|
document.getElementById('itemcodeOne').innerHTML = this.printData[2*i].originalcode
|
document.getElementById('itemcodeTwo').innerHTML = this.printData[2*i+1].originalcode
|
document.getElementById('createddateOne').innerHTML = this.printData[2*i].createddate
|
document.getElementById('createddateTwo').innerHTML = this.printData[2*i+1].createddate
|
document.getElementById('itemnameOne').innerHTML = this.printData[2*i].itemname
|
document.getElementById('itemnameTwo').innerHTML = this.printData[2*i+1].itemname
|
document.getElementById('typeOne').innerHTML = this.printData[2*i].type
|
document.getElementById('typeTwo').innerHTML = this.printData[2*i+1].type
|
document.getElementById('manufacturerOne').innerHTML = this.printData[2*i].manufacturer
|
document.getElementById('manufacturerTwo').innerHTML = this.printData[2*i+1].manufacturer
|
document.getElementById('totalNumOne').innerHTML = this.printData[2*i].explosivecontent
|
document.getElementById('numOne').innerHTML = this.printData[2*i].boxnumber
|
document.getElementById('totalNumTwo').innerHTML = this.printData[2*i+1].explosivecontent
|
document.getElementById('numTwo').innerHTML = this.printData[2*i+1].boxnumber
|
JsBarcode('#barcode1', this.printData[2*i].originalcode, {
|
format: 'CODE128',
|
lineColor: '#000',
|
background: '#EBEEF5',
|
width: 8,
|
height: 300,
|
displayValue: false
|
}),
|
JsBarcode('#barcode2', this.printData[2*i+1].originalcode, {
|
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 = ""
|
if(i === length - 0.5 && this.printData.length%2 === 1){
|
let qrcode = new QRCode('qrcode1', {
|
width: 400,
|
height: 400, // 高度
|
text: this.printData[2*i].originalcode, // 二维码内容
|
// format: 'CODE128',
|
render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
|
background: '#f0f', // 背景色
|
// foreground: '#ff0' // 前景色
|
})
|
}else{
|
let qrcode = new QRCode('qrcode1', {
|
width: 400,
|
height: 400, // 高度
|
text: this.printData[2*i].originalcode, // 二维码内容
|
// 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: this.printData[2*i+1].originalcode, // 二维码内容
|
// format: 'CODE128',
|
render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
|
background: '#f0f', // 背景色
|
// foreground: '#ff0' // 前景色
|
})
|
}
|
|
window.print()
|
window.document.body.innerHTML = oldWindow
|
}
|
window.document.body.innerHTML= jubuData
|
window.location.reload();
|
this.setTimeout(()=>{
|
this.printVisible = true
|
})
|
}
|
},
|
handleSelectionChange(val){
|
this.printData = val
|
},
|
downCsv(data,header) {
|
let tableData = this.data;
|
CsvExportor.downloadCsv(data, { header }, "电子标签号.csv");
|
},
|
|
clearAll(){
|
this.product = [];
|
this.inputCode = "";
|
},
|
GetDevices(){
|
this.getPrinters()
|
},
|
|
},
|
computed: {},
|
}
|
</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>
|
