|
|
@@ -22,15 +22,26 @@
|
|
|
-->
|
|
|
<el-col :span="19">
|
|
|
<div class="calendar-box">
|
|
|
+<!-- 日历菜单栏 -->
|
|
|
<full-calendar
|
|
|
ref="fullCalendar"
|
|
|
- style="height: 100%"
|
|
|
+ style="height: 100%;color:black"
|
|
|
:options="calendarOptions"
|
|
|
>
|
|
|
</full-calendar>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ <!-- 悬停窗体 -->
|
|
|
+ <div class="over" ref="ove" >
|
|
|
+ <img src="../../../assets/close.png" class="fr" @click="closexuan">
|
|
|
+ <img src="../../../assets/del.png" class="fr" @click="delxuan">
|
|
|
+ <img src="../../../assets/xiugai.png" class="fr" @click="xiuxuan">
|
|
|
+ <div><img src="../../../assets/POINT.png"><span id="aaaa"></span></div>
|
|
|
+ <div><img src="../../../assets/time.png"><span id="bbbb"></span></div>
|
|
|
+ <div><img src="../../../assets/steam.png"><span id="cccc"></span></div>
|
|
|
+ <div><img src="../../../assets/neirong.png"><span id="dddd"></span></div>
|
|
|
+ </div>
|
|
|
<!--日程新增弹窗start-->
|
|
|
<el-dialog
|
|
|
title="会议新增"
|
|
|
@@ -175,7 +186,13 @@
|
|
|
data() {
|
|
|
return {
|
|
|
activeNum: 0,
|
|
|
+ // fontc={
|
|
|
+ // idss:[],
|
|
|
+ // fcolor:[]
|
|
|
+ // },
|
|
|
+ // Colorr:"",
|
|
|
dialogVisible: false,
|
|
|
+ xuanting:false,
|
|
|
// meetingRoomList: [],
|
|
|
subList: [],
|
|
|
array: [],
|
|
|
@@ -203,6 +220,10 @@
|
|
|
},
|
|
|
|
|
|
],
|
|
|
+ idx:"",
|
|
|
+ xtop:"",
|
|
|
+ xleft:"",
|
|
|
+ calEventt:{},
|
|
|
form: {
|
|
|
title: '',
|
|
|
userId: '',
|
|
|
@@ -256,10 +277,12 @@
|
|
|
navLinks: true,
|
|
|
// displayEventEnd: true,//所有视图显示结束时间
|
|
|
initialView: "dayGridMonth", // 设置默认显示月，可选周、日
|
|
|
- dateClick: this.handleDateClick,
|
|
|
- eventClick: this.handleEventClick,
|
|
|
+ dateClick: this.handleDateClick,//点击日历
|
|
|
+ eventClick: this.handleEventClick,//日历日程点击
|
|
|
eventsSet: this.handleEvents,
|
|
|
select: this.handleDateSelect,
|
|
|
+ eventMouseEnter: this.eventmouseover,//鼠标滑过
|
|
|
+ eventMouseLeave:this.eventmouseout,//鼠标离开
|
|
|
// timezone
|
|
|
// 设置日程
|
|
|
events: [
|
|
|
@@ -409,12 +432,13 @@
|
|
|
mounted() {
|
|
|
// 获取用户信息
|
|
|
this.calendarApi = this.$refs.fullCalendar.getApi();
|
|
|
-
|
|
|
// this.meetingRoomList = this.array.meetingRoomList;
|
|
|
// console.log('this.array', this.array)
|
|
|
// this.getReservationList(this.array.scheduleList0);
|
|
|
this.queryRole();
|
|
|
this.getList();
|
|
|
+ this.eventmouseover();
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
// 获取会议信息
|
|
|
@@ -445,10 +469,10 @@
|
|
|
},
|
|
|
data: {isFile: "0"},
|
|
|
}).then((res) => {
|
|
|
- console.log('res====', typeof res.data)
|
|
|
- console.log(res.data)
|
|
|
+ // console.log('res====', typeof res.data)
|
|
|
+ // console.log(res.data)
|
|
|
this.auth = res.data;
|
|
|
- console.log("res.data", res.data)
|
|
|
+ // console.log("res.data", res.data)
|
|
|
|
|
|
});
|
|
|
},
|
|
|
@@ -456,7 +480,7 @@
|
|
|
let newArr = [];
|
|
|
this.subList = arrayData;
|
|
|
arrayData.forEach((item) => {
|
|
|
- console.log('item', item)
|
|
|
+ // console.log('item', item)
|
|
|
newArr.push({
|
|
|
newBeginTime: item.begindate.split(' ')[1].substr(0,5),
|
|
|
newEndTime: item.enddate.split(' ')[1].substr(0,5),
|
|
|
@@ -468,7 +492,7 @@
|
|
|
})
|
|
|
});
|
|
|
this.calendarOptions.events = newArr;
|
|
|
- // console.log(newArr)
|
|
|
+
|
|
|
// debugger
|
|
|
},
|
|
|
// 切换教室
|
|
|
@@ -518,6 +542,58 @@
|
|
|
let newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(date)[0];
|
|
|
return newDate;
|
|
|
},
|
|
|
+ //渲染窗体
|
|
|
+ xuanchuang(calEvent,event){
|
|
|
+ // console.log(this.array, '鼠标经过arr');
|
|
|
+ // console.log(calEvent, '鼠标经过cal');
|
|
|
+ this.idx=calEvent.event.id
|
|
|
+ this.$refs.ove.style.opacity=0.8;
|
|
|
+ event=event||window.event
|
|
|
+ this.xtop=event.clientY+"px"
|
|
|
+ this.xleft=event.clientX+"px"
|
|
|
+ this.$refs.ove.style.left=event.clientX+"px"
|
|
|
+ this.$refs.ove.style.top=event.clientY+"px"
|
|
|
+ var j=0
|
|
|
+ for(var i=0;i<this.array.length;i++){
|
|
|
+ if(this.array[i].id==calEvent.event.id){
|
|
|
+ j=i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ document.querySelector("#aaaa").innerHTML=this.array[j].title
|
|
|
+ document.querySelector("#bbbb").innerHTML=calEvent.event.startStr.substring(5,7)+"月"+
|
|
|
+ calEvent.event.startStr.substring(8)+"日"+
|
|
|
+ calEvent.event._def.extendedProps.newBeginTime+"-"+
|
|
|
+ calEvent.event._def.extendedProps.newEndTime
|
|
|
+ document.querySelector("#cccc").innerHTML=this.array[j].leaderName
|
|
|
+ document.querySelector("#dddd").innerHTML=this.array[j].remark
|
|
|
+ },
|
|
|
+ //鼠标滑过事件
|
|
|
+ eventmouseover(calEvent,event){
|
|
|
+ this.xuanchuang(calEvent,event)
|
|
|
+ },
|
|
|
+ //关闭悬停窗口
|
|
|
+ closexuan(){
|
|
|
+ this.$refs.ove.style.opacity=0;
|
|
|
+ },
|
|
|
+ //悬停窗体修改按钮
|
|
|
+ xiuxuan(events){
|
|
|
+ console.log(events)
|
|
|
+ console.log(this.array)
|
|
|
+ var j=0
|
|
|
+ for(var i=0;i<this.array.length;i++){
|
|
|
+ if(this.array[i].id==this.idx){
|
|
|
+ j=i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.calEventt.event=this.array[j]
|
|
|
+ var aa=this.calEventt
|
|
|
+ console.log(aa)
|
|
|
+ this.handleEventClick(aa)
|
|
|
+ },
|
|
|
+ //悬停窗体删除按钮
|
|
|
+ delxuan(){
|
|
|
+ this.savedel()
|
|
|
+ },
|
|
|
// 点击日历
|
|
|
handleDateClick: function (arg) {
|
|
|
if (!this.auth) {
|
|
|
@@ -564,6 +640,21 @@
|
|
|
today() {
|
|
|
this.calendarApi.today();
|
|
|
},
|
|
|
+ //提交删除后的数据
|
|
|
+ savedel(){
|
|
|
+ this.$http({
|
|
|
+ url: "/market/calendar/del",
|
|
|
+ method: "post",
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "application/json",
|
|
|
+ },
|
|
|
+ data:{
|
|
|
+ id:this.idx
|
|
|
+ }
|
|
|
+ }).then((res) => {
|
|
|
+ location.reload();
|
|
|
+ });
|
|
|
+ },
|
|
|
// 提交数据
|
|
|
submitForm(formName) {
|
|
|
console.log(this.form)
|
|
|
@@ -708,8 +799,16 @@
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@import "src/assets/calendar";
|
|
|
-
|
|
|
.el-row--flex.is-justify-space-between {
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+ .over{position: absolute; width: 200px;height: 200px;background: #eee; border: 1px solid black; z-index: 100; padding: 10px; border-radius: 5px;top:0;left:0;opacity:0}
|
|
|
+ .over img{width: 20px;height: 20px;}
|
|
|
+ .over div{margin: 20px 0px;height: 17px;}
|
|
|
+ .over div img{height: 17px;}
|
|
|
+ .over div span{margin-left: 5px; line-height: 17px;height: 17px;}
|
|
|
+ .fr{float: right;}
|
|
|
+ ::v-deep .fc-sticky{
|
|
|
+ color: black !important;
|
|
|
+ }
|
|
|
</style>
|
徐兴安
