Skip to content

H
HotelProject
Commit 9712f7c0 authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

update

parent a60baa08
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1250 additions and 248 deletions
src/assets/utils/calendarUtils.js 0 → 100644
View file @ 9712f7c0
import { weekdays } from "moment";
var calendarUtils = {
//选中状态
checkState: {
noChecked: "0", //未选中
checked: "1", //选中
hasValue: "2" //有值
},
/*
* 获取当前日期
* 返回json对象
*/
getCurrentDate() {
var d = new Date();
return {
CurrentYear: d.getFullYear(),
CurrentMonth: d.getMonth() + 1,
CurrentDay: d.getDate(),
CurrentDateStr: calendarUtils.formatDate2(d)
};
},
//初始化日历 一 二 三 四 五 六 日
createCalendar: function (dateStr) {
var days = [];
var date;
if (dateStr) {
date = new Date(dateStr);
} else {
var now = new Date();
date = new Date(calendarUtils.formatDate(now.getFullYear(), now.getMonth() + 1, 1));
}
var currentDay = date.getDate();
var currentYear = date.getFullYear();
var currentMonth = date.getMonth() + 1;
var currentWeek = date.getDay(); // 1...6,0
if (currentWeek == 0) {
currentWeek = 7;
}
var str = calendarUtils.formatDate(
currentYear,
currentMonth,
currentDay
);
days.length = 0;
// 今天是周日，放在第一行第7个位置，前面6个
//初始化本周
for (var i = currentWeek - 1; i >= 0; i--) {
var d = new Date(str);
d.setDate(d.getDate() - i);
var dayobject = {};
dayobject.day = d;
days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
}
//其他周
var temp = 35;
if (
currentWeek +
new Date(currentYear, currentMonth, 0).getDate() >
temp + 1
) {
temp = 42;
}
for (var i = 1; i <= temp - currentWeek; i++) {
var d = new Date(str);
d.setDate(d.getDate() + i);
var dayobject = {};
dayobject.day = d;
days.push(dayobject);
}
return {
DayArray: days,
CurrentDay: currentDay,
CurrentMonth: currentMonth,
CurrentYear: currentYear,
CurrentWeek: currentWeek
};
},
//初始化日历 日 一 二 三 四 五 六
createCalendar_V2: function (dateStr) {
var days = [];
var date;
if (dateStr) {
date = new Date(dateStr);
} else {
var now = new Date();
date = new Date(calendarUtils.formatDate(now.getFullYear(), now.getMonth() + 1, 1));
}
var currentDay = date.getDate();
var currentYear = date.getFullYear();
var currentMonth = date.getMonth() + 1;
var currentWeek = date.getDay(); // 1...6,0
var str = calendarUtils.formatDate(
currentYear,
currentMonth,
currentDay
);
days.length = 0;
// 当月第一天是周日，放在第一行第1个位置，前面0个
//初始化第一周
for (var i =currentWeek ;i>=0; i--) {
var d = new Date(str);
d.setDate(d.getDate() - i);
var dayobject = {};
dayobject.day = d;
days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
}
//其他周
var temp = 35;
if (
currentWeek +
new Date(currentYear, currentMonth, 0).getDate() >35
) {
temp = 41;
}
for (var i = 1; i < temp - currentWeek; i++) {
var d = new Date(str);
d.setDate(d.getDate() + i);
var dayobject = {};
dayobject.day = d;
days.push(dayobject);
}
return {
DayArray: days,
CurrentDay: currentDay,
CurrentMonth: currentMonth,
CurrentYear: currentYear,
CurrentWeek: currentWeek
};
},
// 返回 类似 2016-01-02 格式的字符串
formatDate: function (year, month, day) {
var y = year;
var m = month;
if (m < 10) m = "0" + m;
var d = day;
if (d < 10) d = "0" + d;
return y + "-" + m + "-" + d;
},
//格式化日期 参数:日期对象
formatDate2: function (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
if (m < 10) m = "0" + m;
var d = date.getDate();
if (d < 10) d = "0" + d;
return y + "-" + m + "-" + d;
},
//日历全选
checkAll(dayArr, isCheckAll) {
var DateArr = [];
dayArr.forEach(x => {
var nowDate = x.day;
var _string = calendarUtils.formatDate(
nowDate.getFullYear(),
nowDate.getMonth() + 1,
nowDate.getDate()
);
if (x.checkState) {
if (isCheckAll) {
if (x.checkState != calendarUtils.checkState.hasValue) {
x.checkState = calendarUtils.checkState.checked;
DateArr.push(_string);
}
} else {
if (x.checkState == calendarUtils.checkState.checked) {
x.checkState = calendarUtils.checkState.noChecked;
calendarUtils.removeByValue(DateArr, _string);
}
}
}
});
return DateArr;
},
//日历天点击事件
dayClick: function (dayobject, chooseDayArray) {
var nowDate = dayobject.day;
var _string = calendarUtils.formatDate(
nowDate.getFullYear(),
nowDate.getMonth() + 1,
nowDate.getDate()
);
if (dayobject.checkState == calendarUtils.checkState.noChecked) {
chooseDayArray.push(_string);
dayobject.checkState = calendarUtils.checkState.checked;
} else if (dayobject.checkState == calendarUtils.checkState.checked) {
dayobject.checkState = calendarUtils.checkState.noChecked;
calendarUtils.removeByValue(chooseDayArray, _string);
}
},
//日历修改设置
daySetCheck(dayArr, index) {
dayArr.forEach((x, subindex) => {
if (x.checkState) {
if (subindex != index) {
x.checkState = calendarUtils.checkState.noChecked;
} else {
x.checkState = calendarUtils.checkState.hasValue;
}
}
});
},
//点击取消
resetChekState(days) {
days.forEach(x => {
if (x.class) {
x.checkState = calendarUtils.checkState.hasValue;
}
});
},
//根据值移除数组的值
removeByValue: function (arr, val) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == val) {
arr.splice(i, 1);
break;
}
}
},
//日期添加天数
addDay: function (str, days) {
var d = new Date(str);
d.setDate(d.getDate() + days);
return calendarUtils.formatDate(d.getFullYear(), d.getMonth() + 1, d.getDate());
},
/**
* 判断日期是否在区间内，在区间内返回true，否返回false
* @param dateString 日期字符串
* @param startDateString 区间开始日期字符串
* @param endDateString 区间结束日期字符串
* @returns {Number}
*/
isDateBetween: function (dateString, startDateString, endDateString) {
if (calendarUtils.isEmpty(dateString)) {
return;
}
if (calendarUtils.isEmpty(startDateString)) {
return;
}
if (calendarUtils.isEmpty(endDateString)) {
return;
}
var flag = false;
var startFlag = (calendarUtils.dateCompare(dateString, startDateString) < 1);
var endFlag = (calendarUtils.dateCompare(dateString, endDateString) > -1);
if (startFlag && endFlag) {
flag = true;
}
return flag;
},
/**
* 日期比较大小
* compareDateString大于dateString，返回1；
* 等于返回0；
* compareDateString小于dateString，返回-1
* @param dateString 日期
* @param compareDateString 比较的日期
*/
dateCompare: function (dateString, compareDateString) {
if (calendarUtils.isEmpty(dateString)) {
return;
}
if (calendarUtils.isEmpty(compareDateString)) {
return;
}
var dateTime = calendarUtils.dateParse(dateString).getTime();
var compareDateTime = calendarUtils.dateParse(compareDateString).getTime();
if (compareDateTime > dateTime) {
return 1;
} else if (compareDateTime == dateTime) {
return 0;
} else {
return -1;
}
},
/* 日期解析，字符串转日期
* @param dateString 可以为2017-02-16，2017/02/16，2017.02.16
* @returns {Date} 返回对应的日期对象
*/
dateParse: function (dateString) {
var SEPARATOR_BAR = "-";
var SEPARATOR_SLASH = "/";
var SEPARATOR_DOT = ".";
var dateArray;
if (dateString.indexOf(SEPARATOR_BAR) > -1) {
dateArray = dateString.split(SEPARATOR_BAR);
} else if (dateString.indexOf(SEPARATOR_SLASH) > -1) {
dateArray = dateString.split(SEPARATOR_SLASH);
} else {
dateArray = dateString.split(SEPARATOR_DOT);
}
return new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
},
//判断字符串是否为空
isEmpty: function (str) {
if (str == "") {
return true;
}
return false;
},
};
export default calendarUtils;
src/components/assetsman/HotelProductCalendar.vue 0 → 100644
View file @ 9712f7c0
<template>
<div class="hotelProductCalendar">
<div class="hotelProductCalendar_month">
<div onselectstart="return false;">
<span>{{calendar.data.date&&calendar.data.date.split('-')[0]}}年</span>
<span>{{calendar.data.date&&calendar.data.date.split('-')[1]}}月</span>
</div>
<div>
<span>酒店库存表</span>
</div>
<div>
<i class="iconfont icon-cha" @click="calendarHide()"></i>
</div>
</div>
<div class="hotelProductCalendar_week">
<div>星期一</div>
<div>星期二</div>
<div>星期三</div>
<div>星期四</div>
<div>星期五</div>
<div>星期六</div>
<div>星期天</div>
</div>
<div class="hotelProductCalendar_day">
<div v-for="(item, index) in calendar.data.days" :key="index">
<div :class="item.month===calendar.data.date?'nowMonth':'otherMonth'">
<span>{{item.date.getMonth()+1}}-{{item.date.getDate()}}</span>
</div>
<div v-if="item.data&&item.month===calendar.data.date" :class="stockColor(item.data.SubList[0].InventoryType)">
<template v-for="(childItem,childIndex) in item.data.SubList">
<p>
<span title="点击修改价格和库存信息">
价格：<span @click="goUrlA('2', item,childItem.BatchNumber)" class="text_underLine">{{childItem.CostPrice}}（{{childItem.CurrencyName}}）</span>
</span><br/>
<span title="点击跳转到总库存看板">
总库存：<span class="text_underLine" @click="goUrlB(item)">{{childItem.Inventory}}（间）</span>
</span><br/>
<span title="点击跳转到酒店查询">
剩余库存：<span class="text_underLine" @click="goUrlHotelTeam(item)">{{childItem.RemainingInventory}}（间）</span>
</span>
</p>
</template>
</div>
<div class="noStock" v-if="!item.data&&item.month===calendar.data.date">
<p><span>暂无数据</span></p>
<p><span @click="goUrlA('1', item,1)">立即新增</span></p>
</div>
<div class="hasStock" v-if="item.month!==calendar.data.date">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
'calendar': {
type: Object,
default: function () {
return {
show: false,
data: {}
}
}
}
},
methods: {
stockColor: function (type) {
if (type === 1) {
return 'hasStock hasStock_1'
} else if (type === 2) {
return 'hasStock hasStock_2'
} else if (type === 3) {
return 'hasStock hasStock_3'
} else if (type === 4) {
return 'hasStock hasStock_4'
} else if (type === 5) {
return 'hasStock hasStock_5'
}
},
calendarHide: function () {
this.calendar.show = false
this.calendar.data = {}
},
goUrlA: function (type, item,BatchNumber) {
this.$emit('goEdit', type, item.day,BatchNumber)
},
goUrlHotelTeam: function (item) {
this.$router.push({
name: 'HotelsTeam',
query: {
HotelId: item.data.HotelId,
StartDate: item.data.DayStr,
blank: 'y',
tab: '酒店相关团'
}
});
},
goUrlB: function (item) {
this.$router.push({
name: 'HotelTotalStock',
query: {
HotelId: this.hotelId,
blank: 'y',
tab: '总库存看板'
}
});
}
}
}
</script>
<style scoped>
.hotelProductCalendar {
width: 100%;
font-size: 0px;
box-sizing: border-box;
background-color: #f5f5f5;
}
.hotelProductCalendar_month {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background: #e95252;
border-radius: 4px 4px 0 0;
}
.hotelProductCalendar_month>div {
display: inline-block;
height: 50px;
line-height: 50px;
vertical-align: top;
}
.hotelProductCalendar_month>div:nth-child(1)>i {
display: inline-block;
font-size: 22px;
color: #ff7e7e;
cursor: pointer;
vertical-align: middle;
}
.hotelProductCalendar_month>div:nth-child(1)>input {
display: inline-block;
width: 60px;
height: 30px;
border-radius: 17px;
outline: none;
border: none;
color: #fff;
background: transparent;
font-size: 18px;
text-align: center;
vertical-align: middle;
}
.hotelProductCalendar_month>div:nth-child(1)>span {
display: inline-block;
padding: 0 5px;
font-size: 18px;
color: #fff;
vertical-align: middle;
}
.hotelProductCalendar_month>div:nth-child(2)>span {
display: inline-block;
padding: 0 20px;
font-size: 18px;
color: #fff;
}
.hotelProductCalendar_month>div:nth-child(3) {
position: absolute;
z-index: 1;
right: 0px;
top: 0px;
width: 50px;
text-align: center;
}
.hotelProductCalendar_month>div:nth-child(3)>i {
font-size: 12px;
color: #ffffff;
cursor: pointer;
}
.hotelProductCalendar_week {
width: 100%;
height: 28px;
background-color: #3fa783;
}
.hotelProductCalendar_week>div {
display: inline-block;
width: 14.2857%;
height: 28px;
line-height: 28px;
text-align: center;
font-size: 14px;
color: #FFFFFF;
}
.hotelProductCalendar_day {
width: 100%;
border-left: 1px solid #dddddd;
}
.hotelProductCalendar_day>div {
display: inline-block;
width: 14.2857%;
height: 148px;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
vertical-align: top;
}
.hotelProductCalendar_day>div>div:nth-child(1) {
width: 100%;
height: 28px;
line-height: 28px;
text-align: center;
}
.hotelProductCalendar_day>div>div:nth-child(1)>span {
font-size: 14px;
}
.hotelProductCalendar_day>div>.nowMonth {
background-color: #CCCCCC;
}
.hotelProductCalendar_day>div>.nowMonth>span {
color: #000000;
}
.hotelProductCalendar_day>div:nth-child(7n-1)>.nowMonth>span {
color: #e95252;
}
.hotelProductCalendar_day>div:nth-child(7n)>.nowMonth>span {
color: #e95252;
}
.hotelProductCalendar_day>div>.otherMonth {
background-color: #DDDDDD;
}
.hotelProductCalendar_day>div>.otherMonth>span {
color: #999999;
}
.hotelProductCalendar_day>div>.hasStock {
width: 100%;
height: 120px;
overflow-y: auto;
}
.hotelProductCalendar_day>div>.hasStock>p {
width: 100%;
min-height: 20px;
padding: 0 10px;
line-height: 19px;
font-size: 12px;
border-bottom: 1px dashed #ccc;
}
.hotelProductCalendar_day>div>.hasStock_1 {
color: #FFFFFF;
background-color: #ff3737;
}
.hotelProductCalendar_day>div>.hasStock_2 {
background-color: #ff99cc;
}
.hotelProductCalendar_day>div>.hasStock_3 {
background-color: #bcd6ee;
}
.hotelProductCalendar_day>div>.hasStock_4 {
background-color: #ffffff;
}
.hotelProductCalendar_day>div>.hasStock_5 {
background-color: #02F78E;
}
.hotelProductCalendar_day>div>.noStock {
padding: 30px 0 0 0;
width: 100%;
height: 120px;
}
.hotelProductCalendar_day>div>.noStock>p:nth-child(1) {
width: 100%;
font-size: 16px;
color: #999999;
text-align: center;
}
.hotelProductCalendar_day>div>.noStock>p:nth-child(2) {
margin: 10px 0 0 0;
width: 100%;
font-size: 12px;
color: #00C6FF;
text-align: center;
cursor: pointer;
}
.text_underLine {
cursor: pointer;
text-decoration: underline
}
</style>
src/components/assetsman/Quotation.vue
View file @ 9712f7c0
This diff is collapsed.
src/main.js
View file @ 9712f7c0
......@@ -17,6 +17,8 @@ import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import commonUtils from './assets/utils/commonUtils'
import calendarUtils from './assets/utils/calendarUtils' //日历帮助类
Vue.calendarUtils=Vue.prototype.$calendarUtils=calendarUtils
Vue.use(VXETable)
Vue.use(ElementUI);
......
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