diff --git a/src/views/course/components/addClass.vue b/src/views/course/components/addClass.vue index e1477eb..f449b47 100644 --- a/src/views/course/components/addClass.vue +++ b/src/views/course/components/addClass.vue @@ -16,28 +16,44 @@
发布课表 -
-
- 取消发布课表 -
-
- 短信通知 -
- -
- 下载并打印课表
- +
+ 取消发布课表 +
+
+ 短信通知 +
+ +
+ 下载并打印课表 +
+
- - + + + + + @@ -60,15 +135,17 @@ import { index, sendSms, - destroy - } from '@/api/course/courseContent.js' - import { - index as teacherIndex + destroy, + save as saveContent + } from '@/api/course/courseContent.js' + import { + index as teacherIndex } from "@/api/info/teachers.js" import { show, save } from "@/api/course/index.js" + import { uploads } from '@/api/uploads.js' import imports from "@/views/component/imports.vue" import editClass from "../components/editClass.vue" export default { @@ -112,7 +189,15 @@ prop: 'teacher.introduce', label: '老师简介', align: 'left' - }] + }], + materialDialogVisible: false, // 上传课件模态框的可见性 + selectedCourse: {}, // 当前选中的课程内容 + uploadAction: `${process.env.VUE_APP_UPLOAD_API}`, // 上传文件的URL + uploadHeaders: { + Authorization: `Bearer ${this.$store.getters.token}` + }, // 上传文件时的请求头 + materialFileList: [], // 已上传的课件文件列表 + saving: false // 保存状态 } }, methods: { @@ -141,13 +226,13 @@ show_relation: ['teacher', 'type_detail'] }) this.subjectObj = {} - this.subjectObj = this.base.deepCopy(res) - let teacher = [] - if(res.teacher_detail.length>0){ - res.teacher_detail.map(item=>{ - teacher.push(item.name) - }) - } + this.subjectObj = this.base.deepCopy(res) + let teacher = [] + if(res.teacher_detail.length>0){ + res.teacher_detail.map(item=>{ + teacher.push(item.name) + }) + } this.subjectObj.teacherList = teacher.join(",") }, // 导入 @@ -155,7 +240,7 @@ this.$refs.imports.show() }, refreshData() { - this.$emit('refresh') + this.$emit('refresh') this.getTeachers() this.getCourseDetail() this.getCousreContent() @@ -165,18 +250,18 @@ if (this.list.length === 0) { this.$Message.warning("请先导入课表") return - } - if(flag){ - this.subjectObj.course_content_status = 1 - }else{ - this.subjectObj.course_content_status = 0 + } + if(flag){ + this.subjectObj.course_content_status = 1 + }else{ + this.subjectObj.course_content_status = 0 } save(this.subjectObj).then(res => { this.$Message.success(flag?"发布成功":'已取消发布') this.$emit('refresh') - this.getCourseDetail() - if(flag){ - this.isSendMessage() + this.getCourseDetail() + if(flag){ + this.isSendMessage() } }) }, @@ -207,13 +292,13 @@ this.$refs.editClass.id = id this.$refs.editClass.setTeachers(this.teacher_options) this.$refs.editClass.isShow = true - }, - async getTeachers() { - const res = await teacherIndex({ - page: 1, - page_size: 999 - }) - this.teacher_options = res.data + }, + async getTeachers() { + const res = await teacherIndex({ + page: 1, + page_size: 999 + }) + this.teacher_options = res.data }, deleteList(id) { var that = this; @@ -227,6 +312,80 @@ reject(error) }) }, + uploadMaterial(row) { + this.selectedCourse = row; + this.materialFileList = []; // 清空已上传文件列表 + this.materialDialogVisible = true; + this.$nextTick(() => { + this.$refs.materialUpload.clearFiles(); // 清空上传组件的文件列表 + }); + }, + handleMaterialUploadSuccess(response, file, fileList) { + this.$message.success('课件上传成功'); + this.materialFileList = fileList; + }, + handleMaterialUploadRemove(file, fileList) { + this.materialFileList = fileList; + }, + handleMaterialUploadError(err, file, fileList) { + this.$message.error('课件上传失败: ' + err); + }, + beforeMaterialUpload(file) { + const isLt50M = file.size / 1024 / 1024 < 50; + if (!isLt50M) { + this.$message.error('上传文件大小不能超过 50MB!'); + } + return isLt50M; + }, + downloadMaterial(file) { + window.open(file.url); + }, + formatFileSize(size) { + if (size === 0) return '0 Bytes'; + const k = 1024; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; + const i = Math.floor(Math.log(size) / Math.log(k)); + return parseFloat((size / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; + }, + downloadFile(file) { + // 创建一个临时的a标签来下载文件 + const link = document.createElement('a'); + link.href = file.url; + link.download = file.original_name; + link.target = '_blank'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }, + async saveMaterialFiles() { + if (this.materialFileList.length === 0) { + this.$message.warning('请先上传课件文件'); + return; + } + + this.saving = true; + try { + // 提取文件ID数组 + const fileIds = this.materialFileList.map(file => { + return file.response ? file.response.id : file.id; + }); + + // 只传递课程ID和文件ID数组 + const updateData = { + id: this.selectedCourse.id, + file_ids: fileIds + }; + + await saveContent(updateData); + this.$message.success('课件保存成功'); + this.materialDialogVisible = false; + this.getCousreContent(); // 刷新列表 + } catch (error) { + this.$message.error('保存失败: ' + error.message); + } finally { + this.saving = false; + } + } }, watch: { isShow(newVal) { @@ -255,11 +414,11 @@ html, div { height: auto !important; - } - table th:last-child, - table th:last-child { - display: none; - } + } + table th:last-child, + table th:last-child { + display: none; + } } @@ -298,4 +457,60 @@ margin-right: 10px; } } - + + .material-upload-container { + .course-info { + background: #f5f7fa; + padding: 15px; + border-radius: 4px; + margin-bottom: 20px; + + h4 { + margin: 0 0 10px 0; + color: #303133; + } + + p { + margin: 5px 0; + color: #606266; + } + } + + .upload-section { + margin-bottom: 20px; + + h4 { + margin: 0 0 10px 0; + color: #303133; + } + } + + .material-list { + h4 { + margin: 0 0 10px 0; + color: #303133; + } + } + } + + .file-item { + margin-bottom: 5px; + + &:last-child { + margin-bottom: 0; + } + + .el-link { + font-size: 12px; + + i { + margin-right: 4px; + } + } + } + + .no-files { + color: #909399; + font-size: 12px; + } + diff --git a/src/views/course/components/editClass.vue b/src/views/course/components/editClass.vue index 70dfb31..23377c3 100644 --- a/src/views/course/components/editClass.vue +++ b/src/views/course/components/editClass.vue @@ -66,6 +66,51 @@
+ @@ -95,10 +140,17 @@ theme: '', address: '', introduce: '', + files: [], // 现有课件列表 }, rules: { }, + uploadAction: `${process.env.VUE_APP_UPLOAD_API}`, // 上传文件的URL + uploadHeaders: { + Authorization: `Bearer ${this.$store.getters.token}` + }, // 上传文件时的请求头 + newFileList: [], // 新上传的文件列表 + removedFileIds: [], // 已删除的文件ID列表 } }, created() {}, @@ -120,27 +172,41 @@ submit() { if (this.id) { this.form.id = this.id - }else{ - this.form.id = '' + }else{ + this.form.id = '' } - save({ - ...this.form - }).then(res => { + // 处理课件文件ID + const existingFileIds = this.form.files.map(file => file.id); + const newFileIds = this.newFileList.map(file => { + return file.response ? file.response.id : file.id; + }); + + // 合并现有文件ID和新上传的文件ID，排除已删除的文件ID + const finalFileIds = [...existingFileIds, ...newFileIds].filter(id => + !this.removedFileIds.includes(id) + ); + + const submitData = { + ...this.form, + file_ids: finalFileIds + }; + + save(submitData).then(res => { this.$message({ type: 'success', message: '保存课表成功' - }) - saveTeacher({ - id: this.form.teacher_id, - introduce: this.form.introduce - }).then(res => { - + }) + saveTeacher({ + id: this.form.teacher_id, + introduce: this.form.introduce + }).then(res => { + }) this.isShow = false this.$emit('refresh') // this.active = 1 - }) + }) }, getDetail() { @@ -152,6 +218,53 @@ this.form.introduce = res.teacher.introduce }) }, + // 下载文件 + downloadFile(file) { + const link = document.createElement('a'); + link.href = file.url; + link.download = file.original_name; + link.target = '_blank'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }, + // 删除现有文件 + removeFile(file) { + this.$confirm(`确定要删除课件"${file.original_name}"吗？`, '提示', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning' + }).then(() => { + // 从现有文件列表中移除 + this.form.files = this.form.files.filter(f => f.id !== file.id); + // 添加到已删除文件ID列表 + this.removedFileIds.push(file.id); + this.$message.success('课件删除成功'); + }).catch(() => { + // 用户取消删除 + }); + }, + // 文件上传成功 + handleFileUploadSuccess(response, file, fileList) { + this.$message.success('课件上传成功'); + this.newFileList = fileList; + }, + // 文件上传移除 + handleFileUploadRemove(file, fileList) { + this.newFileList = fileList; + }, + // 文件上传错误 + handleFileUploadError(err, file, fileList) { + this.$message.error('课件上传失败: ' + err); + }, + // 文件上传前验证 + beforeFileUpload(file) { + const isLt50M = file.size / 1024 / 1024 < 50; + if (!isLt50M) { + this.$message.error('上传文件大小不能超过 50MB!'); + } + return isLt50M; + }, }, @@ -162,15 +275,18 @@ this.getDetail() } } else { - this.id = '' - this.form = { - date: '', - period: '', - teacher_id: "", - theme: '', - address: '', - introduce: '', + this.id = '' + this.form = { + date: '', + period: '', + teacher_id: "", + theme: '', + address: '', + introduce: '', + files: [], // 重置课件列表 } + this.newFileList = [] // 重置新上传文件列表 + this.removedFileIds = [] // 重置已删除文件ID列表 this.$refs['dialog'].reset() } }, @@ -180,5 +296,49 @@ + .existing-files { + margin-bottom: 20px; + + h5 { + margin: 0 0 10px 0; + color: #303133; + font-size: 14px; + } + + .file-item { + display: flex; + align-items: center; + margin-bottom: 8px; + padding: 8px; + background: #f5f7fa; + border-radius: 4px; + + &:last-child { + margin-bottom: 0; + } + + .el-link { + flex: 1; + font-size: 12px; + + i { + margin-right: 4px; + } + } + } + } + + .upload-section { + h5 { + margin: 0 0 10px 0; + color: #303133; + font-size: 14px; + } + + .el-upload__tip { + font-size: 12px; + color: #909399; + margin-top: 5px; + } + } +