97 lines
2.4 KiB
Vue
97 lines
2.4 KiB
Vue
|
<template>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="top">
|
|||
|
|
|
|||
|
|
<img style="width: 80rpx; height: 80rpx;" src="../../../static//logo/logo.jpg" />
|
|||
|
|
|
|||
|
|
<svg id="barcodeSvg" ref="barcodeRef"></svg>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="content mt-16">
|
|||
|
|
<p>物料：
|
|||
|
|
<span>{{ material?.materialName }}</span>
|
|||
|
|
<span v-if="material?.quantity">x {{ material?.quantity }}</span>
|
|||
|
|
</p>
|
|||
|
|
<p>描述：
|
|||
|
|
<span v-if="material?.description">{{ material?.description || '-' }}</span>
|
|||
|
|
<span v-else>
|
|||
|
|
<span v-if="material?.materialShortName">{{ material?.materialShortName }} / </span>
|
|||
|
|
<span v-if="material?.model">{{ material?.model }} / </span>
|
|||
|
|
<span v-if="material?.specification">{{ material?.specification }} / </span>
|
|||
|
|
<span v-if="material?.typeName">{{ material?.typeName }} </span>
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
<view class="top">
|
|||
|
|
<p>备注：
|
|||
|
|
<!-- 简称/型号/规格/物料类型 -->
|
|||
|
|
<span>{{ material?.qrCodeMark || '' }}</span>
|
|||
|
|
|
|||
|
|
</p>
|
|||
|
|
<img :src="qrCode" class="qrcode" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { onMounted, computed } from 'vue';
|
|||
|
|
import JsBarcode from 'jsbarcode'
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
detail: {
|
|||
|
|
type: Object,
|
|||
|
|
default: null,
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// 条形码容器
|
|||
|
|
console.log(props.detail, 'props.detail');
|
|||
|
|
|
|||
|
|
// 二维码
|
|||
|
|
const qrCode = computed(() => props.detail?.[0]?.qrCode);
|
|||
|
|
// 物料数据
|
|||
|
|
const material = computed(() => props.detail?.[0]);
|
|||
|
|
// 条形码
|
|||
|
|
const barcodeValue = computed(() => props.detail?.[0]?.code);
|
|||
|
|
const generateBarcode = () => {
|
|||
|
|
const svg = document.getElementById('barcodeSvg')
|
|||
|
|
// SVG渲染：直接调用JsBarcode，无需清空（会自动替换内容）
|
|||
|
|
JsBarcode(svg, barcodeValue.value, {
|
|||
|
|
format: 'CODE128', // 常用的CODE128格式（支持任意字符）
|
|||
|
|
width: 3,
|
|||
|
|
height: 80,
|
|||
|
|
displayValue: false,
|
|||
|
|
margin: 10 // 条形码四周留白
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
onMounted(generateBarcode)
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.qrcode {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
p {
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 14px;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|