|
|
|
|
@ -13,11 +13,17 @@ |
|
|
|
|
<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> |
|
|
|
|
<draggable v-model="chapters" :disabled="false" :group="{ |
|
|
|
|
name: 'sec', |
|
|
|
|
pull: false, |
|
|
|
|
}" animation="1000" @end="updateSort"> |
|
|
|
|
<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> |
|
|
|
|
</draggable> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
@ -33,30 +39,36 @@ |
|
|
|
|
</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="{ |
|
|
|
|
name: 'sec', |
|
|
|
|
pull: false, |
|
|
|
|
}" handle=".drag" animation="1000" @end="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 +210,12 @@ 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: [], |
|
|
|
|
@ -242,7 +252,7 @@ export default { |
|
|
|
|
player: null, |
|
|
|
|
previewImg: "", |
|
|
|
|
iframeSrc: "", |
|
|
|
|
curFile: {}, |
|
|
|
|
curSection: {}, |
|
|
|
|
isAddSection: false, |
|
|
|
|
isWord: false, |
|
|
|
|
isPPT: false, |
|
|
|
|
@ -273,10 +283,9 @@ export default { |
|
|
|
|
sort: 'bottom' |
|
|
|
|
}, |
|
|
|
|
sourceVisible: false, |
|
|
|
|
sections: [] |
|
|
|
|
sections: [], |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
components: { Pdf, Upload, Source }, |
|
|
|
|
mounted () { |
|
|
|
|
this.insertScript(); |
|
|
|
|
this.id && this.getData(); |
|
|
|
|
@ -449,6 +458,23 @@ export default { |
|
|
|
|
this.getData() |
|
|
|
|
}).catch(() => { }) |
|
|
|
|
}, |
|
|
|
|
// 拖拽后回调 |
|
|
|
|
async updateSort (e) { |
|
|
|
|
e.preventDefault() |
|
|
|
|
const { chapters, sections, chapterId } = this |
|
|
|
|
chapters.forEach((n, k) => { |
|
|
|
|
n.sort = k + 1 |
|
|
|
|
if (n.id === chapterId) n.subsectionList = sections |
|
|
|
|
n.subsectionList && 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 = [] |
|
|
|
|
@ -536,6 +562,7 @@ export default { |
|
|
|
|
|
|
|
|
|
// 添加系统资源 |
|
|
|
|
showSource () { |
|
|
|
|
this.curSection = {} |
|
|
|
|
this.sourceVisible = true |
|
|
|
|
}, |
|
|
|
|
addSection (id) { |
|
|
|
|
@ -551,30 +578,26 @@ export default { |
|
|
|
|
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 => { |
|
|
|
|
}); |
|
|
|
|
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 => { |
|
|
|
|
}); |
|
|
|
|
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("请上传资源"); |
|
|
|
|
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, |
|
|
|
|
@ -585,21 +608,19 @@ export default { |
|
|
|
|
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 => { |
|
|
|
|
}) |
|
|
|
|
this.$message.success("添加成功") |
|
|
|
|
this.sectionVisible = false |
|
|
|
|
this.getData() |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
}, |
|
|
|
|
closeSwitch () { |
|
|
|
|
this.fileId = ""; |
|
|
|
|
this.fileName = ""; |
|
|
|
|
this.fileType = ""; |
|
|
|
|
this.fileUrl = ""; |
|
|
|
|
this.sectionId = ""; |
|
|
|
|
this.fileId = '' |
|
|
|
|
this.fileName = '' |
|
|
|
|
this.fileType = '' |
|
|
|
|
this.fileUrl = '' |
|
|
|
|
this.sectionId = '' |
|
|
|
|
this.progressPercent = 0 |
|
|
|
|
}, |
|
|
|
|
// 下载资源 |
|
|
|
|
@ -685,22 +706,14 @@ export default { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
editSectionName (row) { |
|
|
|
|
this.sectionId = row.id; |
|
|
|
|
this.sectionForm.sectionName = row.name; |
|
|
|
|
this.sectionNameVisible = true; |
|
|
|
|
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.curSection = row |
|
|
|
|
this.sectionId = row.id |
|
|
|
|
this.sectionForm.sectionName = row.sectionName |
|
|
|
|
|
|
|
|
|
this.switchVisible = true; |
|
|
|
|
this.sourceVisible = true |
|
|
|
|
}, |
|
|
|
|
switchSubmitFile () { |
|
|
|
|
let data = { |
|
|
|
|
@ -977,6 +990,11 @@ export default { |
|
|
|
|
background-color: #f9f9f9; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.drag { |
|
|
|
|
margin-right: 10px; |
|
|
|
|
cursor: move; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.section-left, |
|
|
|
|
.section-right { |
|
|
|
|
display: inline-flex; |
|
|
|
|
|
