|
|
|
|
@ -1,6 +1,6 @@ |
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<el-card shadow="hover" class="mgb20"> |
|
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
|
<div class="flex-between"> |
|
|
|
|
<el-page-header @back="back" :content="name + '/' + (sorting ? '编辑排序' : '内容设置')"></el-page-header> |
|
|
|
|
</div> |
|
|
|
|
@ -33,30 +33,33 @@ |
|
|
|
|
</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> |
|
|
|
|
<draggable v-model="sections" :group="dragGroup" chosenClass="chosen" animation="1000" @update="updateSort"> |
|
|
|
|
<li v-for="(section, i) in sections" :key="i"> |
|
|
|
|
<div class="section-left"> |
|
|
|
|
<img class="drag" src="@/assets/img/drag.svg" alt=""> |
|
|
|
|
<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> |
|
|
|
|
</draggable> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -198,14 +201,13 @@ import Upload from '@/components/upload'; |
|
|
|
|
import Oss from '@/components/upload/upload.js' |
|
|
|
|
import Util from '@/libs/util' |
|
|
|
|
import Source from './source' |
|
|
|
|
import Draggable from 'vuedraggable' |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
components: { Pdf, Upload, Source, Draggable }, |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
name: this.$route.query.name, |
|
|
|
|
headers: { |
|
|
|
|
token: sessionStorage.getItem('token') |
|
|
|
|
}, |
|
|
|
|
id: this.$route.query.cid, |
|
|
|
|
originChapters: [], |
|
|
|
|
chapters: [], |
|
|
|
|
@ -273,10 +275,13 @@ export default { |
|
|
|
|
sort: 'bottom' |
|
|
|
|
}, |
|
|
|
|
sourceVisible: false, |
|
|
|
|
sections: [] |
|
|
|
|
sections: [], |
|
|
|
|
|
|
|
|
|
dragGroup: { |
|
|
|
|
pull: false, |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
components: { Pdf, Upload, Source }, |
|
|
|
|
mounted () { |
|
|
|
|
this.insertScript(); |
|
|
|
|
this.id && this.getData(); |
|
|
|
|
@ -291,7 +296,7 @@ export default { |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getData () { |
|
|
|
|
this.$get(`${this.api.queryChaptersAndSubsections}/${this.id}`).then(res => { |
|
|
|
|
this.$get(`${this.api.curriculumChapter}/${this.id}`).then(res => { |
|
|
|
|
const list = res.chapterList |
|
|
|
|
if (list.length) { |
|
|
|
|
list.forEach(e => { |
|
|
|
|
@ -449,6 +454,24 @@ export default { |
|
|
|
|
this.getData() |
|
|
|
|
}).catch(() => { }) |
|
|
|
|
}, |
|
|
|
|
// 拖拽后回调 |
|
|
|
|
async updateSort (e) { |
|
|
|
|
e.preventDefault() |
|
|
|
|
console.log(33, this.sections) |
|
|
|
|
const { chapters, sections, chapterId } = this |
|
|
|
|
chapters.forEach((n, k) => { |
|
|
|
|
n.sort = k + 1 |
|
|
|
|
if (n.id === chapterId) n.subsectionList = sections |
|
|
|
|
n.subsectionList.forEach((j, i) => { |
|
|
|
|
j.sort = i + 1 |
|
|
|
|
j.chapterId = n.id |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
await this.$post(this.api.reorder, { |
|
|
|
|
chapterVOList: chapters |
|
|
|
|
}) |
|
|
|
|
this.getData() |
|
|
|
|
}, |
|
|
|
|
// 目标章节选择回调 |
|
|
|
|
chapterChange (id) { |
|
|
|
|
const list = [] |
|
|
|
|
@ -741,46 +764,45 @@ export default { |
|
|
|
|
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); |
|
|
|
|
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); |
|
|
|
|
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 = { |
|
|
|
|
if (!this.sectionForm.sectionName) return this.$message.warning("请填写小节名称") |
|
|
|
|
this.$put(this.api.editSubsection, { |
|
|
|
|
id: this.sectionId, |
|
|
|
|
cid: this.id, |
|
|
|
|
chapterId: this.chapterId, |
|
|
|
|
name: this.sectionForm.sectionName |
|
|
|
|
}; |
|
|
|
|
this.$put(this.api.editSubsection, data).then(res => { |
|
|
|
|
}).then(res => { |
|
|
|
|
this.$message.success("修改成功") |
|
|
|
|
this.sectionNameVisible = false |
|
|
|
|
this.getData(); |
|
|
|
|
this.getData() |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
}, |
|
|
|
|
closePlayer () { |
|
|
|
|
this.playAuth = ""; |
|
|
|
|
this.player.pause(); |
|
|
|
|
this.playAuth = "" |
|
|
|
|
this.player.pause() |
|
|
|
|
}, |
|
|
|
|
closeIframe () { |
|
|
|
|
this.iframeSrc = ""; |
|
|
|
|
this.iframeSrc = "" |
|
|
|
|
this.videoSrc = '' |
|
|
|
|
this.showMask = false; |
|
|
|
|
this.showMask1 = false; |
|
|
|
|
this.showMask2 = false; |
|
|
|
|
this.previewing = false; |
|
|
|
|
this.showMask = false |
|
|
|
|
this.showMask1 = false |
|
|
|
|
this.showMask2 = false |
|
|
|
|
this.previewing = false |
|
|
|
|
}, |
|
|
|
|
back () { |
|
|
|
|
// 如果是预览则关闭预览 |
|
|
|
|
if (this.previewing) { |
|
|
|
|
this.closeIframe(); |
|
|
|
|
this.closeIframe() |
|
|
|
|
} else { |
|
|
|
|
this.$router.push(this.$store.state.referrer || '/curriculum') |
|
|
|
|
this.$router.push(this.$store.state.referrer || 'list') |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
@ -977,6 +999,11 @@ export default { |
|
|
|
|
background-color: #f9f9f9; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.drag { |
|
|
|
|
margin-right: 10px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.section-left, |
|
|
|
|
.section-right { |
|
|
|
|
display: inline-flex; |
|
|
|
|
|
