jf-frock/src/views/OrderMannage/BusinessOrderlist/printlist.vue

<template>
    <div class="printcontent"> 
          <div class="table-box">
        <button @click="PrintRow">打印</button>
        <div id="show-table" >
            <table cellspacing="0" cellpadding="0">
                <thead>
                <tr>
                    <td colspan="23" style="border: 0;">
                        <div class="table-header">
                            <img class="left-img" :src="$store.state.ip + showTable.logo" alt="">
                            <h1 class="table-title">{{showTable.title}}</h1><img class="right-img1" :src='$store.state.ip + showTable.right_logo1' alt=""><img class="right-img2" :src='$store.state.ip + showTable.right_logo2' alt="">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="23">
                        <p style="text-align: left;padding-left: 20px;"><span class="part_content"
                                style="font-size:16px;margin-right:40px">{{showTable.part_content}}</span><span class="custom">{{showTable.custom}}</span></p>
                    </td>
                </tr>
                <tr class="header">
                    <td rowspan="2">
                        <p>序号</p>
                    </td>
                    <td rowspan="2">
                        <p style="width:80px ;">位置</p>
                    </td>
                    <td rowspan="2">
                        <p style="width:80px ;">材质</p>
                    </td>
                    <td rowspan="2">
                        <p style="width:80px ;">型号</p>
                    </td>
                    <td rowspan="2">
                        <p style="width:80px ;">工艺</p>
                    </td>
                    <td rowspan="2">
                        <p style="width:80px ;">木皮/颜色</p>
                    </td>
                    <td>
                        <p>门洞尺寸（MM）</p>
                    </td>
                    <td>
                        <p>门扇尺寸（MM）</p>
                    </td>
                    <td>
                        <p>门套尺寸（MM）</p>
                    </td>
                    <td rowspan="2">
                        <p>数量</p>
                    </td>
                    <td rowspan="2">
                        <p>单位</p>
                    </td>
                    <td>
                        <p>平方</p>
                    </td>
                    <td rowspan="2">
                        <p>单价</p>
                    </td>
                    <td rowspan="2">
                        <p>附加</p>
                    </td>
                    <td rowspan="2">
                        <p>金额</p>
                    </td>
                    <td rowspan="2">
                        <p>备注</p>
                    </td>
                </tr>
                <tr class="header">

                    <td>
                        <p>高*宽*厚度</p>
                    </td>
                    <td>
                        <p>高*宽*厚度</p>
                    </td>
                    <td>
                        <p>高*宽*厚度</p>
                    </td>

                    <td>
                        <p>米</p>
                    </td>
                </tr>
            </thead>
                <tbody class="content">
                   <tr v-for="(item,index) in showTableContentStr" :key="index">
                                <td>
                                    <p>{{item.sort}}</p>
                                </td>
                                <td>
                                    <p>{{item.postion}}</p>
                                </td>
                                <td>
                                    <p>{{item.process}}</p>
                                </td>
                                <td>
                                    <p>{{item.model}}</p>
                                </td>
                                <td>
                                    <p>{{item.workmanship}}</p>
                                </td>
                                <td>
                                    <p>{{item.color}}</p>
                                </td>
                                <td>
                                    <p>{{item.measure1}}</p>
                                </td>
                                <td>
                                    <p>{{item.measure2}}</p>
                                </td>
                                <td>
                                    <p>{{item.measure3}}</p>
                                </td>
                                <td>
                                    <p>{{item.num}}</p>
                                </td>
                                <td>
                                    <p>{{item.unit}}</p>
                                </td>
                                <td>
                                    <p>{{item.square}}</p>
                                </td>
                                <td>
                                    <p>{{item.unit_price}}</p>
                                </td>
                                <td>
                                    <p>{{item.ext}}</p>
                                </td>
                                <td>
                                    <p>{{item.price}}</p>
                                </td>
                                <td>
                                    <p>{{item.remark}}</p>
                                </td>
                     </tr>
                    </tbody>
                   <tfoot>
                <tr>
                    <td class="amount-index" align="center">{{showTable.list.length + 1}}</td>
                    <td colspan="11"></td>
                    <td colspan="2">合计：</td>
                    <td class="xt_total">{{showTable.foot.xt_total}}</td>
                    <td></td>
                </tr>

                <tr>
                    <td colspan="12" class="remark" style="padding-left: 20px;">{{showTable.foot.remark}}</td>
                    <td colspan="2">返点：</td>
                    <td class="return">{{showTable.foot.return}}</td>
                    <td></td>
                </tr>

                <tr>
                    <td colspan="12" class="remark1" style="padding-left: 20px;">{{showTable.foot.remark1}}</td>
                    <td colspan="2">尾款：</td>
                    <td class="end_price">{{showTable.foot.end_price}}</td>
                    <td></td>
                </tr>

                <tr>
                    <td colspan="16" style="padding-left: 20px;">
                        <p class="amount_detail" style="height: 24px;">{{showTable.foot.amount_detail}}</p>
                    </td>
                </tr>

                <tr>
                    <td colspan="16" class="order_info" style="padding-left: 20px;">客户备注：<span
                            class="customer_remark">{{showTable.foot.customer_remark}}</span>订货日期：<span class="crt_time">{{showTable.foot.crt_time}}</span>交货日期：<span
                            class="end_time">{{showTable.foot.end_time}}</span>业务经理：<span class="saleman">{{showTable.foot.saleman}}</span>制单人：<span
                            class="crt_id">{{showTable.foot.crt_id}}</span>审核：<span class="oa">{{showTable.foot.oa}}</span>客户确认：<span class="is_confirm">{{showTable.foot.is_confirm}}</span></td>
                </tr>
            </tfoot>
              </table>
        </div>
        <div class="print-table" ref="print">
           <table cellspacing="0" cellpadding="0" v-for="(item,index) in newArr" :key="index" class="print-cell">
                <thead>
                <tr>
                    <td colspan="23" style="border: 0;">
                        <div class="table-header">
                            <img class="left-img" :src='showTable.logo' alt="">
                            <h1 class="table-title">{{showTable.title}}</h1><img class="right-img1" :src='showTable.right_logo1' alt=""><img class="right-img2" :src='showTable.right_logo2' alt="">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="23">
                        <p style="text-align: left;padding-left: 20px;"><span class="part_content"
                                style="font-size:16px;margin-right:40px">{{showTable.part_content}}</span><span class="custom">{{showTable.custom}}</span></p>
                    </td>
                </tr>
                <tr class="header">
                    <td rowspan="2">
                        <p>序号</p>
                    </td>
                    <td rowspan="2">
                        <p style="width:80px ;">位置</p>
                    </td>
                    <td rowspan="2">
                        <p style="width:80px ;">材质</p>
                    </td>
                    <td rowspan="2">
                        <p style="width:80px ;">型号</p>
                    </td>
                    <td rowspan="2">
                        <p style="width:80px ;">工艺</p>
                    </td>
                    <td rowspan="2">
                        <p style="width:80px ;">木皮/颜色</p>
                    </td>
                    <td>
                        <p>门洞尺寸（MM）</p>
                    </td>
                    <td>
                        <p>门扇尺寸（MM）</p>
                    </td>
                    <td>
                        <p>门套尺寸 （MM）</p>
                    </td>
                    <td rowspan="2">
                        <p>数量</p>
                    </td>
                    <td rowspan="2">
                        <p>单位</p>
                    </td>
                    <td>
                        <p>平方</p>
                    </td>
                    <td rowspan="2">
                        <p>单价</p>
                    </td>
                    <td rowspan="2">
                        <p>附加</p>
                    </td>
                    <td rowspan="2">
                        <p>金额</p>
                    </td>
                    <td rowspan="2">
                        <p>备注</p>
                    </td>
                </tr>
                <tr class="header">

                    <td>
                        <p>高*宽*厚度</p>
                    </td>
                    <td>
                        <p>高*宽*厚度</p>
                    </td>
                    <td>
                        <p>高*宽*厚度</p>
                    </td>

                    <td>
                        <p>米</p>
                    </td>
                </tr>
            </thead>
                <tbody class="content" >
                   <tr v-for="(_item,_index) in item" :key="_index">
                                <td>
                                    <p>{{_item.sort}}</p>
                                </td>
                                <td>
                                    <p>{{_item.postion}}</p>
                                </td>
                                <td>
                                    <p>{{_item.process}}</p>
                                </td>
                                <td>
                                    <p>{{_item.model}}</p>
                                </td>
                                <td>
                                    <p>{{_item.workmanship}}</p>
                                </td>
                                <td>
                                    <p>{{_item.color}}</p>
                                </td>
                                <td>
                                    <p>{{_item.measure1}}</p>
                                </td>
                                <td>
                                    <p>{{_item.measure2}}</p>
                                </td>
                                <td>
                                    <p>{{_item.measure3}}</p>
                                </td>
                                <td>
                                    <p>{{_item.num}}</p>
                                </td>
                                <td>
                                    <p>{{_item.unit}}</p>
                                </td>
                                <td>
                                    <p>{{_item.square}}</p>
                                </td>
                                <td>
                                    <p>{{_item.unit_price}}</p>
                                </td>
                                <td>
                                    <p>{{_item.ext}}</p>
                                </td>
                                <td>
                                    <p>{{_item.price}}</p>
                                </td>
                                <td>
                                    <p>{{_item.remark}}</p>
                                </td>
                     </tr>
                    </tbody>
                   <tfoot>
                <tr>
                    <td class="amount-index" align="center">{{showTable.list.length + 1}}</td>
                    <td colspan="11"></td>
                    <td colspan="2">合计：</td>
                    <td class="xt_total">{{showTable.foot.xt_total}}</td>
                    <td></td>
                </tr>

                <tr>
                    <td colspan="12" class="remark" style="padding-left: 20px;">{{showTable.foot.remark}}</td>
                    <td colspan="2">返点：</td>
                    <td class="return">{{showTable.foot.return}}</td>
                    <td></td>
                </tr>

                <tr>
                    <td colspan="12" class="remark1" style="padding-left: 20px;">{{showTable.foot.remark1}}</td>
                    <td colspan="2">尾款：</td>
                    <td class="end_price">{{showTable.foot.end_price}}</td>
                    <td></td>
                </tr>

                <tr>
                    <td colspan="16" style="padding-left: 20px;">
                        <p class="amount_detail" style="height: 24px;">{{showTable.foot.amount_detail}}</p>
                    </td>
                </tr>

                <tr>
                    <td colspan="16" class="order_info" style="padding-left: 20px;">客户备注：<span
                            class="customer_remark">{{showTable.foot.customer_remark}}</span>订货日期：<span class="crt_time">{{showTable.foot.crt_time}}</span>交货日期：<span
                            class="end_time">{{showTable.foot.end_time}}</span>业务经理：<span class="saleman">{{showTable.foot.saleman}}</span>制单人：<span
                            class="crt_id">{{showTable.foot.crt_id}}</span>审核：<span class="oa">{{showTable.foot.oa}}</span>客户确认：<span class="is_confirm">{{showTable.foot.is_confirm}}</span></td>
                </tr>
            </tfoot>
              </table>
        </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"printlist",
    data(){
        return {
            showTableContentStr:[],
            showTable:{
                list:[],
                foot:{}
            },
            newArr:''
        }
    },
    computed:{
    },
    mounted(){
        this.axios({
            method:'get',
            url:'/api/printe_order_detail',
            params:{
                order_no:this.$route.query.order_no
            }
        }).then(res=>{
            this.showTableContentStr = res.msg.list
            this.showTable = res.msg
            this.newArr = this.chunk(this.showTableContentStr,15)
        });
    },
    methods:{
                //打印
        PrintRow(index, row){
            this.$print(this.$refs.print) // 使用
        },
        printTable() {
            // let printData = document.getElementsByClassName('printcontent')[0].innerHTML;
            // let all = document.body.innerHTML;
            // document.body.innerHTML = printData
            window.print();
            // document.body.innerHTML = all;
        },
        chunk(array, size) {
            //获取数组的长度，如果你传入的不是数组，那么获取到的就是undefined
            const length = array.length
            //判断不是数组，或者size没有设置，size小于1，就返回空数组
            if (!length || !size || size < 1) {
              return []
            }
            //核心部分
            let index = 0 //用来表示切割元素的范围start
            let resIndex = 0 //用来递增表示输出数组的下标
          
            //根据length和size算出输出数组的长度，并且创建它。
            let result = new Array(Math.ceil(length / size))
            //进行循环
            while (index < length) {
              //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
              result[resIndex++] = array.slice(index, (index += size))
            }
            //输出新数组
            return result
          }
    }
}
</script>
<style scoped>
* {
        margin: 0;
        padding: 0;
        font-size: 14px;
    }
.printcontent{
    overflow-y: auto;
    overflow-x: auto;
}
  button {
        position: absolute;
        right: 40px;
        width: 60px;
    }

    h1 {
        text-align: center;
        font-size: 18px;
        margin-bottom: 10px;
        margin-top: 20px;
    }

    p {
        text-align: center;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    td {
        border: 1px solid #000;

    }

    .right-img1 {
        position: absolute;
        right: 0;
        width: 150px;
        margin-bottom: 10px;
        height: 60px;
        top: 0;
    }

    .right-img2 {
        position: absolute;
        width: 150px;
        right: 180px;
        margin-bottom: 10px;
        height: 60px;
        top: 0;
    }

    .table-header {
        position: relative;
        height: 76px;
        line-height: 76px;
    }

    .left-img {
        position: absolute;
        left: 0;
        width: 150px;
        height: 60px;
        top: 0;
    }

    .table-box {
        padding: 0 20px;
        width: 1000px;
        margin: 0 auto;
        margin-top: 40px;
    }

    .order_info span {
        margin-right: 28px;
    }

    .pageSeparator {
        visibility: hidden;
        page-break-after: always;
        overflow: hidden;
        height: 0px;
    }
    .print-table{
        display: none;
    }
    @media print {
        button {
            display: none;
        }
        .print-table{
            display: block;
            width: 100%;
        }
        .print-cell{
            color: black;
            margin:16mm 8mm;
            width: 262mm;
            height: auto;
        }
        #show-table{
           display: none;
           
        }
        @page {
        }
    }
</style>