优化作业参加代码

src/hooks/useFormatDate.ts

@@ -0,0 +1,17 @@
+export function useFormatDate(){
+
+    const formatDate = (date:string) => {
+        const d = new Date(date);
+        const year = d.getFullYear();
+        const month = String(d.getMonth() + 1).padStart(2, '0');
+        const day = String(d.getDate()).padStart(2, '0');
+        const hours = String(d.getHours()).padStart(2, '0');
+        const minutes = String(d.getMinutes()).padStart(2, '0');
+        const seconds = String(d.getSeconds()).padStart(2, '0');
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    };
+
+    return {
+        formatDate,
+    };
+}

src/views/CourseSquare/component/AllCourse/MoreCourse.scss

@@ -0,0 +1,71 @@
+.course-content {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  margin: 40px auto 0 auto;
+
+  .course-content-container {
+    overflow: hidden;
+    margin: 0 auto;
+    height: 100%;
+    width: 1100px;
+    background-color: #ffffff;
+    border: solid 1px #d0d0d0;
+    border-radius: 7px;
+
+    .course-content-title {
+      width: 200px;
+      margin: 10px 0 0 30px ;
+      font-size: 20px;
+    }
+
+    .course-items-container {
+      display: flex;
+      justify-content: center;
+      gap: 10px;
+      //background-color: red;
+      margin: 20px 0;
+      //height: 100%;
+      //width: 1100px;
+
+    }
+
+    .el-card__body {
+      padding: 0;
+    }
+
+    .course-item {
+      flex: 1;
+      max-width: 200px;
+      box-sizing: border-box;
+      //padding: 10px;
+      height: 270px;
+      line-height: 30px;
+      //margin-bottom: 10px;
+
+      .course-item-img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .course-item-content {
+        font-size: 14px;
+        padding: 0 10px;
+      }
+
+      &.active {
+        cursor: pointer;
+      }
+    }
+
+    .course-item-hidden {
+      flex: 1;
+      max-width: 200px;
+      height: 270px;
+      box-sizing: border-box;
+      line-height: 30px;
+      opacity: 0;
+    }
+  }
+}

src/views/CourseSquare/component/AllCourse/MoreCourse.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="course-content">
+    <div class="course-content-container">
+      <div class="course-content-title">
+        {{ props.title }}
+      </div>
+      <div class="course-items-container">
+        <el-card v-for="item in getCoursesSlice(0, 5)" :key="item.courseId" class="course-item active" @click="handleClick(item.courseId)">
+          <div style="width: 200px; height: 120px">
+            <img :src="item.courseImages[0]" :alt="item.courseName" class="course-item-img">
+          </div>
+          <div class="course-item-content">
+            <div style="font-weight: bold">{{item.courseName}}</div>
+            <div>{{item.description}}</div>
+            <div>{{item.teacherIds.join("\n")}}</div>
+          </div>
+        </el-card>
+
+        <template v-if="getCoursesSlice(0, 5).length < 5">
+          <el-card v-for="item in 5 - getCoursesSlice(0, 5).length" :key="item" class="course-item-hidden">
+          </el-card>
+        </template>
+
+      </div>
+      <div class="course-items-container">
+        <el-card v-for="item in getCoursesSlice(5, 10)" :key="item.courseId" class="course-item active" @click="handleClick(item.courseId)">
+          <div style="width: 200px; height: 120px">
+            <img :src="item.courseImages[0]" :alt="item.courseName" class="course-item-img">
+          </div>
+          <div class="course-item-content">
+            <div style="font-weight: bold">{{item.courseName}}</div>
+            <div>{{item.description}}</div>
+            <div>{{item.teacherIds.join("\n")}}</div>
+          </div>
+        </el-card>
+
+        <template v-if="getCoursesSlice(5, 10).length < 5">
+          <el-card v-for="item in 5 - getCoursesSlice(5, 10).length" :key="item" class="course-item-hidden">
+          </el-card>
+        </template>
+      </div>
+
+      <el-pagination
+          small
+          style="font-size: 16px;margin-top: 10px;margin-left: 450px"
+          @current-change="handleCurrentChange"
+          :current-page="queryInfo.pageNow"
+          :page-size="queryInfo.pageSize"
+          layout="total, prev, pager, next, jumper"
+          :total="pageInfo.total">
+      </el-pagination>
+
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import './MoreCourse.scss'
+import {defineProps, onMounted, reactive} from "vue";
+import useApis from "@/apis";
+import type {CourseQuery} from "@/types/query";
+import router from "@/router";
+import {useStore} from "@/store";
+
+const apis = useApis()
+const store = useStore()
+const role:'teachers' | 'student' = store.user.role === 'STUDENT' ?   'student':'teachers';
+
+const props = defineProps<{
+  title: string;
+  type: 'all' | 'my'
+}>()
+
+const queryInfo = reactive({
+  pageNow: 1,
+  pageSize: 10,
+})
+
+let pageInfo = reactive({
+  total: 0,
+  courseData: []
+})
+
+// 处理课程卡片的点击事件
+const handleClick = (value:number) => {
+  router.push(`/home/courseDetail/${value}`)
+}
+
+const handleCurrentChange =(index:number)=>{
+  queryInfo.pageNow=index;
+  fetchData();
+}
+
+const fetchData = () => {
+  if(props.type === 'all'){
+    fetchAllCourse()
+  } else if(props.type === 'my'){
+    fetchCourseByUserId()
+  }else{
+    alert("获取课程失败")
+  }
+}
+
+const fetchAllCourse = () => {
+  const query = reactive<CourseQuery>({
+    courseId:null,
+    teacherId:null,
+    studentId:null,
+    courseName:null,
+    semester:null,
+  })
+  apis.getAllCourse(query, queryInfo.pageNow, queryInfo.pageSize)
+      .then((res: any) => {
+        console.log(res)
+        pageInfo.courseData = res.data.data.records
+        pageInfo.total = res.data.data.total
+      })
+      .catch((err: any) => {
+        console.error("错误信息",err);
+      })
+      .finally(() => {});
+}
+
+const fetchCourseByUserId = () => {
+  if(role === 'student'){
+    apis.getCourseByStudentId(store.user.id, queryInfo.pageNow, queryInfo.pageSize)
+        .then((res: any) => {
+          console.log(res)
+          pageInfo.courseData = res.data.data.records
+          pageInfo.total = res.data.data.total
+        })
+        .catch((err: any) => {
+          console.error(err);
+        })
+        .finally(() => {});
+  } else if(role === "teachers"){
+    apis.getCourseByTeacherId(store.user.id, queryInfo.pageNow, queryInfo.pageSize)
+        .then((res: any) => {
+          console.log(res.data.data)
+          pageInfo.courseData = res.data.data.records
+          pageInfo.total = res.data.data.total
+        })
+        .catch((err: any) => {
+          console.error(err);
+        })
+        .finally(() => {});
+  }
+}
+
+
+
+//只获取前五个课程
+const getCoursesSlice = (start:number, end:number) => {
+  return pageInfo.courseData.slice(start, end)
+}
+
+onMounted(()=>{
+  fetchData()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: "AllCourse"
+}
+</script>

src/views/HomeworkPage/component/HomeworkDetail.vue

@@ -75,8 +75,13 @@ let data = reactive<IAssignment>({
   status: ""
 })
 
-async function handleWriting(){
-  await apis.getEngagement(store.user.id, assignmentId)
+function handleWriting(){
+  getEngagement()
+  router.push(`/home/assignment/${assignmentId}/edit`)
+}
+
+async function getEngagement(){
+  apis.getEngagement(store.user.id, assignmentId)
       .then((_res:any) => {
         console.log(_res)
         //还未参加作业，则先加入作业
@@ -86,15 +91,13 @@ async function handleWriting(){
             message: '参加作业成功',
             type: 'success',
           })
-        } else {
-          router.push(`/home/assignment/${assignmentId}/edit`)
         }
       }).catch((_err:any) => {
         console.log(_err)
       })
-
 }
 
+
 const fetchData = () => {
   apis.getAssignmentById(assignmentId)
       .then((res: any) => {