|
|
|
|
@ -9,18 +9,24 @@
|
|
|
|
|
class="qrcode-action-card__img"
|
|
|
|
|
>
|
|
|
|
|
<template #error>
|
|
|
|
|
<div class="qrcode-action-card__error">{{ emptyText }}</div>
|
|
|
|
|
<div class="qrcode-action-card__error">{{ errorText || emptyText }}</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-image>
|
|
|
|
|
<div v-else class="qrcode-action-card__error">{{ emptyText }}</div>
|
|
|
|
|
<div class="qrcode-action-card__mask">
|
|
|
|
|
<el-button circle :disabled="!imageUrl" @click="handlePreview">
|
|
|
|
|
<div v-if="showActionMask" class="qrcode-action-card__mask">
|
|
|
|
|
<el-button v-if="showPreview" circle :disabled="!imageUrl" @click="handlePreview">
|
|
|
|
|
<Icon icon="ep:zoom-in" />
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button circle :disabled="!imageUrl || printDisabled" @click="handlePrint">
|
|
|
|
|
<el-button v-if="showPrint" circle :disabled="!imageUrl || printDisabled" @click="handlePrint">
|
|
|
|
|
<Icon icon="ep:printer" />
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button circle :loading="refreshLoading" :disabled="refreshDisabled || refreshLoading" @click="handleRefresh">
|
|
|
|
|
<el-button
|
|
|
|
|
v-if="showRefresh"
|
|
|
|
|
circle
|
|
|
|
|
:loading="refreshLoading"
|
|
|
|
|
:disabled="refreshDisabled || refreshLoading"
|
|
|
|
|
@click="handleRefresh"
|
|
|
|
|
>
|
|
|
|
|
<Icon icon="ep:refresh" />
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
@ -48,6 +54,15 @@ const props = withDefaults(
|
|
|
|
|
refreshDisabled?: boolean
|
|
|
|
|
printDisabled?: boolean
|
|
|
|
|
refreshConfirmText?: string
|
|
|
|
|
errorText?: string
|
|
|
|
|
showPreview?: boolean
|
|
|
|
|
showPrint?: boolean
|
|
|
|
|
showRefresh?: boolean
|
|
|
|
|
printAdaptive?: boolean
|
|
|
|
|
printPaperWidth?: number
|
|
|
|
|
printPaperHeight?: number
|
|
|
|
|
printMaxWidth?: number
|
|
|
|
|
printMaxHeight?: number
|
|
|
|
|
}>(),
|
|
|
|
|
{
|
|
|
|
|
imageUrl: '',
|
|
|
|
|
@ -58,7 +73,16 @@ const props = withDefaults(
|
|
|
|
|
refreshMethod: 'post',
|
|
|
|
|
refreshDisabled: false,
|
|
|
|
|
printDisabled: false,
|
|
|
|
|
refreshConfirmText: ''
|
|
|
|
|
refreshConfirmText: '',
|
|
|
|
|
errorText: '',
|
|
|
|
|
showPreview: true,
|
|
|
|
|
showPrint: true,
|
|
|
|
|
showRefresh: true,
|
|
|
|
|
printAdaptive: true,
|
|
|
|
|
printPaperWidth: 80,
|
|
|
|
|
printPaperHeight: 80,
|
|
|
|
|
printMaxWidth: 180,
|
|
|
|
|
printMaxHeight: 120
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
@ -69,13 +93,21 @@ const emit = defineEmits<{
|
|
|
|
|
const hiprintPreviewDialogRef = ref()
|
|
|
|
|
const refreshLoading = ref(false)
|
|
|
|
|
|
|
|
|
|
const buildQrcodeTemplateJson = (qrcodeUrl: string, printId: string | number) => ({
|
|
|
|
|
const showActionMask = computed(() => props.showPreview || props.showPrint || props.showRefresh)
|
|
|
|
|
|
|
|
|
|
const buildQrcodeTemplateJson = (
|
|
|
|
|
qrcodeUrl: string,
|
|
|
|
|
printId: string,
|
|
|
|
|
imageWidth: number,
|
|
|
|
|
imageHeight: number,
|
|
|
|
|
paperHeight: number
|
|
|
|
|
) => ({
|
|
|
|
|
panels: [
|
|
|
|
|
{
|
|
|
|
|
index: 0,
|
|
|
|
|
name: 1,
|
|
|
|
|
width: 80,
|
|
|
|
|
height: 80,
|
|
|
|
|
width: imageWidth,
|
|
|
|
|
height: paperHeight,
|
|
|
|
|
paperHeader: 0,
|
|
|
|
|
paperFooter: 0,
|
|
|
|
|
printElements: [
|
|
|
|
|
@ -83,8 +115,8 @@ const buildQrcodeTemplateJson = (qrcodeUrl: string, printId: string | number) =>
|
|
|
|
|
options: {
|
|
|
|
|
left: 0,
|
|
|
|
|
top: 0,
|
|
|
|
|
width: 100,
|
|
|
|
|
height: 100,
|
|
|
|
|
width: imageWidth,
|
|
|
|
|
height: imageHeight,
|
|
|
|
|
src: qrcodeUrl,
|
|
|
|
|
field: 'qrcodeUrl',
|
|
|
|
|
title: '二维码图片',
|
|
|
|
|
@ -95,12 +127,12 @@ const buildQrcodeTemplateJson = (qrcodeUrl: string, printId: string | number) =>
|
|
|
|
|
type: 'image'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
{
|
|
|
|
|
options: {
|
|
|
|
|
left: 20,
|
|
|
|
|
top: 100,
|
|
|
|
|
height: 8,
|
|
|
|
|
width: 60,
|
|
|
|
|
left: 0,
|
|
|
|
|
top: imageHeight + 2,
|
|
|
|
|
height: 10,
|
|
|
|
|
width: imageWidth,
|
|
|
|
|
testData: printId,
|
|
|
|
|
title: 'ID',
|
|
|
|
|
field: 'printId',
|
|
|
|
|
@ -121,6 +153,47 @@ const buildQrcodeTemplateJson = (qrcodeUrl: string, printId: string | number) =>
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const getImageSize = (src: string) =>
|
|
|
|
|
new Promise<{ width: number; height: number }>((resolve, reject) => {
|
|
|
|
|
const img = new Image()
|
|
|
|
|
img.onload = () => {
|
|
|
|
|
const width = img.naturalWidth || img.width
|
|
|
|
|
const height = img.naturalHeight || img.height
|
|
|
|
|
if (!width || !height) {
|
|
|
|
|
reject(new Error('invalid image size'))
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
resolve({ width, height })
|
|
|
|
|
}
|
|
|
|
|
img.onerror = () => reject(new Error('image load failed'))
|
|
|
|
|
img.src = src
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const resolvePrintSize = async (src: string) => {
|
|
|
|
|
const fallbackWidth = Math.max(20, Number(props.printPaperWidth) || 80)
|
|
|
|
|
const fallbackHeight = Math.max(20, Number(props.printPaperHeight) || 80)
|
|
|
|
|
if (!props.printAdaptive) {
|
|
|
|
|
return { width: fallbackWidth, height: fallbackHeight }
|
|
|
|
|
}
|
|
|
|
|
try {
|
|
|
|
|
const size = await getImageSize(src)
|
|
|
|
|
const ratio = size.width / size.height
|
|
|
|
|
if (!Number.isFinite(ratio) || ratio <= 0) {
|
|
|
|
|
return { width: fallbackWidth, height: fallbackHeight }
|
|
|
|
|
}
|
|
|
|
|
if (ratio >= 1) {
|
|
|
|
|
const height = fallbackHeight
|
|
|
|
|
const width = Math.min(Math.max(fallbackWidth, Math.round(height * ratio)), Number(props.printMaxWidth) || 180)
|
|
|
|
|
return { width, height }
|
|
|
|
|
}
|
|
|
|
|
const width = fallbackWidth
|
|
|
|
|
const height = Math.min(Math.max(fallbackHeight, Math.round(width / ratio)), Number(props.printMaxHeight) || 120)
|
|
|
|
|
return { width, height }
|
|
|
|
|
} catch {
|
|
|
|
|
return { width: fallbackWidth, height: fallbackHeight }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handlePreview = () => {
|
|
|
|
|
if (!props.imageUrl) return
|
|
|
|
|
createImageViewer({
|
|
|
|
|
@ -129,25 +202,31 @@ const handlePreview = () => {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handlePrint = () => {
|
|
|
|
|
if (!props.imageUrl) return
|
|
|
|
|
const handlePrint = async () => {
|
|
|
|
|
if (!props.imageUrl || !props.showPrint) return
|
|
|
|
|
const printSize = await resolvePrintSize(props.imageUrl)
|
|
|
|
|
const imageWidth = printSize.width
|
|
|
|
|
const imageHeight = printSize.height
|
|
|
|
|
const printId = props.printId === undefined || props.printId === null ? '' : String(props.printId)
|
|
|
|
|
const idAreaHeight = printId ? 14 : 0
|
|
|
|
|
const paperHeight = imageHeight + idAreaHeight
|
|
|
|
|
hiprintPreviewDialogRef.value?.open({
|
|
|
|
|
title: props.printTitle,
|
|
|
|
|
printData: {
|
|
|
|
|
qrcodeUrl: props.imageUrl,
|
|
|
|
|
printId: props.printId ? String(props.printId) : ''
|
|
|
|
|
printId
|
|
|
|
|
},
|
|
|
|
|
templateJson: buildQrcodeTemplateJson(props.imageUrl,props.printId),
|
|
|
|
|
templateJson: buildQrcodeTemplateJson(props.imageUrl, printId, imageWidth, imageHeight, paperHeight),
|
|
|
|
|
withDefaultQrcodeLayout: false,
|
|
|
|
|
paperSize: {
|
|
|
|
|
width: 80,
|
|
|
|
|
height: 80
|
|
|
|
|
width: imageWidth,
|
|
|
|
|
height: paperHeight
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleRefresh = async () => {
|
|
|
|
|
if (!props.refreshUrl || props.refreshDisabled) return
|
|
|
|
|
if (!props.refreshUrl || props.refreshDisabled || !props.showRefresh) return
|
|
|
|
|
try {
|
|
|
|
|
await message.confirm(props.refreshConfirmText || '确认刷新二维码吗?')
|
|
|
|
|
} catch {
|
|
|
|
|
|