androidCnToWechatGrt/pagesStatistics/components/CusCalendar/index.vue

<template>
	<view class="box">
		<div class="week">
			<div class="w_pre" v-for="(pre,idx) in weekList" :key="idx">{{pre}}</div>
		</div>
		<div class="date">
			<div class="d_pre" v-for="(pre,idx) in calendarList" :key="idx" @tap="selectDay(pre,idx)">
				<div class="day" :class="{'dq':pre.iscurrentday,'select':pre.select,'wd':pre.isweekday}">{{pre.day}}</div>
				<div class="status_boxs">
					<div class="status zc" v-if="pre.status<2"></div>
					<div class="status yc" v-if="pre.status===1" style="margin-left: 10rpx;"></div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				weekList:['一','二','三','四','五','六','日'],
				year:new Date().getFullYear(),
				month:new Date().getMonth()+1,
				calendarList:[],
				clockList:[]
			}
		},
		// created() {
		// 	this.getDataByMonth(this.year,this.month);
		// },
		methods:{
			getDataByMonth(year,month){
				const daysInMonth = new Date(year, month, 0).getDate();
				let calendar = [];
				for (let day = 1; day <= daysInMonth; day++) {
					let date = new Date(year, month - 1, day); // 注意月份从0开始
					let nyr = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
					calendar.push({
					  nyr,
					  year,
					  month,
					  day,
					  week: date.getDay()||7,
					  isweekday:(date.getDay()||7)<6,
					  iscurrentday:nyr==new Date().Format('yyyy-MM-dd')
					});
				}
				let qlist = this.insertDays(year,month,calendar);
				let hlist = this.appendDays(year,month,calendar);
				let list = qlist.concat(calendar).concat(hlist);
				this.calendarList = JSON.parse(JSON.stringify(list));
				this.calendarList.forEach((c,i)=>{
					this.$set(this.calendarList[i],'select',false);
					let t = this.clockList.find(l=>l.attendanceDate==c.nyr);
					if(t&&c.month==month){
						this.$set(this.calendarList[i],'status',t.isLeave===null?2:(t.isLeave===0?0:1));
						this.$set(this.calendarList[i],'id',t?.id);
					} 
					else this.$set(this.calendarList[i],'status',2);
				})
			},
			insertDays(year,month,calendar){
				let week = calendar[0].week;
				if(week==1) return []
				let qyear = month==1?(year-1):year;
				let qmonth = month==1?12:month-1;
				let daysInMonth = new Date(qyear, qmonth, 0).getDate();
				let list = [];
				for (let day = daysInMonth-week+2; day <= daysInMonth; day++) {
					let date = new Date(qyear, qmonth - 1, day);
					list.push({
					  nyr: `${qyear}-${String(qmonth).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
					  year:qyear,
					  month:qmonth,
					  day,
					  week: date.getDay()||7
					});
				}
				return list
			},
			appendDays(year,month,calendar){
				let week = calendar[calendar.length-1].week;
				if(week==7) return []
				let hyear = month==12?(year+1):year;
				let hmonth = month==12?1:month+1;
				let daysInMonth = new Date(hyear, hmonth, 0).getDate();
				let list = [];
				for (let day = 1; day <= 7-week; day++) {
					let date = new Date(hyear, hmonth - 1, day);
					list.push({
					  nyr: `${hyear}-${String(hmonth).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
					  year:hyear,
					  month:hmonth,
					  day,
					  week: date.getDay()||7
					});
				}
				return list
			},
			async selectDay(pre,idx){
				let info = {
					iswd:pre.isweekday,
					clockTimes:0,
					workHours:0,
					sbTime:'',
					xbTime:'',
					status:0
				}
				if(pre.id){
					let res = await this.$api.get('/wms/outsourced/attendance/'+pre?.id||'');
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					let d = res.data.data;
					info.clockTimes = d.isLeave===0?2:((d.isLeave===1||d.isLeave===2)?1:0);
					info.workHours = d.workingHours;
					info.sbTime = (d.isLeave===0||d.isLeave===2)?d.checkInTime:'';
					info.xbTime = (d.isLeave===0||d.isLeave===1)?d.clockOutTime:'';
					info.status = 1;
				}
				this.$emit('selectInfo',info);
				
				if(pre?.month==this.month){
					this.calendarList.forEach((c,i)=>{
						this.$set(this.calendarList[i],'select',i===idx);
					})
				}else{
					this.$emit('selectDay',pre);
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.box{
		.week{
			display: flex;
			.w_pre{
				width: calc(100% / 7);
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #9D9D9D;
				line-height: 72rpx;
				text-align: center;
			}
		}
	
		.date{
			display: flex;
			flex-wrap: wrap;
			.d_pre{
				width: calc(100% / 7);
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 15rpx 0;
				.day{
					width: 64rpx;
					height: 64rpx;
					border-radius: 16rpx;
					background: #FFFFFF;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #9D9D9D;
					line-height: 64rpx;
					text-align: center;
					&.wd{
						color: #1D2129;
					}
					&.dq{
						color: #2E69EB;
						font-weight: bold;
						background: rgba(46,105,235,0.1);
					}
					&.select{
						color: #FFFFFF;
						font-weight: bold;
						background: #2E69EB;
					}
				}
				.status_boxs{
					display: flex;
					align-items: center;
				}
				.status{
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					margin-top: 5rpx;
					&.zc{
						background: #2E69EB;
					}
					&.yc{
						background: #FEA400;
					}
				}
			}
		}
	}
</style>