hookehuyr

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

在作业记录页面添加task_id和subtask_id参数支持
为作业主页添加小作业切换功能
优化学生记录页面的参数传递逻辑
/*
* @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=倒序。默认为倒序
......
......@@ -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";
......
<!--
* @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,
date: fixedDate,
created_by: created_by.value,
date: date.value,
})
if (res.code) {
checkinDataList.value = [...checkinDataList.value, ...formatData(res.data.checkin_list)]
......
<!--
* @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>
......