代码提交

heshaofeng

2025-11-30 deece687b14bc4542562a38abe3c2d0c4e6ffe3f

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

@@ -2,38 +2,33 @@
  <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.supplierCode }}</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.purchaseOrderNo }}</span>
                </div>
              </div>

@@ -44,29 +39,29 @@
                </div>
                <div class="column">
                  <span class="label">数量/总数</span>
                  <span class="value">{{ item.quantityTotal }}</span>
                                    <span class="value full-width">{{ item.quantityTotal }}</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.batchNumber }}</span>
                </div>
                <div class="column">
                  <span class="label">批次</span>
                  <span class="value">{{ item.batch }}</span>
                                    <span class="value full-width">{{ item.batch }}</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.factory }}</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,36 +69,36 @@
        </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.supplierCode }}</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.purchaseOrderNo }}</span>
                  </div>
                </div>

@@ -114,29 +109,29 @@
                  </div>
                  <div class="column-preview">
                    <span class="label-preview">数量/总数</span>
                    <span class="value-preview">{{ item.quantityTotal }}</span>
                                        <span class="value-preview full-width">{{ item.quantityTotal }}</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.batchNumber }}</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.batch }}</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.factory }}</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,42 +154,42 @@
</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.batchNumber}`
    },

    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(`
@@ -204,36 +199,48 @@
              <meta charset="UTF-8">
              <title>物料标识卡打印 - å…±${this.printData.length}个</title>
              <style>
                /* é‡ç½®æ‰€æœ‰æ ·å¼ */
                * {
                  margin: 0;
                  padding: 0;
                  box-sizing: border-box;
                }
                
                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 {
                  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 {
                    width: 80mm !important;
                    height: 60mm !important;
                    margin: 0 !important;
                    padding: 0 !important;
                    background: white !important;
                  }
                  
@@ -241,44 +248,52 @@
                    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;
                    display: block !important;
                    background: white !important;
                  }
                  
                  .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: 3.5mm !important;
                    font-size: 4mm !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;
                    white-space: nowrap !important;
                  }
                  
                  .content {
                    height: calc(100% - 6mm) !important;
                    height: calc(100% - 10mm) !important;
                    position: relative !important;
                  }
                  
                  .row {
                    display: flex !important;
                    margin-bottom: 0.8mm !important;
                    min-height: 6mm !important;
                    margin-bottom: 1.2mm !important;
                    min-height: 6.5mm !important;
                    align-items: stretch !important;
                  }
                  
                  .dual-column {
@@ -290,101 +305,44 @@
                    flex: 1 !important;
                    display: flex !important;
                    align-items: center !important;
                    min-height: 5mm !important;
                  }
                  
                  .column:first-child {
                    margin-right: 2mm !important;
                    margin-right: 2.5mm !important;
                  }
                  
                  .label {
                    font-weight: bold !important;
                    flex: 0 0 15mm !important;
                    flex: 0 0 8mm !important;
                    white-space: nowrap !important;
                    font-size: 2.2mm !important;
                    font-size: 2.5mm !important;
                    line-height: 1.3 !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;
                    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;
                  }
                  
                  .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;
                  }
                }
                
                /* å±å¹•é¢„览样式 */
                @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;
                  }
                }
              </style>
@@ -393,47 +351,45 @@
              ${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';
                      canvas.setAttribute('width', '60');
                      canvas.setAttribute('height', '60');
                      canvas.style.width = '15mm';
                      canvas.style.height = '15mm';
                    });
                    window.print();
                    setTimeout(() => { window.close(); }, 500);
                  }, 800);
                };
                
                window.onafterprint = function() {
                  setTimeout(() => {
                    window.close();
                  }, 500);
                };
              <\/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>