<template>
<div>
<div style="width: 100%; overflow-x: auto;padding-bottom: 10px; " class="ownScrollbarStyle">
<table border="0" cellspacing="1" cellpadding="0" class="roomReservationsDetailsTalbe" v-loading='loading'>
<tr>
<th width="50">序号</th>
<th width="80">公司团号</th>
<th width="80">出发地</th>
<th width="80">领队</th>
<th width="80">导游</th>
<th width="120">机位总数/(Y/E/F)</th>
<th width="120">占床/不占床</th>
<th width="80">实际用房数 </th>
<th width="150">房间类型</th>
<th width="80">房间数</th>
<th width="80">房间人数</th>
<th width="150">房间预定数</th>
<th width="120">尚差房间数</th>
<th width="80">单价/每人</th>
<th width="80">免减人数</th>
<th width="80">金额小计</th>
<th width="80">返佣</th>
<th width="80">金额总计</th>
<th width="80">付款方式</th>
<th width="80">联系电话</th>
<th width="80">地址</th>
<th width="80">订团号</th>
<th width="80">备注</th>
<th width="80">操作</th>
</tr>
<tr v-for="(item,index) in dataList">
<td><div class="w80">{{index+1}}</div></td>
<td><div class="w120">{{item.CommonReport.HotelList[0].TCNUM}}</div></td>
<td><div class="w120">{{item.StartCityNames}}</div></td>
<td><div class="w120">{{item.LeaderName}}</div></td>
<td><div class="w120">{{item.GuideName}}</div></td>
<td><div class="w120">{{item.TotalSeat}}/{{item.CommonReport.HouseStatistics.RealityYSeatNum}}/
{{item.CommonReport.HouseStatistics.RealityESeatNum}}/{{item.CommonReport.HouseStatistics.RealityFSeatNum}}</div></td>
<td><div class="w80">{{item.CommonReport.HouseStatistics.NeedBed}}/{{item.CommonReport.HouseStatistics.NoNeedBed}}</div></td>
<td><div class="w80">{{item.CommonReport.HouseStatistics.RealityRoomNum}}</div></td>
<td>
<div class="w150">
<p class="pHouseStyle" v-for="o in item.CommonReport.HouseStatistics.HouseTypeList">
{{o.HouseTypeName}}
</p>
</div>
</td>
<td>
<div class="w80">
<p class="pHouseStyle" v-for="o in item.CommonReport.HouseStatistics.HouseTypeList">
{{o.HouseTypeCount}}
</p>
</div>
</td>
<td>
<div class="w80">
<p class="pHouseStyle" v-for="o in item.CommonReport.HouseStatistics.HouseTypeList">
{{o.HouseGuestNum}}
</p>
</div>
</td>
<td>
<!-- <div class="w80">
<p class="pHouseStyle" v-if="item.CommonReport.HotelList[0].OrderDetailsList.length>0" v-for="(o,index) in item.CommonReport.HotelList[0].OrderDetailsList">
<el-input class='w50 tcenter' @keyup.native="checkInteger(o,'HouseTypeCount')" v-model='o.HouseTypeCount<=0?item.CommonReport.HouseStatistics.HouseTypeList[index].HouseTypeCount:o.HouseTypeCount.toString()'></el-input>
</p>
</div> -->
<div class="w80">
<p class="pHouseStyle" v-if="item.CommonReport.HotelList[0].OrderDetailsList.length>0" v-for="(o,index) in item.CommonReport.HotelList[0].OrderDetailsList">
<el-input class='w50 tcenter' @keyup.native="checkInteger(o,'HouseTypeCount')" v-model='o.HouseTypeCount'></el-input>
</p>
</div>
</td>
<td>
<div class="w80">
<p class="pHouseStyle" v-if="item.CommonReport.HotelList[0].OrderDetailsList.length>0" :class="{colorRed:o.HouseTypeCount-item.CommonReport.HouseStatistics.HouseTypeList[index].HouseTypeCount<0}" v-for="(o,index) in item.CommonReport.HotelList[0].OrderDetailsList">
{{o.HouseTypeCount-item.CommonReport.HouseStatistics.HouseTypeList[index].HouseTypeCount}}
</p>
</div>
</td>
<td>
<div class="w120">
<p class="pHouseStyle" v-if="item.CommonReport.HotelList[0].OrderDetailsList.length>0" v-for="(o,index) in item.CommonReport.HotelList[0].OrderDetailsList" @input="calculationPrice(item)">
<el-input @keyup.native="checkInteger(o,'UnitPrice')" class='w80 tcenter' v-model='o.UnitPrice'></el-input>
</p>
</div>
</td>
<td>
<div class="w80">
<p class="pHouseStyle" v-if="item.CommonReport.HotelList[0].OrderDetailsList.length>0" v-for="(o,index) in item.CommonReport.HotelList[0].OrderDetailsList" @input="calculationPrice(item)">
<el-input class='w50' @keyup.native="checkInteger(o,'HotelDiscount')" v-model='o.HotelDiscount'></el-input>
</p>
</div>
</td>
<td>
<div class="w80">
<p class="pHouseStyle" v-if="item.CommonReport.HotelList[0].OrderDetailsList.length>0" v-for="(o,index) in item.CommonReport.HotelList[0].OrderDetailsList">
{{o.UnitPrice*(o.HouseGuestNum-o.HotelDiscount)}}
</p>
</div>
</td>
<td>
<div class="w80">
<p class="pHouseStyle link" v-if="item.CommonReport.HotelList[0].OrderDetailsList.length>0" v-for="(o,index) in item.CommonReport.HotelList[0].OrderDetailsList" @input="calculationPrice(item)">
<span class="spanlink" v-if='o.IsRebateRatio==0' @click="goUrl('HotelInfo',o,'酒店管理')">设置</span>
<span v-if='o.IsRebateRatio!=0'>{{o.RebateRatio}}</span>
</p>
</div>
</td>
<td>
<div class="w120">
{{item.TotalPrice}}
</div>
</td>
<td>
<div class="w120">
<el-select class='w100 sel' v-model='item.CommonReport.HotelList[0].PayStyle' :placeholder="$t('pub.pleaseSel')">
<el-option label='请选择' :value='0' ></el-option>
<el-option label='现付' :value='1' ></el-option>
<el-option label='签单' :value='2' ></el-option>
<el-option label='实物抵扣' :value='5' ></el-option>
<el-option label='预付' :value='4' ></el-option>
</el-select>
</div>
</td>
<td>
<div class="w120">{{item.CommonReport.HotelList[0].Tel}}</div>
</td>
<td>
<div class="w200 padding10">{{item.CommonReport.HotelList[0].Address}}</div>
</td>
<td>
<div class="w150">
<el-input class='w120' v-model='item.CommonReport.HotelList[0].ReserveNo'></el-input>
</div>
</td>
<td>
<div class="w150">
<el-input type='textarea' class='w120' v-model='item.CommonReport.HotelList[0].Remarks'></el-input>
</div>
</td>
<td>
<input type="button" class="roomBtn" value="保存" @click="SaveSingle(item)"/>
</td>
</tr>
<tbody v-if="dataList.length===0">
<tr>
<td :colspan="24">暂无数据</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
msg:{
HotelId:0,
StartDate:'',
},
loading: false,
dataList:[],
}
},
methods: {
getList(){
this.loading = true;
this.apipost("dmcstatistics_post_GetHotelByIDAndUseTime", this.msg, res => {
console.log(res);
this.loading = false;
if (res.data.resultCode == 1) {
this.dataList = res.data.data;
let totalPrice=0
this.dataList.forEach(x=>{
x.CommonReport.HotelList[0].OrderDetailsList.forEach((y,index1)=>{
x.CommonReport.HouseStatistics.HouseTypeList.forEach(z=>{
if(y.HouseTypeCount<=0){
x.CommonReport.HotelList[0].OrderDetailsList[index1].HouseTypeCount = x.CommonReport.HouseStatistics.HouseTypeList[index1].HouseTypeCount.toString();
}else{
y.HouseTypeCount = y.HouseTypeCount.toString();
}
})
y.HouseTypeCount = y.HouseTypeCount.toString();
y.HotelDiscount = y.HotelDiscount.toString();
})
x.CommonReport.HotelList[0].OrderDetailsList.forEach(y=>{
totalPrice+=y.UnitPrice*(y.HouseGuestNum-y.HotelDiscount)*(1-y.RebateRatio/100)
})
x.TotalPrice=totalPrice.toFixed(2)
});
}else{
this.Error(res.data.message);
}
},err => {})
},
goUrl(path, obj, name) {
this.$router.push({
path: path,
query: {
id: obj.HotelId,
blank: "y",
tab: name
}
});
},
//单条保存
SaveSingle(item){
item.CommonReport.HotelList[0].HotelOrderState=1;
item.CommonReport.HotelList[0].OrderDetailsList.forEach(y=>{
y.HouseTypeCount = parseInt(y.HouseTypeCount);
y.HotelDiscount = parseInt(y.HotelDiscount);
})
this.apipost('dmcstatistics_post_SetNewHotelOrder',item.CommonReport.HotelList[0],res=>{
if(res.data.resultCode==1){
this.Success(res.data.message);
this.getList();
}else{
this.Error(res.data.message)
}
},err=>{})
},
//计算总价
calculationPrice(obj){
let totalPrice=0
obj.CommonReport.HotelList[0].OrderDetailsList.forEach(item=>{
totalPrice+=item.UnitPrice*(item.HouseGuestNum-item.HotelDiscount)*(1-item.RebateRatio/100)
})
obj.TotalPrice=totalPrice.toFixed(2)
this.$forceUpdate()
},
},
mounted: function () {
this.msg.HotelId = this.$route.query.HotelId;
this.msg.StartDate = this.$route.query.StartDate;
this.getList();
},
created: function () {
}
}
</script>
<style>
.roomReservationsDetailsTalbe .roomBtn{
color: #fff;
padding: 0 10px!important;
height: 30px!important;
background: #E95252;
border: 1px solid #E95252;
cursor: pointer;
border-radius: 15px;
margin:0 10px;
}
.roomReservationsDetailsTalbe{ background: #ddd;}
.roomReservationsDetailsTalbe tr th{background: #eee;height:40px; font-size: 12px; color: #333;}
.roomReservationsDetailsTalbe tr{background: #fff;text-align: center; height: 40px;}
.roomReservationsDetailsTalbe tr td{font-size: 12px;}
.roomReservationsDetailsTalbe tr td .pHouseStyle{border-bottom: 1px solid #ccc; height:28px; line-height: 28px;}
.roomReservationsDetailsTalbe tr td .colorRed{color: #E95252;}
.roomReservationsDetailsTalbe tr td .pHouseStyle:last-child{border-bottom: none;}
.roomReservationsDetailsTalbe tr td input{height: 20px!important; padding: 0!important; text-align: center;}
.roomReservationsDetailsTalbe tr td .sel input{height: 34px!important; padding-right: 20px!important; padding-left: 5px!important; font-size: 12px!important;}
.roomReservationsDetailsTalbe tr td .link:hover{text-decoration: underline; cursor: pointer;}
.roomReservationsDetailsTalbe .Hotel_red{color:red;}
</style>