<template>
|
<div style="height: 100%;width: 100%">
|
<el-card class="box-card">
|
<el-form size="large" :inline="true" label-width="68px" @submit.native.prevent>
|
<el-form-item label-width="200" label="箱体码" :prop="barcode1" style="align-content: center">
|
<input v-model="barcode1"
|
ref="inputdata1"
|
style="height: 39px; width: 300px"
|
placeholder="请扫描箱体码"
|
/>
|
</el-form-item>
|
|
<el-form-item label-width="200" label="宝码" :prop="barcode2" style="align-content: center">
|
<input v-model="barcode2"
|
ref="inputdata2"
|
style="height: 39px; width: 300px"
|
placeholder="请扫描宝码"
|
/>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
</div>
|
</template>
|
<script>
|
export default {
|
data(){
|
return {
|
scannerFlag: false,
|
barcode1: "",
|
barcode2: "",
|
};
|
},
|
|
mounted() {
|
this.setFocus()
|
this.$refs.inputdata1.addEventListener('keydown',this.handleScannerInput1)
|
this.$refs.inputdata2.addEventListener('keydown',this.handleScannerInput2)
|
},
|
beforeDestroy() {
|
this.$refs.inputdata1.removeEventListener('keydown',this.handleScannerInput1)
|
this.$refs.inputdata2.removeEventListener('keydown',this.handleScannerInput2)
|
},
|
methods: {
|
refresh() {
|
location.reload();
|
},
|
setFocus(){
|
this.$nextTick(()=>{
|
this.$refs.inputdata1.focus()
|
})
|
},
|
handleScannerInput1(event){
|
if (this.scannerFlag){
|
this.barcode1 = ''
|
this.$refs.inputdata1.value = ''
|
this.scannerFlag = false
|
}
|
const input = event.target
|
const inputValue = input.value
|
this.barcode1 = inputValue
|
if (event.key === 'Enter'){
|
this.scannerFlag = true
|
console.log('条码1：',this.barcode1)
|
this.$refs.inputdata2.focus();
|
//扫描完成
|
}
|
},
|
handleScannerInput2(event){
|
if (this.scannerFlag){
|
this.barcode2 = ''
|
this.$refs.inputdata2.value = ''
|
this.scannerFlag = false
|
}
|
const input = event.target
|
const inputValue = input.value
|
this.barcode2 = inputValue
|
if (event.key === 'Enter'){
|
this.scannerFlag = true
|
console.log('条码2：',this.barcode2)
|
this.$refs.inputdata1.focus();
|
//扫描完成
|
}
|
},
|
},
|
}
|
</script>
|
<style scoped lang="scss">
|
</style>
|
