Skip to content

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

酒店总库存统计页面修改

parent 69a05c01
Show whitespace changes
Inline Side-by-side
Showing with 373 additions and 451 deletions
src/components/Hotel/HotelTotalStock.vue
View file @ f6c52554
<style>
.hotelTS .el-date-editor.el-input, .el-date-editor.el-input__inner{width: 150px}
.hotelTS .hotelTS_item{width:250px;height:291px;border-radius: 4px;padding: 15px 16px;margin-right: 30px;background:rgba(255,255,255,1);cursor: pointer;}
.hotelTS .hotelTS_box>ul{padding: 30px 30px 30px 0;min-height: 500px}
.hotelTS .hotelTS_box ul li{float: left;margin-bottom: 10px;}
.hotelTS .hotelTS_item:hover{box-shadow:0px 0px 20px rgba(191,191,191,1);transition: all linear 0.5s;}
.hotelTS .hotelTS_item>img{width: 100%;height: 145px;border-radius: 4px;}
.hotelTS .hotelTS_item>p{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-size: 14px;padding-top: 7px;}
.hotelTS .hotelTS_item>div{border-top: 1px dashed #DCDFE6;margin-top: 10px;width: 100%;height: 90px;padding: 15px 0 10px 0}
.hotelTS .hotelTS_item>div .left{width: 70%;float: left;}
.hotelTS .hotelTS_item>div .left ul li{color: #666666;font-size: 12px;width: 50%;margin-bottom: 10px;cursor: pointer}
.hotelTS .hotelTS_item>div .left .radius{display: inline-block;width: 24px;height: 24px;line-height: 24px;text-align: center;border-radius: 50%;border:solid 1px #DCDFE6;color: #666666 }
.hotelTS .hotelTS_item>div .left .num{display: inline-block;padding-left: 10px;display:inline-block;vertical-align:middle; }
.hotelTS .hotelTS_item>div .left .spot{line-height: 15px; display:inline-block;vertical-align:middle;}
.hotelTS .hotelTS_item>div .left .radius.warning{background-color: red}
.hotelTS .hotelTS_item>div .right{width: 30%;float: left;height: 100%;padding-bottom: 5px;border-radius: 4px;background-color: #47BF8C;color: white}
.hotelTS .hotelTS_item>div .right p{text-align: center}
.hotelTS .hotelTS_item>div .right .num{font-size: 20px;font-weight: 600;padding-left: 5px;padding-top: 10px;}
.hotelTS .hotelTS_item>div .right .room{font-size: 12px;}
.hotelTS .date .el-input__icon{line-height: 16px;}
.hotelTS .time .el-input--prefix .el-input__inner{padding-left: 30px}
.hotelTS .query-box li label{display: inline-block;min-width: 80px;text-align: right;font-style: normal;margin: 0 20px 0 0;}
.hotelTS .el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 150px
}
.hotelTS .hotelTS_item {
width: 250px;
height: 291px;
border-radius: 4px;
padding: 15px 16px;
margin-right: 30px;
background: rgba(255, 255, 255, 1);
cursor: pointer;
}
.hotelTS .hotelTS_box>ul {
padding: 30px 30px 30px 0;
min-height: 500px
}
.hotelTS .hotelTS_box ul li {
float: left;
margin-bottom: 10px;
}
.hotelTS .hotelTS_item:hover {
box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
transition: all linear 0.5s;
}
.hotelTS .hotelTS_item>img {
width: 100%;
height: 145px;
border-radius: 4px;
}
.hotelTS .hotelTS_item>p {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 14px;
padding-top: 7px;
}
.hotelTS .hotelTS_item>div {
border-top: 1px dashed #DCDFE6;
margin-top: 10px;
width: 100%;
height: 90px;
padding: 15px 0 10px 0
}
.hotelTS .hotelTS_item>div .left {
width: 70%;
float: left;
}
.hotelTS .hotelTS_item>div .left ul li {
color: #666666;
font-size: 12px;
width: 50%;
margin-bottom: 10px;
cursor: pointer
}
.hotelTS .hotelTS_item>div .left .radius {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 50%;
border: solid 1px #DCDFE6;
color: #666666
}
.hotelTS .hotelTS_item>div .left .num {
display: inline-block;
padding-left: 10px;
display: inline-block;
vertical-align: middle;
}
.hotelTS .hotelTS_item>div .left .spot {
line-height: 15px;
display: inline-block;
vertical-align: middle;
}
.hotelTS .hotelTS_item>div .left .radius.warning {
background-color: red
}
.hotelTS .hotelTS_item>div .right {
width: 30%;
float: left;
height: 100%;
padding-bottom: 5px;
border-radius: 4px;
background-color: #47BF8C;
color: white
}
.hotelTS .hotelTS_item>div .right p {
text-align: center
}
.hotelTS .hotelTS_item>div .right .num {
font-size: 20px;
font-weight: 600;
padding-left: 5px;
padding-top: 10px;
}
.hotelTS .hotelTS_item>div .right .room {
font-size: 12px;
}
.hotelTS .date .el-input__icon {
line-height: 16px;
}
.hotelTS .time .el-input--prefix .el-input__inner {
padding-left: 30px
}
.hotelTS .query-box li label {
display: inline-block;
min-width: 80px;
text-align: right;
font-style: normal;
margin: 0 20px 0 0;
}
/* 日期样式开始 */
.hotelTS #calendar {
.hotelTS #calendar {
width: 639px;
height: 345px;
margin: 0 auto;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.hotelTS .month ul {
}
.hotelTS .month ul {
border-radius: 4px 4px 0 0;
width: 932px;
height: 50px;
......@@ -37,51 +151,61 @@
margin: 0;
padding: 0;
justify-content: space-between;
}
.hotelTS .year-month {
}
.hotelTS .year-month {
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.hotelTS .year-month > input {
}
.hotelTS .year-month>input {
width: 100px;
float: left;
}
.hotelTS .arrow {
}
.hotelTS .arrow {
padding: 10px;
font-style: normal;
cursor: pointer;
}
.hotelTS .monthminus {
}
.hotelTS .monthminus {
position: absolute;
left: 0px;
top: 15px;
}
.hotelTS .monthadd {
}
.hotelTS .monthadd {
position: absolute;
right: 21px;
top: 15px;
}
.hotelTS .month ul li:first-child {
}
.hotelTS .month ul li:first-child {
margin-left: 310px;
}
.hotelTS .month ul li {
}
.hotelTS .month ul li {
font-size: 18px;
color: #fff;
position: relative;
text-transform: uppercase;
float: left;
letter-spacing: 3px;
}
.hotelTS .month ul li i {
}
.hotelTS .month ul li i {
font-size: 22px;
color: #ff7e7e;
cursor: pointer;
}
.hotelTS .month ul li > input {
}
.hotelTS .month ul li>input {
text-align: center;
}
.hotelTS .weekdays {
}
.hotelTS .weekdays {
margin: 0;
padding: 3px 0;
background-color: #13b0ae;
......@@ -90,13 +214,15 @@
flex-wrap: wrap;
color: #fff;
justify-content: space-around;
}
.hotelTS .weekdays li {
}
.hotelTS .weekdays li {
display: inline-block;
width: 133px;
text-align: center;
}
.hotelTS .days {
}
.hotelTS .days {
width: 100%;
padding: 0;
margin: 0;
......@@ -104,8 +230,9 @@
flex-wrap: wrap;
box-sizing: border-box;
justify-content: space-around;
}
.hotelTS .days li {
}
.hotelTS .days li {
list-style-type: none;
width: 133px;
height: 110px;
......@@ -119,9 +246,9 @@
box-sizing: border-box;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
}
.hotelTS .currentInput {
.hotelTS .currentInput {
width: 120px;
height: 30px;
border-radius: 17px;
......@@ -130,8 +257,9 @@
color: #fff;
background: transparent;
font-size: 18px;
}
.hotelTS .days li .other-month {
}
.hotelTS .days li .other-month {
display: inline-block;
position: absolute;
right: 0;
......@@ -142,132 +270,86 @@
line-height: 17px;
background-color: #cccccc;
color: #fff;
}
.hotelTS .addCompany {
}
.hotelTS .addCompany {
width: 700px;
}
.hotelTS .ckStyle {
}
.hotelTS .ckStyle {
position: absolute;
font-size: 12px;
top: 8px;
right: 8px;
color: #808080;
}
.hotelTS .el-dialog--center .el-dialog__body {
}
.hotelTS .el-dialog--center .el-dialog__body {
padding-top: 0;
}
.hotelTS .HB_Inventor {
}
.hotelTS .HB_Inventor {
display: block;
text-align: left;
padding-top: 8px;
}
.hotelTS .HB_Inventor > span {
}
.hotelTS .HB_Inventor>span {
display: block;
padding-left: 10px;
font-size: 12px;
height: 18px;
margin-bottom: 3px;
}
.hotelTS .Owe_Room {
}
.hotelTS .Owe_Room {
color: #e95252;
}
.hotelTS .Used_room {
}
.hotelTS .Used_room {
color: #13b0ae;
}
.hotelTS .otherMoth {
background: #f2f2f2;
}
.HT_nowInventory{
font-size:14px;
color:green;
}
.Remain_num{
color:#9cf;
font-size:24px;
margin-left:10px;
font-weight: bold;
}
/* 日期样式结束*/
</style>
<template>
<div class="flexOne hotelTS">
}
<div v-show="outerVisible" @click="outerVisible=false" style="position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 99; background: rgba(0,0,0,.5);">
<div @click.stop class="ownScrollbarStyle" style="overflow-y: auto; position: absolute; width: 992px; box-sizing: border-box; padding: 30px 0 30px 30px; height:700px; border-radius: 4px; background: #fff; left: 50%; top: 50%; margin-left: -496px; margin-top: -350px;">
<i @click="outerVisible=false" class="el-icon-close" style="position: absolute; cursor:pointer; right: 5px; top: 5px; color: #ccc; font-size: 14px;"></i>
<div class="month">
<ul>
<li>
<i class="el-icon-caret-left monthminus" @click="currentYear-=1,getDateString(),initCalendar(dateString)"></i>
<input type="text" disabled="disabled" v-model="currentYear" class="currentInput" @input="getDateString(),initCalendar(dateString)" />年
<i class="el-icon-caret-right monthadd" @click="currentYear+=1,getDateString(),initCalendar(dateString)"></i>
</li>
<li>
<i class="el-icon-caret-left monthminus" @click="pickPre(currentYear,currentMonth)"></i>
<input type="text" disabled="disabled" v-model="currentMonth" class="currentInput" @input="getDateString(),initCalendar(dateString)" />月
<i class="el-icon-caret-right monthadd" @click="pickNext(currentYear,currentMonth)"></i>
</li>
</ul>
</div>
.hotelTS .otherMoth {
background: #f2f2f2;
}
<ul class="weekdays">
<li>{{$t('hotel.hotel_Monday')}}</li>
<li>{{$t('hotel.hotel_Tuesday')}}</li>
<li>{{$t('hotel.hotel_Wednesday')}}</li>
<li>{{$t('hotel.hotel_Thursday')}}</li>
<li>{{$t('hotel.hotel_Friday')}}</li>
<li class="colorE95252">{{$t('hotel.hotel_Saturday')}}</li>
<li class="colorE95252">{{$t('hotel.hotel_Sunday')}}</li>
</ul>
.HT_nowInventory {
font-size: 14px;
color: green;
}
<ul class="days clearfix">
<li :class="{otherMoth:dayobject.day.getMonth()+1 != currentMonth}" @click="goUrl(dayobject)" v-for="(dayobject,index) in days"
:key="dayobject.subCode">
<span class="ckStyle">
{{dayobject.day.getDate()}}
</span>
<span class="HB_Inventor" v-if="dayobject.Inventory||dayobject.UseAmount">
<span>库存：{{dayobject.Inventory}}</span>
<span>已用：<span class="Used_room">{{dayobject.UseAmount}}</span></span>
<span>欠房：<span class="Owe_Room">{{dayobject.OweRoom}}</span></span>
<span>确定：<span class="Owe_Room">{{dayobject.SureAmount}}</span></span>
</span>
</li>
</ul>
</div>
</div>
.Remain_num {
color: #9cf;
font-size: 24px;
margin-left: 10px;
font-weight: bold;
}
/* 日期样式结束*/
</style>
<template>
<div class="flexOne hotelTS">
<div class="query-box">
<ul>
<li>
<label class="">{{$t('system.quety_area')}}</label>
<el-select v-model="msg.Country" clearable filterable @change="getProvinceList(msg.Country,1)" :placeholder="$t('system.table_country')">
<el-option :label="$t('pub.unlimitedSel')" value=''></el-option>
<el-option v-for='item in countryList' :key="item.ID" :label="item.Name" :value="item.ID">
</el-option>
</el-select>
<el-select v-model="msg.Province" filterable @change="getProvinceList(msg.Province,2)" :placeholder="$t('hotel.hotel_province')">
<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 @change="getProvinceList(msg.City,3)" :placeholder="$t('hotel.hotel_city')">
<el-option v-for='item in cityList' :key="item.ID" :label="item.Name" :value="item.ID">
</el-option>
</el-select>
<el-select v-model="msg.District" filterable :placeholder="$t('hotel.hotel_area')">
<el-option v-for='item in district' :key="item.ID" :label="item.Name" :value="item.ID">
</el-option>
<span>
<em>酒店</em>
<el-select v-model="msg.HotelId" :placeholder="$t('pub.pleaseSel')" filterable>
<el-option :label="$t('pub.unlimitedSel')" :value="0"></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 class='time'>
<div class="block date">
<label class="demonstration">{{$t('pub.date')}}</label>
<el-date-picker v-model="msg.sDate" type="date" :placeholder="$t('admin.admin_choDate')" value-format="yyyy-MM-dd"
:picker-options="pickerOptions1">
<el-date-picker v-model="msg.sDate" type="date" :placeholder="$t('admin.admin_choDate')"
value-format="yyyy-MM-dd" :picker-options="pickerOptions1">
</el-date-picker>
<el-date-picker v-model="msg.eDate" type="date" :placeholder="$t('admin.admin_choDate')" value-format="yyyy-MM-dd"
:picker-options="pickerOptions2">
<el-date-picker v-model="msg.eDate" type="date" :placeholder="$t('admin.admin_choDate')"
value-format="yyyy-MM-dd" :picker-options="pickerOptions2">
</el-date-picker>
</div>
</li>
......@@ -288,48 +370,33 @@
<el-tooltip effect="dark" :content="item.Name" placement="top-start">
<p>{{item.Name}}</p>
</el-tooltip>
<p><span class="HT_nowInventory">目前库存</span><span class='Remain_num'>{{item.RemainingInventory}}</span>/间</p>
<p><span class="HT_nowInventory">目前库存</span><span class='Remain_num'>{{item.RemainingInventory}}</span>/间
</p>
</div>
</li>
</ul>
</div>
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper"
:page-size="msg.pageSize" :total="total"></el-pagination>
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="msg.total"></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
outerVisible: false,
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
//每天的酒店库存
DayData: [],
HotelId: 0,
HotelName: "",
//酒店列表
HotelList: [],
msg: {
pageIndex: 1,
pageSize: 12,
HotelId: '0',
Country: '',
Province: '',
City: '',
District: '',
HotelId: 0,
sDate: new Date().Format("yyyy-MM-dd"),
eDate: this.setEdate(),
},
DataAllList: [],
DataList: [],
countryList: '',
provinceList: '',
cityList: '',
district: '',
total: 0,
currentPage: 1,
},
DataList: [],
loading: true,
noData: false,
defaultImg: 'this.src="' + require('../../assets/img/bg_z1@2x.png') + '"',
......@@ -348,28 +415,16 @@
}
},
methods: {
goUrl(obj) {
this.$router.push({
name: 'HotelDetailsByTuan',
query: {
"id": obj.HotelId,
date: obj.CheckInDate,
blank: 'y',
tab: '酒店用房详情'
}
})
},
goUrlHotel (path,id) {
goUrlHotel(path, id) {
this.$router.push({
name: path,
query:{
"id":id,
query: {
"id": id,
blank: 'y',
tab: '酒店统计'
}
})
},
getList() {
this.loading = true;
if (this.msg.sDate == null) {
......@@ -381,53 +436,11 @@
this.apipost('hotel_post_GetStockPageList', this.msg, res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.total = res.data.data.count;
if (this.total > 0) {
this.loading = false;
this.msg.total = res.data.data.count;
this.DataList = res.data.data.pageData;
console.log("this.DataList",this.DataList);
this.noData = false;
} else {
this.noData = true;
this.DataList = [];
}
} else {
this.noData = true;
}
}, err => {})
},
getProvinceList(ID, type) { //根据省份获取城市
let msg = {
Id: ID
};
if (type == 1) {
this.msg.Province = '';
this.msg.City = '';
this.msg.District = '';
this.provinceList = [];
} else if (type == 2) {
this.msg.City = '';
this.msg.District = '';
} else if (type == 3) {
this.msg.District = '';
}
if (this.msg.Country !== '') {
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;
} else if (type == 3) {
this.district = res.data.data;
this.noData = !this.msg.total > 0;
}
}, err => {})
}
},
getCountryList() { //获取国家
let msg = {};
this.apipost('dict_post_Destination_GetCountry', msg, res => {
this.countryList = res.data.data;
}, err => {})
},
handleCurrentChange(val) { //翻页功能按钮
this.msg.pageIndex = val;
......@@ -435,27 +448,25 @@
},
resetPageIndex() { //查询初始化页码
this.msg.pageIndex = 1;
this.currentPage = 1
this.msg.currentPage = 1
},
setEdate() { //默认查询三个月时间
return this.addMoth(new Date().Format("yyyy-MM-dd"), 3)
},
detailsInventory(path, HotelID, ProductID) {
if (this.msg.sDate == null) {
this.msg.sDate = new Date().Format("yyyy-MM-dd")
}
if (this.msg.eDate == null) {
this.msg.eDate = this.setEdate()
}
this.$router.push({
path: path,
query: {
"HotelID": HotelID,
"ProductID": ProductID,
"sDate": this.msg.sDate,
"eData": this.msg.eDate
//获取酒店列表
GetHotelList() {
this.apipost(
"hotel_post_GetHasStockHotelList", {
Country: 651,
IsMoreThanZero: 1
},
res => {
if (res.data.resultCode == 1) {
this.HotelList = res.data.data;
}
})
},
err => {}
);
},
addMoth(d, m) {
let ds = d.split('-'),
......@@ -465,101 +476,12 @@
d = new Date(ds[0], ds[1] - 1 + m, _d > max ? max : _d);
return d.toLocaleDateString().match(/\d+/g).join('-')
},
getDateString: function () {
this.dateString = this.$calendarUtils.formatDate(
this.currentYear,
this.currentMonth,
1
);
this.GetHoltelInventory(this.HotelId);
},
initCalendar: function (cur) {
var newDays = this.$calendarUtils.createCalendar(cur);
this.currentDay = newDays.CurrentDay;
this.currentYear = newDays.CurrentYear;
this.currentMonth = newDays.CurrentMonth;
this.currentWeek = newDays.CurrentWeek;
this.days.length = 0;
var dateArray = newDays.DayArray;
for (var i = 0; i < dateArray.length; i++) {
var d = dateArray[i].day;
var dayobject = {};
dayobject.day = d;
this.days.push(dayobject);
}
},
//点击左箭头切换年月
pickPre: function (year, month) {
var d = new Date(this.$calendarUtils.formatDate(year, month, 1));
d.setDate(0);
this.nowDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-1";
this.initCalendar(
this.$calendarUtils.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
);
this.GetHoltelInventory(this.HotelId);
},
//点击右箭头切换年月
pickNext: function (year, month) {
var d = new Date(this.$calendarUtils.formatDate(year, month, 1));
d.setDate(35);
this.nowDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-1";
this.initCalendar(
this.$calendarUtils.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
);
this.GetHoltelInventory(this.HotelId);
},
//点击获取酒店库存数据
GetHoltelInventory(HotelId) {
this.outerVisible = true;
this.HotelId = HotelId;
var qMsg = {
HotelId: this.HotelId,
Year: this.currentYear,
Month: this.currentMonth
};
this.apipost(
"hotelreport_get_GetHotelStatistics",
qMsg,
res => {
this.DayData = res.data.data;
this.days.forEach(dayItem => {
var d = dayItem.day;
var myDate = this.$calendarUtils.formatDate(
d.getFullYear(),
d.getMonth() + 1,
d.getDate()
);
for (var j = 0; j < this.DayData.length; j++) {
if (this.DayData[j].DayStr == myDate) {
//库存
dayItem.Inventory = this.DayData[j].Inventory;
//已用
dayItem.UseAmount = this.DayData[j].UseAmount;
//欠房
var OweRoom =
parseFloat(dayItem.Inventory) - parseFloat(dayItem.UseAmount);
if (OweRoom < 0) {
dayItem.OweRoom = Math.abs(OweRoom);
}
dayItem.SureAmount = this.DayData[j].SureAmount;
dayItem.HotelId = this.DayData[j].HotelId;
dayItem.CheckInDate = this.DayData[j].DayStr;
}
}
});
this.$forceUpdate();
},
err => {}
);
}
},
mounted() {
this.msg.HotelId = this.$route.query.HotelId === undefined ? '0' : this.$route.query.HotelId
this.initCalendar();
this.getList();
this.getCountryList();
this.GetHotelList();
},
}
</script>
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