课件上传

src/views/course/CoursewareAddOrUpdate.vue

@@ -4,9 +4,10 @@
       <a-button @click="goback">返回</a-button>
       <a-button type="primary" @click="save">保存</a-button>
     </template>
-    <a-tabs type="card" :default-active-key="fileUpload.parentTabKey" @change="parentcallback">
+    <a-tabs type="card" :default-active-key="parentTabKey" @change="parentcallback">
       <a-tab-pane key="1" tab="文件上传">
         <a-tabs :default-active-key="fileUpload.tabkey" @change="callback">
+
           <a-tab-pane key="1" tab="视频上传">
             <div style="background: #ececec; padding: 30px">
               <a-card title="视频上传" :bordered="false" style="width: 100%">
@@ -45,29 +46,30 @@
                           </a-popconfirm>
                         </template>
                       </span>
-                    </s-table> -->
+                    </s-table>
-                  </a-modal>
+                  </a-modal> -->
                 </div>
                 <div>课件大小：&nbsp;
                   <a-input :disabled="true" :value="fileUpload.videoForm.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
                 </div>
                 <br />
                 <div>
-                  视频上传：&nbsp; <a-upload list-type="picture" :default-file-list="fileUpload.successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo" :disabled="fileUpload.uploadLoading">
+                  视频上传：&nbsp; <a-upload list-type="picture" :default-file-list="this.successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo" :disabled="this.uploadLoading">
                     <a-button>
-                      <a-icon type="upload" /> {{fileUpload.uploadButtonText}}
+                      <a-icon type="upload" /> {{this.uploadButtonText}}
                     </a-button>&nbsp;&nbsp;&nbsp;
                   </a-upload>
                 </div>
               </a-card>
             </div>
           </a-tab-pane>
+
           <a-tab-pane key="2" tab="文本上传">
             <div style="background: #ececec; padding: 30px">
-              <a-card title="文件上传" :bordered="false" style="width: 100%">
+              <a-card title="文本上传" :bordered="false" style="width: 100%">
                 <div style="margin-bottom: 30px">
                   课件名称：&nbsp;
-                  <a-input placeholder="课件名称" v-model="fileUpload.videoForm.name" style="width: 40%" />
+                  <a-input placeholder="课件名称" v-model="fileUpload.textForm.name" style="width: 40%" />
                 </div>
                 <div style="margin-bottom: 30px; margin-top: 20px">
                   课件分类：&nbsp;<a-select mode="multiple" style="width: 30%" placeholder="请选择分类">
@@ -78,18 +80,39 @@
                   <a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button>
 
                   <!-- 课件分类弹框 -->
-                  <a-modal v-model="fileUpload.visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
+                  <!-- <a-modal v-model="fileUpload.visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
-
+                    <s-table ref="table" :rowKey="(record) => record.id" :columns="fileUpload.columns" :alert="false" :data="loadData" :showPagination="false" :expandRowByClick="true">
-                  </a-modal>
+                      <span slot="type" slot-scope="text, record">
+                        <a-tag color="cyan" v-if="text === 0">
+                          {{ record.type | typeFilter }}
+                        </a-tag>
+                        <a-tag color="blue" v-if="text === 1">
+                          {{ record.type | typeFilter }}
+                        </a-tag>
+                        <a-tag color="purple" v-if="text === 2">
+                          {{ record.type | typeFilter }}
+                        </a-tag>
+                      </span>
+                      <span slot="action" slot-scope="text, record">
+                        <template>
+                          <a v-if="hasPerm('sys:menu:edit')" @click="$refs.menuForm.edit(record)">编辑</a>
+                          <a-divider type="vertical" v-if="hasPerm('sys:menu:edit')" />
+                          <a-popconfirm v-if="hasPerm('sys:menu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
+                            <a>删除</a>
+                          </a-popconfirm>
+                        </template>
+                      </span>
+                    </s-table>
+                  </a-modal> -->
                 </div>
                 <div>课件大小：&nbsp;
-                  <a-input :disabled="true" :value="fileUpload.videoForm.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
+                  <a-input-number v-model="fileUpload.textForm.sizeStr" :min="0" />&nbsp;&nbsp;&nbsp; MB
                 </div>
                 <br />
                 <div>
-                  文件上传：&nbsp; <a-upload list-type="picture" :default-file-list="fileUpload.successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo" :disabled="fileUpload.uploadLoading">
+                  文件上传：&nbsp; <a-upload list-type="picture" :default-file-list="this.successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo" :disabled="this.uploadLoading">
                     <a-button>
-                      <a-icon type="upload" /> {{fileUpload.uploadButtonText}}
+                      <a-icon type="upload" /> {{this.uploadButtonText}}
                     </a-button>&nbsp;&nbsp;&nbsp;
                   </a-upload>
                 </div>
@@ -99,8 +122,109 @@
         </a-tabs>
       </a-tab-pane>
 
-      <a-tab-pane key="2" tab="视频服务器链接"> </a-tab-pane>
+      <a-tab-pane key="2" tab="视频服务器链接">
-      <a-tab-pane key="3" tab="第三方连接"> Content of Tab Pane 3 </a-tab-pane>
+        <div style="background: #ececec; padding: 30px">
+          <a-card title="视频服务器链接" :bordered="false" style="width: 100%">
+            <div style="margin-bottom: 30px">
+              课件名称：&nbsp;
+              <a-input placeholder="课件名称" v-model="videoServerLink.name" style="width: 40%" />
+            </div>
+            <div style="margin-bottom: 30px; margin-top: 20px">
+              课件分类：&nbsp;<a-select mode="multiple" style="width: 30%" placeholder="请选择分类">
+                <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
+                  {{ (i + 9).toString(36) + i }}
+                </a-select-option>
+              </a-select>
+              <a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button>
+
+              <!-- 课件分类弹框 -->
+              <!-- <a-modal v-model="fileUpload.visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
+                    <s-table ref="table" :rowKey="(record) => record.id" :columns="fileUpload.columns" :alert="false" :data="loadData" :showPagination="false" :expandRowByClick="true">
+                      <span slot="type" slot-scope="text, record">
+                        <a-tag color="cyan" v-if="text === 0">
+                          {{ record.type | typeFilter }}
+                        </a-tag>
+                        <a-tag color="blue" v-if="text === 1">
+                          {{ record.type | typeFilter }}
+                        </a-tag>
+                        <a-tag color="purple" v-if="text === 2">
+                          {{ record.type | typeFilter }}
+                        </a-tag>
+                      </span>
+                      <span slot="action" slot-scope="text, record">
+                        <template>
+                          <a v-if="hasPerm('sys:menu:edit')" @click="$refs.menuForm.edit(record)">编辑</a>
+                          <a-divider type="vertical" v-if="hasPerm('sys:menu:edit')" />
+                          <a-popconfirm v-if="hasPerm('sys:menu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
+                            <a>删除</a>
+                          </a-popconfirm>
+                        </template>
+                      </span>
+                    </s-table>
+                  </a-modal> -->
+            </div>
+            <div style="margin-bottom: 30px">课件大小：&nbsp;
+              <a-input :disabled="true" :value="videoServerLink.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
+            </div>
+            <div style="margin-bottom: 30px">
+              连接地址：&nbsp;
+              <a-input placeholder="请输入视频链接地址" v-model="videoServerLink.videoUrl" style="width: 40%" />
+            </div>
+          </a-card>
+        </div>
+
+      </a-tab-pane>
+      <a-tab-pane key="3" tab="第三方连接">
+        <div style="background: #ececec; padding: 30px">
+          <a-card title="第三方连接" :bordered="false" style="width: 100%">
+            <div style="margin-bottom: 30px">
+              课件名称：&nbsp;
+              <a-input placeholder="课件名称" v-model="thirdAddress.name" style="width: 40%" />
+            </div>
+            <div style="margin-bottom: 30px; margin-top: 20px">
+              课件分类：&nbsp;<a-select mode="multiple" style="width: 30%" placeholder="请选择分类">
+                <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
+                  {{ (i + 9).toString(36) + i }}
+                </a-select-option>
+              </a-select>
+              <a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button>
+
+              <!-- 课件分类弹框 -->
+              <!-- <a-modal v-model="fileUpload.visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
+                    <s-table ref="table" :rowKey="(record) => record.id" :columns="fileUpload.columns" :alert="false" :data="loadData" :showPagination="false" :expandRowByClick="true">
+                      <span slot="type" slot-scope="text, record">
+                        <a-tag color="cyan" v-if="text === 0">
+                          {{ record.type | typeFilter }}
+                        </a-tag>
+                        <a-tag color="blue" v-if="text === 1">
+                          {{ record.type | typeFilter }}
+                        </a-tag>
+                        <a-tag color="purple" v-if="text === 2">
+                          {{ record.type | typeFilter }}
+                        </a-tag>
+                      </span>
+                      <span slot="action" slot-scope="text, record">
+                        <template>
+                          <a v-if="hasPerm('sys:menu:edit')" @click="$refs.menuForm.edit(record)">编辑</a>
+                          <a-divider type="vertical" v-if="hasPerm('sys:menu:edit')" />
+                          <a-popconfirm v-if="hasPerm('sys:menu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
+                            <a>删除</a>
+                          </a-popconfirm>
+                        </template>
+                      </span>
+                    </s-table>
+                  </a-modal> -->
+            </div>
+            <div style="margin-bottom: 30px">课件大小：&nbsp;
+              <a-time-picker placeholder="课件时长" :minute-step="1" :second-step="1" v-model="thirdAddress.sizeStr"/>
+            </div>
+            <div style="margin-bottom: 30px">
+              连接地址：&nbsp;
+              <a-input placeholder="请输入第三方链接地址" v-model="thirdAddress.videoUrl" style="width: 40%" />
+            </div>
+          </a-card>
+        </div>
+      </a-tab-pane>
     </a-tabs>
   </a-card>
 </template>
@@ -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', //顶级选项卡， 文件上传/视频服务器连接/第三方连接
+        textForm: {
-        tabkey: '1',
+          //文本上传表单
-        uploadButtonText: '选择文件',
+          type: '2', // 用于表示tabkey  1-视频上传  2-文本上传  3-视频服务连接  4-第三方连接
-        successOssFile: [],
+          videoPath: [],
-        uploadLoading: false, // 控制 选择文件 按钮是否转圈
-        columns: [
-        {
-          title: '标签名',
-          dataIndex: 'name',
-          width: '20%'
         },
-      ],
+      },
-      // loadData: parameter => {
+      videoServerLink: {
-      //   return menuList(Object.assign(parameter, this.queryParam)).then((res) => {
+        //视频服务器连接
-      //     const menuList = listToTree(res.data, [], rootParentId)
+        type: '3',
-      //     return menuList
+      },
-      //   })
+      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.uploadLoading = true
-      this.fileUpload.uploadButtonText = '上传中...'
+      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.uploadLoading = false
-          this.fileUpload.uploadButtonText = '选择文件'
+          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++) {
+      for (let i = 0; i < this.successOssFile.length; i++) {
-        if (this.fileUpload.successOssFile[i].uuid == file.uid) {
+        if (this.successOssFile[i].uuid == file.uid) {
-          this.fileUpload.successOssFile.splice(i, 1)
+          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.successOssFile.forEach((item, index) => {
-        this.fileUpload.videoForm.videoPath.push(item.url)
+        this.videoPath.push(item.url)
       })
 
-      console.log(this.fileUpload.videoForm.videoPath.toString())
+      if (this.parentTabKey == '2') this.videoPath.push(this.videoServerLink.videoUrl)
-      //转JSON
+      if (this.parentTabKey == '3') this.videoPath.push(this.thirdAddress.videoUrl)
-      this.fileUpload.videoForm.videoPath = this.fileUpload.videoForm.videoPath.toString()
 
-      //给课程ID
+      //转JSON
-      this.fileUpload.videoForm.courseId = this.$route.query.courseId
+      this.videoPath = this.videoPath.toString()
-      console.log(this.fileUpload.videoForm)
 
       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;
+    },
   },
 }
 </script>

src/views/course/CoursewarePreview.vue

@@ -1,7 +1,7 @@
 <template>
   <a-card :bordered="false" title="课件预览">
     <template slot="extra">
-      <h4 style="margin-right: 15px; display:inline-block">课程类别</h4>
+      <h4 style="margin-right: 15px; display:inline-block">课程类别待填充</h4>
       <a-button size="small" @click="goback">返回</a-button>
     </template>
 
@@ -89,11 +89,10 @@ export default {
         // width: 800,
         height: '650',
         fluid: false,
-        autoplay: true,
+        autoplay: false,//进入时是否开始自动播放
         muted: true,
         language: 'en',
         playbackRates: [0.7, 1.0, 1.5, 2.0], //设置倍速
-        autoplay: false, //进入时是否开始自动播放
         sources: [
           //类型： Array 一组对象，它们反映了本机元素具有一系列子元素的能力。这应该是带有src和type属性的对象数组
           // {
@@ -110,8 +109,8 @@ 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 > 1) this.play(this.courseware.videoList[0].path, 0)
+      console.log("------------",this.courseware);
 
       //课中检测必选题
       testing(Object.assign(parameter, this.queryParam)).then((res1) => {