86 lines
2.0 KiB
Vue
86 lines
2.0 KiB
Vue
<template>
|
|
<div class="flex-container">
|
|
<el-image class="barcodeClass" fit="scale-down" :src="form.barcodeUrl">
|
|
<div slot="error" class="image-slot">
|
|
<i class="el-icon-picture-outline"></i>
|
|
</div>
|
|
</el-image>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getBarcodeUrl } from "@/api/mes/wm/barcode";
|
|
|
|
export default {
|
|
name: 'BarcodeImg',
|
|
props: {
|
|
|
|
bussinessId: {
|
|
type: Number,
|
|
default: -1
|
|
},
|
|
bussinessCode: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
barcodeFormart: {
|
|
type: String,
|
|
default: 'QR_CODE'
|
|
},
|
|
barcodeType: {
|
|
type: String,
|
|
default : null
|
|
},
|
|
},
|
|
data(){
|
|
return {
|
|
form: {
|
|
barcodeUrl: null
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
getBarcode(){
|
|
debugger;
|
|
|
|
this.form.barcodeUrl = null;
|
|
if(this.bussinessCode == null){
|
|
return ;
|
|
}
|
|
//二维码查询参数
|
|
let barcodeParams = {
|
|
bussinessId: this.bussinessId,
|
|
bussinessCode: this.bussinessCode,
|
|
barcodeFormart: this.barcodeFormart,
|
|
barcodeType: this.barcodeType
|
|
};
|
|
getBarcodeUrl(barcodeParams).then( response =>{
|
|
if(response.data != null){
|
|
//this.$set(this.form,'barcodeUrl',response.data.barcodeUrl);//强制刷新DOM
|
|
this.form.barcodeUrl = response.data.barcodeUrl;
|
|
}
|
|
});
|
|
},
|
|
|
|
},
|
|
watch: {
|
|
'bussinessCode': 'getBarcode'
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.barcodeClass {
|
|
width: 200px;
|
|
height: 200px;
|
|
border: 1px dashed;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.flex-container{
|
|
display: flex;
|
|
justify-content: center; /* 水平居中 */
|
|
align-items: center; /* 垂直居中 */
|
|
}
|
|
</style>
|