feat:模具台账-详情添加二维码展示

liutao_branch
黄伟杰 2 months ago
parent 8f8f3b26dc
commit 4f667a56f3

@ -33,6 +33,7 @@ export interface MoldVO {
inTime: Date // 入库时间
status: number // 状态
images: string // 模具图片
qrcodeUrl?: string
fileUrl?: string
remark: string // 备注
isEnable: boolean // 是否启用

@ -21,6 +21,21 @@
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData?.isEnable" />
</el-descriptions-item>
<el-descriptions-item label="备注">{{ detailData?.remark ?? '' }}</el-descriptions-item>
<el-descriptions-item v-if="detailData?.qrcodeUrl" label="" :span="3">
<div class="mold-qrcode">
<el-image
:src="detailData.qrcodeUrl"
:preview-src-list="[detailData.qrcodeUrl]"
preview-teleported
fit="cover"
class="mold-qrcode-img"
>
<template #error>
<div class="mold-qrcode-error">二维码加载失败</div>
</template>
</el-image>
</div>
</el-descriptions-item>
</el-descriptions>
<div class="mold-detail-tabs">
@ -310,6 +325,12 @@ const maintainDateRange = ref<string[] | undefined>(undefined)
const repairExportLoading = ref(false)
const repairDateRange = ref<string[] | undefined>(undefined)
const openQrCode = () => {
const url = detailData.value?.qrcodeUrl
if (!url) return
window.open(String(url), '_blank')
}
const formatDetailDate = (value: any) => {
if (!value) return ''
return formatDate(new Date(value), 'YYYY-MM-DD')
@ -691,6 +712,49 @@ onMounted(async () => {
margin-bottom: 16px;
}
.mold-qrcode {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.mold-qrcode-img {
width: 150px;
height: 150px;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--el-border-color-lighter);
background: var(--el-fill-color-blank);
}
.mold-qrcode-error {
display: flex;
width: 100%;
height: 100%;
font-size: 12px;
color: var(--el-text-color-secondary);
background: var(--el-fill-color);
align-items: center;
justify-content: center;
}
.mold-qrcode-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.mold-qrcode-title {
font-weight: 600;
color: var(--el-text-color-primary);
}
.mold-qrcode-sub {
font-size: 12px;
color: var(--el-text-color-secondary);
}
.mold-history-table {
margin-top: 8px;
}

Loading…
Cancel
Save