From 710e59cadf2d3564dd44e93f790cc55b17906df5 Mon Sep 17 00:00:00 2001 From: 18571350067 Date: Fri, 24 Dec 2021 11:01:49 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AF=BE=E4=BB=B6=E4=B8=8A=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/course/CoursewareAddOrUpdate.vue | 323 ++++++++++++++++----- src/views/course/CoursewarePreview.vue | 9 +- 2 files changed, 262 insertions(+), 70 deletions(-) diff --git a/src/views/course/CoursewareAddOrUpdate.vue b/src/views/course/CoursewareAddOrUpdate.vue index 088e2b2..9b9105b 100644 --- a/src/views/course/CoursewareAddOrUpdate.vue +++ b/src/views/course/CoursewareAddOrUpdate.vue @@ -4,9 +4,10 @@ 返回 保存 - + +
@@ -45,29 +46,30 @@ - --> - + + -->
课件大小：      MB

- 视频上传：  + 视频上传：  - {{fileUpload.uploadButtonText}} + {{this.uploadButtonText}}    
+
- +
课件名称：  - +
课件分类：  @@ -78,18 +80,39 @@ 添加分类 - - - +
课件大小：  -     MB +     MB

- 文件上传：  + 文件上传：  - {{fileUpload.uploadButtonText}} + {{this.uploadButtonText}}    
@@ -99,8 +122,109 @@ - - Content of Tab Pane 3 + +
+ +
+ 课件名称：  + +
+
+ 课件分类：  + + {{ (i + 9).toString(36) + i }} + + + 添加分类 + + + +
+
课件大小：  +     MB +
+
+ 连接地址：  + +
+ +
+ + + +
+ +
+ 课件名称：  + +
+
+ 课件分类：  + + {{ (i + 9).toString(36) + i }} + + + 添加分类 + + + +
+
课件大小：  + +
+
+ 连接地址：  + +
+ +
+ @@ -119,32 +243,34 @@ import { dictionaryDropDown } from '@/api/sys/dictionaryItem' export default { data() { return { + successOssFile: [], + uploadLoading: false, // 控制 选择文件 按钮是否转圈 + uploadButtonText: '选择文件', + parentTabKey: '1', //顶级选项卡， 文件上传/视频服务器连接/第三方连接 + videoPath: [], //用于存放视频路径 fileUpload: { visible: false, - textForm: {}, //文本上传表单 + tabkey: '1', videoForm: { //视频上传表单 sizeStr: '0', //视频大小 - videoPath: [], //用于存放视频路径 + type: '1', + videoPath: [], }, - parentTabKey: '1', //顶级选项卡， 文件上传/视频服务器连接/第三方连接 - tabkey: '1', - uploadButtonText: '选择文件', - successOssFile: [], - uploadLoading: false, // 控制 选择文件 按钮是否转圈 - columns: [ - { - title: '标签名', - dataIndex: 'name', - width: '20%' + textForm: { + //文本上传表单 + type: '2', // 用于表示tabkey 1-视频上传 2-文本上传 3-视频服务连接 4-第三方连接 + videoPath: [], }, - ], - // loadData: parameter => { - // return menuList(Object.assign(parameter, this.queryParam)).then((res) => { - // const menuList = listToTree(res.data, [], rootParentId) - // return menuList - // }) - // } + }, + videoServerLink: { + //视频服务器连接 + type: '3', + }, + thirdAddress: { + //第三方表单 + sizeStr:'', + type: '4', }, } }, @@ -164,14 +290,21 @@ export default { //顶级标签页 parentcallback(key) { console.log(key) - this.fileUpload = { videoForm: [] } + this.fileUpload.videoForm = {} + this.fileUpload.textForm = {} + this.videoPath = [] //置空文件 this.parentTabKey = key }, //作用于子标签页 callback(key) { console.log(key) - this.fileUpload = { videoForm: [] } //清空视频上传的form表单 - this.tabKey = key //等于当前的Key + + this.fileUpload.videoForm = {} + this.fileUpload.textForm = {} + this.videoPath = [] //置空文件 + + this.successOssFile = this.successOssFile.splice(0, this.successOssFile.length) + this.fileUpload.tabkey = key //等于当前的Key }, //获取Tonken @@ -184,13 +317,14 @@ export default { beforeUpload(file) { //文件类型 (后缀) var suffix = file.name.substring(file.name.lastIndexOf('.') + 1) - if (this.fileUpload.tabkey == 1 && suffix != 'mp4') { + if (this.fileUpload.tabkey == '1' && suffix != 'mp4') { return this.$message.error('文件类型必须是mp4') } + console.log('tabkey', this.fileUpload.tabkey) //告知用户是否正在上传 - this.fileUpload.uploadLoading = true - this.fileUpload.uploadButtonText = '上传中...' + this.uploadLoading = true + this.uploadButtonText = '上传中...' //处理视频上传 const data = new FormData() @@ -205,14 +339,14 @@ export default { axios .post(ossUpload(), data, { headers: header }) .then((res) => { - this.fileUpload.uploadLoading = false - this.fileUpload.uploadButtonText = '选择文件' + this.uploadLoading = false + this.uploadButtonText = '选择文件' if (res.data.code === 200) { - this.$message.success('视频上传成功！') + this.$message.success('上传成功！') res.data.uuid = file.uid res.data.size = file.size - this.fileUpload.successOssFile.push(res.data) + this.successOssFile.push(res.data) //刷新文件大小 this.refreshFileSize() @@ -223,6 +357,7 @@ export default { }) .catch((err) => { this.$message.error(err) + this.uploadButtonText = '选择文件' }) return false @@ -230,10 +365,11 @@ export default { //刷新大小 refreshFileSize() { + if (this.fileUpload.tabkey == '1' || this.fileUpload.tabkey == '2') { this.fileUpload.videoForm.size = 0 - for (let i = 0; i < this.fileUpload.successOssFile.length; i++) { + for (let i = 0; i < this.successOssFile.length; i++) { //读取文件大小 - let fileSize = this.fileUpload.successOssFile[i].size + let fileSize = this.successOssFile[i].size //视频转换成MB var videoSize = parseFloat(fileSize) / 1024 / 1024 @@ -242,14 +378,15 @@ export default { this.fileUpload.videoForm.size = this.fileUpload.videoForm.size + parseFloat(videoSize) } this.fileUpload.videoForm.sizeStr = this.fileUpload.videoForm.size.toFixed(2) + } }, //删除已上传的视频 deleteVideo(file) { // 删除元素 - for (let i = 0; i < this.fileUpload.successOssFile.length; i++) { - if (this.fileUpload.successOssFile[i].uuid == file.uid) { - this.fileUpload.successOssFile.splice(i, 1) + for (let i = 0; i < this.successOssFile.length; i++) { + if (this.successOssFile[i].uuid == file.uid) { + this.successOssFile.splice(i, 1) break } } @@ -264,27 +401,31 @@ export default { //保存 save() { - - console.log("课程IDID ID-------",this.$route.query.courseId); - //视频赋给表单里面的字段 - this.fileUpload.successOssFile.forEach((item, index) => { - this.fileUpload.videoForm.videoPath.push(item.url) + this.successOssFile.forEach((item, index) => { + this.videoPath.push(item.url) }) - console.log(this.fileUpload.videoForm.videoPath.toString()) - //转JSON - this.fileUpload.videoForm.videoPath = this.fileUpload.videoForm.videoPath.toString() + if (this.parentTabKey == '2') this.videoPath.push(this.videoServerLink.videoUrl) + if (this.parentTabKey == '3') this.videoPath.push(this.thirdAddress.videoUrl) - //给课程ID - this.fileUpload.videoForm.courseId = this.$route.query.courseId - console.log(this.fileUpload.videoForm) + //转JSON + this.videoPath = this.videoPath.toString() let from - if (this.fileUpload.parentTabKey == '1' && this.fileUpload.tabkey == '1') { - //保存视频上传 + if (this.parentTabKey == '1' && this.fileUpload.tabkey == '1') { from = this.videoFormV() - if (typeof form == 'boolean' && !form) return + if (typeof from == 'boolean' && !from) return + } else if (this.parentTabKey == '1' && this.fileUpload.tabkey == '2') { + from = this.textFormV() + if (typeof from == 'boolean' && !from) return + } else if (this.parentTabKey == '2') { + console.log(this.videoServerLink) + from = this.videoServerLinkV() + if (typeof from == 'boolean' && !from) return + } else if (this.parentTabKey == '3') { + from = this.thirdAddressV() + if (typeof from == 'boolean' && !from) return } //提交保存请求 @@ -305,16 +446,68 @@ export default { if (!this.fileUpload.videoForm.name || this.fileUpload.videoForm.name === '') { this.$message.error('课件名称不能为空!') return false - } else if (this.fileUpload.videoForm.videoPath.length == 0) { + } else if (this.videoPath.length == 0) { this.$message.error('请上传课件文件！') return false } + //给课程ID + this.fileUpload.videoForm.courseId = this.$route.query.courseId + this.fileUpload.videoForm.videoPath = this.videoPath let form = {} form = this.fileUpload.videoForm - console.log('111111', form) return form }, + + //文本上传 + textFormV() { + if (!this.fileUpload.textForm.name || this.fileUpload.textForm.name === '') { + this.$message.error('课件名称不能为空!') + return false + } + + //给课程ID + this.fileUpload.textForm.courseId = this.$route.query.courseId + this.fileUpload.textForm.type = this.fileUpload.tabkey + this.fileUpload.textForm.videoPath = this.videoPath + console.log('aaaaaa', this.fileUpload.textForm) + let form = {} + form = this.fileUpload.textForm + return form + }, + + //视频服务器连接 + videoServerLinkV() { + if (!this.videoServerLink.name || this.videoServerLink.name === '') { + this.$message.error('课件名称不能为空!') + return false + } + + //给课程ID + this.videoServerLink.courseId = this.$route.query.courseId + this.videoServerLink.videoPath = this.videoPath + console.log(this.videoServerLink) + + let form = {} + form = this.videoServerLink + return form + }, + + //视频服务第三方连接 + thirdAddressV() { + if (!this.thirdAddress.name || this.thirdAddress.name === '') { + this.$message.error('课件名称不能为空!') + return false + } + + //给课程ID + this.thirdAddress.courseId = this.$route.query.courseId; + this.thirdAddress.videoPath = this.videoPath; + + let form = {} + form = this.thirdAddress; + return form; + }, }, } diff --git a/src/views/course/CoursewarePreview.vue b/src/views/course/CoursewarePreview.vue index 086f685..41e5637 100644 --- a/src/views/course/CoursewarePreview.vue +++ b/src/views/course/CoursewarePreview.vue @@ -1,7 +1,7 @@