feat(checkIn):考勤打卡历史记录日历显示

pages/mine/checkIn/checkIn.vue

@@ -11,7 +11,6 @@
 		</view>
 
 		<!-- 今日签到信息区域 -->
-		<!-- <view class="todayCheckIn" :class="{ 'show': shouldShow }"> -->
 		<view class="todayCheckIn" v-if="todayInfoShow">
 			<view class="check-in-container">
 				<text class="todayAttTitle">今日签到信息</text>
@@ -44,7 +43,7 @@
 			<view class="divider"></view>
 
 			<!-- 打卡记录 -->
-			<view class="container">
+			<!-- <view class="container">
 				<view class="header">
 					<text class="clockRecordTitle">打卡记录</text>
 				</view>
@@ -65,17 +64,17 @@
 						</view>
 					</z-paging>
 				</view>
-			</view>
+			</view> -->
 
 			<!-- 日历板块 -->
-			<!-- <template>
-				<view class="calendar-content" >
+			<template>
+				<view class="calendar-content">
 					<view>
-						<uni-calendar class="uni-calendar--hook" :selected="calenderData" :showMonth="true" @change="change"
+						<uni-calendar class="uni-calendar--hook" :selected="calenderData" :showMonth="true" @change="changeDate"
 							@monthSwitch="monthSwitch" />
 					</view>
 				</view>
-			</template> -->
+			</template>
 		</view>
 
 
@@ -136,19 +135,9 @@
 </template>
 
 <script setup lang="ts">
-	import {
-		ref,
-		onMounted,
-		reactive
-	} from 'vue';
-	import {
-		checkAttendance,
-		getMyTotalCount,
-		getMyQDQtAttendance
-	} from '@/api/mine.js'
-	import {
-		useUserStore
-	} from '@/store/user.js';
+	import {ref,onMounted,reactive} from 'vue';
+	import {checkAttendance,getMyTotalCount,getMyQDQtAttendance} from '@/api/mine.js'
+	import {useUserStore} from '@/store/user.js';
 	const userStore = useUserStore();
 
 	// 创建一个响应式对象记录今天的考勤数据
@@ -158,8 +147,6 @@
 		endTime: '', // 晚签到时间
 	})
 
-	
-
 
 	// 控制今日签到信息和图表显示的状态
 	const todayInfoShow = ref(true) // 今日签到信息是否显示
@@ -220,7 +207,7 @@
 		todayData.day = formatDate(nowDate);
 		getthisMondayDate(nowDate);
 		getDayAttData();
-
+		initCalenderData();
 	}
 
 	//格式化日期
@@ -242,11 +229,17 @@
 		}
 		checkAttendance(params).then(res => {
 			if ("success" == res.returnMsg) {
+				if (res.returnParams.list.length == 0) {
+					todayData.startTime = '';
+					todayData.endTime = ''
+					return;
+				}
 				const attList = res.returnParams.list;
 				const time1 = attList.find(item => item.att_type_id === '1');
 				const time2 = attList.filter(item => item.att_type_id === '2').pop();
 				if (time1 !== undefined) {
 					todayData.startTime = time1.att_time.split(' ')[1];
+					todayData.endTime ='';
 				}
 				if (time2 !== undefined) {
 					todayData.endTime = time2.att_time.split(' ')[1];
@@ -254,136 +247,163 @@
 			}
 		})
 	}
-//打卡历史记录(日历版)
-//日历表数据
-	const calenderData = ref([{
-		date: '2024-12-07',
-		info: '打卡'
-	},
-	{
-		date: '2024-12-08',
-		info: '签到',
-		data: {
-			custom: '自定义信息',
-			name: '自定义消息头'
-		}
-	}
-	])
+	//打卡历史记录(日历版)
+	//日历表数据
+	const calenderData = ref([])
 
-	// 初始化日历数据
-	function initCalenderData(){
+	// 初始化此月日历数据
+	function initCalenderData() {
 		const params = {
 			type: 2, //设置时间区间
 			universalid: userId,
-			ks_att_time: todayData.day.slice(0, 8)+'01',
+			ks_att_time: todayData.day.slice(0, 8) + '01',
 			js_att_time: todayData.day,
-			pSize: 31,
+			pSize: parseInt(todayData.day.slice(8, 10), 10),//当前天数
 			p: 1
 		}
-		getMyQDQtAttendance(params).then(({ returnParams }) => {
-			
-		})
+		getCalenderData(params)
 	}
 	
-	//传入年份月份，返回此月天数
-	function getDaysInMonth(year, month) {  
-	  const date = new Date(year, month - 1, 1); 
-	  // 将日期设置为下一个月的第0天，即当前月的最后一天
-	  date.setMonth(date.getMonth() + 1);
-	  date.setDate(0);
-	  // 返回当前月的最后一天的日期，即该月的天数
-	  return date.getDate();
-	}
-
-
-
-//打卡历史记录（下拉刷新版）
-	const paging = ref(null)
-	const pSize = ref(5)
-	function complete(list, total, pageNo) {
-		if (pageNo == 1) {
-			paging.value.complete(list);
-			return
-		}
-		// 防止重复获取最后一次信息
-		if (pSize.value * pageNo < total) {
-			paging.value.complete(list)
-		} else {
-			paging.value.complete([])
-		}
-	}
-	//日考勤历史记录
-	const clockRecords = ref([])
-	const totalPage = ref(0)
-	//获取日考勤历史(下拉刷新)
-	function getDayAttHistory() {
-		const params = {
-			type: 1, //不设时间区间
-			universalid: userId,
-			ks_att_time: '',
-			js_att_time: '',
-			pSize: pSize.value,
-			p: 1
-		}
+	//日历数据的刷新
+	function getCalenderData(params){
 		getMyQDQtAttendance(params).then(({ returnParams }) => {
-			totalPage.value = Math.ceil(returnParams.total / pSize.value)
-			const list = returnParams.list.map(item => {
-				return {
-					date: item.att_date.substring(0, 10),
-					morning: item.time.split(',')[item.type.split(',').indexOf("1")],
-					evening: item.time.split(',')[item.type.split(',').indexOf("2")],
+			//定义一个数组用于接收日历data
+			const thisCalenderData=[]
+			returnParams.list.forEach(item => {
+				if (!item.type.includes('1') || !item.type.includes('2')) {
+					const calenderDataInfo = {
+						date: item.att_date.slice(0, 10),
+						info: '缺卡'
+					}
+					thisCalenderData.push(calenderDataInfo)
 				}
 			});
-			clockRecords.value = list;
-
-			complete(clockRecords.value, returnParams.total, returnParams.current)
+			calenderData.value=thisCalenderData
 		})
 	}
 
-	// 刷新
-	function queryData(pageNo, pSize, queryType) {
-		switch (queryType) {
-			case 0: // 下拉刷新
-			case 1: // 初始加载
-				getDayAttHistory()
-				break
-			case 3: // 上拉加载
-				scrollQuery(pageNo, pSize)
-				break
-			default: // 默认刷新
-				getDayAttHistory()
-				break
-		}
+	//日历点击日期切换事件
+	function changeDate(e) {
+		// console.log('changeDate: ',e);
+		console.log("3:calenderData.value " + JSON.stringify(calenderData.value));
+		todayData.day = e.fulldate
+		getDayAttData()
 	}
 
-	//上拉加载事件
-	function scrollQuery(pageNo, pSize) {
+	//传入年份月份，返回此月天数
+	function getDaysInMonth(year, month) {
+		const date = new Date(year, month - 1, 1);
+		// 将日期设置为下一个月的第0天，即当前月的最后一天
+		date.setMonth(date.getMonth() + 1);
+		date.setDate(0);
+		// 返回当前月的最后一天的日期，即该月的天数
+		return date.getDate();
+	}
+
+	//月份切换事件
+	function monthSwitch(e) {
+		// console.log('monthSwitch: ', e);
+		const days=getDaysInMonth(e.year,e.month);
 		const params = {
-			type: 1, //不设时间区间
+			type: 2, //设置时间区间
 			universalid: userId,
-			ks_att_time: '',
-			js_att_time: '',
-			pSize: pSize,
-			p: pageNo
+			ks_att_time: e.year+'-'+e.month+'-' + '01',
+			js_att_time: e.year+'-'+e.month+'-' +days,
+			pSize: days,
+			p: 1
 		}
-		getMyQDQtAttendance(params).then(({ returnParams }) => {
-			const list = returnParams.list.map(item => {
-				return {
-					date: item.att_date.substring(0, 10),
-					morning: item.time.split(',')[item.type.split(',').indexOf("1")],
-					evening: item.time.split(',')[item.type.split(',').indexOf("2")],
-				}
-			});
-			if (pageNo <= totalPage.value) {
-				clockRecords.value.push(...list);
-			}
-			complete(list, returnParams.total, pageNo)
-		})
-	}
-
-
-
-	// 时间范围切换事件
+		getCalenderData(params);
+	}
+
+
+
+	// //打卡历史记录（下拉刷新版）
+	// const paging = ref(null)
+	// const pSize = ref(5)
+	// function complete(list, total, pageNo) {
+	// 	if (pageNo == 1) {
+	// 		paging.value.complete(list);
+	// 		return
+	// 	}
+	// 	// 防止重复获取最后一次信息
+	// 	if (pSize.value * pageNo < total) {
+	// 		paging.value.complete(list)
+	// 	} else {
+	// 		paging.value.complete([])
+	// 	}
+	// }
+	// //日考勤历史记录
+	// const clockRecords = ref([])
+	// const totalPage = ref(0)
+	// //获取日考勤历史(下拉刷新)
+	// function getDayAttHistory() {
+	// 	const params = {
+	// 		type: 1, //不设时间区间
+	// 		universalid: userId,
+	// 		ks_att_time: '',
+	// 		js_att_time: '',
+	// 		pSize: pSize.value,
+	// 		p: 1
+	// 	}
+	// 	getMyQDQtAttendance(params).then(({ returnParams }) => {
+	// 		totalPage.value = Math.ceil(returnParams.total / pSize.value)
+	// 		const list = returnParams.list.map(item => {
+	// 			return {
+	// 				date: item.att_date.substring(0, 10),
+	// 				morning: item.time.split(',')[item.type.split(',').indexOf("1")],
+	// 				evening: item.time.split(',')[item.type.split(',').indexOf("2")],
+	// 			}
+	// 		});
+	// 		clockRecords.value = list;
+
+	// 		complete(clockRecords.value, returnParams.total, returnParams.current)
+	// 	})
+	// }
+
+	// // 刷新
+	// function queryData(pageNo, pSize, queryType) {
+	// 	switch (queryType) {
+	// 		case 0: // 下拉刷新
+	// 		case 1: // 初始加载
+	// 			getDayAttHistory()
+	// 			break
+	// 		case 3: // 上拉加载
+	// 			scrollQuery(pageNo, pSize)
+	// 			break
+	// 		default: // 默认刷新
+	// 			getDayAttHistory()
+	// 			break
+	// 	}
+	// }
+
+	// //上拉加载事件
+	// function scrollQuery(pageNo, pSize) {
+	// 	const params = {
+	// 		type: 1, //不设时间区间
+	// 		universalid: userId,
+	// 		ks_att_time: '',
+	// 		js_att_time: '',
+	// 		pSize: pSize,
+	// 		p: pageNo
+	// 	}
+	// 	getMyQDQtAttendance(params).then(({ returnParams }) => {
+	// 		const list = returnParams.list.map(item => {
+	// 			return {
+	// 				date: item.att_date.substring(0, 10),
+	// 				morning: item.time.split(',')[item.type.split(',').indexOf("1")],
+	// 				evening: item.time.split(',')[item.type.split(',').indexOf("2")],
+	// 			}
+	// 		});
+	// 		if (pageNo <= totalPage.value) {
+	// 			clockRecords.value.push(...list);
+	// 		}
+	// 		complete(list, returnParams.total, pageNo)
+	// 	})
+	// }
+
+
+
+	// 日周月时间范围切换事件
 	function onTimeRangeChange(event) {
 		const selectedIndex = event.detail.value;
 		selectedTimeRange.value = timeRanges.value[selectedIndex]; // 设置选择的时间范围（日周月）
@@ -592,8 +612,6 @@
 	function updateChart(res) {
 		chartData.value = JSON.parse(JSON.stringify(res)); // 更新图表数据
 	}
-	
-	
 </script>