打印封箱标签

src/views/ecw/box/shippingAir/nodePage/mergePkg/pkgPage.vue

@@ -121,18 +121,26 @@
             <el-button size="small" type="primary" @click="sealBoxdialogVisible = false">{{ $t('取消') }}</el-button>
           </div>
         </el-dialog>
+        <!-- 打印标签 -->
+        <el-dialog :title="$t('集运封箱标签')" :visible.sync="printdialogVisible" width="300px" :modal-append-to-body="false" append-to-body>
+          <print-tag v-if="printdialogVisible" :tagData="tagData" />
+        </el-dialog>
     </el-row>
   </div>
 </template>
 
 <script>
-import { getPkgPageByPkgId, deleteRelate, deleteBatchRelate, getMergePkgInfoById, updateMergePkg } from '@/api/ecw/boxAir'
+import { getPkgPageByPkgId, deleteRelate, deleteBatchRelate, getMergePkgInfoById, updateMergePkg, getMergeTagById } from '@/api/ecw/boxAir'
 import { formatDate, serviceMsg } from '../../utils'
+import printTag from './printTag.vue'
 export default {
   props: {
     pkgData: Object,
     shipmentObj: Object,
   },
+  components: {
+    printTag
+  },
   data() {
     return {
       pagList: [],
@@ -145,7 +153,9 @@ export default {
       // 勾选行
       selectedRows: [],
       sealBoxdialogVisible: false,
-      sealBoxForm: {}
+      sealBoxForm: {},
+      printdialogVisible: false,
+      tagData: {}
     }
   },
   created() {
@@ -231,7 +241,10 @@ export default {
                 cancelButtonText: this.$t('稍后再试'),
               })
                 .then((_) => {
-                  
+                  getMergeTagById(this.pkgData.id).then(res=>{
+                    this.tagData = res.data
+                    this.printdialogVisible = true
+                  })
                 })
                 .catch((_) => {
                   this.$emit('closeDialog');

src/views/ecw/box/shippingAir/nodePage/mergePkg/printTag.vue

 <template>
+<div>
   <div class="tag">
     <div style="display: flex;height: 200px;">
       <div style="border-right: 1px solid #999; width: 125px">
@@ -47,16 +48,53 @@
         <span style="text-align: center; font-weight: 600; font-size: 3mm">E&C Logistics: www.groupage.com</span>
       </p>
     </div>
+    </div>
+    <div style="text-align:center;">
+            <el-button type="primary" @click="print">{{$t('确定打印')}}</el-button>
+        </div>
   </div>
 </template>
 
 <script>
+import lodop from '@/utils/lodop'
 export default {
   props: {
     tagData: Object
   },
-  created() {
-    console.log(this.tagData, 'tagData')
+  methods: {
+    print(){
+            let items = document.getElementsByClassName('tag')
+            if(!items.length){
+                return this.$message.error(this.$t('没有可打印的内容'))
+            }
+            if(items.length > 1000){
+                this.$alert(this.$t('标签超过1000需要耐心等候标签生成，请稍候'))
+            }
+            lodop().then(LODOP => {
+                LODOP.PRINT_INIT(this.title);
+                LODOP.SET_PRINT_STYLE("FontSize",18);
+                LODOP.SET_PRINT_STYLE("Bold",1);
+                // LODOP.ADD_PRINT_TEXT(50,231,260,39,"打印页面部分内容");
+
+                LODOP.SET_PRINT_PAGESIZE(0, 800, 600, "TAG");
+                for(let i in items){
+                    LODOP.ADD_PRINT_HTM("2mm",0,800,600, items[i].innerHTML);
+                    if(i < items.length){
+                        LODOP.NewPage()
+                    }
+                }
+                LODOP.PREVIEW();
+
+                //  // 预览
+                /* LODOP.PRINTA(); // 选择打印机
+                 // 直接打印 */
+                console.log('打印哦')
+            }).catch(err => {
+                console.error('lodop异常', err)
+                // alert('请检查LODOP打印控件是否安装并启动');
+            })
+
+        }
   }
 }
 </script>