Merge branch 'htq20251215' of http://115.159.85.185:8098/r/ZhongRui/ALDbany...

z8018

2025-12-25 664df90a747e5a97b4e1131a5f958ded3176250c

 ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/extension/outbound/extend/printView1.vue

@@ -2,71 +2,66 @@
  <div>
    <vol-box v-model="showDetialBox" :lazy="true" width="500px" :padding="15" title="">
      <!-- æ‰“印专用容器 -->
      <div id="printContainer" style="position: absolute; left: -9999px;">
      <div id="printContainer" style="position: absolute; left: -9999px">
        <div class="print-page" v-for="(item, index) in printData" :key="index">
          <div class="material-card">
            <!-- <div class="header">卓力能物料标识卡(小包)</div> -->
            <div class="dual-column preview-card-header-qrcode">
              <div class="preview-card-header">物料卡 {{ idx + 1 }}</div>
              <VueQrcode :value="generateQr(item)" :size="20" id="qrcode" />
            <div class="dual-column header-section">
              <div class="header">卓力能物料标识卡(小包)</div>
              <VueQrcode :value="generateQr(item)" :size="60" class="qrcode" />
            </div>
            <div class="content">
              <!-- äºŒç»´ç æ”¾åœ¨å³ä¸Šè§’ -->
              <!-- <div class="qr-section"> -->
              <!-- <VueQrcode :value="generateQr(item)" id="qrcode" /> -->
              <!-- </div> -->
              <div class="row dual-column">
                <div class="column">
                  <span class="label">料号</span>
                  <span class="value code-value">{{ item.materialCode }}</span>
                  <span class="value code-value full-width">{{ item.materialCode }}</span>
                </div>
                <div class="column">
                  <span class="label">供应商编码</span>
                  <span class="value">{{ item.supplierCode }}</span>
                  <span class="value full-width">{{ item.suplierCode }}</span>
                </div>
              </div>

              <div class="row dual-column">
                <div class="column">
                  <span class="label">品名</span>
                  <span class="value">{{ item.materialName }}</span>
                  <span class="value full-width">{{ item.materialName }}</span>
                </div>
                <div class="column">
                  <span class="label">采购单号</span>
                  <span class="value">{{ item.purchaseOrderNo }}</span>
                  <span class="value full-width">{{ item.pruchaseOrderNo }}</span>
                </div>
              </div>

              <div class="row dual-column">
                <div class="column">
                  <span class="label">规格</span>
                  <span class="value full-width">{{ item.specification }}</span>
                  <span class="value full-width">{{ item.materialSpec }}</span>
                </div>
                <div class="column">
                  <span class="label">数量/总数</span>
                  <span class="value">{{ item.quantityTotal }}</span>
                  <span class="value full-width">{{ item.quantity }}</span>
                </div>
              </div>

              <div class="row dual-column">
                <div class="column">
                  <span class="label">批号</span>
                  <span class="value">{{ item.batchNumber }}</span>
                  <span class="value full-width">{{ item.barcode }}</span>
                </div>
                <div class="column">
                  <span class="label">批次</span>
                  <span class="value">{{ item.batch }}</span>
                  <span class="value full-width">{{ item.batchNo }}</span>
                </div>
              </div>

              <div class="row dual-column">
                <div class="column">
                  <span class="label">厂区</span>
                  <span class="value">{{ item.factory }}</span>
                  <span class="value full-width">{{ item.factoryArea }}</span>
                </div>
                <div class="column">
                  <span class="label">日期</span>
                  <span class="value">{{ item.date }}</span>
                  <span class="value full-width">{{ item.date }}</span>
                </div>
              </div>
            </div>
@@ -74,69 +69,69 @@
        </div>
      </div>

      <!-- é¢„览区域 -->
      <!-- é¢„览区域保持不变 -->
      <div id="previewContent" class="preview-container">
        <div class="preview-header">卓力能物料标识卡(小包) - é¢„览 (共{{ printData.length }}个)</div>
        <div class="preview-scroll">
          <div v-for="(item, idx) in printData" :key="idx" class="preview-card">
            <div class="dual-column preview-card-header-qrcode">
              <div class="preview-card-header">物料卡 {{ idx + 1 }}</div>
              <VueQrcode :value="generateQr(item)" :size="20" id="qrcode" />
              <div class="preview-card-header">卓力能物料标识卡(小包)</div>
              <VueQrcode :value="generateQr(item)" :size="40" class="qrcode-preview" />
            </div>
            <div class="preview-wrapper">
              <div class="content-preview">
                <div class="row-preview dual-column">
                  <div class="column-preview">
                    <span class="label-preview">料号</span>
                    <span class="value-preview code-value">{{ item.materialCode }}</span>
                    <span class="value-preview code-value full-width">{{ item.materialCode }}</span>
                  </div>
                  <div class="column-preview">
                    <span class="label-preview">供应商编码</span>
                    <span class="value-preview">{{ item.supplierCode }}</span>
                    <span class="value-preview full-width">{{ item.suplierCode }}</span>
                  </div>
                </div>

                <div class="row-preview dual-column">
                  <div class="column-preview">
                    <span class="label-preview">品名</span>
                    <span class="value-preview">{{ item.materialName }}</span>
                    <span class="value-preview full-width">{{ item.materialName }}</span>
                  </div>
                  <div class="column-preview">
                    <span class="label-preview">采购单号</span>
                    <span class="value-preview">{{ item.purchaseOrderNo }}</span>
                    <span class="value-preview full-width">{{ item.pruchaseOrderNo }}</span>
                  </div>
                </div>

                <div class="row-preview dual-column">
                  <div class="column-preview">
                    <span class="label-preview">规格</span>
                    <span class="value-preview full-width">{{ item.specification }}</span>
                    <span class="value-preview full-width">{{ item.materialSpec }}</span>
                  </div>
                  <div class="column-preview">
                    <span class="label-preview">数量/总数</span>
                    <span class="value-preview">{{ item.quantityTotal }}</span>
                    <span class="value-preview full-width">{{ item.quantity }}</span>
                  </div>
                </div>

                <div class="row-preview dual-column">
                  <div class="column-preview">
                    <span class="label-preview">批号</span>
                    <span class="value-preview">{{ item.batchNumber }}</span>
                    <span class="value-preview full-width">{{ item.barcode }}</span>
                  </div>
                  <div class="column-preview">
                    <span class="label-preview">批次</span>
                    <span class="value-preview">{{ item.batch }}</span>
                    <span class="value-preview full-width">{{ item.batchNo }}</span>
                  </div>
                </div>

                <div class="row-preview dual-column">
                  <div class="column-preview">
                    <span class="label-preview">厂区</span>
                    <span class="value-preview">{{ item.factory }}</span>
                    <span class="value-preview full-width">{{ item.factoryArea }}</span>
                  </div>
                  <div class="column-preview">
                    <span class="label-preview">日期</span>
                    <span class="value-preview">{{ item.date }}</span>
                    <span class="value-preview full-width">{{ item.date }}</span>
                  </div>
                </div>
              </div>
@@ -159,281 +154,242 @@
</template>

<script>
import VolBox from "@/components/basic/VolBox.vue";
import VueQrcode from "vue-qrcode";
import VolBox from '@/components/basic/VolBox.vue'
import VueQrcode from 'vue-qrcode'

export default {
  components: { VolBox, VueQrcode },
  data() {
    return {
      showDetialBox: false,
      printData: [], // å­˜å‚¨æ‰“印数据集合
    };
      printData: []
    }
  },
  methods: {
    generateQr(item) {
      return `${item.batchNumber}`;
      return `${item.barcode}`
    },

    open(rows) {
      this.showDetialBox = true;
      this.printData = Array.isArray(rows) ? rows : [rows];
      this.showDetialBox = true
      this.printData = Array.isArray(rows) ? rows : [rows]
      console.log('打印数据:', this.printData);
    },

    async print() {
      if (this.printData.length === 0) {
        this.$message.warning('没有可打印的数据');
        return;
        this.$message.warning('没有可打印的数据')
        return
      }

      this.$nextTick(() => {
        try {
          const printContent = document.getElementById("printContainer").innerHTML;
          const printWindow = window.open("", "_blank", "width=800,height=600,scrollbars=yes");
          const printContent = document.getElementById('printContainer').innerHTML
          const printWindow = window.open('', '_blank', 'width=800,height=600,scrollbars=yes')

          if (!printWindow) {
            this.$message.error('无法打开打印窗口，请检查浏览器弹窗设置');
            return;
            this.$message.error('无法打开打印窗口，请检查浏览器弹窗设置')
            return
          }

          printWindow.document.write(`
            <!DOCTYPE html>
            <html>
            <head>
              <meta charset="UTF-8">
              <title>物料标识卡打印 - å…±${this.printData.length}个</title>
              <style>
                /* é‡ç½®æ‰€æœ‰æ ·å¼ */
                * {
                  margin: 0;
                  padding: 0;
                  box-sizing: border-box;
          <!DOCTYPE html>
          <html>
          <head>
            <meta charset="UTF-8">
            <title>物料标识卡打印 - å…±${this.printData.length}个</title>
            <style>
              * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                color-adjust: exact !important;
              }
              
              body {
                font-family: "Microsoft YaHei", "SimHei", Arial, sans-serif;
                background: white !important;
                margin: 0 !important;
                padding: 0 !important;
                width: 80mm !important;
              }
              
              .qrcode {
                width: 15mm !important;
                height: 15mm !important;
                display: block;
              }
              
              .qrcode canvas {
                width: 15mm !important;
                height: 15mm !important;
                image-rendering: -webkit-optimize-contrast;
                image-rendering: crisp-edges;
              }
              
              @media print {
                @page {
                  size: 80mm 60mm !important;
                  margin: 0 !important;
                  padding: 0 !important;
                }
                
                body {
                  font-family: SimSun, "宋体", sans-serif;
                  -webkit-print-color-adjust: exact !important;
                  print-color-adjust: exact !important;
                  color-adjust: exact !important;
                }
                #qrcode {
                  width: 60px;
                  height: 60px;
                  display: block;
                  margin: 0, 15px
                }
                @media print {
                  @page {
                    size: 80mm 60mm;
                    margin: 0;
                    padding: 0;
                  }
                  
                  body {
                    margin: 0 !important;
                    padding: 0 !important;
                    width: 80mm !important;
                    background: white !important;
                  }
                  
                  .print-page {
                    width: 80mm !important;
                    height: 60mm !important;
                    page-break-after: always !important;
                    break-after: page !important;
                    margin: 0 !important;
                    padding: 2mm !important;
                    display: block !important;
                  }
                  
                  .print-page:last-child {
                    page-break-after: auto !important;
                  }
                  
                  .material-card {
                    width: 80mm !important;
                    height: 56mm !important;
                    border: 0.3mm solid #000 !important;
                    padding: 1mm !important;
                    box-sizing: border-box !important;
                    position: relative !important;
                    background: white !important;
                  }
                  
                  .header {
                    font-size: 3.5mm !important;
                    font-weight: bold !important;
                    text-align: center !important;
                    margin-bottom: 1mm !important;
                    padding-bottom: 0.5mm !important;
                    border-bottom: 0.2mm solid #000 !important;
                  }
                  
                  .content {
                    height: calc(100% - 6mm) !important;
                    position: relative !important;
                  }
                  
                  .row {
                    display: flex !important;
                    margin-bottom: 0.8mm !important;
                    min-height: 6mm !important;
                  }
                  
                  .dual-column {
                    display: flex !important;
                    justify-content: space-between !important;
                  }
                  
                  .column {
                    flex: 1 !important;
                    display: flex !important;
                    align-items: center !important;
                  }
                  
                  .column:first-child {
                    margin-right: 2mm !important;
                  }
                  
                  .label {
                    font-weight: bold !important;
                    flex: 0 0 15mm !important;
                    white-space: nowrap !important;
                    font-size: 2.2mm !important;
                  }
                  
                  .value {
                    flex: 1 !important;
                    overflow: hidden !important;
                    text-overflow: ellipsis !important;
                    white-space: nowrap !important;
                    border-bottom: 0.1mm dashed #666 !important;
                    padding-bottom: 0.2mm !important;
                    min-height: 2.5mm !important;
                    font-size: 2.2mm !important;
                  }
                  
                  .code-value {
                    font-weight: bold !important;
                  }
                  
                  .full-width {
                    white-space: normal !important;
                    word-break: break-all !important;
                    line-height: 1.2 !important;
                  }
                  
                  /* äºŒç»´ç æ ·å¼ */
                  .qr-section {                 
                    width: 10mm !important;
                    height: 12mm !important;
                    font-siz:10px;
                  }
                  
                  .qr-section canvas {
                    width: 10mm !important;
                    height: 10mm !important;
                    max-width: 100% !important;
                    max-height: 100% !important;
                  }
                  width: 80mm !important;
                  height: 60mm !important;
                  margin: 0 !important;
                  padding: 0 !important;
                  background: white !important;
                }
                
                /* å±å¹•é¢„览样式 */
                @media screen {
                  body {
                    background: #f5f5f5;
                    padding: 10px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                  }
                  
                  .print-page {
                    width: 80mm;
                    height: 60mm;
                    margin: 10px 0;
                    padding: 2mm;
                    background: white;
                    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                    border: 1px dashed #ccc;
                  }
                  
                  .material-card {
                    width: 80mm;
                    height: 60mm;
                    border: 0.3mm solid #000;
                    padding: 1.5mm;
                    background: white;
                    position: relative;
                  }
                  
                  .qr-section {
                    position: absolute;
                    top: 4mm;
                    right: 2mm;
                    width: 12mm;
                    height: 12mm;
                    border: 0.2mm solid #ccc;
                    padding: 0.5mm;
                    background: white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }
                  
                  .qr-section canvas {
                    width: 10mm !important;
                    height: 10mm !important;
                  }
                .print-page {
                  width: 80mm !important;
                  height: 60mm !important;
                  page-break-after: always !important;
                  margin: 0 !important;
                  padding: 1mm !important;
                  display: block !important;
                  background: white !important;
                }
              </style>
            </head>
            <body>
              ${printContent}
              <script>
                window.onload = function() {
                  console.log('打印页面加载完成，共${this.printData.length}个物料卡');
                  // ç­‰å¾…二维码渲染完成
                  setTimeout(() => {
                    // å¼ºåˆ¶è®¾ç½®äºŒç»´ç canvas尺寸
                    const canvases = document.querySelectorAll('canvas');
                    canvases.forEach(canvas => {
                      canvas.style.width = '10mm !important';
                      canvas.style.height = '10mm !important';
                    });
                    window.print();
                  }, 800);
                };
                
                window.onafterprint = function() {
                  setTimeout(() => {
                    window.close();
                  }, 500);
                };
              <\/script>
            </body>
            </html>
          `);
                .print-page:last-child {
                  page-break-after: avoid !important;
                }
                
                .material-card {
                  width: 78mm !important;
                  height: 58mm !important;
                  border: 0.5mm solid #000 !important;
                  padding: 1.5mm !important;
                  box-sizing: border-box !important;
                  position: relative !important;
                  background: white !important;
                  font-family: "Microsoft YaHei", "SimHei", Arial, sans-serif !important;
                }
                
                .header-section {
                  display: flex !important;
                  justify-content: space-between !important;
                  align-items: center !important;
                  margin-bottom: 1.5mm !important;
                  padding-bottom: 1mm !important;
                  border-bottom: 0.3mm solid #000 !important;
                }
                
                .header {
                  font-size: 4mm !important;
                  font-weight: bold !important;
                  white-space: nowrap !important;
                }
                
                .content {
                  height: calc(100% - 10mm) !important;
                  position: relative !important;
                }
                
                .row {
                  display: flex !important;
                  margin-bottom: 1.2mm !important;
                  min-height: 6.5mm !important;
                  align-items: stretch !important;
                }
                
                .dual-column {
                  display: flex !important;
                  justify-content: space-between !important;
                }
                
                .column {
                  flex: 1 !important;
                  display: flex !important;
                  align-items: center !important;
                  min-height: 5mm !important;
                }
                
                .column:first-child {
                  margin-right: 2.5mm !important;
                }
                
                .label {
                  flex: 0 0 8mm !important;
                  white-space: nowrap !important;
                  font-size: 2.5mm !important;
                  line-height: 1.3 !important;
                }
                
                .value {
                  flex: 1 !important;
                  overflow: hidden !important;
                  text-overflow: ellipsis !important;
                  white-space: normal !important;
                  word-break: break-all !important;
                  word-wrap: break-word !important;
                  min-height: 4mm !important;
                  font-size: 2.5mm !important;
                  line-height: 1.3 !important;
                  border-bottom: none !important;
                  padding: 0.5mm !important;
                }
                
                .full-width {
                  display: block !important;
                  white-space: normal !important;
                  word-break: break-all !important;
                  word-wrap: break-word !important;
                  line-height: 1.3 !important;
                }
                
                .code-value {
                  font-weight: bold !important;
                }
              }
            </style>
          </head>
          <body>
            ${printContent}
            <script>
              window.onload = function() {
                setTimeout(() => {
                  const canvases = document.querySelectorAll('canvas');
                  canvases.forEach(canvas => {
                    canvas.setAttribute('width', '60');
                    canvas.setAttribute('height', '60');
                    canvas.style.width = '15mm';
                    canvas.style.height = '15mm';
                  });
                  window.print();
                  setTimeout(() => { window.close(); }, 500);
                }, 800);
              };
            <\/script>
          </body>
          </html>
        `)

          printWindow.document.close();

          printWindow.document.close()
        } catch (error) {
          console.error('打印错误:', error);
          this.$message.error('打印失败: ' + error.message);
          console.error('打印错误:', error)
          this.$message.error('打印失败: ' + error.message)
        }
      });
      })
    }
  }
};
}
</script>

<style scoped>
#qrcode {
.qrcode {
  width: 60px;
  height: 60px;
  display: block;
  margin: 0, 15px
}

.qrcode-preview {
  width: 40px;
  height: 40px;
  display: block;
}

.preview-container {
@@ -467,10 +423,9 @@
  height: 240px;
  margin: 0 auto 15px auto;
  padding: 8px;
  border: 1px solid #ccc;
  font-family: SimSun;
  box-sizing: border-box;
  border: 2px solid #000;
  font-family: 'Microsoft YaHei', sans-serif;
  box-sizing: border-box;
  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
@@ -481,21 +436,14 @@
}

.preview-card-header {
  text-align: center;
  font-size: 14px;
  /* font-weight: bold;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #000;
  background: #f5f5f5;
  padding: 4px; */
  height: 60px;
  width: 60px;
  font-weight: bold;
  white-space: nowrap;
}

.preview-wrapper {
  position: relative;
  height: calc(100% - 40px);
  height: calc(100% - 30px);
}

.content-preview {
@@ -504,8 +452,10 @@
}

.row-preview {
  /* margin-bottom: px; */
  min-height: 32px;
  margin-bottom: 6px;
  min-height: 24px;
  display: flex;
  align-items: center;
}

.dual-column {
@@ -517,17 +467,19 @@
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 22px;
}

.column-preview:first-child {
  margin-right: 10px;
  margin-right: 8px;
}

.label-preview {
  font-weight: bold;
  flex: 0 0 60px;
  flex: 0 0 30px;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
}

.value-preview {
@@ -535,9 +487,10 @@
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  border-bottom: 1px dashed #666;
  font-size: 10px;
  padding-bottom: 2px;
  line-height: 1.2;
  font-weight: normal;
}

.code-value {
@@ -546,31 +499,21 @@

.full-width {
  display: block;
  margin-top: 2px;
  white-space: normal;
  word-break: break-all;
  word-break: break-all !important;
  line-height: 1.2;
  font-size: 12px;
  font-size: 11px;
  min-height: auto;
  word-wrap: break-word !important;
}

/* é¢„览区域二维码样式 */
.qr-section-preview {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 150px;
  height: 175px;
.preview-card-header-qrcode {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  background: white;
  padding: 2px;
}

.qr-section-preview canvas {
  width: 56px !important;
  height: 56px !important;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  border-bottom: 2px solid #000;
  padding-bottom: 4px;
}

.footer-actions {
@@ -582,7 +525,7 @@

.print-count {
  font-size: 14px;
  color: #409EFF;
  color: #409eff;
  font-weight: bold;
}
</style>
</style>