From 57295febd254991c01eff2345ba293b89287689d Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 10 七月 2026 16:07:07 +0800
Subject: [PATCH] 银川 1.仓储物流页面开发、联调 2.项目配置修改
---
src/views/wls/barcode/components/detail.vue | 139 +++++++++++++++++++++++++++++++++++----------
1 files changed, 107 insertions(+), 32 deletions(-)
diff --git a/src/views/wls/barcode/components/detail.vue b/src/views/wls/barcode/components/detail.vue
index 17a9f37..c9abe98 100644
--- a/src/views/wls/barcode/components/detail.vue
+++ b/src/views/wls/barcode/components/detail.vue
@@ -24,6 +24,7 @@
column: 1,
schema: useBarcodeDetailSchema(),
useCard: false,
+ labelStyle: { width: '80px', whiteSpace: 'nowrap' },
});
function openModal(row: Partial<MesWmBarcodeApi.Barcode>) {
@@ -98,11 +99,86 @@
message.warning('鏉＄爜鐢熸垚澶辫触锛屾棤娉曚笅杞�');
return;
}
- const link = document.createElement('a');
- link.href = base64;
- link.download = `barcode_${barcodeData.value.bizCode || 'unknown'}_${Date.now()}.png`;
- link.click();
- message.success('涓嬭浇鎴愬姛');
+
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ if (!ctx) {
+ message.error('Canvas 鍒濆鍖栧け璐�');
+ return;
+ }
+
+ const img = new Image();
+ img.onload = () => {
+ const padding = 20;
+ const infoX = img.width + padding * 2;
+ const infoWidth = 320;
+ canvas.width = infoX + infoWidth + padding;
+ canvas.height = Math.max(img.height + padding * 2, 360);
+
+ ctx.fillStyle = '#ffffff';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ ctx.drawImage(img, padding, padding);
+
+ ctx.fillStyle = '#000000';
+ let y = padding + 10;
+ const lineHeight = 26;
+
+ // 鑾峰彇瀛楀吀鏂囨湰鐨勮緟鍔╁嚱鏁�
+ const getFormatText = (val?: number) => {
+ const map: Record<number, string> = { 1: 'QR_CODE', 2: 'CODE_128', 3: 'CODE_39', 4: 'EAN_13', 5: 'UPC_A' };
+ return map[val || 1] || 'QR_CODE';
+ };
+ const getBizTypeText = (val?: number) => {
+ const map: Record<number, string> = { 1: '浠撳簱', 2: '搴撳尯', 3: '搴撲綅', 4: '鐗╂枡', 5: '瀹㈡埛', 6: '渚涘簲鍟�', 7: '宸ュ崟', 8: '璁惧', 9: '宸ュ叿', 10: '浜哄憳', 11: '宸ヤ綔绔�', 12: '杞﹂棿', 13: '搴撳瓨', 14: '娴佽浆鍗�', 15: '瑁呯鍗�', 16: '鎵规' };
+ return map[val || 1] || '-';
+ };
+ const getStatusText = (val?: number) => val === 0 ? '绂佺敤' : '鍚敤';
+
+ const items = [
+ { label: '鏉＄爜鏍煎紡', value: getFormatText(barcodeData.value.format) },
+ { label: '涓氬姟绫诲瀷', value: getBizTypeText(barcodeData.value.bizType) },
+ { label: '涓氬姟缂栫爜', value: barcodeData.value.bizCode },
+ { label: '涓氬姟鍚嶇О', value: barcodeData.value.bizName },
+ { label: '鏉＄爜鍐呭', value: barcodeData.value.content },
+ { label: '鐘舵��', value: getStatusText(barcodeData.value.status) },
+ ];
+
+ items.forEach((item) => {
+ ctx.font = 'bold 13px Arial, sans-serif';
+ ctx.fillText(`${item.label}:`, infoX, y);
+ y += 18;
+ ctx.font = '13px Arial, sans-serif';
+ const text = item.value || '-';
+ // 澶勭悊闀挎枃鏈崲琛�
+ const maxWidth = infoWidth - 10;
+ if (ctx.measureText(text).width > maxWidth) {
+ let currentText = text;
+ while (currentText.length > 0) {
+ let line = '';
+ for (let i = 0; i < currentText.length; i++) {
+ const testLine = line + currentText[i];
+ if (ctx.measureText(testLine).width > maxWidth) break;
+ line = testLine;
+ }
+ ctx.fillText(line, infoX + 5, y);
+ y += 16;
+ currentText = currentText.slice(line.length);
+ }
+ y += 6;
+ } else {
+ ctx.fillText(text, infoX + 5, y);
+ y += lineHeight;
+ }
+ });
+
+ const link = document.createElement('a');
+ link.href = canvas.toDataURL('image/png');
+ link.download = `barcode_${barcodeData.value.bizCode || 'unknown'}_${Date.now()}.png`;
+ link.click();
+ message.success('涓嬭浇鎴愬姛');
+ };
+ img.src = base64;
}
async function handleGenerate() {
@@ -126,36 +202,35 @@
</script>
<template>
- <Modal v-model:open="open" title="鏌ョ湅鏉＄爜" width="500px">
+ <Modal v-model:open="open" title="鏌ョ湅鏉＄爜" width="750px">
<div>
- <div
- class="mb-5 flex min-h-50 items-center justify-center rounded bg-gray-100 p-5"
- >
- <div
- v-if="barcodeData.content"
- class="flex items-center justify-center"
- >
- <WlsBarcode
- ref="barcodeRef"
- :content="barcodeData.content"
- :format="barcodeData.format"
- :height="150"
- :width="400"
- />
+ <div class="mb-5 flex min-h-50 items-center rounded bg-gray-100 p-5">
+ <div v-if="barcodeData.content" class="flex w-full items-center gap-6">
+ <div class="flex-shrink-0">
+ <WlsBarcode
+ ref="barcodeRef"
+ :content="barcodeData.content"
+ :format="barcodeData.format"
+ :height="150"
+ :width="280"
+ />
+ </div>
+ <div class="flex-1">
+ <Descriptions :data="barcodeData">
+ <template #content>
+ <Tooltip :title="barcodeData.content">
+ <span
+ class="inline-block max-w-60 overflow-hidden text-ellipsis whitespace-nowrap"
+ >
+ {{ barcodeData.content }}
+ </span>
+ </Tooltip>
+ </template>
+ </Descriptions>
+ </div>
</div>
- <Empty v-else description="鏆傛棤鏉＄爜鏁版嵁" />
+ <Empty v-else description="鏆傛棤鏉＄爜鏁版嵁" class="flex-1" />
</div>
- <Descriptions :data="barcodeData">
- <template #content>
- <Tooltip :title="barcodeData.content">
- <span
- class="inline-block max-w-75 overflow-hidden text-ellipsis whitespace-nowrap"
- >
- {{ barcodeData.content }}
- </span>
- </Tooltip>
- </template>
- </Descriptions>
</div>
<template #footer>
<Button v-if="!barcodeData.content" @click="handleGenerate">
--
Gitblit v1.9.3