自定义日历

pagesStatistics/components/CusCalendar/index.vue

@@ -0,0 +1,195 @@
+<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" :class="{'zc':pre.status===0,'yc':pre.status===1}" v-if="pre.status<2"></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===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{
+					width: 10rpx;
+					height: 10rpx;
+					border-radius: 50%;
+					margin-top: 5rpx;
+					&.zc{
+						background: #2E69EB;
+					}
+					&.yc{
+						background: #FEA400;
+					}
+				}
+			}
+		}
+	}
+</style>