<template>
|
<div class="app-container">
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>扫码上线</span>
|
</div>
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px" @submit.native.prevent>
|
<el-form-item label="序列号" prop="SNCode">
|
<input
|
v-model="form.SNCode"
|
ref="inputdata"
|
placeholder="请输入序列号"
|
style="width: 100%; height: 40px; font-size: 30px"
|
/>
|
</el-form-item>
|
|
</el-form>
|
</el-card>
|
</el-col>
|
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
|
import {addPassStationCollection} from "@/api/main/da/stationCollection";
|
|
export default {
|
name: 'PrototypeLabelPrinting',
|
components: {
|
},
|
data() {
|
return {
|
scannerFlag: false,
|
form: {
|
SNCode: '',
|
LocationCode: 'OP010'
|
},
|
rules: {
|
SNCode: [
|
{ required: true, message: '请输入序列号', trigger: 'blur' }
|
]
|
},
|
}
|
},
|
|
methods: {
|
setFocus(){
|
this.$nextTick(()=>{
|
this.$refs.inputdata.focus()
|
})
|
},
|
|
handleScannerInput(event){
|
if (this.scannerFlag){
|
this.form.SNCode = ''
|
this.$refs.inputdata.value = ''
|
this.scannerFlag = false
|
}
|
const input = event.target
|
this.form.SNCode = input.value
|
if (event.key === 'Enter'){
|
this.scannerFlag = true
|
//扫描完成
|
addPassStationCollection({SNCode:this.form.SNCode,LocationCode: this.form.LocationCode}).then(res => {
|
|
if (res.code === 200){
|
this.$message({
|
message: "扫码完成",
|
type: "success"
|
})
|
} else {
|
this.$message({
|
message: "扫码错误，请重试",
|
type: "error"
|
})
|
}
|
})
|
}
|
},
|
},
|
mounted() {
|
console.log('00')
|
this.setFocus();
|
this.$nextTick(() => {
|
if (this.$refs.inputdata){
|
this.$refs.inputdata.addEventListener('keydown',this.handleScannerInput)
|
}
|
|
})
|
|
},
|
|
beforeDestroy() {
|
this.$refs.inputdata.removeEventListener('keydown',this.handleScannerInput)
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.app-container {
|
padding: 20px;
|
|
.box-card {
|
margin-bottom: 20px;
|
|
::v-deep .el-card__header {
|
padding: 12px 20px;
|
border-bottom: 1px solid #dcdfe6;
|
|
.clearfix {
|
font-size: 15px;
|
font-weight: bold;
|
color: #303133;
|
}
|
}
|
}
|
}
|
|
.print-area {
|
display: flex;
|
justify-content: center;
|
padding: 20px;
|
|
.qrcode-container {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 30px;
|
border: 1px dashed #d9d9d9;
|
border-radius: 4px;
|
background-color: #fafafa;
|
width: 400px;
|
height: 400px;
|
|
.info-text {
|
margin-top: 20px;
|
text-align: center;
|
|
.text-item {
|
margin: 8px 0;
|
font-size: 14px;
|
color: #606266;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
</style>
|
