2025-11-13

销售发货装箱的标签打印

src/views/modules/boxManage/CartonLabelPrint.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="carton-label-container">
+    <!-- 左侧文字信息 -->
+    <div class="info-section">
+      <div class="info-item">
+        <span class="info-text">NO.: {{ cartonData.orderNo || '' }}</span>
+      </div>
+      <div class="divider-horizontal"></div>
+      <div class="info-item">
+        <span class="info-text">Carton No.: {{ cartonData.boxNo || '' }}</span>
+      </div>
+    </div>
+    
+    <!-- 中间竖线 -->
+    <div class="divider-vertical"></div>
+    
+    <!-- 右侧二维码 -->
+    <div class="qrcode-section">
+      <img :src="qrCodeDataUrl" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CartonLabelPrint',
+  props: {
+    cartonData: {
+      type: Object,
+      required: true,
+      default: () => ({
+        orderNo: '',
+        boxNo: ''
+      })
+    },
+    qrCodeDataUrl: {
+      type: String,
+      required: true,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.carton-label-container {
+  width: 70mm;
+  height: 30mm;
+  display: flex;
+  box-sizing: border-box;
+  border: 1px solid #333;
+  background: #fff;
+  font-family: "Microsoft YaHei", Arial, sans-serif;
+  position: relative;
+}
+
+/* 左侧信息区域 */
+.info-section {
+  width: 44mm;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.info-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding-left: 3mm;
+  padding-right: 2mm;
+}
+
+.info-text {
+  font-size: 9pt;
+  font-family: "Microsoft YaHei", Arial, sans-serif;
+  color: #000;
+  font-weight: bold;
+  word-break: break-word;
+  line-height: 1.2;
+}
+
+/* 横向分隔线 */
+.divider-horizontal {
+  height: 1px;
+  background: #333;
+}
+
+/* 竖向分隔线 */
+.divider-vertical {
+  width: 1px;
+  background: #333;
+  height: 100%;
+}
+
+/* 右侧二维码区域 */
+.qrcode-section {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.qrcode-section img {
+  width: 20mm;
+  height: 20mm;
+  display: block;
+}
+</style>
+

src/views/modules/boxManage/com_saleBoxManage_boxing.vue

@@ -4,6 +4,7 @@
         <el-form-item >
           <el-button type="primary" @click="searchTable()">查询</el-button>
           <el-button v-if="searchData.orderStatus === '待包装'" type="primary" @click="newBox()">新增箱</el-button>
+          <el-button type="primary" @click="printCartonLabels()" :disabled="selectedBoxes.length <= 0">打印</el-button>
         </el-form-item>
     </el-form>
     <el-table
@@ -11,7 +12,14 @@
       :height=searchData.height
       border
       v-loading="dataListLoading"
+      @selection-change="handleSelectionChange"
       style="width: 100%; ">
+      <el-table-column
+        type="selection"
+        header-align="center"
+        align="center"
+        width="50">
+      </el-table-column>
       <el-table-column
         v-for="(item,index) in columnList" :key="index"
         :sortable="item.columnSortable"
@@ -143,6 +151,10 @@ import {
   searchBoxDetail,
   searchSoReceiveBoxesData, updateBoxStatus
 } from '../../../api/boxManage/boxManage'
+import CartonLabelPrint from './CartonLabelPrint.vue'
+import Vue from 'vue'
+import getLodop from '@/utils/LodopFuncs.js'
+import QRCode from 'qrcode'
 
 export default {
   components: {
@@ -325,6 +337,7 @@ export default {
       scanRollNo:'',
       boxModelFlag: false,
       boxActionType: 'add', // 新增：添加/删除模式
+      selectedBoxes: [], // 选中的外箱列表
     }
   },
   methods: {
@@ -473,6 +486,74 @@ export default {
       })
     },
 
+    // 多选变化
+    handleSelectionChange(val) {
+      this.selectedBoxes = val
+    },
+    // 打印外箱标签
+    async printCartonLabels() {
+      if (this.selectedBoxes.length === 0) {
+        this.$message.warning('请选择要打印的外箱!')
+        return
+      }
+
+      const LODOP = getLodop()
+      if (!LODOP) {
+        this.$message.error('未检测到打印控件，请安装CLodop打印控件!')
+        return
+      }
+
+      try {
+        // 初始化打印
+        LODOP.PRINT_INIT('外箱标签打印')
+        
+        // 设置纸张尺寸：70mm x 30mm
+        LODOP.SET_PRINT_PAGESIZE(0, 700, 300, '')
+
+        // 循环打印每个选中的外箱
+        for (let i = 0; i < this.selectedBoxes.length; i++) {
+          const box = this.selectedBoxes[i]
+
+          if (i > 0) {
+            LODOP.NEWPAGE() // 新页
+          }
+
+          // 绘制外边框
+          LODOP.ADD_PRINT_RECT('2mm', '2mm', '66mm', '26mm', 0, 1)
+
+          // 绘制中间竖线（左右分隔）
+          LODOP.ADD_PRINT_LINE('2mm', '46mm', '28mm', '46mm', 0, 1)
+
+          // 绘制左侧横线（NO.和Carton No.之间的分隔）
+          LODOP.ADD_PRINT_LINE('15mm', '2mm', '15mm', '46mm', 0, 1)
+
+          // 左侧文字信息 - NO. (上下居中)
+          const text1 = LODOP.ADD_PRINT_TEXT('6.5mm', '3mm', '40mm', '6mm', 'NO.: ' + (this.searchData.orderNo || ''))
+          LODOP.SET_PRINT_STYLEA(text1, "FontName", "Microsoft YaHei")
+          LODOP.SET_PRINT_STYLEA(text1, "FontSize", 9)
+          LODOP.SET_PRINT_STYLEA(text1, "Bold", 1)
+
+          // 左侧文字信息 - Carton No. (上下居中，单行显示)
+          const text2 = LODOP.ADD_PRINT_TEXT('19.5mm', '3mm', '40mm', '6mm', 'Carton No.: ' + (box.boxNo || ''))
+          LODOP.SET_PRINT_STYLEA(text2, "FontName", "Microsoft YaHei")
+          LODOP.SET_PRINT_STYLEA(text2, "FontSize", 9)
+          LODOP.SET_PRINT_STYLEA(text2, "Bold", 1)
+
+          // 右侧二维码（使用 LODOP 原生二维码，调整居中位置）
+          // 向右移动1mm，向下移动1mm
+          const qrIndex = LODOP.ADD_PRINT_BARCODE('6mm', '48mm', '20mm', '20mm', 'QRCode', box.boxNo)
+          LODOP.SET_PRINT_STYLEA(qrIndex, "QRCodeVersion", 4)
+          LODOP.SET_PRINT_STYLEA(qrIndex, "QRCodeErrorLevel", "M")
+        }
+
+        // 预览打印
+        LODOP.PREVIEW()
+        
+      } catch (error) {
+        console.error('打印失败:', error)
+        this.$message.error('打印失败: ' + error.message)
+      }
+    },
     handleBoxAction() {
       // const arr = this.scanRollNo.split(';');
       // if (arr.length < 3) {