课件上传

This commit is contained in:
18571350067 2021-12-24 11:01:49 +08:00
parent a6c33e5f86
commit 710e59cadf
2 changed files with 262 additions and 70 deletions

View File

@ -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> -->
</a-modal>
</s-table>
</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>
<!-- <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>课件大小&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="3" tab="第三方连接"> Content of Tab Pane 3 </a-tab-pane>
<a-tab-pane key="2" 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="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', // //
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;
},
},
}
</script>

View File

@ -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 srctype
// {
@ -110,8 +109,8 @@ export default {
coursewareDeatil(Object.assign(parameter, this.queryParam)).then((res) => {
//
this.courseware = res.data
if (this.courseware.videoList.length > 1) this.play(this.courseware.videoList[0].path, 0)
if (this.courseware.videoList.length > 0) this.play(this.courseware.videoList[0].path, 0)
console.log("------------",this.courseware);
//
testing(Object.assign(parameter, this.queryParam)).then((res1) => {