From 872362acd0e306bb2150d72cce1b556d272e6ba5 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期三, 25 六月 2025 10:01:24 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/tms/modules/inbound/QrCodePrint.vue | 165 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 165 insertions(+), 0 deletions(-)
diff --git a/src/views/tms/modules/inbound/QrCodePrint.vue b/src/views/tms/modules/inbound/QrCodePrint.vue
new file mode 100644
index 0000000..3234d11
--- /dev/null
+++ b/src/views/tms/modules/inbound/QrCodePrint.vue
@@ -0,0 +1,165 @@
+<template>
+ <a-card>
+ <!-- 鎿嶄綔鎸夐挳 -->
+ <a-button type="primary" @click="handlePrint">鐢熸垚骞舵墦鍗颁簩缁寸爜</a-button>
+ <a-button @click="handleBatchGenerate">鎵归噺鐢熸垚浜岀淮鐮�</a-button>
+
+ <!-- 闅愯棌鐨勬墦鍗板尯鍩� -->
+ <div id="printContainer" v-show="false">
+ <img :src="qrData.image" alt="浜岀淮鐮�" style="width: 5cm; height: 5cm;">
+ <div style="margin-top: 10px; font-size: 16px;" class="qr-content">{{ qrData.content }}</div>
+ </div>
+
+ <div id="printArea" style="display: block;">
+ <div v-for="(item, index) in qrList" :key="index" class="qrcode-item">
+ <img :src="item.base64" alt="QR Code">
+ <p>{{ item.content }}</p>
+ </div>
+ </div>
+ </a-card>
+</template>
+
+<script>
+import { getAction } from '@/api/manage'
+import printJS from 'print-js';
+
+export default {
+ data() {
+ return {
+ qrData: {
+ image: '',
+ content: ''
+ },
+ qrList: []
+ }
+ },
+ methods: {
+ // 鐢熸垚骞舵墦鍗颁簩缁寸爜
+ handlePrint() {
+
+ getAction('/tms/qyCode/generate').then(res => {
+ if (res.success) {
+ this.qrData = res.result;
+ // 纭繚DOM鏇存柊鍚庢墽琛屾墦鍗�
+ this.$nextTick(() => {
+ this.printQrCode();
+ });
+ }
+ });
+ },
+
+ // 鎵ц鎵撳嵃鎿嶄綔
+ printQrCode() {
+ // 1. 鍒涘缓鎵撳嵃鍐呭
+ const printContent = document.getElementById('printContainer').innerHTML;
+
+ // 2. 鍒涘缓鎵撳嵃绐楀彛
+ const printWindow = window.open('', '_blank');
+
+ // 3. 鍐欏叆鎵撳嵃鍐呭
+ printWindow.document.write(`
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <title>浜岀淮鐮佹墦鍗�</title>
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: Arial, sans-serif;
+ }
+ @media print {
+ @page {
+ size: auto;
+ margin: 0;
+ }
+ body {
+ margin: 0;
+ }
+ }
+ .qr-label {
+ width: 60mm;
+ height: 40mm;
+ padding: 2mm;
+ box-sizing: border-box;
+ border: 1px dotted #ccc; /* 鎵撳嵃鏃朵笉浼氭樉绀� */
+ text-align: center;
+ }
+ .qr-image {
+ width: 30mm;
+ height: 30mm;
+ display: block;
+ margin: 0 auto;
+ }
+ .qr-content {
+ font-size: 10pt;
+ margin-top: 1mm;
+ word-break: break-all;
+ }
+ </style>
+ </head>
+ <body>
+ ${printContent}
+ <script>
+ // 鑷姩瑙﹀彂鎵撳嵃骞跺叧闂獥鍙�
+ window.onload = function() {
+ setTimeout(function() {
+ window.print();
+ window.onafterprint = function() {
+ window.close();
+ };
+ // 鍏煎Safari
+ if (window.matchMedia) {
+ const mediaQueryList = window.matchMedia('print');
+ mediaQueryList.addListener(function(mql) {
+ if (!mql.matches) {
+ setTimeout(function() {
+ window.close();
+ }, 300);
+ }
+ });
+ }
+ }, 100);
+ };
+ <\/script>
+ </body>
+ </html>
+ `);
+
+ printWindow.document.close();
+ },
+
+ // 鎵归噺鐢熸垚浜岀淮鐮�
+ async handleBatchGenerate() {
+ getAction('/tms/qyCode/batchGenerate').then(res => {
+ if (res.success) {
+ this.qrList = res.result.map((content, i) => ({
+ content:res.result[i].content,
+ base64: res.result[i].image
+ }));
+ this.handleBacthPrint();
+ }
+ })
+ },
+
+ // 鎵ц鎵撳嵃
+ handleBacthPrint() {
+ this.$nextTick(() => {
+ printJS({
+ printable: 'printArea',
+ type: 'html',
+ style: `
+ .qrcode-item {
+ page-break-inside: avoid;
+ margin: 10px;
+ text-align: center;
+ }
+ img { width: 100px; height: 100px; }
+ `,
+ scanStyles: false
+ });
+ });
+ }
+ }
+}
+</script>
\ No newline at end of file
--
Gitblit v1.9.3