From c2e8526f8f857be5e3a8c6f2b39c5efd424de33e Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期四, 15 十月 2026 11:50:24 +0800
Subject: [PATCH] refactor(auth): 优化认证逻辑和界面组件结构
---
src/views/wls/barcode/components/printer-label.vue | 164 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 159 insertions(+), 5 deletions(-)
diff --git a/src/views/wls/barcode/components/printer-label.vue b/src/views/wls/barcode/components/printer-label.vue
index 7fbeee5..a6df06c 100644
--- a/src/views/wls/barcode/components/printer-label.vue
+++ b/src/views/wls/barcode/components/printer-label.vue
@@ -1,30 +1,184 @@
<script lang="ts" setup>
+import type { MesWmBarcodeApi } from '#/api/mes/wm/barcode';
+
+import { nextTick, ref } from 'vue';
+
import { Button, message } from 'ant-design-vue';
+
+import { createBarcode, getBarcodeByBusiness } from '#/api/mes/wm/barcode';
+
+import WlsBarcode from './barcode.vue';
defineOptions({ name: 'WlsPrinterLabel' });
-withDefaults(
+/** 鏍囩涓婇檮鍔犲睍绀虹殑涓氬姟瀛楁锛堝彲閫夛紝榛樿涓嶅睍绀猴級 */
+interface LabelField {
+ label: string;
+ value?: number | string;
+}
+
+const props = withDefaults(
defineProps<{
bizCode?: string;
bizId?: number;
- bizType?: string;
+ /** 涓氬姟鍚嶇О锛屼綔涓烘爣绛句富淇℃伅灞曠ず鍦ㄦ潯鐮佷笅鏂� */
+ bizName?: string;
+ bizType?: number;
+ /** 鏍囩鏍囬 */
+ title?: string;
+ /** 鎸夐挳鏂囨 */
labelText?: string;
+ /** 闄勫姞瀛楁锛屼竴鑸笉闇�瑕佷紶 */
+ fields?: LabelField[];
}>(),
{
bizCode: undefined,
bizId: undefined,
+ bizName: undefined,
bizType: undefined,
+ title: '',
labelText: '鏍囩鎵撳嵃',
+ fields: () => [],
},
);
-function handlePrint() {
- message.warning('鏍囩鎵撳嵃鍔熻兘鏆傛湭瀹炵幇锛屾暚璇锋湡寰�');
+const barcodeRef = ref<InstanceType<typeof WlsBarcode>>();
+const barcode = ref<MesWmBarcodeApi.Barcode>();
+const renderKey = ref(0);
+const printing = ref(false);
+/** 鎵撳嵃绐楀彛锛氶渶鍦ㄧ敤鎴风偣鍑绘椂鍚屾鎵撳紑锛屽惁鍒欎細琚祻瑙堝櫒鎷︽埅 */
+const printWindow = ref<null | Window>(null);
+
+function escapeHtml(value: string) {
+ return value
+ .replaceAll('&', '&')
+ .replaceAll('<', '<')
+ .replaceAll('>', '>');
+}
+
+/** 鏋勫缓鏍囩 HTML锛氭爣棰� + 鏉$爜鍥� + 鍚嶇О锛堝眳涓級锛岄檮鍔犲瓧娈靛彲閫� */
+function buildLabelHtml(base64: string) {
+ const nameHtml = props.bizName
+ ? `<div class="label-name">${escapeHtml(props.bizName)}</div>`
+ : '';
+ const infoHtml = props.fields
+ .filter((item) => item.value !== undefined && item.value !== '')
+ .map(
+ (item) =>
+ `<p><span class="info-label">${escapeHtml(item.label)}</span>${escapeHtml(String(item.value))}</p>`,
+ )
+ .join('');
+ return `<!DOCTYPE html>
+<html><head><meta charset="UTF-8"><title>${escapeHtml(props.title || '鎵撳嵃鏍囩')}</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:Arial,"Microsoft YaHei",sans-serif;display:flex;justify-content:center;padding:12px}
+.label{width:320px;padding:8px;text-align:center}
+.label-title{font-size:13px;color:#333;margin-bottom:6px}
+.label-barcode{width:200px;margin:0 auto}
+.label-barcode img{display:block;width:100%}
+.label-name{margin-top:8px;font-size:16px;font-weight:700;line-height:1.4;word-break:break-all}
+.label-info{margin-top:8px;font-size:12px;line-height:1.6;text-align:left;color:#333}
+.label-info p{margin:2px 0}
+.info-label{color:#666;margin-right:4px}
+.info-label::after{content:"锛�"}
+@page{margin:5mm}
+@media print{body{padding:0}.label{width:auto;max-width:100%}}
+</style>
+</head><body><div class="label">
+${props.title ? `<div class="label-title">${escapeHtml(props.title)}</div>` : ''}
+<div class="label-barcode"><img src="${base64}" alt="鏉$爜" /></div>
+${nameHtml}
+${infoHtml ? `<div class="label-info">${infoHtml}</div>` : ''}
+</div></body></html>`;
+}
+
+/** 鏉$爜鍥炬覆鏌撳畬鎴愶紝鎶婃爣绛惧唴瀹瑰啓鍏ュ凡鎵撳紑鐨勬墦鍗扮獥鍙e苟璋冭捣鎵撳嵃 */
+function handleBarcodeDone() {
+ const win = printWindow.value;
+ const base64 = barcodeRef.value?.getImageBase64();
+ printWindow.value = null;
+ if (!win || win.closed) {
+ return;
+ }
+ if (!base64) {
+ message.warning('鏉$爜娓叉煋澶辫触锛屾棤娉曟墦鍗版爣绛�');
+ win.close();
+ return;
+ }
+ win.document.open();
+ win.document.write(buildLabelHtml(base64));
+ win.document.close();
+ setTimeout(() => win.print(), 500);
+}
+
+/** 鎵撳嵃鏍囩锛氭棤鏉$爜鏃跺厛鐢熸垚锛屽啀娓叉煋鏉$爜鍥惧悗鎵撳嵃 */
+async function handlePrint() {
+ if (!props.bizType || !props.bizId) {
+ message.warning('缂哄皯涓氬姟绫诲瀷鎴栦笟鍔$紪鍙凤紝鏃犳硶鎵撳嵃鏍囩');
+ return;
+ }
+ if (printing.value) {
+ return;
+ }
+ // 鍦ㄧ敤鎴锋墜鍔垮唴鍚屾鎵撳紑绐楀彛锛岄伩鍏嶅脊绐楄鎷︽埅
+ const win = window.open('', '_blank');
+ if (!win) {
+ message.error('鏃犳硶鎵撳紑鎵撳嵃绐楀彛锛岃妫�鏌ユ祻瑙堝櫒璁剧疆');
+ return;
+ }
+ win.document.write(
+ '<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body style="font-family:Arial;padding:20px">姝e湪鐢熸垚鏍囩锛岃绋嶅�欌��</body></html>',
+ );
+ printWindow.value = win;
+ printing.value = true;
+ try {
+ let data = await getBarcodeByBusiness(props.bizType, props.bizId);
+ if (!data?.content) {
+ await createBarcode({
+ bizCode: props.bizCode || '',
+ bizId: props.bizId,
+ bizName: props.bizName || '',
+ bizType: props.bizType,
+ });
+ data = await getBarcodeByBusiness(props.bizType, props.bizId);
+ }
+ if (!data?.content) {
+ message.warning('鏉$爜鐢熸垚澶辫触锛屾棤娉曟墦鍗版爣绛�');
+ win.close();
+ printWindow.value = null;
+ return;
+ }
+ barcode.value = data;
+ renderKey.value += 1;
+ await nextTick();
+ } catch {
+ message.error('鎵撳嵃鏍囩澶辫触锛岃閲嶈瘯');
+ win.close();
+ printWindow.value = null;
+ } finally {
+ printing.value = false;
+ }
}
</script>
<template>
- <Button type="link" @click="handlePrint">
+ <Button :loading="printing" @click="handlePrint">
{{ labelText }}
</Button>
+ <!-- 闅愯棌鐨勬潯鐮佹覆鏌撳鍣紝娓叉煋瀹屾垚鍚庡彇鍑哄浘鐗囧啓鍏ユ墦鍗扮獥鍙� -->
+ <div
+ v-if="barcode?.content"
+ class="pointer-events-none fixed top-0 -left-[9999px] h-0 w-0 overflow-hidden"
+ >
+ <WlsBarcode
+ :key="renderKey"
+ ref="barcodeRef"
+ :content="barcode.content"
+ :format="barcode.format"
+ :height="150"
+ :width="280"
+ @done="handleBarcodeDone"
+ />
+ </div>
</template>
--
Gitblit v1.9.3