Skip to content

S
SuperMan
Commit d120022a authored by youjie's avatar youjie
Browse files
Options

no message

parent cca2de35
Show whitespace changes
Inline Side-by-side
Showing with 1767 additions and 0 deletions
src/components/Hotel/singleProduct/HotelList.vue 0 → 100644
View file @ d120022a
<template>
<div>
<div class="query-box" style="border-bottom: none;">
<ul>
<li>
<span>
<em>{{$t('system.quety_area')}}</em>
<el-select v-model="msg.Province" filterable @change="getProvinceList(msg.Province,2)"
:placeholder="$t('hotel.hotel_province')">
<el-option :key="0" :value="0" label="请选择"></el-option>
<el-option v-for="item in provinceList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
</el-select>
<el-select v-model="msg.City" filterable :placeholder="$t('hotel.hotel_city')">
<el-option :key="0" :value="0" label="请选择"></el-option>
<el-option v-for="item in cityList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
</el-select>
</span>
</li>
<li>
<span>
<em>星级</em>
<el-select v-model="msg.Star" :placeholder="$t('pub.pleaseSel')">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option label="3星或商务" :value='3'></el-option>
<el-option label="4星" :value='4'></el-option>
<el-option label="5星" :value='5'></el-option>
</el-select>
</span>
</li>
<li>
<span>
<em>价格区间</em>
<el-input type="Number" v-model="msg.MinPrice"></el-input>
<span style="padding: 0 10px;">-</span>
<el-input type="Number" v-model="msg.MaxPrice"></el-input>
</span>
</li>
<li><span><em>日期</em>
<el-date-picker v-model='msg.StartDate' value-format="yyyy-MM-dd" type="date"
:picker-options="beforeCheck">
</el-date-picker>
<el-date-picker v-model='msg.EndDate' value-format="yyyy-MM-dd" type="date" :picker-options="afterCheck">
</el-date-picker>
</span>
</li>
<li>
<span>
<em>酒店</em>
<el-select v-model="msg.HotelChooseArray" :placeholder="$t('pub.pleaseSel')" class="multiple_input w300"
filterable multiple :multiple-limit="3">
<el-option v-for="item in HotelList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
</el-select>
</span>
</li>
<li>
<button style="position: relative;" class="hollowFixedBtn" type="primary" @click="rightCarOpen=true">
<i class="el-icon-goods"></i>
购物车
<span v-if="HotelLength>0" style="position: absolute;right: 0px;top: -5px;color: #ffffff;
border-radius: 50%;background: #f1416c;width: 15px;height: 15px;">
{{HotelLength}}
</span>
</button>
<input type="button" class="normalBtn" value="查询" @click="getList()" />
</li>
</ul>
</div>
<div style="width: 100%;min-height:200px; overflow-x: auto;padding-bottom: 10px; " class="HotelQueryList"
v-loading="loading">
<div class="hotelProductManage2_tableBox" style="margin-bottom:20px;">
<span style="color:#000000;background-color: #ff3737;padding:2px 4px;border-radius:5px">红日</span>
<span style="color:#000000;background-color: #ff99cc;padding:2px 4px;border-radius:5px">旺季</span>
<span style="color:#000000;background-color: #bcd6ee;padding:2px 4px;border-radius:5px">平季</span>
<span style="color:#000000;background-color: #DDDDDD;padding:2px 4px;border-radius:5px">淡季</span>
<span style="color:#000000;background-color: #02F78E;padding:2px 4px;border-radius:5px">特别价</span>
<span style="color:#000000;background-color: #808000;padding:2px 4px;border-radius:5px">行前日</span>
</div>
<template v-if="isShow">
<el-table v-if="dataList.length>0" :data="dataList" style="width:100%" border v-loading='loading'
:height="tableHeight">
<el-table-column fixed label="酒店名称" min-width="180">
<template slot-scope="scope">
<div style="text-decoration: underline;cursor:pointer" @click="GotoHotel(scope.row.HotelId)">
{{scope.row.HotelName}}</div>
<div>{{scope.row.TotalInventory}}</div>
</template>
</el-table-column>
<el-table-column label="价格&库存" fixed min-width="120">
<template slot-scope="scope">
<div class="Hotel_kong">价格</div>
<div class="Hotel_kong" style="min-width:60px;">总/用/剩</div>
<div class="Hotel_kong">确认/预定</div>
<div class="Hotel_kong">超定</div>
</template>
</el-table-column>
<el-table-column v-for='(item,index) in dataList[0].subList' :label="getDateList(item.DateStr)" :key='index'
min-width="120">
<template slot-scope="scope">
<div @click="showOrderSubmitHandler(scope.row,item,0)">
<div class="Hotel_kong Com_hoteldiv">
<template v-if="scope.row.subList[index].PriceList.length>0">
<template v-for="childItem in scope.row.subList[index].PriceList">
<div :class="getClass(1,childItem.InventoryType)"
:style="{width:(100/scope.row.subList[index].PriceList.length)+'%'}" class="CostPriceHover">
<el-popover
placement="bottom"
width="200"
trigger="hover">
<SamplePriceList
v-if="
scope.row.subList[index].PriceList[0].BidroomPrice>0||
scope.row.subList[index].PriceList[0].SingleroomPrice>0||
scope.row.subList[index].PriceList[0].AddBedPrice>0||
scope.row.subList[index].PriceList[0].GuideRoomPrice>0" :price="scope.row.subList[index]"></SamplePriceList>
<div v-else style="text-align: center;width: 100%;">没有其他房型报价</div>
<span slot="reference" class="CostPriceHover">{{childItem.CostPrice}}</span>
</el-popover>
</div>
</template>
</template>
<template v-else>
<div :class="getClass(0,0)" style="width:100%;height:100%">&nbsp;</div>
</template>
</div>
<div class="Hotel_kong Com_hoteldiv Hq_duoge">
{{item.Inventory}}/{{item.UseInventory}}/{{item.RemainingInventory}}
</div>
<div class="Hotel_kong Com_hoteldiv">
{{item.ConfirmNum}}/{{item.ReserveNum}}
</div>
<div class="Hotel_kong Com_hoteldiv">
<span v-if="item.UseInventory-item.Inventory>0"
style="color:red;">
{{item.UseInventory-item.Inventory}}
</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
<div class="noDataNotice" v-else>
<i class="iconfont icon-kong"></i>
<p>{{$t("active.ld_noData")}}</p>
</div>
<el-pagination v-if="dataList.length>0" background @current-change="handleCurrentChange"
:current-page.sync="msg.pageIndex"
layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total='total'></el-pagination>
</template>
</div>
<div class="combottomDiv HqCom_bottom" v-if="showNotice">
<el-form label-width="80px">
<el-row>
<el-col :span="20">
<el-form-item label="日期">
<el-date-picker class="w150" type="date" v-model="queryMsg.QStartDate"
:picker-options="pickerBeginDateBefore" value-format="yyyy-MM-dd" placeholder></el-date-picker>
<el-date-picker class="w150" type="date" v-model="queryMsg.QEndDate"
:picker-options="pickerBeginDateAfter" value-format="yyyy-MM-dd" placeholder></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<input type="button" class="normalBtn" value="查询" @click="resetPageIndex(),GetHotelTipList()" />
<input type="button" class="normalBtn" value="关闭" @click="showNotice=false" />
</el-col>
</el-row>
<div class="Hq_addDetail">
<el-row>
<el-col :span="12">
<el-form-item label="说明">
<quill-editor class="w595" :options="editorOption" v-model="postMsg.TipContent"></quill-editor>
</el-form-item>
</el-col>
<el-col :span="12">
<input type="button" class="normalBtn" value="保存" @click="SaveHotelTip()" />
</el-col>
</el-row>
</div>
</el-form>
<div>
<table border="0" cellspacing="1" cellpadding="0" class="HouseTypeList Hq_addTable" style="width:97%;">
<tr>
<th width="50">编号</th>
<th>内容</th>
<th width="70">操作人</th>
<th width="150">操作时间</th>
<th width="80">操作</th>
</tr>
<template v-if="queryMsg.total>0">
<tr v-for="(item,index) in HotelTipList">
<td>{{item.Id}}</td>
<td>
<p style="text-align:left;padding-left:5px;" v-html="item.TipContent"></p>
</td>
<td>{{item.CreateByName}}</td>
<td>{{item.CreateTimeStr}}</td>
<td>
<el-tooltip class="item" effect="dark" content="编辑" placement="top">
<el-button type="primary" icon="el-icon-edit" circle @click="GetHotelTip(item.Id)"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top">
<el-button type="danger" icon="el-icon-delete" circle @click="RemoveHotelTip(item.Id)"></el-button>
</el-tooltip>
</td>
</tr>
</template>
<tr v-else>
<td colspan="5">暂无数据...</td>
</tr>
</table>
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="queryMsg.currentPage"
:page-size="queryMsg.pageSize" layout="total,prev, pager, next, jumper" :total="queryMsg.total">
</el-pagination>
</div>
</div>
<el-dialog custom-class="w800" title="信息" :visible.sync="showHQinfo" center>
<el-form>
<table border="0" cellspacing="1" cellpadding="0" class="HouseTypeList Hq_addTable" style="width:100%;">
<tr>
<th width="50">编号</th>
<th>内容</th>
<th width="70">操作人</th>
<th width="140">操作时间</th>
</tr>
<template v-if="queryMsg.total>0">
<tr v-for="(item,index) in HotelTipList">
<td>{{item.Id}}</td>
<td>
<p style="text-align:left;padding:0 5px;" v-html="item.TipContent"></p>
</td>
<td>{{item.CreateByName}}</td>
<td>{{item.CreateTimeStr}}</td>
</tr>
</template>
<tr v-else>
<td colspan="5">暂无数据...</td>
</tr>
</table>
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="queryMsg.currentPage"
:page-size="queryMsg.pageSize" layout="total,prev, pager, next, jumper" :total="queryMsg.total">
</el-pagination>
</el-form>
<div slot="footer" class="dialog-footer">
<button class="hollowFixedBtn" @click="showHQinfo = false">关闭</button>
</div>
</el-dialog>
<!-- 暂存购物车 -->
<el-dialog custom-class="w800" title="酒店信息" :visible.sync="showOrderPreview" center>
<TableOperation :editorType="editorType" :HotelRow="orderSubmitObj" :hotelInfor="orderSubmitItemObj" @close="close"></TableOperation>
</el-dialog>
<!-- 购物车 -->
<ListCar v-if="rightCarOpen" @close="close" @success="success" @editor="editor"></ListCar>
</div>
</template>
<script>
import SamplePriceList from './components/SamplePriceList'
import TableOperation from './components/TableOperation'
import ListCar from './components/ListCar'
export default {
components: { SamplePriceList,TableOperation,ListCar },
data() {
return {
editorType:0,
rightCarOpen: false,
HotelLength: 0,
orderSubmitItemObj: {},
orderSubmitObj: {},
showOrderPreview: false,
total:0,
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}
},
msg: {
pageIndex: 1,
pageSize: 10,
//酒店选择数组
HotelChooseArray: [],
StartDate: this.getBeforeDate(-20,new Date().Format("yyyy-MM-dd")),
EndDate: this.getBeforeDate(-30,this.getBeforeDate(-20,new Date().Format("yyyy-MM-dd"))),
//只查询日本
Country: "651",
Province: 0,
City: 0,
OutBranchId: -1,
//星级
Star: 0,
//价格等级
PriceLevel: 0,
//供应商
Supplier: 0,
MaxPrice: 0,
MinPrice: 0
},
tableHeight: 0,
beforeCheck: {
disabledDate: time => {
if (this.msg.StartDate) {
let endTime = new Date(this.getBeforeDate(-20,new Date().Format("yyyy-MM-dd")));
return time && endTime.getTime() >= time.getTime();
} else {
return false;
}
}
},
afterCheck: {
disabledDate: time => {
if (this.msg.StartDate) {
let startTime = new Date(this.msg.StartDate);
//可以选择当天
return time && time.getTime() < startTime.getTime() - 1 * 24 * 60 * 60 * 1000;
} else {
return false;
}
}
},
//分公司列表
companyList: [],
defaultSelectValue: 0,
//国家 省市 区
provinceList: [],
cityList: [],
district: [],
queryMsg: {
QStartDate: '',
QEndDate: '',
pageIndex: 1,
pageSize: 5,
currentPage: 1,
total: 0,
OpType: 0
},
postMsg: {
Id: 0,
TipContent: '',
OpType: 0,
},
//默认显示弹窗信息
showHQinfo: false,
//酒店温馨提示列表
HotelTipList: [],
//供应商列表
SupplierList: [],
HotelList: [],
dataList: [],
isShow: false,
loading: false,
showNotice: false,
pickerBeginDateBefore: {
disabledDate: time => {
let endTime = new Date(this.queryMsg.QStartDate)
return endTime.getTime() < time.getTime()
}
},
pickerBeginDateAfter: {
disabledDate: time => {
let startTime = new Date(this.queryMsg.QEndDate)
return startTime.getTime() >= time.getTime()
}
},
editorOption: {
placeholder: '请输入内容',
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block', 'align']
]
}
},
HOTEL_memorandum: false
};
},
methods: {
editor(x){
this.dataList.forEach(item => {
if(item.HotelId==x.HotelId){
console.log(item.subList)
item.subList.forEach(xs=>{
if(xs.DateStr==x.Date){
this.rightCarOpen = false
this.showOrderSubmitHandler(item,xs,1)
}
})
}
});
},
success(){
this.close()
this.getList()
},
close(){
this.HotelLength = localStorage.getItem("HotelLength")?localStorage.getItem("HotelLength"):0
this.showOrderPreview = false
this.rightCarOpen = false
},
showOrderSubmitHandler(row,col,type){
console.log(col,'----')
this.orderSubmitObj = row
this.orderSubmitItemObj = col
this.showOrderPreview = true
this.editorType = type?type:0
},
goUrl(name, id) {
this.$router.push({
name: name,
query: {
blank: "y",
tab: "备忘录"
}
});
},
// 获取供应商
initSupplier() {
this.apipost("supplier_post_GetAllList", {
Type: 1
}, res => {
if (res.data.resultCode === 1) {
this.SupplierList = res.data.data;
}
}, err => {});
},
GotoHotel(HotelId) {
this.$router.push({
path: "HotelManagement",
query: {
ID: HotelId,
tab: "酒店查询",
blank: 'y',
}
});
},
GotoUrl(item, subIndex, UseInventory) {
if (UseInventory > 0) {
this.$router.push({
path: "TravelControlList",
query: {
HotelId: item.HotelId,
HotelUseTime: item.subList[subIndex].DateStr,
IsUnionCked: 0,
blank: 'y',
tab: "团控查询",
}
});
}
},
com_onresize() {
//clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，
var contentsHeight = document.body.clientHeight;
var h = contentsHeight - 50 - 180 - 50;
if (h < 110) {
return;
}
//设置table的行高
this.tableHeight = h;
},
getList() {
this.loading = true;
if (this.msg.StartDate == null) {
this.msg.StartDate = this.getBeforeDate(-20,new Date().Format("yyyy-MM-dd"));
}
if (this.msg.EndDate == null) {
this.msg.EndDate = this.getBeforeDate(-30,this.getBeforeDate(-20,new Date().Format("yyyy-MM-dd")));
}
this.apipost("dict_post_HotelOffer_GetClientHotelStatics", this.msg,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.dataList = res.data.data.pageData;
this.total = res.data.data.count
this.isShow = true;
} else {
this.Error(res.data.message);
}
},
err => {}
);
},
//获取酒店列表
GetHotelList() {
this.apipost(
"hotel_post_GetHasStockHotelList", {
QCountry: "651",
IsMoreThanZero: 1
},
res => {
if (res.data.resultCode == 1) {
this.HotelList = res.data.data;
}
},
err => {}
);
},
setEdate() {
return this.addMoth(new Date().Format("yyyy-MM-dd"), 1)
},
addMoth(d, m) {
let ds = d.split('-'),
_d = ds[2] - 0;
let nextM = new Date(ds[0], ds[1] - 1 + m + 1, 0);
let max = nextM.getDate();
d = new Date(ds[0], ds[1] - 1 + m, _d > max ? max : _d);
return d.toLocaleDateString().match(/\d+/g).join('-')
},
//格式化返回显示日期
getDateList(dateStr) {
var str = dateStr.split('-');
var weekDay = ["天", "一", "二", "三", "四", "五", "六"];
var myDate = new Date(Date.parse(dateStr));
return str[1] + '/' + str[2] + "（" + weekDay[myDate.getDay()] + "）";
},
//获取星期几
getWeek(dateStr) {
var weekDay = ["天", "一", "二", "三", "四", "五", "六"];
var myDate = new Date(Date.parse(dateStr));
return weekDay[myDate.getDay()]
},
//获取颜色状态
getClass(Status, InventoryType) {
var classStr = "";
if (Status == 0) {
classStr = 'noKucun';
}
switch (InventoryType) {
case 1:
classStr = "classHong";
break;
case 2:
classStr = "classWang";
break;
case 3:
classStr = "classPing";
break;
case 4:
classStr = "classDan";
break;
case 5:
classStr = "classTe";
break;
case 6:
classStr = "hotelQueryListclass6"
break;
}
return classStr;
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
resetPageIndex() {
this.queryMsg.pageIndex = 1;
this.queryMsg.currentPage = 1;
},
//获取酒店列表
GetHotelTipList() {
this.apipost(
"hoteltip_get_GetPageList", this.queryMsg,
res => {
if (res.data.resultCode == 1) {
this.HotelTipList = res.data.data.pageData;
this.queryMsg.total = res.data.data.count;
}
},
err => {}
);
},
SaveHotelTip() {
this.apipost(
"hoteltip_post_SetHotelTip", this.postMsg,
res => {
if (res.data.resultCode == 1) {
this.Success("保存成功!");
this.postMsg.Id = 0;
this.postMsg.TipContent = "";
this.GetHotelTipList();
} else {
this.Error("保存失败!");
}
},
err => {}
);
},
RemoveHotelTip(Id) {
var that = this;
this.Confirm('是否要删除此数据?', function () {
that.apipost(
"hoteltip_post_RemoveHotelTip", {
ID: Id
},
res => {
if (res.data.resultCode == 1) {
that.Success("删除成功!");
that.GetHotelTipList();
} else {
that.Error("删除失败!");
}
},
err => {}
);
})
},
GetHotelTip(Id) {
this.apipost(
"hoteltip_get_GetHotelTip", {
ID: Id
},
res => {
if (res.data.resultCode == 1) {
this.postMsg.Id = res.data.data.Id;
this.postMsg.TipContent = res.data.data.TipContent;
} else {
this.Error("获取数据失败!");
}
},
err => {}
);
},
getProvinceList(ID, type) {
//根据省份获取城市
let msg = {
Id: ID
};
if (type == 1) {
this.msg.Province = 0;
this.msg.City = 0;
this.provinceList = [];
this.cityList = [];
} else if (type == 2) {
this.msg.City = 0;
this.cityList = [];
}
this.apipost(
"dict_post_Destination_GetChildList",
msg,
res => {
if (type == 1) {
this.provinceList = res.data.data;
} else if (type == 2) {
this.cityList = res.data.data;
}
},
err => {}
);
},
getBranchList() {
let UserInfo = this.getLocalStorage();
this.apipost('admin_get_BranchGetList', {
RB_Group_Id: UserInfo.RB_Group_id,
Status: 0,
}, res => {
if (res.data.resultCode == 1) {
this.companyList = res.data.data;
}
}, err => {})
},
//Excel下载
DownLoadHotelQuery() {
this.loading = true;
let qMsg = {
queryMsg: this.msg,
uid: this.getLocalStorage().EmployeeId
};
let fileName = "酒店查询统计" + this.$commonUtils.getCurrentDate() + ".xls";
this.GetLocalFile("hotel_get_downloadHotelQuery", qMsg, fileName,
res => {
this.loading = false;
});
},
},
mounted() {
this.HotelLength = localStorage.getItem("HotelLength")?localStorage.getItem("HotelLength"):0
let userinfo = this.getLocalStorage();
let ActionMenuCode = userinfo.ActionMenuCode;
if (ActionMenuCode.indexOf("HOTEL_memorandum") != -1) {
this.HOTEL_memorandum = true;
}
this.initSupplier();
this.getBranchList();
this.getProvinceList("651", 1);
this.GetHotelList();
this.getList();
this.GetHotelTipList();
this.com_onresize();
window.onresize = () => {
this.com_onresize();
}
}
};
</script>
<style>
.Hq_duoge {
cursor: pointer;
text-decoration: underline;
}
.HqCom_bottom .ql-container {
min-height: 100px;
}
.classHong {
background-color: rgb(255, 55, 55);
color: #fff;
}
.classWang {
background-color: rgb(255, 153, 204);
}
.classPing {
background-color: rgb(188, 214, 238);
}
.classDan {
background-color: rgb(221, 221, 221);
}
.classTe {
background-color: rgb(2, 247, 142);
}
.hotelQueryListclass6 {
background-color:#808000;
}
.HouseTypeList {
background: #ccc;
width: 100%;
margin-top: 20px;
}
.Com_hoteldiv {
min-width: 70px;
white-space: nowrap;
}
.noKucun {
background-color: black !important;
}
.Hotel_kong {
width: 100%;
height: 35px;
text-align: center;
line-height: 35px;
border-bottom: 1px solid #d1d1d1;
}
.Hotel_kong:last-child {
border: 0;
}
.HouseTypeList tr th {
background: #e6e6e6;
height: 35px;
font-size: 12px;
color: #333;
}
.HouseTypeList tr {
background: #fff;
text-align: center;
height: 35px;
}
.HouseTypeList tr td {
font-size: 12px;
}
.hotelProductManage2_tableBox span {
margin: 0 10px 10px 0;
}
.Hq_addDetail {
margin-top: 20px;
}
.Hq_addDetail .el-textarea__inner {
resize: none;
}
.Hq_addTable .el-button.is-circle {
padding: 5px;
}
.HqCom_bottom .el-form-item {
margin-bottom: 0
}
.HqCom_bottom {
height: 350px;
padding-top: 35px;
}
.HQ_miaoshu {
color: #E95252;
font-size: 12px;
}
.HQ_miaoshu:first-child {
margin-top: 10px;
}
.HotelQueryList .has-gutter tr th,
.el-table th.is-leaf {
background: #EAEAEA !important;
}
.HotelQueryList .el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid #ebeef5;
}
.HotelQueryList .el-table .cell {
padding: 0;
}
.HotelQueryList .el-table td {
padding: 0;
}
.CostPriceHover{
height:100%;
float:left;
width:100%;
cursor: pointer;
}
</style>
\ No newline at end of file
src/components/Hotel/singleProduct/components/ListCar.vue 0 → 100644
View file @ d120022a
<template>
<div>
<div class="ListCar-form"></div>
<div class="ListCar-form-box">
<div class="ListCar-box">
<div class="normalBtn ListCar-close" @click="close">
<i class="el-icon-close"></i>
</div>
<div class="row-JCSB ListCar-header paddinglr15">
<span class="fz16 fbold">酒店采购单</span>
<div class="ListCar-header-right fz12">
本次行程
<span class="colore65100">{{cars&&cars.length}}</span>
天，入住
<span class="color009ef7">{{HotelLength}}</span>
個酒店
</div>
</div>
<div class="ListCar-content">
<div class="ListCar-list" v-for="(x,xi) in cars">
<div class="colorffffff list-time">{{ x.Date }}</div>
<div class="list-content-box" v-for="(y,i) in x.Hotels">
<div class="list-operation">
<div>
<button class="hollowFixedBtn" type="primary" @click="setEditorHandler(y)">
<i class="el-icon-edit"></i>
</button>
<button class="normalBtn" type="primary" @click="removeHotelHandler(xi,i)">
<i class="el-icon-delete"></i>
</button>
</div>
</div>
<div class="list-content">
<div class="color009ef7 row-JCSB list-content-title">
<span class="fbold content-title fz15">{{ y.HotelName }}</span>
<div class="fz12 fbold">
已选
<span class="coloref44336">{{ y.SumPeople }}</span>
人
<span class="coloref1416c">{{ y.Total }}</span>
间
</div>
</div>
<div class="list-content-rooms fz14">
<div v-for="z in y.DetailList">
<el-row :gutter="20">
<el-col :span="4">{{ z.RoomName }}</el-col>
<el-col :span="7">
{{ moneyFormat(z.Unit_Price) }}/人
</el-col>
<el-col :span="5">
{{ z.PeopleNumber }}人{{ z.Number }}间
</el-col>
<el-col :span="8" class="row-JCE">
<span>小计：13400.00</span>
</el-col>
</el-row>
</div>
</div>
<div class="row-JCE color009ef7 fz14 list-content-num">
<span>合计：{{ moneyFormat(y.Money) }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="ListCar-bottom">
<el-form label-width="60px" :model="parameters" :rules="rules" ref="parameters">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="类型" prop="OrderType">
<el-select v-model="parameters.OrderType">
<el-option v-for="item in cacheHotels" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
</el-select>
</el-form-item>
</el-col>
<template v-if="parameters.OrderType==1">
<el-col :span="12">
<el-form-item label="姓名" prop="ContactName">
<el-input v-model="parameters.ContactName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="电话" prop="ContactNumber">
<el-input v-model="parameters.ContactNumber"></el-input>
</el-form-item>
</el-col>
</template>
<el-col :span="12" v-else>
<el-form-item label="团号" prop="TCNum">
<el-input v-model="parameters.TCNum"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="">
<el-input type="textarea" :rows="1"
placeholder="请输入备注" v-model="parameters.Remark"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="row-JCSB bottom-num">
<div>
<span class="coloref1416c fz12">订单总金额：</span>
<span class="coloref1416c fbold">
<span class="fz13">¥</span>
<span class="fz18">37000</span>
</span>
</div>
<div>
<button class="normalBtn" :class="{'normalBtn':'','hollowFixedBtn':''}" type="primary" @click="submit">
确认下单
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
HotelRow: {
type: Object,
require: false
},
hotelInfor: {
type: Object,
require: false
}
},
data() {
return {
cars: [],
HotelLength: 0,
addNum: 1,
parameters: {
Money: 0,
DetailList: [],
Remark: '',
OrderType: 1, //订单类型 1散客 2团队
TCNum: '', //=团队时 传递 组团号
ContactName: '', //=散客时 传递 联系人
ContactNumber: '', //=散客时 传递 联系人电话
OrderId: 0
},
currentIndex: 0,
currentI: 0,
currentS: 0,
RemainingInventory: 0,
loading: false,
cacheHotels: [
{ Name: '散客', ID: 1 },
{ Name: '团队', ID: 2 }
],
rules:{
OrderType: [{
required: true,
message: '请选择类型',
trigger: 'change'
}],
ContactName: [{
required: true,
message: '请输入散客姓名',
trigger: 'blur'
}],
ContactNumber: [
{ required: true, message: "请输入联系电话", trigger: "blur" },
{
pattern: this.$commonUtils.Regex.el_ISphone,
message: "请输入正确的电话"
}
],
TCNum: [{
required: true,
message: '请输入团号',
trigger: 'blur'
}],
}
};
},
watch: {
cars: {
handler: function (val, oldVal) {
this.HotelLength = this.cars.length
localStorage.setItem("HotelLength",this.HotelLength)
},
deep: true
},
parameters: {
handler: function (val, oldVal) {
},
deep: true
}
},
created() {
this.cars = JSON.parse(localStorage.getItem("cars"))
this.HotelLength = localStorage.getItem("HotelLength")
},
mounted() {
},
methods: {
close(){
localStorage.removeItem('editor')
this.$emit('close')
},
getMoney() {
this.parameters.Money = 0
this.cars.forEach((item) => {
item.Hotels.forEach((t) => {
this.parameters.Money += t.Money
})
})
},
submit() {
this.$refs['parameters'].validate((valid) => {
if (valid) {
this.setFormMsg()
} else {
return false;
}
});
},
setFormMsg(){
let temp = JSON.parse(JSON.stringify(this.cars))
if(this.loading) return
this.loading = true
this.parameters.DetailList = []
temp.forEach((x)=>{
x.Hotels.forEach((y)=>{
y.RoomList = JSON.parse(JSON.stringify(y.DetailList))
delete y.DetailList
this.parameters.DetailList.push(y)
})
})
this.apipost("dict_post_SetSaleCustomerOrder", this.parameters,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.Success('下单成功');
localStorage.removeItem('cars')
localStorage.removeItem('editor')
localStorage.removeItem('HotelLength')
this.cars=[]
this.HotelLength = 0
this.$emit('success')
} else {
this.Error('下单失败')
}
},
err => {
this.Error(err.message)
this.loading = false
}
);
},
removeHotelHandler(x,y){
let that = this
that.$confirm('是否确定删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(this.cars[x].Hotels.length==1){
this.cars.splice(x,1)
}else{
this.cars[x].Hotels.splice(y,1)
}
this.HotelLength = this.cars.length
}).catch(() => {
});
},
setEditorHandler(x){
localStorage.setItem('editor',JSON.stringify(x))
this.$emit('editor',x)
}
}
};
</script>
<style scoped>
.fz12{
font-size: 12px;
}
.fz13{
font-size: 13px;
}
.fz14{
font-size: 14px;
}
.fz15{
font-size: 15px;
}
.fz16{
font-size: 16px;
}
.fz18{
font-size: 18px;
}
.fbold{
font-weight: bold;
}
.paddinglr15{
padding: 0 15px;
}
.row-JCSB{
display: flex;
justify-content: space-between;
}
.row-JCE{
display: flex;
justify-content: end;
}
.colorffffff{
color: #ffffff;
}
.color009ef7{
color: #009ef7;
}
.colore65100{
color: #e65100;
}
.coloref44336{
color: #f44336;
}
.coloref1416c{
color: #f1416c;
}
.ListCar-form{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(23,23,23,.5);
z-index: 3;
}
.ListCar-form-box{
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 500px;
background: #ffffff;
z-index: 4;
}
.ListCar-box{
width: 100%;
height: 100%;
position: relative;
}
.ListCar-close{
position: absolute;
left: -47px;
top: 20%;
line-height: 26px;
}
.ListCar-close i{
margin-left: 3px;
}
.normalBtn.ListCar-close{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding: 0 8px !important;
}
.ListCar-box{
padding: 15px 0;
}
.ListCar-header{
border-bottom: -;
}
.ListCar-header-right{
border-radius: 3px;
padding: 5px 8px;
background: #fff3e0;
}
.ListCar-content{
padding: 20px 15px;
height: calc(100% - 195px);
overflow: auto;
}
.ListCar-list{
border-radius: 3px;
background: black;
padding: 0 10px 10px 10px;
margin: 0 0 10px 0;
}
.list-time{
padding: 10px 0 5px 0;
}
.list-content-box{
background: #e1f5fe;
position: relative;
border-radius: 3px;
cursor: pointer;
margin-bottom: 5px;
}
.list-content-box:last-child{
margin-bottom: 0;
}
.list-content{
padding: 8px 10px;
}
.list-content-title{
border-bottom: 1px dashed #009ef7;
padding: 0 0 8px 0;
}
.content-title{
width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.list-content-rooms{
border-bottom: 1px dashed #009ef7;
padding: 6px 0;
}
.list-content-rooms>div{
margin-bottom: 5px;
}
.list-content-rooms>div:last-child{
margin-bottom: 0;
}
.list-content-num{
padding: 6px 0 0 0;
}
.list-operation{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(23,23,23,.5);
border-radius: 3px;
display: none;
z-index: 1;
}
.list-operation div{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.list-content-box:hover .list-operation{
display: block;
}
.ListCar-bottom{
padding: 15px 15px 0 15px;
}
.bottom-num{
align-items: center;
}
</style>
\ No newline at end of file
src/components/Hotel/singleProduct/components/SamplePriceList.vue 0 → 100644
View file @ d120022a
<template>
<div class="SamplePriceList">
<div v-for="(x,i) in rooms">
<span>{{x.name}}</span>
<span>{{x.price}}</span>
</div>
</div>
</template>
<script>
export default {
props: {
price: {
type: Object,
default: {},
require: true
}
},
data() {
return {
rooms: []
};
},
watch: {
price: {
handler: function (val, oldVal) {
this.setCurrentHotel()
},
deep: true
},
},
created() {
},
mounted() {
this.setCurrentHotel()
},
methods: {
setCurrentHotel() {
let temp = this.price.PriceList?this.price.PriceList[0]:null
if(!temp) return
let roomTyps = ['BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice']
let roomLangs = ['大床房', '自然单间', '三人间', '司机房']
roomTyps.forEach((x, i) => {
if (temp[x] > 0) {
this.rooms.push({
price:this.moneyFormat(temp[x]),
name:roomLangs[i]
})
}
})
}
}
};
</script>
<style scoped>
.SamplePriceList{
display: flex;
flex-direction: row;
justify-content: center;
}
.SamplePriceList>div{
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 10px;
}
.SamplePriceList>div>span{
display: flex;
justify-content: center;
}
.SamplePriceList>div>span:first-child{
font-size: 12px;
color: gray;
margin-bottom: 5px;
}
</style>
\ No newline at end of file
src/components/Hotel/singleProduct/components/TableOperation.vue 0 → 100644
View file @ d120022a
<template>
<div>
<div class="header-Title">
<span class="header-name">{{ parameters.HotelName }}</span>
<div class="header-Title-right">
<div>
<i :class="{'el-icon-check':parameters.PriceIsBreakfast==1,
'el-icon-close':parameters.PriceIsBreakfast!=1}"
:style="{'color': parameters.PriceIsBreakfast==1?'#2196f3':'#f44336'}"></i>
<span>早餐</span>
</div>
<div>
<i :class="{'el-icon-check':parameters.PriceIsDinner==1,
'el-icon-close':parameters.PriceIsDinner!=1}"
:style="{'color': parameters.PriceIsDinner==1?'#2196f3':'#f44336'}"></i>
<span>晚餐</span>
</div>
</div>
</div>
<div class="TableOperation-time">
<div>
<div class="datetimerange">
{{joinHouse.dateRangeFormat}}
</div>
</div>
<div class="TableOperation-time-right">
共计
<span>{{joinHouse.days}}</span>
晚
</div>
</div>
<div class="TableOperation-note">注意：以下计费与报价均是按照人数进行计费</div>
<div class="TableOperation-list" v-if="parameters.DetailList">
<template v-for="(item, index) in parameters.DetailList">
<el-row :gutter="20" :style="{'margin-bottom': (parameters.DetailList.length-1)==index?'0':'15px'}">
<el-col :span="3">
{{ item.RoomName }}
</el-col>
<el-col :span="9">
<span class="fz10 colorf44336">¥</span>
<span class="din colorf44336">{{ item.UPriceFormat }}</span>
<span class="text-dark" style="font-size: 12px">/人</span>
</el-col>
<el-col :span="6">
<div><el-input-number v-model="item.PeopleNumber" :min="0" :step="1" step-strictly @change="calculateNum"></el-input-number></div>
</el-col>
<el-col :span="6">
<div>预计
<span>{{item.Number}}</span>
间房
</div>
</el-col>
</el-row>
</template>
</div>
<div class="TableOperation-buttom">
<div>
<div class="buttom-left">
<div>
仅剩
<span>{{ onlyNum }}</span>
间
</div>
<div v-if="total > 0">
已选
<span>{{ sumPeople }}</span>
人
<span>{{ total }}</span>
间
</div>
</div>
<div v-if="(total-onlyNum)>0" class="prompt">
超出现有的库存预定，我们会即时与酒店协商，请保证收讯通畅
</div>
</div>
<div>
<button :class="{'normalBtn':sumPeople>0,'hollowFixedBtn':!sumPeople}" type="primary" @click="join">
<i class="el-icon-goods"></i>
暂存购物车
</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
editorType: {
type: Number,
require: false
},
HotelRow: {
type: Object,
require: false
},
hotelInfor: {
type: Object,
require: false
}
},
data() {
return {
onlyNum: 0,
parameters: {
HotelId: '',
HotelName: '',
Date: '',
RemainingInventory: '',
total: 0,
Money: 0,
DetailList: [],
Remark: '',
TaxesPrice:0,
PriceInTangTax:0,
PriceIsBreakfast:0,
PriceIsDinner:0
},
total: 0,
joinHouse: {
StartDate: '',
EndDate: '',
dateRange: [],
dateRangeFormat: '',
days: 1
},
sumPrice: 0,
sumPeople: 0,
cars: [],//购物车参数
HotelLength: 0,//购物车酒店数
editor: {},//预定订单对象
};
},
watch: {
editorType: {
handler: function (val, oldVal) {
this.setList()
},
deep: true
},
HotelRow: {
handler: function (val, oldVal) {
this.HotelRow = val
this.setList()
},
deep: true
},
hotelInfor: {
handler: function (val, oldVal) {
this.hotelInfor = val
this.setList()
},
deep: true
},
parameters: {
handler: function (val, oldVal) {
this.calculateNum()
},
deep: true
}
},
created() {
},
mounted() {
this.editor = JSON.parse(localStorage.getItem('editor'))
if(this.hotelInfor&&this.hotelInfor.RemainingInventory){
this.onlyNum = this.hotelInfor.RemainingInventory
}
if(this.HotelRow && this.hotelInfor){
this.setList()
}
},
methods: {
changePeople(val){
setTimeout(()=>{
this.calculateNum()
},50)
},
// 计算房间数量
calculateNum() {
this.total = 0
this.sumPeople = 0
this.parameters.DetailList.forEach(item => {
item.Number = Math.ceil(parseFloat(item.PeopleNumber) / parseFloat(item.LimitGuestNum))
this.total += item.Number
this.sumPeople += parseInt(item.PeopleNumber)
})
},
join(){
if(!this.sumPeople) return this.Error('请加入人数');
const temp= JSON.parse(JSON.stringify(this.parameters))
temp.Money=0
temp.Total=this.total
temp.SumPeople = this.sumPeople
temp.DetailList = temp.DetailList.filter(((x)=>x.PeopleNumber>0))
temp.DetailList.forEach((x) => {
temp.Money+=(x.PeopleNumber*(x.Unit_Price+x.TaxesPrice+x.PriceInTangTax))
});
let existsIndex = this.cars.findIndex((x)=>x.Date == temp.Date)
let exists = existsIndex==-1?null:this.cars[existsIndex]
if(exists){
let existsHotel = exists.Hotels.findIndex((h)=>h.HotelId==temp.HotelId)
if(existsHotel!=-1) exists.Hotels.splice(existsHotel,1)
}else{
exists = {
Date:temp.Date,
Hotels:[]
}
this.cars.push(exists)
}
exists.Hotels.push(temp)
this.cars.sort((x,y)=>{
return new Date(x.Date).getTime()-new Date(y.Date).getTime()
})
this.HotelLength = this.cars.length
localStorage.setItem("cars",JSON.stringify(this.cars))
localStorage.setItem("HotelLength",this.HotelLength)
this.Success('加入购物车成功');
this.editor={}
this.$emit('close')
},
// 组装可选房间
setList() {
this.parameters.DetailList = []
let roomTyps = ['CostPrice', 'BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice']
let roomLangs = ['标准间', '大床房', '自然单间', '三人间', '司机间']
let tips = ['', '本房型不同的酒店入住人数限制不同，系统默认该房型只能入住一人', '', '', '']
let limitGuestNum = [2, 1, 1, 3, 1]
let tempPrice = this.hotelInfor.PriceList[0]
// console.log(tempPrice,'---')
// console.log(this.hotelInfor,'----')
let hotel = this.hotelInfor
this.parameters.HotelId = this.HotelRow.HotelId
this.parameters.HotelName = this.HotelRow.HotelName
this.parameters.Date = hotel.DateStr
this.parameters.RemainingInventory = hotel.RemainingInventory
this.parameters.TaxesPrice = tempPrice.TaxesPrice
this.parameters.PriceInTangTax= tempPrice.PriceInTangTax
this.parameters.PriceIsBreakfast = tempPrice.PriceIsBreakfast
this.parameters.PriceIsDinner = tempPrice.PriceIsDinner
this.setDateRange()
roomTyps.forEach((x, i) => {
if (tempPrice[x] > 0) {
let dataMsg = {
HotelId: this.HotelRow.HotelId,
Date: hotel.DateStr,
RoomType: i + 1,
RoomName: roomLangs[i],
Unit_Price: tempPrice[x],
UPriceFormat: this.moneyFormat(tempPrice[x]),
LimitGuestNum: limitGuestNum[i],
Tips: tips[i],
Number: 0,
PeopleNumber: 0,
Destription: '',
TaxesPrice: tempPrice.TaxesPrice,
PriceInTangTax: tempPrice.PriceInTangTax,
HotelName: this.HotelRow.HotelName
}
this.parameters.DetailList.push(dataMsg)
}
})
this.setInjectHandler()
},
setDateRange() {
this.joinHouse.StartDate = this.parameters.Date
this.joinHouse.EndDate = this.getBeforeDate(-1, this.parameters.Date)
this.joinHouse.dateRangeFormat = `${this.joinHouse.StartDate} 至 ${this.joinHouse.EndDate} `
this.joinHouse.days = 1
},
setInjectHandler(){
if(!this.editorType) return
this.parameters.DetailList.forEach(item=>{
this.editor.DetailList.forEach(x=>{
if(item.RoomName==x.RoomName){
item.PeopleNumber = x.PeopleNumber
item.Number = x.Number
}
})
})
this.calculateNum()
this.setDateRange()
}
}
};
</script>
<style scoped>
.header-name{
width: 500px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 18px;
color: #009ef7;
}
.header-Title,
.header-Title-right,
.TableOperation-time,
.TableOperation-buttom{
display: flex;
justify-content: space-between;
}
.header-Title-right>div{
margin-left: 15px;
}
/deep/.TableOperation-time .el-input__inner{
background-color: rgba(237,237,237,.1);
}
.TableOperation-time{
border-radius: 10px;
background: #FFFDE7;
margin: 15px 0;
padding: 10px;
align-items: center;
}
.TableOperation-time-right span{
color: #f57f17;
font-weight: bold;
}
.TableOperation-note{
color: #f1416c;
}
.TableOperation-list{
background: #fafafa;
padding: 15px;
border-radius: 10px;
margin: 10px 0;
}
.TableOperation-list .el-row{
display: flex;
align-items: center;
}
.TableOperation-list .el-row .el-col:last-child{
text-align: center;
}
.TableOperation-list .el-row .el-col:last-child span{
color: #f57f17 ;
font-weight: bold;
}
.TableOperation-buttom{
align-items: center;
margin-top: 25px;
}
.buttom-left{
display: flex;
color: #9e9e9e;
}
.buttom-left>div:first-child{
margin-right: 10px;
}
.buttom-left>div:first-child span{
color: #ff6d00;
}
.buttom-left>div>span{
color: #f44336;
}
.datetimerange{
border: 1px solid #eeeeee;
padding: 8px 15px;
background: rgba(237,237,237,.1);
border-radius: 3px;
}
.colorf44336{
color: #f44336;
}
.fz10{
font-size: 10px;
}
.din{
font-weight: bold;
}
.text-dark{
color: #181c32;
font-size: 12px;
}
.prompt{
background: #fff3e0;
color: #e65100;
padding: 5px 8px;
margin-top: 8px;
border-radius: 5px;
font-size: 12px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment