361 lines
14 KiB
HTML
361 lines
14 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
|
|
<script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>
|
|
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.3.0/tcplayer.min.css" rel="stylesheet"/>
|
|
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.3.0/libs/hls.min.0.13.2m.js"></script>
|
|
<!--播放器脚本文件-->
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.3.0/tcplayer.v4.3.0.min.js"></script>
|
|
|
|
|
|
<style>
|
|
|
|
.video-js {
|
|
width: 100% !important;
|
|
min-height: 500px !important;
|
|
}
|
|
|
|
.upload-form-item .el-form-item__content {
|
|
line-height: unset !important;
|
|
}
|
|
|
|
.video-title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #212121;
|
|
line-height: 26px;
|
|
height: 26px;
|
|
margin-top: 0;
|
|
margin-bottom: 8px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<guava ref="guava" :v.sync="pageStatus">
|
|
<el-card shadow="never">
|
|
<div class="btn-group tool-button mt5">
|
|
<el-select v-model="pageForm.albumId" placeholder="请选择专辑" filterable clearable @change="doSearch">
|
|
<el-option
|
|
v-for="item in albumList"
|
|
:key="item.id"
|
|
:label="item.title"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
|
|
<div class="btn-group tool-button mt5">
|
|
<el-input placeholder="请输入内容" v-model="pageForm.searchKeyword" clearable @keyup.enter.native="doSearch">
|
|
<el-select v-model="pageForm.searchName" slot="prepend" placeholder="查询类型" style="width: 120px;">
|
|
<el-option label="标题" value="tev.title"></el-option>
|
|
</el-select>
|
|
</el-input>
|
|
</div>
|
|
|
|
<div class="btn-group tool-button mt5">
|
|
<el-button type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
|
|
</div>
|
|
|
|
<div class="pull-right offscreen-right mt5">
|
|
<el-button type="primary" @click="openAdd">
|
|
<i class="ti-plus"></i>
|
|
上传视频
|
|
</el-button>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card shadow="never" class="mt10">
|
|
<table-tool label="视频列表" :app="this"></table-tool>
|
|
<el-table :data="tableData" :size="tableSize" @sort-change="pageOrder" style="width: 100%">
|
|
<el-table-column type="index" label="序号" width="80px"></el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
header-align="center"
|
|
v-for="column in tableColumns"
|
|
show-overflow-tooltip
|
|
:label="column.label"
|
|
:prop="column.prop"
|
|
:sortable="column.sortable"
|
|
>
|
|
|
|
<template v-if="column.prop==='disabled'" scope="{row}">
|
|
<span v-if="row.disabled"><i class="el-icon-error text-error"></i> 禁用</span>
|
|
<span v-else><i class="el-icon-success text-success"></i> 启用</span>
|
|
</template>
|
|
|
|
</el-table-column>
|
|
<el-table-column align="center" header-align="center" label="操作" width="250">
|
|
<template scope="{row}">
|
|
<el-button size="small" @click="openView(row)">查看</el-button>
|
|
<el-button size="small" type="primary" @click="openEdit(row)">编辑</el-button>
|
|
<el-button size="small" type="danger" @click="doDelete(row.id)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--#include("/layouts/pagination.html"){}#-->
|
|
</el-card>
|
|
|
|
<template #edit>
|
|
<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px">
|
|
|
|
<el-form-item label="所属专辑" prop="albumId">
|
|
<el-select v-model="formData.albumId" placeholder="请选择专辑" style="width: 100%">
|
|
<el-option
|
|
v-for="item in albumList"
|
|
:key="item.id"
|
|
:label="item.title"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
<div class="text-primary">{{videoTypeTips}}</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="视频标题" prop="title">
|
|
<el-input v-model="formData.title"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="上传文件" prop="url" class="upload-form-item">
|
|
<wp-upload ref="uploadForm"
|
|
:upload-auto="false"
|
|
:size="1024*100"
|
|
@on-select="selectFile"
|
|
:allow-files="['mp4']"
|
|
:max-file-number="1"
|
|
show-model="list"
|
|
:file-list="fileList"
|
|
type="single"></wp-upload>
|
|
<div class="el-upload__tip">请上传格式为mp4的视频文件，且不超过200M</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="排序编号" prop="sortNo">
|
|
<el-input-number :min="1" :max="128" v-model="formData.sortNo"></el-input-number>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="是否启用" prop="disabled">
|
|
<el-switch
|
|
v-model="formData.disabled"
|
|
:active-value="false"
|
|
:inactive-value="true"
|
|
active-color="#13ce66"
|
|
inactive-color="#ff4949">
|
|
</el-switch>
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
<el-row class="mt20 text-right">
|
|
<el-button @click="$refs.guava.index()">取消</el-button>
|
|
<el-button type="primary" @click="doHandle">确定</el-button>
|
|
</el-row>
|
|
</template>
|
|
|
|
<template #view>
|
|
<!-- <el-row type="flex" :gutter="20">-->
|
|
<!-- <el-col :span="18">-->
|
|
<!-- <h1 class="video-title">-->
|
|
<!-- <span>{{viewData.albumTitle + '-' + viewData.title}}</span>-->
|
|
<!-- </h1>-->
|
|
<!-- <video id="player-container-id" width="700" height="600" preload="auto" playsinline-->
|
|
<!-- webkit-playsinline>-->
|
|
<!-- </video>-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="6">-->
|
|
<!-- <div class="grid-content bg-purple"></div>-->
|
|
<!-- </el-col>-->
|
|
<!-- </el-row>-->
|
|
|
|
</template>
|
|
</guava>
|
|
|
|
<el-dialog title="视频" :visible.sync="playDialogVisible" width="60%" close-on-click-modal="false">
|
|
<h1 class="video-title">
|
|
<span>{{viewData.albumTitle + '-' + viewData.title}}</span>
|
|
</h1>
|
|
<video id="player-container-id" height="600" preload="auto" playsinline
|
|
webkit-playsinline>
|
|
</video>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
<!--#include("/platform/trainEdu/include/include.js"){}#-->
|
|
|
|
let player = null
|
|
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
mixins: [initTableMixins],
|
|
computed: {
|
|
videoTypeTips() {
|
|
const albumId = this.formData.albumId
|
|
const o = this.albumList.find(v => v.id === albumId)
|
|
if (o) {
|
|
//return '请上传' + o.eduType.typeName + '的视频'
|
|
}
|
|
return null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
pageStatus: null,
|
|
pageForm: {
|
|
albumId: null,
|
|
searchName: 'tev.title'
|
|
},
|
|
formData: {
|
|
albumId: null,
|
|
cover: null,
|
|
title: null,
|
|
sortNo: null,
|
|
disabled: false,
|
|
url: null
|
|
},
|
|
tableColumns: [
|
|
{prop: 'title', label: '标题'},
|
|
{prop: 'albumTitle', label: '所属专辑'},
|
|
{prop: 'createUserName', label: '上传人'},
|
|
{prop: 'createTime', label: '上传时间', sortable: true},
|
|
{prop: 'disabled', label: '视频状态', sortable: true},
|
|
|
|
],
|
|
rules: {
|
|
albumId: [{required: true, message: '请选择所属专辑', trigger: ['change', 'blur']}],
|
|
title: [{required: true, message: '请选择视频标题', trigger: ['change', 'blur']}],
|
|
url: [{required: true, message: '请上传视频文件', trigger: ['change', 'blur']}],
|
|
sortNo: [{required: true, message: '请输入排序编号', trigger: ['change', 'blur']}]
|
|
},
|
|
albumList: [],
|
|
fileList: [],
|
|
viewData: {},
|
|
playDialogVisible: false
|
|
}
|
|
},
|
|
watch: {
|
|
pageStatus(val) {
|
|
if (val !== 'view') {
|
|
if (player) {
|
|
player.pause()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
openAdd() {
|
|
this.$refs['guava'].edit()
|
|
if (this.$refs.uploadForm) {
|
|
this.$refs.uploadForm.clean()
|
|
}
|
|
this.$refs['ruleForm'].resetFields()
|
|
this.formData.id = undefined
|
|
this.formData.albumId = this.pageForm.albumId
|
|
|
|
},
|
|
selectFile(preUploadFiles) {
|
|
if (preUploadFiles && preUploadFiles.length > 0) {
|
|
this.formData.url = '#'
|
|
this.$refs['ruleForm'].validate()
|
|
}
|
|
},
|
|
async doHandle() {
|
|
const fileList = this.$refs.uploadForm.fileShowArray
|
|
if (fileList && fileList.length > 0) {
|
|
this.formData.url = '#'
|
|
} else {
|
|
this.formData.url = null
|
|
}
|
|
const valid = await this.$refs['ruleForm'].validate()
|
|
if (valid) {
|
|
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: '上传中,文件过大请耐心等待',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
|
|
const methodName = typeof this.formData.id === 'undefined' ? '/doAdd' : '/doEdit'
|
|
|
|
const formData = new FormData()
|
|
formData.append("data", JSON.stringify(this.formData))
|
|
formData.append("file", this.$refs.uploadForm.fileShowArray[0].file)
|
|
|
|
const resp = await $.ajax({
|
|
type: 'POST',
|
|
url: loc() + methodName,
|
|
data: formData,
|
|
cache: false,
|
|
processData: false,
|
|
contentType: false
|
|
})
|
|
loading.close()
|
|
if (resp.code === 0) {
|
|
this.notifySuccess(resp.msg)
|
|
this.doSearch()
|
|
this.$refs['guava'].index()
|
|
} else {
|
|
this.notifyError(resp.msg)
|
|
}
|
|
}
|
|
},
|
|
openView(row) {
|
|
this.viewData = row
|
|
this.playDialogVisible = true
|
|
this.$nextTick(() => {
|
|
if (!player) {
|
|
player = TCPlayer('player-container-id', {})
|
|
}
|
|
player.src(row.mediaUrl)
|
|
})
|
|
|
|
// player.play()
|
|
},
|
|
openEdit(row) {
|
|
this.$refs['guava'].edit()
|
|
this.formData = JSON.parse(JSON.stringify(row))
|
|
this.fileList = [{
|
|
url: row.mediaUrl
|
|
}]
|
|
if (this.$refs.uploadForm) {
|
|
setTimeout(() => {
|
|
this.$refs.uploadForm.initWp()
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
async doDelete(id) {
|
|
const confirm = await this.$confirm('确定删除吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
if (confirm === 'confirm') {
|
|
const resp = await $.post(loc() + '/doDelete', {id})
|
|
if (resp.code === 0) {
|
|
this.$notify.success(resp.msg)
|
|
this.doSearch()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
async created() {
|
|
this.albumList = await getAllAlbum()
|
|
if (this.albumList) {
|
|
this.pageForm.albumId = this.albumList[0].id
|
|
this.pageData()
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|