feat(教师打卡): 添加教师查看已打卡日期功能

在日历组件中添加月份切换事件处理，当年级、班级或课程选择变化时重新获取对应月份的打卡日期数据

feat(教师打卡): 添加教师查看已打卡日期功能
在日历组件中添加月份切换事件处理，当年级、班级或课程选择变化时重新获取对应月份的打卡日期数据
hookehuyr
Commit 2154c427881aec2011bee7e96fe73de83a94339d 2154c427 1 parent 9ef79cfe
Showing 2 changed files with 45 additions and 5 deletions
src/api/checkin.js
src/views/teacher/checkinPage.vue
--- a/src/api/checkin.js
View file @2154c42
+++ b/src/api/checkin.js
View file @2154c42
 /*
  * @Date: 2025-06-06 09:26:16
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-25 11:41:56
+ * @LastEditTime: 2025-10-27 15:51:02
  * @FilePath: /mlaj/src/api/checkin.js
  * @Description: 签到模块相关接口
  */
@@ -20,6 +20,7 @@ const Api = {
   TASK_UPLOAD_DISLIKE: '/srv/?a=checkin&t=dislike',
   CHECKIN_TEACHER_LIST: '/srv/?a=checkin&t=teacher_list',
   CHECKIN_TEACHER_REVIEW: '/srv/?a=checkin&t=teacher_review',
+  CHECKIN_TEACHER_CHECKED_DATES: '/srv/?a=checkin&t=teacher_checked_dates',
 }
 /**
@@ -126,3 +127,14 @@ export const  getCheckinTeacherListAPI = (params) => fn(fetch.get(Api.CHECKIN_TE
  * @returns
  */
 export const  checkinTaskReviewAPI = (params) => fn(fetch.post(Api.CHECKIN_TEACHER_REVIEW, params))
+
+/**
+ * @description: 老师查看已打卡日期
+ * @param grade_id 年级ID
+ * @param class_id 班级ID
+ * @param group_id 课程ID
+ * @param month 月份
+ * @param keyword 搜索
+ * @returns data: { my_checkin_dates 已打卡日期列表 }
+ */
+export const  getCheckinTeacherCheckedDatesAPI = (params) => fn(fetch.get(Api.CHECKIN_TEACHER_CHECKED_DATES, params))
--- a/src/views/teacher/checkinPage.vue
View file @2154c42
+++ b/src/views/teacher/checkinPage.vue
View file @2154c42
 <!--
   * @Date: 2025-05-29 15:34:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-15 15:39:00
+ * @LastEditTime: 2025-10-27 16:21:16
  * @FilePath: /mlaj/src/views/teacher/checkinPage.vue
   * @Description: 文件描述
 -->
@@ -19,6 +19,7 @@
       <van-calendar ref="myRefCalendar" :show-title="false" :poppable="false" :show-confirm="false" :style="{ height: calendarHeight }"
         switch-mode="year-month" color="#4caf50" :formatter="formatter" row-height="50" :show-mark="false"
         @select="onSelectDay"
+        @panel-change="onPanelChange"
         @click-subtitle="onClickSubtitle">
       </van-calendar>
       <div style="padding: 0 1rem; margin-top: 1rem;">
@@ -193,7 +194,7 @@ import AudioPlayer from "@/components/ui/AudioPlayer.vue";
 import { useTitle } from '@vueuse/core';
 import dayjs from 'dayjs';
-import { getTaskDetailAPI, getCheckinTeacherListAPI, checkinTaskReviewAPI, likeUploadTaskInfoAPI, dislikeUploadTaskInfoAPI } from "@/api/checkin";
+import { getTaskDetailAPI, getCheckinTeacherListAPI, checkinTaskReviewAPI, likeUploadTaskInfoAPI, dislikeUploadTaskInfoAPI,getCheckinTeacherCheckedDatesAPI } from "@/api/checkin";
 import { getTeacherGradeClassListAPI } from "@/api/teacher";
 const route = useRoute()
@@ -211,12 +212,16 @@ const gradeOption = ref([]);
 const classOption = ref([]);
 const courseOption = ref([]);
+const currentMonth = ref(dayjs().format('YYYY-MM'));
+
 const handleGradeChange = async (val) => {
   console.log('val', val);
   selectGradeValue.value = val;
   selectCourseValue.value = null;
   // 根据年级ID 更新过滤列表
   getFilterList(val);
+  // 重新获取打卡日期
+  getCheckedDates(currentMonth.value);
   // 重置分页参数
   page.value = 0
   checkinDataList.value = []
@@ -231,6 +236,8 @@ const handleClassChange = (val) => {
   selectCourseValue.value = null;
   // 根据年级ID和班级ID 更新过滤列表
   getFilterList(selectGradeValue.value, val);
+  // 重新获取打卡日期
+  getCheckedDates(currentMonth.value);
   // 重置分页参数
   page.value = 0
   checkinDataList.value = []
@@ -242,6 +249,8 @@ const handleClassChange = (val) => {
 const handleCourseChange = (val) => {
   console.log('val', val);
   selectCourseValue.value = val;
+  // 重新获取打卡日期
+  getCheckedDates(currentMonth.value);
   // 重置分页参数
   page.value = 0
   checkinDataList.value = []
@@ -569,6 +578,12 @@ const onClickSubtitle = (evt) => {
   console.warn('点击了日期标题');
 }
+// 切换月份时触发
+const onPanelChange = ({ date }) => {
+  currentMonth.value = dayjs(date).format('YYYY-MM');
+  getCheckedDates(currentMonth.value);
+}
+
 const handLike = async (post) => {
   if (!post.is_liked) {
     const { code, data } = await likeUploadTaskInfoAPI({ checkin_id: post.id, })
@@ -677,8 +692,19 @@ const getTaskDetail = async (month) => {
     progress1.value = ((data.checkin_number/data.target_number)*100).toFixed(1); // 计算进度条百分比
     showProgress.value = !isNaN(progress1.value); // 如果是NaN，就不显示进度条
     teamAvatars.value = data.checkin_avatars;
-    // 获取当前用户的打卡日期
+  }
-    myCheckinDates.value = data.my_checkin_dates;
+}
+
+// 获取用户打卡日期的函数
+const getCheckedDates = async (month) => {
+  const checkedDatesResult = await getCheckinTeacherCheckedDatesAPI({
+    grade_id: selectGradeValue.value,
+    class_id: selectClassValue.value,
+    group_id: selectCourseValue.value,
+    month
+  });
+  if (checkedDatesResult.code) {
+    myCheckinDates.value = checkedDatesResult.data.my_checkin_dates;
     // 把['2025-06-06'] 转化为 [6] 只取日期去掉0
     // myCheckinDates.value = myCheckinDates.value.map(date => {
     //   return dayjs(date).date();
@@ -757,10 +783,12 @@ onMounted(async () => {
   const current_date = route.query.date;
   if (current_date) {
     getTaskDetail(dayjs(current_date).format('YYYY-MM'));
+    getCheckedDates(dayjs(current_date).format('YYYY-MM'));
     myRefCalendar.value?.reset(new Date(current_date));
     onLoad(current_date);
   } else {
     getTaskDetail(dayjs().format('YYYY-MM'));
+    getCheckedDates(dayjs().format('YYYY-MM'));
     onLoad(dayjs().format('YYYY-MM-DD'));
   }
   // 获取老师的年级、班级、课程列表信息