You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1001 lines
30 KiB
1001 lines
30 KiB
<template> |
|
<div> |
|
<el-card shadow="hover" class="mgb20"> |
|
<div class="flex-between"> |
|
<el-page-header @back="back" :content="name + '/' + (sorting ? '编辑排序' : '内容设置')"></el-page-header> |
|
</div> |
|
</el-card> |
|
|
|
<div class="page"> |
|
<div class="left"> |
|
<div class="flex-between"> |
|
<h6 class="title">课程目录</h6> |
|
<el-button type="primary" size="mini" @click="addChapter" v-auth="'/curriculum:内容设置:添加章节'">新增章节</el-button> |
|
</div> |
|
<ul class="chapters"> |
|
<li v-for="(chapter, i) in chapters" :key="i" :class="{ active: chapterId === chapter.id }"> |
|
<span class="name ellipsis" @click="chapterClick(chapter)">{{ chapter.name }}</span> |
|
<el-link :underline="false" type="primary" @click="editChapter(chapter)">修改名称</el-link> |
|
<el-link v-if="i" class="del" :underline="false" type="primary" @click="delChapter(chapter.id)">删除</el-link> |
|
</li> |
|
</ul> |
|
</div> |
|
<div class="right"> |
|
<div class="flex-between"> |
|
<el-input style="width: 300px" placeholder="请输入资源名称" prefix-icon="el-icon-search" v-model="keyword" |
|
clearable></el-input> |
|
<div> |
|
<el-button class="action-btn" @click="showSource" v-auth="'/curriculum:内容设置:修改章节名称'">添加系统资源</el-button> |
|
<el-button class="action-btn" @click="addSection" v-auth="'/curriculum:内容设置:添加小节'">本地上传</el-button> |
|
<el-button class="action-btn" @click="move" v-auth="'/curriculum:内容设置:删除章节'">批量移动</el-button> |
|
<el-button class="action-btn" v-auth="'/curriculum:内容设置:删除章节'" @click="batchDelSection">批量移除</el-button> |
|
</div> |
|
</div> |
|
|
|
<ul class="sections"> |
|
<li v-for="(section, i) in sections" :key="i"> |
|
<div class="section-left"> |
|
<el-checkbox v-model="section.check"></el-checkbox> |
|
<span class="serial">{{ i + 1 }}.</span> |
|
<img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt=""> |
|
<img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt=""> |
|
<img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" |
|
src="@/assets/img/exts/word.png" alt=""> |
|
<img v-else-if="section.fileType === 'xlsx' || section.fileType === 'xls'" |
|
src="@/assets/img/exts/excel.png" alt=""> |
|
<img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt=""> |
|
<img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt=""> |
|
<img v-else src="@/assets/img/exts/pic.png" alt=""> |
|
<span class="name">{{ section.name }}</span> |
|
</div> |
|
<div class="section-actions"> |
|
<el-button type="text" @click="download(section)" v-auth="'/curriculum:内容设置:下载'">下载</el-button> |
|
<el-button type="text" @click="preview(section)" v-auth="'/curriculum:内容设置:查看'">预览</el-button> |
|
<el-button type="text" @click="editSectionName(section)" |
|
v-auth="'/curriculum:内容设置:修改小节名称'">修改资源名称</el-button> |
|
<el-button type="text" @click="switchFile(section)" v-auth="'/curriculum:内容设置:更换文件'">更换</el-button> |
|
<el-button type="text" @click="delSection(section)" v-auth="'/curriculum:内容设置:删除小节'">移除</el-button> |
|
</div> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<el-dialog :title="chapterId ? '编辑章节' : '新增章节'" :visible.sync="chapterVisible" width="540px" |
|
:close-on-click-modal="false"> |
|
<el-form> |
|
<el-form-item> |
|
<el-input placeholder="请输入章节名称，便于对小节归类" v-model="chapterName" maxlength="50"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="chapterVisible = false">取消</el-button> |
|
<el-button type="primary" @click="chapterSubmit">确定</el-button> |
|
</span> |
|
</el-dialog> |
|
|
|
<el-dialog title="添加小节" :visible.sync="sectionVisible" width="540px" @close="closeSection" |
|
:close-on-click-modal="false"> |
|
<el-form ref="form" :model="sectionForm" label-width="80px" @submit.native.prevent> |
|
<el-form-item label="资源添加"> |
|
<Upload :max-size="100000" :file-list="uploadList" :on-remove="handleRemove" @beforeUpload="beforeUpload" |
|
@onSuccess="uploadSuccess"> |
|
<template slot="tip"> |
|
<p>视频请上传MP4格式，大小不超过150M；office文件大小不要超过10M</p> |
|
</template> |
|
</Upload> |
|
</el-form-item> |
|
<el-form-item label="小节名称"> |
|
<el-input placeholder="请输入小节名称" v-model.trim="sectionForm.sectionName" maxlength="50" |
|
@keyup.enter.native="sectionSubmit()"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="sectionVisible = false">取消</el-button> |
|
<el-button type="primary" @click="sectionSubmit">确定</el-button> |
|
</span> |
|
</el-dialog> |
|
|
|
<el-dialog title="更换文件" :visible.sync="switchVisible" width="540px" :close-on-click-modal="false" |
|
@close="closeSwitch"> |
|
<div style="text-align: center"> |
|
<Upload :max-size="100000" :file-list="uploadList" :on-remove="handleRemove" @beforeUpload="beforeUpload" |
|
@onSuccess="uploadSuccess"> |
|
<div slot="tip"></div> |
|
</Upload> |
|
</div> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="switchVisible = false">取消</el-button> |
|
<el-button type="primary" @click="switchSubmit">确定</el-button> |
|
</span> |
|
</el-dialog> |
|
|
|
<el-dialog title="修改小节名称" :visible.sync="sectionNameVisible" width="540px" :close-on-click-modal="false"> |
|
<el-form @submit.native.prevent> |
|
<el-form-item> |
|
<el-input placeholder="请输入小节名称" v-model="sectionForm.sectionName" maxlength="50" |
|
@keyup.enter.native="sectionNameSubmit()"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="sectionNameVisible = false">取消</el-button> |
|
<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> |
|
|
|
<el-dialog title="资源移动" :visible.sync="moveVisible" :close-on-click-modal="false" width="330px"> |
|
<el-form> |
|
<el-form-item label="目标章节"> |
|
<el-select v-model="moveForm.id" placeholder="请选择目标章节" @change="chapterChange"> |
|
<el-option v-for="(item, i) in chapters" :key="i" :label="item.name" :value="item.id"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="目标排序"> |
|
<el-select v-model="moveForm.sort" placeholder="请选择目标排序"> |
|
<el-option v-for="(item, i) in sortList" :key="i" :label="item.name" :value="item.id"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="moveVisible = false">取消</el-button> |
|
<el-button type="primary" @click="moveConfirm">确定</el-button> |
|
</span> |
|
</el-dialog> |
|
|
|
<Source :visible.sync="sourceVisible" /> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { Loading } from "element-ui"; |
|
import Pdf from "@/components/pdf"; |
|
import Upload from '@/components/upload'; |
|
import Oss from '@/components/upload/upload.js' |
|
import Util from '@/libs/util' |
|
import Source from './source' |
|
|
|
export default { |
|
data () { |
|
return { |
|
name: this.$route.query.name, |
|
headers: { |
|
token: sessionStorage.getItem('token') |
|
}, |
|
id: this.$route.query.cid, |
|
originChapters: [], |
|
chapters: [], |
|
multipleSelection: [], |
|
sorting: false, |
|
uploading: false, |
|
uploadList: [], |
|
chapterVisible: false, |
|
chapterId: "", |
|
chapterName: "", |
|
sectionVisible: false, |
|
sectionName: "", |
|
sectionId: "", |
|
switchVisible: false, |
|
sectionNameVisible: false, |
|
|
|
rules: { |
|
sectionName: [ |
|
{ required: true, message: "请输入小节名称", trigger: "blur" } |
|
], |
|
}, |
|
sectionForm: { |
|
sectionName: '' |
|
}, |
|
keyword: '', |
|
searchTimer: null, |
|
fileId: "", |
|
fileName: "", |
|
fileUrl: "", |
|
originalFileName: "", |
|
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, |
|
showProgress: false, |
|
progressPercent: 0, |
|
moveVisible: false, |
|
checkList: [], |
|
sortList: [ |
|
{ |
|
id: 'bottom', |
|
name: '置末' |
|
}, |
|
{ |
|
id: 'top', |
|
name: '置顶' |
|
} |
|
], |
|
moveForm: { |
|
id: '', |
|
sort: 'bottom' |
|
}, |
|
sourceVisible: false, |
|
sections: [] |
|
}; |
|
}, |
|
components: { Pdf, Upload, Source }, |
|
mounted () { |
|
this.insertScript(); |
|
this.id && this.getData(); |
|
// 处理预览资源后返回弹框不会消失的问题 |
|
if (window.history && window.history.pushState) { |
|
history.pushState(null, null, document.URL); |
|
window.addEventListener("popstate", this.back, false); |
|
} |
|
}, |
|
destroyed () { |
|
window.removeEventListener("popstate", this.back, false); |
|
}, |
|
methods: { |
|
getData () { |
|
this.$get(`${this.api.queryChaptersAndSubsections}/${this.id}`).then(res => { |
|
const list = res.chapterList |
|
if (list.length) { |
|
list.forEach(e => { |
|
e.subsectionList.forEach(n => { |
|
n.check = false |
|
}) |
|
}) |
|
if (this.chapterId) { |
|
const cur = list.find(e => e.id === this.chapterId) |
|
this.sections = cur ? cur.subsectionList : [] |
|
} else { |
|
this.chapterClick(list[0]) |
|
} |
|
} |
|
this.chapters = list |
|
}).catch(err => { }) |
|
}, |
|
// 处理多选 |
|
handleSelectionChange (val) { |
|
this.multipleSelection = val |
|
}, |
|
iframeOnload () { |
|
document.querySelector("#fileIframe").onload = e => { |
|
if (this.isPPT) { |
|
this.showMask = true; |
|
} else { |
|
this.showMask = false; |
|
} |
|
if (this.isWord) { |
|
this.showMask1 = true; |
|
} else { |
|
this.showMask1 = false; |
|
} |
|
if (this.isExcel) { |
|
this.showMask2 = true; |
|
} else { |
|
this.showMask2 = false; |
|
} |
|
this.loadIns.close(); |
|
}; |
|
}, |
|
insertScript () { |
|
const linkTag = document.createElement("link"); |
|
linkTag.rel = "stylesheet"; |
|
linkTag.href = "https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css"; |
|
document.body.appendChild(linkTag); |
|
|
|
const scriptTag = document.createElement("script"); |
|
scriptTag.type = "text/javascript"; |
|
scriptTag.src = "https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"; |
|
document.body.appendChild(scriptTag); |
|
}, |
|
// 上传文件 |
|
beforeUpload (file) { |
|
this.uploading = true; |
|
this.originalFileName = file.name; |
|
if (this.isAddSection) this.sectionForm.sectionName = file.name.substring(0, file.name.lastIndexOf(".")); |
|
this.fileType = Util.getFileExt(file.name) |
|
this.showProgress = true |
|
}, |
|
handleExceed (files, fileList) { |
|
this.$message.warning( |
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
|
); |
|
}, |
|
uploadSuccess (file) { |
|
this.uploading = false |
|
this.fileId = '' |
|
this.fileType = file.format |
|
this.fileUrl = file.url |
|
this.fileName = file.name |
|
}, |
|
uploadError (err, file, fileList) { |
|
this.$message({ |
|
message: "上传出错，请重试！", |
|
type: "error", |
|
center: true |
|
}); |
|
}, |
|
beforeRemove (file, fileList) { |
|
if ((file.size / 1024 / 1024) < 10) { |
|
return this.$confirm(`确定移除 ${file.name}？`); |
|
} |
|
}, |
|
handleRemove () { |
|
Oss.del(this.fileUrl) |
|
this.fileUrl = '' |
|
}, |
|
uploadSure () { |
|
this.importVisible = false; |
|
this.pageNo = 1; |
|
this.staffGradeId = ""; |
|
this.keyword = ""; |
|
this.getTeacher(); |
|
}, |
|
transferType (ext) { |
|
if ("jpg,jpeg,png,gif,svg,psd".includes(ext)) return "图片"; |
|
if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(ext)) return "视频"; |
|
return ext; |
|
}, |
|
addChapter () { |
|
this.chapterName = ""; |
|
this.chapterId = ""; |
|
this.chapterVisible = true; |
|
}, |
|
sort () { |
|
this.originChapters = JSON.parse(JSON.stringify(this.chapters)) |
|
this.sorting = true |
|
}, |
|
// 批量移动 |
|
move () { |
|
const list = this.chapters |
|
const checkList = [] |
|
list.map(e => { |
|
e.subsectionList.map(n => { |
|
n.check && checkList.push(n) |
|
}) |
|
}) |
|
this.checkList = checkList |
|
if (checkList.length) { |
|
this.moveForm = { |
|
id: '', |
|
sort: 'bottom' |
|
} |
|
this.sortList = [ |
|
{ |
|
id: 'bottom', |
|
name: '置末' |
|
}, |
|
{ |
|
id: 'top', |
|
name: '置顶' |
|
} |
|
] |
|
this.moveVisible = true |
|
} else { |
|
this.$message.warning('请选择小节！') |
|
} |
|
}, |
|
// 批量移除小节 |
|
batchDelSection () { |
|
const list = this.sections.filter(e => e.check) |
|
this.$confirm(list.length ? '此删除操作不可逆，是否确认删除选中项？' : '此删除操作不可逆，是否确认全部资源？', "提示", { |
|
type: "warning" |
|
}).then(async () => { |
|
await this.$post(this.api.deleteSubsectionBatch, { |
|
chapterId: this.chapterId, |
|
subsectionIds: list.map(e => e.id) |
|
}) |
|
this.sections.forEach(e => { |
|
e.check = false |
|
}) |
|
|
|
this.$message.success("删除成功") |
|
this.getData() |
|
}).catch(() => { }) |
|
}, |
|
// 目标章节选择回调 |
|
chapterChange (id) { |
|
const list = [] |
|
// 获取多少个小节 |
|
this.chapters.find(e => e.id === id).subsectionList.map((e, i) => { |
|
list.push({ |
|
id: i, |
|
name: i + 1 |
|
}) |
|
}) |
|
// 置末和置顶写死 |
|
this.sortList = [ |
|
{ |
|
id: 'bottom', |
|
name: '置末' |
|
}, |
|
...list, |
|
{ |
|
id: 'top', |
|
name: '置顶' |
|
} |
|
] |
|
}, |
|
// 资源移动校验 |
|
async moveConfirm () { |
|
let { id, sort } = this.moveForm |
|
if (!id) return this.$message.warning('请选择目标章节') |
|
if (sort === '') return this.$message.warning('请选择目标排序') |
|
if (typeof sort === 'string') sort = sort === 'top' ? 0 : this.sortList.length - 2 // 置顶和置末直接给排序 |
|
this.moveVisible = false |
|
const list = this.checkList |
|
list.map(e => e.check = false) |
|
const ids = list.map(e => e.id) |
|
const { chapters } = this |
|
chapters.map(e => { |
|
e.children = [] |
|
e.subsectionList.map(n => { |
|
if (!ids.includes(n.id)) { |
|
e.children.push(n) |
|
} |
|
}) |
|
e.subsectionList = e.children |
|
delete e.children |
|
if (e.id === id) e.subsectionList.splice(sort, 0, ...list) |
|
}) |
|
|
|
chapters.forEach((n, k) => { |
|
n.sort = k + 1 |
|
n.subsectionList.forEach((j, i) => { |
|
j.sort = i + 1 |
|
j.chapterId = n.id |
|
}) |
|
}) |
|
await this.$post(this.api.reorder, { |
|
chapterVOList: this.chapters |
|
}) |
|
this.getData() |
|
}, |
|
// 选中章节 |
|
chapterClick (row) { |
|
row.subsectionList.map(e => this.$set(e, 'check', false)) |
|
this.sections = row.subsectionList |
|
this.chapterId = row.id |
|
}, |
|
// 编辑章节名称 |
|
editChapter (item) { |
|
this.chapterId = item.id; |
|
this.chapterName = item.name; |
|
this.chapterVisible = true; |
|
}, |
|
delChapter (id) { |
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
this.$del(`${this.api.deleteChapter}/${id}`).then(res => { |
|
this.$message.success("删除成功") |
|
this.getData() |
|
}).catch(res => { }) |
|
}).catch(() => { }) |
|
}, |
|
closeSection () { |
|
this.isAddSection = false; |
|
this.progressPercent = 0 |
|
}, |
|
|
|
// 添加系统资源 |
|
showSource () { |
|
this.sourceVisible = true |
|
}, |
|
addSection (id) { |
|
this.sectionForm.sectionName = '' |
|
this.fileUrl = '' |
|
this.uploadList = [] |
|
this.sectionId = '' |
|
this.isAddSection = true |
|
this.sectionVisible = true |
|
}, |
|
chapterSubmit () { |
|
if (!this.chapterName) return this.$message.warning("请填写章节名称"); |
|
let data = { |
|
cid: this.id, |
|
name: this.chapterName |
|
}; |
|
if (this.chapterId) { |
|
data.id = this.chapterId; |
|
this.$put(this.api.editChapter, data).then(res => { |
|
this.$message.success("修改成功"); |
|
this.chapterVisible = false; |
|
this.getData(); |
|
}) |
|
.catch(err => { |
|
}); |
|
} else { |
|
this.$post(this.api.addChapter, data).then(res => { |
|
this.$message.success("添加成功"); |
|
this.chapterVisible = false; |
|
this.getData(); |
|
}) |
|
.catch(err => { |
|
}); |
|
} |
|
}, |
|
sectionSubmit (e) { |
|
if (!this.sectionForm.sectionName) return this.$message.warning("请填写小节名称"); |
|
if (this.uploading) return this.$message.warning("资源正在上传中，请稍候"); |
|
if (!this.fileUrl && !this.fileId) return this.$message.warning("请上传资源"); |
|
let data = { |
|
id: this.sectionId, |
|
cid: this.id, |
|
chapterId: this.chapterId, |
|
name: this.sectionForm.sectionName, |
|
fileId: this.fileId, |
|
fileUrl: this.fileUrl, |
|
fileName: this.fileName, |
|
fileType: this.fileType, |
|
originalFileName: this.originalFileName |
|
}; |
|
this.$post(this.api.addSubsection, data).then(res => { |
|
this.$message.success("添加成功"); |
|
this.sectionVisible = false; |
|
this.getData(); |
|
}) |
|
.catch(err => { |
|
}) |
|
}, |
|
closeSwitch () { |
|
this.fileId = ""; |
|
this.fileName = ""; |
|
this.fileType = ""; |
|
this.fileUrl = ""; |
|
this.sectionId = ""; |
|
this.progressPercent = 0 |
|
}, |
|
// 下载资源 |
|
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) |
|
} |
|
}, |
|
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 => { |
|
}); |
|
} |
|
}, |
|
editSectionName (row) { |
|
this.sectionId = row.id; |
|
this.sectionForm.sectionName = row.name; |
|
this.sectionNameVisible = true; |
|
}, |
|
switchFile (row) { |
|
this.uploadList = [] |
|
this.curFile = { |
|
fileId: row.fileId, |
|
fileName: row.fileName, |
|
fileType: row.fileType, |
|
fileUrl: row.fileUrl |
|
} |
|
this.sectionId = row.id |
|
this.sectionForm.sectionName = row.sectionName |
|
|
|
this.switchVisible = true; |
|
}, |
|
switchSubmitFile () { |
|
let data = { |
|
id: this.sectionId, |
|
cid: this.id, |
|
chapterId: this.chapterId, |
|
name: this.sectionForm.sectionName, |
|
fileId: this.fileId, |
|
fileName: this.fileName, |
|
fileType: this.fileType, |
|
fileUrl: this.fileUrl, |
|
originalFileName: this.originalFileName |
|
}; |
|
this.$put(this.api.editSubsection, data).then(res => { |
|
this.$message.success("更换成功"); |
|
this.switchVisible = false; |
|
this.getData(); |
|
}).catch(err => { }) |
|
}, |
|
switchSubmit () { |
|
if (this.uploading) return this.$message.warning("资源正在上传中，请稍候"); |
|
if (!this.fileUrl && !this.fileId) return this.$message.warning("请上传资源"); |
|
this.switchSubmitFile(); |
|
}, |
|
delSection (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(() => { }) |
|
}, |
|
sortChapter (row, type, disabled, index) { |
|
if (!disabled) { |
|
if (type == "up") { |
|
let tempItem = this.chapters.splice(index - 1, 1)[0]; |
|
this.chapters.splice(index, 0, tempItem); |
|
} else { |
|
let tempItem = this.chapters.splice(index + 1, 1)[0]; |
|
this.chapters.splice(index, 0, tempItem); |
|
} |
|
} |
|
}, |
|
sectionNameSubmit () { |
|
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 => { }) |
|
}, |
|
closePlayer () { |
|
this.playAuth = ""; |
|
this.player.pause(); |
|
}, |
|
closeIframe () { |
|
this.iframeSrc = ""; |
|
this.videoSrc = '' |
|
this.showMask = false; |
|
this.showMask1 = false; |
|
this.showMask2 = false; |
|
this.previewing = false; |
|
}, |
|
back () { |
|
// 如果是预览则关闭预览 |
|
if (this.previewing) { |
|
this.closeIframe(); |
|
} else { |
|
this.$router.push(this.$store.state.referrer || '/curriculum') |
|
} |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.page-content { |
|
max-height: calc(100vh - 420px); |
|
overflow: auto; |
|
} |
|
|
|
.action-btn { |
|
color: #062c87; |
|
font-size: 14px; |
|
border: #062c87 1px solid; |
|
background-color: #fff; |
|
border-radius: 4px; |
|
} |
|
|
|
.btns { |
|
position: absolute; |
|
top: 12px; |
|
right: 24px; |
|
|
|
.el-button { |
|
font-size: 14px; |
|
} |
|
} |
|
|
|
.sort-icon { |
|
font-size: 24px; |
|
cursor: pointer; |
|
|
|
&.disabled { |
|
color: #ccc; |
|
cursor: not-allowed; |
|
} |
|
} |
|
|
|
/deep/.el-progress-bar { |
|
padding-right: 70px; |
|
margin-right: -70px; |
|
} |
|
|
|
.el-upload__tip { |
|
position: absolute; |
|
top: -4px; |
|
right: 0; |
|
width: 300px; |
|
line-height: 1.4; |
|
} |
|
|
|
.el-image-viewer__wrapper { |
|
transform: translateY(-10px); |
|
transition: transform 0.5s; |
|
|
|
&.active { |
|
transform: translateY(0); |
|
} |
|
} |
|
|
|
.el-image-viewer__close { |
|
z-index: 10000; |
|
top: 15px; |
|
right: 15px; |
|
|
|
&.doc-close { |
|
i { |
|
color: #000 !important; |
|
} |
|
} |
|
} |
|
|
|
.player { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
width: 1200px !important; |
|
height: 600px !important; |
|
} |
|
|
|
.player-download { |
|
position: absolute; |
|
top: -9999px; |
|
} |
|
|
|
.fileIframe { |
|
z-index: 1; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
bottom: 0; |
|
right: 0; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
.mask { |
|
z-index: 1000; |
|
position: fixed; |
|
background-color: rgb(57, 58, 61); |
|
} |
|
|
|
.word-mask { |
|
z-index: 1000; |
|
position: fixed; |
|
right: 0; |
|
width: 100%; |
|
background-color: rgb(243, 242, 241); |
|
} |
|
|
|
.word-mask1 { |
|
z-index: 1000; |
|
position: fixed; |
|
top: 0; |
|
right: 0; |
|
background-color: #2b579a; |
|
} |
|
|
|
.word-mask2 { |
|
z-index: 1000; |
|
position: fixed; |
|
background-color: transparent; |
|
} |
|
|
|
.excel-mask1 { |
|
z-index: 9; |
|
position: absolute; |
|
top: 0; |
|
left: 20%; |
|
width: 80%; |
|
background-color: #107c41; |
|
} |
|
|
|
.page { |
|
display: flex; |
|
|
|
.left { |
|
width: 400px; |
|
height: calc(100vh - 247px); |
|
padding: 0 15px 15px 0; |
|
margin-right: 20px; |
|
border-right: 1px solid #eee; |
|
box-sizing: border-box; |
|
overflow: auto; |
|
|
|
.title { |
|
font-size: 16px; |
|
} |
|
|
|
.chapters { |
|
margin-top: 10px; |
|
} |
|
|
|
li { |
|
display: flex; |
|
padding: 5px 10px; |
|
|
|
&.active { |
|
background-color: #d5e7fb; |
|
} |
|
} |
|
|
|
.name { |
|
width: 68%; |
|
margin-right: 20px; |
|
font-size: 14px; |
|
color: #333; |
|
cursor: pointer; |
|
|
|
&:hover { |
|
color: #062c87; |
|
} |
|
} |
|
|
|
.del { |
|
margin-left: 10px; |
|
} |
|
} |
|
|
|
.right { |
|
flex: 1; |
|
|
|
.sections { |
|
margin-top: 20px; |
|
|
|
li { |
|
display: flex; |
|
justify-content: space-between; |
|
padding: 5px 10px; |
|
margin-bottom: 10px; |
|
background-color: #f9f9f9; |
|
} |
|
|
|
.section-left, |
|
.section-right { |
|
display: inline-flex; |
|
align-items: center; |
|
} |
|
|
|
.serial { |
|
margin: 0 8px; |
|
font-size: 14px; |
|
color: #858585; |
|
} |
|
|
|
.name { |
|
margin-left: 10px; |
|
font-size: 12px; |
|
color: #333; |
|
|
|
} |
|
} |
|
} |
|
} |
|
</style> |