mushen
/
BST_bigScreen


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <script src="./jquery.min.js"></script>
</head>

<body>
    <div class="table-box">
        <button onclick="printTable()">打印</button>
        <div class="show-table"></div>
        <div class="print-table"></div>


        <!-- <table cellspacing="0" cellpadding="0"> -->
            <!-- <thead>
                <tr>
                    <td colspan="23" style="border: 0;">
                        <div class="table-header">
                            <h1 class="table-title">升升概念订货订单</h1>
                        </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">木门哑口套</span><span class="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">
            </tbody> -->

            <!-- <tfoot>
                <tr>
                    <td class="amount-index" align="center"></td>
                    <td colspan="11"></td>
                    <td colspan="2">合计：</td>
                    <td class="xt_total"></td>
                    <td></td>
                </tr>

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

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

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

                <tr>
                    <td colspan="16" class="order_info" style="padding-left: 20px;">客户备注：<span
                            class="customer_remark"></span>订货日期：<span class="crt_time"></span>交货日期：<span
                            class="end_time"></span>业务经理：<span class="saleman"></span>制单人：<span
                            class="crt_id"></span>审核：<span class="oa"></span>客户确认：<span class="is_confirm"></span></td>
                </tr>
            </tfoot> -->
        <!-- </table> -->

    </div>
    <script>
        function printTable() {
            window.print();

        }
        $(() => {
            $.ajax({
                url: 'https://asdkjasdklj.isongmei.com/Wap/hy1/tt1111',
                type: 'get',
                success: res => {
                    let data = JSON.parse(res);
                    // table-box
                    console.log(data)

                    let newArr=chunk(data.list,15);
                    console.log(newArr)
                    let theadStr = `<thead>
                <tr>
                    <td colspan="23" style="border: 0;">
                        <div class="table-header">
                            <img class="left-img" src=${data.logo} alt="">
                            <h1 class="table-title">${data.title}</h1><img class="right-img1" src=${data.right_logo1} alt=""><img class="right-img2" src=${data.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">${data.part_content}</span><span class="custom">${data.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>`
                   

                    let tfootStr=`<tfoot>
                <tr>
                    <td class="amount-index" align="center">${data.list.length + 1}</td>
                    <td colspan="11"></td>
                    <td colspan="2">合计：</td>
                    <td class="xt_total">${data.foot.xt_total}</td>
                    <td></td>
                </tr>

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

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

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

                <tr>
                    <td colspan="16" class="order_info" style="padding-left: 20px;">客户备注：<span
                            class="customer_remark">${data.foot.customer_remark}</span>订货日期：<span class="crt_time">${data.foot.crt_time}</span>交货日期：<span
                            class="end_time">${data.foot.end_time}</span>业务经理：<span class="saleman">${data.foot.saleman}</span>制单人：<span
                            class="crt_id">${data.foot.crt_id}</span>审核：<span class="oa">${data.foot.oa}</span>客户确认：<span class="is_confirm">${data.foot.is_confirm}</span></td>
                </tr>
            </tfoot>`
                    
                    let showTableContentStr=''
                    data.list.map(item => {
                        showTableContentStr += `<tr>
                                <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>`
                    })
                    $(".show-table").append(`<table cellspacing="0" cellpadding="0">${theadStr}<tbody class="content">${showTableContentStr}
                        </tbody>${tfootStr}</table>`)
                    
                    
                    let tableStr='';
                    newArr.map(arr=>{
                        let str ='';
                        arr.map(item => {
                            str += `<tr>
                                <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>`
                        })
                        tableStr+=`<table cellspacing="0" cellpadding="0">${theadStr}<tbody class="content">${str}
                        </tbody>${tfootStr}</table><div style="page-break-after: always;"></div>`
                    })
                    $(".print-table").append(tableStr)
                    
                }
            })
        })

        function 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>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
        font-size: 14px;
    }

    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: 80px;
        line-height: 80px;
    }

    .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;
        }
        .show-table{
            display: none;
        }
        @page {
            margin: 60px 0 0 0;
        }
    }
</style>

</html>