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

2021-12-25 10:58:01 +08:00 · 2021-12-25 10:58:01 +08:00 · dd5b3579ec
parent 710e59cadf
commit dd5b3579ec
4 changed files with 185 additions and 48 deletions
--- a/src/views/course/CoursewareAddOrUpdate.vue
+++ b/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">
@ -216,7 +216,7 @@
                  </a-modal> -->
            </div>
            <div style="margin-bottom: 30px">课件大小：&nbsp;
-              <a-time-picker placeholder="课件时长" :minute-step="1" :second-step="1" v-model="thirdAddress.sizeStr"/>
+              <a-time-picker placeholder="课件时长" :minute-step="1" :second-step="1" v-model="thirdAddress.sizeStr" />
            </div>
            <div style="margin-bottom: 30px">
              连接地址：&nbsp;
@ -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: '选择文件',
@ -269,13 +271,66 @@ export default {
      },
      thirdAddress: {
        //第三方表单
-        sizeStr:'',
+        sizeStr: '',
        type: '4',
      },
    }
  },
  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,23 +422,44 @@ export default {
    //刷新大小
    refreshFileSize() {
      if (this.fileUpload.tabkey == '1' || this.fileUpload.tabkey == '2') {
-      this.fileUpload.videoForm.size = 0
-      for (let i = 0; i < this.successOssFile.length; i++) {
-        //读取文件大小
-        let fileSize = this.successOssFile[i].size
+        this.fileUpload.videoForm.size = 0 //非编辑则不清空
+        for (let i = 0; i < this.successOssFile.length; i++) {
+          //读取文件大小
+          let fileSize = this.successOssFile[i].size

-        //视频转换成MB
-        var videoSize = parseFloat(fileSize) / 1024 / 1024
+          //视频转换成MB
+          var videoSize = parseFloat(fileSize) / 1024 / 1024

-        //保留两位小数
-        this.fileUpload.videoForm.size = this.fileUpload.videoForm.size + parseFloat(videoSize)
-      }
-      this.fileUpload.videoForm.sizeStr = this.fileUpload.videoForm.size.toFixed(2)
+          //保留两位小数
+          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.videoPath = this.videoPath;
+      this.thirdAddress.courseId = this.$route.query.courseId
+      this.thirdAddress.videoPath = this.videoPath

+      console.log(this.thirdAddress)
      let form = {}
-      form = this.thirdAddress;
-      return form;
+      form = this.thirdAddress
+      return form
    },
  },
 }
--- a/src/views/course/CoursewareList.vue
+++ b/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>
@ -36,7 +36,7 @@ export default {
    return {
      queryParam: { id: this.$route.query.id },

-      loadData:(parameter) => {
+      loadData: (parameter) => {
        return getCoursewareListByCourseId(Object.assign(parameter, this.queryParam)).then((res) => {
          return res
        })
@ -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: {} })
@ -87,13 +92,12 @@ export default {
    },

    //课件预览
-    detail(record){
+    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>
--- a/src/views/course/CoursewarePreview.vue
+++ b/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,12 +97,14 @@ export default {
      queryParam: { coursewareId: this.$route.query.coursewareId },
      courseware: [], //课件详情
      question: [], //课中检测
+      coursewareName: '',
+      path: '', //课件下载路径
      value: 'a',
      playerOptions: {
        // width: 800,
        height: '650',
        fluid: false,
-        autoplay: false,//进入时是否开始自动播放
+        autoplay: false, //进入时是否开始自动播放
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0], //设置倍速
@ -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)
-      console.log("------------",this.courseware);
+      if (this.courseware.videoList.length > 0) {
+        //课件视频展现
+        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

-      // 加载视频
-      this.playerOptions.sources = []
-      this.playerOptions.sources.push({ type: 'video/mp4', src: path })
+      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>
--- a/src/views/course/question/QuestionAdd.vue
+++ b/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