Merge remote-tracking branch 'origin/main'

mes-ui/mes-ui-admin-vue3/package.json

@@ -51,6 +51,7 @@
     "element-plus": "2.4.2",
     "fast-xml-parser": "^4.3.2",
     "highlight.js": "^11.9.0",
+    "jsbarcode": "^3.12.1",
     "jsencrypt": "^3.3.2",
     "lodash-es": "^4.17.21",
     "min-dash": "^4.1.1",

mes-ui/mes-ui-admin-vue3/src/views/heli/plan/printDialog.vue

@@ -6,156 +6,138 @@
     top="0%"
     :before-close="(doClose) => beforeDialogClose(doClose)"
   >
-  <el-button @click="outopen" style="float: right;margin-right: 0.5%;">取消</el-button>
+    <el-button @click="outopen" style="float: right;margin-right: 0.5%;">取消</el-button>
-  <el-button @click="onPrint" type="primary" style="float: right;margin-right: 1%;">打印</el-button>
+    <el-button @click="onPrint" type="primary" style="float: right;margin-right: 1%;">打印</el-button>
 
     <!-- 打印预览 -->
     <div class="print-wrap page" ref="print">
       <div id="qrCodeContainer"></div>
     </div>
     <template #footer>
-      <!-- 【打印】 -->
       <el-button @click="onPrint" type="primary">打印</el-button>
       <el-button @click="outopen">取消</el-button>
     </template>
   </Dialog>
+        <printFinalDialog ref="printref" :minAmount="minAmount" :formData="formData" />
 </template>
+
 <script setup lang="ts">
-// import { ref, reactive } from 'vue'
-// import { betweenDay, dateFormatter, formatDate } from '@/utils/formatTime'
 import QRCode from 'qrcode'
-// import * as ProjectOrderApi from '@/api/biz/projectorder'
+import printFinalDialog from './printFinalDialog.vue';
-const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogVisible = ref(false)
 let clauseId = null;
-const startPageNum=ref(0);
+const startPageNum = ref(0);
-const endPageNum=ref(0);
+const endPageNum = ref(0);
+const printref = ref()
 const onPrint = () => {
-  // 拿到打印页面dom节点
+    printref.value.open(cnenList.value)
-  const printNode = document.querySelector('.print-wrap')
+ 
-  if (!printNode) return
-  // 页面文档创建一个空的内框架，用于挂载打印节点，并设置一定的样式
-  const newIframe: any = document.createElement('iframe')
-  newIframe.setAttribute(
-    'style',
-    'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
-  )
-  newIframe.setAttribute('align', 'center')
-  document.body.appendChild(newIframe)
-  // 将打印页面设置为内框架内容
-  let doc: any = null
-  doc = newIframe.contentWindow.document
-  doc.write(`
-    <style type="text/css">
-      /* 浏览器打印基本样式 */
-@page {
-  size: 70mm 200mm;
-  margin: 0;
-   height: 200mm;
-
 }
-@media print {
+ 
-  .page {
-    margin: 0;
-	display: block;
-
-  }
-    .qr-page {
-      width: 70mm;
-      height: 200mm;
-      margin: 0;
-      padding: 0;
-    }
-}
-
-    </style>
-    <div>
-      ${printNode.innerHTML}
-    </div>`)
-
-	console.log(clauseId)
-
-  doc.close()
-  // 浏览器打印页面打开渲染
-  setTimeout(() => {
-    newIframe.contentWindow.focus()
-    newIframe.contentWindow.print()
-    document.body.removeChild(newIframe) // 移除打印内框架，下次打印下次再挂载
-    dialogVisible.value = false
-  }, 100)
-  // ProjectOrderApi.updatePrintStatus({clauseId:clauseId,printEmp:'',startPageNum:startPageNum.value,endPageNum:endPageNum.value})
-
-}
-// / 关闭 Dialog 前的处理逻辑
 function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
   outopen()
 }
 
-// 页面关闭重置
 const outopen = () => {
   dialogVisible.value = false
 }
 
 const printCodeName = ref([])
-
 const datavals = ref([])
-/** 打开弹窗 */
+const specarr = ref([])
-const specarr: any = ref([])
+const cnenList = ref([])
-const cnenList: any = ref([])
+const bomCodes = ref('')
-const open = async (vals) => {
+
-	console.log("打印预览传输的信息")
+
-  console.log(vals)
+
+const open = async ( vals) => {
+  cnenList.value = vals;
   specarr.value = []
-  //获取中英文对照表
-  // cnenList.value = await ProjectOrderApi.getcnenList()
   console.log(vals)
   datavals.value = []
   printCodeName.value = []
+  
   vals.forEach((item) => {
-    const row = {
+
-      projectSubShortName: item.projectSubShortName ,
-    }
-    const newName = `${item.projectSubShortName}`
     const row1 = {
-      name: newName
+      code: item.projectSubCode,
+      name: item.name == null ? '' : item.name,
+      amount: item.amount == null ? '' : item.amount
     }
     printCodeName.value.push(row1)
-    datavals.value.push(row)
   })
 
   dialogVisible.value = true
+  const currentDate = new Date()
+  const formattedDate = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')} ${String(currentDate.getHours()).padStart(2, '0')}:${String(currentDate.getMinutes()).padStart(2, '0')}:${String(currentDate.getSeconds()).padStart(2, '0')}`
+  var i = 0;
   await Promise.all(
+  
     printCodeName.value.map(async (item) => {
       const qrCodeData = await QRCode.toDataURL(item.name)
       const qrCodeElement = document.getElementById('qrCodeContainer')
       if (qrCodeElement) {
-          (qrCodeElement.innerHTML +=
+        (qrCodeElement.innerHTML +=
-            `<div class="page qr-page">
+         `<div style="width: 90mm; height: 60mm; box-sizing: border-box; font-family: monospace; position: relative; background-color: black; color: white;">
-         <div class="qr-code-container" style="padding:0mm;font-size:15px !important;font-weight:700;position: relative; height: 200mm">
+            <div style="font-size: 11px; margin-bottom: 1mm;">
-         <div style="text-align:center;"> <img src="${qrCodeData}" width="100%"  alt="QR Code"/></div>
+              <span style="display: inline-block; width: 100%; border-bottom: 1px solid white; padding-bottom: 0.2mm;">${item.code}</span>
-            <div style="margin:0 2mm;text-align:left;font-size:19px !important;" >
-            <span style="display:block;font-size:17px !important;">子项目编码：${item.name}</span>
             </div>
-         
+            <div style="display: flex; align-items: center;">
-        </div>
+              <span style="white-space: nowrap; margin-right: 1mm;">名称:</span>
-      </div>`)
+              <span style="flex-grow: 1; border-bottom: 1px solid white; height: 2em; margin-left: 1mm;">${item.name}</span>
+            </div>
+            <div style="display: flex; position: absolute; bottom: 2mm; left: 2mm; right: 2mm; height: 34mm;">
+              <div style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 13mm; margin-right: 1mm;">
+                <span style="font-size: 11px; margin-bottom: 0.5mm; margin-top:2mm; white-space: nowrap;">数量: ${item.amount}</span>
+                <span style="font-size: 5px; line-height: 1; margin-top: auto; white-space: nowrap;">${formattedDate}</span>
+              </div>
+              <div style="width: 34mm; height: 34mm; margin-left: auto; display: flex; align-items: flex-end; justify-content: flex-end;">
+                <img style="width: 100%; height: 100%;" src="${qrCodeData}" alt="QR Code">
+              </div>
+            </div>
+          </div>`)
+        if(printCodeName.value.length > 1 && i < printCodeName.value.length - 1){
+        qrCodeElement.innerHTML += 
+        `<div style="height:3mm; background-color: white; color: white;width:103mm;margin-left:-3mm">
+            
+          </div>`
+       }
       }
     })
   )
 }
-//  <p>${datavals.value[0]?.projectSubName},${datavals.value[0].spec},${datavals.value[0].sort},${datavals.value[0].amount}</p>
+
-//  <div class="qr-code-name">${item}</div>
+defineExpose({ open })
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>
 
 <style scoped lang="scss">
+/* 预览样式 - 仅用于屏幕显示 */
 .page {
-  width: 70mm;
+  width: 100mm;
-  min-height: 200mm;
+  min-height: 60mm;
   margin: auto;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  background-color: black;
+  color: white;
+  padding: 2mm;
+  box-sizing: border-box;
+  
+  /* 临时隐藏下划线，打印时会显示 */
+  .code-line span, .name-underline {
+    display: none;
+  }
 }
 
-/*
+/* 确保打印样式优先 */
-	A4的大小：21cm*29.7cm（width:794px;）。
+@media print {
-	单位换算：1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px*/
+  .page {
+    background-color: black !important;
+    color: white !important;
+    
+    .code-line span, .name-underline {
+      display: inline-block;
+    }
+  }
+}
 </style>
+

mes-ui/mes-ui-admin-vue3/src/views/heli/plan/printFinalDialog.vue

@@ -0,0 +1,248 @@
+<template>
+  <Dialog
+    title="打印预览"
+    v-model="dialogVisible"
+    width="1000"
+    top="0%"
+    :before-close="(doClose) => beforeDialogClose(doClose)"
+  >
+    <el-button @click="outopen" style="float: right;margin-right: 0.5%;">取消</el-button>
+    <el-button @click="onPrint" type="primary" style="float: right;margin-right: 1%;">打印</el-button>
+
+    <!-- 打印预览 -->
+    <div class="print-wrap1 page" ref="print">
+      <div id="qrCodeContainer1"></div>
+    </div>
+    <template #footer>
+      <el-button @click="onPrint" type="primary">打印</el-button>
+      <el-button @click="outopen">取消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import QRCode from 'qrcode'
+
+const dialogVisible = ref(false)
+let clauseId = null;
+const startPageNum = ref(0);
+const endPageNum = ref(0);
+
+const onPrint = () => {
+  const printNode = document.querySelector('.print-wrap1')
+  if (!printNode) return
+  
+  const newIframe: any = document.createElement('iframe')
+  newIframe.setAttribute(
+    'style',
+    'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
+  )
+  document.body.appendChild(newIframe)
+  
+  const doc = newIframe.contentWindow.document
+  // 添加基础样式
+  doc.write(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <style>
+          @page {
+            size: 45mm 30mm;
+            margin: 0;
+          }
+          body {
+            margin: 0;
+            padding: 0;
+            background-color: black !important;
+            color: white !important;
+            -webkit-print-color-adjust: exact;
+            print-color-adjust: exact;
+          }
+          .qr-page {
+            width: 45mm;
+            height: 30mm;
+            padding: 2mm;
+            box-sizing: border-box;
+            font-family: monospace;
+            position: relative;
+            background-color: black !important;
+            color: white !important;
+          }
+          .code-line, .name-line {
+            font-size: 11px;
+            margin-bottom: 1mm;
+          }
+          .code-line span {
+            display: inline-block;
+            width: 100%;
+            border-bottom: 1px solid white;
+            padding-bottom: 0.2mm;
+          }
+          .name-line {
+            display: flex;
+            align-items: center;
+          }
+          .name-label {
+            white-space: nowrap;
+            margin-right: 1mm;
+          }
+          .name-underline {
+            flex-grow: 1;
+            border-bottom: 1px solid white;
+            height: 1em;
+            margin-left: 1mm;
+          }
+          .bottom-section {
+            display: flex;
+            position: absolute;
+            bottom: 2mm;
+            left: 2mm;
+            right: 2mm;
+            height: 17mm;
+          }
+          .qr-container {
+            width: 17mm;
+            height: 17mm;
+            margin-left: auto;
+            display: flex;
+            align-items: flex-end;
+            justify-content: flex-end;
+          }
+          .qr-code {
+            width: 100%;
+            height: 100%;
+          }
+          .quantity-container {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            width: 13mm;
+            margin-right: 1mm;
+          }
+          .quantity {
+            font-size: 11px;
+            margin-bottom: 0.5mm;
+            margin-top:2mm;
+              white-space: nowrap;
+          }
+          .timestamp {
+            font-size: 5px;
+            line-height: 1;
+            margin-top: auto;
+              white-space: nowrap;
+          }
+        </style>
+      </head>
+      <body>
+        ${printNode.innerHTML}
+      </body>
+    </html>
+  `)
+  doc.close()
+      dialogVisible.value = false
+  setTimeout(() => {
+    newIframe.contentWindow.focus()
+    newIframe.contentWindow.print()
+    document.body.removeChild(newIframe)
+    dialogVisible.value = false
+  }, 100)
+}
+
+function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
+  outopen()
+}
+
+const outopen = () => {
+  dialogVisible.value = false
+}
+
+const printCodeName = ref([])
+const datavals = ref([])
+const specarr = ref([])
+const cnenList = ref([])
+const open = async ( vals) => {
+  cnenList.value = vals;
+  specarr.value = []
+  console.log(vals)
+  datavals.value = []
+  printCodeName.value = []
+  
+  vals.forEach((item) => {
+
+    const row1 = {
+      code: item.projectSubCode,
+      name: item.name == null ? '' : item.name,
+      amount: item.amount == null ? '' : item.amount
+    }
+    printCodeName.value.push(row1)
+  })
+
+  dialogVisible.value = true
+  const currentDate = new Date()
+  const formattedDate = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')} ${String(currentDate.getHours()).padStart(2, '0')}:${String(currentDate.getMinutes()).padStart(2, '0')}:${String(currentDate.getSeconds()).padStart(2, '0')}`
+
+  await Promise.all(
+    printCodeName.value.map(async (item) => {
+      const qrCodeData = await QRCode.toDataURL(item.name)
+      const qrCodeElement = document.getElementById('qrCodeContainer1')
+      if (qrCodeElement) {
+        (qrCodeElement.innerHTML +=
+          `<div class="page qr-page">
+            <div class="code-line">
+              <span>${item.code}</span>
+            </div>
+            <div class="name-line">
+              <span class="name-label">名称:</span>
+              <span class="name-underline">${item.name}</span>
+            </div>
+            <div class="bottom-section">
+              <div class="quantity-container">
+                <span class="quantity">数量: ${item.amount}</span>
+                <span class="timestamp">${formattedDate}</span>
+              </div>
+              <div class="qr-container">
+                <img class="qr-code" src="${qrCodeData}" alt="QR Code">
+              </div>
+            </div>
+          </div>`)
+      }
+    })
+  ).then(res => {
+    onPrint()
+  })
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss">
+/* 预览样式 - 仅用于屏幕显示 */
+.page {
+  width: 45mm;
+  min-height: 30mm;
+  margin: auto;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  background-color: black;
+  color: white;
+  padding: 2mm;
+  box-sizing: border-box;
+  
+  /* 临时隐藏下划线，打印时会显示 */
+  .code-line span, .name-underline {
+    display: none;
+  }
+}
+
+/* 确保打印样式优先 */
+@media print {
+  .page {
+    background-color: black !important;
+    color: white !important;
+    
+    .code-line span, .name-underline {
+      display: inline-block;
+    }
+  }
+}
+</style>

mes-ui/mes-ui-admin-vue3/src/views/heli/processdesign/printDialog.vue

@@ -6,155 +6,141 @@
     top="0%"
     :before-close="(doClose) => beforeDialogClose(doClose)"
   >
-  <el-button @click="outopen" style="float: right;margin-right: 0.5%;">取消</el-button>
+    <el-button @click="outopen" style="float: right;margin-right: 0.5%;">取消</el-button>
-  <el-button @click="onPrint" type="primary" style="float: right;margin-right: 1%;">打印</el-button>
+    <el-button @click="onPrint" type="primary" style="float: right;margin-right: 1%;">打印</el-button>
 
     <!-- 打印预览 -->
     <div class="print-wrap page" ref="print">
       <div id="qrCodeContainer"></div>
     </div>
     <template #footer>
-      <!-- 【打印】 -->
       <el-button @click="onPrint" type="primary">打印</el-button>
       <el-button @click="outopen">取消</el-button>
     </template>
   </Dialog>
+        <printFinalDialog ref="printref" :minAmount="minAmount" :formData="formData" />
 </template>
+
 <script setup lang="ts">
-// import { ref, reactive } from 'vue'
-// import { betweenDay, dateFormatter, formatDate } from '@/utils/formatTime'
 import QRCode from 'qrcode'
-// import * as ProjectOrderApi from '@/api/biz/projectorder'
+import printFinalDialog from './printFinalDialog.vue';
-const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogVisible = ref(false)
 let clauseId = null;
-const startPageNum=ref(0);
+const startPageNum = ref(0);
-const endPageNum=ref(0);
+const endPageNum = ref(0);
+const printref = ref()
 const onPrint = () => {
-  // 拿到打印页面dom节点
+    printref.value.open(bomCodes.value,cnenList.value)
-  const printNode = document.querySelector('.print-wrap')
+ 
-  if (!printNode) return
-  // 页面文档创建一个空的内框架，用于挂载打印节点，并设置一定的样式
-  const newIframe: any = document.createElement('iframe')
-  newIframe.setAttribute(
-    'style',
-    'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
-  )
-  newIframe.setAttribute('align', 'center')
-  document.body.appendChild(newIframe)
-  // 将打印页面设置为内框架内容
-  let doc: any = null
-  doc = newIframe.contentWindow.document
-  doc.write(`
-    <style type="text/css">
-      /* 浏览器打印基本样式 */
-@page {
-  size: 70mm 200mm;
-  margin: 0;
-   height: 200mm;
-
 }
-@media print {
+ 
-  .page {
-    margin: 0;
-	display: block;
-
-  }
-    .qr-page {
-      width: 70mm;
-      height: 200mm;
-      margin: 0;
-      padding: 0;
-    }
-}
-
-    </style>
-    <div>
-      ${printNode.innerHTML}
-    </div>`)
-
-	console.log(clauseId)
-
-  doc.close()
-  // 浏览器打印页面打开渲染
-  setTimeout(() => {
-    newIframe.contentWindow.focus()
-    newIframe.contentWindow.print()
-    document.body.removeChild(newIframe) // 移除打印内框架，下次打印下次再挂载
-    dialogVisible.value = false
-  }, 100)
-  // ProjectOrderApi.updatePrintStatus({clauseId:clauseId,printEmp:'',startPageNum:startPageNum.value,endPageNum:endPageNum.value})
-
-}
-// / 关闭 Dialog 前的处理逻辑
 function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
   outopen()
 }
 
-// 页面关闭重置
 const outopen = () => {
   dialogVisible.value = false
 }
 
 const printCodeName = ref([])
-
 const datavals = ref([])
-/** 打开弹窗 */
+const specarr = ref([])
-const specarr: any = ref([])
+const cnenList = ref([])
-const cnenList: any = ref([])
+const bomCodes = ref('')
-const open = async (bomCode,vals) => {
+
-	console.log("打印预览传输的信息")
+
+
+const open = async (bomCode, vals) => {
+  cnenList.value = vals;
+  bomCodes.value = bomCode;
   specarr.value = []
-  //获取中英文对照表
-  // cnenList.value = await ProjectOrderApi.getcnenList()
   console.log(vals)
   datavals.value = []
   printCodeName.value = []
+  
   vals.forEach((item) => {
     const row = {
-      blueprintNo: item.blueprintNo ,
+      blueprintNo: item.blueprintNo,
     }
     const newName = `${bomCode}-${item.blueprintNo}`
     const row1 = {
-      name: newName
+      code: newName,
+      name: item.materialName == null ? '' : item.materialName,
+      amount: item.amount == null ? '' : item.amount
     }
     printCodeName.value.push(row1)
     datavals.value.push(row)
   })
 
   dialogVisible.value = true
+  const currentDate = new Date()
+  const formattedDate = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')} ${String(currentDate.getHours()).padStart(2, '0')}:${String(currentDate.getMinutes()).padStart(2, '0')}:${String(currentDate.getSeconds()).padStart(2, '0')}`
+  var i = 0;
   await Promise.all(
     printCodeName.value.map(async (item) => {
       const qrCodeData = await QRCode.toDataURL(item.name)
       const qrCodeElement = document.getElementById('qrCodeContainer')
       if (qrCodeElement) {
-          (qrCodeElement.innerHTML +=
+        (qrCodeElement.innerHTML +=
-            `<div class="page qr-page">
+          `<div style="width: 90mm; height: 60mm; padding: 2mm; box-sizing: border-box; font-family: monospace; position: relative; background-color: black; color: white;">
-         <div class="qr-code-container" style="padding:0mm;font-size:15px !important;font-weight:700;position: relative; height: 200mm">
+            <div style="font-size: 11px; margin-bottom: 1mm;">
-         <div style="text-align:center;"> <img src="${qrCodeData}" width="100%"  alt="QR Code"/></div>
+              <span style="display: inline-block; width: 100%; border-bottom: 1px solid white; padding-bottom: 0.2mm;">${item.code}</span>
-            <div style="margin:0 2mm;text-align:left;font-size:19px !important;" >
-            <span style="display:block;font-size:17px !important;">图纸编号：${item.name}</span>
             </div>
-         
+            <div style="display: flex; align-items: center;">
-        </div>
+              <span style="white-space: nowrap; margin-right: 1mm;">名称:</span>
-      </div>`)
+              <span style="flex-grow: 1; border-bottom: 1px solid white; height: 2em; margin-left: 1mm;">${item.name}</span>
+            </div>
+            <div style="display: flex; position: absolute; bottom: 2mm; left: 2mm; right: 2mm; height: 34mm;">
+              <div style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 13mm; margin-right: 1mm;">
+                <span style="font-size: 11px; margin-bottom: 0.5mm; margin-top:2mm; white-space: nowrap;">数量: ${item.amount}</span>
+                <span style="font-size: 5px; line-height: 1; margin-top: auto; white-space: nowrap;">${formattedDate}</span>
+              </div>
+              <div style="width: 34mm; height: 34mm; margin-left: auto; display: flex; align-items: flex-end; justify-content: flex-end;">
+                <img style="width: 100%; height: 100%;" src="${qrCodeData}" alt="QR Code">
+              </div>
+            </div>
+          </div>`)
+                  if(printCodeName.value.length > 1 && i < printCodeName.value.length - 1){
+        qrCodeElement.innerHTML += 
+        `<div style="height:3mm; background-color: white; color: white;width:103mm;margin-left:-3mm">
+            
+          </div>`
+       }
       }
     })
   )
 }
-//  <p>${datavals.value[0]?.projectSubName},${datavals.value[0].spec},${datavals.value[0].sort},${datavals.value[0].amount}</p>
+
-//  <div class="qr-code-name">${item}</div>
+defineExpose({ open })
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>
 
 <style scoped lang="scss">
+/* 预览样式 - 仅用于屏幕显示 */
 .page {
-  width: 70mm;
+  width: 100mm;
-  min-height: 200mm;
+  min-height: 60mm;
   margin: auto;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  background-color: black;
+  color: white;
+  padding: 2mm;
+  box-sizing: border-box;
+  
+  /* 临时隐藏下划线，打印时会显示 */
+  .code-line span, .name-underline {
+    display: none;
+  }
 }
 
-/*
+/* 确保打印样式优先 */
-	A4的大小：21cm*29.7cm（width:794px;）。
+@media print {
-	单位换算：1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px*/
+  .page {
-</style>
+    background-color: black !important;
+    color: white !important;
+    
+    .code-line span, .name-underline {
+      display: inline-block;
+    }
+  }
+}
+</style>

mes-ui/mes-ui-admin-vue3/src/views/heli/processdesign/printFinalDialog.vue

@@ -0,0 +1,252 @@
+<template>
+  <Dialog
+    title="打印预览"
+    v-model="dialogVisible"
+    width="1000"
+    top="0%"
+    :before-close="(doClose) => beforeDialogClose(doClose)"
+  >
+    <el-button @click="outopen" style="float: right;margin-right: 0.5%;">取消</el-button>
+    <el-button @click="onPrint" type="primary" style="float: right;margin-right: 1%;">打印</el-button>
+
+    <!-- 打印预览 -->
+    <div class="print-wrap1 page" ref="print">
+      <div id="qrCodeContainer1"></div>
+    </div>
+    <template #footer>
+      <el-button @click="onPrint" type="primary">打印</el-button>
+      <el-button @click="outopen">取消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import QRCode from 'qrcode'
+
+const dialogVisible = ref(false)
+let clauseId = null;
+const startPageNum = ref(0);
+const endPageNum = ref(0);
+
+const onPrint = () => {
+  const printNode = document.querySelector('.print-wrap1')
+  if (!printNode) return
+  
+  const newIframe: any = document.createElement('iframe')
+  newIframe.setAttribute(
+    'style',
+    'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
+  )
+  document.body.appendChild(newIframe)
+  
+  const doc = newIframe.contentWindow.document
+  // 添加基础样式
+  doc.write(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <style>
+          @page {
+            size: 45mm 30mm;
+            margin: 0;
+          }
+          body {
+            margin: 0;
+            padding: 0;
+            background-color: black !important;
+            color: white !important;
+            -webkit-print-color-adjust: exact;
+            print-color-adjust: exact;
+          }
+          .qr-page {
+            width: 45mm;
+            height: 30mm;
+            padding: 2mm;
+            box-sizing: border-box;
+            font-family: monospace;
+            position: relative;
+            background-color: black !important;
+            color: white !important;
+          }
+          .code-line, .name-line {
+            font-size: 11px;
+            margin-bottom: 1mm;
+          }
+          .code-line span {
+            display: inline-block;
+            width: 100%;
+            border-bottom: 1px solid white;
+            padding-bottom: 0.2mm;
+          }
+          .name-line {
+            display: flex;
+            align-items: center;
+          }
+          .name-label {
+            white-space: nowrap;
+            margin-right: 1mm;
+          }
+          .name-underline {
+            flex-grow: 1;
+            border-bottom: 1px solid white;
+            height: 1em;
+            margin-left: 1mm;
+          }
+          .bottom-section {
+            display: flex;
+            position: absolute;
+            bottom: 2mm;
+            left: 2mm;
+            right: 2mm;
+            height: 17mm;
+          }
+          .qr-container {
+            width: 17mm;
+            height: 17mm;
+            margin-left: auto;
+            display: flex;
+            align-items: flex-end;
+            justify-content: flex-end;
+          }
+          .qr-code {
+            width: 100%;
+            height: 100%;
+          }
+          .quantity-container {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            width: 13mm;
+            margin-right: 1mm;
+          }
+          .quantity {
+            font-size: 11px;
+            margin-bottom: 0.5mm;
+            margin-top:2mm;
+              white-space: nowrap;
+          }
+          .timestamp {
+            font-size: 5px;
+            line-height: 1;
+            margin-top: auto;
+              white-space: nowrap;
+          }
+        </style>
+      </head>
+      <body>
+        ${printNode.innerHTML}
+      </body>
+    </html>
+  `)
+  doc.close()
+      dialogVisible.value = false
+  setTimeout(() => {
+    newIframe.contentWindow.focus()
+    newIframe.contentWindow.print()
+    document.body.removeChild(newIframe)
+    dialogVisible.value = false
+  }, 100)
+}
+
+function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
+  outopen()
+}
+
+const outopen = () => {
+  dialogVisible.value = false
+}
+
+const printCodeName = ref([])
+const datavals = ref([])
+const specarr = ref([])
+const cnenList = ref([])
+
+const open = async (bomCode, vals) => {
+  specarr.value = []
+  console.log(vals)
+  datavals.value = []
+  printCodeName.value = []
+  
+  vals.forEach((item) => {
+    const row = {
+      blueprintNo: item.blueprintNo,
+    }
+    const newName = `${bomCode}-${item.blueprintNo}`
+    const row1 = {
+      code: newName,
+      name: item.materialName == null ? '' : item.materialName,
+      amount: item.amount == null ? '' : item.amount
+    }
+    printCodeName.value.push(row1)
+    datavals.value.push(row)
+  })
+
+  dialogVisible.value = true
+  const currentDate = new Date()
+  const formattedDate = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')} ${String(currentDate.getHours()).padStart(2, '0')}:${String(currentDate.getMinutes()).padStart(2, '0')}:${String(currentDate.getSeconds()).padStart(2, '0')}`
+
+  await Promise.all(
+    printCodeName.value.map(async (item) => {
+      const qrCodeData = await QRCode.toDataURL(item.name)
+      const qrCodeElement = document.getElementById('qrCodeContainer1')
+      if (qrCodeElement) {
+        (qrCodeElement.innerHTML +=
+          `<div class="page qr-page">
+            <div class="code-line">
+              <span>${item.code}</span>
+            </div>
+            <div class="name-line">
+              <span class="name-label">名称:</span>
+              <span class="name-underline">${item.name}</span>
+            </div>
+            <div class="bottom-section">
+              <div class="quantity-container">
+                <span class="quantity">数量: ${item.amount}</span>
+                <span class="timestamp">${formattedDate}</span>
+              </div>
+              <div class="qr-container">
+                <img class="qr-code" src="${qrCodeData}" alt="QR Code">
+              </div>
+            </div>
+          </div>`)
+      }
+    })
+  ).then(res => {
+    onPrint()
+  })
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss">
+/* 预览样式 - 仅用于屏幕显示 */
+.page {
+  width: 45mm;
+  min-height: 30mm;
+  margin: auto;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  background-color: black;
+  color: white;
+  padding: 2mm;
+  box-sizing: border-box;
+  
+  /* 临时隐藏下划线，打印时会显示 */
+  .code-line span, .name-underline {
+    display: none;
+  }
+}
+
+/* 确保打印样式优先 */
+@media print {
+  .page {
+    background-color: black !important;
+    color: white !important;
+    
+    .code-line span, .name-underline {
+      display: inline-block;
+    }
+  }
+}
+</style>

mes-ui/mes-ui-admin-vue3/src/views/heli/storagelog/StorageLogForm.vue

@@ -7,16 +7,19 @@
     <!-- 搜索工作栏 -->
     <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="108px">
       <el-form-item label="物料编码" prop="matCode">
-        <el-input v-model="queryParams.matCode" placeholder="物料编码" clearable @keyup.enter="handleQuery"
+        <el-input
+v-model="queryParams.matCode" placeholder="物料编码" clearable @keyup.enter="handleQuery"
           class="!w-240px" />
       </el-form-item>
       <el-form-item label="物料名称" prop="matName">
-        <el-input v-model="queryParams.matName" placeholder="物料名称" clearable @keyup.enter="handleQuery"
+        <el-input
+v-model="queryParams.matName" placeholder="物料名称" clearable @keyup.enter="handleQuery"
           class="!w-240px" />
       </el-form-item>
       <el-form-item label="物料类型" prop="matType">
         <el-select v-model="queryParams.matType" placeholder="下拉选择" clearable class="!w-240px">
-          <el-option v-for="dict in getIntDictOptions(DICT_TYPE.HELI_MATERIAL_TYPE)" :key="dict.label" :label="dict.label"
+          <el-option
+v-for="dict in getIntDictOptions(DICT_TYPE.HELI_MATERIAL_TYPE)" :key="dict.label" :label="dict.label"
             :value="dict.label" />
         </el-select>
       </el-form-item>
@@ -25,19 +28,22 @@
       </el-form-item>
       <el-form-item label="仓库" prop="whId">
         <el-select v-model="queryParams.whId" placeholder="下拉选择" clearable class="!w-240px" @change="handleWh">
-          <el-option v-for="dict in whList" :key="dict.id" :label="dict.wh_name"
+          <el-option
+v-for="dict in whList" :key="dict.id" :label="dict.wh_name"
             :value="dict.id" />
         </el-select>
       </el-form-item>
       <el-form-item label="库区" prop="rgId">
         <el-select v-model="queryParams.rgId" placeholder="下拉选择" clearable class="!w-240px" @change="handleRg">
-          <el-option v-for="dict in rgCurrentList" :key="dict.id" :label="dict.rg_name"
+          <el-option
+v-for="dict in rgCurrentList" :key="dict.id" :label="dict.rg_name"
             :value="dict.id" />
         </el-select>
       </el-form-item>
       <el-form-item label="库位" prop="pnId">
         <el-select v-model="queryParams.pnId" placeholder="下拉选择" clearable class="!w-240px">
-          <el-option v-for="dict in pnCurrentList" :key="dict.id" :label="dict.pn_name"
+          <el-option
+v-for="dict in pnCurrentList" :key="dict.id" :label="dict.pn_name"
             :value="dict.id" />
         </el-select>
       </el-form-item>
@@ -49,14 +55,20 @@
         <el-button @click="resetQuery">
           <Icon icon="ep:refresh" class="mr-5px" /> 重置
         </el-button>
+          <el-button type="warning" size="mini" @click="printfClick">
+            <Icon icon="ep:printer" class="mr-5px"/>
+            打印</el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" class="hl-table">
+    <el-table v-loading="loading" :data="list" :stripe="true"  @selection-change="handleSelectionChange"  :show-overflow-tooltip="true" class="hl-table">
-        <el-table-column type="index" width="100" fixed label="序号" align="center" />
+                       <el-table-column
+                        type="selection"
+                    width="55"/>
+      <el-table-column type="index" width="100" fixed label="序号" align="center" />
       <el-table-column label="物料编码" align="center" prop="matCode" fixed min-width="120" />
       <el-table-column label="物料名称" align="center" prop="matName" fixed min-width="120"/>
       <el-table-column label="物料类型" align="center" prop="matType" min-width="120"/>
@@ -72,10 +84,12 @@
       <el-table-column label="库存单位" align="center" prop="matUnit" min-width="120"/>
     </el-table>
     <!-- 分页 -->
-    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+    <Pagination
+:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
       @pagination="getList" />
   </ContentWrap>
 </el-card>
+    <printDialog ref="printref" :minAmount="minAmount" :formData="formData" />
 </template>
 
 <script setup lang="ts">
@@ -87,9 +101,9 @@ import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import * as WarehouseApi from '@/api/heli/warehouse'
 import * as RgApi from '@/api/heli/rg'
 import * as PnApi from '@/api/heli/pn'
-
+import  printDialog from './printDialog.vue'
 defineOptions({ name: 'StorageLog' })
-
+const printref = ref()
 const whList = ref([])
 const rgList = ref([])
 const pnList = ref([])
@@ -128,13 +142,22 @@ const getList = async () => {
     loading.value = false
   }
 }
-
+const clickItem = ref([])
+const handleSelectionChange = (val) => {
+  clickItem.value = val;
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
   getList()
 }
-
+const printfClick = () =>{
+  if(clickItem.value == null || clickItem.value.length == 0){
+     message.error("至少选择一项后，打印!")
+     return
+  }
+  printref.value.open(clickItem.value)
+}
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value.resetFields()

mes-ui/mes-ui-admin-vue3/src/views/heli/storagelog/printDialog.vue

@@ -0,0 +1,236 @@
+<template>
+  <Dialog
+    title="打印预览"
+    v-model="dialogVisible"
+    width="1000"
+    top="0%"
+    :before-close="(doClose) => beforeDialogClose(doClose)"
+  >
+    <el-button @click="outopen" style="float: right;margin-right: 0.5%;">取消</el-button>
+    <el-button @click="onPrint" type="primary" style="float: right;margin-right: 1%;">打印</el-button>
+
+    <!-- 打印预览 -->
+    <div class="print-wrap1 page" ref="print">
+      <div id="qrCodeContainer1"></div>
+    </div>
+    <template #footer>
+      <el-button @click="onPrint" type="primary">打印</el-button>
+      <el-button @click="outopen">取消</el-button>
+    </template>
+  </Dialog>
+     <printFinalDialog ref="printref" :minAmount="minAmount" :formData="formData" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, nextTick } from 'vue'
+import JsBarcode from 'jsbarcode'
+
+const dialogVisible = ref(false)
+let clauseId = null;
+const startPageNum = ref(0);
+const endPageNum = ref(0);
+const printref = ref()
+const onPrint = () => {
+    printref.value.open(cnenList.value)
+ 
+}
+// const onPrint = () => {
+//   const printNode = document.querySelector('.print-wrap1')
+//   if (!printNode) return
+  
+//   const newIframe: any = document.createElement('iframe')
+//   newIframe.setAttribute(
+//     'style',
+//     'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
+//   )
+//   document.body.appendChild(newIframe)
+  
+//   const doc = newIframe.contentWindow.document
+//   // 添加基础样式
+//   doc.write(`
+//     <!DOCTYPE html>
+//     <html>
+//       <head>
+//         <style>
+//           @page {
+//             size: 45mm 30mm;
+//             margin: 0;
+//           }
+//           body {
+//             margin: 0;
+//             padding: 0;
+//             background-color: black !important;
+//             color: white !important;
+//             -webkit-print-color-adjust: exact;
+//             print-color-adjust: exact;
+//           }
+//           .qr-page {
+//             width: 45mm;
+//             height: 30mm;
+//             padding: 2mm;
+//             box-sizing: border-box;
+//             font-family: monospace;
+//             position: relative;
+//             background-color: black !important;
+//             color: white !important;
+//           }
+//           .code-line {
+//             width: 100%;
+//             margin-bottom: 2mm;
+//             position: relative;
+//           }
+//           .code-line span {
+//             display: inline-block;
+//             width: 100%;
+//             border-bottom: 1px solid white;
+//             padding-bottom: 0.2mm;
+//             margin-bottom: 0.5mm;
+//           }
+//           .barcode-container {
+//             display: flex;
+//             justify-content: center;
+//             margin: 1mm 0;
+//           }
+//           .barcode {
+//             width: 20mm;
+//             height: 7mm;
+//           }
+//           .spec-line, .name-line, .location-line {
+//             margin-bottom: 1mm;
+//             font-size: 11px;
+//           }
+//           .location-line {
+//             display: flex;
+//             justify-content: space-between;
+//           }
+//         </style>
+//       </head>
+//       <body>
+//         ${printNode.innerHTML}
+//       </body>
+//     </html>
+//   `)
+//   doc.close()
+//   dialogVisible.value = false
+//   setTimeout(() => {
+//     newIframe.contentWindow.focus()
+//     newIframe.contentWindow.print()
+//     document.body.removeChild(newIframe)
+//     dialogVisible.value = false
+//   }, 100)
+// }
+
+function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
+  outopen()
+}
+
+const outopen = () => {
+  dialogVisible.value = false
+}
+
+const printCodeName = ref([])
+const datavals = ref([])
+const specarr = ref([])
+const cnenList = ref([])
+
+const open = async (vals) => {
+  cnenList.value = vals;
+  specarr.value = []
+  console.log(vals)
+  datavals.value = []
+  printCodeName.value = []
+  
+  vals.forEach((item) => {
+    const row1 = {
+      code: item.matCode,
+      name: item.matName == null ? '' : item.matName,
+      spec: item.spec == null ? '' : item.spec,
+      rg: item.rgName == null ? '' : item.rgName,
+      pg: item.pnName == null ? '' : item.pnName,
+      //amount: item.amount == null ? '' : item.amount
+    }
+    printCodeName.value.push(row1)
+  })
+
+  dialogVisible.value = true
+  
+  // 使用nextTick确保DOM更新完成
+  await nextTick()
+  
+  const qrCodeElement = document.getElementById('qrCodeContainer1')
+  if (!qrCodeElement) return
+  
+  // 清空容器
+  qrCodeElement.innerHTML = ''
+  var i = 0;
+  // 生成打印内容
+  printCodeName.value.forEach((item) => {
+    // 创建canvas元素用于生成条形码
+    const canvas = document.createElement('canvas')
+    JsBarcode(canvas, item.code, {
+      width: 2,
+      height: 40,
+      displayValue: false,
+      fontSize: 10
+    })
+    
+    const barcodeSrc = canvas.toDataURL('image/png')
+    
+    qrCodeElement.innerHTML +=
+      `<div class="page qr-page">
+        <div class="code-line">
+          <span>物料编码：${item.code}</span>
+        </div>
+        <div class="barcode-container">
+          <img class="barcode" src="${barcodeSrc}" alt="Barcode">
+        </div>
+        <div class="spec-line">规格: ${item.spec}</div>
+        <div class="name-line">简称：${item.name}</div>
+        <div class="location-line">
+          <span>库区：${item.rg}</span>
+          <span>库位：${item.pg}</span>
+        </div>
+      </div>`
+      if(vals.length > 1 && i<=vals.length - 1){
+         qrCodeElement.innerHTML +=
+          `<div style="height:3mm; background-color: white; color: white;width:103mm;margin-left:-3mm">
+            
+          </div>`
+      }
+      i++;
+  })
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss">
+/* 预览样式 - 仅用于屏幕显示 */
+.page {
+  width: 60mm;
+  min-height: 30mm;
+  margin: auto;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  background-color: black;
+  color: white;
+  padding: 2mm;
+  box-sizing: border-box;
+  
+  /* 临时隐藏下划线，打印时会显示 */
+  .code-line span {
+    border-bottom: 1px solid transparent;
+  }
+}
+
+/* 确保打印样式优先 */
+@media print {
+  .page {
+    background-color: black !important;
+    color: white !important;
+    
+    .code-line span {
+      border-bottom: 1px solid white;
+    }
+  }
+}
+</style>

mes-ui/mes-ui-admin-vue3/src/views/heli/storagelog/printFinalDialog.vue

@@ -0,0 +1,224 @@
+<template>
+  <Dialog
+    title="打印预览"
+    v-model="dialogVisible"
+    width="1000"
+    top="0%"
+    :before-close="(doClose) => beforeDialogClose(doClose)"
+  >
+    <el-button @click="outopen" style="float: right;margin-right: 0.5%;">取消</el-button>
+    <el-button @click="onPrint" type="primary" style="float: right;margin-right: 1%;">打印</el-button>
+
+    <!-- 打印预览 -->
+    <div class="print-wrap2 page" ref="print">
+      <div id="qrCodeContainer2"></div>
+    </div>
+    <template #footer>
+      <el-button @click="onPrint" type="primary">打印</el-button>
+      <el-button @click="outopen">取消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { onMounted, nextTick } from 'vue'
+import JsBarcode from 'jsbarcode'
+
+const dialogVisible = ref(false)
+let clauseId = null;
+const startPageNum = ref(0);
+const endPageNum = ref(0);
+
+const onPrint = () => {
+  const printNode = document.querySelector('.print-wrap2')
+  if (!printNode) return
+  
+  const newIframe: any = document.createElement('iframe')
+  newIframe.setAttribute(
+    'style',
+    'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
+  )
+  document.body.appendChild(newIframe)
+  
+  const doc = newIframe.contentWindow.document
+  // 添加基础样式
+  doc.write(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <style>
+          @page {
+            size: 45mm 30mm;
+            margin: 0;
+          }
+          body {
+            margin: 0;
+            padding: 0;
+            background-color: black !important;
+            color: white !important;
+            -webkit-print-color-adjust: exact;
+            print-color-adjust: exact;
+          }
+          .qr-page {
+            width: 45mm;
+            height: 30mm;
+            padding: 2mm;
+            box-sizing: border-box;
+            font-family: monospace;
+            position: relative;
+            background-color: black !important;
+            color: white !important;
+          }
+          .code-line {
+            width: 100%;
+            margin-bottom: 2mm;
+            position: relative;
+          }
+          .code-line span {
+            display: inline-block;
+            width: 100%;
+            border-bottom: 1px solid white;
+            padding-bottom: 0.2mm;
+            margin-bottom: 0.5mm;
+          }
+          .barcode-container {
+            display: flex;
+            justify-content: center;
+            margin: 1mm 0;
+          }
+          .barcode {
+            width: 20mm;
+            height: 7mm;
+          }
+          .spec-line, .name-line, .location-line {
+            margin-bottom: 1mm;
+            font-size: 11px;
+          }
+          .location-line {
+            display: flex;
+            justify-content: space-between;
+          }
+        </style>
+      </head>
+      <body>
+        ${printNode.innerHTML}
+      </body>
+    </html>
+  `)
+  doc.close()
+  dialogVisible.value = false
+  setTimeout(() => {
+    newIframe.contentWindow.focus()
+    newIframe.contentWindow.print()
+    document.body.removeChild(newIframe)
+    dialogVisible.value = false
+  }, 100)
+}
+
+function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
+  outopen()
+}
+
+const outopen = () => {
+  dialogVisible.value = false
+}
+
+const printCodeName = ref([])
+const datavals = ref([])
+const specarr = ref([])
+const cnenList = ref([])
+
+const open = async (vals) => {
+  cnenList.value = vals;
+  specarr.value = []
+  console.log(vals)
+  datavals.value = []
+  printCodeName.value = []
+  
+  vals.forEach((item) => {
+    const row1 = {
+      code: item.matCode,
+      name: item.matName == null ? '' : item.matName,
+      spec: item.spec == null ? '' : item.spec,
+      rg: item.rgName == null ? '' : item.rgName,
+      pg: item.pnName == null ? '' : item.pnName,
+      //amount: item.amount == null ? '' : item.amount
+    }
+    printCodeName.value.push(row1)
+  })
+
+  dialogVisible.value = true
+  
+  // 使用nextTick确保DOM更新完成
+  await nextTick()
+  
+  const qrCodeElement = document.getElementById('qrCodeContainer2')
+  if (!qrCodeElement) return
+  
+  // 清空容器
+  qrCodeElement.innerHTML = ''
+  // 生成打印内容
+  printCodeName.value.forEach((item) => {
+    // 创建canvas元素用于生成条形码
+    const canvas = document.createElement('canvas')
+    JsBarcode(canvas, item.code, {
+      width: 2,
+      height: 40,
+      displayValue: false,
+      fontSize: 10
+    })
+    
+    const barcodeSrc = canvas.toDataURL('image/png')
+    
+    qrCodeElement.innerHTML +=
+      `<div class="page qr-page">
+        <div class="code-line">
+          <span>物料编码：${item.code}</span>
+        </div>
+        <div class="barcode-container">
+          <img class="barcode" src="${barcodeSrc}" alt="Barcode">
+        </div>
+        <div class="spec-line">规格: ${item.spec}</div>
+        <div class="name-line">简称：${item.name}</div>
+        <div class="location-line">
+          <span>库区：${item.rg}</span>
+          <span>库位：${item.pg}</span>
+        </div>
+      </div>`
+  })
+  onPrint()
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss">
+/* 预览样式 - 仅用于屏幕显示 */
+.page {
+  width: 60mm;
+  min-height: 30mm;
+  margin: auto;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  background-color: black;
+  color: white;
+  padding: 2mm;
+  box-sizing: border-box;
+  
+  /* 临时隐藏下划线，打印时会显示 */
+  .code-line span {
+    border-bottom: 1px solid transparent;
+  }
+}
+
+/* 确保打印样式优先 */
+@media print {
+  .page {
+    background-color: black !important;
+    color: white !important;
+    
+    .code-line span {
+      border-bottom: 1px solid white;
+    }
+  }
+}
+</style>