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>