Skip to content

S
SuperMan
Commit 14e9eeb4 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 72dc437c
Hide whitespace changes
Inline Side-by-side
Showing with 1335 additions and 1309 deletions
src/components/Hotel/singleProduct/HotelQueryList.vue
View file @ 14e9eeb4
<template> <template>
<div> <div>
<div class="query-box" style="border-bottom: none;"> <div class="query-box" style="border-bottom: none;">
<ul> <ul>
<li> <li>
<span> <span>
<em>{{$t('system.quety_area')}}</em> <em>{{$t('system.quety_area')}}</em>
<el-select v-model="msg.Province" filterable @change="getProvinceList(msg.Province,2)" <el-select v-model="msg.Province" filterable @change="getProvinceList(msg.Province,2)"
:placeholder="$t('hotel.hotel_province')"> :placeholder="$t('hotel.hotel_province')">
<el-option :key="0" :value="0" label="请选择"></el-option> <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-option v-for="item in provinceList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
</el-select> </el-select>
<el-select v-model="msg.City" filterable :placeholder="$t('hotel.hotel_city')"> <el-select v-model="msg.City" filterable :placeholder="$t('hotel.hotel_city')">
<el-option :key="0" :value="0" label="请选择"></el-option> <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-option v-for="item in cityList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
</el-select> </el-select>
</span> </span>
</li> </li>
<li> <li>
<span> <span>
<em>星级</em> <em>星级</em>
<el-select v-model="msg.Star" :placeholder="$t('pub.pleaseSel')"> <el-select v-model="msg.Star" :placeholder="$t('pub.pleaseSel')">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option> <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option label="3星或商务" :value='3'></el-option> <el-option label="3星或商务" :value='3'></el-option>
<el-option label="4星" :value='4'></el-option> <el-option label="4星" :value='4'></el-option>
<el-option label="5星" :value='5'></el-option> <el-option label="5星" :value='5'></el-option>
</el-select> </el-select>
</span> </span>
</li> </li>
<li> <li>
<span> <span>
<em>价格区间</em> <em>价格区间</em>
<el-input type="Number" v-model="msg.MinPrice"></el-input> <el-input type="Number" v-model="msg.MinPrice"></el-input>
<span style="padding: 0 10px;">-</span> <span style="padding: 0 10px;">-</span>
<el-input type="Number" v-model="msg.MaxPrice"></el-input> <el-input type="Number" v-model="msg.MaxPrice"></el-input>
</span> </span>
</li> </li>
<li><span><em>日期</em> <li><span><em>日期</em>
<el-date-picker v-model='msg.StartDate' value-format="yyyy-MM-dd" type="date" <el-date-picker v-model='msg.StartDate' value-format="yyyy-MM-dd" type="date" :picker-options="beforeCheck">
:picker-options="beforeCheck"> </el-date-picker>
</el-date-picker> <el-date-picker v-model='msg.EndDate' value-format="yyyy-MM-dd" type="date" :picker-options="afterCheck">
<el-date-picker v-model='msg.EndDate' value-format="yyyy-MM-dd" type="date" :picker-options="afterCheck"> </el-date-picker>
</el-date-picker> </span>
</span> </li>
</li> <li>
<li> <span>
<span> <em>酒店</em>
<em>酒店</em> <el-input type="" v-model="msg.HotelName" placeholder="酒店名称"></el-input>
<el-input type="" v-model="msg.HotelName" placeholder="酒店名称"></el-input> <!-- <el-select v-model="msg.HotelChooseArray" :placeholder="$t('pub.pleaseSel')" class="multiple_input w300"
<!-- <el-select v-model="msg.HotelChooseArray" :placeholder="$t('pub.pleaseSel')" class="multiple_input w300"
filterable multiple collapse-tags :multiple-limit="3"> filterable multiple collapse-tags :multiple-limit="3">
<el-option v-for="item in HotelList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option> <el-option v-for="item in HotelList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
</el-select> --> </el-select> -->
</span> </span>
</li> </li>
<li>
<span> <li>
<em>来源</em> <input v-if="HOTEL_memorandum&&!pagesTitle" type="button" class="normalBtn" value="备忘录"
<el-select v-model="msg.SourceType" :placeholder="$t('pub.pleaseSel')">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option label="ERP" :value='1'></el-option>
<el-option label="PIC" :value='2'></el-option>
</el-select>
</span>
</li>
<li>
<input v-if="HOTEL_memorandum&&!pagesTitle" type="button" class="normalBtn" value="备忘录"
@click="goUrl('memorandumList')" /> @click="goUrl('memorandumList')" />
<input v-if="!pagesTitle" type="button" class="normalBtn" value="温馨提示" <input v-if="!pagesTitle" type="button" class="normalBtn" value="温馨提示" @click="showNotice=true" />
@click="showNotice=true" /> <button style="position: relative;" class="hollowFixedBtn" type="primary" @click="rightCarOpen=true">
<button style="position: relative;" class="hollowFixedBtn" type="primary" @click="rightCarOpen=true"> <i class="el-icon-goods"></i>
<i class="el-icon-goods"></i> 购物车
购物车 <span v-if="HotelLength>0" style="position: absolute;right: 0px;top: -5px;color: #ffffff;
<span v-if="HotelLength>0" style="position: absolute;right: 0px;top: -5px;color: #ffffff;
border-radius: 50%;background: #f1416c;width: 15px;height: 15px;"> border-radius: 50%;background: #f1416c;width: 15px;height: 15px;">
{{HotelLength}} {{HotelLength}}
</span> </span>
</button> </button>
<input type="button" class="normalBtn" value="查询" @click="getList(),msg.pageIndex=1" /> <input type="button" class="normalBtn" value="查询" @click="getList(),msg.pageIndex=1" />
</li> </li>
</ul> </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> </div>
<template v-if="isShow">
<div style="width: 100%;min-height:200px; overflow-x: auto;padding-bottom: 10px; " class="HotelQueryList" <hotelTableList v-loading='loading' :list="dataList" :tableHeight="tableHeight"
v-loading="loading"> @showOrderSubmitHandler="showOrderSubmitHandler" @success="success" @close="close"></hotelTableList>
<div class="hotelProductManage2_tableBox" style="margin-bottom:20px;"> <div class="noDataNotice" v-if="dataList&&dataList.length==0">
<span style="color:#000000;background-color: #ff3737;padding:2px 4px;border-radius:5px">红日</span> <i class="iconfont icon-kong"></i>
<span style="color:#000000;background-color: #ff99cc;padding:2px 4px;border-radius:5px">旺季</span> <p>{{$t("active.ld_noData")}}</p>
<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> </div>
<template v-if="isShow"> <el-pagination v-if="dataList.length>0" background @current-change="handleCurrentChange"
<hotelTableList v-loading='loading' :list="dataList" :current-page.sync="msg.pageIndex" layout="total,prev, pager, next, jumper" :page-size='msg.pageSize'
:tableHeight="tableHeight" :total='total'></el-pagination>
@showOrderSubmitHandler="showOrderSubmitHandler"
@success="success"
@close="close"></hotelTableList>
<div class="noDataNotice" v-if="dataList&&dataList.length==0">
<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">
<WarmReminder @close="showNotice= false"></WarmReminder>
</div>
<!-- 默认弹窗信息 -->
<template v-if="!pagesTitle">
<el-dialog custom-class="w800" title="信息" :visible.sync="showHQinfo" center>
<HotelTipTableList></HotelTipTableList>
<div slot="footer" class="dialog-footer">
<button class="hollowFixedBtn" @click="showHQinfo = false">关闭</button>
</div>
</el-dialog>
</template> </template>
<!-- 暂存购物车 -->
<el-dialog custom-class="w800" title="酒店信息" :visible.sync="showOrderPreview" center @close="removeEditor">
<TableOperation :editorType="editorType" :HotelRow="orderSubmitObj"
:hotelInfor="orderSubmitItemObj"
@close="close"></TableOperation>
</el-dialog>
<!-- 购物车 -->
<ListCar v-if="rightCarOpen" @close="close" @success="success" @editor="editor"></ListCar>
<!-- 酒店详情信息 -->
<el-dialog custom-class="w800" title="酒店详情" :visible.sync="showHotelDetails" center @close="close">
<hotelDetails :hotelId="HotelDetailId"></hotelDetails>
</el-dialog>
</div> </div>
</template>
<script> <!-- 温馨提示 -->
import SamplePriceList from './components/SamplePriceList' <div class="combottomDiv HqCom_bottom" v-if="showNotice">
import TableOperation from './components/TableOperation' <WarmReminder @close="showNotice= false"></WarmReminder>
import ListCar from './components/ListCar' </div>
import hotelDetails from './components/hotelDetails' <!-- 默认弹窗信息 -->
import hotelTableList from './components/hotelTableList' <template v-if="!pagesTitle">
import WarmReminder from './components/WarmReminder' <el-dialog custom-class="w800" title="信息" :visible.sync="showHQinfo" center>
import HotelTipTableList from './components/HotelTipTableList' <HotelTipTableList></HotelTipTableList>
export default { <div slot="footer" class="dialog-footer">
props:['pagesTitle'], <button class="hollowFixedBtn" @click="showHQinfo = false">关闭</button>
components: { SamplePriceList, </div>
TableOperation,ListCar, </el-dialog>
hotelDetails,hotelTableList, </template>
WarmReminder,HotelTipTableList }, <!-- 暂存购物车 -->
data() { <el-dialog custom-class="w800" title="酒店信息" :visible.sync="showOrderPreview" center @close="removeEditor">
return { <TableOperation :editorType="editorType" :HotelRow="orderSubmitObj" :hotelInfor="orderSubmitItemObj"
showHotelDetails: false, @close="close"></TableOperation>
HotelDetailId: 0, </el-dialog>
editorType:0, <!-- 购物车 -->
rightCarOpen: false, <ListCar v-if="rightCarOpen" @close="close" @success="success" @editor="editor"></ListCar>
HotelLength: 0, <!-- 酒店详情信息 -->
orderSubmitItemObj: {}, <el-dialog custom-class="w800" title="酒店详情" :visible.sync="showHotelDetails" center @close="close">
orderSubmitObj: {}, <hotelDetails :hotelId="HotelDetailId"></hotelDetails>
showOrderPreview: false, </el-dialog>
total:0, </div>
pickerOptions: { </template>
disabledDate(time) { <script>
return time.getTime() > Date.now(); import SamplePriceList from './components/SamplePriceList'
} import TableOperation from './components/TableOperation'
}, import ListCar from './components/ListCar'
msg: { import hotelDetails from './components/hotelDetails'
pageIndex: 1, import hotelTableList from './components/hotelTableList'
pageSize: 10, import WarmReminder from './components/WarmReminder'
//酒店选择数组 import HotelTipTableList from './components/HotelTipTableList'
HotelChooseArray: [], export default {
StartDate: this.getBeforeDate(0,new Date().Format("yyyy-MM-dd")), props: ['pagesTitle'],
EndDate: this.getBeforeDate(-30,this.getBeforeDate(0,new Date().Format("yyyy-MM-dd"))), components: {
//只查询日本 SamplePriceList,
Country: "651", TableOperation,
Province: 0, ListCar,
City: 0, hotelDetails,
OutBranchId: -1, hotelTableList,
//星级 WarmReminder,
Star: 0, HotelTipTableList
//价格等级 },
PriceLevel: 0, data() {
//供应商 return {
Supplier: 0, showHotelDetails: false,
MaxPrice: 0, HotelDetailId: 0,
MinPrice: 0, editorType: 0,
HotelName: '', rightCarOpen: false,
SourceType:'', HotelLength: 0,
IsHotelAddPrice: 1 orderSubmitItemObj: {},
}, orderSubmitObj: {},
tableHeight: 0, showOrderPreview: false,
beforeCheck: { total: 0,
disabledDate: time => { pickerOptions: {
if (this.msg.StartDate) { disabledDate(time) {
let endTime = new Date(this.getBeforeDate(-3,new Date().Format("yyyy-MM-dd"))); return time.getTime() > Date.now();
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;
}
}
},
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: true,
//酒店温馨提示列表
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,
crmOrderObj: null
};
},
watch: {
dataList:{
handler(val, oldVal){
},
deep: true
}
},
methods: {
goUrl(name, id) {
this.$router.push({
name: name,
query: {
blank: "y",
tab: "备忘录"
}
});
}, },
removeEditor(){ msg: {
localStorage.removeItem('editor') pageIndex: 1,
pageSize: 10,
//酒店选择数组
HotelChooseArray: [],
StartDate: this.getBeforeDate(0, new Date().Format("yyyy-MM-dd")),
EndDate: this.getBeforeDate(-30, this.getBeforeDate(0, new Date().Format("yyyy-MM-dd"))),
//只查询日本
Country: "651",
Province: 0,
City: 0,
OutBranchId: -1,
//星级
Star: 0,
//价格等级
PriceLevel: 0,
//供应商
Supplier: 0,
MaxPrice: 0,
MinPrice: 0,
HotelName: '',
SourceType: 1,
IsHotelAddPrice: 1
}, },
// 编辑购物车 tableHeight: 0,
editor(x){ beforeCheck: {
this.dataList.forEach((item,index) => { disabledDate: time => {
if(item.HotelId==x.HotelId){ if (this.msg.StartDate) {
item.subList.forEach((xs,indexs)=>{ let endTime = new Date(this.getBeforeDate(-3, new Date().Format("yyyy-MM-dd")));
if(xs.DateStr==x.Date){ return time && endTime.getTime() >= time.getTime();
this.rightCarOpen = false } else {
this.showOrderSubmitHandler(item,indexs,1) return false;
}
})
} }
}) }
}, },
// 提交预约成功 afterCheck: {
success(){ disabledDate: time => {
this.close() if (this.msg.StartDate) {
this.getList() let startTime = new Date(this.msg.StartDate);
//可以选择当天
return time && time.getTime() < startTime.getTime() - 1 * 24 * 60 * 60 * 1000;
} else {
return false;
}
}
}, },
// 取消 defaultSelectValue: 0,
close(){ //国家 省市 区
this.HotelLength = localStorage.getItem("HotelLength")?localStorage.getItem("HotelLength"):0 provinceList: [],
this.showOrderPreview = false cityList: [],
district: [],
this.rightCarOpen = false queryMsg: {
this.showHotelDetails = false QStartDate: '',
localStorage.removeItem("editor") QEndDate: '',
pageIndex: 1,
pageSize: 5,
currentPage: 1,
total: 0,
OpType: 0
}, },
// 加入购物车 postMsg: {
showOrderSubmitHandler(row,index,type){ Id: 0,
this.orderSubmitObj = row TipContent: '',
this.orderSubmitItemObj = row.subList[index] OpType: 0,
this.showOrderPreview = true
this.editorType = type?type:0
}, },
com_onresize() { //默认显示弹窗信息
//clientHeight的值由DIV内容的实际高度和CSS中的padding值决定， showHQinfo: true,
var contentsHeight = document.body.clientHeight; //酒店温馨提示列表
var h = contentsHeight - 50 - 180 - 100; HotelTipList: [],
if (h < 110) { //供应商列表
return; SupplierList: [],
HotelList: [],
dataList: [],
isShow: false,
loading: false,
showNotice: false,
pickerBeginDateBefore: {
disabledDate: time => {
let endTime = new Date(this.queryMsg.QStartDate)
return endTime.getTime() < time.getTime()
} }
//设置table的行高
this.tableHeight = h;
}, },
getList() { pickerBeginDateAfter: {
this.loading = true; disabledDate: time => {
if (this.msg.StartDate == null) { let startTime = new Date(this.queryMsg.QEndDate)
this.msg.StartDate = this.getBeforeDate(-20,new Date().Format("yyyy-MM-dd")); return startTime.getTime() >= time.getTime()
}
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 => {}
);
}, },
//获取酒店列表 editorOption: {
GetHotelList() { placeholder: '请输入内容',
this.apipost( modules: {
"hotel_post_GetHasStockHotelList", { toolbar: [
QCountry: "651", ['bold', 'italic', 'underline', 'strike'], // toggled buttons
IsMoreThanZero: 1 ['blockquote', 'code-block', 'align']
}, ]
res => { }
if (res.data.resultCode == 1) {
this.HotelList = res.data.data;
}
},
err => {}
);
}, },
handleCurrentChange(val) { HOTEL_memorandum: false,
this.msg.pageIndex = val; crmOrderObj: null
this.getList(); };
},
watch: {
dataList: {
handler(val, oldVal) {
}, },
getProvinceList(ID, type) { deep: true
//根据省份获取城市 }
let msg = { },
Id: ID methods: {
}; goUrl(name, id) {
if (type == 1) { this.$router.push({
this.msg.Province = 0; name: name,
this.msg.City = 0; query: {
this.provinceList = []; blank: "y",
this.cityList = []; tab: "备忘录"
} else if (type == 2) {
this.msg.City = 0;
this.cityList = [];
} }
this.apipost( });
"dict_post_Destination_GetChildList", },
msg, removeEditor() {
res => { localStorage.removeItem('editor')
if (type == 1) { },
this.provinceList = res.data.data; // 编辑购物车
} else if (type == 2) { editor(x) {
this.cityList = res.data.data; this.dataList.forEach((item, index) => {
if (item.HotelId == x.HotelId) {
item.subList.forEach((xs, indexs) => {
if (xs.DateStr == x.Date) {
this.rightCarOpen = false
this.showOrderSubmitHandler(item, indexs, 1)
} }
}, })
err => {} }
); })
}, },
//Excel下载 // 提交预约成功
DownLoadHotelQuery() { success() {
this.loading = true; this.close()
let qMsg = { this.getList()
queryMsg: this.msg, },
uid: this.getLocalStorage().EmployeeId // 取消
}; close() {
let fileName = "酒店查询统计" + this.$commonUtils.getCurrentDate() + ".xls"; this.HotelLength = localStorage.getItem("HotelLength") ? localStorage.getItem("HotelLength") : 0
this.GetLocalFile("hotel_get_downloadHotelQuery", qMsg, fileName, this.showOrderPreview = false
res => { this.rightCarOpen = false
this.loading = false; this.showHotelDetails = false
}); localStorage.removeItem("editor")
},
}, },
mounted() { // 加入购物车
// crm自动登陆传过来的参数 showOrderSubmitHandler(row, index, type) {
if(this.$route.query.crmOrderObj){ this.orderSubmitObj = row
this.crmOrderObj = JSON.parse(this.$route.query.crmOrderObj) this.orderSubmitItemObj = row.subList[index]
} this.showOrderPreview = true
this.HotelLength = localStorage.getItem("HotelLength")?localStorage.getItem("HotelLength"):0 this.editorType = type ? type : 0
},
let userinfo = this.getLocalStorage(); com_onresize() {
let ActionMenuCode = userinfo.ActionMenuCode; //clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，
if (ActionMenuCode.indexOf("HOTEL_memorandum") != -1) { var contentsHeight = document.body.clientHeight;
this.HOTEL_memorandum = true; var h = contentsHeight - 50 - 180 - 100;
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.getProvinceList("651", 1); this.apipost("dict_post_HotelOffer_GetClientHotelStatics", this.msg,
// this.GetHotelList();//酒店名称下拉 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 => {}
);
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList(); this.getList();
this.com_onresize(); },
window.onresize = () => { getProvinceList(ID, type) {
this.com_onresize(); //根据省份获取城市
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 => {}
);
},
//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() {
// crm自动登陆传过来的参数
if (this.$route.query.crmOrderObj) {
this.crmOrderObj = JSON.parse(this.$route.query.crmOrderObj)
}
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.getProvinceList("651", 1);
// this.GetHotelList();//酒店名称下拉
this.getList();
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> </script>
\ No newline at end of file <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>
src/components/Hotel/singleProduct/ModifyHotelOrder.vue
View file @ 14e9eeb4
<style scoped> <style scoped>
.ModifyHotelOrder-OrderId{ .ModifyHotelOrder-OrderId {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 10px 15px; padding: 10px 15px;
border-radius: 5px; border-radius: 5px;
background: #ffffff; background: #ffffff;
font-size: 12px; font-size: 12px;
margin-top: 15px; margin-top: 15px;
} }
.ModifyHotelOrder-OrderId>div{
display: flex; .ModifyHotelOrder-OrderId>div {
align-items: center; display: flex;
} align-items: center;
.ModifyHotelOrder-OrderId>div:first-child{ }
color: #9E9E9E;
} .ModifyHotelOrder-OrderId>div:first-child {
.ModifyHotelOrder-OrderId>div:nth-child(2){ color: #9E9E9E;
color: #E76A42; }
}
.ModifyHotelOrder-OrderId>div:nth-child(2)>span{ .ModifyHotelOrder-OrderId>div:nth-child(2) {
font-weight: bold; color: #E76A42;
color: #009EF7; }
}
.ModifyHotelOrder-OrderId>div:nth-child(2)>span:first-child{ .ModifyHotelOrder-OrderId>div:nth-child(2)>span {
color: #E65152; font-weight: bold;
} color: #009EF7;
.ModifyHotelOrder-OrderId>div:nth-child(3){ }
color: #F25971;
} .ModifyHotelOrder-OrderId>div:nth-child(2)>span:first-child {
.ModifyHotelOrder-OrderId>div:nth-child(3)>span:first-child{ color: #E65152;
font-size: 16px; }
}
.ModifyHotelOrder-OrderId>div:nth-child(3)>b{ .ModifyHotelOrder-OrderId>div:nth-child(3) {
font-size: 20px; color: #F25971;
} }
.ModifyHotelOrder-OrderId>div:last-child{
display: flex; .ModifyHotelOrder-OrderId>div:nth-child(3)>span:first-child {
font-size: 16px; font-size: 16px;
} }
.ModifyHotelOrder-OrderInfor{
padding: 10px 15px; .ModifyHotelOrder-OrderId>div:nth-child(3)>b {
border-radius: 5px; font-size: 20px;
background: #ffffff; }
margin-top: 15px;
} .ModifyHotelOrder-OrderId>div:last-child {
.ModifyHotelOrder-OrderInfor p{ display: flex;
color: #C1C1C1; font-size: 16px;
font-size: 14px; }
}
.ModifyHotelOrder-content{ .ModifyHotelOrder-OrderInfor {
display: flex; padding: 10px 15px;
align-items: flex-start; border-radius: 5px;
flex-wrap: wrap; background: #ffffff;
margin-top: 15px; margin-top: 15px;
} }
.content-box{
width: 320px; .ModifyHotelOrder-OrderInfor p {
display: flex; color: #C1C1C1;
flex-direction: column; font-size: 14px;
background: #ffffff; }
border-radius: 5px;
margin: 0 10px 10px 0; .ModifyHotelOrder-content {
overflow: hidden; display: flex;
} align-items: flex-start;
.content-header{ flex-wrap: wrap;
display: flex; margin-top: 15px;
justify-content: space-between; }
align-items: center;
padding: 15px 10px; .content-box {
} width: 320px;
.content-header span{ display: flex;
font-size: 17px; flex-direction: column;
} background: #ffffff;
.content-header i{ border-radius: 5px;
color: #009EF7; margin: 0 10px 10px 0;
cursor: pointer; overflow: hidden;
} }
.content-header i:last-child{
color: #F1416C; .content-header {
margin-left: 15px; display: flex;
} justify-content: space-between;
.content-Car{ align-items: center;
background: #ECEFF1; padding: 15px 10px;
border-radius: 5px; }
padding: 10px 5px;
margin: 0 10px; .content-header span {
margin-bottom: 10px; font-size: 17px;
font-size: 12px; }
}
.content-Car-title{ .content-header i {
font-size: 14px; color: #009EF7;
font-weight: 400; cursor: pointer;
color: #009EF7; }
padding: 0 5px 5px 5px;
display: flex; .content-header i:last-child {
justify-content: space-between; color: #F1416C;
border-bottom: 1px dashed rgba(96, 125, 139, 0.2); margin-left: 15px;
} }
.content-Car-title span{
width: 80%; .content-Car {
overflow: hidden; background: #ECEFF1;
white-space: nowrap; border-radius: 5px;
text-overflow: ellipsis; padding: 10px 5px;
} margin: 0 10px;
.content-Car-title i{ margin-bottom: 10px;
color: #F1416C; font-size: 12px;
cursor: pointer; }
display: none;
} .content-Car-title {
.content-Car-title:hover i{ font-size: 14px;
display: block; font-weight: 400;
} color: #009EF7;
.content-Car-num{ padding: 0 5px 5px 5px;
padding: 7px 5px; display: flex;
align-items: center; justify-content: space-between;
} border-bottom: 1px dashed rgba(96, 125, 139, 0.2);
.content-Car-num>div:last-child .num-roomtype{ }
padding: 0;
} .content-Car-title span {
.num-roomtype{ width: 80%;
padding: 0 0 15px 0; overflow: hidden;
color: #181C32; white-space: nowrap;
} text-overflow: ellipsis;
.num-roomtype span{ }
color: #6F8A96;
display: block; .content-Car-title i {
padding: 3px 0 0 0; color: #F1416C;
} cursor: pointer;
.num-roomnum{ display: none;
color: #9E9E9E; }
}
.num-roomnum span{ .content-Car-title:hover i {
color: #F5831E; display: block;
font-weight: bold; }
}
.noroomtype{ .content-Car-num {
padding: 10px 5px; padding: 7px 5px;
color: #6F8A96; align-items: center;
font-size: 12px; }
}
.content-Car-shui{ .content-Car-num>div:last-child .num-roomtype {
display: flex; padding: 0;
justify-content: space-between; }
align-items: center;
font-size: 14px; .num-roomtype {
color: #6F8A96; padding: 0 0 15px 0;
border-top: 1px dashed rgba(96, 125, 139, 0.2); color: #181C32;
border-bottom: 1px dashed rgba(96, 125, 139, 0.2); }
padding: 7px 0;
margin: 0 5px; .num-roomtype span {
} color: #6F8A96;
.content-Car-heji{ display: block;
padding: 7px 5px 0 0; padding: 3px 0 0 0;
display: flex; }
justify-content: end;
font-size: 14px; .num-roomnum {
color: #1CA8F6; color: #9E9E9E;
} }
.content-Car-heji span span{
font-size: 15px; .num-roomnum span {
font-weight: bold; color: #F5831E;
} font-weight: bold;
.content-picker-text{ }
height: 192px;
display: flex; .noroomtype {
flex-direction: column; padding: 10px 5px;
justify-content: center; color: #6F8A96;
align-items: center; font-size: 12px;
font-size: 14px; }
}
.content-picker-text>div:first-child span{ .content-Car-shui {
border: 1px solid #47B6F5; display: flex;
padding: 5px 15px; justify-content: space-between;
border-radius: 3px; align-items: center;
cursor: pointer; font-size: 14px;
color: #47B6F5; color: #6F8A96;
} border-top: 1px dashed rgba(96, 125, 139, 0.2);
.content-picker-text>div:last-child{ border-bottom: 1px dashed rgba(96, 125, 139, 0.2);
margin-top: 20px; padding: 7px 0;
} margin: 0 5px;
.content-picker-text>div:last-child span{ }
color: #A5B5BE;
} .content-Car-heji {
/deep/.content-Car .el-input-number .el-input__inner{ padding: 7px 5px 0 0;
height: 30px; display: flex;
} justify-content: end;
/deep/.content-Car .el-input-number{ font-size: 14px;
width: 100%; color: #1CA8F6;
line-height: 30px; }
}
/deep/.content-Car .el-input-number__increase{ .content-Car-heji span span {
width: 25px !important; font-size: 15px;
height: 28px !important; font-weight: bold;
} }
/deep/.content-Car .el-input-number__decrease{
width: 25px !important; .content-picker-text {
height: 28px !important; height: 192px;
} display: flex;
/deep/.content-Car .el-input-number .el-input__inner{ flex-direction: column;
padding-left: 20px; justify-content: center;
padding-right: 20px; align-items: center;
} font-size: 14px;
}
.content-picker-text>div:first-child span {
border: 1px solid #47B6F5;
padding: 5px 15px;
border-radius: 3px;
cursor: pointer;
color: #47B6F5;
}
.content-picker-text>div:last-child {
margin-top: 20px;
}
.content-picker-text>div:last-child span {
color: #A5B5BE;
}
/deep/.content-Car .el-input-number .el-input__inner {
height: 30px;
}
/deep/.content-Car .el-input-number {
width: 100%;
line-height: 30px;
}
/deep/.content-Car .el-input-number__increase {
width: 25px !important;
height: 28px !important;
}
/deep/.content-Car .el-input-number__decrease {
width: 25px !important;
height: 28px !important;
}
/deep/.content-Car .el-input-number .el-input__inner {
padding-left: 20px;
padding-right: 20px;
}
</style> </style>
<template> <template>
<div> <div>
<div class="ModifyHotelOrder-OrderId" v-if="order"> <div class="ModifyHotelOrder-OrderId" v-if="order">
<div> <div>
订单编号 {{ order.OrderNo }} 订单编号 {{ order.OrderNo }}
</div> </div>
<div>本次行程<span v-if="order.DetailList">{{ order.DetailList.length }}</span>天，入住<span>{{ order.HotelCount }}</span>个酒店</div> <div>本次行程<span
<div>订单总金额：<span><!-- ¥ -->円</span><b v-if="order.Money">{{ moneyFormat(order.Money) }}</b></div> v-if="order.DetailList">{{ order.DetailList.length }}</span>天，入住<span>{{ order.HotelCount }}</span>个酒店</div>
<div> <div>订单总金额：<span>
<button class="hollowFixedBtn" @click="cancelOrder">取消订单</button> <!-- ¥ -->円</span><b v-if="order.Money">{{ moneyFormat(order.Money) }}</b></div>
<button class="normalBtn" @click="saveOrderHandler">保存订单</button> <div>
</div> <button class="hollowFixedBtn" @click="cancelOrder">取消订单</button>
<button class="normalBtn" @click="saveOrderHandler">保存订单</button>
</div> </div>
<div class="ModifyHotelOrder-OrderInfor"> </div>
<p>订单信息</p> <div class="ModifyHotelOrder-OrderInfor">
<div> <p>订单信息</p>
<el-form label-width="60px" :model="order" :rules="rules" ref="order"> <div>
<el-row :gutter="20"> <el-form label-width="60px" :model="order" :rules="rules" ref="order">
<el-col :span="4"> <el-row :gutter="20">
<el-form-item label="类型" prop="OrderType"> <el-col :span="4">
<el-select v-model="order.OrderType"> <el-form-item label="类型" prop="OrderType">
<el-option v-for="item in cacheHotels" :key="item.ID" :label="item.Name" :value="item.ID"></el-option> <el-select v-model="order.OrderType">
</el-select> <el-option v-for="item in cacheHotels" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
</el-form-item> </el-select>
</el-form-item>
</el-col>
<template v-if="order.OrderType==1">
<el-col :span="4">
<el-form-item label="姓名" prop="ContactName">
<el-input v-model="order.ContactName"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="电话" prop="ContactNumber">
<el-input v-model="order.ContactNumber"></el-input>
</el-form-item>
</el-col>
</template>
<el-col :span="4" v-else>
<el-form-item label="团号" prop="TCNum">
<el-input v-model="order.TCNum"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="">
<el-input placeholder="请输入备注" v-model="order.Remark"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
<div class="ModifyHotelOrder-content">
<div style="display: flex;flex-wrap: wrap;align-items: flex-start;">
<div class="content-box" v-for="(x, xi) in order.DetailList">
<div class="content-header">
<span>{{ x.key }}</span>
<div>
<i class="el-icon-plus" @click="chosenNewHotel(x.key)"></i>
<i class="el-icon-delete-solid" @click="removeHotelHandler(xi, -1)"></i>
</div>
</div>
<div>
<div class="content-Car" v-for="(y, yi) in x.data">
<p class="content-Car-title">
<span>{{ y.HotelName }}</span>
<i class="el-icon-delete-solid" @click="removeHotelHandler(xi, yi)"></i>
</p>
<div class="content-Car-num">
<div v-for="(z, i) in y.RoomList">
<el-row :gutter="20" style="display: flex;align-items: center;justify-content: space-between;">
<el-col :span="8">
<div class="num-roomtype">
<p>{{ z.RoomInfo.TypeName }}</p>
<span>{{ moneyFormat(z.Unit_Price) }}/人</span>
</div>
</el-col> </el-col>
<template v-if="order.OrderType==1"> <el-col :span="7">
<el-col :span="4"> <p class="num-roomnum">预计<span>{{ z.Number }}</span>间房</p>
<el-form-item label="姓名" prop="ContactName">
<el-input v-model="order.ContactName"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="电话" prop="ContactNumber">
<el-input v-model="order.ContactNumber"></el-input>
</el-form-item>
</el-col>
</template>
<el-col :span="4" v-else>
<el-form-item label="团号" prop="TCNum">
<el-input v-model="order.TCNum"></el-input>
</el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="9">
<el-form-item label="备注" prop=""> <el-input-number v-model="z.PeopleNumber" :min="0" :step="1" step-strictly @change="calcPeople">
<el-input placeholder="请输入备注" v-model="order.Remark"></el-input> </el-input-number>
</el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form>
</div>
</div>
<div class="ModifyHotelOrder-content">
<div style="display: flex;flex-wrap: wrap;align-items: flex-start;">
<div class="content-box" v-for="(x, xi) in order.DetailList">
<div class="content-header">
<span>{{ x.key }}</span>
<div>
<i class="el-icon-plus" @click="chosenNewHotel(x.key)"></i>
<i class="el-icon-delete-solid" @click="removeHotelHandler(xi, -1)"></i>
</div> </div>
</div>
<div class="noroomtype">
<template v-if="!y.HaveOtherRoom">
无其他可用房型
</template>
<template v-else>
使用其他房型
</template>
</div>
<div class="content-Car-shui">
<span>城市税： {{ moneyFormat(y.TaxesPrice) }}/人</span>
<span>入汤税： {{ moneyFormat(y.PriceInTangTax) }}/人</span>
</div>
<div class="content-Car-heji">
<span>合计：<span>
<!-- ¥ -->円{{ moneyFormat(y.HotelMoeny) }}</span></span>
</div>
</div> </div>
<div> </div>
<div class="content-Car" v-for="(y, yi) in x.data">
<p class="content-Car-title">
<span>{{ y.HotelName }}</span>
<i class="el-icon-delete-solid" @click="removeHotelHandler(xi, yi)"></i>
</p>
<div class="content-Car-num">
<div v-for="(z, i) in y.RoomList">
<el-row :gutter="20" style="display: flex;align-items: center;justify-content: space-between;">
<el-col :span="8">
<div class="num-roomtype">
<p>{{ z.RoomInfo.TypeName }}</p>
<span>{{ moneyFormat(z.Unit_Price) }}/人</span>
</div>
</el-col>
<el-col :span="7">
<p class="num-roomnum">预计<span>{{ z.Number }}</span>间房</p>
</el-col>
<el-col :span="9">
<el-input-number v-model="z.PeopleNumber" :min="0" :step="1" step-strictly @change="calcPeople"></el-input-number>
</el-col>
</el-row>
</div>
</div>
<div class="noroomtype">
<template v-if="!y.HaveOtherRoom">
无其他可用房型
</template>
<template v-else>
使用其他房型
</template>
</div>
<div class="content-Car-shui">
<span>城市税： {{ moneyFormat(y.TaxesPrice) }}/人</span>
<span>入汤税： {{ moneyFormat(y.PriceInTangTax) }}/人</span>
</div>
<div class="content-Car-heji">
<span>合计：<span><!-- ¥ -->円{{ moneyFormat(y.HotelMoeny) }}</span></span>
</div>
</div>
</div>
</div>
</div> </div>
</div>
<div class="content-box" style="margin: 0;">
<div class="content-header" style="padding: 9px 10px;">
<span>新日期预定</span>
<div>
<el-date-picker class="w150" v-model="newDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期" :picker-options="beforeCheck"></el-date-picker>
</div>
</div>
<div class="content-Car content-picker-text">
<div>
<span @click="chosenNewHotel('')">选择酒店</span>
</div>
<div v-show="!newDate">
<span>*<span>请先选择需要预定的日期</span></span>
</div>
</div>
</div>
<div class="content-box" style="margin: 0;">
<div class="content-header" style="padding: 9px 10px;">
<span>新日期预定</span>
<div>
<el-date-picker class="w150" v-model="newDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期"
:picker-options="beforeCheck"></el-date-picker>
</div>
</div>
<div class="content-Car content-picker-text">
<div>
<span @click="chosenNewHotel('')">选择酒店</span>
</div>
<div v-show="!newDate">
<span>*<span>请先选择需要预定的日期</span></span>
</div>
</div>
</div> </div>
<el-dialog v-show="showChosenHotel" custom-class="w800" title="酒店检索" :visible.sync="showChosenHotel" center>
<ChosenHotel :newDate="newDate" @finish="finishHanler"></ChosenHotel> </div>
</el-dialog> <el-dialog v-show="showChosenHotel" custom-class="w800" title="酒店检索" :visible.sync="showChosenHotel" center>
<el-dialog <ChosenHotel :newDate="newDate" @finish="finishHanler"></ChosenHotel>
custom-class="w600" </el-dialog>
title="取消订单" <el-dialog custom-class="w600" title="取消订单" :visible.sync="cancelOrderDialog">
:visible.sync="cancelOrderDialog"
>
<div style="padding-bottom:20px"> <div style="padding-bottom:20px">
<el-input <el-input type="textarea" autofocus rows="5" placeholder="请填写取消订单的缘由" clear="w300" v-model="cancelRemark">
type="textarea" </el-input>
autofocus
rows="5"
placeholder="请填写取消订单的缘由"
clear="w300"
v-model="cancelRemark"
></el-input>
<el-row :gutter="20" style="margin-top: 20px;"> <el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="24" style="text-align: right;"> <el-col :span="24" style="text-align: right;">
<input <input type="button" class="normalBtn" value="取消订单" @click="cancelOrderHandler" />
type="button" <input type="button" class="hollowFixedBtn" value="关闭" @click="cancelOrderDialog = false" />
class="normalBtn"
value="取消订单"
@click="cancelOrderHandler"
/>
<input
type="button"
class="hollowFixedBtn"
value="关闭"
@click="cancelOrderDialog = false"
/>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -369,462 +395,472 @@ ...@@ -369,462 +395,472 @@
<script> <script>
import ChosenHotel from './components/ChosenHotel.vue'; import ChosenHotel from './components/ChosenHotel.vue';
export default { export default {
components: { ChosenHotel }, components: {
ChosenHotel
},
data() { data() {
return { return {
newDate: this.getBeforeDate(-20,new Date().Format("yyyy-MM-dd")), newDate: this.getBeforeDate(-20, new Date().Format("yyyy-MM-dd")),
orderId: 0, orderId: 0,
order: {},//下单信息 order: {}, //下单信息
loading: false, loading: false,
status: this.getHotelOrderStatus(),//状态 status: this.getHotelOrderStatus(), //状态
rooms: this.getHotelRoomType(),//房型 rooms: this.getHotelRoomType(), //房型
limitGuestNum: [2, 1, 1, 3, 1], limitGuestNum: [2, 1, 1, 3, 1],
showChosenHotel: false, showChosenHotel: false,
tempHotels: { tempHotels: {
key: '', key: '',
data: [] data: []
}, },
cacheHotels: [ cacheHotels: [{
{ Name: '散客', ID: 1 }, Name: '散客',
{ Name: '团队', ID: 2 } ID: 1
},
{
Name: '团队',
ID: 2
}
], ],
rules:{ rules: {
OrderType: [{ OrderType: [{
required: true, required: true,
message: '请选择类型', message: '请选择类型',
trigger: 'change' trigger: 'change'
}], }],
ContactName: [{ ContactName: [{
required: true, required: true,
message: '请输入散客姓名', message: '请输入散客姓名',
trigger: 'blur' trigger: 'blur'
}], }],
ContactNumber: [ ContactNumber: [{
{ required: true, message: "请输入联系电话", trigger: "blur" }, required: true,
{ message: "请输入联系电话",
pattern: this.$commonUtils.Regex.el_ISphone, trigger: "blur"
message: "请输入正确的电话" },
} {
], pattern: this.$commonUtils.Regex.el_ISphone,
TCNum: [{ message: "请输入正确的电话"
required: true, }
message: '请输入团号', ],
trigger: 'blur' TCNum: [{
}], required: true,
message: '请输入团号',
trigger: 'blur'
}],
}, },
beforeCheck: { beforeCheck: {
disabledDate: time => { disabledDate: time => {
let endTime = new Date(this.getBeforeDate(-19,new Date().Format("yyyy-MM-dd"))); let endTime = new Date(this.getBeforeDate(-19, new Date().Format("yyyy-MM-dd")));
return time && endTime.getTime() >= time.getTime(); return time && endTime.getTime() >= time.getTime();
} }
}, },
pagesTitle:'', pagesTitle: '',
cancelRemark: '', cancelRemark: '',
cancelOrderDialog: false cancelOrderDialog: false
}; };
}, },
methods: { methods: {
// 确定下单 // 确定下单
submit() { submit() {
this.$refs['order'].validate((valid) => { this.$refs['order'].validate((valid) => {
if (valid) { if (valid) {
this.saveOrderHandler() this.saveOrderHandler()
} else { } else {
return false; return false;
} }
}); });
}, },
// 保存订单 // 保存订单
saveOrderHandler(){ saveOrderHandler() {
if(this.loading) return if (this.loading) return
let detailList=[] let detailList = []
this.order.DetailList.forEach((x)=>{ this.order.DetailList.forEach((x) => {
detailList.push(...x.data) detailList.push(...x.data)
}) })
detailList.forEach((x)=>{ detailList.forEach((x) => {
x.RoomList = x.RoomList.filter((y)=>y.Number>0) x.RoomList = x.RoomList.filter((y) => y.Number > 0)
}) })
detailList = detailList.filter((x)=>x.RoomList.length>0) detailList = detailList.filter((x) => x.RoomList.length > 0)
let parameter = JSON.parse(JSON.stringify(this.order)) let parameter = JSON.parse(JSON.stringify(this.order))
parameter.DetailList = detailList parameter.DetailList = detailList
this.loading = true this.loading = true
this.apipost("dict_post_SetSaleCustomerOrder", parameter, this.apipost("dict_post_SetSaleCustomerOrder", parameter,
res => { res => {
this.loading = false; this.loading = false;
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.Success('保存成功'); this.Success('保存成功');
let path = '' let path = ''
if(this.pagesTitle=='销售'){ if (this.pagesTitle == '销售') {
path = 'singleProductHotelOrder' path = 'singleProductHotelOrder'
}if(this.pagesTitle=='OP'){ }
path = 'singleProductHotelOrderOP' if (this.pagesTitle == 'OP') {
} path = 'singleProductHotelOrderOP'
if(!this.pagesTitle) return }
this.$router.push({ if (!this.pagesTitle) return
name: path this.$router.push({
}); name: path
} else { });
this.Error('下单失败')
}
},
err => {
this.Error(err.message)
this.loading = false
}
);
},
removeHotelHandler(x, y) {
let cando = false
if (y > -1) {
cando = this.order.DetailList.length > 1 || this.order.DetailList[0].data.length > 1
} else {
cando = this.order.DetailList.length > 1
}
if (cando) {
this.deleteHotelsHandler(x, y)
} else { } else {
this.cancelOrder() this.Error('下单失败')
}
},
// OP取消订单
cancelOrderHandler() {
if (this.loading) return;
if (this.cancelRemark == "") {
this.Error("请填写取消订单的缘由");
return;
}
this.loading = true
let that = this
that.$confirm(`是否确定取消订单？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.apipost(
"dict_post_CancelAdminCustomerOrder",
{
OrderId: this.orderId,
CancelRemark: this.cancelRemark
},res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message);
let path = 'singleProductHotelOrderOP'
if(!this.pagesTitle) return
this.$router.push({
name: path
});
} else {
this.Error(res.data.message);
}
this.loading = false;
},
err => {
this.loading = false;
});
}).catch(()=>{
this.loading = false
})
},
// 取消订单
cancelOrder() {
if(this.pagesTitle!='销售'){
this.cancelOrderDialog = true
}else{
if (this.loading) return;
this.loading = true
let that = this
that.$confirm(`是否确定取消订单？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.apipost("dict_post_CancelSaleCustomerOrder", {
OrderId: this.orderId
},res => {
this.loading= false
if (res.data.resultCode == 1) {
this.Success(res.data.message);
let path = 'singleProductHotelOrder'
if(!this.pagesTitle) return
this.$router.push({
name: path
});
} else {
this.Error(res.data.message);
}
}).catch(err=>{
this.Error(err.message)
this.loading= false
})
}).catch(()=>{
this.loading = false
})
} }
},
}, err => {
//删除酒店 this.Error(err.message)
deleteHotelsHandler(x, y) { this.loading = false
let that = this }
that.$confirm(`是否确定删除${this.order.DetailList[x].key}${y > -1 ? this.order.DetailList[x].data[y].HotelName : ''}？`, '提示', { );
confirmButtonText: '确定', },
cancelButtonText: '取消', removeHotelHandler(x, y) {
type: 'warning' let cando = false
}).then(() => { if (y > -1) {
if (y > -1) { cando = this.order.DetailList.length > 1 || this.order.DetailList[0].data.length > 1
this.order.DetailList[x].data.splice(y, 1) } else {
if (this.order.DetailList[x].data.length == 0) { cando = this.order.DetailList.length > 1
this.order.DetailList.splice(x, 1) }
}
} else {
this.order.DetailList.splice(x, 1)
}
this.cancelHotelCount()
}).catch(() => {
if (cando) {
this.deleteHotelsHandler(x, y)
} else {
this.cancelOrder()
}
},
// OP取消订单
cancelOrderHandler() {
if (this.loading) return;
if (this.cancelRemark == "") {
this.Error("请填写取消订单的缘由");
return;
}
this.loading = true
let that = this
that.$confirm(`是否确定取消订单？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.apipost(
"dict_post_CancelAdminCustomerOrder", {
OrderId: this.orderId,
CancelRemark: this.cancelRemark
}, res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message);
let path = 'singleProductHotelOrderOP'
if (!this.pagesTitle) return
this.$router.push({
name: path
});
} else {
this.Error(res.data.message);
}
this.loading = false;
},
err => {
this.loading = false;
}); });
},
}).catch(() => {
finishHanler(h) { this.loading = false
this.showChosenHotel = false })
let hp = h.subList[0].PriceList[0] },
//#region 組裝對象 // 取消订单
let hotel = { cancelOrder() {
ContractUrl: null, if (this.pagesTitle != '销售') {
CurrencyId: hp.CurrencyId, this.cancelOrderDialog = true
CurrencyName: '日元', } else {
CustomerPayType: 0, if (this.loading) return;
Date: h.subList[0].DateStr.replace(/-/g, '/'), this.loading = true
Destription: null, let that = this
HaveOtherRoom: false, that.$confirm(`是否确定取消订单？`, '提示', {
HotelId: h.HotelId, confirmButtonText: '确定',
HotelMoeny: 0.0, cancelButtonText: '取消',
HotelName: h.HotelName, type: 'warning'
HotelStatus: 1, }).then(() => {
HotelStatusName: '暂定', this.apipost("dict_post_CancelSaleCustomerOrder", {
Id: 0, OrderId: this.orderId
ImageList: h.ImageList, }, res => {
PeopleNum: 0, this.loading = false
PriceInTangTax: hp.PriceInTangTax, if (res.data.resultCode == 1) {
ReserveRoomNo: null, this.Success(res.data.message);
RoomList: [], let path = 'singleProductHotelOrder'
TaxesPrice: hp.TaxesPrice if (!this.pagesTitle) return
} this.$router.push({
this.rooms.forEach((x) => { name: path
if (hp[x.Field? x.Field:''] > 0) { });
hotel.RoomList.push({ } else {
Destription: '', this.Error(res.data.message);
IsSelf: true, }
Money: 0, }).catch(err => {
PeopleNumber: 0, this.Error(err.message)
Number: 0, this.loading = false
RoomInfo: x,
RoomType: x.TypeId,
RoomName: x.TypeName,
Unit_Price: hp[x.Field ? x.Field:'']
})
}
}) })
//#endregion }).catch(() => {
let i = this.order.DetailList.findIndex((x) => x.key == hotel.Date) this.loading = false
if (i == -1) { })
this.order.DetailList.push({ }
key: hotel.Date, },
data: [hotel] //删除酒店
}) deleteHotelsHandler(x, y) {
this.order.DetailList.sort((x, y) => { let that = this
return new Date(x.key).getTime() - new Date(y.key).getTime() that.$confirm(
}) `是否确定删除${this.order.DetailList[x].key}${y > -1 ? this.order.DetailList[x].data[y].HotelName : ''}？`, '提示', {
} else { confirmButtonText: '确定',
let y = this.order.DetailList[i].data.findIndex((x) => x.HotelId == hotel.HotelId) cancelButtonText: '取消',
if (y == -1) this.order.DetailList[i].data.push(hotel) type: 'warning'
}).then(() => {
if (y > -1) {
this.order.DetailList[x].data.splice(y, 1)
if (this.order.DetailList[x].data.length == 0) {
this.order.DetailList.splice(x, 1)
} }
} else {
this.order.DetailList.splice(x, 1)
}
this.cancelHotelCount()
}).catch(() => {
if (hotel.Date == this.tempHotels.key) { });
this.tempHotels.key = '' },
this.tempHotels.data = []
} finishHanler(h) {
this.cancelHotelCount() this.showChosenHotel = false
}, let hp = h.subList[0].PriceList[0]
chosenNewHotel(key) { //#region 組裝對象
if(key){ let hotel = {
this.newDate = key ContractUrl: null,
} CurrencyId: hp.CurrencyId,
if(!this.newDate) return this.Error('请先选择日期') CurrencyName: '日元',
this.showChosenHotel = true CustomerPayType: 0,
}, Date: h.subList[0].DateStr.replace(/-/g, '/'),
// 计算房间 Destription: null,
calcPeople(hotel) { HaveOtherRoom: false,
this.order.DetailList.forEach(x=>{ HotelId: h.HotelId,
x.data.forEach(y=>{ HotelMoeny: 0.0,
y.RoomList.forEach(z=>{ HotelName: h.HotelName,
let t = z HotelStatus: 1,
t.Number = Math.ceil(t.PeopleNumber / this.limitGuestNum[t.RoomType - 1]) HotelStatusName: '暂定',
t.Money = t.PeopleNumber * t.Number Id: 0,
this.calcMoney(y) ImageList: h.ImageList,
}) PeopleNum: 0,
}) PriceInTangTax: hp.PriceInTangTax,
}) ReserveRoomNo: null,
RoomList: [],
}, TaxesPrice: hp.TaxesPrice
calcMoney(hotel) { }
let money = 0.0 this.rooms.forEach((x) => {
let peoples = 0 if (hp[x.Field ? x.Field : ''] > 0) {
hotel.RoomList.forEach((x) => { hotel.RoomList.push({
money += x.Unit_Price * x.PeopleNumber Destription: '',
peoples += x.PeopleNumber IsSelf: true,
Money: 0,
PeopleNumber: 0,
Number: 0,
RoomInfo: x,
RoomType: x.TypeId,
RoomName: x.TypeName,
Unit_Price: hp[x.Field ? x.Field : '']
}) })
money += peoples * (hotel.TaxesPrice + hotel.PriceInTangTax) }
hotel.PeopleNum = peoples })
hotel.HotelMoeny = money //#endregion
this.cancelHotelCount() let i = this.order.DetailList.findIndex((x) => x.key == hotel.Date)
}, if (i == -1) {
cancelHotelCount() { this.order.DetailList.push({
this.order.HotelCount = 0 key: hotel.Date,
this.order.Money = 0 data: [hotel]
this.order.DetailList.forEach((x) => { })
this.order.HotelCount += x.data.length this.order.DetailList.sort((x, y) => {
x.data.forEach((y)=>{ return new Date(x.key).getTime() - new Date(y.key).getTime()
this.order.Money+=y.HotelMoeny })
}) } else {
let y = this.order.DetailList[i].data.findIndex((x) => x.HotelId == hotel.HotelId)
if (y == -1) this.order.DetailList[i].data.push(hotel)
}
if (hotel.Date == this.tempHotels.key) {
this.tempHotels.key = ''
this.tempHotels.data = []
}
this.cancelHotelCount()
},
chosenNewHotel(key) {
if (key) {
this.newDate = key
}
if (!this.newDate) return this.Error('请先选择日期')
this.showChosenHotel = true
},
// 计算房间
calcPeople(hotel) {
this.order.DetailList.forEach(x => {
x.data.forEach(y => {
y.RoomList.forEach(z => {
let t = z
t.Number = Math.ceil(t.PeopleNumber / this.limitGuestNum[t.RoomType - 1])
t.Money = t.PeopleNumber * t.Number
this.calcMoney(y)
}) })
}, })
initOrderDetails() { })
this.apipost("dict_post_GetMySaleCustomerOrderInfo", {
OrderId: this.orderId
},
r => {
this.loading = false;
if (r.data.resultCode == 1) {
this.order = r.data.data
this.order.typeInfo = this.status.find(y => y.StatusId == this.order.OrderStatus)? this.status[1] : {}
this.order.DetailList.forEach((y) => {
let PeopleNum = 0
y.RoomList.forEach((z) => {
z.RoomInfo = this.rooms.find(r => r.TypeId == z.RoomType) ? this.rooms[0] : {}
PeopleNum += z.PeopleNumber
z.IsSelf = true
})
y.PeopleNum = PeopleNum
// this.loadOtherRoom(y)
})
this.order.HotelCount = this.order.DetailList.length
this.order.DetailList = this.groupBy(this.order.DetailList, (x) => { },
return x.Date calcMoney(hotel) {
let money = 0.0
let peoples = 0
hotel.RoomList.forEach((x) => {
money += x.Unit_Price * x.PeopleNumber
peoples += x.PeopleNumber
})
money += peoples * (hotel.TaxesPrice + hotel.PriceInTangTax)
hotel.PeopleNum = peoples
hotel.HotelMoeny = money
this.cancelHotelCount()
},
cancelHotelCount() {
this.order.HotelCount = 0
this.order.Money = 0
this.order.DetailList.forEach((x) => {
this.order.HotelCount += x.data.length
x.data.forEach((y) => {
this.order.Money += y.HotelMoeny
})
})
},
initOrderDetails() {
this.apipost("dict_post_GetMySaleCustomerOrderInfo", {
OrderId: this.orderId
},
r => {
this.loading = false;
if (r.data.resultCode == 1) {
this.order = r.data.data
this.order.typeInfo = this.status.find(y => y.StatusId == this.order.OrderStatus) ? this.status[1] : {}
this.order.DetailList.forEach((y) => {
let PeopleNum = 0
y.RoomList.forEach((z) => {
z.RoomInfo = this.rooms.find(r => r.TypeId == z.RoomType) ? this.rooms[0] : {}
PeopleNum += z.PeopleNumber
z.IsSelf = true
}) })
y.PeopleNum = PeopleNum
} else { // this.loadOtherRoom(y)
this.Error(r.data.message); })
} this.order.HotelCount = this.order.DetailList.length
},
err => {} this.order.DetailList = this.groupBy(this.order.DetailList, (x) => {
); return x.Date
}, })
groupBy(array, f){
const groups= {} } else {
array.forEach((item) => { this.Error(r.data.message);
const group = JSON.stringify(f(item));
groups[group] = groups[group] || [];
groups[group].push(item);
});
return Object.keys(groups).map((group) => {
return {
key:group.replace(/\"/g,""),
data:groups[group]
};
});
},
loadOtherRoom(hotel) {
let searchObj = {
HotelChooseArray: [hotel.HotelId],
StartDate: hotel.Date,
EndDate: hotel.Date,
Country: '651',
Province: 0,
City: 0,
OutBranchId: -1,
Star: 0,
PriceLevel: 0,
Supplier: 0,
MaxPrice: 0,
MinPrice: 0,
pageIndex: 1,
pageSize: 10,
pageCount: 0
} }
this.apipost("dict_post_HotelOffer_GetClientHotelStatics", searchObj, },
r => { err => {}
if (r.data.resultCode == 1) { );
if (r.data.data.pageData.length > 0) { },
let temp = r.data.data.pageData[0].subList[0].PriceList[0] groupBy(array, f) {
this.rooms.forEach((x) => { const groups = {}
if (hotel.RoomList.findIndex((y) => y.RoomType == x.TypeId) == -1 && temp[x.Field ? x.Field:''] > 0) { array.forEach((item) => {
hotel.RoomList.push({ const group = JSON.stringify(f(item));
Description: '', groups[group] = groups[group] || [];
Money: 0, groups[group].push(item);
PeopleNumber: 0, });
RoomType: x.TypeId, return Object.keys(groups).map((group) => {
RoomTypeName: x.TypeName, return {
Unit_Price: temp[x.Field ? x.Field:''], key: group.replace(/\"/g, ""),
RoomInfo: x, data: groups[group]
IsSelf: false };
}) });
hotel.HaveOtherRoom = true },
} loadOtherRoom(hotel) {
}) let searchObj = {
} HotelChooseArray: [hotel.HotelId],
} else { StartDate: hotel.Date,
this.Error(r.data.message); EndDate: hotel.Date,
} Country: '651',
}) Province: 0,
}, City: 0,
// 房型 OutBranchId: -1,
getHotelRoomType(getNormal){ Star: 0,
let rooms = [] PriceLevel: 0,
if(getNormal){ Supplier: 0,
rooms.push({ MaxPrice: 0,
TypeId:0, MinPrice: 0,
TypeName:'全部房型' pageIndex: 1,
pageSize: 10,
pageCount: 0
}
this.apipost("dict_post_HotelOffer_GetClientHotelStatics", searchObj,
r => {
if (r.data.resultCode == 1) {
if (r.data.data.pageData.length > 0) {
let temp = r.data.data.pageData[0].subList[0].PriceList[0]
this.rooms.forEach((x) => {
if (hotel.RoomList.findIndex((y) => y.RoomType == x.TypeId) == -1 && temp[x.Field ? x.Field :
''] > 0) {
hotel.RoomList.push({
Description: '',
Money: 0,
PeopleNumber: 0,
RoomType: x.TypeId,
RoomTypeName: x.TypeName,
Unit_Price: temp[x.Field ? x.Field : ''],
RoomInfo: x,
IsSelf: false
})
hotel.HaveOtherRoom = true
}
}) })
}
} else {
this.Error(r.data.message);
} }
let roomLangs=['标准','大床房','自然单间','三人间','司机间'] })
let fileds = ['CostPrice', 'BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice'] },
roomLangs.forEach((x,i)=>{ // 房型
rooms.push({ getHotelRoomType(getNormal) {
TypeId:(i+1), let rooms = []
TypeName:x, if (getNormal) {
Field:fileds[i] rooms.push({
}) TypeId: 0,
}) TypeName: '全部房型'
return rooms })
}, }
// 状态 let roomLangs = ['标准', '大床房', '自然单间', '三人间', '司机间']
getHotelOrderStatus(){ let fileds = ['CostPrice', 'BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice']
let status=[] roomLangs.forEach((x, i) => {
let text = ['全部订单','待确认','已确认','已取消','收损订单'] rooms.push({
let color = ['','positive','dark','orange','negative'] TypeId: (i + 1),
let icons = ['','update','done','offline_bolt','cached'] TypeName: x,
text.forEach((x,i)=>{ Field: fileds[i]
status.push({ })
StatusId:i, })
StatusName:x, return rooms
Icon:icons[i], },
Color:`text-${color[i]}` // 状态
}) getHotelOrderStatus() {
}) let status = []
return status let text = ['全部订单', '待确认', '已确认', '已取消', '收损订单']
}, let color = ['', 'positive', 'dark', 'orange', 'negative']
let icons = ['', 'update', 'done', 'offline_bolt', 'cached']
text.forEach((x, i) => {
status.push({
StatusId: i,
StatusName: x,
Icon: icons[i],
Color: `text-${color[i]}`
})
})
return status
},
}, },
mounted() { mounted() {
this.pagesTitle = this.$route.query.pagesTitle this.pagesTitle = this.$route.query.pagesTitle
this.orderId = this.$route.query.id this.orderId = this.$route.query.id
this.initOrderDetails() this.initOrderDetails()
}, },
}; };
......
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