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>
<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-input type="" v-model="msg.HotelName" placeholder="酒店名称"></el-input>
<!-- <el-select v-model="msg.HotelChooseArray" :placeholder="$t('pub.pleaseSel')" class="multiple_input w300"
<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-input type="" v-model="msg.HotelName" placeholder="酒店名称"></el-input>
<!-- <el-select v-model="msg.HotelChooseArray" :placeholder="$t('pub.pleaseSel')" class="multiple_input w300"
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-select> -->
</span>
</li>
<li>
<span>
<em>来源</em>
<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="备忘录"
</span>
</li>
<li>
<input v-if="HOTEL_memorandum&&!pagesTitle" type="button" class="normalBtn" value="备忘录"
@click="goUrl('memorandumList')" />
<input v-if="!pagesTitle" type="button" class="normalBtn" value="温馨提示"
@click="showNotice=true" />
<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;
<input v-if="!pagesTitle" type="button" class="normalBtn" value="温馨提示" @click="showNotice=true" />
<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}}
{{HotelLength}}
</span>
</button>
<input type="button" class="normalBtn" value="查询" @click="getList(),msg.pageIndex=1" />
</li>
</ul>
</button>
<input type="button" class="normalBtn" value="查询" @click="getList(),msg.pageIndex=1" />
</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>
<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>
<template v-if="isShow">
<hotelTableList v-loading='loading' :list="dataList" :tableHeight="tableHeight"
@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>
<template v-if="isShow">
<hotelTableList v-loading='loading' :list="dataList"
:tableHeight="tableHeight"
@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>
<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>
<!-- 暂存购物车 -->
<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>
</template>
<script>
import SamplePriceList from './components/SamplePriceList'
import TableOperation from './components/TableOperation'
import ListCar from './components/ListCar'
import hotelDetails from './components/hotelDetails'
import hotelTableList from './components/hotelTableList'
import WarmReminder from './components/WarmReminder'
import HotelTipTableList from './components/HotelTipTableList'
export default {
props:['pagesTitle'],
components: { SamplePriceList,
TableOperation,ListCar,
hotelDetails,hotelTableList,
WarmReminder,HotelTipTableList },
data() {
return {
showHotelDetails: false,
HotelDetailId: 0,
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(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:'',
IsHotelAddPrice: 1
},
tableHeight: 0,
beforeCheck: {
disabledDate: time => {
if (this.msg.StartDate) {
let endTime = new Date(this.getBeforeDate(-3,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;
}
}
},
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: "备忘录"
}
});
<!-- 温馨提示 -->
<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>
<!-- 暂存购物车 -->
<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>
</template>
<script>
import SamplePriceList from './components/SamplePriceList'
import TableOperation from './components/TableOperation'
import ListCar from './components/ListCar'
import hotelDetails from './components/hotelDetails'
import hotelTableList from './components/hotelTableList'
import WarmReminder from './components/WarmReminder'
import HotelTipTableList from './components/HotelTipTableList'
export default {
props: ['pagesTitle'],
components: {
SamplePriceList,
TableOperation,
ListCar,
hotelDetails,
hotelTableList,
WarmReminder,
HotelTipTableList
},
data() {
return {
showHotelDetails: false,
HotelDetailId: 0,
editorType: 0,
rightCarOpen: false,
HotelLength: 0,
orderSubmitItemObj: {},
orderSubmitObj: {},
showOrderPreview: false,
total: 0,
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}
},
removeEditor(){
localStorage.removeItem('editor')
msg: {
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
},
// 编辑购物车
editor(x){
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)
}
})
tableHeight: 0,
beforeCheck: {
disabledDate: time => {
if (this.msg.StartDate) {
let endTime = new Date(this.getBeforeDate(-3, new Date().Format("yyyy-MM-dd")));
return time && endTime.getTime() >= time.getTime();
} else {
return false;
}
})
}
},
// 提交预约成功
success(){
this.close()
this.getList()
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;
}
}
},
// 取消
close(){
this.HotelLength = localStorage.getItem("HotelLength")?localStorage.getItem("HotelLength"):0
this.showOrderPreview = false
this.rightCarOpen = false
this.showHotelDetails = false
localStorage.removeItem("editor")
defaultSelectValue: 0,
//国家 省市 区
provinceList: [],
cityList: [],
district: [],
queryMsg: {
QStartDate: '',
QEndDate: '',
pageIndex: 1,
pageSize: 5,
currentPage: 1,
total: 0,
OpType: 0
},
// 加入购物车
showOrderSubmitHandler(row,index,type){
this.orderSubmitObj = row
this.orderSubmitItemObj = row.subList[index]
this.showOrderPreview = true
this.editorType = type?type:0
postMsg: {
Id: 0,
TipContent: '',
OpType: 0,
},
com_onresize() {
//clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，
var contentsHeight = document.body.clientHeight;
var h = contentsHeight - 50 - 180 - 100;
if (h < 110) {
return;
//默认显示弹窗信息
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()
}
//设置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")));
pickerBeginDateAfter: {
disabledDate: time => {
let startTime = new Date(this.queryMsg.QEndDate)
return startTime.getTime() >= time.getTime()
}
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 => {}
);
editorOption: {
placeholder: '请输入内容',
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block', 'align']
]
}
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
HOTEL_memorandum: false,
crmOrderObj: null
};
},
watch: {
dataList: {
handler(val, oldVal) {
},
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 = [];
deep: true
}
},
methods: {
goUrl(name, id) {
this.$router.push({
name: name,
query: {
blank: "y",
tab: "备忘录"
}
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;
});
},
removeEditor() {
localStorage.removeItem('editor')
},
// 编辑购物车
editor(x) {
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() {
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;
});
},
})
}
})
},
// 提交预约成功
success() {
this.close()
this.getList()
},
// 取消
close() {
this.HotelLength = localStorage.getItem("HotelLength") ? localStorage.getItem("HotelLength") : 0
this.showOrderPreview = false
this.rightCarOpen = false
this.showHotelDetails = false
localStorage.removeItem("editor")
},
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;
// 加入购物车
showOrderSubmitHandler(row, index, type) {
this.orderSubmitObj = row
this.orderSubmitItemObj = row.subList[index]
this.showOrderPreview = true
this.editorType = type ? type : 0
},
com_onresize() {
//clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，
var contentsHeight = document.body.clientHeight;
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.GetHotelList();//酒店名称下拉
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 => {}
);
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
this.com_onresize();
window.onresize = () => {
this.com_onresize();
},
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 => {}
);
},
//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>
\ No newline at end of file
};
</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>
src/components/Hotel/singleProduct/ModifyHotelOrder.vue
View file @ 14e9eeb4
<style scoped>
.ModifyHotelOrder-OrderId{
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
border-radius: 5px;
background: #ffffff;
font-size: 12px;
margin-top: 15px;
}
.ModifyHotelOrder-OrderId>div{
display: flex;
align-items: center;
}
.ModifyHotelOrder-OrderId>div:first-child{
color: #9E9E9E;
}
.ModifyHotelOrder-OrderId>div:nth-child(2){
color: #E76A42;
}
.ModifyHotelOrder-OrderId>div:nth-child(2)>span{
font-weight: bold;
color: #009EF7;
}
.ModifyHotelOrder-OrderId>div:nth-child(2)>span:first-child{
color: #E65152;
}
.ModifyHotelOrder-OrderId>div:nth-child(3){
color: #F25971;
}
.ModifyHotelOrder-OrderId>div:nth-child(3)>span:first-child{
font-size: 16px;
}
.ModifyHotelOrder-OrderId>div:nth-child(3)>b{
font-size: 20px;
}
.ModifyHotelOrder-OrderId>div:last-child{
display: flex;
font-size: 16px;
}
.ModifyHotelOrder-OrderInfor{
padding: 10px 15px;
border-radius: 5px;
background: #ffffff;
margin-top: 15px;
}
.ModifyHotelOrder-OrderInfor p{
color: #C1C1C1;
font-size: 14px;
}
.ModifyHotelOrder-content{
display: flex;
align-items: flex-start;
flex-wrap: wrap;
margin-top: 15px;
}
.content-box{
width: 320px;
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 5px;
margin: 0 10px 10px 0;
overflow: hidden;
}
.content-header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 10px;
}
.content-header span{
font-size: 17px;
}
.content-header i{
color: #009EF7;
cursor: pointer;
}
.content-header i:last-child{
color: #F1416C;
margin-left: 15px;
}
.content-Car{
background: #ECEFF1;
border-radius: 5px;
padding: 10px 5px;
margin: 0 10px;
margin-bottom: 10px;
font-size: 12px;
}
.content-Car-title{
font-size: 14px;
font-weight: 400;
color: #009EF7;
padding: 0 5px 5px 5px;
display: flex;
justify-content: space-between;
border-bottom: 1px dashed rgba(96, 125, 139, 0.2);
}
.content-Car-title span{
width: 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.content-Car-title i{
color: #F1416C;
cursor: pointer;
display: none;
}
.content-Car-title:hover i{
display: block;
}
.content-Car-num{
padding: 7px 5px;
align-items: center;
}
.content-Car-num>div:last-child .num-roomtype{
padding: 0;
}
.num-roomtype{
padding: 0 0 15px 0;
color: #181C32;
}
.num-roomtype span{
color: #6F8A96;
display: block;
padding: 3px 0 0 0;
}
.num-roomnum{
color: #9E9E9E;
}
.num-roomnum span{
color: #F5831E;
font-weight: bold;
}
.noroomtype{
padding: 10px 5px;
color: #6F8A96;
font-size: 12px;
}
.content-Car-shui{
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: #6F8A96;
border-top: 1px dashed rgba(96, 125, 139, 0.2);
border-bottom: 1px dashed rgba(96, 125, 139, 0.2);
padding: 7px 0;
margin: 0 5px;
}
.content-Car-heji{
padding: 7px 5px 0 0;
display: flex;
justify-content: end;
font-size: 14px;
color: #1CA8F6;
}
.content-Car-heji span span{
font-size: 15px;
font-weight: bold;
}
.content-picker-text{
height: 192px;
display: flex;
flex-direction: column;
justify-content: center;
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;
}
.ModifyHotelOrder-OrderId {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
border-radius: 5px;
background: #ffffff;
font-size: 12px;
margin-top: 15px;
}
.ModifyHotelOrder-OrderId>div {
display: flex;
align-items: center;
}
.ModifyHotelOrder-OrderId>div:first-child {
color: #9E9E9E;
}
.ModifyHotelOrder-OrderId>div:nth-child(2) {
color: #E76A42;
}
.ModifyHotelOrder-OrderId>div:nth-child(2)>span {
font-weight: bold;
color: #009EF7;
}
.ModifyHotelOrder-OrderId>div:nth-child(2)>span:first-child {
color: #E65152;
}
.ModifyHotelOrder-OrderId>div:nth-child(3) {
color: #F25971;
}
.ModifyHotelOrder-OrderId>div:nth-child(3)>span:first-child {
font-size: 16px;
}
.ModifyHotelOrder-OrderId>div:nth-child(3)>b {
font-size: 20px;
}
.ModifyHotelOrder-OrderId>div:last-child {
display: flex;
font-size: 16px;
}
.ModifyHotelOrder-OrderInfor {
padding: 10px 15px;
border-radius: 5px;
background: #ffffff;
margin-top: 15px;
}
.ModifyHotelOrder-OrderInfor p {
color: #C1C1C1;
font-size: 14px;
}
.ModifyHotelOrder-content {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
margin-top: 15px;
}
.content-box {
width: 320px;
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 5px;
margin: 0 10px 10px 0;
overflow: hidden;
}
.content-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 10px;
}
.content-header span {
font-size: 17px;
}
.content-header i {
color: #009EF7;
cursor: pointer;
}
.content-header i:last-child {
color: #F1416C;
margin-left: 15px;
}
.content-Car {
background: #ECEFF1;
border-radius: 5px;
padding: 10px 5px;
margin: 0 10px;
margin-bottom: 10px;
font-size: 12px;
}
.content-Car-title {
font-size: 14px;
font-weight: 400;
color: #009EF7;
padding: 0 5px 5px 5px;
display: flex;
justify-content: space-between;
border-bottom: 1px dashed rgba(96, 125, 139, 0.2);
}
.content-Car-title span {
width: 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.content-Car-title i {
color: #F1416C;
cursor: pointer;
display: none;
}
.content-Car-title:hover i {
display: block;
}
.content-Car-num {
padding: 7px 5px;
align-items: center;
}
.content-Car-num>div:last-child .num-roomtype {
padding: 0;
}
.num-roomtype {
padding: 0 0 15px 0;
color: #181C32;
}
.num-roomtype span {
color: #6F8A96;
display: block;
padding: 3px 0 0 0;
}
.num-roomnum {
color: #9E9E9E;
}
.num-roomnum span {
color: #F5831E;
font-weight: bold;
}
.noroomtype {
padding: 10px 5px;
color: #6F8A96;
font-size: 12px;
}
.content-Car-shui {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: #6F8A96;
border-top: 1px dashed rgba(96, 125, 139, 0.2);
border-bottom: 1px dashed rgba(96, 125, 139, 0.2);
padding: 7px 0;
margin: 0 5px;
}
.content-Car-heji {
padding: 7px 5px 0 0;
display: flex;
justify-content: end;
font-size: 14px;
color: #1CA8F6;
}
.content-Car-heji span span {
font-size: 15px;
font-weight: bold;
}
.content-picker-text {
height: 192px;
display: flex;
flex-direction: column;
justify-content: center;
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>
<template>
<div>
<div class="ModifyHotelOrder-OrderId" v-if="order">
<div>
订单编号 {{ order.OrderNo }}
</div>
<div>本次行程<span v-if="order.DetailList">{{ order.DetailList.length }}</span>天，入住<span>{{ order.HotelCount }}</span>个酒店</div>
<div>订单总金额：<span><!-- ¥ -->円</span><b v-if="order.Money">{{ moneyFormat(order.Money) }}</b></div>
<div>
<button class="hollowFixedBtn" @click="cancelOrder">取消订单</button>
<button class="normalBtn" @click="saveOrderHandler">保存订单</button>
</div>
<div class="ModifyHotelOrder-OrderId" v-if="order">
<div>
订单编号 {{ order.OrderNo }}
</div>
<div>本次行程<span
v-if="order.DetailList">{{ order.DetailList.length }}</span>天，入住<span>{{ order.HotelCount }}</span>个酒店</div>
<div>订单总金额：<span>
<!-- ¥ -->円</span><b v-if="order.Money">{{ moneyFormat(order.Money) }}</b></div>
<div>
<button class="hollowFixedBtn" @click="cancelOrder">取消订单</button>
<button class="normalBtn" @click="saveOrderHandler">保存订单</button>
</div>
<div class="ModifyHotelOrder-OrderInfor">
<p>订单信息</p>
<div>
<el-form label-width="60px" :model="order" :rules="rules" ref="order">
<el-row :gutter="20">
<el-col :span="4">
<el-form-item label="类型" prop="OrderType">
<el-select v-model="order.OrderType">
<el-option v-for="item in cacheHotels" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
</el-select>
</el-form-item>
</div>
<div class="ModifyHotelOrder-OrderInfor">
<p>订单信息</p>
<div>
<el-form label-width="60px" :model="order" :rules="rules" ref="order">
<el-row :gutter="20">
<el-col :span="4">
<el-form-item label="类型" prop="OrderType">
<el-select v-model="order.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="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>
<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 :span="7">
<p class="num-roomnum">预计<span>{{ z.Number }}</span>间房</p>
</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 :span="9">
<el-input-number v-model="z.PeopleNumber" :min="0" :step="1" step-strictly @change="calcPeople">
</el-input-number>
</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>
</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 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>
<el-dialog v-show="showChosenHotel" custom-class="w800" title="酒店检索" :visible.sync="showChosenHotel" center>
<ChosenHotel :newDate="newDate" @finish="finishHanler"></ChosenHotel>
</el-dialog>
<el-dialog
custom-class="w600"
title="取消订单"
:visible.sync="cancelOrderDialog"
>
</div>
<el-dialog v-show="showChosenHotel" custom-class="w800" title="酒店检索" :visible.sync="showChosenHotel" center>
<ChosenHotel :newDate="newDate" @finish="finishHanler"></ChosenHotel>
</el-dialog>
<el-dialog custom-class="w600" title="取消订单" :visible.sync="cancelOrderDialog">
<div style="padding-bottom:20px">
<el-input
type="textarea"
autofocus
rows="5"
placeholder="请填写取消订单的缘由"
clear="w300"
v-model="cancelRemark"
></el-input>
<el-input type="textarea" autofocus rows="5" placeholder="请填写取消订单的缘由" clear="w300" v-model="cancelRemark">
</el-input>
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="24" style="text-align: right;">
<input
type="button"
class="normalBtn"
value="取消订单"
@click="cancelOrderHandler"
/>
<input
type="button"
class="hollowFixedBtn"
value="关闭"
@click="cancelOrderDialog = false"
/>
<input type="button" class="normalBtn" value="取消订单" @click="cancelOrderHandler" />
<input type="button" class="hollowFixedBtn" value="关闭" @click="cancelOrderDialog = false" />
</el-col>
</el-row>
</div>
......@@ -369,462 +395,472 @@
<script>
import ChosenHotel from './components/ChosenHotel.vue';
export default {
components: { ChosenHotel },
components: {
ChosenHotel
},
data() {
return {
newDate: this.getBeforeDate(-20,new Date().Format("yyyy-MM-dd")),
newDate: this.getBeforeDate(-20, new Date().Format("yyyy-MM-dd")),
orderId: 0,
order: {},//下单信息
order: {}, //下单信息
loading: false,
status: this.getHotelOrderStatus(),//状态
rooms: this.getHotelRoomType(),//房型
status: this.getHotelOrderStatus(), //状态
rooms: this.getHotelRoomType(), //房型
limitGuestNum: [2, 1, 1, 3, 1],
showChosenHotel: false,
tempHotels: {
key: '',
data: []
key: '',
data: []
},
cacheHotels: [
{ Name: '散客', ID: 1 },
{ Name: '团队', ID: 2 }
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'
}],
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'
}],
},
beforeCheck: {
disabledDate: time => {
let endTime = new Date(this.getBeforeDate(-19,new Date().Format("yyyy-MM-dd")));
return time && endTime.getTime() >= time.getTime();
}
disabledDate: time => {
let endTime = new Date(this.getBeforeDate(-19, new Date().Format("yyyy-MM-dd")));
return time && endTime.getTime() >= time.getTime();
}
},
pagesTitle:'',
pagesTitle: '',
cancelRemark: '',
cancelOrderDialog: false
};
},
methods: {
// 确定下单
submit() {
this.$refs['order'].validate((valid) => {
if (valid) {
this.saveOrderHandler()
} else {
return false;
}
});
},
// 保存订单
saveOrderHandler(){
if(this.loading) return
let detailList=[]
this.order.DetailList.forEach((x)=>{
detailList.push(...x.data)
})
detailList.forEach((x)=>{
x.RoomList = x.RoomList.filter((y)=>y.Number>0)
})
detailList = detailList.filter((x)=>x.RoomList.length>0)
let parameter = JSON.parse(JSON.stringify(this.order))
parameter.DetailList = detailList
this.loading = true
this.apipost("dict_post_SetSaleCustomerOrder", parameter,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.Success('保存成功');
let path = ''
if(this.pagesTitle=='销售'){
path = 'singleProductHotelOrder'
}if(this.pagesTitle=='OP'){
path = 'singleProductHotelOrderOP'
}
if(!this.pagesTitle) return
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)
// 确定下单
submit() {
this.$refs['order'].validate((valid) => {
if (valid) {
this.saveOrderHandler()
} else {
return false;
}
});
},
// 保存订单
saveOrderHandler() {
if (this.loading) return
let detailList = []
this.order.DetailList.forEach((x) => {
detailList.push(...x.data)
})
detailList.forEach((x) => {
x.RoomList = x.RoomList.filter((y) => y.Number > 0)
})
detailList = detailList.filter((x) => x.RoomList.length > 0)
let parameter = JSON.parse(JSON.stringify(this.order))
parameter.DetailList = detailList
this.loading = true
this.apipost("dict_post_SetSaleCustomerOrder", parameter,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.Success('保存成功');
let path = ''
if (this.pagesTitle == '销售') {
path = 'singleProductHotelOrder'
}
if (this.pagesTitle == 'OP') {
path = 'singleProductHotelOrderOP'
}
if (!this.pagesTitle) return
this.$router.push({
name: path
});
} 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(()=>{
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
})
this.Error('下单失败')
}
},
//删除酒店
deleteHotelsHandler(x, y) {
let that = this
that.$confirm(`是否确定删除${this.order.DetailList[x].key}${y > -1 ? this.order.DetailList[x].data[y].HotelName : ''}？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
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(() => {
},
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 {
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;
});
},
finishHanler(h) {
this.showChosenHotel = false
let hp = h.subList[0].PriceList[0]
//#region 組裝對象
let hotel = {
ContractUrl: null,
CurrencyId: hp.CurrencyId,
CurrencyName: '日元',
CustomerPayType: 0,
Date: h.subList[0].DateStr.replace(/-/g, '/'),
Destription: null,
HaveOtherRoom: false,
HotelId: h.HotelId,
HotelMoeny: 0.0,
HotelName: h.HotelName,
HotelStatus: 1,
HotelStatusName: '暂定',
Id: 0,
ImageList: h.ImageList,
PeopleNum: 0,
PriceInTangTax: hp.PriceInTangTax,
ReserveRoomNo: null,
RoomList: [],
TaxesPrice: hp.TaxesPrice
}
this.rooms.forEach((x) => {
if (hp[x.Field? x.Field:''] > 0) {
hotel.RoomList.push({
Destription: '',
IsSelf: true,
Money: 0,
PeopleNumber: 0,
Number: 0,
RoomInfo: x,
RoomType: x.TypeId,
RoomName: x.TypeName,
Unit_Price: hp[x.Field ? x.Field:'']
})
}
}).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
})
//#endregion
let i = this.order.DetailList.findIndex((x) => x.key == hotel.Date)
if (i == -1) {
this.order.DetailList.push({
key: hotel.Date,
data: [hotel]
})
this.order.DetailList.sort((x, y) => {
return new Date(x.key).getTime() - new Date(y.key).getTime()
})
} else {
let y = this.order.DetailList[i].data.findIndex((x) => x.HotelId == hotel.HotelId)
if (y == -1) this.order.DetailList[i].data.push(hotel)
}).catch(() => {
this.loading = false
})
}
},
//删除酒店
deleteHotelsHandler(x, y) {
let that = this
that.$confirm(
`是否确定删除${this.order.DetailList[x].key}${y > -1 ? this.order.DetailList[x].data[y].HotelName : ''}？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
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 = []
}
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)
})
})
})
},
calcMoney(hotel) {
let money = 0.0
let peoples = 0
hotel.RoomList.forEach((x) => {
money += x.Unit_Price * x.PeopleNumber
peoples += x.PeopleNumber
});
},
finishHanler(h) {
this.showChosenHotel = false
let hp = h.subList[0].PriceList[0]
//#region 組裝對象
let hotel = {
ContractUrl: null,
CurrencyId: hp.CurrencyId,
CurrencyName: '日元',
CustomerPayType: 0,
Date: h.subList[0].DateStr.replace(/-/g, '/'),
Destription: null,
HaveOtherRoom: false,
HotelId: h.HotelId,
HotelMoeny: 0.0,
HotelName: h.HotelName,
HotelStatus: 1,
HotelStatusName: '暂定',
Id: 0,
ImageList: h.ImageList,
PeopleNum: 0,
PriceInTangTax: hp.PriceInTangTax,
ReserveRoomNo: null,
RoomList: [],
TaxesPrice: hp.TaxesPrice
}
this.rooms.forEach((x) => {
if (hp[x.Field ? x.Field : ''] > 0) {
hotel.RoomList.push({
Destription: '',
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
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
})
}
})
//#endregion
let i = this.order.DetailList.findIndex((x) => x.key == hotel.Date)
if (i == -1) {
this.order.DetailList.push({
key: hotel.Date,
data: [hotel]
})
this.order.DetailList.sort((x, y) => {
return new Date(x.key).getTime() - new Date(y.key).getTime()
})
} 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
})
} else {
this.Error(r.data.message);
}
},
err => {}
);
},
groupBy(array, f){
const groups= {}
array.forEach((item) => {
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
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
})
} else {
this.Error(r.data.message);
}
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);
}
})
},
// 房型
getHotelRoomType(getNormal){
let rooms = []
if(getNormal){
rooms.push({
TypeId:0,
TypeName:'全部房型'
},
err => {}
);
},
groupBy(array, f) {
const groups = {}
array.forEach((item) => {
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 => {
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({
TypeId:(i+1),
TypeName:x,
Field:fileds[i]
})
})
return rooms
},
// 状态
getHotelOrderStatus(){
let 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
},
})
},
// 房型
getHotelRoomType(getNormal) {
let rooms = []
if (getNormal) {
rooms.push({
TypeId: 0,
TypeName: '全部房型'
})
}
let roomLangs = ['标准', '大床房', '自然单间', '三人间', '司机间']
let fileds = ['CostPrice', 'BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice']
roomLangs.forEach((x, i) => {
rooms.push({
TypeId: (i + 1),
TypeName: x,
Field: fileds[i]
})
})
return rooms
},
// 状态
getHotelOrderStatus() {
let 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() {
this.pagesTitle = this.$route.query.pagesTitle
this.orderId = this.$route.query.id
this.initOrderDetails()
this.pagesTitle = this.$route.query.pagesTitle
this.orderId = this.$route.query.id
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