|
|
|
@ -65,8 +65,8 @@ |
|
|
|
|
<el-table-column label="操作" align="center" width="280"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
|
|
|
|
<el-button type="text" @click="copy(scope.row)">下载</el-button> |
|
|
|
|
<el-button type="text" @click="manage(scope.row)" v-auth>预览</el-button> |
|
|
|
|
<el-button type="text" @click="download(scope.row)">下载</el-button> |
|
|
|
|
<el-button type="text" @click="preview(scope.row)" v-auth>预览</el-button> |
|
|
|
|
<el-button type="text" @click="del(scope.row)" v-auth>删除</el-button> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
@ -89,15 +89,61 @@ |
|
|
|
|
<el-button type="primary" @click="sectionNameSubmit">确定</el-button> |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div v-show="previewImg" class="el-image-viewer__wrapper" :class="{ active: previewImg }" style="z-index: 2000"> |
|
|
|
|
<div class="el-image-viewer__mask"></div> |
|
|
|
|
<span class="el-image-viewer__btn el-image-viewer__close" @click="previewImg = ''"><i class="el-icon-circle-close" |
|
|
|
|
style="color: #fff"></i></span> |
|
|
|
|
<div class="el-image-viewer__canvas"> |
|
|
|
|
<img :src="previewImg" class="el-image-viewer__img" |
|
|
|
|
style="transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;"> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-show="iframeSrc || videoSrc" class="el-image-viewer__wrapper" :class="{ active: iframeSrc }" |
|
|
|
|
style="z-index: 2000"> |
|
|
|
|
<div class="el-image-viewer__mask"></div> |
|
|
|
|
<span class="el-image-viewer__btn el-image-viewer__close" :class="{ 'doc-close': isWord }" |
|
|
|
|
:style="{ top: isWord ? '50px' : '5px' }" @click="closeIframe"><i class="el-icon-circle-close" |
|
|
|
|
style="color: #fff"></i></span> |
|
|
|
|
<div class="el-image-viewer__canvas"> |
|
|
|
|
<iframe v-if="iframeSrc" class="fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe> |
|
|
|
|
<video v-if="videoSrc" class="video" width="1200" height="600" autoplay controls> |
|
|
|
|
<source :src="videoSrc" type="video/mp4"> |
|
|
|
|
您的浏览器不支持 video 标签。 |
|
|
|
|
</video> |
|
|
|
|
<template v-if="showMask"> |
|
|
|
|
<div class="mask" style="width: 200px;height: 30px;top: 53px;right: 320px"></div> |
|
|
|
|
<div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div> |
|
|
|
|
</template> |
|
|
|
|
<template v-if="showMask1"> |
|
|
|
|
<div class="word-mask1" style="width: 200px;height: 50px;"></div> |
|
|
|
|
<div class="word-mask" style="height: 40px;top: 48px;"></div> |
|
|
|
|
<div class="word-mask2" style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div> |
|
|
|
|
</template> |
|
|
|
|
<template v-if="showMask2 && iframeSrc"> |
|
|
|
|
<div class="excel-mask1" style="height: 48px;"></div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-show="playAuth" class="el-image-viewer__wrapper" :class="{ active: playAuth }" style="z-index: 2000"> |
|
|
|
|
<div class="el-image-viewer__mask"></div> |
|
|
|
|
<span class="el-image-viewer__btn el-image-viewer__close" @click="closePlayer"><i class="el-icon-circle-close" |
|
|
|
|
style="color: #fff"></i></span> |
|
|
|
|
<div class="player" id="player"></div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<Pdf :visible.sync="pdfVisible" :src.sync="pdfSrc" /> |
|
|
|
|
<div class="player-download" id="playerDownload"></div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import Util from '@/libs/util' |
|
|
|
|
import Bus from '@/libs/bus' |
|
|
|
|
import qs from 'qs' |
|
|
|
|
import Pdf from "@/components/pdf"; |
|
|
|
|
export default { |
|
|
|
|
name: "match", |
|
|
|
|
components: { Pdf }, |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
active: this.$route.query.type || 'tab1', |
|
|
|
@ -216,20 +262,10 @@ export default { |
|
|
|
|
page: +this.$route.query.page || 1, |
|
|
|
|
pageSize: 10, |
|
|
|
|
total: 0, |
|
|
|
|
transferPublishStatus: ["未发布", "已发布"], |
|
|
|
|
modifyVisible: false, |
|
|
|
|
curRow: { |
|
|
|
|
playingStages: [] |
|
|
|
|
}, |
|
|
|
|
timer: null, |
|
|
|
|
pickerOptions: { |
|
|
|
|
shortcuts: [{ |
|
|
|
|
text: '此刻', |
|
|
|
|
onClick (picker) { |
|
|
|
|
picker.$emit('pick', new Date(Date.now() + 5000)) |
|
|
|
|
} |
|
|
|
|
}] |
|
|
|
|
}, |
|
|
|
|
loading: false, |
|
|
|
|
now: '', |
|
|
|
|
|
|
|
|
@ -238,6 +274,25 @@ export default { |
|
|
|
|
sectionForm: { |
|
|
|
|
sectionName: '' |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
fileType: "", |
|
|
|
|
videoSrc: '', |
|
|
|
|
playAuth: "", |
|
|
|
|
player: null, |
|
|
|
|
previewImg: "", |
|
|
|
|
iframeSrc: "", |
|
|
|
|
curFile: {}, |
|
|
|
|
isAddSection: false, |
|
|
|
|
isWord: false, |
|
|
|
|
isPPT: false, |
|
|
|
|
isExcel: false, |
|
|
|
|
showMask: false, |
|
|
|
|
showMask1: false, |
|
|
|
|
showMask2: false, |
|
|
|
|
loadIns: null, |
|
|
|
|
pdfVisible: false, |
|
|
|
|
pdfSrc: "", |
|
|
|
|
previewing: false, |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
@ -284,15 +339,7 @@ export default { |
|
|
|
|
this.$router.push('/match').catch(() => { }) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// websocket实时刷新 |
|
|
|
|
Bus.$on('matchSocket', () => { |
|
|
|
|
this.getData() |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
this.getData() |
|
|
|
|
this.$once('hook:beforeDestroy', function () { |
|
|
|
|
clearInterval(this.timer) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
async getData () { |
|
|
|
@ -327,65 +374,22 @@ export default { |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
initData () { |
|
|
|
|
this.page = 1; |
|
|
|
|
this.getData(); |
|
|
|
|
}, |
|
|
|
|
// 缓存当前页面和参数,详情页返回到列表的时候直接取该url |
|
|
|
|
setReferrer () { |
|
|
|
|
this.$store.commit('setReferrer', `${this.$route.path}?${qs.stringify(this.form)}&page=${this.page}`) |
|
|
|
|
}, |
|
|
|
|
add () { |
|
|
|
|
this.setReferrer() |
|
|
|
|
this.$router.push("/addMatch"); |
|
|
|
|
}, |
|
|
|
|
edit (row, chapterId) { |
|
|
|
|
this.chapterId = chapterId; |
|
|
|
|
this.sectionId = row.id; |
|
|
|
|
this.sectionForm.sectionName = row.name; |
|
|
|
|
this.sectionNameVisible = true; |
|
|
|
|
}, |
|
|
|
|
// 复制 |
|
|
|
|
copy (row) { |
|
|
|
|
this.$confirm('确定要复制吗', "提示", { |
|
|
|
|
type: "warning" |
|
|
|
|
}).then(async () => { |
|
|
|
|
await this.$post(`${this.api.copyCompetition}?competitionId=${row.id}`) |
|
|
|
|
Util.successMsg('复制成功') |
|
|
|
|
this.initData() |
|
|
|
|
}).catch(() => { }) |
|
|
|
|
}, |
|
|
|
|
// 管理 |
|
|
|
|
manage (row) { |
|
|
|
|
this.setReferrer() |
|
|
|
|
this.$router.push(`/matchManage?id=${row.id}&name=${row.competitionName}`) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
changeType () { |
|
|
|
|
this.$refs.table.clearSelection(); |
|
|
|
|
this.initData(); |
|
|
|
|
}, |
|
|
|
|
// 大赛来源回调 |
|
|
|
|
sourceChange (val) { |
|
|
|
|
this.initData() |
|
|
|
|
}, |
|
|
|
|
del (row) { |
|
|
|
|
this.$confirm("删除后用户将无法再查看和使用此资源,确定删除?", "提示", { |
|
|
|
|
type: "warning" |
|
|
|
|
}) |
|
|
|
|
.then(() => { |
|
|
|
|
this.$post(`${this.api.batchDeleteCompetition}?competitionIds=${row.id}`).then(res => { |
|
|
|
|
Util.successMsg("删除成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
.catch(() => { |
|
|
|
|
}); |
|
|
|
|
initData () { |
|
|
|
|
this.page = 1; |
|
|
|
|
this.getData(); |
|
|
|
|
}, |
|
|
|
|
handleSelectionChange (val) { |
|
|
|
|
this.multipleSelection = val; |
|
|
|
|
}, |
|
|
|
|
handleCurrentChange (val) { |
|
|
|
|
this.page = val; |
|
|
|
|
this.$router.push(`match?page=${val}`) |
|
|
|
|
this.getData(); |
|
|
|
|
}, |
|
|
|
|
// 批量删除 |
|
|
|
|
delAllSelection () { |
|
|
|
|
if (this.multipleSelection.length) { |
|
|
|
@ -405,42 +409,133 @@ export default { |
|
|
|
|
this.$message.warning("请先选择赛事 !"); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
handleCurrentChange (val) { |
|
|
|
|
this.page = val; |
|
|
|
|
this.$router.push(`match?page=${val}`) |
|
|
|
|
this.getData(); |
|
|
|
|
|
|
|
|
|
edit (row, chapterId) { |
|
|
|
|
this.chapterId = chapterId; |
|
|
|
|
this.sectionId = row.id; |
|
|
|
|
this.sectionForm.sectionName = row.name; |
|
|
|
|
this.sectionNameVisible = true; |
|
|
|
|
}, |
|
|
|
|
transferTime (date, type) { |
|
|
|
|
if (date == "0000-00-00 00:00:00") return "---"; |
|
|
|
|
return date; |
|
|
|
|
// 下载资源 |
|
|
|
|
download (row) { |
|
|
|
|
const { fileType, fileId } = row |
|
|
|
|
// 下载ppt |
|
|
|
|
if (fileType === 'pptx') { |
|
|
|
|
this.downloadFile(row.originalFileName || row.name, row.fileUrl) |
|
|
|
|
} else if (fileId) { |
|
|
|
|
// 阿里云点播视频,先生成视频,再拿到视频地址去下载(现在已经去掉视频点播的方法,但是还需要兼容历史数据) |
|
|
|
|
this.$get(`${this.api.getPlayAuth}/${fileId}`).then(res => { |
|
|
|
|
new Aliplayer({ |
|
|
|
|
id: "playerDownload", |
|
|
|
|
width: "100%", |
|
|
|
|
autoplay: false, |
|
|
|
|
vid: fileId, |
|
|
|
|
playauth: res.playAuth, |
|
|
|
|
encryptType: 1 //当播放私有加密流时需要设置。 |
|
|
|
|
}, player => { |
|
|
|
|
this.downloadFile(row.name, player._urls[0].Url) |
|
|
|
|
}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
} else { |
|
|
|
|
this.downloadFile(row.name + '.' + row.fileType, row.fileUrl) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
async switchOff (val, row) { |
|
|
|
|
this.$post(this.api.disabledEventsCompetition, { |
|
|
|
|
competitionId: row.id, |
|
|
|
|
isOpen: val, |
|
|
|
|
type: 0 // 禁用平台来源(0中台,1职站) |
|
|
|
|
}).then(res => { |
|
|
|
|
Util.successMsg(val == 1 ? '禁用成功' : '启用成功') |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
|
|
|
|
|
await this.$post(`${this.api.refreshPageNotification}?content=1`) |
|
|
|
|
preview (row) { |
|
|
|
|
if (this.transferType(row.fileType) == "视频") { |
|
|
|
|
// 阿里云视频点播 |
|
|
|
|
if (row.fileId) { |
|
|
|
|
this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => { |
|
|
|
|
this.playAuth = res.playAuth; |
|
|
|
|
if (this.player) { |
|
|
|
|
this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth); |
|
|
|
|
} else { |
|
|
|
|
this.player = new Aliplayer({ |
|
|
|
|
id: "player", |
|
|
|
|
width: "100%", |
|
|
|
|
autoplay: false, |
|
|
|
|
vid: row.fileId, |
|
|
|
|
playauth: this.playAuth, |
|
|
|
|
encryptType: 1 //当播放私有加密流时需要设置。 |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}).catch(res => { }); |
|
|
|
|
} else { |
|
|
|
|
this.videoSrc = row.fileUrl |
|
|
|
|
} |
|
|
|
|
} else if (this.transferType(row.fileType) == "图片") { |
|
|
|
|
this.previewImg = row.fileUrl; |
|
|
|
|
} else if (row.fileType == "pdf") { |
|
|
|
|
this.pdfSrc = row.fileUrl; |
|
|
|
|
this.pdfVisible = true; |
|
|
|
|
} else { |
|
|
|
|
this.$get(`${this.api.getSubsection}/${row.id}`).then(res => { |
|
|
|
|
this.previewing = true; |
|
|
|
|
this.loadIns = Loading.service(); |
|
|
|
|
this.$route.fullPath.includes("#file") || history.pushState({ file: true }, "文件预览", "#" + this.$route.fullPath + "#file"); |
|
|
|
|
if (row.fileType == "pptx") { |
|
|
|
|
this.isPPT = true; |
|
|
|
|
this.isWord = false; |
|
|
|
|
this.isExcel = false; |
|
|
|
|
} else if (row.fileType == "doc" || row.fileType == "docx") { |
|
|
|
|
this.isPPT = false; |
|
|
|
|
this.isWord = true; |
|
|
|
|
this.isExcel = false; |
|
|
|
|
} else if (row.fileType == "xls" || row.fileType == "xlsx") { |
|
|
|
|
this.isExcel = true; |
|
|
|
|
this.isPPT = false; |
|
|
|
|
this.isWord = false; |
|
|
|
|
} else { |
|
|
|
|
this.isPPT = false; |
|
|
|
|
this.isWord = false; |
|
|
|
|
this.isExcel = false; |
|
|
|
|
} |
|
|
|
|
this.iframeSrc = res.previewUrl; |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
this.iframeOnload(); |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
del (row) { |
|
|
|
|
this.$confirm("此删除操作不可逆,是否确认删除选中项?", "提示", { |
|
|
|
|
type: "warning" |
|
|
|
|
}) |
|
|
|
|
.then(() => { |
|
|
|
|
this.$del(`${this.api.deleteSubsection}/${row.id}`).then(res => { |
|
|
|
|
row.fileUrl && Oss.del(row.fileUrl) |
|
|
|
|
this.$message.success("删除成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
}).catch(() => { }) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
sectionNameSubmit () { |
|
|
|
|
if (!this.sectionForm.sectionName) return this.$message.warning("请填写资源名称"); |
|
|
|
|
if (!this.sectionForm.sectionName) return this.$message.warning("请填写资源名称") |
|
|
|
|
let data = { |
|
|
|
|
id: this.sectionId, |
|
|
|
|
cid: this.id, |
|
|
|
|
chapterId: this.chapterId, |
|
|
|
|
name: this.sectionForm.sectionName |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
this.$put(this.api.editSubsection, data).then(res => { |
|
|
|
|
this.$message.success("修改成功"); |
|
|
|
|
this.sectionNameVisible = false; |
|
|
|
|
this.getData(); |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
}); |
|
|
|
|
this.$message.success("修改成功") |
|
|
|
|
this.sectionNameVisible = false |
|
|
|
|
this.getData() |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
}, |
|
|
|
|
closePlayer () { |
|
|
|
|
this.playAuth = ""; |
|
|
|
|
this.player.pause(); |
|
|
|
|
}, |
|
|
|
|
closeIframe () { |
|
|
|
|
this.iframeSrc = ""; |
|
|
|
|
this.videoSrc = '' |
|
|
|
|
this.showMask = false; |
|
|
|
|
this.showMask1 = false; |
|
|
|
|
this.showMask2 = false; |
|
|
|
|
this.previewing = false; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|