<template>
|
<div class="previewWrap">
|
<div class="flex" v-for="(x, i) in previewInfo" :key="i">
|
<div class="l">{{ x.caption }}</div>
|
<div class="r">
|
<template v-if="x.caption === '二维码'">
|
<vue-qrcode
|
:value="x.defaultValue"
|
:options="{ height: 150, width: 150 }"
|
/>
|
</template>
|
<template v-else-if="x.caption === '条形码'">
|
<VueBarcode :value="x.defaultValue" />
|
</template>
|
<template v-else>
|
{{ x.defaultValue }}
|
</template>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { getObj } from '@/api/print/print'
|
import { getObj as getObjFromLog } from '@/api/print/log'
|
import VueQrcode from '@chenfengyuan/vue-qrcode'
|
import VueBarcode from 'vue-barcode'
|
export default {
|
props: {
|
rowInfo: {
|
type: Object,
|
default: () => {}
|
},
|
isLog: {
|
type: Boolean,
|
default: false
|
}
|
},
|
components: {
|
VueQrcode,
|
VueBarcode
|
},
|
data() {
|
return {
|
previewInfo: []
|
}
|
},
|
created() {},
|
watch: {
|
rowInfo(newVal) {
|
if (newVal.id) {
|
this.getPreviewInfo(newVal)
|
}
|
}
|
},
|
methods: {
|
f(name, previewInfo) {
|
const theOne = previewInfo.find((e) => {
|
return e.caption === name
|
})
|
return theOne ? theOne.defaultValue : null
|
},
|
getPreviewInfo(val) {
|
;(this.isLog ? getObjFromLog : getObj)(val.id).then((res) => {
|
this.previewInfo = JSON.parse(
|
res.data.data.labelInfo
|
).qualityLabelPrintConfigDetail
|
const lengthOne = this.previewInfo.find((e) => e.caption === '长度')
|
if (lengthOne) {
|
lengthOne.defaultValue = Number(lengthOne.defaultValue) * 1000 + 'm'
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
>>> .vue-barcode-element {
|
width: 220px;
|
height: 110px;
|
margin-left: -15px;
|
}
|
>>> canvas {
|
margin: -10px;
|
}
|
.flex {
|
display: flex;
|
}
|
.previewWrap {
|
border: 1px solid #ccc;
|
border-radius: 6px;
|
padding: 10px 20px;
|
min-height: 300px;
|
> .flex {
|
padding: 5px 0;
|
.l {
|
width: 90px;
|
}
|
.r {
|
width: calc(100% - 90px);
|
}
|
}
|
}
|
</style>
|
