<template>
|
<div class="barcode">
|
<!--绑定id方法-->
|
<!-- <div id='box'>
|
<p>打印内容</p>
|
</div>
|
<div v-print='#box'>打印</div> -->
|
<!--绑定对象方法-->
|
<div id='printMe'>
|
<vue-barcode
|
:value="value"
|
>不支持vue-barcode</vue-barcode>
|
<div>
|
<div>产品名称</div>
|
<div>数量</div>
|
<div>单位</div>
|
</div>
|
<div>
|
<div>时间</div>
|
<div>规格</div>
|
</div>
|
</div>
|
|
<div v-for="(item,index) in table" :key="index">
|
{{item}}
|
</div>
|
|
<el-button @click="showCode">生成条形码</el-button>
|
<el-button v-print='printObj'>打印</el-button>
|
<el-input v-show="false" class="input" v-model="value" ref="input"></el-input>
|
|
</div>
|
</template>
|
|
<script>
|
import VueBarcode from 'vue-barcode'
|
|
export default{
|
data(){
|
return {
|
printObj:{
|
id: "printMe", // 打印的区域
|
// preview: false, // 预览工具是否启用
|
previewTitle: '打印条码', // 预览页面的标题
|
popTitle: '', // 打印页面的页眉
|
previewBeforeOpenCallback(vue) {
|
console.log('正在加载预览窗口')
|
},
|
previewOpenCallback(vue) {
|
console.log('已经加载完预览窗口')
|
},
|
clickMounted: (vue) => {
|
console.log("触发点击打印回调");
|
vue.isShowPrint = true //弹框显示条码
|
},
|
beforeOpenCallback(vue) {
|
console.log('打开之前',vue.barcodeNum)
|
},
|
openCallback (vue) {
|
vue.isShowPrint = false // 关闭条码显示弹框
|
console.log('执行了打印',vue.barcodeNum)
|
},
|
},
|
value: '',
|
table:[]
|
}
|
},
|
components: { VueBarcode },
|
mounted() {
|
|
this.makeCode('1234567891234567')
|
this.addScanMonitor()
|
},
|
methods: {
|
// 监听扫描
|
showCode() {
|
this.makeCode('1234567891234567')
|
// window.document.onkeypress=undefined
|
},
|
addScanMonitor() {
|
window.document.onkeypress = e => {
|
console.log(e)
|
if (window.event) { // IE
|
this.nextCode = e.keyCode
|
} else if (e.which) { // Netscape/Firefox/Opera
|
this.nextCode = e.which
|
}
|
|
if (e.which === 13) { // 键盘回车事件
|
if (this.code.length < 3) return // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效
|
console.log('扫码结束,条形码：', this.code)
|
this.table.push(this.code)
|
this.scanningForm.scanCode = this.code
|
this.lastCode = ''
|
this.lastTime = ''
|
this.handleSubmitScanning()
|
return
|
}
|
|
this.nextTime = new Date().getTime()
|
if (!this.lastTime && !this.lastCode) {
|
this.code = '' // 清空上次的条形码
|
// 继续扫描一下条前关闭弹窗
|
// this.handleCloseTipsVisible()
|
this.code += e.key
|
console.log('扫码开始---', this.code)
|
}
|
if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 500) { // 当扫码前有keypress事件时,防止首字缺失
|
this.code = e.key
|
console.log('防止首字缺失。。。', this.code)
|
} else if (this.lastCode && this.lastTime) {
|
this.code += e.key
|
console.log('扫码中。。。', this.code)
|
}
|
this.lastCode = this.nextCode
|
this.lastTime = this.nextTime
|
}
|
},
|
makeCode(msg) {
|
// let obj = {jack: '1212'}
|
this.value = msg
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
|
#printMe{
|
// height: 4cm;
|
width: 8cm;
|
display: flex;
|
flex-direction: column;
|
text-align: center;
|
img{
|
display: inline-block;
|
text-align: center;
|
width: 6cm;
|
height: 2cm;
|
}
|
>div{
|
width: 100%;
|
display: flex;
|
>div{
|
flex: 1;
|
// height: 30px;
|
border: 1px solid #ddd;
|
}
|
}
|
}
|
@media print {
|
@page {
|
size: 8cm 4cm !important;
|
// margin: 0cm;
|
// padding: 0cm;
|
// size: portrait;
|
// border: 1px solid #ddd;
|
|
}
|
#printMe{
|
display: block;
|
width: 100%;
|
overflow: hidden;
|
}
|
}
|
</style>
|
