فهرست منبع

学生端已接入API

Jiang Pengyu 1 سال پیش
والد
کامیت
76fb5fdf62
4فایلهای تغییر یافته به همراه197 افزوده شده و 36 حذف شده
  1. 9 0
      src/apis/assignment.ts
  2. 16 0
      src/types/vo.ts
  3. 58 7
      src/views/HomeworkPage/component/HomeworkDetail.vue
  4. 114 29
      src/views/HomeworkPage/index.vue

+ 9 - 0
src/apis/assignment.ts

@@ -33,6 +33,15 @@ const assignmentApis = {
             }
         })
     },
+    // 新增:获取学生在特定课程下的作业状态
+    getStudentAssignmentsByCourse(studentId: string, courseId: string) {
+        return axiosInstance.get("/api/course/student/assignments", {
+            params: {
+                studentId,
+                courseId
+            }
+        })
+    },
     updateAssignment(assignmentId:number, assignmentDTO:AssignmentDTO){
         return axiosInstance.post(`${ASSIGNMENT_PREFIX}/update`, assignmentDTO, {
             params: {

+ 16 - 0
src/types/vo.ts

@@ -140,3 +140,19 @@ export interface CourseDetailVO {
     description: string;
 }
 
+// 新增:学生作业状态接口
+export interface StudentAssignmentStatus {
+    assignmentId: number;
+    assignmentName: string;
+    status: 'CORRECTED' | 'SUBMITTED' | 'NOT_SUBMITTED';
+    score: number;
+}
+
+// 新增:学生课程作业响应接口
+export interface StudentCourseAssignmentsResponse {
+    studentId: number;
+    officialNumber: string;
+    stuName: string;
+    assignments: StudentAssignmentStatus[];
+}
+

+ 58 - 7
src/views/HomeworkPage/component/HomeworkDetail.vue

@@ -16,6 +16,10 @@
           <span style="font-weight: 600">发布老师: </span>
           {{data.teacherName}}
         </div>
+        <div class="item">
+          <span style="font-weight: 600">开始时间: </span>
+          {{new Date(Date.parse(data.startTime)).toLocaleString()}}
+        </div>
         <div class="item">
           <span style="font-weight: 600">截止日期: </span>
           {{new Date(Date.parse(data.endTime)).toLocaleString()}}
@@ -24,7 +28,13 @@
           <el-link type="primary" @click="downloadFile(data.descriptionFile, `${data.assignmentName}-描述文件`)">相关文件下载</el-link>
           <div class="button-container">
             <el-button style="margin-left: 550px; color: #FFFFFF;" color="#7EB5E1" @click="handleBack">返回</el-button>
-            <el-button style="color: #FFFFFF;" color="#7ADBB0" @click="handleStart()" :disabled="new Date() > new Date(data.endTime)">
+            <el-button 
+              style="color: #FFFFFF;" 
+              color="#7ADBB0" 
+              @click="handleStart()" 
+              :disabled="isAssignmentDisabled"
+              :title="getButtonTooltip"
+            >
               开始{{ data.type }}
             </el-button>
           </div>
@@ -54,7 +64,7 @@
 <script lang="ts" setup>
 import useApis from "@/apis";
 import {useRoute} from "vue-router";
-import {onMounted, reactive} from "vue";
+import {onMounted, reactive, computed} from "vue";
 import type {IAssignment} from "@/types/vo";
 import './homeworkDetail.scss'
 import {useStore} from "@/store";
@@ -82,6 +92,31 @@ let data = reactive<IAssignment>({
   type:""
 })
 
+// 计算属性:判断作业是否应该禁用
+const isAssignmentDisabled = computed(() => {
+  const now = new Date()
+  const startTime = new Date(data.startTime)
+  const endTime = new Date(data.endTime)
+  
+  // 如果当前时间小于开始时间,或者大于结束时间,则禁用
+  return now < startTime || now > endTime
+})
+
+// 计算属性:按钮提示文本
+const getButtonTooltip = computed(() => {
+  const now = new Date()
+  const startTime = new Date(data.startTime)
+  const endTime = new Date(data.endTime)
+  
+  if (now < startTime) {
+    return `作业尚未开始,开始时间:${startTime.toLocaleString()}`
+  } else if (now > endTime) {
+    return `作业已截止,截止时间:${endTime.toLocaleString()}`
+  } else {
+    return '点击开始作业'
+  }
+})
+
 function handleStart(){
   getEngagement()
   console.log(data.type)
@@ -131,8 +166,14 @@ const fetchData = () => {
 }
 
 const handleBack = () => {
-   // 跳转到我的作业页面
-   router.push('/home/myHomework').then(() => {window.location.reload()})
+   // 跳转到我的作业页面,携带课程ID参数以便自动选中对应课程
+   router.push({
+     path: '/home/myHomework',
+     query: {
+       courseId: data.courseId,
+       fromAssignment: 'true'
+     }
+   }).then(() => {window.location.reload()})
 }
 
 onMounted(() => {
@@ -149,11 +190,21 @@ export default {
 <style scoped>
   .button-container {
     display: flex;
-
   }
+  
   .el-button {
-  margin-right:0px;
-}
+    margin-right: 0px;
+  }
+  
+  /* 禁用状态的开始按钮样式 */
+  .el-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  
+  .el-button:disabled:hover {
+    opacity: 0.6;
+  }
 </style>
 
 

+ 114 - 29
src/views/HomeworkPage/index.vue

@@ -103,7 +103,11 @@
                 <el-icon><ZoomIn /></el-icon>
                 详情
               </el-button>
-              <el-button class="result-btn" @click="viewCorrection(assignment.assignmentId, store.user.id, assignment.type, assignment.assignmentName)">
+              <el-button 
+                class="result-btn" 
+                :disabled="getSecondStatusText(assignment) !== '已批改'"
+                @click="viewCorrection(assignment.assignmentId, store.user.id, assignment.type, assignment.assignmentName)"
+              >
                 <el-icon><ZoomIn /></el-icon>
                 批改结果
               </el-button>
@@ -121,7 +125,7 @@
   import {onMounted, reactive, ref, computed, watch} from "vue";
   import useApis from "@/apis";
   import {useStore} from "@/store";
-  import type {CourseVO, IAssignment} from "@/types/vo";
+  import type {CourseVO, IAssignment, StudentCourseAssignmentsResponse, StudentAssignmentStatus} from "@/types/vo";
   import router from "@/router";
   import {useRoute} from "vue-router";
 
@@ -171,6 +175,9 @@
   
   // 所有作业数据
   const allAssignments = ref<IAssignment[]>([])
+  
+  // 学生作业状态数据
+  const studentAssignmentStatus = ref<Map<number, StudentAssignmentStatus[]>>(new Map())
 
   // 获取的所有作业
   let homeworkList = reactive<{
@@ -263,26 +270,32 @@
     currentCourseAssignments.value = allAssignments.value.filter(
       assignment => assignment.courseId === courseId
     )
+    
+    console.log('当前role:', role)
+    console.log('studentAssignmentStatus.value.has(courseId):', studentAssignmentStatus.value.has(courseId))
+    
+    // 如果是学生角色且还没有该课程的作业状态数据,主动获取
+    if (role === 'student' && !studentAssignmentStatus.value.has(courseId)) {
+      console.log('没有找到课程状态数据,主动获取...')
+      fetchStudentAssignmentStatus(courseId)
+    } else if (role === 'student') {
+      console.log('已存在课程状态数据:', studentAssignmentStatus.value.get(courseId))
+    }
     console.log('选中课程后,当前课程作业数量:', currentCourseAssignments.value.length)
-    console.log('allAssignments总数:', allAssignments.value.length)
   }
   
   // 处理路由参数 - 从其他页面返回时自动选中课程
   const handleRouteParams = () => {
     const { courseId, fromAssignment } = route.query
     
-    console.log('handleRouteParams 被调用,参数:', { courseId, fromAssignment })
-    console.log('课程列表长度:', courseList.value.length, '作业总数:', allAssignments.value.length)
     
     // 如果有课程ID参数且是从作业页面返回的
     if (courseId && fromAssignment === 'true') {
       const targetCourseId = Number(courseId)
-      console.log('目标课程ID:', targetCourseId)
       
       // 检查目标课程是否存在
       const targetCourse = courseList.value.find(course => course.courseId === targetCourseId)
       if (targetCourse) {
-        console.log('找到目标课程,开始选择课程')
         selectCourse(targetCourseId)
         
         // 清除路由参数,避免重复处理
@@ -329,6 +342,11 @@
       filtered = filtered.filter(assignment => getActualStatus(assignment) === selectedStatus.value)
     }
     
+    // 按第二个状态筛选
+    if (selectedSecondStatus.value !== '全部') {
+      filtered = filtered.filter(assignment => getSecondStatusText(assignment) === selectedSecondStatus.value)
+    }
+    
     return filtered
   })
 
@@ -399,21 +417,36 @@
     return getActualStatus(assignment)
   }
 
-  // 生成随机的提交状态(用于假数据)
-  const getRandomSubmissionStatus = () => {
-    const statuses = ['已批改', '已提交', '未完成']
-    return statuses[Math.floor(Math.random() * statuses.length)]
-  }
-
   // 获取第二个状态的文本
-  const getSecondStatusText = (assignment: any) => {
-    return assignment.submissionStatus || '未完成'
+  const getSecondStatusText = (assignment: IAssignment) => {
+    if (role === 'student') {
+      // 从真实API数据中获取状态
+      const courseStatus = studentAssignmentStatus.value.get(assignment.courseId)
+      console.log(2)
+      if (courseStatus) {
+        console.log(1)
+        const assignmentStatus = courseStatus.find(status => status.assignmentId === assignment.assignmentId)
+        if (assignmentStatus) {
+          switch (assignmentStatus.status) {
+            case 'CORRECTED':
+              return '已批改'
+            case 'SUBMITTED':
+              return '已提交'
+            case 'NOT_SUBMITTED':
+              return '未完成'
+            default:
+              return '未完成'
+          }
+        }
+      }
+    }
+    return '未完成'
   }
 
   // 获取第二个状态的样式类
-  const getSecondStatusClass = (assignment: any) => {
-    const status = assignment.submissionStatus || '未完成'
-    switch(status) {
+  const getSecondStatusClass = (assignment: IAssignment) => {
+    const statusText = getSecondStatusText(assignment)
+    switch(statusText) {
       case '已批改':
       case '已提交':
         return 'status-submitted'
@@ -424,30 +457,56 @@
     }
   }
 
+  // 获取学生作业状态数据
+  const fetchStudentAssignmentStatus = (courseId: number) => {
+    if (role === 'student') {
+      console.log('开始获取学生作业状态数据,课程ID:', courseId)
+      apis.getStudentAssignmentsByCourse(store.user.id.toString(), courseId.toString())
+        .then((res: any) => {
+          console.log('API响应:', res)
+          if (res.data.code === 200) {
+            const responseData: StudentCourseAssignmentsResponse = res.data.data
+            console.log('获取到学生作业状态数据:', responseData)
+            console.log('存储到Map中,courseId:', courseId, 'assignments:', responseData.assignments)
+            studentAssignmentStatus.value.set(courseId, responseData.assignments)
+            console.log('存储后的Map:', studentAssignmentStatus.value)
+          } else {
+            console.log('API返回错误代码:', res.data.code, res.data.msg)
+          }
+        })
+        .catch((error: any) => {
+          console.error('获取学生作业状态数据失败:', error)
+        })
+    }
+  }
+
   const fetchHomeworkListByCourseId = (courseId:number) => {
-    console.log('开始获取课程', courseId, '的作业数据')
+    // console.log('开始获取课程', courseId, '的作业数据')
     apis.getAssignmentByCourseId(courseId)
         .then((res: any) => {
           let total = res.data.data.total
-          console.log('课程', courseId, '总作业数:', total)
+          // console.log('课程', courseId, '总作业数:', total)
           apis.getAssignmentByCourseId(courseId, 1, total)
               .then((res: any) => {
                 let data = res.data.data.records
-                console.log('课程', courseId, '获取到', data.length, '个作业')
+                // console.log('课程', courseId, '获取到', data.length, '个作业')
                 for(let i = 0; i < data.length; i++) {
                   data[i].endTime = formatDate(data[i].endTime)
                   data[i].courseId = courseId // 添加课程ID
-                  // 添加假的第二个状态数据
-                  data[i].submissionStatus = getRandomSubmissionStatus()
                   homeworkList.tableData.push(data[i])
                   allAssignments.value.push(data[i]) // 添加到所有作业数组
-                  console.log('添加作业:', data[i].assignmentName, 'courseId:', data[i].courseId)
+                  // console.log('添加作业:', data[i].assignmentName, 'courseId:', data[i].courseId)
+                }
+                // console.log('课程', courseId, '作业加载完成,当前allAssignments总数:', allAssignments.value.length)
+                
+                // 如果是学生角色,获取作业状态数据
+                if (role === 'student') {
+                  fetchStudentAssignmentStatus(courseId)
                 }
-                console.log('课程', courseId, '作业加载完成,当前allAssignments总数:', allAssignments.value.length)
                 
                 // 如果有选中的课程且正好是这个课程ID,立即重新筛选
                 if (selectedCourseId.value === courseId) {
-                  console.log('检测到当前选中课程', courseId, '的作业已加载,重新筛选')
+                  // console.log('检测到当前选中课程', courseId, '的作业已加载,重新筛选')
                   selectCourse(courseId)
                 }
                 
@@ -474,7 +533,7 @@
 
   // 监听课程列表变化,数据加载完成后处理路由参数
   watch(courseList, (newCourseList) => {
-    console.log('courseList 变化,课程数量:', newCourseList.length)
+    // console.log('courseList 变化,课程数量:', newCourseList.length)
     if (newCourseList.length > 0) {
       handleRouteParams()
     }
@@ -482,11 +541,11 @@
 
   // 监听作业数据变化,确保作业数据也加载完成
   watch(allAssignments, (newAssignments) => {
-    console.log('allAssignments 变化,作业数量:', newAssignments.length)
+    // console.log('allAssignments 变化,作业数量:', newAssignments.length)
     
     // 如果有选中的课程且作业数据更新了,重新筛选作业
     if (selectedCourseId.value && newAssignments.length > 0) {
-      console.log('重新筛选选中课程的作业,课程ID:', selectedCourseId.value)
+      // console.log('重新筛选选中课程的作业,课程ID:', selectedCourseId.value)
       selectCourse(selectedCourseId.value)
     }
     
@@ -496,6 +555,17 @@
     }
   }, { immediate: false })
 
+  // 监听学生作业状态数据变化
+  watch(studentAssignmentStatus, (newStatus) => {
+    console.log('studentAssignmentStatus 变化,课程数量:', newStatus.size)
+    // 当状态数据更新时,重新筛选当前选中课程的作业
+    if (selectedCourseId.value) {
+      currentCourseAssignments.value = allAssignments.value.filter(
+        assignment => assignment.courseId === selectedCourseId.value
+      )
+    }
+  }, { immediate: false, deep: true })
+
   onMounted(() => {
     fetchData()
   })
@@ -838,4 +908,19 @@ export default {
 .result-btn:hover {
   background-color: #40a9ff;
 }
+
+/* 禁用状态的批改结果按钮样式 */
+.result-btn:disabled {
+  background-color: #1890ff;
+  border-color: #1890ff;
+  color: white;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.result-btn:disabled:hover {
+  background-color: #1890ff;
+  border-color: #1890ff;
+  color: white;
+}
 </style>