wangys/schoolNews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web-课程任务

Browse Source
This commit is contained in:
wangys
2025-10-22 18:00:27 +08:00
parent d0cebe1995
commit 3158a85934
16 changed files with 2965 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
schoolNewsWeb/src/views/course/components/CourseAdd.vue
View File

@@ -19,11 +19,21 @@
</template>
<el-form-item label="课程名称" prop="course.name">
<el-input v-model="currentCourseVO.course.name" placeholder="请输入课程名称" />
<el-input
id="course-name"
v-model="currentCourseVO.course.name"
placeholder="请输入课程名称"
:disabled="!editMode"
/>
</el-form-item>
<el-form-item label="课程封面" prop="course.coverImage">
<!-- 课程封面 - 移除 label 关联 -->
<el-form-item prop="course.coverImage">
<template #label>
<span>课程封面</span>
</template>
<FileUpload
v-if="editMode"
:as-dialog="false"
list-type="cover"
v-model:cover-url="currentCourseVO.course.coverImage"
@@ -34,36 +44,58 @@
@success="handleCoverUploadSuccess"
@remove="handleCoverRemove"
/>
<div v-else class="cover-preview">
<img v-if="currentCourseVO.course.coverImage" :src="FILE_DOWNLOAD_URL + currentCourseVO.course.coverImage" alt="课程封面" />
<span v-else class="no-cover">暂无封面</span>
</div>
</el-form-item>
<el-form-item label="授课老师" prop="course.teacher">
<el-input v-model="currentCourseVO.course.teacher" placeholder="请输入授课老师" />
<el-input
id="course-teacher"
v-model="currentCourseVO.course.teacher"
placeholder="请输入授课老师"
:disabled="!editMode"
/>
</el-form-item>
<el-form-item label="课程时长" prop="course.duration">
<el-input-number
id="course-duration"
v-model="currentCourseVO.course.duration"
:min="0"
placeholder="分钟"
:disabled="!editMode"
/>
<span class="ml-2">分钟</span>
</el-form-item>
<el-form-item label="课程描述" prop="course.description">
<el-input
id="course-description"
v-model="currentCourseVO.course.description"
type="textarea"
:rows="3"
placeholder="请输入课程描述"
:disabled="!editMode"
/>
</el-form-item>
<el-form-item label="排序号" prop="course.orderNum">
<el-input-number v-model="currentCourseVO.course.orderNum" :min="0" />
<el-input-number
id="course-orderNum"
v-model="currentCourseVO.course.orderNum"
:min="0"
:disabled="!editMode"
/>
</el-form-item>
<el-form-item label="状态" prop="course.status">
<el-radio-group v-model="currentCourseVO.course.status">
<el-radio-group
id="course-status"
v-model="currentCourseVO.course.status"
disabled
>
<el-radio :label="0">未上线</el-radio>
<el-radio :label="1">已上线</el-radio>
<el-radio :label="2">已下架</el-radio>
@@ -76,7 +108,7 @@
<template #header>
<div class="card-header-flex">
<span class="card-header">章节管理</span>
<el-button type="primary" size="small" @click="addChapter">
<el-button v-if="editMode" type="primary" size="small" @click="addChapter">
<el-icon><Plus /></el-icon>
添加章节
</el-button>
@@ -96,7 +128,7 @@
<template #title>
<div class="chapter-title">
<span>章节 {{ chapterIndex + 1 }}: {{ chapterVO.chapter.name || '未命名章节' }}</span>
<div class="chapter-actions" @click.stop>
<div v-if="editMode" class="chapter-actions" @click.stop>
<el-button
type="danger"
size="small"
@@ -115,21 +147,31 @@
:prop="`courseChapters.${chapterIndex}.chapter.name`"
:rules="[{ required: true, message: '请输入章节名称', trigger: 'blur' }]"
>
<el-input v-model="chapterVO.chapter.name" placeholder="请输入章节名称" />
<el-input
:id="`chapter-${chapterIndex}-name`"
v-model="chapterVO.chapter.name"
placeholder="请输入章节名称"
:disabled="!editMode"
/>
</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-input-number
:id="`chapter-${chapterIndex}-orderNum`"
v-model="chapterVO.chapter.orderNum"
:min="0"
:disabled="!editMode"
/>
</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-button v-if="editMode" type="primary" size="small" @click="addNode(chapterIndex)">
<el-icon><Plus /></el-icon>
添加节点
</el-button>
@@ -150,6 +192,7 @@
<div class="node-header">
<span>节点 {{ nodeIndex + 1 }}: {{ node.name || '未命名节点' }}</span>
<el-button
v-if="editMode"
type="danger"
size="small"
link
@@ -164,14 +207,23 @@
label="节点名称"
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.name`"
>
<el-input v-model="node.name" placeholder="请输入节点名称" />
<el-input
:id="`node-${chapterIndex}-${nodeIndex}-name`"
v-model="node.name"
placeholder="请输入节点名称"
:disabled="!editMode"
/>
</el-form-item>
<el-form-item
label="节点类型"
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.nodeType`"
>
<el-radio-group v-model="node.nodeType">
<el-radio-group
:id="`node-${chapterIndex}-${nodeIndex}-nodeType`"
v-model="node.nodeType"
:disabled="!editMode"
>
<el-radio :label="0">文章资源</el-radio>
<el-radio :label="1">富文本</el-radio>
<el-radio :label="2">上传文件</el-radio>
@@ -185,12 +237,14 @@
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.resourceID`"
>
<el-select
:id="`node-${chapterIndex}-${nodeIndex}-resourceID`"
v-model="node.resourceID"
filterable
remote
placeholder="搜索并选择文章"
:remote-method="getNodeSearchMethod(chapterIndex, nodeIndex)"
:loading="getNodeLoading(chapterIndex, nodeIndex)"
:disabled="!editMode"
style="width: 100%"
>
<el-option
@@ -202,22 +256,27 @@
</el-select>
</el-form-item>
<!-- 富文本编辑 -->
<!-- 富文本编辑 - 移除 label 关联 -->
<el-form-item
v-if="node.nodeType === 1"
label="内容编辑"
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.content`"
>
<RichTextComponent v-model="node.content" />
<template #label>
<span>内容编辑</span>
</template>
<RichTextComponent v-model="node.content" :disabled="!editMode" />
</el-form-item>
<!-- 文件上传 -->
<!-- 文件上传 - 移除 label 关联 -->
<el-form-item
v-if="node.nodeType === 2"
label="上传文件"
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.videoUrl`"
>
<template #label>
<span>上传文件</span>
</template>
<FileUpload
v-if="editMode"
:as-dialog="false"
:multiple="false"
module="course-node"
@@ -226,8 +285,11 @@
@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>
<span>已上传文件: {{ node.videoUrl }}</span>
<el-button v-if="editMode" type="text" @click="node.videoUrl = ''">删除</el-button>
</div>
<div v-else-if="!editMode" class="file-info-display">
<span class="no-file">暂无文件</span>
</div>
</el-form-item>
@@ -235,18 +297,28 @@
label="节点时长"
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.duration`"
>
<el-input-number v-model="node.duration" :min="0" />
<el-input-number
:id="`node-${chapterIndex}-${nodeIndex}-duration`"
v-model="node.duration"
:min="0"
:disabled="!editMode"
/>
<span class="ml-2">分钟</span>
</el-form-item>
<!-- 是否必修 - 使用 template #label -->
<el-form-item
label="是否必修"
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.isRequired`"
>
<template #label>
<span>是否必修</span>
</template>
<el-switch
:id="`node-${chapterIndex}-${nodeIndex}-isRequired`"
v-model="node.isRequired"
:active-value="1"
:inactive-value="0"
:disabled="!editMode"
/>
</el-form-item>
@@ -254,7 +326,12 @@
label="排序号"
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.orderNum`"
>
<el-input-number v-model="node.orderNum" :min="0" />
<el-input-number
:id="`node-${chapterIndex}-${nodeIndex}-orderNum`"
v-model="node.orderNum"
:min="0"
:disabled="!editMode"
/>
</el-form-item>
</el-card>
</div>
@@ -265,10 +342,10 @@
<!-- 操作按钮 -->
<el-form-item class="action-buttons">
<el-button type="primary" @click="handleSubmit" :loading="submitting">
<el-button v-if="editMode" type="primary" @click="handleSubmit" :loading="submitting">
{{ courseID ? '更新课程' : '创建课程' }}
</el-button>
<el-button @click="handleCancel">取消</el-button>
<el-button v-if="editMode" @click="handleCancel">取消</el-button>
</el-form-item>
</el-form>
</div>
@@ -285,7 +362,7 @@ import { resourceApi } from '@/apis/resource';
import type { CourseNode, CourseVO, ChapterVO } from '@/types/study';
import type { Resource } from '@/types/resource';
import type { SysFile } from '@/types';
import { FILE_DOWNLOAD_URL } from '@/config';
defineOptions({
name: 'CourseAdd'
});
@@ -310,6 +387,7 @@ const emit = defineEmits<{
const formRef = ref();
const submitting = ref(false);
const activeChapters = ref<number[]>([]);
const editMode = ref(true);
// 原始数据（用于比对）
const originalCourseVO = ref<CourseVO>();
@@ -364,7 +442,9 @@ async function loadCourse() {
chapterVO.nodes = [];
}
});
if (courseData.course.status === 1) {
editMode.value = false;
}
// 保存原始数据
originalCourseVO.value = JSON.parse(JSON.stringify(courseData));
// 设置当前编辑数据
@@ -381,7 +461,7 @@ async function loadCourse() {
function addChapter() {
const newChapterVO: ChapterVO = {
chapter: {
chapterID: '',
chapterID: currentCourseVO.value.course.courseID,
name: '',
orderNum: currentCourseVO.value.courseChapters.length
},
@@ -405,6 +485,7 @@ function addNode(chapterIndex: number) {
const nodeIndex = currentCourseVO.value.courseChapters[chapterIndex].nodes.length;
const newNode: NodeWithExtras = {
nodeID: '',
chapterID: currentCourseVO.value.courseChapters[chapterIndex].chapter.chapterID,
name: '',
nodeType: 0,
content: '',
@@ -495,10 +576,7 @@ async function handleSubmit() {
// 先创建/更新课程
let courseID = props.courseID;
if (courseID) {
const res = await courseApi.updateCourse({
...currentCourseVO.value.course,
courseID
});
const res = await courseApi.updateCourse(currentCourseVO.value);
if (!res.success) {
throw new Error('更新课程失败');
}
@@ -650,5 +728,30 @@ function handleCancel() {
color: #606266;
font-size: 14px;
}
.no-file {
color: #909399;
font-style: italic;
}
}
.cover-preview {
display: flex;
align-items: center;
justify-content: center;
background: #f5f7fa;
border-radius: 4px;
img {
max-width: 100%;
max-height: 100px;
border-radius: 4px;
}
.no-cover {
color: #909399;
font-size: 14px;
font-style: italic;
}
}
</style>

3
schoolNewsWeb/src/views/course/components/CourseDetail.vue
View File

@@ -16,7 +16,7 @@
<div class="course-header">
<div class="cover-section">
<img
:src="courseVO.course.coverImage || defaultCover"
:src="courseVO.course.coverImage? FILE_DOWNLOAD_URL + courseVO.course.coverImage : defaultCover"
:alt="courseVO.course.name"
class="cover-image"
/>
@@ -200,6 +200,7 @@ import { userCollectionApi } from '@/apis/usercenter';
import { useStore } from 'vuex';
import type { CourseVO, LearningRecord } from '@/types';
import { CollectionType } from '@/types';
import { FILE_DOWNLOAD_URL } from '@/config';
interface Props {
courseId: string;

100
schoolNewsWeb/src/views/course/components/CourseList.vue
View File

@@ -1,30 +1,34 @@
<template>
<div class="course-list">
<!-- 搜索栏 -->
<el-form :model="searchForm" inline class="search-form">
<el-form-item label="课程名称">
<el-input
<div class="search-form">
<div class="form-item">
<label class="form-label">课程名称</label>
<input
v-model="searchForm.name"
type="text"
placeholder="请输入课程名称"
clearable
class="form-input"
@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>
</div>
<div class="form-item">
<label class="form-label">状态</label>
<select v-model="searchForm.status" class="form-select">
<option :value="undefined">请选择状态</option>
<option :value="0">未上线</option>
<option :value="1">已上线</option>
<option :value="2">已下架</option>
</select>
</div>
<div class="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>
</div>
<!-- 操作按钮 -->
<div class="toolbar">
@@ -71,7 +75,7 @@
编辑
</el-button>
<el-button
v-if="row.status === 0"
v-if="row.status === 0 || row.status === 2"
type="success"
size="small"
link
@@ -116,7 +120,7 @@ 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';
import type { Course } from '@/types';
defineOptions({
name: 'CourseList'
@@ -192,8 +196,11 @@ async function handleUpdateStatus(course: Course, status: number) {
cancelButtonText: '取消',
type: 'warning'
});
const res = await courseApi.updateCourseStatus(course.courseID!, status);
const params: Course = {
courseID: course.courseID!,
status: status
};
const res = await courseApi.updateCourseStatus(params);
if (res.success) {
ElMessage.success(`${statusText}成功`);
loadCourses();
@@ -248,7 +255,62 @@ defineExpose({
}
.search-form {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-end;
margin-bottom: 20px;
padding: 16px;
background-color: #f5f7fa;
border-radius: 4px;
.form-item {
display: flex;
flex-direction: column;
gap: 8px;
.form-label {
font-size: 14px;
color: #606266;
font-weight: 500;
}
.form-input,
.form-select {
height: 32px;
padding: 0 12px;
font-size: 14px;
color: #606266;
border: 1px solid #dcdfe6;
border-radius: 4px;
background-color: #fff;
transition: border-color 0.2s;
outline: none;
min-width: 200px;
&:hover {
border-color: #c0c4cc;
}
&:focus {
border-color: #409eff;
}
&::placeholder {
color: #c0c4cc;
}
}
.form-select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23606266' d='M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 14px;
padding-right: 30px;
}
}
}
.toolbar {