<template>
<div>
<span>时效管理</span>
<el-button type="info" @click="resetInfo">重置</el-button>
<el-button type="warning">取消</el-button>
<el-button type="danger" @click="preserve">保存</el-button>
<br/>
年份
<el-select v-model="year" placeholder="请选择" @change="changeYear">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- <vue-better-calendar></vue-better-calendar> -->
<div class="content">
<Calendar ref="Calendar1" :sundayStart="true" v-on:changeMonth="changeDate1" v-on:choseDay="clickDay" v-on:isToday="clickToday" :markDate="arr"></Calendar>
<Calendar ref="Calendar2" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>
<Calendar ref="Calendar3" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>
<Calendar ref="Calendar4" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>
</div>
<div class="content">
<Calendar ref="Calendar5" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>
<Calendar ref="Calendar6" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>
<Calendar ref="Calendar7" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>
<Calendar ref="Calendar8" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>
</div>
<div class="content">
<Calendar ref="Calendar9" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>
<Calendar ref="Calendar10" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>
<Calendar ref="Calendar11" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>
<Calendar ref="Calendar12" :sundayStart="true" v-on:choseDay="clickDay" :markDate="arr"></Calendar>
</div>
</div>
</template>
<script>
import Calendar from 'vue-calendar-component';
import axios from 'axios';
import api from '../../../api/index';
import {hint} from '../../../utils';
let setHoliday = api.examAndPaper.setHoliday;
let dayOfRest = api.examAndPaper.dayOfRest;
let reset = api.examAndPaper.reset;
export default {
data() {
return {
activeName: "xx",
flag: {},
arr:[],
options: [{
value: '2019',
label: '2019'
}, {
value: '2020',
label: '2020'
}, {
value: '2021',
label: '2021'
}, {
value: '2022',
label: '2022'
}],
year: '2019'
}
},
components: {
Calendar,
},
directives: {},
methods: {
resetInfo(){
let params = {
years:this.year
}
reset(params).then((res) => {
if(res.status == "200"){
hint(this, '重置成功!', 'success');
}else {
hint(this, '重置失败', 'error')
}
});
},
clickDay(data) {
console.log(data); //选中某天
if (this.flag[data] == undefined || this.flag[data] == 0) {
this.arr.push(data)
this.flag[data] = 1
console.log(this.arr)
}else{
let weizhi = ''
let array = this.arr;
for (let index = 0; index < array.length; index++) {
// const element = array[index];
if (array[index] == data) {
weizhi = index;
}
}
this.arr.splice(weizhi,1);
console.log(this.arr)
this.flag[data] = 0
}
},
changeDate1(data) {
console.log(data); //左右点击切换月份
},
clickToday(data) {
console.log(data); //跳到了本月
},
changeYear(){
this.arr = [];
let year = this.year;
this.$refs.Calendar1.ChoseMonth(''+year+'-01-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar2.ChoseMonth(''+year+'-02-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar3.ChoseMonth(''+year+'-03-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar4.ChoseMonth(''+year+'-04-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar5.ChoseMonth(''+year+'-05-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar6.ChoseMonth(''+year+'-06-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar7.ChoseMonth(''+year+'-07-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar8.ChoseMonth(''+year+'-08-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar9.ChoseMonth(''+year+'-09-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar10.ChoseMonth(''+year+'-10-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar11.ChoseMonth(''+year+'-11-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar12.ChoseMonth(''+year+'-12-12',false); //跳转到18年12月12日 但是不选中当天
this.getInfo()
},
isWeekEnd(date){
? if( "一二三四五六天".charAt(new ? Date(date).getDay()) == "天" ) return true;
? if( "一二三四五六天".charAt(new ? Date(date).getDay()) == "六" ?) ?return true;
},
preserve(){
console.log("总休息日:"+this.arr)
let xinarr = [];
let xinarr2 = [];
this.arr.forEach( ele => {
let xinele = ele.replace(/\//g, '-')
xinarr.push(xinele)
});
console.log("zhuanhua:")
console.log(xinarr)
xinarr.forEach(ele => {
let xinstr = ele.split('-')
console.log("xinstr:")
console.log(xinstr)
if (xinstr[1]<10) {
xinstr[1] = '0'+xinstr[1]
}
if (xinstr[2]<10) {
xinstr[2] = '0'+xinstr[2]
}
let result=xinstr.join('-')
console.log("result:")
console.log(result)
xinarr2.push(result)
});
console.log("处理0后:")
console.log(xinarr2)
let work = []
let zhoumo = []
xinarr2.forEach( ele => {
if (this.isWeekEnd(ele)) {
zhoumo.push(ele)
}else{
work.push(ele)
}
});
console.log("work")
console.log(work)
console.log("zhoumo")
console.log(zhoumo)
let params = {
year: Number(this.year),
holiday:zhoumo,
workDay:work
}
setHoliday(params).then((res) => {
if(res.status == "200"){
hint(this, '保存成功!', 'success');
}else {
hint(this, '保存失败', 'error')
}
});
},
getInfo(){
let params = {
years:this.year
}
dayOfRest(params).then((res) => {
if(res.data.code == "200"){
let array = res.data.data
let array2 = []
let array3 = [] //去掉0
array.forEach( ele => {
let xinele = ele.replace(/-/g, '/')
array2.push(xinele)
});
console.log('shuzu:')
console.log(array2)
array2.forEach( ele => {
// debugger
let xinstr = ele.split('/')
console.log("xinstr:")
console.log(xinstr)
if (xinstr[1]<10) {
xinstr[1] = xinstr[1].replace('0', '')
}
if (xinstr[2]<10) {
xinstr[2] = xinstr[2].replace('0', '')
}
let result=xinstr.join('/')
console.log("result:")
console.log(result)
array3.push(result)
});
this.arr = array3
array3.forEach( ele => {
this.flag[ele] = 1
});
}else {
hint(this, '获取失败', 'error')
}
});
}
},
computed: {
},
created() {
},
mounted() {
let year = this.year;
this.$refs.Calendar1.ChoseMonth(''+year+'-01-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar2.ChoseMonth(''+year+'-02-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar3.ChoseMonth(''+year+'-03-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar4.ChoseMonth(''+year+'-04-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar5.ChoseMonth(''+year+'-05-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar6.ChoseMonth(''+year+'-06-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar7.ChoseMonth(''+year+'-07-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar8.ChoseMonth(''+year+'-08-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar9.ChoseMonth(''+year+'-09-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar10.ChoseMonth(''+year+'-10-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar11.ChoseMonth(''+year+'-11-12',false); //跳转到18年12月12日 但是不选中当天
this.$refs.Calendar12.ChoseMonth(''+year+'-12-12',false); //跳转到18年12月12日 但是不选中当天
this.getInfo()
}
}
</script>
<style scoped>
.content{
display: flex;
flex-direction: row;
margin-top: 10px;
}
.card div:nth-child(1){
background-color:#BDC0BA;
padding-bottom:0;
}
.card div:nth-child(3) div ,.card div:nth-child(2) div{
height: 35px;
width: 35px;
}
/*今天*/
.wh_content_item .wh_isToday[data-v-2ebcbc83]{
background-color:rgb(139, 175, 241);
}
/*日历点击*/
.wh_content_item .wh_chose_day[data-v-2ebcbc83]{
background-color:transparent;
}
/*日历划过*/
.wh_item_date[data-v-2ebcbc83]:hover{
background-color:rgb(111, 223, 223);
border-radius: 100%;
}
</style>
网友评论