From d92732dfe65a6147134c1c6da832d00a1c63ba09 Mon Sep 17 00:00:00 2001
From: "Chester.X" <2931709855@qq.com>
Date: Fri, 5 Jul 2024 01:52:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=BA=86=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/course-management/Course.vue     | 10 +++-
 src/views/course-management/CourseList.vue | 63 ++++++++++++++--------
 2 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/src/views/course-management/Course.vue b/src/views/course-management/Course.vue
index 9a95200..db85c49 100644
--- a/src/views/course-management/Course.vue
+++ b/src/views/course-management/Course.vue
@@ -223,6 +223,9 @@ onMounted(() => {
           <el-icon v-if="imageFileList.length === 0">
             <Plus/>
           </el-icon>
+          <el-icon v-else>
+            <Refresh/>
+          </el-icon>
         </el-upload>
         <div class="tip">
           请上传大小不超过 <span style="color: red;">5MB</span> 格式为 <span style="color: red;">png/jpg/jpeg</span> 的文件
@@ -231,7 +234,7 @@ onMounted(() => {
       <ElFormItem label="课程视频" required>
         <el-upload
             :action="videoUploadUrl"
-            :limit="1"
+            :limit="2"
             :before-upload="beforeVideoUpload"
             :on-success="handleVideoSuccess"
             :on-error="handleVideoError"
@@ -257,6 +260,9 @@ onMounted(() => {
           <el-icon v-if="videoFileList.length === 0">
             <Plus/>
           </el-icon>
+          <el-icon v-else>
+            <Refresh/>
+          </el-icon>
         </el-upload>
         <div class="tip">
           请上传大小不超过 <span style="color: red;">500MB</span> 格式为 <span style="color: red;">mp4</span> 的文件
@@ -273,7 +279,7 @@ onMounted(() => {
       </ElFormItem>
       <ElFormItem>
         <ElButton type="primary" native-type="submit">确定</ElButton>
-        <ElButton @click="router.push('/courses')">取消</ElButton>
+        <ElButton @click="router.push('/courseList')">取消</ElButton>
       </ElFormItem>
     </ElForm>
   </div>
diff --git a/src/views/course-management/CourseList.vue b/src/views/course-management/CourseList.vue
index eacabaf..af4728a 100644
--- a/src/views/course-management/CourseList.vue
+++ b/src/views/course-management/CourseList.vue
@@ -1,9 +1,9 @@
 <script setup>
-import {onMounted, ref} from 'vue';
-import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElPagination, ElTable, ElTableColumn} from 'element-plus';
+import { onMounted, ref } from 'vue';
+import { ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElPagination, ElTable, ElTableColumn } from 'element-plus';
 import axios from "axios";
-import {useStore} from "vuex";
-import {useRouter} from "vue-router";
+import { useStore } from "vuex";
+import { useRouter } from "vue-router";
 import Course from "@views/course-management/Course.vue";
 
 const router = useRouter();
@@ -24,15 +24,20 @@ const coursesCount = ref(0);
 const firstTimeLoad = ref(true);
 
 const selections = ref([]);
-const loadCourses = async () => {
-  if (firstTimeLoad.value || allCoursesData.value.length < (currentPage.value * pageSize) && (currentPage.value * pageSize) <= coursesCount) {
+const loadCourses = async (forceReload = false) => {
+  if (forceReload) {
+    firstTimeLoad.value = true;
+    allCoursesData.value = [];
+  }
+
+  if (firstTimeLoad.value || allCoursesData.value.length < (currentPage.value * pageSize.value) && (currentPage.value * pageSize.value) <= coursesCount) {
     let params = {
       token: token,
       start: allCoursesData.value.length,
       end: allCoursesData.value.length + pageSize.value * 2
     }
     try {
-      const response = await axios.get('/api/courses', {params})
+      const response = await axios.get('/api/courses', { params })
       const data = response.data
       coursesCount.value = data.courseCount;
       allCoursesData.value.push(...data.courseList);
@@ -61,12 +66,27 @@ const handleReset = () => {
 
 const handleEditButton = () => {
   selections.value.forEach(selection => {
-    router.push({name: 'Course', params: {id: selection.id}})
+    router.push({ name: 'Course', params: { id: selection.id } })
   })
 };
 
-const handleDeleteButton = () => {
-  // 删除逻辑
+const handleDeleteButton = async () => {
+  if (selections.value.length === 0) {
+    ElMessage.warning('请先选择要删除的课程');
+    return;
+  }
+  try {
+    const deletePromises = selections.value.map(selection =>
+        axios.delete(`/api/courses/${selection.id}`, { params: { token: token } })
+    );
+    await Promise.all(deletePromises);
+    ElMessage.success('删除成功');
+    selections.value = []; // 清空选中项
+    await loadCourses(true); // 强制重新加载课程数据
+  } catch (e) {
+    ElMessage.error('删除失败');
+    console.error(e);
+  }
 };
 
 const handleSelectionChange = (newSelections) => {
@@ -74,15 +94,16 @@ const handleSelectionChange = (newSelections) => {
 }
 
 const handleEditInTable = (index) => {
-  router.push({name: 'Course', query: {mode: 'edit', id: coursesData.value[index].id}})
+  router.push({ name: 'Course', query: { mode: 'edit', id: coursesData.value[index].id } });
 };
 
 const handleDeleteInTable = async (index) => {
   try {
-    await axios.delete(`/api/courses/${coursesData.value[index].id}`, {params: {token: token,}})
+    await axios.delete(`/api/courses/${coursesData.value[index].id}`, { params: { token: token } })
     coursesData.value.splice(index, 1);
     allCoursesData.value.splice(index, 1);
     coursesCount.value--;
+    await loadCourses(true); // 强制重新加载课程数据
   } catch (e) {
     ElMessage.error('删除失败')
     console.error(e)
@@ -95,16 +116,16 @@ const handleDeleteInTable = async (index) => {
     <div class="search-container">
       <el-form inline>
         <el-form-item label="课程名称">
-          <el-input v-model="searchTitle" placeholder="请输入课程名称"/>
+          <el-input v-model="searchTitle" placeholder="请输入课程名称" />
         </el-form-item>
         <el-form-item label="排序">
-          <el-input v-model="sortOrder" placeholder="请输入排序"/>
+          <el-input v-model="sortOrder" placeholder="请输入排序" />
         </el-form-item>
         <el-form-item label="作者">
-          <el-input v-model="searchAuthor" placeholder="请输入作者"/>
+          <el-input v-model="searchAuthor" placeholder="请输入作者" />
         </el-form-item>
         <el-form-item label="课程简介">
-          <el-input v-model="searchDescription" placeholder="请输入简介"/>
+          <el-input v-model="searchDescription" placeholder="请输入简介" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handleSearch">搜索</el-button>
@@ -116,15 +137,15 @@ const handleDeleteInTable = async (index) => {
     </div>
 
     <div class="button-container">
-      <el-button type="success" @click="router.push('/courses/edit?mode=create')">新增</el-button>
+      <el-button type="success" @click="router.push('/course?mode=create')">新增</el-button>
       <el-button type="warning" @click="handleEditButton">修改</el-button>
       <el-button type="danger" @click="handleDeleteButton">删除</el-button>
       <el-button type="info">导出</el-button>
     </div>
 
-    <el-table :data="coursesData" style="width: 100%;"
-              @selection-change="handleSelectionChange">
+    <el-table :data="coursesData" style="width: 100%;" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55"></el-table-column>
+      <el-table-column prop="orderNo" label="排序" align="center"></el-table-column>
       <el-table-column prop="title" label="课程名称" align="center"></el-table-column>
       <el-table-column prop="author" label="作者" align="center"></el-table-column>
       <el-table-column prop="description" label="课程简介" align="center"></el-table-column>
@@ -138,8 +159,8 @@ const handleDeleteInTable = async (index) => {
 
     <div class="pagination-container">
       <el-pagination
-          @size-change="pageSize = $event;loadCourses()"
-          @current-change="currentPage = $event;loadCourses()"
+          @size-change="pageSize = $event; loadCourses(true)"
+          @current-change="currentPage = $event; loadCourses(true)"
           :current-page="currentPage"
           :page-size="pageSize"
           layout="total, sizes, prev, pager, next, jumper"