手lu多功能日历（单选/多选/反选/清空/取消/回显）

双击原理（极短时间内的两次单击 = 双击）
所有操作均通过数据改变

activeName: ‘set’, // 设置类型
weeks: [‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’, ‘日’], // 星期列表
month_olypic: [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], // 闰年每个月份的天数
month_normal: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], // 非闰年每个月份的天数
days: [], // 当前展示日历
dayCount: 0, // 选中日期数（单位：天）
startDay: null, // 日期范围选择-起始日期
timer: null // 解决双击事件带来的单击事件触发

// 初始化日历
initCalendar () {
return new Promise((resolve, reject) => {
let [ year, month ] = this.baseInfo.attendanceMonth.split(‘-‘)
// 当月一号的标准时间
let tmpDate = new Date(this.baseInfo.attendanceMonth + ‘-01’)
// 判断是否闰年，当前月天数
if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
this.days = this.getDateArr(this.montholypic[month - 1], false)
} else {
this.days = this.getDateArr(this.month_normal[month - 1], false)
}
// 获取上月天数
_let preDays
if (month * 1 > 1) { // 当前是否是一月
preDays = this.getDateArr(this.montholypic[month - 2], true)
} else { // 上月为上年最后一月
// 判断是否闰年，获取上月天数
if (((year - 1) % 4 === 0 && (year - 1) % 100 !== 0) || ((year - 1) % 400 === 0)) {
preDays = this.getDateArr(this.month_olypic[11], true)
} else {
preDays = this.getDateArr(this.month_normal[11], true)
}
}
_let weekDay = tmpDate.getDay() === 0 ? 7 : tmpDate.getDay()
// 补充上月日历
if (weekDay > 1) this.days = […preDays.slice(1 - weekDay), …this.days]
// 补充下月日历
if (this.days.length % 7 !== 0) this.days.push(…this.getDateArr(7, true).slice(0, 7 - this.days.length % 7))
resolve()
})
},

// 获取带有是否禁选时间数组，仅用于初始化日历函数（initCalendar）
getDateArr (len, isdisabled) {
return Array.from(Array(len), (v, k) => {
return {
disabled: isdisabled,
isSelected: 0,
className: ‘’,
num: k + 1
}
})
},

// 是否回显选中—单个设置回显日期
judgeShowDays () {
if (this.baseInfo.deptIds && this.baseInfo.deptIds.length === 1) {
let params = {
attendanceMonth: new Date(this.baseInfo.attendanceMonth + ‘-01’).getTime() - 288e5,
staffId: this.baseInfo.deptIds[0]
}
this.$apis.getDeptAttendanceDate(params).then(res => {
if (res.code === ‘2000’ && res.data) {
let selectedDays = res.data
this.days.forEach(item => {
selectedDays.attendDayList.forEach(day1 => {
if (!item.disabled && item.num === Number(day1)) {
item.isSelected = 1
item.className = ‘selectedDay’
}
})
selectedDays.otherPaidDayList.forEach(day2 => {
if (!item.disabled && item.num === Number(day2)) {
item.isSelected = 2
item.className = ‘disSelectedDay’
item.disabled = true
}
})
})
this.dayCount = this.days.filter(item => item.isSelected === 1).length
}
}).catch(err => {
console.log(err)
})
}
},

// 清空所有选中日期
handleClear () {
this.days.forEach(item => {
if ((this.activeName === ‘set’ && item.isSelected === 1) || (this.activeName === ‘other’ && item.isSelected === 2)) {
item.isSelected = 0
item.className = ‘’
}
})
this.dayCount = 0
this.startDay = null
},

// 双击（单选或取消日期）
handleDblDay (index) {
clearTimeout(this.timer)
if (!this.days[index].disabled) {
if (this.days[index].isSelected === 1 || this.days[index].isSelected === 2) {
this.days[index].isSelected = 0
this.days[index].className = ‘’
if (this.activeName === ‘set’) this.dayCount = this.days.filter(item => item.isSelected === 1).length
if (this.activeName === ‘other’) this.dayCount = this.days.filter(item => item.isSelected === 2).length
if (this.startDay === index) this.startDay = null
return false
}
if (this.days[index].isSelected === 0 && this.days[index].className === ‘’) {
this.days[index].className = ‘selectedDay’
if (this.activeName === ‘set’) { // 日历选择
this.days[index].isSelected = 1
this.dayCount = this.days.filter(item => item.isSelected === 1).length
}
if (this.activeName === ‘other’) { // 日历反选
this.days[index].isSelected = 2
this.dayCount = this.days.filter(item => item.isSelected === 2).length
}
}
}
},

    // 单击（起始和结束，范围性选择，选中日期）<br />        handleSelDays (_index_) {<br />            clearTimeout(this.timer)<br />            // 选中日期为可选日期<br />            this.timer = setTimeout(() _=>_ {<br />                if (!this.days[index].disabled && this.days[index].isSelected === 0 && (this.days[index].className === '' || this.days[index].className === 'tempSelectDay')) {<br />                        if (this.startDay || this.startDay === 0) { // 选择结束日期<br />                        _let_ begin = [this.startDay, index].sort((_a_, _b_) _=>_ { return a - b })[0]<br />                        _let_ len = Math.abs(this.startDay - index) + 1<br />                        _let_ currentDays = _Array_.from({ length: len }, (_v_, _i_) _=>_ i + begin)<br />                        currentDays.forEach(_day_ _=>_ this.handleMoreDays(day))<br />                        this.startDay = null<br />} else { // 选择起始日期<br />                        this.startDay = index<br />                        this.handleMoreDays(index)<br />                    }<br />}<br />}, 300)<br />        },
    // 单击日期是否选中处理<br />        handleMoreDays (_index_) {<br />            if (!this.days[index].disabled) {<br />                if (this.days[index].isSelected === 0 && (this.days[index].className === '' || this.days[index].className === 'tempSelectDay')) {<br />                    this.days[index].className = 'selectedDay'<br />                    if (this.activeName === 'set') { // 日历选择<br />                        this.days[index].isSelected = 1<br />                        this.dayCount = this.days.filter(_item_ _=>_ item.isSelected === 1).length<br />                    }<br />                    if (this.activeName === 'other') { // 日历反选<br />                        this.days[index].isSelected = 2<br />                        this.dayCount = this.days.filter(_item_ _=>_ item.isSelected === 2).length<br />                    }<br />                }<br />            }<br />        },
    // 日期范围选择，选中起始日期后的鼠标移入<br />        handleEnter (_index_) {<br />            if (this.startDay || this.startDay === 0) {<br />      this.days.forEach(_item_ _=>_ {<br />                        if (item.className === 'tempSelectDay') item.className = ''<br />})<br />                _let_ begin = [this.startDay, index].sort((_a_, _b_) _=>_ { return a - b })[0]<br />                _let_ len = Math.abs(this.startDay - index) + 1<br />                _let_ currentDays = _Array_.from({ length: len }, (_v_, _i_) _=>_ i + begin)<br />                currentDays.forEach(_day_ _=>_ this.handleTempDays(day))<br />            }<br />        },

// 鼠标移入临时处理日期选中
handleTempDays (index) {
if (!this.days[index].disabled) {
if (this.days[index].isSelected === 0 && this.days[index].className === ‘’) {
this.days[index].className = ‘tempSelectDay’
}
}
},

// 切换日历选择和反选
handleClickTab () {
this.days.forEach(item => {
if (this.activeName === ‘set’) { // 日历选择
if (item.isSelected === 1) {
item.className = ‘selectedDay’
item.disabled = false
}
if (item.isSelected === 2) {
item.className = ‘disSelectedDay’
item.disabled = true
}
}
if (this.activeName === ‘other’) { // 日历反选
if (item.isSelected === 1) {
item.className = ‘disSelectedDay’
item.disabled = true
}
if (item.isSelected === 2) {
item.className = ‘selectedDay’
item.disabled = false
}
}
})
if (this.activeName === ‘set’) this.dayCount = this.days.filter(item => item.isSelected === 1).length
if (this.activeName === ‘other’) this.dayCount = this.days.filter(item => item.isSelected === 2).length
this.startDay = null
},