e
3 years ago
parent
463728a343
commit
f60acb9ae7
15 changed files with 1794 additions and 30 deletions
@ -0,0 +1,104 @@ |
||||
<template> |
||||
<div> |
||||
<el-dialog |
||||
custom-class="pdf-dia" |
||||
:close-on-click-modal="false" |
||||
:visible.sync="visible" |
||||
@close="closePdf" |
||||
:fullscreen="true" |
||||
:modal="false" |
||||
:append-to-body="true"> |
||||
<div> |
||||
<button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closePdf"><i class="el-dialog__close el-icon el-icon-close"></i></button> |
||||
<div class="pdf"> |
||||
<p class="arrow"> |
||||
<span @click="changePdfPage(0)" class="turn el-icon-arrow-left" :class="{grey: currentPage==1}"></span> |
||||
{{currentPage}} / {{pageCount}} |
||||
<span @click="changePdfPage(1)" class="turn el-icon-arrow-right" :class="{grey: currentPage==pageCount}"></span> |
||||
</p> |
||||
<pdf |
||||
class="pdf-wrap" |
||||
:src="src" |
||||
:page="currentPage" |
||||
@num-pages="pageCount=$event" |
||||
@page-loaded="currentPage=$event" |
||||
@loaded="loadPdfHandler"> |
||||
</pdf> |
||||
</div> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import pdf from "vue-pdf"; |
||||
export default { |
||||
props: ['visible','src'], |
||||
data() { |
||||
return { |
||||
pdfVisible: false, |
||||
pdfSrc: '', |
||||
currentPage: 0, |
||||
pageCount: 0, |
||||
fileType: 'pdf', |
||||
}; |
||||
}, |
||||
components: { pdf }, |
||||
methods: { |
||||
closePdf(){ |
||||
this.$emit('update:visible',false) |
||||
this.$emit('update:src','') |
||||
this.currentPage = 1 |
||||
}, |
||||
changePdfPage (val) { |
||||
if (val === 0 && this.currentPage > 1) { |
||||
this.currentPage-- |
||||
} |
||||
if (val === 1 && this.currentPage < this.pageCount) { |
||||
this.currentPage++ |
||||
} |
||||
}, |
||||
loadPdfHandler (e) { |
||||
this.currentPage = 1 |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
/deep/.pdf-dia{ |
||||
border-radius: 0 !important; |
||||
.el-dialog__header{ |
||||
display: none; |
||||
} |
||||
.el-dialog__body{ |
||||
padding: 0; |
||||
} |
||||
.el-dialog__headerbtn{ |
||||
top: 10px; |
||||
.el-dialog__close{ |
||||
color: #fff; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
|
||||
.pdf{ |
||||
.arrow{ |
||||
padding: 10px 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 16px; |
||||
color: #fff; |
||||
background-color: #333; |
||||
.turn{ |
||||
margin: 0 10px; |
||||
font-size: 18px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.pdf-wrap{ |
||||
width: 80%; |
||||
margin: 0 auto; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,708 @@ |
||||
<template> |
||||
<div> |
||||
<div class="page"> |
||||
<div class="relative"> |
||||
<div class="p-title">内容设置</div> |
||||
<div class="btns"> |
||||
<template v-if="!sorting"> |
||||
<el-button type="primary" size="small" round v-throttle @click="addChapter">添加章节</el-button> |
||||
<el-button type="primary" size="small" round v-throttle @click="sort">编辑顺序</el-button> |
||||
</template> |
||||
<template v-else> |
||||
<el-button type="primary" size="small" round v-throttle @click="cancelSort">取消</el-button> |
||||
<el-button type="primary" size="small" round v-throttle @click="saveSort">保存</el-button> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="page-content"> |
||||
<div class="m-b-20" v-for="(chapter,index) in chapters" :key="chapter.id"> |
||||
<div class="flex j-between a-center m-b-10"> |
||||
<div>{{chapter.name}}</div> |
||||
<div> |
||||
<template v-if="!sorting"> |
||||
<el-button class="action-btn" type="primary" size="small" round v-throttle @click="editChapter(chapter)">修改章节名称</el-button> |
||||
<el-button class="action-btn" type="primary" size="small" round v-throttle @click="addSection(chapter.id)">添加小节</el-button> |
||||
<el-button class="action-btn" type="primary" size="small" round v-throttle @click="delChapter(chapter.id)">删除</el-button> |
||||
</template> |
||||
<template v-else> |
||||
<i class="el-icon-top sort-icon" :class="{disabled: index == 0}" style="margin-right: 5px" @click="sortChapter(chapter,'up',index == 0,index)"></i> |
||||
<i class="el-icon-bottom sort-icon" :class="{disabled: index == chapters.length-1}" @click="sortChapter(chapter,'down',index == chapter.length-1,index)"></i> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
<el-table :data="chapter.subsectionList" class="table" stripe header-align="center"> |
||||
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column> |
||||
<el-table-column prop="name" label="资源名称"> |
||||
</el-table-column> |
||||
<el-table-column prop="fileType" label="资源类型" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{transferType(scope.row.fileType)}} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="300"> |
||||
<template slot-scope="scope"> |
||||
<template v-if="!sorting"> |
||||
<el-button type="text" @click="preview(scope.row)">查看</el-button> |
||||
<el-button type="text" @click="delSection(scope.row)">删除</el-button> |
||||
<el-button type="text" @click="editSectionName(scope.row,chapter.id)">修改小节名称</el-button> |
||||
<el-button type="text" @click="switchFile(scope.row,chapter.id)">更换文件</el-button> |
||||
</template> |
||||
<template v-else> |
||||
<i class="el-icon-top sort-icon" :class="{disabled: scope.$index == 0}" style="margin-right: 5px" @click="sortSection(index,'up',scope.$index == 0,scope.$index)"></i> |
||||
<i class="el-icon-bottom sort-icon" :class="{disabled: scope.$index == chapter.subsectionList.length-1}" @click="sortSection(index,'down',scope.$index == chapter.subsectionList.length-1,scope.$index)"></i> |
||||
</template> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
|
||||
<el-dialog :title="chapterId ? '编辑章节' : '新增章节'" :visible.sync="chapterVisible" width="24%" :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 size="small" @click="chapterVisible = false">取消</el-button> |
||||
<el-button size="small" type="primary" @click="chapterSubmit">确定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
<el-dialog title="添加小节" :visible.sync="sectionVisible" width="24%" @close="closeSection" :close-on-click-modal="false"> |
||||
<el-form label-width="80px"> |
||||
<el-form-item label="资源添加"> |
||||
<el-upload |
||||
:before-upload="beforeUpload" |
||||
:on-remove="handleRemove" |
||||
:on-error="uploadError" |
||||
:on-success="uploadSuccess" |
||||
:before-remove="beforeRemove" |
||||
:limit="1" |
||||
:on-exceed="handleExceed" |
||||
:action="this.api.fileupload" |
||||
:file-list="uploadList" |
||||
name="file" |
||||
> |
||||
<el-button size="small"> 上传资源</el-button> |
||||
<!-- <img src="../assets/img/upload.png" alt=""> --> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item label="小节名称"> |
||||
<el-input placeholder="请输入小节名称" v-model="sectionName" maxlength="50"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button size="small" @click="sectionVisible = false">取消</el-button> |
||||
<el-button size="small" type="primary" @click="sectionSubmit">确定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
<el-dialog title="更换文件" :visible.sync="switchVisible" width="28%" :close-on-click-modal="false" @close="closeSwitch"> |
||||
<div style="text-align: center"> |
||||
<el-upload |
||||
:before-upload="beforeUpload" |
||||
:on-remove="handleRemove" |
||||
:on-error="uploadError" |
||||
:on-success="uploadSuccess" |
||||
:before-remove="beforeRemove" |
||||
:limit="1" |
||||
:on-exceed="handleExceed" |
||||
:action="this.api.fileupload" |
||||
:file-list="uploadList" |
||||
name="file" |
||||
> |
||||
<el-button size="small"> 上传资源</el-button> |
||||
<!-- <img src="../assets/img/upload.png" alt=""> --> |
||||
</el-upload> |
||||
</div> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button size="small" @click="switchVisible = false">取消</el-button> |
||||
<el-button size="small" type="primary" @click="switchSubmit">确定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
<el-dialog title="修改小节名称" :visible.sync="sectionNameVisible" width="24%" :close-on-click-modal="false"> |
||||
<el-form> |
||||
<el-form-item> |
||||
<el-input placeholder="请输入小节名称" v-model="sectionName" maxlength="50"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button size="small" @click="sectionNameVisible = false">取消</el-button> |
||||
<el-button size="small" 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" 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> |
||||
<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"></pdf> --> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import { Loading } from 'element-ui'; |
||||
// import pdf from '../../components/pdf.vue' |
||||
// import breadcrumb from '@/components/breadcrumb' |
||||
export default { |
||||
data() { |
||||
return { |
||||
id: '', |
||||
userId: this.$store.state.userLoginId, |
||||
chapters: [], |
||||
sorting: false, |
||||
uploading: false, |
||||
uploadList: [], |
||||
chapterVisible: false, |
||||
chapterId: '', |
||||
chapterName: '', |
||||
sectionVisible: false, |
||||
sectionName: '', |
||||
sectionId: '', |
||||
switchVisible: false, |
||||
sectionNameVisible: false, |
||||
fileId: '', |
||||
fileName: '', |
||||
fileUrl: '', |
||||
originalFileName: '', |
||||
fileType: '', |
||||
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 |
||||
}; |
||||
}, |
||||
components: { |
||||
// pdf, |
||||
// breadcrumb |
||||
}, |
||||
mounted() { |
||||
this.insertScript() |
||||
this.id = this.$route.query.id |
||||
this.id && this.getData() |
||||
if (window.history && window.history.pushState) { |
||||
history.pushState(null, null, document.URL); |
||||
window.addEventListener("popstate", this.goBack, false); |
||||
} |
||||
}, |
||||
destroyed() { |
||||
window.removeEventListener("popstate", this.goBack, false); |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.$get(`${this.api.queryChaptersAndSubsections}/${this.id}`) |
||||
.then(res => { |
||||
this.chapters = res.data.chapterList |
||||
}) |
||||
.catch(err => { |
||||
|
||||
}); |
||||
}, |
||||
goBack(){ |
||||
if(this.previewing){ |
||||
this.closeIframe() |
||||
}else{ |
||||
history.back() |
||||
} |
||||
}, |
||||
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){ |
||||
let type = this.transferType(file.name.substring(file.name.lastIndexOf('.') + 1)) |
||||
if(type != '视频' && type != '图片' && type != 'pdf' && (file.size / 1024 / 1024) > 10){ |
||||
this.errorMsg('请上传10M以内的文件') |
||||
return false |
||||
} |
||||
this.uploading = true |
||||
this.originalFileName = file.name |
||||
if(this.isAddSection) this.sectionName = file.name.substring(0,file.name.lastIndexOf(".")) |
||||
this.fileType = file.name.substring(file.name.lastIndexOf('.')+1) |
||||
}, |
||||
handleExceed(files, fileList) { |
||||
this.warningMsg( |
||||
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||
); |
||||
}, |
||||
uploadSuccess(res, file, fileList) { |
||||
this.uploading = false |
||||
this.fileId = res.data.filesResult.fileId |
||||
this.fileType = res.data.filesResult.fileType |
||||
this.fileUrl = res.data.filesResult.fileUrl |
||||
this.fileName = res.data.filesResult.ossFileName |
||||
}, |
||||
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(file, fileList) { |
||||
this.uploadList = fileList |
||||
}, |
||||
uploadSure(){ |
||||
this.importVisible = false |
||||
this.pageNo = 1 |
||||
this.staffGradeId = '' |
||||
this.keyword = '' |
||||
this.getTeacher() |
||||
}, |
||||
goback() { |
||||
this.$router.push('course') |
||||
}, |
||||
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.sorting = true |
||||
}, |
||||
cancelSort(){ |
||||
this.sorting = false |
||||
}, |
||||
saveSort(){ |
||||
this.chapters.forEach((n,k) => { |
||||
n.sort = k+1 |
||||
n.subsectionList.forEach((j,i) => { |
||||
j.sort = i+1 |
||||
}) |
||||
}) |
||||
let data = { |
||||
chapterVOList: this.chapters |
||||
} |
||||
this.$post(this.api.reorder,data).then(res => { |
||||
this.sorting = false |
||||
this.getData() |
||||
}).catch(res => {}); |
||||
}, |
||||
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.successMsg('删除成功'); |
||||
this.getData() |
||||
}).catch(res => {}); |
||||
}) |
||||
.catch(() => {}); |
||||
}, |
||||
closeSection(){ |
||||
this.isAddSection = false |
||||
}, |
||||
addSection(id){ |
||||
this.chapterId = id |
||||
this.sectionName = '' |
||||
this.fileUrl = '' |
||||
this.uploadList = [] |
||||
this.sectionId = '' |
||||
this.isAddSection = true |
||||
this.sectionVisible = true |
||||
}, |
||||
chapterSubmit(){ |
||||
if(!this.chapterName) return this.warningMsg('请填写章节名称') |
||||
let data = { |
||||
courseId: this.id, |
||||
name: this.chapterName |
||||
} |
||||
if(this.chapterId){ |
||||
data.id = this.chapterId |
||||
this.$put(this.api.editChapter, data).then(res => { |
||||
this.successMsg('修改成功'); |
||||
this.chapterVisible = false |
||||
this.getData() |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
}else{ |
||||
this.$post(this.api.addChapter, data).then(res => { |
||||
this.successMsg('添加成功'); |
||||
this.chapterVisible = false |
||||
this.getData() |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
} |
||||
}, |
||||
sectionSubmit(){ |
||||
if(!this.sectionName) return this.warningMsg('请填写小节名称') |
||||
if(this.uploading) return this.warningMsg('资源正在上传中，请稍候') |
||||
if(!this.fileUrl && !this.fileId) return this.warningMsg('请上传资源') |
||||
let data = { |
||||
id: this.sectionId, |
||||
courseId: this.id, |
||||
chapterId: this.chapterId, |
||||
name: this.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.successMsg('添加成功'); |
||||
this.sectionVisible = false |
||||
this.getData() |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
}, |
||||
closeSwitch(){ |
||||
this.fileId = '' |
||||
this.fileName = '' |
||||
this.fileType = '' |
||||
this.fileUrl = '' |
||||
this.sectionId = '' |
||||
}, |
||||
preview(row){ |
||||
if(this.transferType(row.fileType) == '视频'){ |
||||
this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => { |
||||
this.playAuth = res.data.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 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.data.previewUrl |
||||
this.$nextTick(() => { |
||||
this.iframeOnload() |
||||
}) |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
} |
||||
}, |
||||
editSectionName(row,chapterId){ |
||||
this.chapterId = chapterId |
||||
this.sectionId = row.id |
||||
this.sectionName = row.name |
||||
this.sectionNameVisible = true |
||||
}, |
||||
switchFile(row,chapterId,sectionId){ |
||||
this.uploadList = [] |
||||
this.curFile = { |
||||
fileId: row.fileId, |
||||
fileName: row.fileName, |
||||
fileType: row.fileType, |
||||
fileUrl: row.fileUrl, |
||||
} |
||||
this.chapterId = chapterId |
||||
this.sectionId = row.id |
||||
this.sectionName = row.sectionName |
||||
|
||||
this.switchVisible = true |
||||
}, |
||||
switchSubmitFile(){ |
||||
let data = { |
||||
id: this.sectionId, |
||||
courseId: this.id, |
||||
chapterId: this.chapterId, |
||||
name: this.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.successMsg('更换成功'); |
||||
this.switchVisible = false |
||||
this.getData() |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
}, |
||||
switchSubmit(){ |
||||
if(this.uploading) return this.warningMsg('资源正在上传中，请稍候') |
||||
if(!this.fileUrl && !this.fileId) return this.warningMsg('请上传资源') |
||||
if(this.transferType(this.curFile.fileType) == '视频'){ |
||||
let data = { |
||||
videoIdList: [this.sectionId] |
||||
} |
||||
this.$del(`${this.api.removeVideo}/${this.curFile.fileId}`).then(res => { |
||||
this.switchSubmitFile() |
||||
}).catch(res => {}); |
||||
}else{ |
||||
this.$del(`${this.api.fileDeletion}?keys=${this.curFile.fileName}`).then(res => { |
||||
this.switchSubmitFile() |
||||
}).catch(res => {}); |
||||
} |
||||
}, |
||||
delSection(row) { |
||||
this.$confirm('此删除操作不可逆，是否确认删除选中项？', '提示', { |
||||
type: 'warning' |
||||
}) |
||||
.then(() => { |
||||
this.$del(`${this.api.deleteSubsection}/${row.id}`).then(res => { |
||||
this.successMsg('删除成功'); |
||||
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) |
||||
} |
||||
} |
||||
}, |
||||
sortSection(chapterIndex,type,disabled,index){ |
||||
if(!disabled){ |
||||
let list = this.chapters[chapterIndex].subsectionList |
||||
if(type == 'up'){ |
||||
let tempItem = list.splice(index - 1,1)[0] |
||||
list.splice(index,0,tempItem) |
||||
}else{ |
||||
let tempItem = list.splice(index + 1,1)[0] |
||||
list.splice(index,0,tempItem) |
||||
} |
||||
this.chapters[chapterIndex].subsectionList = list |
||||
|
||||
} |
||||
}, |
||||
sectionNameSubmit(){ |
||||
if(!this.sectionName) return this.warningMsg('请填写小节名称') |
||||
let data = { |
||||
id: this.sectionId, |
||||
courseId: this.id, |
||||
chapterId: this.chapterId, |
||||
name: this.sectionName |
||||
} |
||||
this.$put(this.api.editSubsection, data).then(res => { |
||||
this.successMsg('修改成功'); |
||||
this.sectionNameVisible = false |
||||
this.getData() |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
}, |
||||
closePlayer(){ |
||||
this.playAuth = '' |
||||
this.player.pause() |
||||
}, |
||||
closeIframe(){ |
||||
this.iframeSrc = '' |
||||
this.showMask = false |
||||
this.showMask1 = false |
||||
this.showMask2 = false |
||||
this.previewing = false |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.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 |
||||
} |
||||
} |
||||
.el-image-viewer__wrapper{ |
||||
transform: translateY(-10px); |
||||
transition: transform .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; |
||||
} |
||||
.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; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,708 @@ |
||||
<template> |
||||
<div> |
||||
<div class="page"> |
||||
<div class="relative"> |
||||
<div class="p-title">内容设置</div> |
||||
<div class="btns"> |
||||
<template v-if="!sorting"> |
||||
<el-button type="primary" size="small" round @click="addChapter">添加章节</el-button> |
||||
<el-button type="primary" size="small" round @click="sort">编辑顺序</el-button> |
||||
</template> |
||||
<template v-else> |
||||
<el-button type="primary" size="small" round @click="cancelSort">取消</el-button> |
||||
<el-button type="primary" size="small" round @click="saveSort">保存</el-button> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="page-content"> |
||||
<div class="m-b-20" v-for="(chapter,index) in chapters" :key="chapter.id"> |
||||
<div class="flex j-between a-center m-b-10"> |
||||
<div>{{chapter.name}}</div> |
||||
<div> |
||||
<template v-if="!sorting"> |
||||
<el-button class="action-btn" type="primary" size="small" round @click="editChapter(chapter)">修改章节名称</el-button> |
||||
<el-button class="action-btn" type="primary" size="small" round @click="addSection(chapter.id)">添加小节</el-button> |
||||
<el-button class="action-btn" type="primary" size="small" round @click="delChapter(chapter.id)">删除</el-button> |
||||
</template> |
||||
<template v-else> |
||||
<i class="el-icon-top sort-icon" :class="{disabled: index == 0}" style="margin-right: 5px" @click="sortChapter(chapter,'up',index == 0,index)"></i> |
||||
<i class="el-icon-bottom sort-icon" :class="{disabled: index == chapters.length-1}" @click="sortChapter(chapter,'down',index == chapter.length-1,index)"></i> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-table :data="chapter.subsectionList" class="table" stripe header-align="center"> |
||||
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column> |
||||
<el-table-column prop="name" label="资源名称"> |
||||
</el-table-column> |
||||
<el-table-column prop="fileType" label="资源类型" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{transferType(scope.row.fileType)}} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="300"> |
||||
<template slot-scope="scope"> |
||||
<template v-if="!sorting"> |
||||
<el-button type="text" @click="preview(scope.row)">查看</el-button> |
||||
<el-button type="text" @click="delSection(scope.row)">删除</el-button> |
||||
<el-button type="text" @click="editSectionName(scope.row,chapter.id)">修改小节名称</el-button> |
||||
<el-button type="text" @click="switchFile(scope.row,chapter.id)">更换文件</el-button> |
||||
</template> |
||||
<template v-else> |
||||
<i class="el-icon-top sort-icon" :class="{disabled: scope.$index == 0}" style="margin-right: 5px" @click="sortSection(index,'up',scope.$index == 0,scope.$index)"></i> |
||||
<i class="el-icon-bottom sort-icon" :class="{disabled: scope.$index == chapter.subsectionList.length-1}" @click="sortSection(index,'down',scope.$index == chapter.subsectionList.length-1,scope.$index)"></i> |
||||
</template> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
|
||||
<el-dialog :title="chapterId ? '编辑章节' : '新增章节'" :visible.sync="chapterVisible" width="24%" :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 size="small" @click="chapterVisible = false">取消</el-button> |
||||
<el-button size="small" type="primary" @click="chapterSubmit">确定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
<el-dialog title="添加小节" :visible.sync="sectionVisible" width="24%" @close="closeSection" :close-on-click-modal="false"> |
||||
<el-form label-width="80px"> |
||||
<el-form-item label="资源添加"> |
||||
<el-upload |
||||
:before-upload="beforeUpload" |
||||
:on-remove="handleRemove" |
||||
:on-error="uploadError" |
||||
:on-success="uploadSuccess" |
||||
:before-remove="beforeRemove" |
||||
:limit="1" |
||||
:on-exceed="handleExceed" |
||||
:action="this.api.fileupload" |
||||
:file-list="uploadList" |
||||
name="file" |
||||
> |
||||
<el-button size="small"> 上传资源</el-button> |
||||
<!-- <img src="../assets/img/upload.png" alt=""> --> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item label="小节名称"> |
||||
<el-input placeholder="请输入小节名称" v-model="sectionName" maxlength="50"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button size="small" @click="sectionVisible = false">取消</el-button> |
||||
<el-button size="small" type="primary" @click="sectionSubmit">确定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
<el-dialog title="更换文件" :visible.sync="switchVisible" width="28%" :close-on-click-modal="false" @close="closeSwitch"> |
||||
<div style="text-align: center"> |
||||
<el-upload |
||||
:before-upload="beforeUpload" |
||||
:on-remove="handleRemove" |
||||
:on-error="uploadError" |
||||
:on-success="uploadSuccess" |
||||
:before-remove="beforeRemove" |
||||
:limit="1" |
||||
:on-exceed="handleExceed" |
||||
:action="this.api.fileupload" |
||||
:file-list="uploadList" |
||||
name="file" |
||||
> |
||||
<el-button size="small"> 上传资源</el-button> |
||||
<!-- <img src="../assets/img/upload.png" alt=""> --> |
||||
</el-upload> |
||||
</div> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button size="small" @click="switchVisible = false">取消</el-button> |
||||
<el-button size="small" type="primary" @click="switchSubmit">确定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
<el-dialog title="修改小节名称" :visible.sync="sectionNameVisible" width="24%" :close-on-click-modal="false"> |
||||
<el-form> |
||||
<el-form-item> |
||||
<el-input placeholder="请输入小节名称" v-model="sectionName" maxlength="50"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button size="small" @click="sectionNameVisible = false">取消</el-button> |
||||
<el-button size="small" 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" 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> |
||||
<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"></pdf> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import { Loading } from 'element-ui'; |
||||
import pdf from '../../components/pdf.vue' |
||||
export default { |
||||
data() { |
||||
return { |
||||
id: '', |
||||
userId: this.$store.state.userLoginId, |
||||
chapters: [], |
||||
sorting: false, |
||||
uploading: false, |
||||
uploadList: [], |
||||
chapterVisible: false, |
||||
chapterId: '', |
||||
chapterName: '', |
||||
sectionVisible: false, |
||||
sectionName: '', |
||||
sectionId: '', |
||||
switchVisible: false, |
||||
sectionNameVisible: false, |
||||
fileId: '', |
||||
fileName: '', |
||||
fileUrl: '', |
||||
originalFileName: '', |
||||
fileType: '', |
||||
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 |
||||
}; |
||||
}, |
||||
components: { |
||||
pdf, |
||||
// breadcrumb |
||||
}, |
||||
mounted() { |
||||
this.insertScript() |
||||
this.id = this.$route.query.id |
||||
this.id && this.getData() |
||||
if (window.history && window.history.pushState) { |
||||
history.pushState(null, null, document.URL); |
||||
window.addEventListener("popstate", this.goBack, false); |
||||
} |
||||
}, |
||||
destroyed() { |
||||
window.removeEventListener("popstate", this.goBack, false); |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.$get(`${this.api.queryChaptersAndSubsections}/${this.id}`) |
||||
.then(res => { |
||||
this.chapters = res.data.chapterList |
||||
}) |
||||
.catch(err => { |
||||
|
||||
}); |
||||
}, |
||||
goBack(){ |
||||
if(this.previewing){ |
||||
this.closeIframe() |
||||
}else{ |
||||
history.back() |
||||
} |
||||
}, |
||||
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){ |
||||
let type = this.transferType(file.name.substring(file.name.lastIndexOf('.') + 1)) |
||||
if(type != '视频' && type != '图片' && type != 'pdf' && (file.size / 1024 / 1024) > 10){ |
||||
this.errorMsg('请上传10M以内的文件') |
||||
return false |
||||
} |
||||
this.uploading = true |
||||
this.originalFileName = file.name |
||||
if(this.isAddSection) this.sectionName = file.name.substring(0,file.name.lastIndexOf(".")) |
||||
this.fileType = file.name.substring(file.name.lastIndexOf('.')+1) |
||||
}, |
||||
handleExceed(files, fileList) { |
||||
this.warningMsg( |
||||
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||
); |
||||
}, |
||||
uploadSuccess(res, file, fileList) { |
||||
this.uploading = false |
||||
this.fileId = res.data.filesResult.fileId |
||||
this.fileType = res.data.filesResult.fileType |
||||
this.fileUrl = res.data.filesResult.fileUrl |
||||
this.fileName = res.data.filesResult.ossFileName |
||||
}, |
||||
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(file, fileList) { |
||||
this.uploadList = fileList |
||||
}, |
||||
uploadSure(){ |
||||
this.importVisible = false |
||||
this.pageNo = 1 |
||||
this.staffGradeId = '' |
||||
this.keyword = '' |
||||
this.getTeacher() |
||||
}, |
||||
goback() { |
||||
this.$router.push('course') |
||||
}, |
||||
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.sorting = true |
||||
}, |
||||
cancelSort(){ |
||||
this.sorting = false |
||||
}, |
||||
saveSort(){ |
||||
this.chapters.forEach((n,k) => { |
||||
n.sort = k+1 |
||||
n.subsectionList.forEach((j,i) => { |
||||
j.sort = i+1 |
||||
}) |
||||
}) |
||||
let data = { |
||||
chapterVOList: this.chapters |
||||
} |
||||
this.$post(this.api.reorder,data).then(res => { |
||||
this.sorting = false |
||||
this.getData() |
||||
}).catch(res => {}); |
||||
}, |
||||
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.successMsg('删除成功'); |
||||
this.getData() |
||||
}).catch(res => {}); |
||||
}) |
||||
.catch(() => {}); |
||||
}, |
||||
closeSection(){ |
||||
this.isAddSection = false |
||||
}, |
||||
addSection(id){ |
||||
this.chapterId = id |
||||
this.sectionName = '' |
||||
this.fileUrl = '' |
||||
this.uploadList = [] |
||||
this.sectionId = '' |
||||
this.isAddSection = true |
||||
this.sectionVisible = true |
||||
}, |
||||
chapterSubmit(){ |
||||
if(!this.chapterName) return this.warningMsg('请填写章节名称') |
||||
let data = { |
||||
courseId: this.id, |
||||
name: this.chapterName |
||||
} |
||||
if(this.chapterId){ |
||||
data.id = this.chapterId |
||||
this.$put(this.api.editChapter, data).then(res => { |
||||
this.successMsg('修改成功'); |
||||
this.chapterVisible = false |
||||
this.getData() |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
}else{ |
||||
this.$post(this.api.addChapter, data).then(res => { |
||||
this.successMsg('添加成功'); |
||||
this.chapterVisible = false |
||||
this.getData() |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
} |
||||
}, |
||||
sectionSubmit(){ |
||||
if(!this.sectionName) return this.warningMsg('请填写小节名称') |
||||
if(this.uploading) return this.warningMsg('资源正在上传中，请稍候') |
||||
if(!this.fileUrl && !this.fileId) return this.warningMsg('请上传资源') |
||||
let data = { |
||||
id: this.sectionId, |
||||
courseId: this.id, |
||||
chapterId: this.chapterId, |
||||
name: this.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.successMsg('添加成功'); |
||||
this.sectionVisible = false |
||||
this.getData() |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
}, |
||||
closeSwitch(){ |
||||
this.fileId = '' |
||||
this.fileName = '' |
||||
this.fileType = '' |
||||
this.fileUrl = '' |
||||
this.sectionId = '' |
||||
}, |
||||
preview(row){ |
||||
if(this.transferType(row.fileType) == '视频'){ |
||||
this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => { |
||||
this.playAuth = res.data.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 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.data.previewUrl |
||||
this.$nextTick(() => { |
||||
this.iframeOnload() |
||||
}) |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
} |
||||
}, |
||||
editSectionName(row,chapterId){ |
||||
this.chapterId = chapterId |
||||
this.sectionId = row.id |
||||
this.sectionName = row.name |
||||
this.sectionNameVisible = true |
||||
}, |
||||
switchFile(row,chapterId,sectionId){ |
||||
this.uploadList = [] |
||||
this.curFile = { |
||||
fileId: row.fileId, |
||||
fileName: row.fileName, |
||||
fileType: row.fileType, |
||||
fileUrl: row.fileUrl, |
||||
} |
||||
this.chapterId = chapterId |
||||
this.sectionId = row.id |
||||
this.sectionName = row.sectionName |
||||
|
||||
this.switchVisible = true |
||||
}, |
||||
switchSubmitFile(){ |
||||
let data = { |
||||
id: this.sectionId, |
||||
courseId: this.id, |
||||
chapterId: this.chapterId, |
||||
name: this.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.successMsg('更换成功'); |
||||
this.switchVisible = false |
||||
this.getData() |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
}, |
||||
switchSubmit(){ |
||||
if(this.uploading) return this.warningMsg('资源正在上传中，请稍候') |
||||
if(!this.fileUrl && !this.fileId) return this.warningMsg('请上传资源') |
||||
if(this.transferType(this.curFile.fileType) == '视频'){ |
||||
let data = { |
||||
videoIdList: [this.sectionId] |
||||
} |
||||
this.$del(`${this.api.removeVideo}/${this.curFile.fileId}`).then(res => { |
||||
this.switchSubmitFile() |
||||
}).catch(res => {}); |
||||
}else{ |
||||
this.$del(`${this.api.fileDeletion}?keys=${this.curFile.fileName}`).then(res => { |
||||
this.switchSubmitFile() |
||||
}).catch(res => {}); |
||||
} |
||||
}, |
||||
delSection(row) { |
||||
this.$confirm('此删除操作不可逆，是否确认删除选中项？', '提示', { |
||||
type: 'warning' |
||||
}) |
||||
.then(() => { |
||||
this.$del(`${this.api.deleteSubsection}/${row.id}`).then(res => { |
||||
this.successMsg('删除成功'); |
||||
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) |
||||
} |
||||
} |
||||
}, |
||||
sortSection(chapterIndex,type,disabled,index){ |
||||
if(!disabled){ |
||||
let list = this.chapters[chapterIndex].subsectionList |
||||
if(type == 'up'){ |
||||
let tempItem = list.splice(index - 1,1)[0] |
||||
list.splice(index,0,tempItem) |
||||
}else{ |
||||
let tempItem = list.splice(index + 1,1)[0] |
||||
list.splice(index,0,tempItem) |
||||
} |
||||
this.chapters[chapterIndex].subsectionList = list |
||||
|
||||
} |
||||
}, |
||||
sectionNameSubmit(){ |
||||
if(!this.sectionName) return this.warningMsg('请填写小节名称') |
||||
let data = { |
||||
id: this.sectionId, |
||||
courseId: this.id, |
||||
chapterId: this.chapterId, |
||||
name: this.sectionName |
||||
} |
||||
this.$put(this.api.editSubsection, data).then(res => { |
||||
this.successMsg('修改成功'); |
||||
this.sectionNameVisible = false |
||||
this.getData() |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
}, |
||||
closePlayer(){ |
||||
this.playAuth = '' |
||||
this.player.pause() |
||||
}, |
||||
closeIframe(){ |
||||
this.iframeSrc = '' |
||||
this.showMask = false |
||||
this.showMask1 = false |
||||
this.showMask2 = false |
||||
this.previewing = false |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.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 |
||||
} |
||||
} |
||||
.el-image-viewer__wrapper{ |
||||
transform: translateY(-10px); |
||||
transition: transform .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; |
||||
} |
||||
.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; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue