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

72
schoolNewsWeb/src/apis/study/course.ts
View File

@@ -5,7 +5,7 @@
*/
import { api } from '@/apis/index';
import type { Course, CourseChapter, ResultDomain,CourseVO,PageRequest, PageParam } from '@/types';
import type { Course, CourseChapter, ResultDomain,CourseVO,PageRequest, PageParam, CourseNode } from '@/types';
/**
* 课程API服务
@@ -60,8 +60,8 @@ export const courseApi = {
* @param course 课程数据
* @returns Promise<ResultDomain<Course>>
*/
async updateCourse(course: Course): Promise<ResultDomain<Course>> {
const response = await api.put<Course>(`${this.prefixCourse}/course`, course);
async updateCourse(courseVO: CourseVO): Promise<ResultDomain<CourseVO>> {
const response = await api.put<CourseVO>(`${this.prefixCourse}/course`, courseVO);
return response.data;
},
@@ -81,10 +81,68 @@ export const courseApi = {
* @param status 状态
* @returns Promise<ResultDomain<Course>>
*/
async updateCourseStatus(courseID: string, status: number): Promise<ResultDomain<Course>> {
const response = await api.put<Course>(`${this.prefixCourse}/${courseID}/status`, null, {
params: { status }
});
async updateCourseStatus(course: Course): Promise<ResultDomain<Course>> {
const response = await api.put<Course>(`${this.prefixCourse}/course/status`, course);
return response.data;
},
/**
* 创建课程章节
* @param chapter 章节数据
* @returns Promise<ResultDomain<CourseChapter>>
*/
async createCourseChapter(chapter: CourseChapter): Promise<ResultDomain<CourseChapter>> {
const response = await api.post<CourseChapter>(`${this.prefixCourse}/course/chapter`, chapter);
return response.data;
},
/**
* 更新课程章节
* @param chapter 章节数据
* @returns Promise<ResultDomain<CourseChapter>>
*/
async updateCourseChapter(chapter: CourseChapter): Promise<ResultDomain<CourseChapter>> {
const response = await api.put<CourseChapter>(`${this.prefixCourse}/course/chapter`, chapter);
return response.data;
},
/**
* 删除课程章节
* @param chapterID 章节ID
* @returns Promise<ResultDomain<boolean>>
*/
async deleteCourseChapter(chapterID: string): Promise<ResultDomain<boolean>> {
const response = await api.delete<boolean>(`${this.prefixCourse}/course/chapter/${chapterID}`);
return response.data;
},
/**
* 创建课程章节节点
* @param node 节点数据
* @returns Promise<ResultDomain<CourseNode>>
*/
async createCourseChapterNode(node: CourseNode): Promise<ResultDomain<CourseNode>> {
const response = await api.post<CourseNode>(`${this.prefixCourse}/course/chapter/node`, node);
return response.data;
},
/**
* 更新课程章节节点
* @param node 节点数据
* @returns Promise<ResultDomain<CourseNode>>
*/
async updateCourseChapterNode(node: CourseNode): Promise<ResultDomain<CourseNode>> {
const response = await api.put<CourseNode>(`${this.prefixCourse}/course/chapter/node`, node);
return response.data;
},
/**
* 删除课程章节节点
* @param nodeID 节点ID
* @returns Promise<ResultDomain<boolean>>
*/
async deleteCourseChapterNode(nodeID: string): Promise<ResultDomain<boolean>> {
const response = await api.delete<boolean>(`${this.prefixCourse}/course/chapter/node/${nodeID}`);
return response.data;
},

81
schoolNewsWeb/src/apis/study/learning-task.ts
View File

@@ -5,49 +5,60 @@
*/
import { api } from '@/apis/index';
import type { LearningTask, LearningProgress, ResultDomain } from '@/types';
import type { LearningTask, LearningProgress, ResultDomain, PageParam, TaskVO, TaskUser, TaskItemVO } from '@/types';
/**
* 学习任务API服务
*/
export const learningTaskApi = {
learningTaskPrefix: '/study/tasks',
/**
* 获取学习任务列表
* @param filter 过滤条件
* @returns Promise<ResultDomain<LearningTask>>
*/
async getTaskList(filter?: Partial<LearningTask>): Promise<ResultDomain<LearningTask>> {
const response = await api.get<LearningTask>('/study/learning-task/list', filter);
const response = await api.get<LearningTask>(`${this.learningTaskPrefix}/list`, filter);
return response.data;
},
/**
* 根据ID获取任务详情
* @param taskID 任务ID
* @returns Promise<ResultDomain<LearningTask>>
* @returns Promise<ResultDomain<TaskVO>>
*/
async getTaskById(taskID: string): Promise<ResultDomain<LearningTask>> {
const response = await api.get<LearningTask>(`/study/learning-task/${taskID}`);
async getTaskById(taskID: string): Promise<ResultDomain<TaskVO>> {
const response = await api.get<TaskVO>(`${this.learningTaskPrefix}/${taskID}`);
return response.data;
},
/**
* 创建学习任务
* @param task 任务数据
* 获取任务分页列表
* @param pageParam 分页参数
* @param filter 过滤条件
* @returns Promise<ResultDomain<LearningTask>>
*/
async createTask(task: LearningTask): Promise<ResultDomain<LearningTask>> {
const response = await api.post<LearningTask>('/study/learning-task/create', task);
async getTaskPage(pageParam: PageParam, filter: LearningTask): Promise<ResultDomain<LearningTask>> {
const response = await api.post<LearningTask>(`${this.learningTaskPrefix}/page`, {pageParam, filter});
return response.data;
},
/**
* 创建学习任务
* @param task 任务数据
* @returns Promise<ResultDomain<TaskVO>>
*/
async createTask(task: TaskVO): Promise<ResultDomain<TaskVO>> {
const response = await api.post<TaskVO>(`${this.learningTaskPrefix}/task`, task);
return response.data;
},
/**
* 更新学习任务
* @param task 任务数据
* @returns Promise<ResultDomain<LearningTask>>
* @returns Promise<ResultDomain<TaskVO>>
*/
async updateTask(task: LearningTask): Promise<ResultDomain<LearningTask>> {
const response = await api.put<LearningTask>('/study/learning-task/update', task);
async updateTask(task: TaskVO): Promise<ResultDomain<TaskVO>> {
const response = await api.put<TaskVO>(`${this.learningTaskPrefix}/task`, task);
return response.data;
},
@@ -57,7 +68,7 @@ export const learningTaskApi = {
* @returns Promise<ResultDomain<boolean>>
*/
async deleteTask(taskID: string): Promise<ResultDomain<boolean>> {
const response = await api.delete<boolean>(`/study/learning-task/${taskID}`);
const response = await api.delete<boolean>(`${this.learningTaskPrefix}/task/${taskID}`);
return response.data;
},
@@ -66,8 +77,8 @@ export const learningTaskApi = {
* @param taskID 任务ID
* @returns Promise<ResultDomain<LearningTask>>
*/
async publishTask(taskID: string): Promise<ResultDomain<LearningTask>> {
const response = await api.post<LearningTask>(`/study/learning-task/${taskID}/publish`);
async publishTask(task: LearningTask): Promise<ResultDomain<LearningTask>> {
const response = await api.put<LearningTask>(`${this.learningTaskPrefix}/status`, task);
return response.data;
},
@@ -78,9 +89,47 @@ export const learningTaskApi = {
* @returns Promise<ResultDomain<LearningProgress>>
*/
async getUserTaskProgress(userID: string, taskID: string): Promise<ResultDomain<LearningProgress>> {
const response = await api.get<LearningProgress>(`/study/learning-task/${taskID}/progress`, {
const response = await api.get<LearningProgress>(`${this.learningTaskPrefix}/task/${taskID}/progress`, {
userID
});
return response.data;
},
/**
* 分配任务给用户
* @param taskID 任务ID
* @param userID 用户ID
* @returns Promise<ResultDomain<TaskUser>>
*/
async assignTaskToUser(taskID: string, userID: string): Promise<ResultDomain<TaskUser>> {
const response = await api.post<TaskUser>(`${this.learningTaskPrefix}/${taskID}/assign`, null, {
params: { userID }
});
return response.data;
},
/**
* 从用户移除任务
* @param taskID 任务ID
* @param userID 用户ID
* @returns Promise<ResultDomain<boolean>>
*/
async removeTaskFromUser(taskID: string, userID: string): Promise<ResultDomain<boolean>> {
const response = await api.delete<boolean>(`${this.learningTaskPrefix}/${taskID}/user/${userID}`);
return response.data;
},
/**
* 用户获取个人任务列表（用户视角）
* @param pageParam 分页参数
* @param filter 过滤条件
* @returns Promise<ResultDomain<LearningTask>>
*/
async getUserTaskPage(pageParam: PageParam, filter?: TaskItemVO): Promise<ResultDomain<LearningTask>> {
const response = await api.post<LearningTask>(`${this.learningTaskPrefix}/users/page`, {
pageParam,
filter
});
return response.data;
}
};

27
schoolNewsWeb/src/apis/system/user.ts
View File

@@ -5,7 +5,7 @@
*/
import { api } from '@/apis/index';
import type { SysUser, SysUserInfo, UserVO, UserDeptRoleVO, SysUserDeptRole, ResultDomain } from '@/types';
import type { SysUser, SysUserInfo, UserVO, UserDeptRoleVO, SysUserDeptRole, ResultDomain, PageParam } from '@/types';
import { useStore } from 'vuex';
const store = useStore();
@@ -48,6 +48,31 @@ export const userApi = {
return response.data;
},
/**
* 获取用户分页列表
* @param pageParam 分页参数
* @param filter 过滤条件
* @returns Promise<ResultDomain<UserVO>>
*/
async getUserPage(pageParam: PageParam, filter?: any): Promise<ResultDomain<UserVO>> {
const response = await api.post<UserVO>('/users/page', {
pageParam,
filter
});
return response.data;
},
/**
* 获取用户分页列表
* @param pageParam 分页参数
* @param filter 过滤条件
* @returns Promise<ResultDomain<SysUser>>
*/
async getUserPage(pageParam: PageParam, filter: SysUser): Promise<ResultDomain<SysUser>> {
const response = await api.post<SysUser>('/users/page', { pageParam, filter });
return response.data;
},
/**
* 创建用户
* @param user 用户信息

3
schoolNewsWeb/src/components/index.ts
View File

@@ -7,3 +7,6 @@ export * from './text';
// 导出 file 文件组件
export * from './file';
// 导出 user 用户组件
export * from './user';

2
schoolNewsWeb/src/components/text/RichTextComponent.vue
View File

@@ -280,7 +280,6 @@ function initQuill() {
// 启用图片/视频缩放模块
imageResize: {
onResizeEnd: () => {
console.log('🔄 图片/视频拉伸结束，强制更新内容');
// 强制触发内容更新
if (quillInstance) {
const html = quillInstance.root.innerHTML;
@@ -321,7 +320,6 @@ function initQuill() {
// 监听图片/视频尺寸变化
quillInstance.root.addEventListener('input', () => {
console.log('📝 input 事件触发，更新内容');
if (!quillInstance) return;
const html = quillInstance.root.innerHTML;

21
schoolNewsWeb/src/types/study/index.ts
View File

@@ -4,7 +4,7 @@
* @since 2025-10-15
*/
import { BaseDTO } from '../base';
import { BaseDTO, SysUser, Resource } from '@/types';
/**
* 课程实体
@@ -213,6 +213,25 @@ export interface TaskResource extends BaseDTO {
orderNum?: number;
}
export interface TaskItemVO extends LearningTask {
courseID?: string;
courseName?: string;
resourceID?: string;
resourceName?: string;
userID?: string;
username?: string;
required?: boolean;
orderNum?: number;
status?: number;
progress?: boolean;
completeTime?: string;
}
export interface TaskVO extends BaseDTO {
learningTask: LearningTask;
taskCourses: TaskItemVO[];
taskResources: TaskItemVO[];
taskUsers: TaskItemVO[];
}
/**
* 任务课程关联实体
*/

17
schoolNewsWeb/src/utils/quill-resize.ts
View File

@@ -31,12 +31,10 @@ export class ImageResize {
this.quill = quill;
this.options = options;
console.log('🔄 ImageResize 模块初始化');
// 等待编辑器完全初始化
setTimeout(() => {
this.initEventListeners();
console.log('✅ ImageResize 事件监听器已添加');
}, 100);
}
@@ -51,14 +49,11 @@ export class ImageResize {
handleClick(e: MouseEvent) {
const target = e.target as HTMLElement;
console.log('🖱️ 点击事件:', target.tagName, target);
// 检查是否点击了图片或视频
if (this.isResizableElement(target)) {
console.log('📷 检测到图片/视频点击，显示缩放控件');
this.showResizer(target as HTMLImageElement | HTMLVideoElement);
} else if (!this.overlay || !this.overlay.contains(target)) {
console.log('❌ 隐藏缩放控件');
this.hideResizer();
}
}
@@ -79,7 +74,6 @@ export class ImageResize {
showResizer(element: HTMLImageElement | HTMLVideoElement) {
this.element = element;
console.log('🎯 显示缩放控件，元素:', element);
// 创建遮罩层
if (!this.overlay) {
@@ -91,7 +85,6 @@ export class ImageResize {
// 更新遮罩层位置和大小
this.updateOverlayPosition(element);
console.log('✅ 缩放控件已显示');
}
private updateOverlayPosition(element: HTMLImageElement | HTMLVideoElement) {
@@ -100,12 +93,6 @@ export class ImageResize {
const rect = element.getBoundingClientRect();
const containerRect = this.quill.root.getBoundingClientRect();
console.log('📐 元素尺寸:', {
width: rect.width,
height: rect.height,
left: rect.left,
top: rect.top
});
this.overlay.style.display = 'block';
this.overlay.style.left = `${rect.left - containerRect.left + this.quill.root.scrollLeft}px`;
@@ -305,7 +292,6 @@ export class ImageResize {
private onResizeEnd() {
if (!this.element) return;
console.log('🔄 拉伸结束，触发HTML更新');
// 调用自定义回调
if (this.options.onResizeEnd) {
@@ -324,19 +310,16 @@ export class ImageResize {
range: null,
source: 'user'
});
console.log('✅ Quill text-change 事件已触发');
}
// 方案2: 触发 DOM 事件
const inputEvent = new Event('input', { bubbles: true });
this.quill.root.dispatchEvent(inputEvent);
console.log('✅ DOM input 事件已触发');
// 方案3: 强制更新 Quill 内容
setTimeout(() => {
if (this.quill.update) {
this.quill.update();
console.log('✅ Quill 内容已更新');
}
}, 0);
}

5
schoolNewsWeb/src/views/admin/manage/study/StudyManagementView.vue
View File

@@ -3,9 +3,7 @@
<h1 class="page-title">学习管理</h1>
<el-tabs v-model="activeTab">
<el-tab-pane label="学习任务发布" name="task-publish">
<TaskPublish />
</el-tab-pane>
<el-tab-pane label="学习记录" name="task-records">
<StudyRecords />
</el-tab-pane>
@@ -16,7 +14,6 @@
<script setup lang="ts">
import { ref } from 'vue';
import { ElTabs, ElTabPane } from 'element-plus';
import TaskPublish from './components/TaskPublish.vue';
import StudyRecords from './components/StudyRecords.vue';
const activeTab = ref('task-publish');

57
schoolNewsWeb/src/views/admin/manage/study/TaskManageView.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<div class="task-management">
<LearningTaskList
v-if="currentView === 'list'"
@add="handleAdd"
@edit="handleEdit"
/>
<LearningTaskAdd
v-else-if="currentView === 'add' || currentView === 'edit'"
:task-i-d="currentTaskId"
@success="handleSuccess"
@cancel="handleCancel"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { LearningTaskList, LearningTaskAdd } from '@/views/task';
import type { LearningTask } from '@/types/study';
defineOptions({
name: 'TaskManageView'
});
type ViewType = 'list' | 'add' | 'edit';
const currentView = ref<ViewType>('list');
const currentTaskId = ref<string>();
function handleAdd() {
currentView.value = 'add';
currentTaskId.value = undefined;
}
function handleEdit(task: LearningTask) {
currentView.value = 'edit';
currentTaskId.value = task.taskID;
}
function handleSuccess() {
currentView.value = 'list';
currentTaskId.value = undefined;
}
function handleCancel() {
currentView.value = 'list';
currentTaskId.value = undefined;
}
</script>
<style lang="scss" scoped>
.task-management {
height: 100%;
background: #f5f7fa;
}
</style>

135
schoolNewsWeb/src/views/admin/manage/study/TaskPublishView.vue
View File

@@ -1,135 +0,0 @@
<template>
<div class="task-publish">
<el-form :model="taskForm" :rules="taskRules" ref="taskFormRef" label-width="120px">
<el-form-item label="任务名称" prop="name">
<el-input v-model="taskForm.name" placeholder="请输入任务名称" />
</el-form-item>
<el-form-item label="任务描述" prop="description">
<el-input
v-model="taskForm.description"
type="textarea"
:rows="4"
placeholder="请输入任务描述"
/>
</el-form-item>
<el-form-item label="任务周期" prop="period">
<el-date-picker
v-model="taskForm.period"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</el-form-item>
<el-form-item label="关联资源" prop="resources">
<el-button @click="showResourceSelector">选择资源</el-button>
<div class="selected-resources" v-if="taskForm.resources.length">
<el-tag
v-for="resource in taskForm.resources"
:key="resource.id"
closable
@close="removeResource(resource)"
>
{{ resource.name }}
</el-tag>
</div>
</el-form-item>
<el-form-item label="任务接受对象" prop="targets">
<el-radio-group v-model="taskForm.targetType">
<el-radio label="dept">按部门</el-radio>
<el-radio label="role">按权限</el-radio>
<el-radio label="user">选人员</el-radio>
</el-radio-group>
<el-button @click="showTargetSelector" style="margin-left: 16px;">
选择对象
</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handlePublish">发布任务</el-button>
<el-button @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElDatePicker, ElButton, ElRadioGroup, ElRadio, ElTag, ElMessage, type FormInstance, type FormRules } from 'element-plus';
const taskFormRef = ref<FormInstance>();
const taskForm = ref({
name: '',
description: '',
period: null as [Date, Date] | null,
resources: [] as any[],
targetType: 'dept',
targets: [] as any[]
});
const taskRules: FormRules = {
name: [
{ required: true, message: '请输入任务名称', trigger: 'blur' }
],
description: [
{ required: true, message: '请输入任务描述', trigger: 'blur' }
],
period: [
{ required: true, message: '请选择任务周期', trigger: 'change' }
]
};
function showResourceSelector() {
// TODO: 显示资源选择器
}
function removeResource(resource: any) {
const index = taskForm.value.resources.indexOf(resource);
if (index > -1) {
taskForm.value.resources.splice(index, 1);
}
}
function showTargetSelector() {
// TODO: 显示对象选择器
}
async function handlePublish() {
if (!taskFormRef.value) return;
try {
await taskFormRef.value.validate();
// TODO: 调用发布任务API
ElMessage.success('任务发布成功');
handleReset();
} catch (error) {
console.error('表单验证失败', error);
}
}
function handleReset() {
taskFormRef.value?.resetFields();
taskForm.value.resources = [];
taskForm.value.targets = [];
}
</script>
<style lang="scss" scoped>
.task-publish {
padding: 20px;
max-width: 800px;
}
.selected-resources {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
</style>

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 {

1061
schoolNewsWeb/src/views/task/LearningTaskAdd.vue Normal file
View File

File diff suppressed because it is too large Load Diff

1447
schoolNewsWeb/src/views/task/LearningTaskList.vue Normal file
View File

File diff suppressed because it is too large Load Diff

2
schoolNewsWeb/src/views/task/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default as LearningTaskAdd } from './LearningTaskAdd.vue';
export { default as LearningTaskList } from './LearningTaskList.vue';