515 lines
21 KiB
Vue
515 lines
21 KiB
Vue
<template>
|
||
<a-card :bordered="false" title="添加课件">
|
||
<template slot="extra">
|
||
<a-button @click="goback">返回</a-button>
|
||
<a-button type="primary" @click="save">保存</a-button>
|
||
</template>
|
||
<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%">
|
||
<div style="margin-bottom: 30px">
|
||
课件名称：
|
||
<a-input placeholder="课件名称" v-model="fileUpload.videoForm.name" style="width: 40%" />
|
||
</div>
|
||
<div style="margin-bottom: 30px; margin-top: 20px">
|
||
课件分类： <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>课件大小：
|
||
<a-input :disabled="true" :value="fileUpload.videoForm.sizeStr" style="width: 140px" /> MB
|
||
</div>
|
||
<br />
|
||
<div>
|
||
视频上传： <a-upload list-type="picture" :default-file-list="this.successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo" :disabled="this.uploadLoading">
|
||
<a-button>
|
||
<a-icon type="upload" /> {{this.uploadButtonText}}
|
||
</a-button>
|
||
</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%">
|
||
<div style="margin-bottom: 30px">
|
||
课件名称：
|
||
<a-input placeholder="课件名称" v-model="fileUpload.textForm.name" style="width: 40%" />
|
||
</div>
|
||
<div style="margin-bottom: 30px; margin-top: 20px">
|
||
课件分类： <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>课件大小：
|
||
<a-input-number v-model="fileUpload.textForm.sizeStr" :min="0" /> MB
|
||
</div>
|
||
<br />
|
||
<div>
|
||
文件上传： <a-upload list-type="picture" :default-file-list="this.successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo" :disabled="this.uploadLoading">
|
||
<a-button>
|
||
<a-icon type="upload" /> {{this.uploadButtonText}}
|
||
</a-button>
|
||
</a-upload>
|
||
</div>
|
||
</a-card>
|
||
</div>
|
||
</a-tab-pane>
|
||
</a-tabs>
|
||
</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">
|
||
课件名称：
|
||
<a-input placeholder="课件名称" v-model="videoServerLink.name" style="width: 40%" />
|
||
</div>
|
||
<div style="margin-bottom: 30px; margin-top: 20px">
|
||
课件分类： <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">课件大小：
|
||
<a-input :disabled="true" :value="videoServerLink.sizeStr" style="width: 140px" /> MB
|
||
</div>
|
||
<div style="margin-bottom: 30px">
|
||
连接地址：
|
||
<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">
|
||
课件名称：
|
||
<a-input placeholder="课件名称" v-model="thirdAddress.name" style="width: 40%" />
|
||
</div>
|
||
<div style="margin-bottom: 30px; margin-top: 20px">
|
||
课件分类： <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">课件大小：
|
||
<a-time-picker placeholder="课件时长" :minute-step="1" :second-step="1" v-model="thirdAddress.sizeStr"/>
|
||
</div>
|
||
<div style="margin-bottom: 30px">
|
||
连接地址：
|
||
<a-input placeholder="请输入第三方链接地址" v-model="thirdAddress.videoUrl" style="width: 40%" />
|
||
</div>
|
||
</a-card>
|
||
</div>
|
||
</a-tab-pane>
|
||
</a-tabs>
|
||
</a-card>
|
||
</template>
|
||
|
||
|
||
|
||
<script>
|
||
import { STable } from '@/components'
|
||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||
import storage from 'store'
|
||
import axios from 'axios'
|
||
import { ossUpload } from '@/api/sys/oss'
|
||
import { coursewareAdd } from '@/api/course/courseware'
|
||
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
successOssFile: [],
|
||
uploadLoading: false, // 控制 选择文件 按钮是否转圈
|
||
uploadButtonText: '选择文件',
|
||
parentTabKey: '1', //顶级选项卡， 文件上传/视频服务器连接/第三方连接
|
||
videoPath: [], //用于存放视频路径
|
||
fileUpload: {
|
||
visible: false,
|
||
tabkey: '1',
|
||
videoForm: {
|
||
//视频上传表单
|
||
sizeStr: '0', //视频大小
|
||
type: '1',
|
||
videoPath: [],
|
||
},
|
||
textForm: {
|
||
//文本上传表单
|
||
type: '2', // 用于表示tabkey 1-视频上传 2-文本上传 3-视频服务连接 4-第三方连接
|
||
videoPath: [],
|
||
},
|
||
},
|
||
videoServerLink: {
|
||
//视频服务器连接
|
||
type: '3',
|
||
},
|
||
thirdAddress: {
|
||
//第三方表单
|
||
sizeStr:'',
|
||
type: '4',
|
||
},
|
||
}
|
||
},
|
||
components: {},
|
||
created() {},
|
||
methods: {
|
||
//返回
|
||
goback() {
|
||
this.$router.push({
|
||
path: '/course/CoursewareList',
|
||
query: {
|
||
id: this.$route.query.courseId,
|
||
},
|
||
})
|
||
},
|
||
|
||
//顶级标签页
|
||
parentcallback(key) {
|
||
console.log(key)
|
||
this.fileUpload.videoForm = {}
|
||
this.fileUpload.textForm = {}
|
||
this.videoPath = [] //置空文件
|
||
this.parentTabKey = key
|
||
},
|
||
//作用于子标签页
|
||
callback(key) {
|
||
console.log(key)
|
||
|
||
this.fileUpload.videoForm = {}
|
||
this.fileUpload.textForm = {}
|
||
this.videoPath = [] //置空文件
|
||
|
||
this.successOssFile = this.successOssFile.splice(0, this.successOssFile.length)
|
||
this.fileUpload.tabkey = key //等于当前的Key
|
||
},
|
||
|
||
//获取Tonken
|
||
getToken() {
|
||
let hreader = {}
|
||
hreader[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)
|
||
return hreader
|
||
},
|
||
|
||
beforeUpload(file) {
|
||
//文件类型 (后缀)
|
||
var suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
|
||
if (this.fileUpload.tabkey == '1' && suffix != 'mp4') {
|
||
return this.$message.error('文件类型必须是mp4')
|
||
}
|
||
|
||
console.log('tabkey', this.fileUpload.tabkey)
|
||
//告知用户是否正在上传
|
||
this.uploadLoading = true
|
||
this.uploadButtonText = '上传中...'
|
||
|
||
//处理视频上传
|
||
const data = new FormData()
|
||
data.append('file', file)
|
||
data.append('fileType', 'mp4')
|
||
|
||
//设置请求头和token
|
||
const header = {}
|
||
header['Content-Type'] = 'multipart/form-data'
|
||
header[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)
|
||
|
||
axios
|
||
.post(ossUpload(), data, { headers: header })
|
||
.then((res) => {
|
||
this.uploadLoading = false
|
||
this.uploadButtonText = '选择文件'
|
||
if (res.data.code === 200) {
|
||
this.$message.success('上传成功！')
|
||
|
||
res.data.uuid = file.uid
|
||
res.data.size = file.size
|
||
this.successOssFile.push(res.data)
|
||
|
||
//刷新文件大小
|
||
this.refreshFileSize()
|
||
} else {
|
||
this.$message.error(res.data.msg)
|
||
this.$refs.inputFile.value = ''
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(err)
|
||
this.uploadButtonText = '选择文件'
|
||
})
|
||
|
||
return false
|
||
},
|
||
|
||
//刷新大小
|
||
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
|
||
|
||
//视频转换成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)
|
||
}
|
||
},
|
||
|
||
//删除已上传的视频
|
||
deleteVideo(file) {
|
||
// 删除元素
|
||
for (let i = 0; i < this.successOssFile.length; i++) {
|
||
if (this.successOssFile[i].uuid == file.uid) {
|
||
this.successOssFile.splice(i, 1)
|
||
break
|
||
}
|
||
}
|
||
|
||
this.refreshFileSize()
|
||
},
|
||
|
||
//弹框
|
||
showModal() {
|
||
this.fileUpload.visible = true
|
||
},
|
||
|
||
//保存
|
||
save() {
|
||
//视频赋给表单里面的字段
|
||
this.successOssFile.forEach((item, index) => {
|
||
this.videoPath.push(item.url)
|
||
})
|
||
|
||
if (this.parentTabKey == '2') this.videoPath.push(this.videoServerLink.videoUrl)
|
||
if (this.parentTabKey == '3') this.videoPath.push(this.thirdAddress.videoUrl)
|
||
|
||
//转JSON
|
||
this.videoPath = this.videoPath.toString()
|
||
|
||
let from
|
||
if (this.parentTabKey == '1' && this.fileUpload.tabkey == '1') {
|
||
from = this.videoFormV()
|
||
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
|
||
}
|
||
|
||
//提交保存请求
|
||
coursewareAdd(from).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.$message.success('课件保存成功！')
|
||
this.goback()
|
||
} else {
|
||
this.$message.error('保存失败！')
|
||
}
|
||
})
|
||
},
|
||
|
||
//视频上传
|
||
videoFormV() {
|
||
// 验证课件名称是否为空
|
||
if (!this.fileUpload.videoForm.name || this.fileUpload.videoForm.name === '') {
|
||
this.$message.error('课件名称不能为空!')
|
||
return false
|
||
} 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
|
||
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>
|
||
<style scoped>
|
||
</style> |