|
|
@@ -0,0 +1,530 @@
|
|
|
+<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>
|
Andy