feat(作业记录): 添加作业ID参数支持并优化作业切换功能

在作业记录页面添加task_id和subtask_id参数支持为作业主页添加小作业切换功能优化学生记录页面的参数传递逻辑

feat(作业记录): 添加作业ID参数支持并优化作业切换功能
在作业记录页面添加task_id和subtask_id参数支持为作业主页添加小作业切换功能优化学生记录页面的参数传递逻辑
hookehuyr
Commit 10d7562c8602967c8148a60a9645d773f268b9bc 10d7562c 1 parent 15dc5bfb
Showing 4 changed files with 61 additions and 14 deletions
src/api/checkin.js
src/views/teacher/studentPage.vue
src/views/teacher/studentRecordPage.vue
src/views/teacher/taskHomePage.vue
--- a/src/api/checkin.js
View file @10d7562
+++ b/src/api/checkin.js
View file @10d7562
 /*
  * @Date: 2025-06-06 09:26:16
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-12-12 17:17:31
+ * @LastEditTime: 2025-12-12 18:06:49
  * @FilePath: /mlaj/src/api/checkin.js
  * @Description: 签到模块相关接口
  */
@@ -129,6 +129,8 @@ export const  dislikeUploadTaskInfoAPI = (params) => fn(fetch.post(Api.TASK_UPLO
  * @param team_id 大分组ID
  * @param subteam_id 小分组ID
  * @param created_by 学员ID
+ * @param task_id 大作业ID
+ * @param subtask_id 小作业ID
  * @param date 日期
  * @param keyword 搜索
  * @param order_by_time asc=正序，desc=倒序。默认为倒序
--- a/src/views/teacher/studentPage.vue
View file @10d7562
+++ b/src/views/teacher/studentPage.vue
View file @10d7562
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2025-06-19 17:12:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-12-11 20:55:35
+ * @LastEditTime: 2025-12-12 18:02:06
  * @FilePath: /mlaj/src/views/teacher/studentPage.vue
  * @Description: 学生详情页面
 -->
@@ -328,7 +328,7 @@ import PostCountModel from '@/components/count/postCountModel.vue'
 import { useTitle } from '@vueuse/core';
 import dayjs from 'dayjs';
-import { getCheckinTeacherListAPI, delUploadTaskInfoAPI, likeUploadTaskInfoAPI, dislikeUploadTaskInfoAPI } from "@/api/checkin";
+import { delUploadTaskInfoAPI, likeUploadTaskInfoAPI, dislikeUploadTaskInfoAPI } from "@/api/checkin";
 import { getStudentDetailAPI, getStudentCheckinListAPI, getStudentUploadListAPI, getCheckinFeedbackListAPI, addCheckinFeedbackAPI, delCheckinFeedbackAPI, getStudentStatAPI } from "@/api/teacher";
--- a/src/views/teacher/studentRecordPage.vue
View file @10d7562
+++ b/src/views/teacher/studentRecordPage.vue
View file @10d7562
 <!--
  * @Date: 2025-11-19 22:05:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-12-11 20:56:02
+ * @LastEditTime: 2025-12-12 18:09:33
  * @FilePath: /mlaj/src/views/teacher/studentRecordPage.vue
  * @Description: 学生作业记录页面（仅作业记录与点评功能），固定 user_id 与 group_id
 -->
@@ -247,10 +247,12 @@ function handleAudioPlay(id) {
 async function onLoad() {
     const nextPage = page.value
     const res = await getCheckinTeacherListAPI({
+        task_id: task_id.value,
+        subtask_id: selectedSubtaskId.value,
         limit: limit.value,
         page: nextPage,
-        created_by: fixedUserId,
+        created_by: created_by.value,
-        date: fixedDate,
+        date: date.value,
     })
     if (res.code) {
         checkinDataList.value = [...checkinDataList.value, ...formatData(res.data.checkin_list)]
--- a/src/views/teacher/taskHomePage.vue
View file @10d7562
+++ b/src/views/teacher/taskHomePage.vue
View file @10d7562
 <!--
  * @Date: 2025-11-19 21:00:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-12-12 17:39:55
+ * @LastEditTime: 2025-12-12 18:11:45
  * @FilePath: /mlaj/src/views/teacher/taskHomePage.vue
  * @Description: 教师端作业主页（头部介绍、统计、日历与学生完成情况；数据Mock）
 -->
@@ -9,14 +9,22 @@
     <div class="TaskHomePage">
         <!-- 头部卡片：名称、介绍、细项（参考图片1结构） -->
         <div class="headCard bg-white rounded-lg shadow px-4 py-4">
-            <div class="title text-2xl font-bold text-gray-900 mb-2">{{ task_title }}</div>
+            <div class="flex justify-between items-start mb-2">
+                <div class="title text-2xl font-bold text-gray-900 mr-2">{{ task_title }}</div>
+                <div v-if="subtask_list.length > 0"
+                    class="text-sm text-green-600 border border-green-600 rounded px-2 py-1 cursor-pointer whitespace-nowrap ml-2"
+                    @click="show_subtask_picker = true">
+                    {{ '切换作业' }}
+                </div>
+            </div>
+            <div class="text-sm font-bold text-gray-700">{{ current_subtask_name }}</div>
             <div class="intro text-base text-gray-700 leading-relaxed mb-3" v-html="task_intro"></div>
             <!-- 三图展示（可选），使用CDN示例地址并加压缩参数 -->
             <!-- <div class="images grid grid-cols-3 gap-3 mb-3">
                 <img v-for="(img, idx) in task_images" :key="idx" :src="img"
                     class="rounded-md object-cover w-full h-24" />
             </div> -->
-            <div class="details text-sm text-gray-600">
+            <div class="details text-sm text-gray-600" v-if="!subtask_list.length || selectedSubtaskId">
                 <div class="detailItem">周期：{{ task_details.cycle }}</div>
                 <div class="detailItem">频次：{{ task_details.frequency }}</div>
                 <div v-if="task_details.begin_date" class="detailItem">开始时间：{{ task_details.begin_date }}</div>
@@ -85,6 +93,17 @@
             </van-config-provider>
         </div>
+        <!-- 小作业选择弹窗 -->
+        <van-popup v-model:show="show_subtask_picker" position="bottom" round>
+            <van-picker
+                :columns="subtask_columns"
+                @confirm="on_confirm_subtask"
+                @cancel="show_subtask_picker = false"
+                show-toolbar
+                title="选择作业"
+            />
+        </van-popup>
+
         <!-- 学生完成情况（参考图片2样式） -->
         <div class="studentsCard bg-white rounded-lg shadow px-4 py-4 mt-4">
             <div class="flex items-center justify-between mb-3">
@@ -119,14 +138,13 @@ const $route = useRoute()
 const $router = useRouter()
 useTitle('作业主页')
-// TODO: 等正式接口到来的时候, 小作业列表或者大作业详情切换的时候, 在这个页面加一个切换小作业的列表按钮
-
 const themeVars = {
     calendarPopupHeight: '60%',
 }
 // 弹窗显示状态：是否展示“某个日期”选择日历
 const show_calendar_popup = ref(false)
+const show_subtask_picker = ref(false)
 // Calendar 默认选中日期（为 null 时不预选）
 const calendar_default_date = ref(null)
 // 快捷项当前选中模式：today | yesterday | specific
@@ -196,7 +214,7 @@ function open_specific_date_picker() {
 //
 // API 数据状态
 //
-const task_id = $route.params.id || '0'
+const task_id = $route.params.id
 const task_title = ref('')
 const task_intro = ref('')
 // 图片暂时保留 Mock 或从 API 扩展字段获取（当前 API 未返回图片列表，暂时保留为空或 Mock）
@@ -232,6 +250,23 @@ const selectedSubtaskId = ref('')
 // 小作业列表
 const subtask_list = ref([])
+const subtask_columns = computed(() => {
+    return subtask_list.value.map(item => ({ text: item.title, value: item.id }))
+})
+
+const current_subtask_name = computed(() => {
+    const found = subtask_list.value.find(item => item.id === selectedSubtaskId.value)
+    return found ? found.title : ''
+})
+
+const on_confirm_subtask = ({ selectedOptions }) => {
+    if (selectedOptions && selectedOptions[0]) {
+        selectedSubtaskId.value = selectedOptions[0].value
+        fetchData()
+    }
+    show_subtask_picker.value = false
+}
+
 /**
  * 获取作业详情和学生完成情况
  */
@@ -390,8 +425,16 @@ function go_student_record(stu) {
     if (task_type.value === 'checkin') {
         return
     }
-    // 跳转到固定ID的作业记录页面，当前版本不使用传入ID
+    // 跳转到作业记录页面
-    $router.push({ name: 'StudentRecord', query: { created_by: stu.id, date: selected_date.value } })
+    $router.push({
+        name: 'StudentRecord',
+        query: {
+            task_id,
+            subtask_id: selectedSubtaskId.value,
+            created_by: stu.id,
+            date: selected_date.value
+        }
+    })
 }
 </script>