完善了删除功能
This commit is contained in:
parent
6d9c25f3ce
commit
d92732dfe6
@ -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>
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user