486 lines
14 KiB
Python
486 lines
14 KiB
Python
<template>
|
||
<div class="app-container">
|
||
<el-card>
|
||
<el-button type="primary" icon="el-icon-plus" @click="handleAddVideo"
|
||
>新增</el-button
|
||
>
|
||
</el-card>
|
||
<el-card style="margin-top: 10px">
|
||
<el-table
|
||
v-loading="listLoading"
|
||
:data="
|
||
videoList.results.filter(
|
||
(data) =>
|
||
!search ||
|
||
data.name.toLowerCase().includes(search.toLowerCase()) ||
|
||
data.category_name.toLowerCase().includes(search.toLowerCase())
|
||
)
|
||
"
|
||
border
|
||
fit
|
||
stripe
|
||
highlight-current-row
|
||
max-height="600"
|
||
>
|
||
<el-table-column type="index" width="50" />
|
||
<el-table-column label="名称">
|
||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="描述">
|
||
<template slot-scope="scope">{{ scope.row.description }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="视频类别">
|
||
<template slot-scope="scope">{{ scope.row.category_name }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建时间">
|
||
<template slot-scope="scope">{{ scope.row.create_time }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="视频地址">
|
||
<template slot-scope="scope">{{ scope.row.mediaurl }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="封面地址">
|
||
<template slot-scope="scope">{{ scope.row.coverurl }}</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
align="center"
|
||
label="操作"
|
||
width="200px"
|
||
fixed="right"
|
||
>
|
||
<template slot="header" slot-scope="scope">
|
||
<el-input
|
||
v-model="search"
|
||
size="mini"
|
||
placeholder="输入关键字搜索"
|
||
/>
|
||
</template>
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
:disabled="!checkPermission(['video_update'])"
|
||
type="primary"
|
||
size="small"
|
||
icon="el-icon-edit"
|
||
@click="handleEdit(scope)"
|
||
/>
|
||
<el-button
|
||
:disabled="!checkPermission(['video_delete'])"
|
||
type="danger"
|
||
size="small"
|
||
icon="el-icon-delete"
|
||
@click="handleDelete(scope)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<Pagination
|
||
v-show="videoList.count > 0"
|
||
:total="videoList.count"
|
||
:page.sync="listQuery.page"
|
||
:limit.sync="listQuery.page_size"
|
||
@pagination="getList"
|
||
/>
|
||
</el-card>
|
||
<el-dialog
|
||
:visible.sync="dialogVisible"
|
||
:title="dialogType === 'edit' ? '编辑视频信息' : '新增视频信息'"
|
||
>
|
||
<el-form
|
||
ref="Forms"
|
||
:model="VideoContent"
|
||
label-width="80px"
|
||
label-position="right"
|
||
:rules="rule1"
|
||
>
|
||
<el-form-item label="视频名称" prop="name">
|
||
<el-input v-model="VideoContent.name" placeholder="名称" />
|
||
</el-form-item>
|
||
<el-form-item label="视频描述" prop="description">
|
||
<el-input v-model="VideoContent.description" placeholder="名称" />
|
||
</el-form-item>
|
||
<el-form-item label="视频类型" prop="category">
|
||
<el-cascader
|
||
v-model="VideoContent.category"
|
||
:options="typeOptions"
|
||
:props="{ emitPath: false }"
|
||
clearable
|
||
style="width: 100%"
|
||
></el-cascader>
|
||
</el-form-item>
|
||
<form ref="vcExample">
|
||
<input
|
||
type="file"
|
||
style="display: none"
|
||
ref="vcExampleVideo"
|
||
@change="setVcExampleVideoName()"
|
||
/>
|
||
<input
|
||
type="file"
|
||
style="display: none"
|
||
ref="vcExampleCover"
|
||
@change="setVcExampleCoverName()"
|
||
/>
|
||
</form>
|
||
<div class="row" style="padding: 10px">
|
||
<el-button type="primary" @click="vcExampleAddVideo">{{
|
||
vcExampleVideoName || "添加视频"
|
||
}}</el-button>
|
||
<el-button type="primary" @click="vcExampleAddCover">{{
|
||
vcExampleCoverName || "添加封面"
|
||
}}</el-button>
|
||
<el-button type="success" @click="vcExampleAddUpload"
|
||
>上传视频和封面</el-button
|
||
>
|
||
</div>
|
||
|
||
<div class="row" id="resultBox">
|
||
<!-- 上传信息组件 -->
|
||
<div class="uploaderMsgBox" v-for="uploaderInfo in uploaderInfos">
|
||
<div v-if="uploaderInfo.videoInfo">
|
||
视频名称：{{
|
||
uploaderInfo.videoInfo.name + "." + uploaderInfo.videoInfo.type
|
||
}}； 上传进度：
|
||
<el-progress
|
||
:text-inside="true"
|
||
:stroke-width="24"
|
||
:percentage="Math.floor(uploaderInfo.progress * 100)"
|
||
status="success"
|
||
>
|
||
</el-progress>
|
||
上传结果：{{
|
||
uploaderInfo.isVideoUploadCancel
|
||
? "已取消"
|
||
: uploaderInfo.isVideoUploadSuccess
|
||
? "上传成功"
|
||
: "上传中"
|
||
}}；
|
||
<br />
|
||
地址：{{ uploaderInfo.videoUrl }}；
|
||
<a
|
||
href="javascript:void(0);"
|
||
class="cancel-upload"
|
||
v-if="
|
||
!uploaderInfo.isVideoUploadSuccess &&
|
||
!uploaderInfo.isVideoUploadCancel
|
||
"
|
||
@click="uploaderInfo.cancel()"
|
||
>取消上传</a
|
||
><br />
|
||
</div>
|
||
|
||
<div v-if="uploaderInfo.coverInfo">
|
||
封面名称：{{ uploaderInfo.coverInfo.name }}； 上传进度：
|
||
<el-progress
|
||
:text-inside="true"
|
||
:stroke-width="24"
|
||
:percentage="Math.floor(uploaderInfo.coverProgress * 100)"
|
||
status="success"
|
||
>
|
||
</el-progress>
|
||
上传结果：{{
|
||
uploaderInfo.isCoverUploadSuccess ? "上传成功" : "上传中"
|
||
}}；
|
||
<br />
|
||
地址：{{ uploaderInfo.coverUrl }}；
|
||
<br />
|
||
|
||
<video
|
||
:src="uploaderInfo.videoUrl"
|
||
style="width: 400px; height: 300px"
|
||
id="video"
|
||
autoplay
|
||
></video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-form>
|
||
<div style="text-align: right">
|
||
<el-button type="danger" @click="dialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="confirm('Forms')">创建信息</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
import {
|
||
updatevideo,
|
||
getsignature,
|
||
createVideo,
|
||
getVideoList,
|
||
deletevideo,
|
||
} from "@/api/video";
|
||
|
||
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
|
||
import { getDictList, getDictTypeList } from "@/api/dict";
|
||
import TcVod from "vod-js-sdk-v6";
|
||
|
||
import checkPermission from "@/utils/permission";
|
||
|
||
import { genTree } from "@/utils";
|
||
const defaultVideo = {
|
||
name: "",
|
||
description: "",
|
||
category: "",
|
||
mediaurl: "",
|
||
};
|
||
|
||
export default {
|
||
components: { Pagination },
|
||
|
||
data() {
|
||
return {
|
||
dialogVisible: false,
|
||
signature: "",
|
||
treeLoding: false,
|
||
videoList: {
|
||
count: 0,
|
||
},
|
||
typeOptions: [],
|
||
dialogType: "",
|
||
listQuery: {
|
||
page: 1,
|
||
page_size: 20,
|
||
},
|
||
search: "",
|
||
VideoContent: defaultVideo,
|
||
uploaderInfos: [],
|
||
vcExampleVideoName: "",
|
||
listLoading: false,
|
||
vcExampleCoverName: "",
|
||
rule1: {
|
||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||
category: [
|
||
{ required: true, message: "请选择视频分类", trigger: "change" },
|
||
],
|
||
},
|
||
};
|
||
},
|
||
computed: {},
|
||
|
||
created() {
|
||
this.getList();
|
||
this.getTypeAll();
|
||
},
|
||
methods: {
|
||
checkPermission,
|
||
//列表加载
|
||
getList() {
|
||
this.listLoading = true;
|
||
getVideoList(this.listQuery).then((response) => {
|
||
if (response.data) {
|
||
this.videoList = response.data;
|
||
}
|
||
this.listLoading = false;
|
||
});
|
||
},
|
||
//视频类型
|
||
|
||
getTypeAll() {
|
||
getDictList({ type__code: "data_video" }).then((res) => {
|
||
this.typeOptions = genTree(res.data);
|
||
});
|
||
},
|
||
|
||
/*弹出弹窗 */
|
||
handleAddVideo() {
|
||
this.VideoContent = Object.assign({}, defaultVideo);
|
||
this.dialogType = "new";
|
||
this.dialogVisible = true;
|
||
|
||
this.$nextTick(() => {
|
||
this.$refs["Forms"].clearValidate();
|
||
});
|
||
},
|
||
|
||
//删除视频
|
||
handleDelete(scope) {
|
||
this.$confirm("确认删除?", "警告", {
|
||
confirmButtonText: "确认",
|
||
cancelButtonText: "取消",
|
||
type: "error",
|
||
})
|
||
.then(async () => {
|
||
await deletevideo(scope.row.id);
|
||
this.getList();
|
||
this.$message.success("成功");
|
||
})
|
||
.catch((err) => {
|
||
console.error(err);
|
||
});
|
||
},
|
||
//编辑视频
|
||
handleEdit(scope) {
|
||
this.VideoContent = Object.assign({}, scope.row); // copy obj
|
||
this.dialogType = "edit";
|
||
this.dialogVisible = true;
|
||
|
||
this.$nextTick(() => {
|
||
this.$refs["Forms"].clearValidate();
|
||
});
|
||
},
|
||
setVcExampleVideoName: function () {
|
||
this.vcExampleVideoName = this.$refs.vcExampleVideo.files[0].name;
|
||
},
|
||
setVcExampleCoverName: function () {
|
||
this.vcExampleCoverName = this.$refs.vcExampleCover.files[0].name;
|
||
},
|
||
/*
|
||
vcExample添加视频
|
||
*/
|
||
vcExampleAddVideo: function () {
|
||
this.$refs.vcExampleVideo.click();
|
||
},
|
||
/*
|
||
vcExample添加封面
|
||
*/
|
||
vcExampleAddCover: function () {
|
||
this.$refs.vcExampleCover.click();
|
||
},
|
||
/*
|
||
vcExample上传过程
|
||
*/
|
||
vcExampleAddUpload: function () {
|
||
var self = this;
|
||
|
||
var mediaFile = this.$refs.vcExampleVideo.files[0];
|
||
var coverFile = this.$refs.vcExampleCover.files[0];
|
||
|
||
// 获取签名 （这里必须定义为函数，tcVod才可识别）
|
||
const getSignature = async function () {
|
||
const { data } = await getsignature();
|
||
return data;
|
||
};
|
||
// 前文中所述的获取上传签名的函数
|
||
const tcVod = new TcVod({ getSignature });
|
||
var uploader = tcVod.upload({
|
||
mediaFile: mediaFile,
|
||
coverFile: coverFile,
|
||
});
|
||
|
||
uploader.on("media_progress", function (info) {
|
||
uploaderInfo.progress = info.percent;
|
||
});
|
||
uploader.on("media_upload", function (info) {
|
||
uploaderInfo.isVideoUploadSuccess = true;
|
||
});
|
||
uploader.on("cover_progress", function (info) {
|
||
uploaderInfo.coverProgress = info.percent;
|
||
});
|
||
uploader.on("cover_upload", function (info) {
|
||
uploaderInfo.isCoverUploadSuccess = true;
|
||
});
|
||
|
||
var uploaderInfo = {
|
||
videoInfo: uploader.videoInfo,
|
||
coverInfo: uploader.coverInfo,
|
||
isVideoUploadSuccess: false,
|
||
isVideoUploadCancel: false,
|
||
isCoverUploadSuccess: false,
|
||
progress: 0,
|
||
coverProgress: 0,
|
||
fileId: "",
|
||
videoUrl: "",
|
||
coverUrl: "",
|
||
cancel: function () {
|
||
uploaderInfo.isVideoUploadCancel = true;
|
||
uploader.cancel();
|
||
},
|
||
};
|
||
|
||
this.uploaderInfos.push(uploaderInfo);
|
||
// console.log('uploaderInfos',this.uploaderInfos);
|
||
|
||
uploader.done().then(function (doneResult) {
|
||
console.log("doneResult", doneResult);
|
||
|
||
uploaderInfo.fileId = doneResult.fileId;
|
||
|
||
uploaderInfo.coverUrl = doneResult.cover.url;
|
||
uploaderInfo.videoUrl = doneResult.video.url;
|
||
|
||
self.$refs.vcExample.reset();
|
||
self.vcExampleVideoName = "";
|
||
self.vcExampleCoverName = "";
|
||
});
|
||
},
|
||
|
||
async confirm(form) {
|
||
this.$refs[form].validate((valid) => {
|
||
if (valid) {
|
||
const isEdit = this.dialogType === "edit";
|
||
if (isEdit) {
|
||
for (var i = 0; i < this.uploaderInfos.length; i++) {
|
||
this.VideoContent.fileid = this.uploaderInfos[i].fileId;
|
||
|
||
this.VideoContent.coverurl = this.uploaderInfos[i].coverUrl;
|
||
this.VideoContent.mediaurl = this.uploaderInfos[i].videoUrl;
|
||
}
|
||
// console.log(this.VideoContent)
|
||
updatevideo(this.VideoContent.id, this.VideoContent).then((res) => {
|
||
if (res.code >= 200) {
|
||
this.getList();
|
||
this.dialogVisible = false;
|
||
this.$message.success("成功");
|
||
}
|
||
});
|
||
} else {
|
||
for (var i = 0; i < this.uploaderInfos.length; i++) {
|
||
this.VideoContent.fileid = this.uploaderInfos[i].fileId;
|
||
|
||
this.VideoContent.coverurl = this.uploaderInfos[i].coverUrl;
|
||
this.VideoContent.mediaurl = this.uploaderInfos[i].videoUrl;
|
||
}
|
||
createVideo(this.VideoContent).then((res) => {
|
||
if (res.code >= 200) {
|
||
this.getList();
|
||
this.dialogVisible = false;
|
||
this.$message.success("成功");
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
.text-danger {
|
||
color: red;
|
||
}
|
||
|
||
.control-label {
|
||
text-align: left !important;
|
||
}
|
||
|
||
#resultBox {
|
||
width: 100%;
|
||
height: 300px;
|
||
border: 1px solid #888;
|
||
padding: 5px;
|
||
overflow: auto;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.uploaderMsgBox {
|
||
border-bottom: 1px solid #888;
|
||
background: #1a7ce0;
|
||
color: white;
|
||
font-size: medium;
|
||
}
|
||
|
||
.cancel-upload {
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
|
||
|
||
|