PrintWarehouseReceipt.vue

<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}}
                    &nbsp;&nbsp;&nbsp;{{$t('发货人电话')}}：{{detail.consignorVO.countryCode}} {{detail.consignorVO.phone}}
                    &nbsp;&nbsp;&nbsp;{{$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>
                    </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'
export default {
    filters: {parseTime},
    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
                    })
                })
            })
            return arr
        }
    },
    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>