599 lines
24 KiB
HTML
599 lines
24 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<link rel="stylesheet" href="${base!}/assets/platform/plugins/video/css/video-js.min.css">
|
|
<script src="${base!}/assets/platform/plugins/video/js/video.min.js"></script>
|
|
|
|
<style>
|
|
.el-col > .el-cascader, .el-col > .el-select, .el-col > .el-date-editor {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.filedialog .el-dialog__header i {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.filedialog .el-dialog__body {
|
|
padding: 20px 0 0 0;
|
|
}
|
|
|
|
|
|
.video-js {
|
|
width: 100%;
|
|
height: 450px;
|
|
outline: none;
|
|
}
|
|
|
|
.vjs-tech, .video-js button {
|
|
outline: none;
|
|
}
|
|
|
|
#app .el-table th.gutter {
|
|
display: table-cell !important
|
|
}
|
|
|
|
.filedialog .el-dialog {
|
|
min-height: 500px;
|
|
}
|
|
|
|
|
|
.video-js .vjs-big-play-button { /* 中间大的播放按钮 */
|
|
font-size: 2.5em;
|
|
line-height: 2.3em;
|
|
height: 2.5em;
|
|
width: 2.5em;
|
|
-webkit-border-radius: 2.5em;
|
|
-moz-border-radius: 2.5em;
|
|
border-radius: 2.5em;
|
|
background-color: rgba(115, 133, 159, .5);
|
|
border-width: 0.12em;
|
|
margin-top: -1.25em;
|
|
margin-left: -1.75em;
|
|
}
|
|
|
|
.video-js.vjs-paused .vjs-big-play-button { /* 视频暂停时显示播放按钮 */
|
|
display: block;
|
|
}
|
|
|
|
.video-js.vjs-error .vjs-big-play-button { /* 视频加载出错时隐藏播放按钮 */
|
|
display: none;
|
|
}
|
|
|
|
.vjs-loading-spinner { /* 加载圆圈 */
|
|
font-size: 2.5em;
|
|
width: 2em;
|
|
height: 2em;
|
|
border-radius: 1em;
|
|
margin-top: -1em;
|
|
margin-left: -1.5em;
|
|
}
|
|
|
|
.el-image {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.el-divider__text {
|
|
color: #abc5df;
|
|
}
|
|
|
|
.el-divider {
|
|
background-color: #e5edf6;
|
|
}
|
|
|
|
.view-myvideo-tab {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: #C0C4CC;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.video-toggle-i:hover .el-icon-video-camera-solid {
|
|
display: none;
|
|
}
|
|
|
|
.video-toggle-i:hover .el-icon-video-play {
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
.view-myvideo-tab .el-icon-video-camera-solid, .view-myvideo-tab .el-icon-video-play, .view-myvideo-tab .el-icon-document {
|
|
color: #000000;
|
|
line-height: 80px;
|
|
font-size: 40px;
|
|
}
|
|
|
|
|
|
.view-myvideo-tab .el-icon-download {
|
|
width: 100px;
|
|
}
|
|
|
|
.el-icon-video-play {
|
|
display: none;
|
|
}
|
|
|
|
.ckdialogclass .el-dialog__body {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.el-icon-download {
|
|
color: white;
|
|
}
|
|
|
|
.file-down-span {
|
|
background: black;
|
|
opacity: 0.5;
|
|
z-index: 1000;
|
|
width: 100px;
|
|
text-align: center;
|
|
/*position: absolute;*/
|
|
position: relative;
|
|
bottom: -100px;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
.file-down-span:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.ckdialogclass .el-icon-circle-close {
|
|
color: white;
|
|
}
|
|
|
|
.el-image-viewer__wrapper {
|
|
z-index: 99999 !important;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<guava ref="guava">
|
|
<template>
|
|
<el-card shadow="never">
|
|
<el-row type="flex" :gutter="20">
|
|
<el-col :span="22">
|
|
<el-row type="flex" :gutter="20">
|
|
<el-col :span="6">
|
|
<!-- <el-cascader placeholder="请选择活动主题"-->
|
|
<!-- v-model="pageForm.hdids" :options="hdxxlist" @change="hdchange"-->
|
|
<!-- clearable></el-cascader>-->
|
|
<el-date-picker v-model="pageForm.year"
|
|
placeholder="年度"
|
|
type="year"
|
|
@change="yearChange"
|
|
value-format="yyyy"></el-date-picker>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-select v-model="pageForm.hdid" @change="hdchange" clearable
|
|
placeholder="请选择活动主题">
|
|
<el-option v-for="i in hdxxlist"
|
|
:key="i.value"
|
|
:label="i.label"
|
|
:value="i.value"></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-select v-model="pageForm.hdlb" placeholder="请选择活动类别" clearable
|
|
@change="hdlbchange">
|
|
<el-option v-for="o in hdlblist" :label="o.lname"
|
|
:value="o.lid"></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-select v-model="pageForm.zplb" placeholder="请选择作品类型" clearable>
|
|
<el-option v-for="o in hdzplblist" :label="o.zname"
|
|
:value="o.zid"></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row type="flex" :gutter="20" class="mt20">
|
|
<el-col :span="6">
|
|
<el-input placeholder="请输入内容" v-model="pageForm.searchKeyword"
|
|
@keyup.enter.native="doSearch"
|
|
clearable>
|
|
<el-select v-model="pageForm.searchName" slot="prepend"
|
|
placeholder="查询类型"
|
|
style="width: 120px;"
|
|
clearable>
|
|
<el-option label="姓名" value="u.username"></el-option>
|
|
<el-option label="工资号" value="u.loginname"></el-option>
|
|
</el-select>
|
|
</el-input>
|
|
</el-col>
|
|
|
|
<el-col :span="6" v-if="hasSuperAdminOrXghRole">
|
|
<el-select placeholder="所属工会" v-model="pageForm.union"
|
|
clearable="true"
|
|
filterable="true" @change="unionChange">
|
|
<el-option v-for="item in unions" :label="item.unionname"
|
|
:value="item.id"></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
<el-select placeholder="所属单位" v-model="pageForm.unit"
|
|
style="width: 200px;"
|
|
clearable="true"
|
|
filterable="true">
|
|
<el-option v-for="item in units" :label="item.name"
|
|
:value="item.id"></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-select placeholder="审核状态" v-model="pageForm.stateId"
|
|
style="width: 200px;"
|
|
clearable
|
|
filterable>
|
|
<el-option v-for="item in auditStateList"
|
|
:label="item.stateName"
|
|
:value="item.stateId"></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="">
|
|
<el-button type="primary" icon="el-icon-search"
|
|
@click="doSearch"></el-button>
|
|
</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-card>
|
|
<el-card shadow="never" class="mt20">
|
|
<vi-title2 title="作品列表">
|
|
<template #func>
|
|
<el-button size="small" @click="exportExcel" type="primary">
|
|
<i class="el-icon-tickets"></i>
|
|
导出Excel
|
|
</el-button>
|
|
|
|
<el-button size="small" @click="exportWork" type="primary">
|
|
<i class="el-icon-tickets"></i>
|
|
导出作品
|
|
</el-button>
|
|
</template>
|
|
</vi-title2>
|
|
<el-table :data="tableData" @sort-change="pageOrder">
|
|
<el-table-column label="序号" type="index" header-align="center" align="center"
|
|
width="50">
|
|
<template scope="scope">
|
|
<span>{{scope.$index+(pageForm.pageNumber - 1) * pageForm.pageSize + 1}} </span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="username" label="姓名" header-align="center" align="center"
|
|
sortable></el-table-column>
|
|
<el-table-column prop="loginname" label="工资号" header-align="center"
|
|
align="center"></el-table-column>
|
|
<el-table-column prop="dwname" label="单位" header-align="center" align="center"
|
|
sortable
|
|
show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="ghname" label="分工会" header-align="center" align="center"
|
|
sortable
|
|
show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="hdname" label="活动主题" header-align="center"
|
|
align="center"></el-table-column>
|
|
<el-table-column prop="hdlbname" label="活动类别" header-align="center"
|
|
align="center"
|
|
sortable></el-table-column>
|
|
<el-table-column prop="zplbname" label="作品类别" header-align="center"
|
|
align="center"
|
|
sortable></el-table-column>
|
|
|
|
<el-table-column prop="hdsbsj" label="上传时间" header-align="center"
|
|
align="center">
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="auditState" header-align="center"
|
|
label="审核状态" sortable>
|
|
<template scope="scope">
|
|
<span :style="'color:'+scope.row.statecolor">{{scope.row.statename}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" header-align="center" label="操作" width="200">
|
|
<template slot-scope="scope">
|
|
<el-button @click="viewInfo(scope)" size="mini" type="primary">查看
|
|
</el-button>
|
|
<el-button @click="doDelete(scope.row.id)" size="mini" type="danger">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-row class="el-pagination-container">
|
|
<el-pagination
|
|
@size-change="pageSizeChange"
|
|
@current-change="pageNumberChange"
|
|
:current-page="pageForm.pageNumber"
|
|
:page-sizes="[10, 20, 30, 50]"
|
|
:page-size="pageForm.pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="pageForm.totalCount">
|
|
</el-pagination>
|
|
</el-row>
|
|
</el-card>
|
|
</template>
|
|
|
|
<template #view>
|
|
<info ref="info" @playvideo="playvideo"></info>
|
|
</template>
|
|
|
|
</guava>
|
|
|
|
|
|
<el-dialog :visible.sync="fileDialogVisible" class="filedialog" @close="filedialogClose"
|
|
:close-on-click-modal="false">
|
|
<div id="videoContainer"></div>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
window.vue = new Vue({
|
|
el: '#app',
|
|
mixins: [initTableMixins],
|
|
data: function () {
|
|
return {
|
|
units: [],
|
|
unions: [],
|
|
hasSuperAdminOrXghRole: "${@shiro.hasAnyRoles('sysadmin','A06','H10')}" === 'true' ? true : false,
|
|
audio: {
|
|
name: '东西（Cover：林俊呈）',
|
|
artist: '纳豆',
|
|
url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
|
|
cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
|
|
lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
|
|
},
|
|
tableData: [],
|
|
pageForm: {
|
|
year: new Date().getFullYear() + '',
|
|
searchName: "u.username",
|
|
pageNumber: 1,
|
|
pageSize: 10,
|
|
totalCount: 0,
|
|
hdid: '',
|
|
hdlb: '',
|
|
zplb: '',
|
|
stateId: '',
|
|
unit: '',
|
|
union: '',
|
|
},
|
|
hdxxlist: [],
|
|
videoSrc: '',
|
|
viewDialogVisible: false,
|
|
fileDialogVisible: false,
|
|
imgSrc: '',
|
|
fileList: [],
|
|
viewData: {},
|
|
imgtype: ['gif', 'jpg', 'png', 'jpeg'],
|
|
videotype: ['flv', 'swf', 'mkv', 'avi', 'rm', 'rmvb', 'wmv', 'mp4', 'mov', 'mpg', 'mpeg'],
|
|
doctype: ['doc', 'docx'],
|
|
audiotype: ['mp3', 'wma', 'flac', 'wav', 'm4a', 'amr', 'au'],
|
|
prevImgList: [],
|
|
img2List: [],
|
|
videoList: [],
|
|
docList: [],
|
|
audioList: [],
|
|
ckusername: '',//当前查看的人的姓名 下载的时候一起传过去，
|
|
hdlblist: [],
|
|
hdzplblist: [],
|
|
yearActivityList: [],
|
|
auditStateList: [],
|
|
}
|
|
},
|
|
watch: {
|
|
'pageForm.hdid'(val) {
|
|
this.$set(this.pageForm, "hdlb", '')
|
|
this.$set(this.pageForm, "zplb", '')
|
|
},
|
|
'pageForm.hdlb'(val) {
|
|
this.$set(this.pageForm, "zplb", '')
|
|
}
|
|
},
|
|
components: {
|
|
'info': httpVueLoader('/components/hd/hdwmInfo.vue'),
|
|
},
|
|
methods: {
|
|
yearChange(val) {
|
|
let activityList = []
|
|
if (val === null) {
|
|
this.yearActivityList.map(v => {
|
|
activityList = activityList.concat(v.children)
|
|
})
|
|
} else {
|
|
let enen = this.yearActivityList.filter(v => v.value == val)
|
|
enen.map(v => {
|
|
activityList = activityList.concat(v.children)
|
|
})
|
|
}
|
|
this.hdxxlist = activityList
|
|
this.$set(this.pageForm, "hdid", '')
|
|
this.$set(this.pageForm, "hdlb", '')
|
|
this.$set(this.pageForm, "zplb", '')
|
|
},
|
|
async unionChange() {
|
|
this.$set(this.pageForm, "unit", '')
|
|
this.units = await getUnits(this.pageForm.union)
|
|
},
|
|
|
|
hdchange(v) {
|
|
this.$set(this.pageForm, 'hdlb', '');
|
|
this.$set(this.pageForm, 'zplb', '');
|
|
$.post('/platform/hd/childhd/zpxx/gethdlblist', {id: v}).then(data => {
|
|
if (data.code == 0) {
|
|
this.hdlblist = data.data;
|
|
}
|
|
});
|
|
},
|
|
hdlbchange(id) {
|
|
this.$set(this.pageForm, 'zplb', '');
|
|
$.post('/platform/hd/childhd/zpxx/gethdzplblist', {id: id}).then(data => {
|
|
if (data.code == 0) {
|
|
this.hdzplblist = data.data;
|
|
}
|
|
});
|
|
},
|
|
async pageData() {
|
|
var self = this;
|
|
sublime.showLoadingbar();
|
|
$.post(base + '/platform/hd/wmhd/pageData', self.pageForm, function (data) {
|
|
sublime.closeLoadingbar();
|
|
if (data.code == 0) {
|
|
self.tableData = data.data.list;
|
|
self.pageForm.totalCount = data.data.totalCount;
|
|
}
|
|
});
|
|
},
|
|
pageSizeChange: function (val) {
|
|
this.pageForm.pageSize = val;
|
|
this.pageData();
|
|
},
|
|
pageNumberChange: function (val) {
|
|
this.pageForm.pageNumber = val;
|
|
this.pageData();
|
|
},
|
|
async viewInfo(scope) {
|
|
|
|
this.$refs.info.getInfo(scope.row.id)
|
|
this.$refs.guava.view()
|
|
|
|
|
|
},
|
|
playvideo: function (fjurl) {
|
|
var self = this;
|
|
self.fileDialogVisible = true;
|
|
self.$nextTick(function () {
|
|
var vc = document.getElementById('videoContainer');
|
|
var newVideo = document.createElement("div");//创建一个标签
|
|
newVideo.innerHTML = '<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"></video>';
|
|
vc.appendChild(newVideo);
|
|
var option = {autoplay: false, language: 'zh-CN'};
|
|
var myPlayer = videojs('my-video', option, function onPlayerReady() {
|
|
var myPlayer = this;
|
|
myPlayer.src({src: fjurl, type: "video/mp4"}); /*videojs.log("播放器已经准备好了!");*/
|
|
//this.play();
|
|
});
|
|
})
|
|
},
|
|
filedialogClose: function () {
|
|
//关闭的时候需要销毁video 但是随之dom元素也会被删除！！！！
|
|
videojs('my-video').dispose();
|
|
},
|
|
viewdialogClose: function () {
|
|
//停止播放音频
|
|
var audio = document.getElementById('amusic');
|
|
if (audio != null) {
|
|
document.getElementById('amusic').pause();
|
|
}
|
|
},
|
|
exportWork() {
|
|
let {hdid, hdlb, zplb, union, unit, stateId} = this.pageForm;
|
|
if (hdid === '') {
|
|
this.$message.warning('请先选择活动主题');
|
|
return;
|
|
}
|
|
let hdarr = this.hdxxlist.filter(o => {
|
|
return o.value == hdid;
|
|
});
|
|
let hdname = hdarr[0].label;
|
|
window.open('/platform/hd/wmhd/exportWork?hdid=' + hdid +
|
|
'&hdname=' + hdname +
|
|
"&hdlb=" + hdlb +
|
|
"&zplb=" + zplb +
|
|
"&union=" + union +
|
|
"&unit=" + unit +
|
|
"&stateId=" + stateId);
|
|
},
|
|
exportExcel: function () {
|
|
let {hdid, hdlb, zplb, union, unit, stateId} = this.pageForm;
|
|
if (hdid === '') {
|
|
this.$message.warning('请先选择活动主题');
|
|
return;
|
|
}
|
|
let hdarr = this.hdxxlist.filter(o => {
|
|
return o.value == hdid;
|
|
});
|
|
let hdname = hdarr[0].label;
|
|
window.open('/platform/hd/wmhd/exportExcel?hdid=' + hdid +
|
|
'&hdname=' + hdname +
|
|
"&hdlb=" + hdlb +
|
|
"&zplb=" + zplb +
|
|
"&union=" + union +
|
|
"&unit=" + unit +
|
|
"&stateId=" + stateId);
|
|
},
|
|
doSearch: function () {
|
|
this.pageForm.pageNumber = 1;
|
|
this.pageData();
|
|
},
|
|
downLoad: function (item) {
|
|
window.open('/platform/hd/wmhd/download?filepath=' + item.fjurl + '&filename=' + item.fjname + "&username=" + this.ckusername);
|
|
//window.location.href='/platform/hd/wmhd/download?filepath='+item.fjurl+'&filename='+item.fjname+"&username="+this.ckusername;
|
|
},
|
|
YlDoc: function (item) {
|
|
var self = this;
|
|
window.open('/platform/hd/wmhd/YlDoc?fjurl=' + item.fjurl);
|
|
},
|
|
async initHdxxlist() {
|
|
// await $.post(base + '/platform/hd/wmhd/initHdxxlist').then(data => {
|
|
// if (data.code == 0) {
|
|
// this.hdxxlist = data.data;
|
|
// this.pageForm.hdids = [new Date().getFullYear(), this.hdxxlist.find(v => v.value == new Date().getFullYear() + "").children[0].value]
|
|
// this.pageForm.hdid = this.hdxxlist.find(v => v.value == new Date().getFullYear() + "").children[0].value
|
|
// }
|
|
// });
|
|
await $.post(base + '/platform/hd/wmhd/initHdxxlist').then(data => {
|
|
if (data.code == 0) {
|
|
this.yearActivityList = data.data
|
|
let activityList = []
|
|
data.data.map(v => {
|
|
activityList = activityList.concat(v.children)
|
|
})
|
|
this.hdxxlist = activityList
|
|
}
|
|
});
|
|
},
|
|
async doDelete(id) {
|
|
const confirm = await this.$confirm('确定要删除吗, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
if (confirm) {
|
|
const resp = await $.post(loc() + '/doDelete', {id: id})
|
|
if (resp.code === 0) {
|
|
this.notifySuccess(resp.msg)
|
|
this.doSearch()
|
|
} else {
|
|
this.notifyError(resp.msg)
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
async getAuditStateByModule() {
|
|
const {data} = await $.post(loc() + '/getAuditStateByModule')
|
|
this.auditStateList = data
|
|
|
|
}
|
|
},
|
|
async created() {
|
|
await this.initHdxxlist();
|
|
if (this.hdxxlist && this.hdxxlist.length > 0) {
|
|
this.pageForm.hdid = this.hdxxlist[0].value
|
|
this.hdchange(this.pageForm.hdid)
|
|
}
|
|
await this.pageData();
|
|
|
|
|
|
this.unions = await getUnions(null)
|
|
this.units = await getUnits(null)
|
|
await this.getAuditStateByModule()
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|