<template> <el-dialog :title="title" visible :before-close="closeDialog" width="1200px"> <div id="laay" v-if="detail"> <!--startprint--> <div id="myproa"> <p style="padding-bottom:10px;font-size:16px;"> {{$t('订单号')}}:{{detail.orderNo}} {{$t('发货人电话')}}:+{{detail.consignorVO.countryCode}} {{detail.consignorVO.phone|maskPhoneNumber}} {{$t('提货地点')}}:{{$l(objective, 'title')}} <img :src="qrcode" style="margin-left: 10px;width:17mm;vertical-align:middle" /> </p> <div id="table1" width="205mm"> <table class="ptab" id="rclist" cellspacing="0" cellpadding="0" style="border:1px dashed #ccc;width:100%;"> <tr> <th style="text-align:center;width: 50px;" v-if="!preview"> <label class="checkbox checkbox-indent"> <input type="checkbox" name="" value="" v-model="checkAll"> </label> </th> <th style="text-align:center;padding:0 0px;width:80px;text-align: center;font-size: 14px;border:1px dashed #ccc;">{{$t('唛头')}}</th> <th style="text-align:center;padding:0 0px;width:80px;text-align: center;font-size: 14px;border:1px dashed #ccc;">{{$t('货物描述')}}</th> <th style="text-align:center;padding:0 0px;width:80px;text-align: center;font-size: 14px;border:1px dashed #ccc;">{{$t('箱数')}}</th> <th style="text-align:center;padding:0 0px;width:150px;text-align: center;font-size: 14px;border:1px dashed #ccc;">{{$t('尺寸')}}</th> <th style="text-align:center;padding:0 0px;width:80px;text-align: center;font-size: 14px;border:1px dashed #ccc;">{{$t('方数')}}</th> <th style="text-align:center;padding:0 0px;width:80px;text-align: center;font-size: 14px;border:1px dashed #ccc;">{{$t('重量')}}</th> <th style="text-align:center;padding:0 0px;width:110px;text-align: center;font-size: 14px;border:1px dashed #ccc;">{{$t('入仓时间')}}</th> <th v-if="!preview" style="text-align:center;padding:0 0px;width:110px;text-align: center;font-size: 14px;border:1px dashed #ccc;">{{$t('入仓修改时间')}}</th> </tr> <template v-for="(item, index) in items"> <tr v-if="!preview || item.checked" :key="index"> <td style="text-align:center;width: 50px;" v-if="!preview"> <label class="checkbox checkbox-indent"> <input type="checkbox" class="alla" name="ids[]" v-model="item.checked"> </label> </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;"> {{detail.marks}} </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;"> <div style="white-space: nowrap">{{item.prodTitleZh}}</div> <div style="white-space: nowrap">{{item.prodTitleEn}}</div> </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;"> {{item.cartonsNum}} </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;"> {{item.boxGauge}} </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;"> {{item.volume}} </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;"> {{item.weight}} </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;"> {{item.inTime|parseTime}} </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;" v-if="!preview"> {{item.updateTime|parseTime}} </td> </tr> </template> <tr style="border-top:2px solid #000"> <td style="text-align:center;width: 50px;" v-if="!preview"> </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;"> </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;"> 合计 </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;"> {{calcTotal('cartonsNum')}} </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;"> </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;"> {{calcTotal('volume')}} </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;"> {{calcTotal('weight')}} </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;"> </td> <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;" v-if="!preview"> </td> </tr> </table> </div> <!--edit by liuyc 20210121 结尾增加文字--> <p> {{$t('1.控货成功标准:入仓3天内收到我司控货短信视为控货成功;否则视为不控货,如未收到请在2个工作日内与我司联系。')}} {{$t('2.如需保价赔付需在入仓3天内告知。')}} </p> </div> <p class="subs" style="text-align:center"> <el-button v-if="!preview" type="primary" @click="toPrint">{{$t('去打印')}}</el-button> <el-button v-if="preview" type="primary" @click="print">{{$t('确定打印')}}</el-button> </p> </div> </el-dialog> </template> <script> import {parseTime} from '@/utils/ruoyi' import lodop from '@/utils/lodop' import {getOrderWarehouseIn, getOrderDetail} from '@/api/ecw/order' import qrcode from 'qrcode' import Decimal from 'decimal.js' export default { filters: { parseTime, maskPhoneNumber(phoneNumber) { const length = phoneNumber.length; if (length <= 5) { return phoneNumber.slice(0, -3) + '*'.repeat(Math.min(3, length)); } // 保留的明文字符数 const plainLength = length - 5; // 尾部保留的明文字符数 const after = Math.floor(plainLength / 2) // 前面保留的明文字符数 const before = plainLength - after; return phoneNumber.slice(0, before) + '*'.repeat(5) + phoneNumber.slice(-after); } }, components: { }, props:{ orderId: [String, Number] }, data(){ return { show: false, detail: null, list: [], qrcode: null, preview: false, checkAll: false } }, computed:{ title(){ let t = this.$t('打印入仓单') if(this.detail){ t += '-' + this.detail.orderNo } return t }, objective(){ return { titleZh: this.detail.logisticsInfoDto.destTitleZh, titleEn: this.detail.logisticsInfoDto.destTitleEn } /* if(this.detail && this.detail.orderObjectiveVO && this.detail.orderObjectiveVO.objective){ return JSON.parse(this.detail.orderObjectiveVO.objective) } return {} */ }, items(){ let arr = [] this.list.forEach(item => { item.orderWarehouseInBackItemDoList.forEach(witem => { arr.push({ marks: this.detail.remarks, prodTitleEn: item.prodTitleEn, prodTitleZh: item.prodTitleZh, cartonsNum: witem.cartonsNum, boxGauge: witem.boxGauge, volume: witem.volume, weight: witem.weight, // inTime: item.inTime, // createTime: witem.createTime, // updateTime:item.updateTime inTime: witem.inTime, createTime: witem.createTime, updateTime: witem.updateTime }) }) }) // 按照入仓时间inTime排序 arr.sort((a, b) => { return new Date(a.inTime).getTime() - new Date(b.inTime).getTime() }) return arr }, calcTotal(){ return field =>{ let total = new Decimal(0) this.items.forEach(item => { if(!this.preview || item.checked){ total = total.plus(item[field] || 0) } }) return total.toNumber() } } }, watch:{ checkAll(val){ this.items.forEach(item => { this.$set(item, 'checked', val) }) } }, created(){ this.show = true this.loadData() }, methods:{ loadData(){ getOrderDetail(this.orderId).then(res => { this.detail = res.data qrcode.toDataURL(this.detail.orderNo, (err, url) => { this.qrcode = url }) }) getOrderWarehouseIn(this.orderId).then(res => { this.list = res.data }) }, closeDialog(){ this.show = false this.$emit('close'); }, toPrint(){ if (this.items.findIndex(e => e.checked) !== -1){ this.preview = true } else { this.$message.warning(this.$t('请选择品名')) } }, print(){ this.$nextTick(() => { lodop().then(LODOP => { LODOP.PRINT_INIT(this.title); LODOP.SET_PREVIEW_WINDOW(1,0,0,'410mm','139mm',""); LODOP.SET_PRINT_PAGESIZE(0,'203.9mm','178mm',""); /* LODOP.SET_PRINT_MODE("FULL_WIDTH_FOR_OVERFLOW",true); LODOP.SET_PRINT_MODE("FULL_HEIGHT_FOR_OVERFLOW",true); */ LODOP.ADD_PRINT_HTM('40mm',0,'204mm','148mm', document.getElementById("myproa").innerHTML); LODOP.SET_PRINT_MODE("AUTO_CLOSE_PREWINDOW", true); /* LODOP.SET_PRINT_PAGESIZE(0, 2100, 1800, "A4"); LODOP.ADD_PRINT_HTM("2%","2%","96%","96%", document.getElementById("myproa").innerHTML); */ LODOP.PREVIEW(); // LODOP.PREVIEW(); // 预览 /* LODOP.PRINTA(); // 选择打印机 // 直接打印 */ }).catch(err => { console.error('lodop异常', err) // alert('请检查LODOP打印控件是否安装并启动'); }) }) } } } </script> <style scoped> .ptab th{border:1px solid #333;text-align: center;font-size: 14px;border:1px dashed #ccc;} .ptab td{border:1px solid #333;padding:0px 5px;font-size: 14px;border:1px dashed #ccc;word-wrap:break-word} .ptab td input[type='text']{width:60%;} .ptab td a{color:#4e9cdd;font-weight:600;} #laay{width:98%;margin:0 auto;margin-top: 30px;} #laay table{width:100%;margin:0 auto;} #laay table tr{min-height:30px;} #laay table tr th{font-size: 16px;text-align: right;vertical-align: top;padding: 15px 0px;width:120px;} #laay table tr th span{color:red;padding:0px 0px 0px 5px;} #laay table tr td{font-size: 16px;text-align: left;padding:10px 10px; position: relative;} #laay table tr td #xlss{position:absolute;width:60%;max-height:100px;border:1px solid #d7d7d7;background:#fff;top:41px;left:10px; overflow:hidden;overflow-x: hidden; overflow-y: auto;display:none;z-index: 99999;padding: 0 10px;} #laay table tr td #xlss p{line-height: 20px;padding:0px 10px;cursor:pointer;font-size: 16px;} #laay table tr td #xlssa{position:absolute;width:60%;max-height:100px;border:1px solid #d7d7d7;background:#fff;top:41px;left:10px; overflow:hidden;overflow-x: hidden; overflow-y: auto;display:none;z-index: 99999;padding: 0 10px;} #laay table tr td #xlssa p{line-height: 20px;padding:0px 10px;cursor:pointer;font-size: 16px;} #laay table tr td #xlssaa{position:absolute;width:60%;max-height:100px;border:1px solid #d7d7d7;background:#fff;top:41px;left:10px; overflow:hidden;overflow-x: hidden; overflow-y: auto;display:none;z-index: 99999;padding: 0 10px;} #laay table tr td #xlssaa p{line-height: 20px;padding:0px 10px;cursor:pointer;font-size: 16px;} #laay table tr td input[type='text']{height: 30px;border:1px solid #ddd;padding: 0 15px;font-size: 16px;width:60%;} #laay table tr td textarea{height:50px;border:1px solid #ddd;padding: 10px 15px;font-size: 16px;width:60%;} #laay table tr td input[type='radio']{height:30px;float:left;cursor: pointer;} #laay table tr td .span{float:left;line-height: 30px;} #laay table tr td .p{border:1px solid #ddd;font-size:16px;width:60%;padding: 0 16px;line-height:30px;cursor: pointer;} #laay table tr td select{height: 30px;border:1px solid #ddd;padding: 0 15px;font-size: 16px;width:67%;} #laay table tr td div p{padding: 5px 0px;line-height: 40px;} #laay table tr td .dels{padding: 1px 8px;color: #fff;background: red;border-radius: 100%;font-size: 18px;font-weight: 600;cursor: pointer;} #laay table tr td .adds{padding: 1px 5px;color: #fff;background: red;border-radius: 100%;font-size: 18px;font-weight: 600;cursor: pointer;} .checkbox{text-align: center;} .checkbox input{text-decoration: none;padding:10px 15px;background:#ccc;border-radius: 5px; cursor: pointer;margin-bottom: 15px;font-size: 16px;margin:0 2px;} </style>