1

src/components/leaderPay2.vue

+<style>
+    .leaderPayTable{
+        width:100%;
+        margin:10px auto;
+        text-align: center;
+        font-size: 12px;
+        color: #333;
+        border-collapse: collapse;
+        background-color: #fff;
+        border: 1px solid #d1d1d1;
+    }
+    .leaderPayTable th{
+        background: #E6E6E6;    
+        padding:8px 0;
+        color: #333;
+        border: 1px solid #d1d1d1;
+        font-weight:bold;
+
+    }
+    .leaderPayTable tr td{
+        background-color:#fff;
+        padding:8px 0;
+        height: 32px;
+        border: 1px solid #d1d1d1;
+    }
+    .LeaderPrintDiv .LeaderTitle{
+        padding:10px;
+        text-align: left;
+    }
+    .leaderPayTable .itemName {
+        text-align: left;
+        padding: 0 10px;
+    }
+    .LeaderPrintDiv .printBtn{
+        color: #fff;
+        padding: 0 15px;
+        height: 30px;
+        background: #E95252;
+        border: 1px solid #E95252;
+        cursor: pointer;
+        border-radius: 15px;
+        position: fixed;
+        right:50px;
+        top:30px;
+    }
+    @media print{
+        .LeaderPrintDiv .printBtn{display:none}
+    }
+    .comTotal{
+        text-align:left;
+        padding-left:30px!important;
+    }
+    .LeaderPrintDiv{
+        width:100%;
+        position: absolute;
+    }
+    .LeaderPrintDiv .childDiv{
+        width:1000px;
+        margin:0 auto;
+    }
+</style>
+
+<template>
+    <div class="LeaderPrintDiv">
+        <div class="childDiv">
+            <table border="0" cellspacing='1' class="leaderPayTable">
+                <tr>
+                    <th width="8%">出发地</th>
+                    <th width="30%">行程名称</th>
+                    <th width="15%">团号</th>
+                    <th width="15%">出发时间</th>
+                    <th width="8%">天数</th>
+                    <th width="8%">出团人数</th>
+                    <th width="8%">领队</th>
+                    <th width="8%">导游</th>
+                </tr>
+                <tr v-for="item in nav">
+                    <td>{{item.StartCityNames}}</td>
+                    <td>
+                        <div class="LeaderTitle">{{item.Titles}}</div>
+                    </td>
+                    <td>{{item.TCNUMS}}</td>
+                    <td>{{item.FlightDate}}</td>
+                    <td>{{item.DayNum}}天</td>
+                    <td>{{item.TotalSeat}}人</td>
+                    <td>{{item.LeaderName}}</td>
+                    <td>{{item.GuideName}}</td>
+                </tr>
+            </table>
+            <table border="0" cellspacing='1' class="leaderPayTable">
+                <tbody>
+                    <tr>
+                        <th>项目类型</th>
+                        <th>项目内容</th>
+                        <th>实付金额</th>
+                        <th>备注</th>
+                    </tr>
+                    <template v-for='(item,index) in dataList.ScenicList'>
+                        <tr>
+                            <td v-if="index==0" :rowspan="dataList.ScenicList.length">景点门票</td>
+                            <td>
+                                <div class="itemName" v-for="subItem in item.ScenicStatisticsList">
+                                    {{subItem.ScenicName}}
+                                </div>
+                            </td>
+                            <td>
+                                <div v-for="subItem in item.ScenicStatisticsList">
+                                    {{getTotal(subItem.ReimburseList.ReimburseDetailsList)}}
+                                </div>
+                            </td>
+                            <td>
+                                <template v-for='(sitem,sindex) in item.ScenicStatisticsList'>
+                                    {{sitem.Remarks}}
+                                </template>
+                            </td>
+                        </tr>
+                    </template>
+                    <tr>
+                        <td class="comTotal" colspan="4">合计：</td>
+                    </tr>
+                    <tr v-for="(item,index) in dataList.BusList">
+                        <td v-if="index==0" :rowspan="dataList.BusList.length">交通</td>
+                        <td>
+                            <span v-if='index==0'>接机</span>
+                            <span v-if='index!=0&&index!=dataList.BusList.length-1'>{{item.AirportPickUpStr}}</span>
+                            <span v-if='index==dataList.BusList.length-1'>送机</span>
+                        </td>
+                        <td>
+                            {{item.TotalPrice}}
+                        </td>
+                        <td>
+                            {{item.Remarks}}
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="comTotal" colspan="4">合计：{{totalTrafficPrice}}</td>
+                    </tr>
+                    <template v-for='(item,index) in dataList.DiningList'>
+                        <tr class="splitP ScenicTr" v-for='(titem,tindex) in item.DiningSummaryList'>
+                            <td v-if="index==0" :rowspan="dataList.DiningList.length">餐饮</td>
+                            <td>
+                                <div class="itemName" v-for="subItem in item.DiningSummaryList">
+                                    {{subItem.DiningName}}
+                                </div>
+                            </td>
+                            <td>
+                                <div v-for="subItem in item.DiningSummaryList">
+                                    {{getTotal(subItem.ReimburseList.ReimburseDetailsList)}}
+                                </div>
+                            </td>
+                            <td>
+                                <template v-for='(sitem,sindex) in item.ScenicStatisticsList'>
+                                    {{sitem.Remarks}}
+                                </template>
+                            </td>
+                        </tr>
+                    </template>
+                    <tr>
+                        <td class="comTotal" colspan="4">合计：</td>
+                    </tr>
+                    <template v-for='(item,index) in dataList.HotelList'>
+                        <tr>
+                            <td v-if="index==0" :rowspan="dataList.HotelList.length">酒店</td>
+                            <td width="30%">
+                                <div class="itemName" >{{item.NewHotelName}}</div>
+                            </td>
+                            <td>{{item.TotalPrice}}</td>
+                            <td>{{item.Remarks}}</td>
+                        </tr>
+                    </template>
+                    <tr>
+                        <td class="comTotal" colspan="4">合计：{{totalHotelPrice}}</td>
+                    </tr>
+                </tbody>
+            </table>
+            <input type="button" class="printBtn" value="打印" @click="printTable()">
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            isUpdate: false,
+            loading:false,
+            msg: {
+                TCIDs: '',
+                NewCombinationNum: ''
+            },
+            nav:[],
+            dataList:[],
+            //合计酒店
+            totalHotelPrice:0,
+            //合计交通
+            totalTrafficPrice:0,
+        }
+ 	},
+    methods: {
+        //获取数据
+        getList(){
+            this.loading = true
+            this.apipost('dmcstatistics_post_GetNewLeaderPayStatics', this.msg, res => {
+                    this.loading = false
+                if (res.data.resultCode == 1) {
+                    console.log(res,'ressssssss');
+                    this.dataList = res.data.data;
+                    this.dataList.HotelList.forEach(x=>{
+                        this.totalHotelPrice+=x.TotalPrice
+                    })
+                    this.dataList.BusList.forEach(x=>{
+                        this.totalTrafficPrice+=x.TotalPrice
+                    })
+
+                } else {
+                    this.Error(res.data.message)
+                }
+            }, err => {})
+        },
+        //获取顶部数据
+        getNav() {
+            this.apipost('dmcstatistics_post_GetHotelStaticsByTCIDs', {
+                TCIDs: this.$route.query.id
+                }, res => {
+                if (res.data.resultCode == 1) {
+                    this.nav = res.data.data;
+                } else {
+                    this.Error(res.data.message)
+                }
+            }, err => {})
+        },
+        //获取总额
+        getTotal(obj) {
+            let totalPrice = 0
+            obj.forEach(x => {
+                totalPrice += x.UserNum * x.UnitPrice
+            })
+            return totalPrice
+        },
+        //打印
+        printTable(){
+            window.print(); 
+        }
+    },
+    created() {
+    	
+    },
+    mounted() {
+      this.isUpdate = this.$route.query.isUpdate;
+      this.msg.TCIDs = this.$route.query.id;
+      this.getNav();
+      this.getList();
+    },    
+}
+</script>