web-学习管理、upload组件修改
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
*/
|
||||
|
||||
import { api } from '@/apis';
|
||||
import type { ResultDomain, Resource, ResourceSearchParams, PageParam, ResourceVO } from '@/types';
|
||||
import type { ResultDomain, Resource, ResourceSearchParams, PageParam, ResourceVO, UserCollection } from '@/types';
|
||||
|
||||
/**
|
||||
* 资源API服务
|
||||
@@ -137,12 +137,12 @@ export const resourceApi = {
|
||||
},
|
||||
|
||||
/**
|
||||
* 增加收藏次数
|
||||
* 收藏次数增减
|
||||
* @param resourceID 资源ID
|
||||
* @returns Promise<ResultDomain<Resource>>
|
||||
*/
|
||||
async incrementCollectCount(resourceID: string): Promise<ResultDomain<Resource>> {
|
||||
const response = await api.post<Resource>(`/news/resources/resource/${resourceID}/collect`);
|
||||
async resourceCollect(collect: UserCollection): Promise<ResultDomain<Resource>> {
|
||||
const response = await api.post<Resource>(`/news/resources/resource/collect`, collect);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
|
||||
@@ -5,19 +5,33 @@
|
||||
*/
|
||||
|
||||
import { api } from '@/apis/index';
|
||||
import type { Course, CourseChapter, ResultDomain } from '@/types';
|
||||
import type { Course, CourseChapter, ResultDomain,CourseVO,PageRequest, PageParam } from '@/types';
|
||||
|
||||
/**
|
||||
* 课程API服务
|
||||
*/
|
||||
export const courseApi = {
|
||||
prefixCourse: '/study/courses',
|
||||
/**
|
||||
* 获取课程列表
|
||||
* @param filter 过滤条件
|
||||
* @returns Promise<ResultDomain<Course>>
|
||||
*/
|
||||
async getCourseList(filter?: Partial<Course>): Promise<ResultDomain<Course>> {
|
||||
const response = await api.get<Course>('/study/course/list', filter);
|
||||
async getCourseList(filter?: Course): Promise<ResultDomain<Course>> {
|
||||
const response = await api.get<Course>(`${this.prefixCourse}/list`, filter);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取课程分页列表
|
||||
* @param PageRequest 分页请求
|
||||
* @returns Promise<ResultDomain<Course>>
|
||||
*/
|
||||
async getCoursePage(pageParam: PageParam, filter?: Course): Promise<ResultDomain<Course>> {
|
||||
const response = await api.post<Course>(`${this.prefixCourse}/page`, {
|
||||
pageParam,
|
||||
filter
|
||||
});
|
||||
return response.data;
|
||||
},
|
||||
|
||||
@@ -26,8 +40,8 @@ export const courseApi = {
|
||||
* @param courseID 课程ID
|
||||
* @returns Promise<ResultDomain<Course>>
|
||||
*/
|
||||
async getCourseById(courseID: string): Promise<ResultDomain<Course>> {
|
||||
const response = await api.get<Course>(`/study/course/${courseID}`);
|
||||
async getCourseById(courseID: string): Promise<ResultDomain<CourseVO>> {
|
||||
const response = await api.get<CourseVO>(`${this.prefixCourse}/${courseID}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
@@ -36,8 +50,8 @@ export const courseApi = {
|
||||
* @param course 课程数据
|
||||
* @returns Promise<ResultDomain<Course>>
|
||||
*/
|
||||
async createCourse(course: Course): Promise<ResultDomain<Course>> {
|
||||
const response = await api.post<Course>('/study/course/create', course);
|
||||
async createCourse(course: CourseVO): Promise<ResultDomain<CourseVO>> {
|
||||
const response = await api.post<CourseVO>(`${this.prefixCourse}/course`, course);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
@@ -47,7 +61,7 @@ export const courseApi = {
|
||||
* @returns Promise<ResultDomain<Course>>
|
||||
*/
|
||||
async updateCourse(course: Course): Promise<ResultDomain<Course>> {
|
||||
const response = await api.put<Course>('/study/course/update', course);
|
||||
const response = await api.put<Course>(`${this.prefixCourse}/course`, course);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
@@ -57,7 +71,7 @@ export const courseApi = {
|
||||
* @returns Promise<ResultDomain<boolean>>
|
||||
*/
|
||||
async deleteCourse(courseID: string): Promise<ResultDomain<boolean>> {
|
||||
const response = await api.delete<boolean>(`/study/course/${courseID}`);
|
||||
const response = await api.delete<boolean>(`${this.prefixCourse}/${courseID}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
@@ -68,7 +82,7 @@ export const courseApi = {
|
||||
* @returns Promise<ResultDomain<Course>>
|
||||
*/
|
||||
async updateCourseStatus(courseID: string, status: number): Promise<ResultDomain<Course>> {
|
||||
const response = await api.put<Course>(`/study/course/${courseID}/status`, null, {
|
||||
const response = await api.put<Course>(`${this.prefixCourse}/${courseID}/status`, null, {
|
||||
params: { status }
|
||||
});
|
||||
return response.data;
|
||||
@@ -80,7 +94,7 @@ export const courseApi = {
|
||||
* @returns Promise<ResultDomain<Course>>
|
||||
*/
|
||||
async incrementViewCount(courseID: string): Promise<ResultDomain<Course>> {
|
||||
const response = await api.post<Course>(`/study/course/${courseID}/view`);
|
||||
const response = await api.post<Course>(`${this.prefixCourse}/${courseID}/view`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
@@ -90,7 +104,7 @@ export const courseApi = {
|
||||
* @returns Promise<ResultDomain<Course>>
|
||||
*/
|
||||
async incrementLearnCount(courseID: string): Promise<ResultDomain<Course>> {
|
||||
const response = await api.post<Course>(`/study/course/${courseID}/learn`);
|
||||
const response = await api.post<Course>(`${this.prefixCourse}/${courseID}/learn`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
@@ -100,7 +114,7 @@ export const courseApi = {
|
||||
* @returns Promise<ResultDomain<CourseChapter>>
|
||||
*/
|
||||
async getCourseChapters(courseID: string): Promise<ResultDomain<CourseChapter>> {
|
||||
const response = await api.get<CourseChapter>(`/study/course/${courseID}/chapters`);
|
||||
const response = await api.get<CourseChapter>(`${this.prefixCourse}/${courseID}/chapters`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
@@ -110,7 +124,7 @@ export const courseApi = {
|
||||
* @returns Promise<ResultDomain<CourseChapter>>
|
||||
*/
|
||||
async getChapterById(chapterID: string): Promise<ResultDomain<CourseChapter>> {
|
||||
const response = await api.get<CourseChapter>(`/study/course/chapter/${chapterID}`);
|
||||
const response = await api.get<CourseChapter>(`${this.prefixCourse}/chapter/${chapterID}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
@@ -120,7 +134,7 @@ export const courseApi = {
|
||||
* @returns Promise<ResultDomain<CourseChapter>>
|
||||
*/
|
||||
async createChapter(chapter: CourseChapter): Promise<ResultDomain<CourseChapter>> {
|
||||
const response = await api.post<CourseChapter>('/study/course/chapter/create', chapter);
|
||||
const response = await api.post<CourseChapter>(`${this.prefixCourse}/chapter/create`, chapter);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
@@ -130,7 +144,7 @@ export const courseApi = {
|
||||
* @returns Promise<ResultDomain<CourseChapter>>
|
||||
*/
|
||||
async updateChapter(chapter: CourseChapter): Promise<ResultDomain<CourseChapter>> {
|
||||
const response = await api.put<CourseChapter>('/study/course/chapter/update', chapter);
|
||||
const response = await api.put<CourseChapter>(`${this.prefixCourse}/chapter/update`, chapter);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
@@ -140,7 +154,7 @@ export const courseApi = {
|
||||
* @returns Promise<ResultDomain<boolean>>
|
||||
*/
|
||||
async deleteChapter(chapterID: string): Promise<ResultDomain<boolean>> {
|
||||
const response = await api.delete<boolean>(`/study/course/chapter/${chapterID}`);
|
||||
const response = await api.delete<boolean>(`${this.prefixCourse}/chapter/${chapterID}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
@@ -151,7 +165,7 @@ export const courseApi = {
|
||||
* @returns Promise<ResultDomain<CourseChapter>>
|
||||
*/
|
||||
async updateChapterOrder(chapterID: string, orderNum: number): Promise<ResultDomain<CourseChapter>> {
|
||||
const response = await api.put<CourseChapter>(`/study/course/chapter/${chapterID}/order`, null, {
|
||||
const response = await api.put<CourseChapter>(`${this.prefixCourse}/chapter/${chapterID}/order`, null, {
|
||||
params: { orderNum }
|
||||
});
|
||||
return response.data;
|
||||
|
||||
@@ -1,5 +1,57 @@
|
||||
<template>
|
||||
<div v-if="!asDialog" class="upload-container">
|
||||
<!-- Cover 模式 - 封面图片上传 -->
|
||||
<div v-if="!asDialog && listType === 'cover'" class="upload-cover-container">
|
||||
<!-- 已上传的封面 -->
|
||||
<div v-if="props.coverUrl" class="cover-image-wrapper">
|
||||
<img
|
||||
:src="FILE_DOWNLOAD_URL + props.coverUrl"
|
||||
class="cover-image"
|
||||
:class="coverImageClass"
|
||||
@load="handleCoverImageLoad"
|
||||
/>
|
||||
<div class="cover-actions">
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
circle
|
||||
:icon="Delete"
|
||||
@click="handleRemoveCover"
|
||||
class="delete-btn"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 上传区域 -->
|
||||
<div
|
||||
v-else
|
||||
class="upload-cover-area"
|
||||
:class="{ 'is-dragover': isDragover, 'is-disabled': uploading }"
|
||||
@click="handleClickUpload"
|
||||
@drop.prevent="handleDrop"
|
||||
@dragover.prevent="handleDragOver"
|
||||
@dragleave.prevent="handleDragLeave"
|
||||
>
|
||||
<el-icon v-if="!uploading" class="upload-cover-icon"><Plus /></el-icon>
|
||||
<div v-if="uploading" class="uploading-mask">
|
||||
<el-icon class="is-loading"><Loading /></el-icon>
|
||||
<div>上传中...</div>
|
||||
</div>
|
||||
<div v-if="!uploading && tip" class="upload-cover-tip">{{ tip }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 隐藏的文件输入框 -->
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
:accept="accept"
|
||||
:multiple="false"
|
||||
@change="handleFileSelect"
|
||||
style="display: none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 默认模式 -->
|
||||
<div v-else-if="!asDialog" class="upload-container">
|
||||
<div
|
||||
class="upload-area"
|
||||
:class="{ 'is-dragover': isDragover, 'is-disabled': uploading }"
|
||||
@@ -218,8 +270,10 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { ElDialog, ElButton, ElMessage } from 'element-plus';
|
||||
import { ElDialog, ElButton, ElMessage, ElIcon } from 'element-plus';
|
||||
import { Plus, Delete, Loading } from '@element-plus/icons-vue';
|
||||
import { fileApi } from '@/apis/system/file';
|
||||
import { FILE_DOWNLOAD_URL } from '@/config';
|
||||
import type { SysFile } from '@/types';
|
||||
|
||||
interface Props {
|
||||
@@ -232,6 +286,8 @@ interface Props {
|
||||
businessId?: string;
|
||||
tip?: string;
|
||||
asDialog?: boolean; // 是否作为弹窗使用
|
||||
listType?: 'default' | 'cover'; // 列表类型：default-默认, cover-封面
|
||||
coverUrl?: string; // 封面图片URL（用于cover模式）
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
@@ -242,13 +298,17 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
multiple: false,
|
||||
module: 'common',
|
||||
tip: '',
|
||||
asDialog: true
|
||||
asDialog: true,
|
||||
listType: 'default',
|
||||
coverUrl: ''
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean];
|
||||
'update:coverUrl': [url: string];
|
||||
'success': [files: SysFile[]];
|
||||
'error': [error: any];
|
||||
'remove': [];
|
||||
}>();
|
||||
|
||||
const fileInputRef = ref<HTMLInputElement>();
|
||||
@@ -261,6 +321,24 @@ const visible = computed({
|
||||
set: (val) => props.asDialog ? emit('update:modelValue', val) : undefined
|
||||
});
|
||||
|
||||
// cover图片的宽高比类
|
||||
const coverImageClass = ref('');
|
||||
|
||||
// 处理封面图片加载
|
||||
function handleCoverImageLoad(event: Event) {
|
||||
const img = event.target as HTMLImageElement;
|
||||
const width = img.naturalWidth;
|
||||
const height = img.naturalHeight;
|
||||
|
||||
// 如果宽度大于高度，横向图片，设置width: 100%
|
||||
if (width > height) {
|
||||
coverImageClass.value = 'cover-image-horizontal';
|
||||
} else {
|
||||
// 纵向图片，设置height: 100%
|
||||
coverImageClass.value = 'cover-image-vertical';
|
||||
}
|
||||
}
|
||||
|
||||
// 预览相关
|
||||
const imagePreviewVisible = ref(false);
|
||||
const filePreviewVisible = ref(false);
|
||||
@@ -283,6 +361,11 @@ function handleFileSelect(event: Event) {
|
||||
addFiles(Array.from(input.files));
|
||||
// 清空 input，允许重复选择同一文件
|
||||
input.value = '';
|
||||
|
||||
// cover模式下选择文件后立即上传
|
||||
if (props.listType === 'cover') {
|
||||
handleUpload();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -445,7 +528,11 @@ async function handleUpload() {
|
||||
|
||||
if (result.code === 200 && result.data) {
|
||||
uploadedFilesList.push(result.data);
|
||||
|
||||
// cover模式下不显示成功提示
|
||||
if (props.listType !== 'cover') {
|
||||
ElMessage.success(`${file.name} 上传成功`);
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(`${file.name} 上传失败: ${result.message}`);
|
||||
}
|
||||
@@ -454,6 +541,11 @@ async function handleUpload() {
|
||||
// 所有文件上传完成
|
||||
if (uploadedFilesList.length > 0) {
|
||||
emit('success', uploadedFilesList);
|
||||
|
||||
// cover模式下更新coverUrl（只返回fileID，不拼接URL）
|
||||
if (props.listType === 'cover' && uploadedFilesList[0]) {
|
||||
emit('update:coverUrl', uploadedFilesList[0].fileID || '');
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('上传失败:', error);
|
||||
@@ -461,13 +553,24 @@ async function handleUpload() {
|
||||
emit('error', error);
|
||||
} finally {
|
||||
uploading.value = false;
|
||||
// 上传完成后关闭对话框
|
||||
if (uploadedFilesList.length > 0) {
|
||||
|
||||
// cover模式下清空选择的文件
|
||||
if (props.listType === 'cover') {
|
||||
selectedFiles.value = [];
|
||||
} else if (uploadedFilesList.length > 0) {
|
||||
// 其他模式上传完成后关闭对话框
|
||||
handleClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 删除封面
|
||||
function handleRemoveCover() {
|
||||
emit('update:coverUrl', '');
|
||||
coverImageClass.value = '';
|
||||
emit('remove');
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
function handleClose() {
|
||||
if (props.asDialog) {
|
||||
@@ -710,4 +813,127 @@ defineExpose({
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Cover模式样式 */
|
||||
.upload-cover-container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cover-image-wrapper {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f7fa;
|
||||
|
||||
&:hover .cover-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
&.cover-image-horizontal {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.cover-image-vertical {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-actions {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
.delete-btn {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-cover-area {
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
border: 2px dashed #dcdfe6;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
background: #fafafa;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
background: #f0f9ff;
|
||||
}
|
||||
|
||||
&.is-dragover {
|
||||
border-color: #409eff;
|
||||
background: #e6f7ff;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-cover-icon {
|
||||
font-size: 32px;
|
||||
color: #8c939d;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upload-cover-tip {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.uploading-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.el-icon {
|
||||
font-size: 32px;
|
||||
color: #409eff;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -28,6 +28,11 @@ export interface PageParam {
|
||||
page: number;
|
||||
/** 每页条数 */
|
||||
size: number;
|
||||
|
||||
/** 总页数 */
|
||||
totalPages?: number;
|
||||
/** 总记录数 */
|
||||
totalElements?: number;
|
||||
/** 排序字段 */
|
||||
orderBy?: string;
|
||||
/** 排序方向 asc/desc */
|
||||
@@ -38,17 +43,14 @@ export interface PageParam {
|
||||
* 分页结果
|
||||
*/
|
||||
export interface PageDomain<T> {
|
||||
/** 当前页码 */
|
||||
page: number;
|
||||
/** 每页条数 */
|
||||
size: number;
|
||||
/** 总记录数 */
|
||||
total: number;
|
||||
/** 总页数 */
|
||||
pages: number;
|
||||
pageParam: PageParam;
|
||||
/** 数据列表 */
|
||||
dataList?: T[];
|
||||
}
|
||||
export interface PageRequest<T> {
|
||||
pageParam: PageParam;
|
||||
filter: T;
|
||||
}
|
||||
|
||||
/**
|
||||
* 统一返回结果
|
||||
|
||||
@@ -42,30 +42,83 @@ export interface Course extends BaseDTO {
|
||||
* 课程章节实体
|
||||
*/
|
||||
export interface CourseChapter extends BaseDTO {
|
||||
/** 章节唯一标识 */
|
||||
/** 章节ID */
|
||||
chapterID?: string;
|
||||
/** 课程ID */
|
||||
courseID?: string;
|
||||
/** 父章节ID */
|
||||
parentID?: string;
|
||||
/** 章节名称 */
|
||||
name?: string;
|
||||
/** 章节内容 */
|
||||
content?: string;
|
||||
/** 章节类型（1视频 2文档 3音频） */
|
||||
chapterType?: number;
|
||||
/** 资源ID */
|
||||
resourceID?: string;
|
||||
/** 视频URL */
|
||||
videoUrl?: string;
|
||||
/** 章节时长（分钟） */
|
||||
duration?: number;
|
||||
/** 排序号 */
|
||||
orderNum?: number;
|
||||
/** 状态（0禁用 1启用） */
|
||||
status?: number;
|
||||
/** 创建者 */
|
||||
creator?: string;
|
||||
/** 更新者 */
|
||||
updater?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 课程标签实体
|
||||
* 课程标签关联实体
|
||||
*/
|
||||
export interface CourseTag extends BaseDTO {
|
||||
/** 课程ID */
|
||||
courseID?: string;
|
||||
/** 标签ID */
|
||||
tagID?: string;
|
||||
/** 创建者 */
|
||||
creator?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 学习节点实体
|
||||
*/
|
||||
export interface CourseNode extends BaseDTO {
|
||||
/** 章节ID */
|
||||
chapterID?: string;
|
||||
/** 节点ID */
|
||||
nodeID?: string;
|
||||
/** 节点名称 */
|
||||
name?: string;
|
||||
/** 节点内容 */
|
||||
content?: string;
|
||||
/** 节点类型（0文章资源 1富文本 2其他上传文件） */
|
||||
nodeType?: number;
|
||||
/** 资源ID */
|
||||
resourceID?: string;
|
||||
/** 视频URL */
|
||||
videoUrl?: string;
|
||||
/** 节点时长（分钟） */
|
||||
duration?: number;
|
||||
/** 排序号 */
|
||||
orderNum?: number;
|
||||
/** 是否必修（1必修 0选修） */
|
||||
isRequired?: number;
|
||||
/** 创建者 */
|
||||
creator?: string;
|
||||
/** 更新者 */
|
||||
updater?: string;
|
||||
}
|
||||
|
||||
export interface ChapterVO extends BaseDTO {
|
||||
chapter: CourseChapter;
|
||||
nodes: CourseNode[];
|
||||
}
|
||||
|
||||
export interface CourseVO extends BaseDTO {
|
||||
course: Course;
|
||||
courseChapters: ChapterVO[];
|
||||
courseTags: CourseTag[];
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
*/
|
||||
|
||||
import { BaseDTO } from '../base';
|
||||
|
||||
import { CollectionType } from '../enums';
|
||||
/**
|
||||
* 用户收藏实体
|
||||
*/
|
||||
@@ -13,9 +13,11 @@ export interface UserCollection extends BaseDTO {
|
||||
/** 用户ID */
|
||||
userID?: string;
|
||||
/** 收藏类型（1资源 2课程） */
|
||||
collectionType?: number;
|
||||
collectionType?: CollectionType;
|
||||
/** 收藏对象ID */
|
||||
collectionID?: string;
|
||||
/** 是否新增收藏（1是 -1否） */
|
||||
collectionValue?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="course-management">
|
||||
<CourseList
|
||||
v-if="currentView === 'list'"
|
||||
@add="handleAdd"
|
||||
@edit="handleEdit"
|
||||
/>
|
||||
<CourseAdd
|
||||
v-else-if="currentView === 'add' || currentView === 'edit'"
|
||||
:courseID="currentCourseId"
|
||||
@success="handleSuccess"
|
||||
@cancel="handleCancel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { CourseList, CourseAdd } from './components';
|
||||
import type { Course } from '@/types/study';
|
||||
|
||||
type ViewType = 'list' | 'add' | 'edit';
|
||||
|
||||
const currentView = ref<ViewType>('list');
|
||||
const currentCourseId = ref<string>();
|
||||
|
||||
function handleAdd() {
|
||||
currentView.value = 'add';
|
||||
currentCourseId.value = undefined;
|
||||
}
|
||||
|
||||
function handleEdit(course: Course) {
|
||||
currentView.value = 'edit';
|
||||
currentCourseId.value = course.courseID;
|
||||
}
|
||||
|
||||
function handleSuccess() {
|
||||
currentView.value = 'list';
|
||||
currentCourseId.value = undefined;
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
currentView.value = 'list';
|
||||
currentCourseId.value = undefined;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-management {
|
||||
height: 100%;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,600 @@
|
||||
<template>
|
||||
<div class="course-add">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<el-button @click="handleCancel" :icon="ArrowLeft">返回</el-button>
|
||||
<h2 class="page-title">{{ props.courseID ? '编辑课程' : '新增课程' }}</h2>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="currentCourseVO"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<el-card class="info-card" shadow="never">
|
||||
<template #header>
|
||||
<span class="card-header">基本信息</span>
|
||||
</template>
|
||||
|
||||
<el-form-item label="课程名称" prop="course.name">
|
||||
<el-input v-model="currentCourseVO.course.name" placeholder="请输入课程名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="课程封面" prop="course.coverImage">
|
||||
<FileUpload
|
||||
:as-dialog="false"
|
||||
list-type="cover"
|
||||
v-model:cover-url="currentCourseVO.course.coverImage"
|
||||
accept="image/*"
|
||||
:max-size="2"
|
||||
module="course"
|
||||
tip="建议尺寸 800x600"
|
||||
@success="handleCoverUploadSuccess"
|
||||
@remove="handleCoverRemove"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="授课老师" prop="course.teacher">
|
||||
<el-input v-model="currentCourseVO.course.teacher" placeholder="请输入授课老师" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="课程时长" prop="course.duration">
|
||||
<el-input-number
|
||||
v-model="currentCourseVO.course.duration"
|
||||
:min="0"
|
||||
placeholder="分钟"
|
||||
/>
|
||||
<span class="ml-2">分钟</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="课程描述" prop="course.description">
|
||||
<el-input
|
||||
v-model="currentCourseVO.course.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入课程描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排序号" prop="course.orderNum">
|
||||
<el-input-number v-model="currentCourseVO.course.orderNum" :min="0" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="course.status">
|
||||
<el-radio-group v-model="currentCourseVO.course.status">
|
||||
<el-radio :label="0">未上线</el-radio>
|
||||
<el-radio :label="1">已上线</el-radio>
|
||||
<el-radio :label="2">已下架</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
|
||||
<!-- 章节管理 -->
|
||||
<el-card class="chapter-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header-flex">
|
||||
<span class="card-header">章节管理</span>
|
||||
<el-button type="primary" size="small" @click="addChapter">
|
||||
<el-icon><Plus /></el-icon>
|
||||
添加章节
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="currentCourseVO.courseChapters.length === 0" class="empty-tip">
|
||||
暂无章节，请点击"添加章节"按钮添加
|
||||
</div>
|
||||
|
||||
<el-collapse v-model="activeChapters">
|
||||
<el-collapse-item
|
||||
v-for="(chapterVO, chapterIndex) in currentCourseVO.courseChapters"
|
||||
:key="chapterIndex"
|
||||
:name="chapterIndex"
|
||||
>
|
||||
<template #title>
|
||||
<div class="chapter-title">
|
||||
<span>章节 {{ chapterIndex + 1 }}: {{ chapterVO.chapter.name || '未命名章节' }}</span>
|
||||
<div class="chapter-actions" @click.stop>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
@click="removeChapter(chapterIndex)"
|
||||
>
|
||||
删除章节
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 章节信息 -->
|
||||
<el-form-item :label="`章节${chapterIndex + 1}名称`" :prop="`courseChapters.${chapterIndex}.chapter.name`">
|
||||
<el-input v-model="chapterVO.chapter.name" placeholder="请输入章节名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="`章节${chapterIndex + 1}排序`" :prop="`courseChapters.${chapterIndex}.chapter.orderNum`">
|
||||
<el-input-number v-model="chapterVO.chapter.orderNum" :min="0" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 学习节点 -->
|
||||
<div class="nodes-section">
|
||||
<div class="nodes-header">
|
||||
<span class="nodes-title">学习节点</span>
|
||||
<el-button type="primary" size="small" @click="addNode(chapterIndex)">
|
||||
<el-icon><Plus /></el-icon>
|
||||
添加节点
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div v-if="chapterVO.nodes.length === 0" class="empty-tip">
|
||||
暂无学习节点
|
||||
</div>
|
||||
|
||||
<div v-else class="nodes-list">
|
||||
<el-card
|
||||
v-for="(node, nodeIndex) in chapterVO.nodes"
|
||||
:key="nodeIndex"
|
||||
class="node-card"
|
||||
shadow="hover"
|
||||
>
|
||||
<template #header>
|
||||
<div class="node-header">
|
||||
<span>节点 {{ nodeIndex + 1 }}: {{ node.name || '未命名节点' }}</span>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
@click="removeNode(chapterIndex, nodeIndex)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form-item label="节点名称">
|
||||
<el-input v-model="node.name" placeholder="请输入节点名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="节点类型">
|
||||
<el-radio-group v-model="node.nodeType">
|
||||
<el-radio :label="0">文章资源</el-radio>
|
||||
<el-radio :label="1">富文本</el-radio>
|
||||
<el-radio :label="2">上传文件</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 文章资源选择 -->
|
||||
<el-form-item v-if="node.nodeType === 0" label="选择文章">
|
||||
<el-select
|
||||
v-model="node.resourceID"
|
||||
filterable
|
||||
remote
|
||||
placeholder="搜索并选择文章"
|
||||
:remote-method="getNodeSearchMethod(chapterIndex, nodeIndex)"
|
||||
:loading="getNodeLoading(chapterIndex, nodeIndex)"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="article in getNodeArticleOptions(chapterIndex, nodeIndex)"
|
||||
:key="article.resourceID"
|
||||
:label="article.title"
|
||||
:value="article.resourceID"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 富文本编辑 -->
|
||||
<el-form-item v-if="node.nodeType === 1" label="内容编辑">
|
||||
<RichTextComponent v-model="node.content" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 文件上传 -->
|
||||
<el-form-item v-if="node.nodeType === 2" label="上传文件">
|
||||
<FileUpload
|
||||
:as-dialog="false"
|
||||
:multiple="false"
|
||||
module="course-node"
|
||||
:max-size="100"
|
||||
tip="支持上传视频、音频、文档等文件，单个文件不超过100MB"
|
||||
@success="(files) => handleNodeFileUploadSuccess(files, chapterIndex, nodeIndex)"
|
||||
/>
|
||||
<div v-if="node.videoUrl" class="file-info-display">
|
||||
<span>已上传文件</span>
|
||||
<el-button type="text" @click="node.videoUrl = ''">删除</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="节点时长">
|
||||
<el-input-number v-model="node.duration" :min="0" />
|
||||
<span class="ml-2">分钟</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否必修">
|
||||
<el-switch
|
||||
v-model="node.isRequired"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排序号">
|
||||
<el-input-number v-model="node.orderNum" :min="0" />
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-form-item class="action-buttons">
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitting">
|
||||
{{ courseID ? '更新课程' : '创建课程' }}
|
||||
</el-button>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { Plus, ArrowLeft } from '@element-plus/icons-vue';
|
||||
import { FileUpload } from '@/components/file';
|
||||
import { RichTextComponent } from '@/components/text';
|
||||
import { courseApi } from '@/apis/study';
|
||||
import { resourceApi } from '@/apis/resource';
|
||||
import type { CourseNode, CourseVO, ChapterVO } from '@/types/study';
|
||||
import type { Resource } from '@/types/resource';
|
||||
import type { SysFile } from '@/types';
|
||||
|
||||
defineOptions({
|
||||
name: 'CourseAdd'
|
||||
});
|
||||
|
||||
// 节点扩展类型（用于前端交互）
|
||||
interface NodeWithExtras extends CourseNode {
|
||||
loading?: boolean;
|
||||
articleOptions?: Resource[];
|
||||
searchMethod?: (query: string) => void;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
courseID?: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<{
|
||||
success: [];
|
||||
cancel: [];
|
||||
}>();
|
||||
|
||||
const formRef = ref();
|
||||
const submitting = ref(false);
|
||||
const activeChapters = ref<number[]>([]);
|
||||
|
||||
// 原始数据（用于比对）
|
||||
const originalCourseVO = ref<CourseVO>();
|
||||
// 当前编辑的数据
|
||||
const currentCourseVO = ref<CourseVO>({
|
||||
course: {
|
||||
name: '',
|
||||
coverImage: '',
|
||||
description: '',
|
||||
teacher: '',
|
||||
duration: 0,
|
||||
status: 0,
|
||||
orderNum: 0
|
||||
},
|
||||
courseChapters: [],
|
||||
courseTags: []
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
'course.name': [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
|
||||
'course.teacher': [{ required: true, message: '请输入授课老师', trigger: 'blur' }]
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (props.courseID) {
|
||||
loadCourse();
|
||||
}
|
||||
});
|
||||
|
||||
// 加载课程数据
|
||||
async function loadCourse() {
|
||||
try {
|
||||
const res = await courseApi.getCourseById(props.courseID!);
|
||||
if (res.success && res.data) {
|
||||
// 保存原始数据
|
||||
originalCourseVO.value = JSON.parse(JSON.stringify(res.data));
|
||||
// 设置当前编辑数据
|
||||
currentCourseVO.value = JSON.parse(JSON.stringify(res.data));
|
||||
console.log(currentCourseVO.value);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载课程失败:', error);
|
||||
ElMessage.error('加载课程失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 添加章节
|
||||
function addChapter() {
|
||||
const newChapterVO: ChapterVO = {
|
||||
chapter: {
|
||||
chapterID: '',
|
||||
name: '',
|
||||
orderNum: currentCourseVO.value.courseChapters.length
|
||||
},
|
||||
nodes: []
|
||||
};
|
||||
currentCourseVO.value.courseChapters.push(newChapterVO);
|
||||
activeChapters.value.push(currentCourseVO.value.courseChapters.length - 1);
|
||||
}
|
||||
|
||||
// 删除章节
|
||||
function removeChapter(index: number) {
|
||||
currentCourseVO.value.courseChapters.splice(index, 1);
|
||||
// 更新激活的章节索引
|
||||
activeChapters.value = activeChapters.value
|
||||
.filter(i => i !== index)
|
||||
.map(i => i > index ? i - 1 : i);
|
||||
}
|
||||
|
||||
// 添加节点
|
||||
function addNode(chapterIndex: number) {
|
||||
const nodeIndex = currentCourseVO.value.courseChapters[chapterIndex].nodes.length;
|
||||
const newNode: NodeWithExtras = {
|
||||
nodeID: '',
|
||||
name: '',
|
||||
nodeType: 0,
|
||||
content: '',
|
||||
duration: 0,
|
||||
isRequired: 1,
|
||||
orderNum: nodeIndex,
|
||||
loading: false,
|
||||
articleOptions: [],
|
||||
searchMethod: (query: string) => searchArticles(query, chapterIndex, nodeIndex)
|
||||
};
|
||||
currentCourseVO.value.courseChapters[chapterIndex].nodes.push(newNode);
|
||||
}
|
||||
|
||||
// 删除节点
|
||||
function removeNode(chapterIndex: number, nodeIndex: number) {
|
||||
currentCourseVO.value.courseChapters[chapterIndex].nodes.splice(nodeIndex, 1);
|
||||
}
|
||||
|
||||
// 辅助函数：获取节点的 searchMethod
|
||||
function getNodeSearchMethod(chapterIndex: number, nodeIndex: number) {
|
||||
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
|
||||
return node.searchMethod;
|
||||
}
|
||||
|
||||
// 辅助函数：获取节点的 loading 状态
|
||||
function getNodeLoading(chapterIndex: number, nodeIndex: number) {
|
||||
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
|
||||
return node.loading || false;
|
||||
}
|
||||
|
||||
// 辅助函数：获取节点的 articleOptions
|
||||
function getNodeArticleOptions(chapterIndex: number, nodeIndex: number) {
|
||||
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
|
||||
return node.articleOptions || [];
|
||||
}
|
||||
|
||||
// 搜索文章
|
||||
async function searchArticles(query: string, chapterIndex: number, nodeIndex: number) {
|
||||
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
|
||||
if (!query) {
|
||||
node.articleOptions = [];
|
||||
return;
|
||||
}
|
||||
|
||||
node.loading = true;
|
||||
try {
|
||||
const res = await resourceApi.getResourceList({
|
||||
keyword: query
|
||||
});
|
||||
if (res.success && res.dataList) {
|
||||
node.articleOptions = res.dataList;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('搜索文章失败:', error);
|
||||
} finally {
|
||||
node.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理封面上传成功
|
||||
function handleCoverUploadSuccess(files: SysFile[]) {
|
||||
if (files && files.length > 0) {
|
||||
// coverUrl已经通过v-model:cover-url自动更新了
|
||||
// 这里可以做一些额外的处理，比如记录fileID
|
||||
console.log('封面上传成功:', files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理封面删除
|
||||
function handleCoverRemove() {
|
||||
currentCourseVO.value.course.coverImage = '';
|
||||
}
|
||||
|
||||
// 处理节点文件上传成功
|
||||
function handleNodeFileUploadSuccess(files: SysFile[], chapterIndex: number, nodeIndex: number) {
|
||||
if (files && files.length > 0) {
|
||||
currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex].videoUrl = files[0].filePath || '';
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
|
||||
submitting.value = true;
|
||||
|
||||
// 先创建/更新课程
|
||||
let courseID = props.courseID;
|
||||
if (courseID) {
|
||||
const res = await courseApi.updateCourse({
|
||||
...currentCourseVO.value.course,
|
||||
courseID
|
||||
});
|
||||
if (!res.success) {
|
||||
throw new Error('更新课程失败');
|
||||
}
|
||||
} else {
|
||||
const res = await courseApi.createCourse(currentCourseVO.value);
|
||||
if (!res.success || !res.data?.course.courseID) {
|
||||
throw new Error('创建课程失败');
|
||||
}
|
||||
courseID = res.data.course.courseID;
|
||||
}
|
||||
ElMessage.success(props.courseID ? '课程更新成功' : '课程创建成功');
|
||||
emit('success');
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
ElMessage.error('保存失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 取消
|
||||
function handleCancel() {
|
||||
emit('cancel');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-add {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.info-card,
|
||||
.chapter-card {
|
||||
margin-bottom: 20px;
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.card-header-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.chapter-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.chapter-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.nodes-section {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.nodes-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.nodes-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.nodes-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.node-card {
|
||||
:deep(.el-card__header) {
|
||||
padding: 12px 15px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.node-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.file-info-display {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<div class="course-list">
|
||||
<!-- 搜索栏 -->
|
||||
<el-form :model="searchForm" inline class="search-form">
|
||||
<el-form-item label="课程名称">
|
||||
<el-input
|
||||
v-model="searchForm.name"
|
||||
placeholder="请输入课程名称"
|
||||
clearable
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="searchForm.status" clearable placeholder="请选择状态">
|
||||
<el-option label="未上线" :value="0" />
|
||||
<el-option label="已上线" :value="1" />
|
||||
<el-option label="已下架" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">
|
||||
<el-icon><Search /></el-icon>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增课程
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 课程表格 -->
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="courseList"
|
||||
border
|
||||
stripe
|
||||
>
|
||||
<el-table-column prop="name" label="课程名称" min-width="200" />
|
||||
<el-table-column label="封面" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-image
|
||||
v-if="row.coverImage"
|
||||
:src="FILE_DOWNLOAD_URL + row.coverImage"
|
||||
style="width: 60px; height: 60px"
|
||||
fit="cover"
|
||||
/>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="teacher" label="授课老师" width="120" />
|
||||
<el-table-column prop="duration" label="时长(分钟)" width="120" />
|
||||
<el-table-column prop="learnCount" label="学习人数" width="100" />
|
||||
<el-table-column prop="viewCount" label="浏览次数" width="100" />
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.status === 0" type="info">未上线</el-tag>
|
||||
<el-tag v-else-if="row.status === 1" type="success">已上线</el-tag>
|
||||
<el-tag v-else-if="row.status === 2" type="danger">已下架</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNum" label="排序" width="80" />
|
||||
<el-table-column label="操作" width="250" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" size="small" link @click="handleEdit(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.status === 0"
|
||||
type="success"
|
||||
size="small"
|
||||
link
|
||||
@click="handleUpdateStatus(row, 1)"
|
||||
>
|
||||
上线
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.status === 1"
|
||||
type="warning"
|
||||
size="small"
|
||||
link
|
||||
@click="handleUpdateStatus(row, 2)"
|
||||
>
|
||||
下架
|
||||
</el-button>
|
||||
<el-button type="danger" size="small" link @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
v-if="total > 0"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
class="pagination"
|
||||
@size-change="handlePageChange"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { Search, Plus } from '@element-plus/icons-vue';
|
||||
import { courseApi } from '@/apis/study';
|
||||
import { FILE_DOWNLOAD_URL } from '@/config';
|
||||
import type { Course, PageParam } from '@/types';
|
||||
|
||||
defineOptions({
|
||||
name: 'CourseList'
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
add: [];
|
||||
edit: [course: Course];
|
||||
}>();
|
||||
|
||||
const loading = ref(false);
|
||||
const courseList = ref<Course[]>([]);
|
||||
const total = ref(0);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
|
||||
const searchForm = reactive({
|
||||
name: '',
|
||||
status: undefined as number | undefined
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
loadCourses();
|
||||
});
|
||||
|
||||
// 加载课程列表
|
||||
async function loadCourses() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await courseApi.getCoursePage({page: currentPage.value, size: pageSize.value}, searchForm);
|
||||
if (res.success && res.pageDomain) {
|
||||
courseList.value = res.pageDomain.dataList || [];
|
||||
total.value = res.pageDomain.pageParam.totalElements || 0;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载课程列表失败:', error);
|
||||
ElMessage.error('加载课程列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索
|
||||
function handleSearch() {
|
||||
currentPage.value = 1;
|
||||
loadCourses();
|
||||
}
|
||||
|
||||
// 重置
|
||||
function handleReset() {
|
||||
searchForm.name = '';
|
||||
searchForm.status = undefined;
|
||||
currentPage.value = 1;
|
||||
loadCourses();
|
||||
}
|
||||
|
||||
// 新增
|
||||
function handleAdd() {
|
||||
emit('add');
|
||||
}
|
||||
|
||||
// 编辑
|
||||
function handleEdit(course: Course) {
|
||||
emit('edit', course);
|
||||
}
|
||||
|
||||
// 更新状态
|
||||
async function handleUpdateStatus(course: Course, status: number) {
|
||||
const statusText = status === 1 ? '上线' : '下架';
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要${statusText}该课程吗？`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
|
||||
const res = await courseApi.updateCourseStatus(course.courseID!, status);
|
||||
if (res.success) {
|
||||
ElMessage.success(`${statusText}成功`);
|
||||
loadCourses();
|
||||
} else {
|
||||
ElMessage.error(`${statusText}失败`);
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('更新状态失败:', error);
|
||||
ElMessage.error(`${statusText}失败`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 删除
|
||||
async function handleDelete(course: Course) {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要删除该课程吗？此操作不可恢复！', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
|
||||
const res = await courseApi.deleteCourse(course.courseID!);
|
||||
if (res.success) {
|
||||
ElMessage.success('删除成功');
|
||||
loadCourses();
|
||||
} else {
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除失败:', error);
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分页变化
|
||||
function handlePageChange() {
|
||||
loadCourses();
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
loadCourses
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-list {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
export { default as CourseList } from './CourseList.vue';
|
||||
export { default as CourseAdd } from './CourseAdd.vue';
|
||||
|
||||
@@ -42,21 +42,17 @@
|
||||
|
||||
<!-- 封面图 -->
|
||||
<el-form-item label="封面图片">
|
||||
<!-- 上传区域 - 只在没有封面图片时显示 -->
|
||||
<FileUpload
|
||||
v-if="!articleForm.resource.coverImage"
|
||||
:as-dialog="false"
|
||||
list-type="cover"
|
||||
v-model:cover-url="articleForm.resource.coverImage"
|
||||
accept="image/*"
|
||||
:max-size="2"
|
||||
:multiple="false"
|
||||
tip="建议尺寸：800x450px，支持jpg、png格式"
|
||||
module="article"
|
||||
tip="建议尺寸 800x450"
|
||||
@success="handleCoverUploadSuccess"
|
||||
@remove="removeCover"
|
||||
/>
|
||||
<!-- 封面预览 - 只在有封面图片时显示 -->
|
||||
<div v-if="articleForm.resource.coverImage" class="cover-preview">
|
||||
<img :src="FILE_DOWNLOAD_URL + articleForm.resource.coverImage" class="cover" />
|
||||
<el-button type="danger" size="small" @click="removeCover">删除封面</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 文章内容 -->
|
||||
@@ -133,7 +129,6 @@ import { FileUpload } from '@/components/file';
|
||||
import { ArticleShowView } from './index';
|
||||
import { resourceCategoryApi, resourceTagApi, resourceApi } from '@/apis/resource';
|
||||
import { ResourceVO, ResourceCategory, Tag } from '@/types/resource';
|
||||
import { FILE_DOWNLOAD_URL } from '@/config';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
@@ -274,11 +269,8 @@ function handlePreview() {
|
||||
// 封面上传成功
|
||||
function handleCoverUploadSuccess(files: any[]) {
|
||||
if (files && files.length > 0) {
|
||||
const file = files[0];
|
||||
// 使用文件下载URL构建完整路径
|
||||
import('@/config').then(config => {
|
||||
articleForm.value.resource.coverImage = config.FILE_DOWNLOAD_URL + file.id;
|
||||
});
|
||||
// coverUrl已经通过v-model:cover-url自动更新了
|
||||
console.log('封面上传成功:', files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -341,55 +333,4 @@ onMounted(async () => {
|
||||
padding: 32px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.cover-uploader {
|
||||
:deep(.el-upload) {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cover-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.cover-preview {
|
||||
margin-top: 16px;
|
||||
position: relative;
|
||||
|
||||
.cover {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,15 +20,16 @@ const props = defineProps<Props>();
|
||||
|
||||
|
||||
const emit = defineEmits<{
|
||||
collect: [];
|
||||
uncollect: [];
|
||||
collect: [type: number];
|
||||
}>();
|
||||
|
||||
function handleCollect() {
|
||||
if(props.isCollected) {
|
||||
emit('uncollect');
|
||||
// 已收藏，取消收藏
|
||||
emit('collect', -1);
|
||||
} else {
|
||||
emit('collect');
|
||||
// 未收藏，收藏
|
||||
emit('collect', 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
<ResouceCollect
|
||||
:is-collected="isCollected"
|
||||
@collect="handleCollect"
|
||||
@uncollect="handleUncollect"
|
||||
/>
|
||||
<ResouceBottom
|
||||
:prev-resource="prevResource"
|
||||
@@ -31,6 +30,7 @@ import { resourceApi } from '@/apis/resource';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import type { Resource } from '@/types/resource';
|
||||
import { ArrowLeft } from '@element-plus/icons-vue';
|
||||
import { CollectionType, type UserCollection } from '@/types';
|
||||
|
||||
interface Props {
|
||||
resourceId?: string;
|
||||
@@ -103,29 +103,32 @@ function updateAdjacentResources(currentResourceId: string) {
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCollect() {
|
||||
async function handleCollect(type: number) {
|
||||
try {
|
||||
const resourceID = articleData.value?.resourceID;
|
||||
if (!resourceID) return;
|
||||
|
||||
const res = await resourceApi.incrementCollectCount(resourceID);
|
||||
let collect: UserCollection = {
|
||||
collectionType: CollectionType.RESOURCE,
|
||||
collectionID: resourceID,
|
||||
collectionValue: type
|
||||
}
|
||||
const res = await resourceApi.resourceCollect(collect);
|
||||
if (res.success) {
|
||||
if (type === 1) {
|
||||
isCollected.value = true;
|
||||
ElMessage.success('收藏成功');
|
||||
} else {
|
||||
ElMessage.error('收藏失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('收藏失败:', error);
|
||||
ElMessage.error('收藏失败');
|
||||
}
|
||||
}
|
||||
|
||||
function handleUncollect() {
|
||||
// TODO: 实现取消收藏API
|
||||
} else if (type === -1) {
|
||||
isCollected.value = false;
|
||||
ElMessage.success('已取消收藏');
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(type === 1 ? '收藏失败' : '取消收藏失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('操作失败:', error);
|
||||
ElMessage.error('操作失败');
|
||||
}
|
||||
}
|
||||
|
||||
function handleNavigate(direction: 'prev' | 'next', resource: Resource) {
|
||||
const resourceId = resource.resourceID;
|
||||
|
||||
Reference in New Issue
Block a user