课件预览支持非视频课件下载

src/views/course/CoursewareAddOrUpdate.vue

@@ -8,7 +8,7 @@
       <a-tab-pane key="1" tab="文件上传">
         <a-tabs :default-active-key="fileUpload.tabkey" @change="callback">
 
-          <a-tab-pane key="1" tab="视频上传">
+          <a-tab-pane key="1" tab="视频上传" :disabled="fileUpload.videoForm.disabled">
             <div style="background: #ececec; padding: 30px">
               <a-card title="视频上传" :bordered="false" style="width: 100%">
                 <div style="margin-bottom: 30px">
@@ -64,7 +64,7 @@
             </div>
           </a-tab-pane>
 
-          <a-tab-pane key="2" tab="文本上传">
+          <a-tab-pane key="2" tab="文本上传" :disabled="fileUpload.textForm.disabled">
             <div style="background: #ececec; padding: 30px">
               <a-card title="文本上传" :bordered="false" style="width: 100%">
                 <div style="margin-bottom: 30px">
@@ -106,7 +106,7 @@
                   </a-modal> -->
                 </div>
                 <div>课件大小：&nbsp;
-                  <a-input-number v-model="fileUpload.textForm.sizeStr" :min="0" />&nbsp;&nbsp;&nbsp; MB
+                  <a-input-number :disabled="true" v-model="fileUpload.textForm.sizeStr" :min="0" />&nbsp;&nbsp;&nbsp; MB
                 </div>
                 <br />
                 <div>
@@ -122,7 +122,7 @@
         </a-tabs>
       </a-tab-pane>
 
-      <a-tab-pane key="2" tab="视频服务器链接">
+       <a-tab-pane key="2" tab="视频服务器链接" :disabled="true">  <!-- videoServerLink.disabled -->
         <div style="background: #ececec; padding: 30px">
           <a-card title="视频服务器链接" :bordered="false" style="width: 100%">
             <div style="margin-bottom: 30px">
@@ -174,7 +174,7 @@
         </div>
 
       </a-tab-pane>
-      <a-tab-pane key="3" tab="第三方连接">
+      <a-tab-pane key="3" tab="第三方连接" :disabled="true">  <!-- thirdAddress.disabled -->
         <div style="background: #ececec; padding: 30px">
           <a-card title="第三方连接" :bordered="false" style="width: 100%">
             <div style="margin-bottom: 30px">
@@ -232,7 +232,7 @@
 
 
 <script>
-import { STable } from '@/components'
+import { coursewareDeatil } from '@/api/course/courseware'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import storage from 'store'
 import axios from 'axios'
@@ -243,6 +243,8 @@ import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
 export default {
   data() {
     return {
+      courseware: {}, //课件详情
+      queryParam: { coursewareId: this.$route.query.coursewareId }, //编辑传参
       successOssFile: [],
       uploadLoading: false, // 控制 选择文件 按钮是否转圈
       uploadButtonText: '选择文件',
@@ -275,7 +277,60 @@ export default {
     }
   },
   components: {},
-  created() {},
+  created() {
+    //判断是否是编辑
+    if (this.queryParam.coursewareId) {
+      let parameter = {}
+      coursewareDeatil(Object.assign(parameter, this.queryParam)).then((res) => {
+        this.courseware = res.data
+
+        //编辑只能更改所在的位置的
+        this.fileUpload.disabled = true
+        this.fileUpload.videoForm.disabled = true
+        this.fileUpload.textForm.disabled = true
+        this.videoServerLink.disabled = true
+        this.thirdAddress.disabled = true
+
+        //分配到各自的提交模块
+        if (this.courseware.type == '1' || this.courseware.type == '2') {
+          this.parentTabKey = '1'
+          if (this.courseware.type == '1') {
+            this.fileUpload.tabkey = '1'
+            this.fileUpload.videoForm = this.courseware
+            this.fileUpload.videoForm.disabled = false
+            this.courseware.videoList.forEach(element => {
+              let successOssFile_ = {};
+              successOssFile_["id"] = element.id;
+              successOssFile_["uid"] = element.id;
+              successOssFile_["uuid"] = element.id;
+              successOssFile_["code"] = 200;
+              successOssFile_["name"] = element.name;
+              successOssFile_["url"] = element.path;
+              successOssFile_["size"] = element.size;
+              this.successOssFile.push(successOssFile_);
+            });
+            console.log('11------', this.successOssFile)
+          } else {
+            this.fileUpload.tabkey = '2'
+            this.fileUpload.textForm = this.courseware
+            this.fileUpload.textForm.disabled = false
+          }
+        }
+
+        if (this.courseware.type == '3') {
+          this.parentTabKey = '2'
+          this.videoServerLink = this.courseware
+          this.videoServerLink.disabled = false
+        }
+
+        if (this.courseware.type == '4') {
+          this.parentTabKey = '3'
+          this.thirdAddress = this.courseware
+          this.thirdAddress.disabled = false
+        }
+      })
+    }
+  },
   methods: {
     //返回
     goback() {
@@ -297,13 +352,12 @@ export default {
     },
     //作用于子标签页
     callback(key) {
-      console.log(key)
-
       this.fileUpload.videoForm = {}
       this.fileUpload.textForm = {}
       this.videoPath = [] //置空文件
 
-      this.successOssFile = this.successOssFile.splice(0, this.successOssFile.length)
+      this.successOssFile = this.successOssFile.splice(this.successOssFile.length, 0) //清空数组
+      console.log('清除后的文件', this.successOssFile)
       this.fileUpload.tabkey = key //等于当前的Key
     },
 
@@ -321,7 +375,6 @@ export default {
         return this.$message.error('文件类型必须是mp4')
       }
 
-      console.log('tabkey', this.fileUpload.tabkey)
       //告知用户是否正在上传
       this.uploadLoading = true
       this.uploadButtonText = '上传中...'
@@ -346,10 +399,13 @@ export default {
 
             res.data.uuid = file.uid
             res.data.size = file.size
+            console.log('文件大小---', file.size)
             this.successOssFile.push(res.data)
 
             //刷新文件大小
             this.refreshFileSize()
+
+            console.log('上传之后的文件', this.successOssFile)
           } else {
             this.$message.error(res.data.msg)
             this.$refs.inputFile.value = ''
@@ -366,7 +422,7 @@ export default {
     //刷新大小
     refreshFileSize() {
       if (this.fileUpload.tabkey == '1' || this.fileUpload.tabkey == '2') {
-      this.fileUpload.videoForm.size = 0
+        this.fileUpload.videoForm.size = 0 //非编辑则不清空
         for (let i = 0; i < this.successOssFile.length; i++) {
           //读取文件大小
           let fileSize = this.successOssFile[i].size
@@ -376,13 +432,34 @@ export default {
 
           //保留两位小数
           this.fileUpload.videoForm.size = this.fileUpload.videoForm.size + parseFloat(videoSize)
+
+          //如果是编辑
+          if (this.queryParam.coursewareId) {
+            //在原基础上增加 
+            if (this.fileUpload.tabkey == '1' && this.parentcallback == '1') {
+              this.fileUpload.videoForm.size =
+                this.fileUpload.videoForm.size + parseFloat(videoSize) + parseFloat(this.fileUpload.videoForm.sizeStr)
             }
+            if (this.fileUpload.tabkey == '2' && this.parentcallback == '1') {
+              this.fileUpload.textForm.size =
+                this.fileUpload.videoForm.size + parseFloat(videoSize) + parseFloat(this.fileUpload.textForm.sizeStr)
+            }
+          }
+        }
+
+        if (this.fileUpload.tabkey == '1' && this.parentTabKey == '1') {
           this.fileUpload.videoForm.sizeStr = this.fileUpload.videoForm.size.toFixed(2)
         }
+
+        if (this.fileUpload.tabkey == '2' && this.parentTabKey == '1') {
+          this.fileUpload.textForm.sizeStr = this.fileUpload.videoForm.size.toFixed(2)
+        }
+      }
     },
 
     //删除已上传的视频
     deleteVideo(file) {
+      console.log('deleteVideo - file:{}', file)
       // 删除元素
       for (let i = 0; i < this.successOssFile.length; i++) {
         if (this.successOssFile[i].uuid == file.uid) {
@@ -501,12 +578,13 @@ export default {
       }
 
       //给课程ID
-      this.thirdAddress.courseId = this.$route.query.courseId;
+      this.thirdAddress.courseId = this.$route.query.courseId
-      this.thirdAddress.videoPath = this.videoPath;
+      this.thirdAddress.videoPath = this.videoPath
 
+      console.log(this.thirdAddress)
       let form = {}
-      form = this.thirdAddress;
+      form = this.thirdAddress
-      return form;
+      return form
     },
   },
 }

src/views/course/CoursewareList.vue

@@ -11,7 +11,7 @@
       <template slot="action" slot-scope="text, record">
         <a href="javascript:;" @click="detail(record)">预览</a>
         <a-divider type="vertical" />
-        <a href="javascript:;" @click="courseWare(record)">重新上传</a>
+        <a href="javascript:;" @click="edit(record)">重新上传</a>
         <a-divider type="vertical" />
         <a-popconfirm title="是否删除?" @confirm="() => del(record)">
           <a href="javascript:;">删除</a>
@@ -62,6 +62,11 @@ export default {
       this.$router.push({ path: '/course/CoursewareAddOrUpdate', query: { courseId: this.$route.query.id } })
     },
 
+    //编辑
+    edit(record) {
+      this.$router.push({ path: '/course/CoursewareAddOrUpdate', query: { coursewareId: record.id,courseId: this.$route.query.id,type: record.type } })
+    },
+
     //返回
     goback() {
       this.$router.push({ path: '/course/CourseList', query: {} })
@@ -90,10 +95,9 @@ export default {
     detail(record) {
       this.$router.push({
         path: '/course/CoursewarePreview',
-        query: { coursewareId: record.id, courseId: this.$route.query.id}
+        query: { coursewareId: record.id, courseId: this.$route.query.id },
       })
-    }
+    },
-
   },
 }
 </script>

src/views/course/CoursewarePreview.vue

@@ -5,13 +5,25 @@
       <a-button size="small" @click="goback">返回</a-button>
     </template>
 
-    <div style="width:100%">
+    <div style="width:100%;height:600px">
       <a-row class="left">
         <a-col :span="14">
           <!-- 这里面对应放视频 -->
-          <div>
+          <div v-if="courseware.type == '1'">
             <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true"></video-player>
           </div>
+
+          <p v-if="courseware.type == '2'" class="text">课件名称：《{{coursewareName}}》</p>
+          <div v-if="courseware.type == '2'" style="margin-left: 30%;margin-top:15%">
+            <a-card class="card">
+              <div>
+                <a-button type="primary" icon="arrow-down" @click="download" class="down">
+                  课件下载
+                </a-button>
+              </div>
+            </a-card>
+          </div>
+
         </a-col>
         <a-col :span="10" style="flex-shrink: 0;">
           <div>
@@ -19,7 +31,8 @@
               <a-tab-pane key="1" tab="课件" style="font-weight: bold">
                 <a-radio-group v-model="value" @change="onChange">
                   <div class="coursewarePath">
-                    <p style="font-weight: bold; margin-bottom:30px" v-for="(item,index) in courseware.videoList" :key="index" :class="{ active_color: index == isactive }" @click="play(item.path,index)">{{item.name}}</p>
+                    <p style="font-weight: bold; margin-bottom:30px" v-for="(item,index) in courseware.videoList" :key="index" :class="{ active_color: index == isactive }" @click="play(item.path,index,item.name)">
+                      {{item.name}}</p>
                   </div>
                 </a-radio-group>
               </a-tab-pane>
@@ -84,6 +97,8 @@ export default {
       queryParam: { coursewareId: this.$route.query.coursewareId },
       courseware: [], //课件详情
       question: [], //课中检测
+      coursewareName: '',
+      path: '', //课件下载路径
       value: 'a',
       playerOptions: {
         // width: 800,
@@ -109,13 +124,20 @@ export default {
     coursewareDeatil(Object.assign(parameter, this.queryParam)).then((res) => {
       //课件内容
       this.courseware = res.data
-      if (this.courseware.videoList.length > 0) this.play(this.courseware.videoList[0].path, 0)
+      if (this.courseware.videoList.length > 0) {
-      console.log("------------",this.courseware);
+        //课件视频展现
+        if (this.courseware.type == '1') this.play(this.courseware.videoList[0].path, 0)
+
+        //文本下载
+        if (this.courseware.type == '2') {
+          this.coursewareName = this.courseware.videoList[0].name
+          this.path = this.courseware.videoList[0].path
+        }
+      }
 
       //课中检测必选题
       testing(Object.assign(parameter, this.queryParam)).then((res1) => {
         this.question = res1.data
-        console.log('question-------', this.question)
       })
     })
   },
@@ -125,13 +147,23 @@ export default {
       this.$router.push({ path: '/course/CoursewareList', query: { id: this.$route.query.courseId } })
     },
 
-    //选择播放的文件
+    //选择播放的文件/下载的文件
-    play(path, index) {
+    play(path, index, name) {
       this.isactive = index
 
+      if (this.courseware.type == '2') {
+        this.coursewareName = name
+        this.path = path
+      } else {
         // 加载视频
         this.playerOptions.sources = []
         this.playerOptions.sources.push({ type: 'video/mp4', src: path })
+      }
+    },
+
+    //下载课件
+    download() {
+      window.location.href = this.path //文件下载
     },
 
     //控制显示视频还是课中检测
@@ -194,4 +226,29 @@ export default {
   margin-left: 70px;
   margin-top: -20px;
 }
+.text {
+  font-size: 15px;
+  white-space: pre-wrap;
+  word-break: normal;
+  word-wrap: break-word;
+  text-align: center;
+  margin-left: 20px;
+}
+.card {
+  width: 300px;
+  height: 200px;
+  position: relative;
+  width: 350px;
+  height: 160px;
+}
+.down {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+  padding: 6px 10px;
+  border-radius: 3px;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
 </style>

src/views/course/question/QuestionAdd.vue

@@ -194,9 +194,7 @@ export default {
           this.radio.disabled = false
         } else if (this.tabKey == '2') {
           this.multiselect = res.data
-          console.log('c---------------s------------', this.multiselect)
           if (this.multiselect.rightAnswers) this.checkedValues = this.multiselect.rightAnswers.split('')
-          console.log('arr', this.checkedValues)
           this.multiselect.disabled = false
         } else if (this.tabKey == '3') {
           this.estimate = res.data