效果图;
功能: 新增、修改
直接上代码说明:el-calendar 修改源码;
渲染层代码(el-calendar)
<div class="calendar">
<el-calendar >
<template slot="dateCell" slot-scope="{date,data}">
<!--自定义内容
1、先判断时间,进行颜色改变
2、渲染先做好初始化格式,再循环渲染需要值班日期参数判断渲染
3、点击事件区分两个(必须禁止冒泡):未值班点击事件,已有直班点击事件;
-->
<div :style="{color: time-86400000 > new Date(date).getTime() ? '#ccc':''}">
<div class="calendar-day" slot="reference" @click.stop="onClickDate(data.day,new Date(date).getTime(),$event)">
{{ data.day.split('-').slice(2).join('-') }}
<div v-for="(item,index) in attendanceDetailsData" :key="index" slot="reference" @click.stop="onClick(item,data.day,new Date(date).getTime(),$event )">
<div v-if="data.day == item.time" style="height: 59px;margin-top: -23px;padding: 23px 0 0 6px;font-size: 12px;text-align: center;">
<p >{{data.day == item.time ? item.doctorName : ''}} </p>
<p >{{data.day == item.time ? item.doctorPhone : ''}} </p>
<span v-if="data.day === Time" >值班</span>
</div>
</div>
</div>
</div>
</template>
</el-calendar>
</div>
修改效果
修改代码(使用el-dropdown)
<div class='tooltipEchartHeader' v-if="visible" :style="{ left: floatLeft, top: floatTop }" >
<el-dropdown :show-timeout='10'>
<span class="box">
</span>
<el-dropdown-menu slot="dropdown" align="center" >
<el-dropdown-item v-for="item in userList"
:key="item.userId" @click.native="handleCommand(item.userId)">{{item.realName}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
data() {
return {
titleName:'',
dateTime:'',
floatLeft:0,
floatTop:0,
visible:false,
time:Date.now(),
attendanceDetailsData:[],//排班列表
userList:[],//医生
ruleForm:{},
addForm:{},//填表
Time:this.TimeDate()
};
},
点击事件(监听(上个月–今天–下个月))
//监听(上个月--今天--下个月)
created() {
this.$nextTick(() => {
// 点击上一个月
let prevBtn = document.querySelector(
".el-calendar__button-group .el-button-group>button:nth-child(1)"
);
prevBtn.addEventListener("click", e => {
this.visible=false;
});
//点击下一个月
let nextBtn = document.querySelector(
".el-calendar__button-group .el-button-group>button:nth-child(3)"
);
nextBtn.addEventListener("click", () => {
this.visible=false;
});
//点击今天
let todayBtn = document.querySelector(
".el-calendar__button-group .el-button-group>button:nth-child(2)"
);
todayBtn.addEventListener("click", () => {
this.visible=false;
});
});
},
methods: {
handleCommand(val) {
let Time = this.TimeDate();
this.addForm.doctorId = val;
this.addForm.time = this.dateTime;
this.$request(scheduleSave, this.addForm).then((res) => {
if (res.code === 0) {
if (this.addForm.id) {
this.$util.message("suc", "修改排班成功");
this.getList();
this.visible=false;
if(this.dateTime === Time){
this.$store.dispatch("downNumFn")
}
} else {
this.$util.message("suc", "新增排班成功");
this.getList();
this.visible=false;
if(this.dateTime === Time){
this.$store.dispatch("downNumFn")
}
}
}
});
},
TimeDate() {
let time = new Date();
var year = time.getFullYear(); //得到年份
var month = time.getMonth() + 1; //得到月份
var date = time.getDate(); //得到日期
month = month < 10 ? "0" + month : month;
date = date < 10 ? "0" + date : date;
return year + "-" + month + "-" + date;
},
getList(){
this.$request(scheduleList, this.ruleForm).then((res) => {
if(res.code === 0){
this.attendanceDetailsData = res.data;
}
})
},
onClick(val,data,eleTime,e){
this.titleName=data + '修改排班';
this.dateTime=data;
if(this.time-86400000 < eleTime){
console.log('sck')
this.visible=true;
}else{
this.visible=false;
}
console.log(val)
this.floatLeft = e.clientX -50+ "px"; // 减去外层div的left距离
this.floatTop = e.clientY -22 + "px";
this.conceal=true;
this.addForm =this.$util.superCopy(val) ;
this.addForm.doctorId = Number(this.addForm.doctorId)
},
onClickDate(data,eleTime,e){
this.floatLeft = e.clientX -50+ "px"; // 减去外层div的left距离
this.floatTop = e.clientY -22 + "px";
this.titleName=data + '新增排班';
this.dateTime=data;
console.log(this.time-86400000)
if(this.time-86400000 <eleTime){
this.visible=true;
}else{
this.visible=false;
}
this.conceal=true;
this.addForm ={};
},
},