vue-calendar日历组件使用总结
<!--您的查房打卡-->
<template>
<div class="content">
<!--标题-->
<p class="titleP">
您的查房打卡情况
<!--<span class="colorblue" @click="newDeptScopeFn(item,$event)">今日</span>-->
<!--<span @click="GetSingleDeptScopeFn(item,$event)">昨日</span>-->
<!--<span @click="ThreeDeptScopeFn(item,$event)">前日</span>-->
<!--<img src="../../../../static/PC/img/lampIcon/" alt="设置医嘱动态" @click="department">-->
</p>
<p class="cardsp">
<img src="../../../../static/PC/img/lampIcon/" alt="时钟">
<span class="spantwo">{{Today}}，今日查房打卡{{cardsnum}}次</span>
<el-button type="primary" style="margin-left: 15px;" @click="SupplyPunchFn">查房打卡</el-button>
</p>
<!--日历-->
<Calendar
ref="Calendar"
:markDate="arr2"
v-on:changeMonth="changeDate"
></Calendar>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="20%">
<span>确定打卡吗？</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="sure">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import * as HomeInfoApi from '@/api/PC/Home/'//引入apijs
import Calendar from "vue-calendar-component";//引入vue日历
import common from '@/assets/PC/js/'//引入时间函数
export default {
data() {
return {
// arr2: ['2018/6/23'],
arr2: [ "2019/4/2", "2019/4/3", "2019/4/4"],
// arr: [
// {
// date: "2019/4/1",
// className: "mark1"
// },
// {
// date: "2019/4/13",
// className: "mark2"
// }
// ],
Today:'',//当前日期
cardsnum:0,//当前打卡次数
cardsradio:'2',//当日是否查房打卡
dialogVisible:false
};
},
components: {
Calendar
},
created() {
this.GetSignDateList();//加载前获取已打卡清单
this.GetSignCountFn();//获取今日查房打卡次数
},
methods: {
changeDate(data) {
//(data); //左右点击切换月份
},
//加载前获取已打卡清单
GetSignDateList(){
var param=common.getNowDate().yeardate;
//获取清单axios
HomeInfoApi.GetSignDateList(param).then(res => {
if(res.Errs.length==0){
this.arr2=res.Result.DateList
}else{
let Errs=res.Errs[0];
this.$message({
type: "error",
message: Errs
});
}
}).catch(err => {
});
},
//获取今日查房打卡次数
GetSignCountFn(){
this.Today= common.getNowDate().currentdateSameday;//获取今天日期
var paramtime=this.Today;
HomeInfoApi.GetSignCount(paramtime).then(res => {
if(res.Errs.length==0){
this.cardsnum=res.Result
if(res.Result>0){
this.cardsradio='1'
}else{
this.cardsradio='2'
}
}else{
let Errs=res.Errs[0];
this.$message({
type: "error",
message: Errs
});
}
}).catch(err => {
});
},
//打卡
SupplyPunchFn(){
this.dialogVisible=true;
},
sure(){
var date=this.Today;//日期
var SignInNum=this.cardsnum;//已打卡次数
this.dialogVisible=false;
HomeInfoApi.SupplyPunch(date,SignInNum).then(res => {
if(res.Errs.length==0){
this.cardsnum=res.Result
if(res.Result>0){
this.cardsradio='1'
}else{
this.cardsradio='2'
}
this.GetSignCountFn()
}else{
let Errs=res.Errs[0];
this.$message({
type: "error",
message: Errs
});
}
}).catch(err => {
});
}
},
mounted () {
}
};
</script>
<!-- Add "scoped " attribute to limit CSS to this component only -->
<style scoped>
.content{
padding: 15px;
}
.cardsp{
height: 28px;
line-height: 28px;
position: relative;
padding-left: 15px;
margin-bottom: 15px;
}
.cardsp img{
position: absolute;
top: 7px;
}
.cardsp .spantwo{
margin-left: 16px;
}
.cardsp .spanthere{
margin-left: 15px;
}
.circular{
display: inline-block;
/*width: 12px;*/
/*height: 12px;*/
border: 5px solid #136aa7;
border-radius: 50%;
}
.titleP{
height: 14px;
line-height: 14px;
font-size: 14px;
font-weight: bold;
border-left: 3px solid #136aa7;
padding-left: 12px;
position: relative;
margin-bottom: 15px;
}
.title{
background-color: #2fd85e;
font-size: 16px;
}
.div {
margin: auto;
width: 220px;
height: 44px;
line-height: 44px;
background: red;
color: black;
font-size: 17px;
text-align: center;
margin-top: 20px;
}
/*.wh_container >>> .mark1 {*/
/*background-color: orange;*/
/*}*/
/*.wh_container >>> .mark2 {*/
/*background-color: blue;*/
/*}*/
.wh_container >>> .wh_content_all{
background-color:#ffffff!important;
border:1px solid #dfe0e6;
width:600px;
border-radius: 6px;
}
.wh_container{
margin: 0px!important;
}
.wh_container >>> .wh_item_date{
color:#211d48;
}
.wh_container >>> .wh_item_date:hover{
color:#ffffff;
background: #136aa7;
border-radius: 50%;
}
.wh_container >>> .wh_other_dayhide{
color:#cccccc;
}
.wh_container >>> .wh_content_item{
margin-bottom: 5px;
margin-top: 5px;
}
.wh_container >>> .wh_content{
color:black;
}
.wh_container >>> .wh_top_tag{
color:black;
}
.wh_container >>> .wh_content_li{
color:#162947;
font-weight: bold;
}
.wh_container >>> .wh_jiantou1{
border-top: 2px solid #162947;
border-left: 2px solid #162947;
}
.wh_container >>> .wh_jiantou2{
border-top: 2px solid #162947;
border-right: 2px solid #162947;
}
.wh_container >>> .wh_content_item>.wh_isMark{
background-color: rgba(19,105,167,0.15);
/*border-radius: 0px;*/
}
.wh_container >>> .wh_content_item .wh_isToday{
background-color: rgba(19,105,167,1);
/*border-radius: 0px;*/
color: #ffffff;
}
.wh_container >>> .wh_content_item .wh_chose_day{
background-color: rgba(19,105,167,1);
/*border-radius: 0px;*/
color: #ffffff;
}
</style>
<!--<style>-->
<!--.content .el-radio__input.is-disabled .el-radio__inner, .el-radio__input.is-disabled.is-checked .el-radio__inner{-->
<!--border-color: #1369a7!important;-->
<!--background-color: #1369a7!important;-->
<!--}-->
<!--</style>-->