<template>
|
<div class="container">
|
|
<div class="entry-container">
|
<span>内包装码：</span>
|
<el-input v-model="inputCode" placeholder="连续查询，输入首位按回车键"
|
style="width: 15%;padding-bottom: 20px" @keyup.enter.native="handleSearch"></el-input>
|
|
<span v-if="isContinuous">
|
内包装尾码：
|
<span>{{inputCodeSlice}}</span>
|
<el-input v-model="inputCodeEnd" placeholder="请输入流向码" maxlength="5"
|
style="width: 5%;padding-bottom: 20px" @keyup.enter.native="handleSearch"></el-input>
|
</span>
|
|
|
<el-row style="padding-bottom: 10px">
|
<el-button @click="handleSearch">查询</el-button>
|
<el-button @click="printInner">网页补打标签</el-button>
|
<el-button @click="printByControl">控件补打标签</el-button>
|
<el-button @click="clearAll">清空</el-button>
|
<el-switch
|
v-model="isContinuous"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
active-text="连续打印"
|
inactive-text="单个打印">
|
</el-switch>
|
</el-row>
|
|
<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="directionCode">
|
</el-table-column>
|
<el-table-column
|
label="产品名称"
|
prop="name">
|
</el-table-column>
|
<el-table-column
|
label="生产厂家"
|
prop="manufacturer">
|
</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>
|
|
<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 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>
|
</template>
|
|
<script>
|
import {parseError} from "../../utils/messageDialog";
|
import CsvExportor from "csv-exportor";
|
import {formatDate, parseTime} from "../../utils";
|
import {getProductByCode, getProductsByCodes} from "../../api/product";
|
import JsBarcode from "jsbarcode";
|
import QRCode from "qrcodejs2";
|
import {getPrintByControlBox, replenishInnerPrint} from "../../api/contract";
|
|
|
|
export default {
|
directives: {
|
focus: {
|
// 指令的定义
|
inserted: function (el) {
|
el.children[0].focus()
|
},
|
update: function (el) {
|
el.children[0].focus()
|
},
|
bind: function (el) {
|
el.children[0].focus()
|
}
|
}
|
},
|
name: "replenishInner",
|
data() {
|
return {
|
pageSize: 10,
|
recordTotal: 0,
|
currentPage: 1,
|
pageTotal: 0,
|
listLoading: false,
|
product: [],
|
inputCode: '',
|
inputCodeEnd:'',
|
isContinuous:false,
|
isFocus:false,
|
printData:[],
|
itemcode:'',
|
createddate:'',
|
itemname:'',
|
type:'',
|
manufacturer:'',
|
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 == null ||_this.inputCode === "" || _this.inputCode.length !==19){
|
this.$message.error("流向码不符合规则");
|
return
|
}
|
if (_this.isContinuous){
|
_this.getProducts();
|
}else {
|
_this.getProductInfo();
|
}
|
},
|
|
getProductInfo(){
|
getProductByCode(this.inputCode).then(msg => {
|
const result = msg.data;
|
let product = this.product;
|
let exist = false;
|
if (result.code === '200') {
|
product.forEach((item, i) => {
|
result.result.forEach(product => {
|
if (item.directionCode === product.directionCode) {
|
exist = true
|
}
|
});
|
});
|
if (!exist) {
|
result.result.forEach(function (pro) {
|
product.push(pro);
|
});
|
}
|
}else {
|
this.$message.error(result.message);
|
}
|
});
|
// this.$refs.code.select();
|
},
|
|
getProducts(){
|
getProductsByCodes(this.inputCode,this.inputCodeEnd).then(msg=>{
|
const result = msg.data;
|
if (result.code === '200') {
|
this.product = result.result;
|
}else {
|
this.$message.error(result.message);
|
}
|
})
|
},
|
|
handleSizeChange: function (val) {
|
this.pageSize = val;
|
this.currentPage = 1;
|
this.handleSearch()
|
},
|
handleCurrentChange: function (val) {
|
this.currentPage = val;
|
this.handleSearch()
|
},
|
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].directionCode
|
}else{
|
printData = printData + ',' + this.printData[i].directionCode
|
}
|
}
|
let res = await replenishInnerPrint({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);})
|
}
|
}
|
},
|
printInner(){
|
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('itemcodeOne').innerHTML = this.printData[2*i].directionCode
|
document.getElementById('createddateOne').innerHTML = this.printData[2*i].productDate
|
document.getElementById('itemnameOne').innerHTML = this.printData[2*i].name
|
document.getElementById('typeOne').innerHTML = this.printData[2*i].type
|
document.getElementById('manufacturerOne').innerHTML = this.printData[2*i].manufacturer
|
JsBarcode('#barcode1', this.printData[2*i].directionCode, {
|
format: 'CODE128',
|
lineColor: '#000',
|
background: '#EBEEF5',
|
width: 8,
|
height: 300,
|
displayValue: false
|
})
|
}else{
|
document.getElementById('itemcodeOne').innerHTML = this.printData[2*i].directionCode
|
document.getElementById('itemcodeTwo').innerHTML = this.printData[2*i+1].directionCode
|
document.getElementById('createddateOne').innerHTML = formatDate(new Date());
|
document.getElementById('createddateTwo').innerHTML = formatDate(new Date());
|
document.getElementById('itemnameOne').innerHTML = this.printData[2*i].name
|
document.getElementById('itemnameTwo').innerHTML = this.printData[2*i+1].name
|
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
|
JsBarcode('#barcode1', this.printData[2*i].directionCode, {
|
format: 'CODE128',
|
lineColor: '#000',
|
background: '#EBEEF5',
|
width: 8,
|
height: 300,
|
displayValue: false
|
}),
|
JsBarcode('#barcode2', this.printData[2*i+1].directionCode, {
|
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: 300,
|
height: 300, // 高度
|
text: this.printData[2*i].directionCode, // 二维码内容
|
// format: 'CODE128',
|
render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
|
background: '#f0f', // 背景色
|
// foreground: '#ff0' // 前景色
|
})
|
}else{
|
let qrcode = new QRCode('qrcode1', {
|
width: 300,
|
height: 300, // 高度
|
text: this.printData[2*i].directionCode, // 二维码内容
|
// 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: this.printData[2*i+1].directionCode, // 二维码内容
|
// 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
|
},
|
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'
|
]
|
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]
|
}
|
})
|
)
|
},
|
|
downCsv(data,header) {
|
let tableData = this.data;
|
CsvExportor.downloadCsv(data, { header }, "电子标签号.csv");
|
},
|
|
clearAll(){
|
this.product = [];
|
this.inputCode = "";
|
this.inputCodeEnd = "";
|
},
|
|
},
|
computed: {
|
inputCodeSlice:function () {
|
if (this.inputCode.length >5){
|
let length = this.inputCode.length;
|
this.inputCodeEnd = this.inputCode.slice(length-5,length);
|
return this.inputCode.slice(0,length-5)
|
}
|
|
}
|
},
|
}
|
</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>
|
