first commit
This commit is contained in:
@@ -0,0 +1,416 @@
|
||||
<!--#
|
||||
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 :v.sync="pageStatus" ref="guava">
|
||||
<el-card shadow="never">
|
||||
<div class="btn-group tool-button mt5">
|
||||
<el-select @change="doSearch" clearable filterable placeholder="请选择专辑"
|
||||
v-model="pageForm.albumId">
|
||||
<el-option
|
||||
:key="item.id"
|
||||
:label="item.title"
|
||||
:value="item.id"
|
||||
v-for="item in albumList">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="btn-group tool-button mt5">
|
||||
<el-input @keyup.enter.native="doSearch" clearable placeholder="请输入内容"
|
||||
v-model="pageForm.searchKeyword">
|
||||
<el-select placeholder="查询类型" slot="prepend" style="width: 120px;"
|
||||
v-model="pageForm.searchName">
|
||||
<el-option label="标题" value="tev.title"></el-option>
|
||||
</el-select>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="btn-group tool-button mt5">
|
||||
<el-button @click="doSearch" icon="el-icon-search" type="primary">搜索</el-button>
|
||||
</div>
|
||||
|
||||
<div class="pull-right offscreen-right mt5">
|
||||
<el-button @click="openAdd" type="primary">
|
||||
<i class="ti-plus"></i>
|
||||
上传视频
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10" shadow="never">
|
||||
<table-tool :app="this" label="视频列表"></table-tool>
|
||||
<el-table :data="tableData" :size="tableSize" @sort-change="pageOrder"
|
||||
style="width: 100%">
|
||||
<el-table-column label="序号" type="index" width="80px"></el-table-column>
|
||||
<el-table-column
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:sortable="column.sortable"
|
||||
align="center"
|
||||
header-align="center"
|
||||
show-overflow-tooltip
|
||||
v-for="column in tableColumns"
|
||||
>
|
||||
|
||||
<template scope="{row}" v-if="column.prop==='disabled'">
|
||||
<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="400">
|
||||
<template scope="{row}">
|
||||
<el-button @click="openCode(row)" size="small" type="primary">生成二维码
|
||||
</el-button>
|
||||
<el-button @click="openView(row)" size="small" type="primary">查看</el-button>
|
||||
<el-button @click="openEdit(row)" size="small" type="primary">编辑</el-button>
|
||||
<el-button @click="doDelete(row.id)" size="small" type="danger">删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-card>
|
||||
|
||||
<template #edit>
|
||||
<el-form :model="formData" :rules="rules" label-width="150px" ref="ruleForm">
|
||||
|
||||
<el-form-item label="所属专辑" prop="albumId">
|
||||
<el-select placeholder="请选择专辑" style="width: 100%" v-model="formData.albumId">
|
||||
<el-option
|
||||
:key="item.id"
|
||||
:label="item.title"
|
||||
:value="item.id"
|
||||
v-for="item in albumList">
|
||||
</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 class="upload-form-item" label="上传文件" prop="url">
|
||||
<wp-upload :allow-files="['mp4']"
|
||||
:file-list="fileList"
|
||||
:max-file-number="1"
|
||||
:size="1024*500"
|
||||
:upload-auto="false"
|
||||
@on-select="selectFile"
|
||||
ref="uploadForm"
|
||||
show-model="list"
|
||||
type="single"></wp-upload>
|
||||
<div class="el-upload__tip">请上传格式为mp4的视频文件，且不超过200M</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排序编号" prop="sortNo">
|
||||
<el-input-number :max="128" :min="1"
|
||||
v-model="formData.sortNo"></el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="每天最多观看次数" prop="everyDayMaxWatchNum">
|
||||
<el-input-number :max="100" :min="1"
|
||||
v-model="formData.everyDayMaxWatchNum"></el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="合格/达标次数" prop="qualifiedNum">
|
||||
<el-input-number :max="1000" :min="1"
|
||||
v-model="formData.qualifiedNum"></el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="开始时间" prop="startDate">
|
||||
<el-date-picker
|
||||
placeholder="选择日期"
|
||||
style="width: 100%;"
|
||||
type="date"
|
||||
v-model="formData.startDate"
|
||||
value-format="yyyy-MM-dd">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="结束时间" prop="endDate">
|
||||
<el-date-picker
|
||||
placeholder="选择日期"
|
||||
style="width: 100%;"
|
||||
type="date"
|
||||
v-model="formData.endDate"
|
||||
value-format="yyyy-MM-dd">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否启用" prop="disabled">
|
||||
<el-switch
|
||||
:active-value="false"
|
||||
:inactive-value="true"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
v-model="formData.disabled">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<el-row class="mt20 text-right">
|
||||
<el-button @click="$refs.guava.index()">取消</el-button>
|
||||
<el-button @click="doHandle" type="primary">确定</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 :visible.sync="playDialogVisible" close-on-click-modal="false" title="视频"
|
||||
width="60%">
|
||||
<h1 class="video-title">
|
||||
<span>{{viewData.albumTitle + '-' + viewData.title}}</span>
|
||||
</h1>
|
||||
<video height="600" id="player-container-id" playsinline preload="auto"
|
||||
webkit-playsinline>
|
||||
</video>
|
||||
</el-dialog>
|
||||
|
||||
<open-qr-code ref="openQRCode"></open-qr-code>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
<!--#include("/platform/trainEdu/include/include.js"){}#-->
|
||||
|
||||
let player = null
|
||||
|
||||
const 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,
|
||||
endDate: null,
|
||||
startDate: null
|
||||
},
|
||||
tableColumns: [
|
||||
{prop: 'title', label: '标题'},
|
||||
{prop: 'albumTitle', label: '所属专辑'},
|
||||
{prop: 'createUserName', label: '上传人'},
|
||||
{prop: 'createTime', label: '上传时间', sortable: true},
|
||||
{prop: 'disabled', label: '视频状态', sortable: true},
|
||||
{prop: 'startDate', label: '开始时间', sortable: true},
|
||||
{prop: 'endDate', 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']}],
|
||||
startDate: [{required: true, message: '请输入开始时间', trigger: ['change', 'blur']}],
|
||||
endDate: [{required: true, message: '请输入结束时间', trigger: ['change', 'blur']}]
|
||||
},
|
||||
albumList: [],
|
||||
fileList: [],
|
||||
viewData: {},
|
||||
playDialogVisible: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
pageStatus(val) {
|
||||
if (val !== 'view') {
|
||||
if (player) {
|
||||
player.pause()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'open-qr-code': httpVueLoader('/components/plugins/OpenQRCode.vue'),
|
||||
},
|
||||
methods: {
|
||||
openCode() {
|
||||
this.$refs.openQRCode.openCode("/mobile/trainEducation/index")
|
||||
},
|
||||
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>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user