年日历实现，维护工作日和休息日，初始化法定节假日

<template> <div> <el-form ref="from" :model="yeardays" > <el-row style="padding-left: 10px"> <el-col :span="8" class="bg_gray"> <el-form-item label="选择年度" prop="eventType" > <el-select v-model="year" style="width: 55%" filterable> <el-option @click.native="getyearday()" v-for="(item, index) in yearlist" :key="index" :label="item" :value="item" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="8" class="bg_gray"> <span style="color: #ffffff">{{yesno}}</span> </el-col> </el-row> <el-row> <el-col :span="8" style="padding: 10px" class="bg_gray" v-for="(items,index) in yeardays" :key="index"> <div id="calendar" > <!-- 年份 月份 --> <div class="month"> <ul> <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) --> <li class="arrow" style="width: 60px"></li> <li class="year-month" :style="{color:(new Date().getMonth()+1==items.currentMonth?'#409EFF':'#9D9D9D')}" > <span class="choose-year">{{ year }}年{{ items.currentMonth }}月</span> </li> <li v-if="new Date().getMonth()+1<=items.currentMonth&&year>= new Date().getFullYear()" class="arrow" style="width: 60px;color: #409EFF;" @click="pickYear(items)"> 设置 </li> <li v-if="new Date().getMonth()+1>items.currentMonth||year<new Date().getFullYear()" class="arrow" style="width: 60px;color: #409EFF;"> </li> </ul> </div> <!-- 星期 --> <ul class="weekdays"> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li >六</li> <li >日</li> </ul> <!-- 日期 --> <ul class="days"> <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 --> <li v-for="dayobject in items.days" style="position: relative;border-bottom: 0.1px solid rgb(226 226 226);border-right:0.1px solid rgb(226 226 226)"> <div> <span v-if="dayobject.ifrest=='休'" style="position: absolute;right: 1px;top: 1px;color: red;opacity: 0.7;">{{ dayobject.ifrest }}</span> <span v-if="dayobject.ifrest=='班'" style="position: absolute;right: 1px;top: 1px;color: #2b9af3;opacity: 0.7;">{{ dayobject.ifrest }}</span> <!--本月--> <!--如果不是本月 改变类名加灰色--> <span v-if="dayobject.day.getMonth()+1!= items.currentMonth" class="other-month">{{ dayobject.day.getDate() }}</span> <!--如果是本月 还需要判断是不是这一天--> <span v-if="dayobject.day.getMonth()+1 == items.currentMonth" >{{ dayobject.day.getDate() }}</span> </div> <span v-if="dayobject.name" style="color: #9D9D9D;opacity: 0.7;">{{dayobject.name}}</span> <span v-if="!dayobject.name" style="color: #9D9D9D;opacity: 0.7;">{{dayobject.nonli}}</span> </li> </ul> </div> </el-col> </el-row> </el-form> <calendarEidt v-if="calendarEidtbool" ref="calendarEidt"/> </div> </template> <script> import calendarEidt from './calendarEidt'; import {saveorUpdateAll,listcalendar} from "@/api/pln/calenar_m"; import year from "@/components/Crontab/year"; import {Lunar} from '@/api/system/calendar'; export default { name: "fworkday", components: { calendarEidt }, data() { return { currentDay: 1, currentMonth: 1, currentYear: 1970, currentWeek: 1, days: [], yeardays:[], year:0, yearlist:[], selectcalend:[], calendarEidtbool:false, yesno:".", }; }, created: function() { //在vue初始化时调用 this.getyear(); this.getyearday(); }, // mounted() { // // debugger // // window.jsonpCallback = (data) => { // // debugger // // console.log(data.token) // // } // }, methods:{ // getJson() { // // this.$http.jsonp("https://sp1.baidu.com/8aQDcjqpAAV3otqbppnN2DJv/api.php?tn=wisetpl&format=json&resource_id=39043&query=2022年1月&t=1646029732853&cb=op_aladdin_callback1646029732853", { // }).then((res) => { // debugger // // 返回的jsonp数据不会放这里，而是在 window.jsonpCallback // console.log(res) // },(res) => {//失败显示状态码 // debugger // alert(res.status) // }) // }, getyearday: function() { let self=this; this.yeardays=[]; for (let i = 1; i <= 12; i++) { this.days=[]; this.initData(this.formatDate(this.year,i,1)); for(let obj of this.days){ let nonli=Lunar.toLunar(obj.year, obj.month, obj.day.getDate()); obj.nonli=nonli[6]; } this.yeardays.push({ currentMonth:i, days:this.days }); } let query={ year:this.year }; listcalendar(query).then(response => { let tablelist = response.rows; if(tablelist.length==0){ this.holiday();//初始化节假日 }else { //遍历数据库节假日 for(let items of self.yeardays){ for(let days of items.days){ days.ifrest="班"; for(let row of tablelist){ if(days.year==row.year&&days.month==row.month&&days.day.getDate()==new Date(row.day).getDate()){ days.ifrest=row.ifrest; days.name=row.name days["id"]=row.id; } } } } self.yesno=self.yesno=="."?"。":"."; } }) }, holiday(){ let self=this; var request = require('request'); request.post({ url:'https://tianapi.imes.cmdrawin.com/jiejiari/index', form:{ key:'dc6c1e1d55569da6ab186b179924d499',date:this.year,type:'1' } },function(err,response,body ){ let hDateList=JSON.parse(body).newslist; if(hDateList&&hDateList.length>0){ let cshDate=[];//初始化数据 for(let items of self.yeardays){ for(let days of items.days){ //获取遍历法定节假日 let gonxiu=""; let name=""; for(let row of hDateList){ let vacation=row.vacation.split("|"); let remark=row.remark.split("|"); let day=self.formatDate(days.year , days.month , days.day.getDate()) if(vacation.indexOf(day)>=0){ gonxiu="休"; name=row.name; } if(remark.indexOf(day)>=0){ gonxiu="班"; } } if(gonxiu!=""){ days.ifrest=gonxiu; days.name=name; } if(days.month==items.currentMonth&&days.ifrest=="休"){ cshDate.push({ year:self.year, month:items.currentMonth, day:self.formatDate(self.year , items.currentMonth , days.day.getDate()), ifrest:"休", name:name }) } } } let params={datas:cshDate}; saveorUpdateAll(params).then(response => { console.log("初始化成功！") }) }else { self.$modal.msgWarning("法定节假日初始