1.日历组件calendar 自定义使用
2.获取时间new date()的用法
3.需求：会议室占用情况
（1）效果图
OccupySituation.vue
结构：
<template>
<div>
<div class="search-bar">
<div class="inp-bar">
<span class="inp-lable">会议室：</span>
<span class="inp-box">
<el-select v-model="locationId" placeholder="请选择会议室">
<el-option v-for="item in locationList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</span>
</div>
<div class="inp-bar">
<el-button @click="getOccupancyData" type="primary">查询</el-button>
</div>
</div>
<el-calendar v-model="currentdate" id="calendar">
<template
slot="dateCell"
slot-scope="{date, data}">
<!--自定义内容 start-->
<div>
<!--
获取月份：data.day.split('-').slice(1)[0]
获取日期：data.day.split('-').slice(2).join('-')
-->
<div class="calendar-day">
{{ data.day.split('-').slice(2).join('-') }}
</div>
<div v-for="(item, index) in occupancyData" :key="index">
<div v-if="item.month == String(data.day.split('-').slice(1)[0])">
<div v-if="item.day == String(data.day.split('-').slice(2).join('-'))">
<!-- 占用情况 -->
<div class="location-con">
<p class="location-item" v-for="location in item.records" :key="location.id">
<span class="location-status" v-for="status in auditStatusList" :key="status.id">
<i v-if="location.auditStatus == status.id">
[<i class="status-name">{{status.name}}</i>]
</i>
</span>
<span class="location-txt">{{location.roomName}}</span>
<span class="location-txt">({{location.startTime}}至{{location.endTime}})</span>
</p>
</div>
</div>
</div>
<div v-else></div>
</div>
</div>
<!-- 自定义内容 end -->
</template>
</el-calendar>
</div>
</template>
方法：
export default {
data() {
name: 'OccupySituation'
return {
currentdate: new Date(), //获取当前日期
occupancyData: [], //占用情况数据
year: '', //年份
month: '', //月份
locationId: '', //会议室id
auditStatusList: [ // 审核状态
{
id: 0,
name: '待审核'
},
{
id: 1,
name: '审核通过'
},
{
id: 2,
name: '审核不通过'
},
{
id: 3,
name: '已终止'
}
],
locationList: [], //会议场所列表
}
},
watch: {
//监听日期变化获取会议占用情况
currentdate(newVal) {
this.getOccupancyData();
}
},
mounted() {
this.getOccupancyData();
this.getLocationList();
},
methods: {
//获取会议占用情况
getOccupancyData() {
//获取当前年份和月份
this.year = this.currentdate.getFullYear();
this.month = this.currentdate.getMonth() + 1;
let param = {
year: this.year,
month: this.month,
locationId: this.locationId
};
let url = '/location/occupancy';
this.$ajax.post(url, param).then(res => {
if(res.data.code == 0){
this.occupancyData = res.data.data;
for(let i in this.occupancyData){
//获取月份
let month = this.occupancyData[i].date.split('-').slice(1)[0];
this.$set(this.occupancyData[i], 'month', month);
//获取日期
let day = this.occupancyData[i].date.split('-').slice(2).join('-');
this.$set(this.occupancyData[i], 'day', day);
}
}else{
this.$message({
message: res.data.msg,
type: 'warning'
})
}
})
},
//获取会议场所列表
getLocationList() {
let url = '/location/list';
this.$ajax.get(url).then(res => {
if(res.data.code == 0){
this.locationList = res.data.data;
}else{
this.$message({
message: res.data.msg,
type: 'warning'
})
}
})
}
}
};
样式：
<style>
.el-calendar-table .el-calendar-day{
height: auto;
min-height: 80px;
}
.location-item{
padding: 0px 5px;
line-height: 20px;
font-size: 12px;
background-color: #EEEEEE;
margin-top: 2px;
color: #666666;
height: auto;
}
.location-item .location-status{
color: #666666;
}
.location-status i{
font-style: normal;
}
.location-status .status-name{
color: rgb(51, 153, 0);
}
.location-txt{
color: rgb(42, 114, 197);
}
</style>
后端返回数据格式：
{
"code":"0",
"data":[
{
"date":"2019-12-02",
"records":[
{
"auditStatus":1,
"createTime":"2019-12-24 09:58:04",
"detail":"星星",
"endTime":"2019-12-02 01:00:00",
"id":8,
"joinIds":"2,3",
"meetingName":"看星星",
"meetingStatus":0,
"meetingType":"个人会议",
"ownerId":3382,
"reason":"月亮",
"recordId":1,
"roomId":3,
"roomName":"小会议室",
"specialIds":"3366",
"startTime":"2019-12-02 00:00:00",
"theme":"哈哈",
"updateTime":"2019-12-24 09:58:13"
}
]
},
{
"date":"2019-12-10",
"records":[
{
"auditStatus":1,
"createTime":"2019-12-23 14:30:55",
"detail":"记录",
"endTime":"2019-12-10 01:00:00",
"id":6,
"joinIds":"2,3",
"meetingName":"记录会议",
"meetingStatus":0,
"meetingType":"个人会议",
"ownerId":3382,
"reason":"记录",
"recordId":1,
"roomId":2,
"roomName":"会议室2",
"specialIds":"3366",
"startTime":"2019-12-10 00:00:00",
"theme":"记录",
"updateTime":"2019-12-23 14:31:03"
},
{
"actualJoinIds":"1",
"attachment":"http://download.path.youcantfindme.com",
"auditStatus":1,
"createTime":"2019-12-10 15:20:57",
"detail":"详情",
"endTime":"2019-12-10 18:15:15",
"id":1,
"joinIds":"1",
"meetingName":"会议名称",
"meetingStatus":0,
"meetingType":"个人会议",
"ownerId":1,
"reason":"原因",
"record":"记录",
"recordId":1,
"roomId":1,
"roomName":"会议室1",
"specialIds":"1",
"startTime":"2019-12-10 15:15:15",
"theme":"猪蹄",
"updateTime":"2019-12-11 10:02:04"
}
]
},
{
"date":"2019-12-11",
"records":[
{
"actualJoinIds":"1",
"attachment":"http://download.path.youcantfindme.com",
"auditStatus":0,
"createTime":"2019-12-10 18:09:50",
"detail":"详情",
"endTime":"2019-12-11 18:15:15",
"id":2,
"joinIds":"1",
"meetingName":"会议名称",
"meetingStatus":0,
"meetingType":"个人会议",
"ownerId":1,
"reason":"原因",
"record":"记录",
"recordId":1,
"roomId":1,
"roomName":"会议室1",
"specialIds":"1",
"startTime":"2019-12-11 15:15:15",
"theme":"猪蹄",
"updateTime":"2019-12-11 10:02:06"
}
]
},
{
"date":"2019-12-17",
"records":[
{
"actualJoinIds":"3382,52",
"attachment":"http://192.168.3.20/group1/M00/00/3E/wKgDFF4AcL2ACFZEAAB4ANAwA6w966.doc",
"auditStatus":1,
"createTime":"2019-12-23 14:41:31",
"detail":"哈哈哈哈",
"endTime":"2019-12-17 02:00:00",
"id":7,
"joinIds":"13,16",
"meetingName":"记录啦",
"meetingStatus":0,
"meetingType":"部门会议",
"ownerId":3382,
"reason":"哼哼",
"record":"关于哈哈哈",
"recordId":3382,
"roomId":1,
"roomName":"会议室1",
"specialIds":"54,3366",
"startTime":"2019-12-17 00:00:00",
"theme":"啦啦啦",
"updateTime":"2019-12-23 14:41:39"
}
]
},
{
"date":"2019-12-23",
"records":[
{
"auditStatus":1,
"createTime":"2019-12-20 16:21:20",
"detail":"啦啦",
"endTime":"2019-12-23 01:00:00",
"id":4,
"joinIds":"1,6,11,17,53",
"meetingName":"茶话会",
"meetingStatus":0,
"meetingType":"个人会议",
"ownerId":3382,
"reason":"哼哼",
"recordId":2,
"roomId":1,
"roomName":"会议室1",
"specialIds":"5,10,16,52",
"startTime":"2019-12-23 00:00:00",
"theme":"哈哈",
"updateTime":"2019-12-23 13:55:43"
}
]
},
{
"date":"2019-12-25",
"records":[
{
"auditStatus":3,
"createTime":"2019-12-20 16:41:51",
"detail":"1",
"endTime":"2019-12-25 02:00:00",
"id":5,
"joinIds":"3,13",
"meetingName":"需求",
"meetingStatus":0,
"meetingType":"班级会议",
"ownerId":3382,
"reason":"1",
"recordId":5,
"roomId":2,
"roomName":"会议室2",
"specialIds":"49,52",
"startTime":"2019-12-25 00:00:00",
"theme":"1",
"updateTime":"2019-12-21 15:30:51"
}
]
},
{
"date":"2019-12-30",
"records":[
{
"actualJoinIds":"1,2",
"attachment":"http://download.path.youcantfindme.com",
"auditStatus":2,
"createTime":"2019-12-20 11:18:14",
"detail":"详情",
"endTime":"2019-12-30 18:15:15",
"id":3,
"joinIds":"1,2",
"meetingName":"会议名称",
"meetingStatus":0,
"meetingType":"个人会议",
"ownerId":1,
"reason":"原因",
"record":"记录",
"recordId":3,
"roomId":1,
"roomName":"会议室1",
"specialIds":"3",
"startTime":"2019-12-30 15:15:15",
"theme":"猪蹄",
"updateTime":"2019-12-23 13:57:27"
}
]
}
],
"msg":"操作成功"
}
