<template>
<view style="overflow-x: hidden;font-size: 12px;">
<view v-if="isDescShow" class="day_desc">
<view class="desc_item"><text class="point_blue"></text>全天考勤正常</view>
<view class="desc_item"><text class="point_orange"></text>当天存在异常:迟到、早退、缺卡</view>
<view class="desc_item"><text class="point_gray"></text>当天提交过:请假、加班、出差、外出、补卡申请</view>
</view>
<view class="day grid_title">
<uni-grid :column="7" :show-border="false" :square="false">
<uni-grid-item v-for="(item,index) in ['日','一','二','三','四','五','六']" :index="index" :key="index">
<text>{{item}}</text>
</uni-grid-item>
</uni-grid>
</view>
<!-- 日期 -->
<view
class="threeMonth"
@touchstart="touchstart"
@touchmove="touchmove"
@touchend="touchend"
:style="'left:calc(-100% + '+ dayLeft + 'px)'"
>
<!-- 遍历集合三个月的列表 -->
<view class="day"
v-for="(item,index) in monthList"
:key="index"
>
<!-- 遍历每个月的天数 -->
<uni-grid :column="7" :show-border="false" @change="dayClick">
<uni-grid-item v-for="(item2,index2) in item" :index="index2" :key="index2">
<text class="day_default" :class="{'today_bg_color': item2.today, 'today_text': isSelectedDay(item2)}" :style="item2.fromMonth=='nowMonth'?'':'color:#c8c9cc;'">{{item2.day}}</text>
<view class="flex_row_center">
<text class="point_blue"></text>
<text class="point_orange"></text>
</view>
</uni-grid-item>
</uni-grid>
</view>
</view>
</view>
</template>
<script>
export default {
name:"attendence-calender",
options: {
styleIsolation: 'shared'
},
props: {
date: {
type: Date,
required: false,
default: function() {
return new Date()
}
},
attendenceData: Object
},
data() {
return {
isDescShow: true,
selectedDay: {
year: 2023,
month: 1,
day: 1
}, // 获取当天
nowYear: 2023, // 获取年份
nowMonth: 1, // 获取月份
monthList:[],
dayLeft: 0,
startLeft: 0
}
},
created() {
/*调用初始化当前考勤*/
this.initData()
},
methods: {
// 日期模块点击
touchstart(e){
// 记录初始点击位置
this.startLeft = e.touches[0].pageX
},
// 日期模块拖动
touchmove(e){
this.dayLeft = e.touches[0].pageX - this.startLeft
},
// 日期模块松手
touchend(e){
// 根据移动距离判断跳转上一月还是下一月
if(this.dayLeft > 100 ) this.syy()
if(this.dayLeft < -100) this.xyy()
this.dayLeft = 0
},
/* 初始化数据 */
initData() {
this.nowYear = this.date.getFullYear()
this.nowMonth = this.date.getMonth() + 1
this.setSelectDay(this.nowYear, this.nowMonth, this.date.getDate())
this.getThreeMonth()
},
isSelectedDay(item) {
if (item.year == this.selectedDay.year && item.month == this.selectedDay.month
&& item.day == this.selectedDay.day) {
return true
} else {
return false
}
},
isToday(year, month, day) {
const now = new Date()
if (now.getFullYear() == year && (now.getMonth() + 1) == month
&& now.getDate() == day) {
return true
} else {
return false
}
},
setSelectDay(year, month, day) {
this.selectedDay = {
year,
month,
day
}
// 获取选中日期的考勤数据
this.$emit("selectDay", this.selectedDay)
},
/*获取上一月*/
syy(){
if (this.nowMonth == 1){
this.nowYear = parseInt(this.nowYear) - 1;
this.nowMonth = 12;
this.getThreeMonth();
} else {
this.nowMonth = parseInt(this.nowMonth) - 1;
this.getThreeMonth();
}
this.setSelectDay(this.nowYear, this.nowMonth, 1)
},
/*获取下一月*/
xyy(){
if (this.nowMonth == 12){
this.nowYear = parseInt(this.nowYear) + 1;
this.nowMonth = 1;
this.getThreeMonth();
} else {
this.nowMonth = parseInt(this.nowMonth) + 1;
this.getThreeMonth();
}
this.setSelectDay(this.nowYear, this.nowMonth, 1)
return;
},
/*闰年 时间判断*/
isLeap(year) {
return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
},
//获取某月日期
getCalendar(year,month){
const _this = this
//每个月的天数
var days_per_month = new Array(31, 28 + this.isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var dateList = [];
//获取本月的一号是星期几 0星期天
var s = new Date(year + '/' + month + '/' + '01').getDay();
//上月月份
var prevMonth = month == 1 ? 12: month - 1
// 上月年份
var prevMonthYear = month == 1 ? (year - 1) : year
// 上月天数
var prevMonthDay = days_per_month[prevMonth - 1]
// 补上 上月日期
for(var i = s - 1; i >= 0; i--) {
var day = parseInt(prevMonthDay)-i;
dateList.push({
year: prevMonthYear,
month: prevMonth,
day,
fromMonth: 'lastMonth',
today: _this.isToday(prevMonthYear, prevMonth, day)
})//获取上月末尾天数 补齐本月日历显示
}
// 当月天数
var nowMonthDay = days_per_month[month - 1]
// 添加当月日期
for(var j = 0; j < nowMonthDay; j ++) {
dateList.push({
year: year,
month: month,
day: j + 1,
fromMonth: 'nowMonth',
today: _this.isToday(year, month, j + 1)
})
}
//获取本月最后一天是星期几 0星期天
var l = new Date(year + '/' + month + '/' + nowMonthDay).getDay();
// 下月月份
var lastMonth = month == 12 ? 1: month + 1
// 下月年份
var lastMonthYear = month == 12 ? (year + 1) : year
if(l < 6){
// 补上 下月日期
for(var i = 1; i <= 6 - l; i++) {
dateList.push({
year: lastMonthYear,
month: lastMonth,
day: i,
fromMonth: 'nextMonth',
today: _this.isToday(lastMonthYear, lastMonth, i)
})
}
}
return dateList
},
/**
* 通过年份和日历月份获取上个月或者下个月的年份和日历月份,日历月份比真实月份大1
* type 0、上个月 1、下个月
*/
getCurrentDateInfo(orgYear, orgMonth, type) {
const result = {}
// 获取上一月日历
if (type == 0) {
if (orgMonth == 1){
result.year = parseInt(orgYear)-1;
result.month = 12
} else {
result.year = orgYear
result.month = parseInt(orgMonth)-1;
}
} else if (type == 1) {
if (orgMonth == 12){
result.year = parseInt(orgYear)+1;
result.month = 1
} else {
result.year = orgYear
result.month = parseInt(orgMonth)+1;
}
}
return result
},
// 获取三月日期
getThreeMonth(){
let year,month
this.monthList = []
// 获取上一月日历
const prevDate = this.getCurrentDateInfo(this.nowYear, this.nowMonth, 0)
this.monthList.push(this.getCalendar(prevDate.year,prevDate.month))
// 获取当前月日历
this.monthList.push(this.getCalendar(this.nowYear,this.nowMonth))
// 获取下一月日历
const nextDate = this.getCurrentDateInfo(this.nowYear, this.nowMonth, 1)
this.monthList.push(this.getCalendar(nextDate.year,nextDate.month))
},
//点击某一天
dayClick(e){
const index = e.detail.index
//点击 哪一天
const selectedItem = this.monthList[1][index]
let day = selectedItem.day
this.setSelectDay(selectedItem.year, selectedItem.month, selectedItem.day)
// 如果 点击本月的日期
if(selectedItem.fromMonth == 'nowMonth'){
return
}
if(selectedItem.fromMonth == 'nextMonth'){
// 如果 点击下一月的日期 跳转下一月
this.xyy()
} else if(selectedItem.fromMonth == 'lastMonth'){
// 如果 点击上一月的日期 跳转上一月
this.syy()
}
}
}
}
</script>
<style lang="less" scoped>
.threeMonth {
display: flex;
width: 300%;
position: relative;
}
.day {
display: flex;
position: relative;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
text-align: center;
align-content: flex-start;
}
.day /deep/ .uni-grid-item__box {
align-items: center;
justify-content: center;
}
.grid_title /deep/ .uni-grid {
// flex-wrap: nowrap !important;
}
.day_default {
height: 30px;
width: 30px;
line-height: 30px;
border-radius: 50%;
}
.today_text {
background-color: #3389ef !important;
color: white !important;
}
.today_bg_color {
color: #3389ef;
background-color: #3389ef2e;
}
.day_desc {
padding: 10px;
background-color: #eff2f3;
border-radius: 4px;
font-size: 12px;
margin-bottom: 10px;
}
.desc_item {
display: flex;
align-items: center;
line-height: 20px;
}
.status_point {
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
margin: 2px;
}
.point_blue:extend(.status_point) {
background-color: #3389ef;
}
.point_orange:extend(.status_point) {
background-color: #ffaa00;
}
.point_gray:extend(.status_point) {
background-color: #828387;
}
</style>
uniapp日历组件
于 2023-09-12 14:11:01 首次发布