联调完成+优化界面加逻辑

src/apis/class.ts

@@ -0,0 +1,70 @@
+import axiosInstance from "@/apis/axios.config";
+//提交的后端路径
+const ENGAGE_PREFIX = "/api/class"
+
+const classApis = {
+    getClassOfCourse:(courseId: number) => {
+        return axiosInstance.get(ENGAGE_PREFIX+"/select",{
+            params:{
+                courseId
+            }
+        })
+    },
+    createClassOfCourse:(courseId:number,className:string,classTime:string,teacherId:number) => {
+        return axiosInstance.post(ENGAGE_PREFIX+"/create",{
+            courseId,
+            className,
+            classTime,
+            teacherId
+        })
+    },
+    deleteClass:(classId:number) => {
+        return axiosInstance.delete(ENGAGE_PREFIX+"/delete",{
+            params:{
+                classId
+            }
+        })
+    },
+    getStudentsOfClass:(classId:number) => {
+        return axiosInstance.get(ENGAGE_PREFIX+`/${classId}`)
+    },
+    addStudentOfClasss:(classId:number,officialNumber:number) => {
+        return axiosInstance.post(ENGAGE_PREFIX+`/${classId}/students`,{},{
+            params:{
+                officialNumber
+            }
+        })
+    },
+    deleteStudentOfClass:(classId:number,officialNumbers) => {
+        return axiosInstance.delete(ENGAGE_PREFIX+`/${classId}/students/batch`,{
+            headers:{
+                'Content-Type': 'application/json'
+            },
+            data: officialNumbers
+        })
+    },
+    getClassStatesOfCourse:(classId:number,assignmentId:number) => {
+        return axiosInstance.get(`/api/assignment/class/${classId}/status`,{
+            params:{
+                assignmentId
+            }
+        })
+    },
+    getHomeworkOfStudent:(courseId:number,studentId:number) => {
+        return axiosInstance.get(`/api/course/student/assignments`,{
+            params:{
+                studentId,
+                courseId
+            }
+        })
+    },
+    getClassByClassId:(classId:number) => {
+        return axiosInstance.get(`/api/class/find/${classId}`)
+    },
+    getClassNameOfStudent:(courseId:number,studentId:number) => {
+        return axiosInstance.get(ENGAGE_PREFIX+`/student/${studentId}/course/${courseId}`)
+    }
+}
+
+
+export default classApis

src/apis/index.ts

@@ -11,7 +11,7 @@ import evaluationApis from "@/apis/evaluation";
 import emailApis from "@/apis/email";
 import authApis from "@/apis/auth";
 import bevaviorApis from "@/apis/behavior";
-
+import classApis from "@/apis/class";
 
 const apis = {
     ...authApis,
@@ -27,6 +27,7 @@ const apis = {
     ...evaluationApis,
     ...emailApis,
     ...bevaviorApis,
+    ...classApis,
 }
 
 // hook

src/assets/plus-square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4a90c4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>

src/types/vo.ts

@@ -147,6 +147,7 @@ export interface ClassVO {
     teacherId: number;
     courseId: number;
     stuNumber: number;
+    classCode: number;
 }
 
 export interface ClassStudentVO {

src/views/ClassPage/ClassDetail.vue

@@ -27,6 +27,7 @@
             </button>
         </div>
     </div>
+    <div class="loading" v-show="!DataLoading"> Loading...</div>
 </template>
 
 <script setup lang="ts">
@@ -185,4 +186,13 @@ export default {
         }
     }
 }
+.loading{
+    height: 100%;
+    width: 100%;
+    text-align: center;
+    line-height: 100vh;
+    font-size: 44px;
+    font-weight: 700;
+    color: #70bbdb;
+}
 </style>

src/views/ClassPage/ClassHomework.vue

@@ -3,16 +3,16 @@
         <div class="search">
             <img src="@/assets/search.svg" width="20px" height="20px"></img> 
             <div class="searchInput">
-                <input type="text" v-model.trim="searchInput" placeholder="输入姓名或学号">
+                <input type="text" v-model.trim="searchInput" placeholder="输入姓名或学号" :disabled="!isTable">
                 <div class="fix">
                     <span>搜索</span>
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#b8b8b8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
                 </div>
             </div>
             <div class="Myselect">
-                <select id="selectHomework" v-model="TheHomework" @change="changeHomework"> 
-                    <option value="无">选择作业</option>
-                    <option v-for="item in Homeworksdata" :value="item">{{item}}</option>
+                <select id="selectHomework" v-model="TheHomework" @change="changeHomework" :disabled="!isTable"> 
+                    <option value=-1>选择作业</option>
+                    <option v-for="item in Homeworksdata" :value="item.assignmentId">{{item.assignmentName}}</option>
                 </select>
                 <div class="show">
                         {{ ShowTheHomework }}
@@ -27,16 +27,14 @@
                         {{ ShowTheSort }}
                 </div>
             </div>
-            <div class="toggle">
-                <button class="left"
-                        :class="{'active':isTable,'unactive':!isTable}"
-                        @click="isTable=true"
-                >table</button>
-                <button class="right"
-                        :class="{'active':!isTable,'unactive':isTable}"
-                        @click="isTable=false"
-                >统计图</button>
-            </div>
+            <classToggle v-model:isLeft="isTable">
+                <template #left>
+                    table
+                </template>
+                <template #right>
+                    chart
+                </template>
+            </classToggle>
         </div>
         <div class="content">
             <div class="Loading" v-show="!DataLoading">Loading...</div>
@@ -61,12 +59,12 @@
                                 :class="{Gethover:hoverStuId===item.studentId,Blue:true}"
                                 >{{ item.stuName }}</td>
                             <td>{{ item.officialNumber }}</td>
-                            <td>
+                            <td  @click="$router.push(`/home/assignment/${ShowTheHomeworkId}/correct?studentId=${item.studentId}`)">
                                 <div class="highScore" v-if="item.score>=80"> {{ item.score }}</div>
                                 <div class="midScore" v-else-if="item.score>=60"> {{ item.score }}</div>
                                 <div class="lowScore" v-else-if="item.score>0"> {{ item.score }}</div>
-                                <div class="uncorrected" v-else-if="item.state==='未批改'"> 未批改</div>
-                                <div class="unsubmitted" v-else-if="item.state==='未提交'"> 未提交</div>             
+                                <div class="uncorrected" v-else-if="item.status==='SUBMITTED'"> 未批改</div>
+                                <div class="unsubmitted" v-else-if="item.status==='NOT_SUBMITTED'"> 未提交</div>             
                             </td>
                         </template>
                         <template v-else>
@@ -101,12 +99,12 @@
                                 :class="{Gethover:hoverStuId===item.studentId,Blue:true}"
                                 >{{ item.stuName }}</td>
                             <td>{{ item.officialNumber }}</td>
-                            <td>
+                            <td @click="$router.push(`/home/assignment/${ShowTheHomeworkId}/correct?studentId=${item.studentId}`)">
                                 <div class="highScore" v-if="item.score>=80"> {{ item.score }}</div>
                                 <div class="midScore" v-else-if="item.score>=60"> {{ item.score }}</div>
                                 <div class="lowScore" v-else-if="item.score>0"> {{ item.score }}</div>
-                                <div class="uncorrected" v-else-if="item.state==='未批改'"> 未批改</div>
-                                <div class="unsubmitted" v-else-if="item.state==='未提交'"> 未提交</div>                
+                                <div class="uncorrected" v-else-if="item.status==='SUBMITTED'"> 未批改</div>
+                                <div class="unsubmitted" v-else-if="item.status==='NOT_SUBMITTED'"> 未提交</div>                
                             </td>
                         </template>
                         <template v-else>
@@ -135,12 +133,14 @@
 
 <script setup lang="ts">
 import classTable from './components/classTable.vue';
+import classToggle from './components/classToggle.vue'
 import {onMounted, ref, computed, watch, nextTick } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from "@/store"
 import * as echarts from 'echarts'
 import useApis from "@/apis";
 
+const apis = useApis()
 const store = useStore()
 const route = useRoute()
 const router = useRouter()
@@ -149,8 +149,9 @@ const courseId = +route.query.courseId;
 
 const currentPage = ref(1)
 const searchInput = ref("")
-const TheHomework = ref("无")
-const ShowTheHomework = ref("第一次作业")
+const TheHomework = ref(-1)
+const ShowTheHomework = ref("")
+const ShowTheHomeworkId = ref(-1)
 const TheSort = ref("无")
 const ShowTheSort = ref("默认")
 const hoverStuId = ref(-1)
@@ -174,10 +175,10 @@ const setChart = () => {
     const chartInstance2 = echarts.init(chartRef2.value)
     let excellentnum=0, goodnum=0 , failnum=0 , uncorrectednum=0 , unsubmittednum=0
     Studentsdata.value.forEach((item)=>{
-        if(item.state === "未提交"){
+        if(item.status === "NOT_SUBMITTED"){
             unsubmittednum++
         }
-        else if(item.state === "未批改"){
+        else if(item.status === "SUBMITTED"){
             uncorrectednum++
         }
         else if(item.score<60){
@@ -282,100 +283,35 @@ const identify = () => {
         router.push('/404')
     }
 }
+const getHomeworks = async () => {
+    // console.log(courseId,classId);
+    console.log(ShowTheHomeworkId.value);
+    await apis.getAssignmentByCourseId(courseId)
+        .then((res:any)=>{
+            // console.log('----------------------');
+            // console.log(res.data.data.records);
+            res.data.data.records.forEach(item => Homeworksdata.value.push(item))
+            ShowTheHomework.value = res.data.data.records[0].assignmentName
+            ShowTheHomeworkId.value = res.data.data.records[0].assignmentId
+        })
+    // t.forEach(item => Homeworksdata.value.push(item))
+    HomeworkDataLoading.value = true
+    console.log(ShowTheHomeworkId.value);
+}
 const getStudents = () => {
     StudentsDataLoading.value=false
-    setTimeout(()=>{
-    console.log("classID:",classId);
-    console.log("作业:",ShowTheHomework);
-    const newData = [
-    {
-        "officialNumber": 522025320092,
-        "stuName": "关谷神奇",
-        "state": "已提交",
-        "score": 88,
-        "studentId": 1
-
-    },
-    {
-        "officialNumber": 522025312092,
-        "stuName": "唐悠悠",
-        "state": "已提交",
-        "score": 92,
-        "studentId": 2
-    },
-    {
-        "officialNumber": 1231232,
-        "stuName": "曾小贤",
-        "state": "未提交",
-        "score": 0,
-        "studentId": 3
-    },
-    {
-        "officialNumber": 123123123123,
-        "stuName": "陈美嘉",
-        "state": "已提交",
-        "score": 59,
-        "studentId": 4
-    },
-    {
-        "officialNumber": 123132435132,
-        "stuName": "胡一菲",
-        "state": "已提交",
-        "score": 100,
-        "studentId": 5
-    },
-    {
-        "officialNumber": 123442,
-        "stuName": "张伟",
-        "state": "未批改",
-        "score": 0,
-        "studentId": 6
-    },
-    {
-        "officialNumber": 1231231662,
-        "stuName": "吕子乔",
-        "state": "已提交",
-        "score": 57,
-        "studentId": 7
-    },
-    {
-        "officialNumber": 12399312312,
-        "stuName": "展播",
-        "state": "已提交",
-        "score": 93,
-        "studentId": 8
-    },
-    {
-        "officialNumber": 123993112,
-        "stuName": "婉瑜",
-        "state": "已提交",
-        "score": 79,
-        "studentId": 9
-    },
-    {
-        "officialNumber": 22321452,
-        "stuName": "秦羽墨",
-        "state": "已提交",
-        "score": 64,
-        "studentId": 10
-    },
-    {
-        "officialNumber": 223214522,
-        "stuName": "吕小布",
-        "state": "已提交",
-        "score": 58,
-        "studentId": 11
-    }
-    ]
-    Studentsdata.value = newData
-    StudentsDataLoading.value = true
-},1000)
-}
-const getHomeworks = () => {
-    console.log(courseId,classId);
-    const t = ["第一次作业","第二次作业","第三次作业","期中作业","第五次作业","第六次作业","期末考试"] 
-    t.forEach(item => Homeworksdata.value.push(item))
-    HomeworkDataLoading.value = true
+    console.log('+++++++++++++++++++++++');
+    console.log(classId,ShowTheHomeworkId.value);
+    apis.getClassStatesOfCourse(classId,ShowTheHomeworkId.value)
+        .then((res:any)=>{
+            console.log(res.data.data);
+            Studentsdata.value = res.data.data
+            StudentsDataLoading.value = true
+        })
+        .catch((err:any)=>{
+            console.log('-------------------------');
+            console.log(err);
+        })
 }
 const changeHomework = () => {
     console.log(ShowTheHomework.value)
@@ -403,8 +339,8 @@ const showData = computed(() => {
         showdata.push(    {
         "officialNumber": 0,
         "stuName": "",
-        "stateCode": -1,
-        "stateDesc": "",
+        "status": "",
+        "score": 0,
         "studentId": -1
         })
     }
@@ -418,9 +354,11 @@ const DataLoading = computed(() => {
 watch(TheHomework, () => {
     nextTick(() => {
         // console.log(ShowTheHomework.value,TheHomework.value);
-        if(TheHomework.value != "无"){
-            ShowTheHomework.value = TheHomework.value
-            TheHomework.value = "无"
+        if(TheHomework.value != -1){
+            let t = Homeworksdata.value.find(item=>item.assignmentId==TheHomework.value)
+            ShowTheHomework.value = t.assignmentName
+            ShowTheHomeworkId.value = t.assignmentId
+            TheHomework.value = -1
         }
         // console.log(ShowTheHomework.value,TheHomework.value);
     });
@@ -436,30 +374,30 @@ watch(TheSort, () => {
     });
 });
 watch(ShowTheSort,(newData) =>{
-    if(newData==="未批改优先"){
+    if(newData==="未提交优先"){
         Studentsdata.value = Studentsdata.value.sort((a,b)=>{
-            return a.state === "未批改" ? -1 : b.state === "未批改" ? 1 : 0;
+            return a.status === "NOT_SUBMITTED" ? -1 : b.status === "NOT_SUBMITTED" ? 1 : 0;
         })
         console.log("未批改已排序");
         console.log(Studentsdata.value);
         
     }
-    else if(newData==="未提交优先"){
+    else if(newData==="未批改优先"){
         Studentsdata.value = Studentsdata.value.sort((a,b)=>{
-            return a.state === "未提交" ? -1 : b.state === "未提交" ? 1 : 0;
+            return a.status === "SUBMITTED" ? -1 : b.status === "SUBMITTED" ? 1 : 0;
         })
     }
     else if(newData==="成绩从低到高"){
         Studentsdata.value = Studentsdata.value.sort((a,b)=>{
-            if (a.state === "已提交" && b.state !== "已提交") return -1;
-            if (a.state !== "已提交" && b.state === "已提交") return 1;
+            if (a.status === "CORRECTED" && b.status !== "CORRECTED") return -1;
+            if (a.status !== "CORRECTED" && b.status === "CORRECTED") return 1;
             return a.score - b.score;
         })
     }
     else if(newData==="成绩从高到低"){
         Studentsdata.value = Studentsdata.value.sort((a,b)=>{
-            if (a.state === "已提交" && b.state !== "已提交") return -1;
-            if (a.state !== "已提交" && b.state === "已提交") return 1;
+            if (a.status === "CORRECTED" && b.status !== "CORRECTED") return -1;
+            if (a.status !== "CORRECTED" && b.status === "CORRECTED") return 1;
             return b.score - a.score;
         })
     }
@@ -472,13 +410,14 @@ watch(isTable, (newVal) => {
         })
     }
 })
-onMounted(() => {
-    console.log(store.user.role)
-    // console.log('chartRef dom:', chartRef.value)
-    getStudents()
-    getHomeworks()
-    // setChart()
-})
+onMounted(async () => {
+    await getHomeworks(); 
+    if (ShowTheHomeworkId.value) {
+        await getStudents();
+    } else {
+        console.warn('未获取到作业 ID，无法加载学生数据');
+    }
+});
 </script>
 
 <style scoped>
@@ -555,32 +494,6 @@ onMounted(() => {
             border-radius: 0 5px 5px 0;
         }
     }
-    .toggle{
-        margin-left: 20px;
-        .left{
-            border: 3px solid #4A90C4;
-            border-radius: 20px 0 0 20px;
-            border-right: 0;
-            padding: 2px 7px;
-            font-weight: 700;
-            cursor: pointer;
-        }
-        .right{
-            border: 3px solid #4A90C4;
-            border-radius: 0 20px 20px 0;
-            padding: 2px 7px;
-            font-weight: 700;
-            cursor: pointer;
-        }
-        .unactive{
-            color: #70BBDB;
-            background-color: #fff;
-        }
-        .active{
-            color: #fff;
-            background-color:#4A90C4;
-        }
-    }
 }
 .content{
     width: 100%;

src/views/ClassPage/ClassStudent.vue

@@ -10,7 +10,18 @@
                 </div>
             </div>
 
-            <button @click="visible_add=true"> 添加学生 </button>
+            <!-- <button @click="visible_add=true"> 添加学生 </button> -->
+
+            <classToggle v-model:isLeft="isSingleDelete">
+                <template #left>
+                    单个删除
+                </template>
+                <template #right>
+                    批量删除
+                </template>
+            </classToggle>
+
+            <button v-show="!isSingleDelete" class="Del" @click="DeleteStudents()">确认删除</button>
         </div>
         <div class="content">
             <div class="Loading" v-show="!DataLoading">Loading...</div>
@@ -20,8 +31,15 @@
                         <th>序号</th>
                         <th>学生姓名</th>
                         <th>学号</th>
-                        <th>是否加入班级</th>
-                        <th></th>
+                        <!-- <th>是否加入班级</th> -->
+                        <th>
+                                <span v-show="!isSingleDelete" style="margin-right: 5px;">全选</span>
+                                <input 
+                                    type="checkbox"
+                                    v-show="!isSingleDelete"
+                                    v-model="allDeleted"
+                                >
+                        </th>
                     </tr>
                 </template>
                 <template #body>
@@ -30,16 +48,25 @@
                             <td>{{ (currentPage-1)*5+index+1 }}</td>
                             <td  
                                 @click="$router.push(`/home/studentDetail?classId=${classId}&courseId=${courseId}&stuId=${item.studentId}`)"
-                                @mouseenter="hoverStuId=item.studentId"
+                                @mouseenter="hoverStuId=item.officialNumber" 
                                 @mouseleave="hoverStuId=-1"
-                                :class="{Gethover:hoverStuId===item.studentId,Blue:true}"
+                                :class="{Gethover:hoverStuId===item.officialNumber,Blue:true}"
                                 >{{ item.stuName }}</td>
                             <td>{{ item.officialNumber }}</td>
-                            <td>
+                            <!-- <td>
                                 <div class="added" v-if="item.stateCode===1">已加入 </div>
                                 <div class="notadd" v-else> 未加入</div>                        
+                            </td> -->
+                            <td>
+                                <button v-show="isSingleDelete" class="Del" @click="handleDelete(item.officialNumber)">DEL</button>
+                                <input 
+                                    type="checkbox"
+                                    v-show="!isSingleDelete" 
+                                    :value="item.officialNumber" 
+                                    v-model="deleteIds"
+                                    @change="console.log(deleteIds)"
+                                >
                             </td>
-                            <td><button class="Del" @click="handleDelete(item.officialNumber)">DEL</button></td>
                         </template>
                         <template v-else>
                             <td>&nbsp;</td>
@@ -97,14 +124,15 @@
 
 <script setup lang="ts">
 import classTable from './components/classTable.vue';
+import classToggle from './components/classToggle.vue'
 import {onMounted, reactive, ref, computed} from 'vue';
 import { useRoute } from 'vue-router';
 import type {ClassStudentVO} from "@/types/vo";
 import useApis from "@/apis";
-import { log } from 'node:console';
-import { color } from 'echarts';
+import { get } from 'http';
 
 const route = useRoute()
+const apis = useApis()
 const classId = +route.query.classId;
 const courseId = +route.query.courseId;
 
@@ -117,8 +145,10 @@ const isloading_add = ref(false)
 const addStudentName = ref("")
 const addOfficalNumber = ref("")
 const deleteId = ref(-1)
+const deleteIds = ref<number[]>([])
 const deleteName = ref("")
 const hoverStuId = ref(-1)
+const isSingleDelete = ref(true)
 
 const StudentsDataLoading = ref(false)
 
@@ -131,114 +161,56 @@ const handleDelete = (sid) => {
         return item.officialNumber === sid
     }).stuName
 }
-const DeleteStudent = () =>{
+const DeleteStudent = async () =>{
+    isloading.value = true
+    await apis.deleteStudentOfClass(classId,[deleteId.value])
+        .then((res:any)=>{console.log(res);
+        })
+    visible_del.value=false
+    isloading.value = false
+    getStudents()
+}
+const DeleteStudents = async () => {
     isloading.value = true
-    console.log(deleteId.value);
-    // 删除学生
-    setTimeout(()=>{
-        visible_del.value=false
-        isloading.value = false
-    }, 1000)
+    visible_del.value = true
+    await apis.deleteStudentOfClass(classId,deleteIds.value)
+        .then((res:any)=>{console.log(res);
+        })
+    deleteIds.value=[]
+    visible_del.value=false
+    isloading.value = false
+    getStudents()
 }
-const AddStudent = () => {
+const AddStudent = async () => {
     isloading_add.value = true
     console.log(addStudentName.value)
     console.log(+addOfficalNumber.value)
     console.log(classId);
-    setTimeout(()=>{
-        isloading_add.value = false
-        visible_add.value=false
-        addStudentName.value = ""
-        addOfficalNumber.value = "" 
-    }, 1000)
+    await apis.addStudentOfClasss(classId,+addOfficalNumber.value)
+    isloading_add.value = false
+    visible_add.value=false
+    addStudentName.value = ""
+    addOfficalNumber.value = "" 
+    console.log("添加成功");
+    getStudents()
+    // setTimeout(()=>{
+    //     isloading_add.value = false
+    //     visible_add.value=false
+    //     addStudentName.value = ""
+    //     addOfficalNumber.value = "" 
+    // }, 1000)
 }
 
 const getStudents = () => {
-    setTimeout(()=>{
-    console.log(classId);
+    apis.getStudentsOfClass(classId)
+        .then((res:any) => {
+            Studentsdata.length=0
+            console.log(res.data.data);
+            res.data.data.forEach(item => Studentsdata.push(item))
+            console.log(res.data);
+            StudentsDataLoading.value = true
+        })
     
-    const newData = [
-    {
-        "officialNumber": 522025320092,
-        "stuName": "关谷神奇",
-        "stateCode": 0,
-        "stateDesc": "未加入班级",
-        "studentId": 1
-    },
-    {
-        "officialNumber": 522025312092,
-        "stuName": "唐悠悠",
-        "stateCode": 1,
-        "stateDesc": "加入班级",
-        "studentId": 2
-    },
-    {
-        "officialNumber": 1231232,
-        "stuName": "曾小贤",
-        "stateCode": 1,
-        "stateDesc": "加入班级",
-        "studentId": 3
-    },
-    {
-        "officialNumber": 123123123123,
-        "stuName": "陈美嘉",
-        "stateCode": 0,
-        "stateDesc": "未加入班级",
-        "studentId": 4
-    },
-    {
-        "officialNumber": 123132435132,
-        "stuName": "胡一菲",
-        "stateCode": 1,
-        "stateDesc": "加入班级",
-        "studentId": 5
-    },
-    {
-        "officialNumber": 123442,
-        "stuName": "张伟",
-        "stateCode": 1,
-        "stateDesc": "1加入班级",
-        "studentId": 6
-    },
-    {
-        "officialNumber": 1231231662,
-        "stuName": "吕子乔",
-        "stateCode": 0,
-        "stateDesc": "未加入班级",
-        "studentId": 7
-    },
-    {
-        "officialNumber": 12399312312,
-        "stuName": "展播",
-        "stateCode": 1,
-        "stateDesc": "加入班级",
-        "studentId": 8
-    },
-    {
-        "officialNumber": 123993112,
-        "stuName": "婉瑜",
-        "stateCode": 1,
-        "stateDesc": "加入班级",
-        "studentId": 9
-    },
-    {
-        "officialNumber": 22321452,
-        "stuName": "秦羽墨",
-        "stateCode": 1,
-        "stateDesc": "加入班级",
-        "studentId": 10
-    },
-    {
-        "officialNumber": 223214522,
-        "stuName": "吕小布",
-        "stateCode": 0,
-        "stateDesc": "未加入班级",
-        "studentId": 11
-    }
-    ]
-    newData.forEach(item => Studentsdata.push(item))
-    StudentsDataLoading.value = true
-    },1000)
 }
 
 const searchData = computed(()=>{
@@ -273,6 +245,23 @@ const DataLoading = computed(() => {
   return StudentsDataLoading.value
 })
 
+const allDeleted = computed({
+    get() {
+        return deleteIds.value.length === Studentsdata.length
+    },
+    set(newValue) {
+        if(newValue === true){
+            deleteIds.value = <number[]>[]
+            Studentsdata.forEach((item)=>{
+                deleteIds.value.push(+item.officialNumber)
+            })
+        }
+        else{
+            deleteIds.value = <number[]>[]
+        }
+    }
+})
+
 onMounted(() => {
     getStudents()
 })
@@ -376,7 +365,19 @@ onMounted(() => {
     border-radius: 20px;
     font-weight: 600;
 }
-
+input[type="checkbox"]{
+    margin-bottom: -2px;
+    appearance: none; /* 隐藏默认样式 */
+    -webkit-appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 2px solid #4a90c4; /* 边框 */
+    border-radius: 4px;    
+}
+input[type="checkbox"]:checked {
+  background-color: #4a90c4; /* 绿色 */
+  border-color: #4a90c4;
+}
 .modal-mask {
     position: fixed;
     top: 0;

src/views/ClassPage/CourseClass.vue

@@ -20,6 +20,11 @@
                     <span>:</span>
                     <span>{{ item.classTime }}</span>
                 </div>
+                <div class="svg-text">
+                    <img src="@/assets/plus-square.svg" width="24px" height="24px"></img> 
+                    <span>:</span>
+                    <span>{{item.classCode}}</span>
+                </div>
                 <div class="del">
                     <button :disabled="item.stuNumber!==0"
                             @click.stop="handleDelete(item.classId)"
@@ -139,26 +144,28 @@ const handleDelete = (cid) => {
         return item.classId === cid
     }).className
 }
-const DeleteClass = () =>{
+const DeleteClass = async () =>{
     isloading.value = true
     console.log(deleteId.value);
-    // 删除班级
-    setTimeout(()=>{
-        visible_del.value=false
-        isloading.value = false
-    }, 1000)
+    await apis.deleteClass(deleteId.value)
+    visible_del.value=false
+    isloading.value = false
+    getClass()
 }
-const AddClass = () =>{
-    isloading_add.value = true
-    console.log(addClassName.value)
-    console.log(addClassDay.value +" "+ addClassClock.value)
-    setTimeout(()=>{
+const AddClass = async () =>{
+    if(addClassName.value!==""&&addClassDay.value!=""&&addClassClock.value!=""){
+        isloading_add.value = true
+        await apis.createClassOfCourse(courseId,addClassName.value,addClassDay.value+" "+addClassClock.value,Coursedata.teacherIds[0])
         isloading_add.value = false
         visible_add.value=false
         addClassName.value = ""
         addClassDay.value = ""
-        addClassClock.value = ""     
-    }, 1000)
+        addClassClock.value = ""    
+        getClass()
+    }
+    else{
+        alert("名称或时间为空，添加失败")
+    }
 }
 const identify = () => {
     if(store.user.role === "STUDENT"){
@@ -166,43 +173,17 @@ const identify = () => {
     }
 }
 const getClass = () => {
-    console.log(courseId);
-    const newData = [
-    {       
-        "classId": 7,
-        "className": "读写1班",
-        "courseId": 10,
-        "stuNumber": 30,
-        "classTime": "Mon 10:10",
-        "teacherId": 4
-    },
-    {
-        "classId": 8,
-        "className": "读写二班",
-        "courseId": 10,
-        "stuNumber": 0,
-        "classTime": "Fri 08:00",
-        "teacherId": 4
-    },
-    {
-        "classId": 9,
-        "className": "读写3班",
-        "courseId": 10,
-        "stuNumber": 33,
-        "classTime": "周一上午十点",
-        "teacherId": 4        
-    },
-    {
-        "classId": 10,
-        "className": "读写4班",
-        "courseId": 10,
-        "stuNumber": 0,
-        "classTime": "Mon 08:00",
-        "teacherId": 4        
-    }
-    ]
-    newData.forEach(item => data.push(item))
-    ClassDataLoading.value = true
+    // console.log(courseId);
+    data.length=0
+    apis.getClassOfCourse(courseId)
+        .then((res: any)=>{
+            console.log("getclass:",res.data.data)
+            res.data.data.forEach(item => data.push(item))
+            ClassDataLoading.value = true
+        })
+        .catch((err:any) => {
+            console.error(err)
+        })
 }
 const getCourse = () => {
   // 获取课程信息
@@ -281,10 +262,11 @@ export default {
         .svg-text{
             display: flex;
             align-items: center;
-            font-size: 22px;
+            font-size: 16px;
             color:#4a90c4;
             font-weight: 600;
-            margin:20px 15px;
+            margin:20px 10px;
+            margin-left: 15px;
             span {
                 margin-left: 10px;
             }
@@ -297,8 +279,8 @@ export default {
                 background-color: #c45c4a;
                 color: #fff;
                 border: 0;
-                padding: 3px 10px;
-                font-size: 22px;
+                padding: 3px 20px;
+                font-size: 18px;
                 font-weight: 600;
                 border-radius: 20px;
                 margin-right: 20px;

src/views/ClassPage/StudentDetail.vue

@@ -34,16 +34,16 @@
                             </tr>
                         </template>
                         <template #body>
-                            <tr v-for="(item,index) in showData.slice(0,5)" :key="index+item.homeworkName">
-                                <template v-if="item.state!==''">
+                            <tr v-for="(item,index) in showData.slice(0,5)" :key="index+item.assignmentName">
+                                <template v-if="item.status!==''">
                                     <td>{{ (currentPage-1)*10+index+1 }}</td>
-                                    <td>{{ item.homeworkName }}</td>
-                                    <td>
+                                    <td>{{ item.assignmentName }}</td>
+                                    <td @click="$router.push(`/home/assignment/${item.assignmentId}/correct?studentId=${studentId}`)">
                                         <div class="highScore" v-if="item.score>=80"> {{ item.score }}</div>
                                         <div class="midScore" v-else-if="item.score>=60"> {{ item.score }}</div>
                                         <div class="lowScore" v-else-if="item.score>0"> {{ item.score }}</div>
-                                        <div class="uncorrected" v-else-if="item.state==='未批改'"> 未批改</div>
-                                        <div class="unsubmitted" v-else-if="item.state==='未提交'"> 未提交</div>      
+                                        <div class="uncorrected" v-else-if="item.status==='SUBMITTED'"> 未批改</div>
+                                        <div class="unsubmitted" v-else-if="item.status==='NOT_SUBMITTED'"> 未提交</div>      
                                     </td>
                                 </template>
                                 <template v-else>
@@ -65,16 +65,16 @@
                             </tr>
                         </template>
                         <template #body>
-                            <tr v-for="(item,index) in showData.slice(5,10)" :key="index+item.homeworkName">
-                                <template v-if="item.state!==''">
+                            <tr v-for="(item,index) in showData.slice(5,10)" :key="index+item.assignmentName">
+                                <template v-if="item.status!==''">
                                     <td>{{ (currentPage-1)*10+index+6 }}</td>
-                                    <td>{{ item.homeworkName }}</td>
-                                    <td>
+                                    <td>{{ item.assignmentName }}</td>
+                                    <td @click="$router.push(`/home/assignment/${item.assignmentId}/correct?studentId=${studentId}`)">
                                         <div class="highScore" v-if="item.score>=80"> {{ item.score }}</div>
                                         <div class="midScore" v-else-if="item.score>=60"> {{ item.score }}</div>
                                         <div class="lowScore" v-else-if="item.score>0"> {{ item.score }}</div>
-                                        <div class="uncorrected" v-else-if="item.state==='未批改'"> 未批改</div>
-                                        <div class="unsubmitted" v-else-if="item.state==='未提交'"> 未提交</div>      
+                                        <div class="uncorrected" v-else-if="item.status==='SUBMITTED'"> 未批改</div>
+                                        <div class="unsubmitted" v-else-if="item.status==='NOT_SUBMITTED'"> 未提交</div>      
                                     </td>
                                 </template>
                                 <template v-else>
@@ -98,6 +98,7 @@
             </div>
         </div>
     </div>
+    <div class="loading" v-show="!DataLoading"> Loading...</div>
 </template>
 
 <script setup lang="ts">
@@ -139,7 +140,7 @@ const Coursedata = reactive<CourseDetailVO>({
   description: '',
 })
 
-const Classdata = reactive<ClassVO>({
+const Classdata = ref<ClassVO>({
   classId: null,
   className: '',
   courseId: null,
@@ -148,68 +149,87 @@ const Classdata = reactive<ClassVO>({
   teacherId: null,
 })
 const sortMethods = ["默认","成绩从低到高","成绩从高到低","未批改优先","未提交优先"]
-const Studentdata = ref({
-    "officialNumber": 522025312092,
-    "stuName": "张伟",
-    "studentId": studentId,
-    "homeworkData": [
-        {
-            "homeworkName":"第一次作业",
-            "state": "已提交",
-            "score": 88
-        },
-        {
-            "homeworkName":"第二次作业",
-            "state": "已提交",
-            "score": 91
-        },
-        {
-            "homeworkName":"第三次作业",
-            "state": "已提交",
-            "score": 94
-        },
-        {
-            "homeworkName":"期中作业",
-            "state": "已提交",
-            "score": 59
-        },
-        {
-            "homeworkName":"第五次作业",
-            "state": "已提交",
-            "score": 79
-        },
-        {
-            "homeworkName":"第六次作业",
-            "state": "未提交",
-            "score": 0
-        },
-        {
-            "homeworkName":"期末考试",
-            "state": "未批改",
-            "score": 0
-        }
-    ]
-})
+// const Studentdata = ref({
+//     "officialNumber": 522025312092,
+//     "stuName": "张伟",
+//     "studentId": studentId,
+//     "assignments": [
+//         {
+//             "assignmentId": 73,
+//             "assignmentName":"第一次作业",
+//             "status": "CORRECTED",
+//             "score": 88
+//         },
+//         {
+//             "assignmentId": 73,
+//             "assignmentName":"第二次作业",
+//             "status": "CORRECTED",
+//             "score": 91
+//         },
+//         {
+//             "assignmentId": 73,
+//             "assignmentName":"第三次作业",
+//             "status": "CORRECTED",
+//             "score": 94
+//         },
+//         {
+//             "assignmentId": 73,
+//             "assignmentName":"期中作业",
+//             "status": "CORRECTED",
+//             "score": 59
+//         },
+//         {
+//             "assignmentId": 73,
+//             "assignmentName":"第五次作业",
+//             "status": "CORRECTED",
+//             "score": 79
+//         },
+//         {
+//             "assignmentId": 73,
+//             "assignmentName":"第六次作业",
+//             "status": "NOT_SUBMITTED",
+//             "score": 0
+//         },
+//         {
+//             "assignmentId": 73,
+//             "assignmentName":"期末考试",
+//             "status": "SUBMITTED",
+//             "score": 0
+//         }
+//     ]
+// })
 
 // const identify = () => {
 //     if(store.user.role === "STUDENT"){
 //         router.push('/404')
 //     }
 // }
+const Studentdata = ref({
+    "officialNumber": 0,
+    "stuName": "",
+    "studentId": 0,
+    "assignments":[]
+})
 const getStudent = () => {
     StudentdataLoading.value = false
     console.log(courseId)
     console.log(studentId)
-    StudentdataLoading.value = true
+    apis.getHomeworkOfStudent(courseId,studentId)
+        .then((res:any)=>{
+            Studentdata.value = res.data.data
+            console.log(res.data.data);
+            StudentdataLoading.value = true
+        })
 }
 const getClass = () => {
     console.log("classId:",classId)
-    Classdata.classId = classId
-    Classdata.courseId = courseId
-    Classdata.className = "读写1班"
-    Classdata.stuNumber = 30
-    Classdata.classTime = "Mon 10:10"
-    Classdata.teacherId = 4
+    apis.getClassByClassId(classId)
+        .then((res:any)=>{
+            console.log(res.data.data);
+            Classdata.value = res.data.data
+            console.log("Classdata",Classdata.value);
+            
+        })
 
     ClassDataLoading.value = true
 }
@@ -238,12 +258,12 @@ const DataLoading = computed(() => {
 })
 const searchData = computed(()=>{
     if(searchInput.value===""){
-        return Studentdata.value.homeworkData
+        return Studentdata.value.assignments
     }
     else{
-        return Studentdata.value.homeworkData.filter(student => {
+        return Studentdata.value.assignments.filter(student => {
           return (
-            student.homeworkName.includes(searchInput.value)
+            student.assignmentName.includes(searchInput.value)
           )
         })
     }
@@ -252,8 +272,9 @@ const showData = computed(() => {
     const showdata = searchData.value.slice((currentPage.value-1)*10,currentPage.value*10)
     while(showdata.length<10){
         showdata.push(    {
-        "homeworkName": "",
-        "state": "",
+        "assignmentId": -1,
+        "assignmentName": "",
+        "status": "",
         "score": 0
         })
     }
@@ -271,26 +292,26 @@ watch(TheSort, () => {
 });
 watch(ShowTheSort,(newData) =>{
     if(newData==="未批改优先"){
-        Studentdata.value.homeworkData = Studentdata.value.homeworkData.sort((a,b)=>{
-            return a.state === "未批改" ? -1 : b.state === "未批改" ? 1 : 0;
+        Studentdata.value.assignments = Studentdata.value.assignments.sort((a,b)=>{
+            return a.status === "SUBMITTED" ? -1 : b.status === "SUBMITTED" ? 1 : 0;
         })
     }
     else if(newData==="未提交优先"){
-        Studentdata.value.homeworkData = Studentdata.value.homeworkData.sort((a,b)=>{
-            return a.state === "未提交" ? -1 : b.state === "未提交" ? 1 : 0;
+        Studentdata.value.assignments = Studentdata.value.assignments.sort((a,b)=>{
+            return a.status === "NOT_SUBMITTED" ? -1 : b.status === "NOT_SUBMITTED" ? 1 : 0;
         })
     }
     else if(newData==="成绩从低到高"){
-        Studentdata.value.homeworkData = Studentdata.value.homeworkData.sort((a,b)=>{
-            if (a.state === "已提交" && b.state !== "已提交") return -1;
-            if (a.state !== "已提交" && b.state === "已提交") return 1;
+        Studentdata.value.assignments = Studentdata.value.assignments.sort((a,b)=>{
+            if (a.status === "CORRECTED" && b.status !== "CORRECTED") return -1;
+            if (a.status !== "CORRECTED" && b.status === "CORRECTED") return 1;
             return a.score - b.score;
         })
     }
     else if(newData==="成绩从高到低"){
-        Studentdata.value.homeworkData = Studentdata.value.homeworkData.sort((a,b)=>{
-            if (a.state === "已提交" && b.state !== "已提交") return -1;
-            if (a.state !== "已提交" && b.state === "已提交") return 1;
+        Studentdata.value.assignments = Studentdata.value.assignments.sort((a,b)=>{
+            if (a.status === "CORRECTED" && b.status !== "CORRECTED") return -1;
+            if (a.status !== "CORRECTED" && b.status === "CORRECTED") return 1;
             return b.score - a.score;
         })
     }
@@ -498,4 +519,13 @@ export default {
         }
     }
 }
+.loading{
+    height: 100%;
+    width: 100%;
+    text-align: center;
+    line-height: 100vh;
+    font-size: 44px;
+    font-weight: 700;
+    color: #70bbdb;
+}
 </style>

src/views/ClassPage/components/classToggle.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="toggle">
+        <button class="left"
+                :class="{'active':isLeft,'unactive':!isLeft}"
+                @click="toggle(true)"
+        ><slot name="left"></slot></button>
+        <button class="right"
+                :class="{'active':!isLeft,'unactive':isLeft}"
+                @click="toggle(false)"
+        ><slot name="right"></slot></button>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  isLeft: {
+    type: Boolean,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:isLeft'])
+
+const toggle = (value) => {
+    emit('update:isLeft', value)
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: "classToggle"
+}
+</script>
+
+<style>
+.toggle{
+    margin-left: 20px;
+    .left{
+        border: 3px solid #4A90C4;
+        border-radius: 20px 0 0 20px;
+        border-right: 0;
+        padding: 2px 7px;
+        font-weight: 700;
+        cursor: pointer;
+    }
+    .right{
+        border: 3px solid #4A90C4;
+        border-radius: 0 20px 20px 0;
+        padding: 2px 7px;
+        font-weight: 700;
+        cursor: pointer;
+    }
+    .unactive{
+        color: #70BBDB;
+        background-color: #fff;
+    }
+    .active{
+        color: #fff;
+        background-color:#4A90C4;
+    }
+}
+</style>

src/views/CourseSquare/component/CourseDetails/index.vue

@@ -158,7 +158,7 @@ let showEdit = ref(false)
 let visible = ref(false)
 let uploadRef = ref()
 
-classId = 2
+// classId = 2
 
 // 用于展示课程信息
 let dataForm = reactive<CourseDetailVO>({
@@ -330,7 +330,14 @@ const handleChange = (file,fileList) => {
 const processCourses = () => {
   dataForm.courseImages[0] = dataForm.courseImages[0].split("?")[0]
 }
-
+const getClassId = () => {
+  
+  apis.getClassNameOfStudent(courseId,store.user.id)
+    .then((res:any)=>{
+      console.log('NEWRES',res);
+      classId = res.data.data.classId
+    })
+}
 const getCourse = () => {
   // 获取课程信息
   apis.getCourseByCourseId(courseId)
@@ -581,6 +588,7 @@ onMounted(() => {
   ShowStudentClass()
   getCourse()
   getHomeworkList()
+  getClassId()
 
   if(role == 'student') isShowCode()
   if(role == 'teachers') isShowEdit()