二维码样式更改

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

@@ -51,7 +51,11 @@ const bomCodes = ref('')
 
 
 const open = async ( vals) => {
-  cnenList.value = vals;
+   const sortedVals = [...vals].sort((a, b) => {
+    return a.id - b.id;
+  });
+  cnenList.value = sortedVals;
+
   specarr.value = []
   console.log(vals)
   datavals.value = []
@@ -74,7 +78,9 @@ const open = async ( vals) => {
   await Promise.all(
   
     printCodeName.value.map(async (item) => {
-      const qrCodeData = await QRCode.toDataURL(item.name)
+      const qrCodeData = await QRCode.toDataURL(item.name,{
+  errorCorrectionLevel: 'H' 
+})
       const qrCodeElement = document.getElementById('qrCodeContainer')
       if (qrCodeElement) {
         (qrCodeElement.innerHTML +=

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

@@ -184,7 +184,9 @@ const open = async ( vals) => {
 
   await Promise.all(
     printCodeName.value.map(async (item) => {
-      const qrCodeData = await QRCode.toDataURL(item.name)
+      const qrCodeData = await QRCode.toDataURL(item.name,{
+  errorCorrectionLevel: 'H' 
+})
       const qrCodeElement = document.getElementById('qrCodeContainer1')
       if (qrCodeElement) {
         (qrCodeElement.innerHTML +=

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

@@ -51,14 +51,36 @@ const bomCodes = ref('')
 
 
 const open = async (bomCode, vals) => {
-  cnenList.value = vals;
+ const sortedVals = [...vals].sort((a, b) => {
+    const aParts = a.blueprintNo.split('-').map(part => parseInt(part) || part);
+    const bParts = b.blueprintNo.split('-').map(part => parseInt(part) || part);
+
+    // 逐段比较
+    for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
+      const aPart = aParts[i] || 0; // 如果某段不存在，视为 0
+      const bPart = bParts[i] || 0;
+
+      // 如果当前段是数字，按数字比较
+      if (typeof aPart === 'number' && typeof bPart === 'number') {
+        if (aPart !== bPart) return aPart - bPart;
+      } 
+      // 如果当前段是字符串，按字典序比较
+      else {
+        if (aPart !== bPart) return String(aPart).localeCompare(String(bPart));
+      }
+    }
+
+    // 如果所有段都相同，按原始字符串比较
+    return a.blueprintNo.localeCompare(b.blueprintNo);
+  })
+
+  cnenList.value = sortedVals;
   bomCodes.value = bomCode;
   specarr.value = []
-  console.log(vals)
   datavals.value = []
   printCodeName.value = []
   
-  vals.forEach((item) => {
+  sortedVals.forEach((item) => {
     const row = {
       blueprintNo: item.blueprintNo,
     }
@@ -78,7 +100,9 @@ const open = async (bomCode, vals) => {
   var i = 0;
   await Promise.all(
     printCodeName.value.map(async (item) => {
-      const qrCodeData = await QRCode.toDataURL(item.name)
+      const qrCodeData = await QRCode.toDataURL(item.name,{
+  errorCorrectionLevel: 'H' 
+})
       const qrCodeElement = document.getElementById('qrCodeContainer')
       if (qrCodeElement) {
         (qrCodeElement.innerHTML +=

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

@@ -188,7 +188,9 @@ const open = async (bomCode, vals) => {
 
   await Promise.all(
     printCodeName.value.map(async (item) => {
-      const qrCodeData = await QRCode.toDataURL(item.name)
+      const qrCodeData = await QRCode.toDataURL(item.name,{
+  errorCorrectionLevel: 'H' 
+})
       const qrCodeElement = document.getElementById('qrCodeContainer1')
       if (qrCodeElement) {
         (qrCodeElement.innerHTML +=

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

@@ -10,20 +10,19 @@
     <el-button @click="onPrint" type="primary" style="float: right;margin-right: 1%;">打印</el-button>
 
     <!-- 打印预览 -->
-    <div class="print-wrap1 page" ref="print">
+    <div class="print-wrap page" ref="print">
-      <div id="qrCodeContainer1"></div>
+      <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" />
+        <printFinalDialog ref="printref" :minAmount="minAmount" :formData="formData" />
 </template>
 
 <script setup lang="ts">
-import { onMounted, nextTick } from 'vue'
+import QRCode from 'qrcode'
-import JsBarcode from 'jsbarcode'
 import printFinalDialog from './printFinalDialog.vue';
 const dialogVisible = ref(false)
 let clauseId = null;
@@ -34,92 +33,7 @@ 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()
 }
@@ -130,21 +44,26 @@ const outopen = () => {
 
 const printCodeName = ref([])
 const datavals = ref([])
-const specarr = ref([])
 const cnenList = ref([])
+const bomCodes = ref('')
+
+
 
 const open = async (vals) => {
-  cnenList.value = vals;
+   const sortedVals = [...vals].sort((a, b) => {
-  specarr.value = []
+    return b.id - a.id;
-  console.log(vals)
+  });
+
+  cnenList.value = sortedVals;
   datavals.value = []
   printCodeName.value = []
   
-  vals.forEach((item) => {
+  sortedVals.forEach((item) => {
+    console.log(item.id)
     const row1 = {
       code: item.matCode,
       name: item.matName == null ? '' : item.matName,
-      spec: item.spec == null ? '' : item.spec,
+      spec: item.matSpec == null ? '' : item.matSpec,
       rg: item.rgName == null ? '' : item.rgName,
       pg: item.pnName == null ? '' : item.pnName,
       //amount: item.amount == null ? '' : item.amount
@@ -153,53 +72,46 @@ const open = async (vals) => {
   })
 
   dialogVisible.value = true
-  
+
-  // 使用nextTick确保DOM更新完成
-  await nextTick()
-  
-  const qrCodeElement = document.getElementById('qrCodeContainer1')
-  if (!qrCodeElement) return
-  
-  // 清空容器
-  qrCodeElement.innerHTML = ''
   var i = 0;
-  // 生成打印内容
+  await Promise.all(
-  printCodeName.value.forEach((item) => {
+    printCodeName.value.map(async (item) => {
-    // 创建canvas元素用于生成条形码
+      
-    const canvas = document.createElement('canvas')
+      const formattedDate = `物料编码：${item.code}，规格：${item.spec}，简称：${item.name}，库区：${item.rg}，库位：${item.pg}`;
-    JsBarcode(canvas, item.code, {
+      const qrCodeData = await QRCode.toDataURL(formattedDate ,{
-          format: "CODE128", 
+  errorCorrectionLevel: 'H' 
-      width: 2,
+})
-      height: 40,
+      const qrCodeElement = document.getElementById('qrCodeContainer')
-      displayValue: false,
+      if (qrCodeElement) {
-      fontSize: 10
+        (qrCodeElement.innerHTML +=
-    })
+          `<div style="width: 90mm; height: 60mm; padding: 2mm; box-sizing: border-box; font-family: monospace; position: relative; background-color: black; color: white;">
-    
+            <div style="font-size: 11px; margin-bottom: 1mm;">
-    const barcodeSrc = canvas.toDataURL('image/png')
+              <span style="display: inline-block; width: 100%; border-bottom: 1px solid white; padding-bottom: 0.2mm;">物料编码：${item.code}</span>
-    
+            </div>
-    qrCodeElement.innerHTML +=
+            <div style="display: flex; align-items: center;">
-      `<div class="page qr-page">
+              <span style="white-space: nowrap; margin-right: 1mm;">简称:</span>
-        <div class="code-line">
+              <span style="flex-grow: 1; border-bottom: 1px solid white; height: 2em; margin-left: 1mm;">${item.name}</span>
-          <span>物料编码：${item.code}</span>
+            </div>
-        </div>
+            <div style="display: flex; position: absolute; bottom: 2mm; left: 2mm; right: 2mm; height: 34mm;">
-        <div class="barcode-container">
+              <div style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 13mm; margin-right: 1mm;">
-          <img class="barcode" src="${barcodeSrc}" alt="Barcode">
+                <span style="font-size: 11px; margin-bottom: 0.5mm; margin-top:2mm; white-space: nowrap;">规格: ${item.spec}</span>
-        </div>
+                <span style="font-size: 11px; margin-bottom: 0.5mm; margin-top:2mm; white-space: nowrap;">库区：${item.rg}</span>
-        <div class="spec-line">规格: ${item.spec}</div>
+                <span style="font-size: 11px; margin-bottom: 0.5mm; margin-top:2mm; white-space: nowrap;">库位：${item.pg}</span>
-        <div class="name-line">简称：${item.name}</div>
+              </div>
-        <div class="location-line">
+              <div style="width: 34mm; height: 34mm; margin-left: auto; display: flex; align-items: flex-end; justify-content: flex-end;">
-          <span>库区：${item.rg}</span>
+                <img style="width: 100%; height: 100%;" src="${qrCodeData}" alt="QR Code">
-          <span>库位：${item.pg}</span>
+              </div>
-        </div>
+            </div>
-      </div>`
+          </div>`)
-      if(vals.length > 1 && i<=vals.length - 1){
+                  if(printCodeName.value.length > 1 && i < printCodeName.value.length - 1){
-         qrCodeElement.innerHTML +=
+        qrCodeElement.innerHTML += 
-          `<div style="height:3mm; background-color: white; color: white;width:103mm;margin-left:-3mm">
+        `<div style="height:3mm; background-color: white; color: white;width:103mm;margin-left:-3mm">
             
           </div>`
+       }
       }
-      i++;
+    })
-  })
+  )
 }
 
 defineExpose({ open })
@@ -208,8 +120,8 @@ defineExpose({ open })
 <style scoped lang="scss">
 /* 预览样式 - 仅用于屏幕显示 */
 .page {
-  width: 60mm;
+  width: 100mm;
-  min-height: 30mm;
+  min-height: 60mm;
   margin: auto;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   background-color: black;
@@ -218,8 +130,8 @@ defineExpose({ open })
   box-sizing: border-box;
   
   /* 临时隐藏下划线，打印时会显示 */
-  .code-line span {
+  .code-line span, .name-underline {
-    border-bottom: 1px solid transparent;
+    display: none;
   }
 }
 
@@ -229,8 +141,8 @@ defineExpose({ open })
     background-color: black !important;
     color: white !important;
     
-    .code-line span {
+    .code-line span, .name-underline {
-      border-bottom: 1px solid white;
+      display: inline-block;
     }
   }
 }

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

@@ -10,8 +10,8 @@
     <el-button @click="onPrint" type="primary" style="float: right;margin-right: 1%;">打印</el-button>
 
     <!-- 打印预览 -->
-    <div class="print-wrap2 page" ref="print">
+    <div class="print-wrap1 page" ref="print">
-      <div id="qrCodeContainer2"></div>
+      <div id="qrCodeContainer1"></div>
     </div>
     <template #footer>
       <el-button @click="onPrint" type="primary">打印</el-button>
@@ -21,8 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, nextTick } from 'vue'
+import QRCode from 'qrcode'
-import JsBarcode from 'jsbarcode'
 
 const dialogVisible = ref(false)
 let clauseId = null;
@@ -30,7 +29,7 @@ const startPageNum = ref(0);
 const endPageNum = ref(0);
 
 const onPrint = () => {
-  const printNode = document.querySelector('.print-wrap2')
+  const printNode = document.querySelector('.print-wrap1')
   if (!printNode) return
   
   const newIframe: any = document.createElement('iframe')
@@ -69,34 +68,69 @@ const onPrint = () => {
             background-color: black !important;
             color: white !important;
           }
-          .code-line {
+          .code-line, .name-line {
-            width: 100%;
+            font-size: 11px;
-            margin-bottom: 2mm;
+            margin-bottom: 1mm;
-            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 {
+          .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: 14mm;
+            height: 14mm;
+            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;
-            margin: 1mm 0;
+            align-items: flex-start;
+            width: 13mm;
+            margin-right: 1mm;
           }
-          .barcode {
+          .quantity {
-            width: 20mm;
-            height: 7mm;
-          }
-          .spec-line, .name-line, .location-line {
-            margin-bottom: 1mm;
             font-size: 11px;
+            margin-bottom: 0.5mm;
+            margin-top:2mm;
+              white-space: nowrap;
           }
-          .location-line {
+          .timestamp {
-            display: flex;
+            font-size: 5px;
-            justify-content: space-between;
+            line-height: 1;
+            margin-top: auto;
+              white-space: nowrap;
           }
         </style>
       </head>
@@ -106,7 +140,7 @@ const onPrint = () => {
     </html>
   `)
   doc.close()
-  dialogVisible.value = false
+      dialogVisible.value = false
   setTimeout(() => {
     newIframe.contentWindow.focus()
     newIframe.contentWindow.print()
@@ -129,65 +163,57 @@ const specarr = ref([])
 const cnenList = ref([])
 
 const open = async (vals) => {
-  cnenList.value = vals;
+ cnenList.value = vals;
-  specarr.value = []
-  console.log(vals)
   datavals.value = []
   printCodeName.value = []
   
   vals.forEach((item) => {
+    console.log(item)
     const row1 = {
       code: item.matCode,
       name: item.matName == null ? '' : item.matName,
-      spec: item.spec == null ? '' : item.spec,
+      spec: item.matSpec == null ? '' : item.matSpec,
       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 Promise.all(
-  await nextTick()
+    printCodeName.value.map(async (item) => {
-  
+      const formattedDate = `物料编码：${item.code}，规格：${item.spec}，简称：${item.name}，库区：${item.rg}，库位：${item.pg}`;
-  const qrCodeElement = document.getElementById('qrCodeContainer2')
+      const qrCodeData = await QRCode.toDataURL(formattedDate ,{
-  if (!qrCodeElement) return
+  errorCorrectionLevel: 'H' 
-  
+})
-  // 清空容器
+      const qrCodeElement = document.getElementById('qrCodeContainer1')
-  qrCodeElement.innerHTML = ''
+      if (qrCodeElement) {
-  // 生成打印内容
+        (qrCodeElement.innerHTML +=
-  printCodeName.value.forEach((item) => {
+          `<div class="page qr-page">
-    // 创建canvas元素用于生成条形码
+            <div class="code-line">
-    const canvas = document.createElement('canvas')
+              <span>物料编码：${item.code}</span>
-    JsBarcode(canvas, item.code, {
+            </div>
-          format: "CODE128", 
+            <div class="name-line">
-      width: 2,
+              <span class="name-label">简称:</span>
-      height: 40,
+              <span class="name-underline">${item.name}</span>
-      displayValue: false,
+            </div>
-      fontSize: 10
+            <div class="bottom-section">
+              <div class="quantity-container">
+                <span class="quantity">规格: ${item.spec}</span>
+                <span class="quantity">库区: ${item.rg}</span>
+                <span class="quantity">库位: ${item.pg}</span>
+              </div>
+              <div class="qr-container">
+                <img class="qr-code" src="${qrCodeData}" alt="QR Code">
+              </div>
+            </div>
+          </div>`)
+      }
     })
-    
+  ).then(res => {
-    const barcodeSrc = canvas.toDataURL('image/png')
+    onPrint()
-    
-    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 })
@@ -196,7 +222,7 @@ defineExpose({ open })
 <style scoped lang="scss">
 /* 预览样式 - 仅用于屏幕显示 */
 .page {
-  width: 60mm;
+  width: 45mm;
   min-height: 30mm;
   margin: auto;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
@@ -206,8 +232,8 @@ defineExpose({ open })
   box-sizing: border-box;
   
   /* 临时隐藏下划线，打印时会显示 */
-  .code-line span {
+  .code-line span, .name-underline {
-    border-bottom: 1px solid transparent;
+    display: none;
   }
 }
 
@@ -217,8 +243,8 @@ defineExpose({ open })
     background-color: black !important;
     color: white !important;
     
-    .code-line span {
+    .code-line span, .name-underline {
-      border-bottom: 1px solid white;
+      display: inline-block;
     }
   }
 }