日历
<template>
<div>
<div class="content-header">
<h1>预约管理<small>预约设置</small></h1>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>预约管理</el-breadcrumb-item>
<el-breadcrumb-item>预约设置</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="app-container">
<div class="box">
<div class="box ordersetting">
<el-card class="box-card">
<div class="boxMain">
<el-button
style="margin-bottom: 20px; margin-right: 20px"
type="primary"
@click="downloadTemplate()"
>模板下载</el-button
>
<el-upload
:action="uploadAction"
name="excelFile"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="beforeUpload"
>
<el-button type="primary">上传文件</el-button>
</el-upload>
</div>
<div>
操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
</div>
</el-card>
<div class="calendar">
<!-- 年份 月份 -->
<div class="month">
<div class="currentdate">
<span class="choose-year">{{ currentYear }}年</span>
<span class="choose-month">{{ currentMonth }}月</span>
</div>
<div class="choose">
<span
@click="goCurrentMonth(currentYear, currentMonth)"
class="gotoday"
>今天</span
>
<span @click="pickPre(currentYear, currentMonth)">❮</span>
<span @click="pickNext(currentYear, currentMonth)">❯</span>
</div>
<div class="clearfix"></div>
</div>
<!-- 星期 -->
<div class="caldate">
<ul class="weekdays">
<li>周一</li>
<li>周二</li>
<li>周三</li>
<li>周四</li>
<li>周五</li>
<li>周六</li>
<li>周日</li>
</ul>
<!-- 日期 -->
<ul class="days">
<!-- v-for循环 每一次循环用<li>标签创建一天 -->
<li v-for="(dayobject, index) in days" :key="index">
<template>
<!-- 非当前月份 -->
<div
class="other-month"
v-if="dayobject.day.getMonth() + 1 != currentMonth"
>
{{ dayobject.day.getDate() }}
</div>
<!-- 当前月 -->
<div
class="everyday"
v-if="dayobject.day.getMonth() + 1 == currentMonth"
>
<span class="datenumber">{{
dayobject.day.getDate()
}}</span>
<template>
<template v-for="obj in leftobj">
<template v-if="obj.date == dayobject.day.getDate()">
<template v-if="obj.number > obj.reservations">
<div class="usual">
<p>可预约{{ obj.number }}人</p>
<p>已预约{{ obj.reservations }}人</p>
</div>
</template>
<template v-else>
<div class="fulled">
<p>可预约{{ obj.number }}人</p>
<p>已预约{{ obj.reservations }}人</p>
<p>已满</p>
</div>
</template>
</template>
</template>
<button
v-if="dayobject.day > today"
@click="handleOrderSet(dayobject.day)"
class="orderbtn"
>
设置
</button>
</template>
</div>
</template>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getOrderSettingByMonth,editNumberByDate } from "@/api/orderManage/orderSetting";
export default {
name: "OrderSetting",
data() {
return {
today: new Date(), //当前日期
currentDay: 1,
currentMonth: 1,
LocalMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
leftobj: [], //用于装载页面显示的月份已经进行预约设置的数据
uploadAction: process.env.VUE_APP_API + "/orderSetting/upload.do", //上传文件地址
};
},
created() {
//在vue初始化时调用
this.initData(null);
},
methods: {
//预约设置
handleOrderSet(day) {
this.$prompt("请输入可预约人数", "预约设置", {
confirmButtonText: "确定",
cancelButtonText: "取消",
inputPattern: /^[0-9]*[1-9][0-9]*$/,
inputErrorMessage: "只能输入正整数",
})
.then(({ value }) => {
//发送ajax请求根据日期修改可预约人数
editNumberByDate({
orderDate: this.formatDate(
day.getFullYear(),
day.getMonth() + 1,
day.getDate()
),
number: value,
}).then((response) => {
if (response.data.flag) {
this.initData(
this.formatDate(day.getFullYear(), day.getMonth() + 1, 1)
);
this.$message({
type: "success",
message: response.data.message,
});
} else {
this.$message.error(response.data.message);
}
});
})
},
//上传之前进行文件格式校验
beforeUpload(file) {
const isXLS = file.type === "application/vnd.ms-excel";
if (isXLS) {
return true;
}
const isXLSX =
file.type ===
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
if (isXLSX) {
return true;
}
this.$message.error("上传文件只能是xls或者xlsx格式!");
return false;
},
//下载模板文件
downloadTemplate() {
window.location.href = "/template/ordersetting_template.xlsx";
},
//上传成功提示
handleSuccess(response, file) {
if (response.flag) {
this.$message({
message: response.message,
type: "success",
});
} else {
this.$message.error(response.message);
}
},
//初始化当前页要展示的日期
initData(cur) {
var date;
var index = 0; //控制显示预定的天数
if (cur) {
date = new Date(cur);
} else {
var now = new Date();
var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
d.setDate(35);
date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
}
this.currentDay = date.getDate();
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth() + 1;
this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）
var today = new Date();
this.LocalMonth = today.getMonth() + 1;
if (this.currentWeek == 0) {
this.currentWeek = 7;
}
var str = this.formatDate(
this.currentYear,
this.currentMonth,
this.currentDay
);
this.days.length = 0;
// 今天是周日，放在第一行第7个位置，前面6个
//初始化本周
for (var i = this.currentWeek - 1; i >= 0; i--) {
var d = new Date(str);
d.setDate(d.getDate() - i);
var dayobject = {};
dayobject.day = d;
var now = new Date();
if (
d.getDate() === now.getDate() &&
d.getMonth() === now.getMonth() &&
d.getFullYear() === now.getFullYear()
) {
dayobject.index = index++; //从今天开始显示供预定的数量
} else if (index != 0 && index < 3) dayobject.index = index++; //从今天开始3天内显示供预定的数量
this.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
}
//其他周
for (var i = 1; i <= 35 - this.currentWeek; i++) {
var d = new Date(str);
d.setDate(d.getDate() + i);
var dayobject = {}; //dayobject {day:date,index:2}
dayobject.day = d;
var now = new Date();
if (
d.getDate() === now.getDate() &&
d.getMonth() === now.getMonth() &&
d.getFullYear() === now.getFullYear()
) {
dayobject.index = index++;
} else if (index != 0 && index < 3) dayobject.index = index++;
this.days.push(dayobject);
}
//发送ajax请求，根据当前页面对应的月份查询预约设置信息
getOrderSettingByMonth(this.currentYear, this.currentMonth).then(
(response) => {
if (response.data.flag) {
//为模型数据赋值，绑定到日历中
this.leftobj = response.data.data;
} else {
this.$message.error(response.data.message);
}
}
);
/*this.leftobj = [
{ date: 1, number: 120, reservations: 1 },
{ date: 3, number: 120, reservations: 1 },
{ date: 4, number: 120, reservations: 120 },
{ date: 6, number: 120, reservations: 1 },
{ date: 8, number: 120, reservations: 1 }
];*/
},
//切换到当前月份
goCurrentMonth(year, month) {
var d = new Date();
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
},
//向前一个月
pickPre(year, month) {
// setDate(0); 上月最后一天
// setDate(-1); 上月倒数第二天
// setDate(dx) 参数dx为 上月最后一天的前后dx天
var d = new Date(this.formatDate(year, month, 1));
d.setDate(0);
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
},
//向后一个月
pickNext(year, month) {
var d = new Date(this.formatDate(year, month, 1));
d.setDate(35); ////获取指定天之后的日期
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
},
// 返回 类似 2016-01-02 格式的字符串
formatDate(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;
},
},
};
</script>
<style scoped></style>
