Commit 7192a954 authored by youjie's avatar youjie

no message

parent 87a8f6d6
...@@ -4,6 +4,41 @@ ...@@ -4,6 +4,41 @@
import zhDemo from './zhtw-demo' import zhDemo from './zhtw-demo'
export const demo = zhDemo export const demo = zhDemo
export const OrderList = {
end: '結束日期',
star: '開始日期',
zhi: '至',
orderType: {
default: '所有類型',
tour: '團隊訂房',
guest: '散拼訂房'
},
rooms:{
default: '全部房型',
normal: '標準間',
big: '大床房',
sing: '自然單間',
three: '三人間',
driver: '司導間',
},
search:{
status: '訂單狀態',
orderNum: '訂單編號',
daterange: '下單時間',
roomType: '酒店房型',
orderId: '訂單流水號',
orderType: '訂單類型',
allHotel: '所有酒店'
},
orderStatus:{
normal: '全部訂單',
apply: '待確認',
check: '已確認',
cancel: '已取消',
sun: '收損訂單'
}
}
export const pub={ export const pub={
addBtn:'新增', addBtn:'新增',
saveBtn:'保存', saveBtn:'保存',
......
...@@ -4,6 +4,42 @@ ...@@ -4,6 +4,42 @@
import zhDemo from './zh-demo' import zhDemo from './zh-demo'
export const demo = zhDemo export const demo = zhDemo
export const OrderList = {
end: '结束日期',
star: '开始日期',
zhi: '至',
orderType: {
default: '所有类型',
tour: '团队订房',
guest: '散拼订房'
},
rooms:{
default: '全部房型',
normal: '标准间',
big: '大床房',
sing: '自然单间',
three: '三人间',
driver: '司机间',
},
search: {
status: '订单状态',
orderNum: '订单编号',
daterange: '下单时间',
roomType: '酒店房型',
orderId: '订单流水号',
orderType: '订单类型',
allHotel: '所有酒店'
},
orderStatus:{
normal: '全部订单',
apply: '待确认',
check: '已确认',
cancel: '已取消',
sun: '收损订单'
}
}
export const pub={ export const pub={
addBtn:'新增', addBtn:'新增',
saveBtn:'保存', saveBtn:'保存',
......
<style>
.HotelWorkList .has-gutter tr th,
.el-table th.is-leaf {
background-color: #EAEAEA !important;
}
.HotelWorkList .HW_hotelDialog {
width: 900px;
}
.HotelWorkList .Hw_tableOne {
width: 100%;
height: 40px;
background-color: #EAEAEA;
}
.HotelWorkList .Hw_tableOne th {
text-align: center;
}
.HotelWorkList .HotelWorkInput .el-input {
width: 223px;
}
.HotelWorkList .HworkInput .el-input {
width: 110px;
}
</style>
<template>
<div class="HotelWorkList">
<div class="query-box HotelWorkInput" style="border-bottom: none;">
<ul>
<li>
<span>
<em>{{$t('OrderList.search.status')}}</em>
<el-select v-model="msg.OrderStatus" class="w110 HworkInput">
<el-option :key="0" :value="0" :label="$t('OrderList.orderStatus.normal')"></el-option>
<el-option v-for="item in OrderStatusType" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
</el-select>
</span>
</li>
<!-- <li>
<span><em>{{$t('OrderList.search.orderNum')}}</em>
<el-input type="Number" v-model="msg.OrderNo" :placeholder="$t('OrderList.search.orderNum')" class="w200"/>
</span>
</li> -->
<li>
<span>
<em>{{$t('hotel.hotel')}}</em>
<!-- multiple_input w300 multiple collapse-tags-->
<el-select v-model="msg.HotelId" :placeholder="$t('pub.pleaseSel')" style="height: 34px;"
filterable>
<el-option :key="0" :value="0" :label="$t('OrderList.search.allHotel')"></el-option>
<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>{{$t('OrderList.search.daterange')}}</em>
<el-date-picker
style="height: 34px;"
value-format="yyyy-MM-dd"
v-model="Datelist"
type="daterange"
:range-separator="$t('OrderList.zhi')"
:start-placeholder="$t('OrderList.star')"
:end-placeholder="$t('OrderList.end')" @change="getDates">
</el-date-picker>
</span>
</li>
<!-- <li>
<span><em>{{$t('OrderList.search.orderId')}}</em>
<el-input type="Number" v-model="msg.orderId" :placeholder="$t('OrderList.search.orderId')" class="w200"/>
</span>
</li> -->
<li>
<span>
<em>{{$t('OrderList.search.roomType')}}</em>
<el-select v-model="msg.RoomType" :placeholder="$t('OrderList.rooms.roomType')" class="w110 HworkInput">
<el-option :key="0" :value="0" :label="$t('OrderList.rooms.default')"></el-option>
<el-option v-for="item in roomType" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
</el-select>
</span>
</li>
<!-- <li>
<span>
<em>{{$t('OrderList.search.orderType')}}</em>
<el-select v-model="msg.orderType" :placeholder="$t('OrderList.search.orderType')" class="w110 HworkInput">
<el-option :key="0" :value="0" :label="$t('OrderList.orderType.default')"></el-option>
<el-option v-for="item in orderType" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
</el-select>
</span>
</li> -->
<li>
<input type="button" class="normalBtn" :value="$t('pub.searchBtn')" @click="msg.pageIndex=1,currentPage=1,GetList()" />
<!-- <input type="button" class="normalBtn" :value="$t('adm.adm_download')" @click="DownLoadHotelWork()" /> -->
</li>
</ul>
</div>
<template>
<OrderList :OrderList="OrderList" v-loading="loading"> </OrderList>
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
</el-pagination>
</template>
</div>
</template>
<script>
import OrderList from './OrderList.vue';
export default {
components: { OrderList },
data() {
return {
userInfo: {},
HotelList: [],
loading: false,
isShow: false,
outerVisible: false,
//订单列表
OrderList: [],
//默认高度
tableHeight: 0,
msg:{
pageIndex: 1,
pageSize: 10,
HotelId: 0,
RoomType: 0,
StartTime: '',//new Date().Format("yyyy-MM-dd")
EndTime: '',//this.setEdate()
OrderStatus: 0,
// OrderNo: '',
// RoomType: 0,
// orderType: 0
},
total: 0,
currentPage: 1,
OrderStatusType:[
{Name: this.$t('OrderList.orderStatus.apply'),ID:'1'},
{Name: this.$t('OrderList.orderStatus.check'),ID:'2'},
{Name: this.$t('OrderList.orderStatus.cancel'),ID:'3'},
{Name: this.$t('OrderList.orderStatus.sun'),ID:'4'},
],
roomType:[
{Name: this.$t('OrderList.rooms.normal'),ID:'1'},
{Name: this.$t('OrderList.rooms.big'),ID:'2'},
{Name: this.$t('OrderList.rooms.sing'),ID:'3'},
{Name: this.$t('OrderList.rooms.three'),ID:'4'},
{Name: this.$t('OrderList.rooms.driver'),ID:'5'},
],
orderType:[
{Name: this.$t('OrderList.orderType.tour'),ID:'1'},
{Name: this.$t('OrderList.orderType.guest'),ID:'2'},
],
Datelist:''
};
},
methods: {
getDates(){
console.log(this.Datelist)
if(this.Datelist[0]){
this.msg.StartTime = this.Datelist[0]
}if(this.Datelist[1]){
this.msg.EndTime = this.Datelist[1]
}
},
setEdate() {
return this.addMoth(new Date().Format("yyyy-MM-dd"), 1)
},
addMoth(d, m) {
let ds = d.split('-'),
_d = ds[2] - 0;
let nextM = new Date(ds[0], ds[1] - 1 + m + 1, 0);
let max = nextM.getDate();
d = new Date(ds[0], ds[1] - 1 + m, _d > max ? max : _d);
return d.toLocaleDateString().match(/\d+/g).join('-')
},
// 获取酒店下拉
initHotels() {
this.apipost("hotel_post_GetHasStockHotelList", {},
res => {
if (res.data.resultCode == 1) {
this.HotelList = res.data.data;
} else {
message.errorMsg(res.data.message);
}
},
err => {}
);
},
getyMDOne(){
let myDate = new Date()
let myYear = myDate.getFullYear();//获取完整的年份(4位,1970-????)
let myMonth = myDate.getMonth()+ 1;//获取当前月份(0-11,8代表1月)
let myToday = myDate.getDate(); //获取当前日(1-31)
myMonth = myMonth > 9 ? myMonth : '0'+ myMonth
myToday = myToday > 9 ? myToday : '0'+ myToday
let nowDate = myYear +'-'+ myMonth +'-01'
return nowDate
},
getyMDTwo(){
let myDate = new Date()
let myYear = myDate.getFullYear();//获取完整的年份(4位,1970-????)
let myMonth = myDate.getMonth()+ 1;//获取当前月份(0-11,8代表1月)
let myToday = myDate.getDate(); //获取当前日(1-31)
myMonth = myMonth > 9 ? myMonth : '0'+ myMonth
myToday = myToday > 9 ? myToday : '0'+ myToday
let nowDate = myYear +'-'+ myMonth +'-'+ myToday
return nowDate
},
//获取酒店订单列表
GetList() {
if(this.msg.StartTime==''){
this.msg.StartTime = this.getyMDOne()
}
if(this.msg.EndTime==''){
this.msg.EndTime = this.getyMDTwo()
}
this.loading = true
this.apipost(
"dict_post_GetAdminCustomerOrderPageList", this.msg,
res => {
if (res.data.resultCode == 1) {
let data = res.data.data.pageData
// let addList = function(arr){
// arr.forEach(x=>{
// x.Tax = 0
// x.Tax2 = 0
// })
// }
// addList(data)
data.forEach(item => {
item.DetailList.forEach(x=>{
x.Number = 0
x.PeopleNumber = 0
x.RoomList.forEach(r=>{
x.Number+=r.Number
x.PeopleNumber+=r.PeopleNumber
})
x.Tax = x.TaxesPrice*x.Number
x.Tax2 = x.PriceInTangTax*x.PeopleNumber
x.Money = x.HotelMoeny+x.TaxesPrice
})
})
this.OrderList = data;
this.total = res.data.data.count;
}else {
this.Error(res.data.message);
}
this.loading = false
},
err => {this.loading = false}
);
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.GetList();
},
com_onresize() {
//clientHeight的值由DIV内容的实际高度和CSS中的padding值决定,
var contentsHeight = document.body.clientHeight;
var h = contentsHeight - 50 - 180 - 40;
if (h < 110) {
return;
}
//设置table的行高
this.tableHeight = h;
},
},
mounted() {
this.Datelist = this.getyMDOne()
this.userInfo = this.getLocalStorage();
this.GetList();
this.initHotels();//酒店名称下拉
//自适应高度调节
this.com_onresize();
window.onresize = () => {
this.com_onresize();
}
},
};
</script>
<style>
</style>
\ No newline at end of file
<style scoped>
.row{display: flex;}.row-c{ display: flex; align-items:center;}
.column{ display: flex; flex-direction: column;}.wrap{flex-wrap:wrap;}
.justify-sb{justify-content: space-between;}.justify-c{ justify-content:space-between;}.justify-e{justify-content: flex-end;align-items: flex-end;}
.flex-g{ flex-grow: 1;}.flex-s{ flex-shrink: 0;}.cblack{color: black;}
.cf{ color: #ffffff;}.c9e{ color: #9e9e9e;}.c20C997{color: #20C997;}.c02C854{color: #02C854;}
.cff9800{ color: #ff9800;}.cF1416C{ color: #F1416C;}.cF57A98{ color: #F57A98;}
.c04C8C8{color: #04C8C8;}.c059FF6{ color: #059FF6;}.c3FC4FF{ color: #3FC4FF;}
.fz10{ font-size: 10px;}.fz11{ font-size: 11px;}.fz12{font-size: 12px;}.fz13{ font-size: 13px;}.fz14{ font-size: 14px;}.fz15{ font-size: 15px;}.fz16{ font-size: 16px;}.fz17{ font-size: 17px;}.fz18{ font-size: 18px;}.fbold{ font-weight: bold;}
.ml{ margin-left: 10px;}.mr{ margin-right: 10px;}.mt{margin-top: 10px;}.mt20{margin-top: 20px;}.mb{margin-bottom: 10px;}.mb20{margin-bottom: 20px;}.mx{margin-left: 10px;margin-right: 10px;}.mx5{margin-left: 5px;margin-right: 5px;}
.py{ padding: 15px 0;}.px5{ padding: 0 5px;}.px15{padding: 0 15px;}.py20{padding: 20px 0;}
.pa{padding: 10px 20px;}.pa20{padding: 20px;}.pt20px{padding: 20px 0;}
.borderD{border-bottom: 1px dashed #DDDDDD}
.bgf{background:#ffffff;}.bgf5{background:#F5F5F5;}.bgE8F5E9{background:#E8F5E9;}.bgD9F3FF{background:#D9F3FF;}.bgFAEAED{background: #FAEAED;}
.radius5{border-radius: 5px;}.cursor-pointer{cursor: pointer;}
.relative{position: relative;}.absolute{position: absolute;}.left0{left: 0;}.right0{right: 0;}.top0{top: 0;}.bottom0{bottom: 0;}
.left20{left: 020px;}.right20{right: 20px;}.top20{top: 20px;}.bottom20{bottom: 20px;}
.orderType{
padding: 3px 15px;
border-radius: 3px;
background: #F57A98;
margin-right: 15px;
}
.orderType.active{
background: #4DD0E1;
}
.copy{
display: inline-block;
padding: 3px 15px;
border-radius: 3px;
margin-left: 20px;
}
.copy:hover{
background: #F5F5F5;
}
.see-rec div{
padding: 1px 5px;
border-radius: 3px;
}
.see{
border: 1px solid #04C8C8;
}
.see:hover{
background-color: rgba(4,200,200,.1);
}
.rec{
border: 1px solid #04C8C8;
background-color: rgba(4,200,200,1);
}
.rec:hover{
border: 1px solid rgba(4,200,200,.9);
background-color: rgba(4,200,200,.9);
}
.cancel:hover{
background-color: #F3DCE2;
}
.change:hover{
background-color: #D7E9F3;
}
.orderop div{
padding: 0 15px;
height: 50%;
}
.RoomList div{
border-bottom: 1px solid #E7E7E7;
}
.RoomList div:last-child{
border: 0;
}
.el-table{
font-size: 13px;
}
</style>
<template>
<div>
<div v-for="(item,index) in OrderList" class="column bgf radius5 px15 mb20">
<div class="row-c justify-sb align-c py">
<div class="row-c">
<div>
<div class="orderType cf fz13"
:class="{'active':item.OrderType==1}">
{{item.OrderType==1?'散拼订房':'团队订房'}}
</div>
</div>
<div class="c9e fz12">
<span>订单编号:</span>
<span>{{item.OrderNo}}</span>
<span class="copy fz13 cblack cursor-pointer">复制</span>
</div>
</div>
<div class="c9e fz12">
<span v-if="item.OrderType==1">联系人信息:{{item.ContactName}}/{{item.ContactNumber}}</span>
<span v-else>组团号:{{item.TCNum}}</span>
</div>
<div class="row c9e fz12">
<span>下单时间:</span>
<span class="mr">2022/11/14 11:36</span>
<div class="">
<i v-if="item.OrderStatus==2" class="el-icon-check mx5 cblack"></i>
<i v-else class="el-icon-alarm-clock mx5 c20C997"></i>
<span class="fz12 cblack" :class="{'c20C997':item.OrderStatus!=2}">
{{item.OrderStatusName}}
<!-- 待确认 -->
</span>
</div>
</div>
</div>
<div class="mb">
<el-table :data="item.DetailList" style="width:100%" border>
<el-table-column label="入驻日期" min-width="100" style="background:#EAEAEA">
<template slot-scope="scope">
{{scope.row.Date}}
</template>
</el-table-column>
<el-table-column label="酒店名称" min-width="150" style="background:#EAEAEA">
<template slot-scope="scope">
{{scope.row.HotelName}}
</template>
</el-table-column>
<el-table-column min-width="300">
<template slot="header" slot-scope="scope">
<span>入驻信息</span>
<el-tooltip class="item" effect="dark" content="按照入住人数*房型单价=房型总价小计(不含稅" placement="bottom">
<i class="el-icon-question c059FF6 cursor-pointer"></i>
</el-tooltip>
</template>
<template slot-scope="scope">
<div class="RoomList">
<div class="fz12 c9e" v-for="(x,i) in scope.row.RoomList">
<span>{{x.RoomTypeName}}{{x.Number}} 人间</span>
<span class="ml">人数:{{x.PeopleNumber}}</span>
<span class="ml">单价:{{x.Unit_Price}}</span>
<span class="ml">小计:{{x.Money}}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="订单号" min-width="100">
<template slot-scope="scope">
<span v-if="!scope.row.ReserveRoomNo" class="radius5 bgFAEAED cF1416C px5 fz12">未确认</span>
<template>
{{scope.row.ReserveRoomNo}}
</template>
</template>
</el-table-column>
<el-table-column label="城市税" min-width="100">
<template slot-scope="scope">
{{scope.row.Tax>0?scope.row.Tax.toFixed(2):'-'}}
</template>
</el-table-column>
<el-table-column label="入汤税" min-width="100" style="background:#EAEAEA">
<template slot-scope="scope">
{{scope.row.Tax2>0?scope.row.Tax2.toFixed(2):'-'}}
</template>
</el-table-column>
<el-table-column label="小计" min-width="100" style="background:#EAEAEA">
<template slot-scope="scope">
{{scope.row.Money.toFixed(2)}}
</template>
</el-table-column>
<el-table-column label="付款方式" min-width="100" style="background:#EAEAEA">
<template slot-scope="scope">
{{scope.row.CustomerPayType==1?'到店自付':'出发前付款'}}
</template>
</el-table-column>
</el-table>
</div>
<div class="row justify-sb mt mb20">
<div class="row pt20">
<i class="el-icon-warning cF57A98 fz15 mr"></i>
<div class="column w220">
<div class="wrap fz12">
出发前收款酒店,请您于
<span class="cff9800">{{item.PaymentDate}}</span>
前支付定金,并且于
<span class="cF1416C">{{item.FinalPaymentDate}}</span>
日前支付尾款
</div>
<div class="row fz10 see-rec mt">
<div class="cursor-pointer fz10 see c04C8C8">查看支付方式</div>
<div class="cursor-pointer fz10 ml rec cf">提交付费凭证</div>
</div>
</div>
</div>
<div class="column px15 bgf5 radius5 ml flex-g pa relative">
<div class="fz12">收款单据</div>
<div class="row wrap orderNo fz12 py c3FC4FF">
<span class="cursor-pointer radius5 bgD9F3FF mr px5">45454</span>
<span class="cursor-pointer radius5 bgD9F3FF mr px5">45454</span>
</div>
<i class="absolute right20 bottom20 el-icon-edit cursor-pointer c059FF6"></i>
</div>
<div class="column px15 bgf5 radius5 ml flex-g pa relative">
<div class="fz12">退款单据</div>
<div class="row wrap orderNo fz12 py c3FC4FF">
<span class="cursor-pointer radius5 bgD9F3FF mr px5">45454</span>
<span class="cursor-pointer radius5 bgD9F3FF mr px5">45454</span>
</div>
<i class="absolute right20 bottom20 el-icon-edit cursor-pointer c059FF6"></i>
</div>
<div class="column px15 bgf5 radius5 ml flex-g pa relative">
<div class="fz12">成本单据</div>
<div class="row wrap orderNo fz12 py c3FC4FF">
<span class="cursor-pointer radius5 bgD9F3FF mr px5">45454</span>
<span class="cursor-pointer radius5 bgD9F3FF mr px5">45454</span>
</div>
<i class="absolute right20 bottom20 el-icon-edit cursor-pointer c059FF6"></i>
</div>
<div class="column px15 bgf5 radius5 ml flex-g">
<div class="row-c justify-sb borderD py20">
<span class="fz12 c9e">订单总金额</span>
<div class="ml">
<span class="fz12 ml">¥</span>
<span class="fz15 fbold">{{item.Money.toFixed(2)}}</span>
<span class="fz15"></span>
</div>
</div>
<div class="row-c justify-sb py20" v-if="item.CustomerPayType==1 ||item.CustomerPayType==3">
<span class="fz12 c9e">出发前付款</span>
<div class="ml">
<span class="fz10 ml">¥</span>
<span class="fz14">{{item.SelfPayMoney.toFixed(2)}}</span>
<span class="fz14"></span>
</div>
</div>
<div class="row-c justify-sb py20" v-if="item.CustomerPayType==2 ||item.CustomerPayType==3">
<span class="fz12 c9e">出发前付款</span>
<div class="ml">
<span class="fz10 ml">¥</span>
<span class="fz14">{{item.BeforeMoney.toFixed(2)}}</span>
<span class="fz14"></span>
</div>
</div>
</div>
<div class="column justify-c px15 bgf5 radius5 ml fz12 orderop pa20 flex-s">
<div class="row-c cursor-pointer radius5 cancel">
<span class="cF1416C">取消订单</span>
</div>
<div class="row-c cursor-pointer radius5 change">
<span class="c059FF6">订单变更</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['OrderList'],
data() {
return {
};
},
methods: {
setEdate() {
return this.addMoth(new Date().Format("yyyy-MM-dd"), 1)
},
addMoth(d, m) {
let ds = d.split('-'),
_d = ds[2] - 0;
let nextM = new Date(ds[0], ds[1] - 1 + m + 1, 0);
let max = nextM.getDate();
d = new Date(ds[0], ds[1] - 1 + m, _d > max ? max : _d);
return d.toLocaleDateString().match(/\d+/g).join('-')
},
com_onresize() {
//clientHeight的值由DIV内容的实际高度和CSS中的padding值决定,
var contentsHeight = document.body.clientHeight;
var h = contentsHeight - 50 - 180 - 40;
if (h < 110) {
return;
}
//设置table的行高
// this.tableHeight = h;
},
},
mounted() {
//自适应高度调节
this.com_onresize();
window.onresize = () => {
this.com_onresize();
}
},
};
</script>
<style>
</style>
\ No newline at end of file
...@@ -951,6 +951,14 @@ export default { ...@@ -951,6 +951,14 @@ export default {
title: '酒店工作表' title: '酒店工作表'
}, },
}, },
{
path: '/HotelOrderList', //酒店预定
name: 'HotelOrderList',
component: resolve => require(['@/components/Hotel/reservation/HotelOrderList'], resolve),
meta: {
title: '预定订单'
},
},
{ {
path: '/RestauranOrder', //餐厅订单信息 path: '/RestauranOrder', //餐厅订单信息
name: 'RestauranOrder', name: 'RestauranOrder',
......
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