oa-system/src/components/system/SetWorking.vue

<template>
    <div>
        <div class="SetWorking-all">
            <div class="SetWorking-btn">
                <el-button @click="SetWorkday('工作日')" type="primary">设置为工作日</el-button>
                <el-button @click="SetWorkday('休息日')" type="success">设置为休息日</el-button>
                <el-button @click="SetWorkday('节假日')" type="warning">设置为节假日</el-button>
            </div>
            <div class="calendar-box">
                <el-calendar ref="calendar" class="aaa" v-model="value">
                    <template #dateCell="{ data }">
                      <div :class="datearr.includes(data.day)?'is-selected':''" class="calendar-btn-box" @click="allcalendar(data)">
                        <div class="calendar-day">
                            {{ data.day.split("-").slice(2).join("-") }} 
                        </div>
                        <div v-if="datayz.includes(data.day)" class="schedule-box">
                            工作日
                        </div>
                        <div v-if="datayzxx.includes(data.day)" class="schedule-boxxx">
                            休息日
                        </div>
                        <div v-if="datayzjj.includes(data.day)" class="schedule-boxjj">
                            节假日
                        </div>
                      </div>
                    </template>
                </el-calendar>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userId:'',
            datayz:[],
            datayzxx:[],
            datayzjj:[],
            datayzwsz:[],
            value:new Date(),
            datearr:[],
            parametersarr:[],
            yearMonth:"",
            startDate:"",
            endDate:"",
        }
    },
    methods:{
        allcalendar(data) {
            console.log(this.parametersarr)
            if(this.datearr.indexOf(data.day)>-1){
                
                this.datearr.splice(this.datearr.indexOf(data.day),1);
            }else{
                this.datearr.push(data.day)
            }
            console.log(this.datearr)
            // const loading = this.$loading({
            //     lock: true,  //加上这个 页面点击日历的时候会莫名其妙抖动一下 因为我界面上有滚动条，所以我注释了
            //     text: "Loading",
            //     spinner: "el-icon-loading",
            //     background: "rgba(0, 0, 0, 0.7)",
            // });
            // setTimeout(() => {
            //     console.log(data); //取到你需要的日期data.day
            //     //需要用到这日期做啥事，比如做为调接口的参数
            //     loading.close();
            // }, 500);
        },
        //处理日期
        formattedDate(val){
            const date = new Date(val);
            const year = date.getFullYear();  
            const month = (date.getMonth() + 1).toString().padStart(2, '0');  
            const day = date.getDate().toString().padStart(2, '0');  
            return year+'-'+month+'-'+day
        },
        //处理月份
        formattedMonth(val){
            const date = new Date(val);
            const year = date.getFullYear();  
            const month = (date.getMonth() + 1).toString().padStart(2, '0');  
            return year+'-'+month
        },
        //获取工作日
        GetWageSheetMonthWorkday(startDt,endDt){
            var dataarr=[];
            var xxrdataarr=[];
            var jjrdataarr=[];
            var wszdataarr=[];
            var that = this
            this.$axios({
                method: 'post',
                url: '/api/PersonnelModule/GetWageSheetMonthWorkdays?startDt='+startDt+'&endDt='+endDt,
                headers: {
                    Authorization: 'Bearer ' + this.token
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    console.log(res.data.data)
                    that.parametersarr=res.data.data;
                    for(let a=0;a<res.data.data.length;a++){
                        if(res.data.data[a].isWorkDay){
                            dataarr.push(res.data.data[a].dt)
                        }
                        if(res.data.data[a].holiName=='休息日'){
                            xxrdataarr.push(res.data.data[a].dt)
                        }
                        if(res.data.data[a].holiName=='节假日'){
                            jjrdataarr.push(res.data.data[a].dt)
                        }
                        if(res.data.data[a].holiName==''){
                            wszdataarr.push(res.data.data[a].dt)
                        }
                    }
                    that.datayz=dataarr
                    that.datayzxx=xxrdataarr
                    that.datayzjj=jjrdataarr
                    that.datayzwsz=wszdataarr
                }else{
                    
                }
            })
        },
        //获取月初月末
        getMonthEnd(val){
            let myDate = new Date(val);
            let month = myDate.getMonth() + 1;
            month = month < 10 ? "0" + month : month;   //格式化月份，补0
            let statDateStart = new Date(myDate.getFullYear().toString() +'-'+ month +'-'+ "01"); //月初
            let dayEnd = new Date(myDate.getFullYear(), month, 0).getDate(); //获取当月一共有多少天
            let statDateEnd = new Date(myDate.getFullYear().toString() +'-'+ month +'-'+ dayEnd); //月末
            // return ""+this.formattedDate(statDateStart),""+this.formattedDate(statDateEnd)
            this.GetWageSheetMonthWorkday(this.formattedDate(statDateStart),this.formattedDate(statDateEnd))
        },
        //处理月初月末
        //设置日类型
        SetWorkday(text){
            let datearrnew=[]
            let myDate = new Date(this.value);
            let month = myDate.getMonth() + 1;
            month = month < 10 ? "0" + month : month;   //格式化月份，补0
            let statDateStart = new Date(myDate.getFullYear().toString() +'-'+ month +'-'+ "01"); //月初
            let dayEnd = new Date(myDate.getFullYear(), month, 0).getDate(); //获取当月一共有多少天
            let statDateEnd = new Date(myDate.getFullYear().toString() +'-'+ month +'-'+ dayEnd); //月末
            console.log(this.formattedDate(statDateStart),this.formattedDate(statDateEnd))
            this.yearMonth=this.formattedMonth(this.value);
            this.startDate=this.formattedDate(statDateStart);
            this.endDate=this.formattedDate(statDateEnd);
            if(text=='工作日'){
                for(let j=0;j<this.datearr.length;j++){
                    datearrnew.push({dt:this.datearr[j],isWorkDay:true,isHoliDay:false,holiName:text,id:0})
                }
                for(let m=0;m<this.parametersarr.length;m++){
                    for(let x=0;x<datearrnew.length;x++){
                        if(this.parametersarr[m].dt==datearrnew[x].dt){
                            datearrnew[x].id=this.parametersarr[m].id
                        }
                    }
                }
                console.log(this.value)
            }
            if(text=='休息日'){
                for(let j=0;j<this.datearr.length;j++){
                    datearrnew.push({dt:this.datearr[j],isWorkDay:false,isHoliDay:true,holiName:text})
                }
                for(let m=0;m<this.parametersarr.length;m++){
                    for(let x=0;x<datearrnew.length;x++){
                        if(this.parametersarr[m].dt==datearrnew[x].dt){
                            datearrnew[x].id=this.parametersarr[m].id
                        }
                    }
                }
            }
            if(text=='节假日'){
                for(let j=0;j<this.datearr.length;j++){
                    datearrnew.push({dt:this.datearr[j],isWorkDay:false,isHoliDay:true,holiName:text})
                }
                for(let m=0;m<this.parametersarr.length;m++){
                    for(let x=0;x<datearrnew.length;x++){
                        if(this.parametersarr[m].dt==datearrnew[x].dt){
                            datearrnew[x].id=this.parametersarr[m].id
                        }
                    }
                }
            }
            // console.log(datearrnew,this.userId,this.yearMonth,this.startDate,this.endDate,);
            this.AddOrEdit(datearrnew);
        },
        //设置日期API
        AddOrEdit(arr){
            var url = "/api/PersonnelModule/GetWageSheetMonthWorkdaysAddOrEdit"
            var that = this
            var data={
                userId:this.userId,
                yearMonth:this.yearMonth,
                startDate:this.startDate,
                endDate:this.endDate,
                calendarInfos:arr,
            }
            console.log(JSON.stringify(data))
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    userId:this.userId,
                    yearMonth:this.yearMonth,
                    startDate:this.startDate,
                    endDate:this.endDate,
                    calendarInfos:arr,
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    that.getMonthEnd(that.value)
                    that.$message({
                        message:res.data.msg,
                        type: 'success'
                    });
                }else{
                    that.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            }).catch(()=>{})
        }
    },
    watch:{
        value:{//监听月份变化
            handler(newValue,oldValue){
                if(this.formattedMonth(newValue)!=this.formattedMonth(oldValue)){
                    this.datearr=[]
                    this.getMonthEnd(newValue)
                }
            }
        }
    },
    mounted(){
        this.userId=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        console.log(this.formattedMonth(this.value))
        console.log(this.getMonthEnd(this.formattedMonth(this.value)))
    }
}
</script>
<style>
.SetWorking-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 830px;
}
.is-selected {
    background: #d1e8ff;
}
.calendar-btn-box{
    text-align: center;
    height: 100%;
}
.calendar-box .el-calendar-day{
    padding: 0;
}
.calendar-day{
    font-size: 28px;
    font-weight: 600;
    line-height: 50px;
}
.calendar-box .schedule-box{
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    color: #409EFF;
    width: 100%;
}
.schedule-boxs{
    font-size: 17px;
    font-weight: 600;
    color: #a8a4a4;
}
.schedule-boxxx{
    font-size: 17px;
    font-weight: 600;
    color: #85ce61;
}
.schedule-boxjj{
    font-size: 17px;
    font-weight: 600;
    color: #ebb563;
}
::v-deep .el-calendar-table:not(.is-range) td.prev,
::v-deep .el-calendar-table:not(.is-range) td.next {
    cursor: not-allowed;
    pointer-events: none;
}
.prev>.el-calendar-day>.calendar-btn-box{
    display: none;
}
.next>.el-calendar-day>.calendar-btn-box{
    display: none;
}

</style>