|
|
|
|
@ -2,7 +2,7 @@ |
|
|
|
|
<div> |
|
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
|
<div class="flex-between"> |
|
|
|
|
<el-page-header @back="goBack" :content="sorting? '更改排序' : '内容设置'"></el-page-header> |
|
|
|
|
<el-page-header @back="goBack" :content="'课程内容/' + (sorting ? '更改排序' : '内容设置')"></el-page-header> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
<!--内容设置--> |
|
|
|
|
@ -12,13 +12,13 @@ |
|
|
|
|
<div class="p-title">内容设置</div> |
|
|
|
|
<div class="btns" style="top: -10px"> |
|
|
|
|
<template v-if="!sorting"> |
|
|
|
|
<el-button v-auth="'/course/list:课程管理:内容设置:添加章节'" type="primary" round v-throttle @click="addChapter">添加章节</el-button> |
|
|
|
|
<el-button v-auth="'/course/list:课程管理:内容设置:编辑顺序'" type="primary" round v-throttle @click="sort">编辑顺序</el-button> |
|
|
|
|
<el-button v-auth="'/course/list:课程管理:内容设置:添加章节'" type="primary" round @click="addChapter">添加章节</el-button> |
|
|
|
|
<el-button v-auth="'/course/list:课程管理:内容设置:编辑顺序'" type="primary" round @click="sort">编辑顺序</el-button> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<el-button type="primary" round @click="move">批量移动</el-button> |
|
|
|
|
<el-button type="primary" round v-throttle @click="cancelSort">取消</el-button> |
|
|
|
|
<el-button type="primary" round v-throttle @click="saveSort">保存</el-button> |
|
|
|
|
<el-button type="primary" round @click="cancelSort">取消</el-button> |
|
|
|
|
<el-button type="primary" round @click="saveSort">保存</el-button> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -29,9 +29,9 @@ |
|
|
|
|
<div>{{ chapter.name }}</div> |
|
|
|
|
<div> |
|
|
|
|
<template v-if="!sorting"> |
|
|
|
|
<el-button v-auth="'/course/list:课程管理:内容设置:修改章节名称'" class="action-btn" type="primary" round v-throttle @click="editChapter(chapter)">修改章节名称</el-button> |
|
|
|
|
<el-button v-auth="'/course/list:课程管理:内容设置:添加小节'" class="action-btn" type="primary" round v-throttle @click="addSection(chapter.id)">添加小节</el-button> |
|
|
|
|
<el-button v-auth="'/course/list:课程管理:内容设置:章节删除'" class="action-btn" type="primary" round v-throttle @click="delChapter(chapter.id)">删除</el-button> |
|
|
|
|
<el-button v-auth="'/course/list:课程管理:内容设置:修改章节名称'" class="action-btn" type="primary" round @click="editChapter(chapter)">修改章节名称</el-button> |
|
|
|
|
<el-button v-auth="'/course/list:课程管理:内容设置:添加小节'" class="action-btn" type="primary" round @click="addSection(chapter.id)">添加小节</el-button> |
|
|
|
|
<el-button v-auth="'/course/list:课程管理:内容设置:章节删除'" class="action-btn" type="primary" 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> |
|
|
|
|
@ -97,10 +97,12 @@ |
|
|
|
|
:action="this.api.fileupload" |
|
|
|
|
:file-list="uploadList" |
|
|
|
|
:headers="headers" |
|
|
|
|
:http-request="handleRequest" |
|
|
|
|
name="file" |
|
|
|
|
> |
|
|
|
|
<el-button size="small"><img src="@/assets/img/upload.png" alt=""> 上传资源</el-button> |
|
|
|
|
</el-upload> |
|
|
|
|
<el-progress v-if="showProgress" :stroke-width="3" :percentage="progressPercent"></el-progress> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="小节名称"> |
|
|
|
|
<el-input placeholder="请输入小节名称" v-model="sectionName" maxlength="50"></el-input> |
|
|
|
|
@ -125,10 +127,12 @@ |
|
|
|
|
:action="this.api.fileupload" |
|
|
|
|
:file-list="uploadList" |
|
|
|
|
:headers="headers" |
|
|
|
|
:http-request="handleRequest" |
|
|
|
|
name="file" |
|
|
|
|
> |
|
|
|
|
<el-button size="small"><img src="@/assets/img/upload.png" alt=""> 上传资源</el-button> |
|
|
|
|
</el-upload> |
|
|
|
|
<el-progress v-if="showProgress" :stroke-width="3" :percentage="progressPercent"></el-progress> |
|
|
|
|
</div> |
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button @click="switchVisible = false">取消</el-button> |
|
|
|
|
@ -211,13 +215,14 @@ import util from "@/libs/util"; |
|
|
|
|
import Setting from "@/setting"; |
|
|
|
|
import { Loading } from "element-ui"; |
|
|
|
|
import pdf from "@/components/pdf"; |
|
|
|
|
import axios from 'axios' |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: "contentSettings", |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
headers: { |
|
|
|
|
token: util.local.get(Setting.tokenKey) |
|
|
|
|
token: sessionStorage.getItem("token") |
|
|
|
|
}, |
|
|
|
|
id: "", |
|
|
|
|
originChapters: [], |
|
|
|
|
@ -253,6 +258,8 @@ export default { |
|
|
|
|
loadIns: null, |
|
|
|
|
pdfVisible: false, |
|
|
|
|
pdfSrc: "", |
|
|
|
|
showProgress: false, |
|
|
|
|
progressPercent: 0, |
|
|
|
|
previewing: false, |
|
|
|
|
moveVisible: false, |
|
|
|
|
checkList: [], |
|
|
|
|
@ -289,7 +296,7 @@ export default { |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getData() { |
|
|
|
|
this.$get(`${this.api.queryChaptersAndSubsections}/${this.id}`) |
|
|
|
|
this.$get(`${this.api.queryChaptersTheoretical}?courseId=${this.id}`) |
|
|
|
|
.then(res => { |
|
|
|
|
this.chapters = res.chapterList; |
|
|
|
|
}) |
|
|
|
|
@ -365,12 +372,42 @@ export default { |
|
|
|
|
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); |
|
|
|
|
this.showProgress = true |
|
|
|
|
}, |
|
|
|
|
handleExceed(files, fileList) { |
|
|
|
|
util.warningMsg( |
|
|
|
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
|
|
|
|
); |
|
|
|
|
}, |
|
|
|
|
// 自定义上传 |
|
|
|
|
handleRequest(data) { |
|
|
|
|
const param = new FormData() |
|
|
|
|
param.append('file', data.file) |
|
|
|
|
const config = { |
|
|
|
|
timeout: 10000000000, |
|
|
|
|
headers: { |
|
|
|
|
'Accept': '*/*', |
|
|
|
|
'Content-Type': 'multipart/form-data', |
|
|
|
|
token: sessionStorage.getItem("token") |
|
|
|
|
}, |
|
|
|
|
// 获取上传进度，自带的组件上传进度不准确 |
|
|
|
|
onUploadProgress: progressEvent => { |
|
|
|
|
const per = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2)) |
|
|
|
|
console.log("🚀 ~ file: contentSettings.vue ~ line 329 ~ handleRequest ~ per", per, this.progressPercent) |
|
|
|
|
if (this.progressPercent <= 80) this.progressPercent = (per > 80) ? (Math.random() * 10 + 80).toFixed(2) : per |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
axios.post(this.api.fileupload, param, config).then(res => { |
|
|
|
|
this.progressPercent = 100 |
|
|
|
|
this.showProgress = false |
|
|
|
|
const { fileId, fileType, fileUrl, ossFileName } = res.data.data.filesResult |
|
|
|
|
this.uploading = false |
|
|
|
|
this.fileId = fileId |
|
|
|
|
this.fileType = fileType |
|
|
|
|
this.fileUrl = fileUrl |
|
|
|
|
this.fileName = ossFileName |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
uploadSuccess(res, file, fileList) { |
|
|
|
|
this.uploading = false; |
|
|
|
|
this.fileId = res.data.filesResult.fileId; |
|
|
|
|
@ -510,7 +547,7 @@ export default { |
|
|
|
|
let data = { |
|
|
|
|
chapterVOList: this.chapters |
|
|
|
|
}; |
|
|
|
|
this.$post(this.api.reorder, data).then(res => { |
|
|
|
|
this.$post(this.api.reorderTheoretical, data).then(res => { |
|
|
|
|
this.sorting = false; |
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
@ -525,7 +562,7 @@ export default { |
|
|
|
|
type: "warning" |
|
|
|
|
}) |
|
|
|
|
.then(() => { |
|
|
|
|
this.$del(`${this.api.deleteChapter}/${id}`).then(res => { |
|
|
|
|
this.$del(`${this.api.deleteChapterTheoretical}?chapterId=${id}`).then(res => { |
|
|
|
|
util.successMsg("删除成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
}).catch(res => { |
|
|
|
|
@ -554,7 +591,7 @@ export default { |
|
|
|
|
}; |
|
|
|
|
if (this.chapterId) { |
|
|
|
|
data.id = this.chapterId; |
|
|
|
|
this.$put(this.api.editChapter, data).then(res => { |
|
|
|
|
this.$put(this.api.editChapterTheoretical, data).then(res => { |
|
|
|
|
util.successMsg("修改成功"); |
|
|
|
|
this.chapterVisible = false; |
|
|
|
|
this.getData(); |
|
|
|
|
@ -562,7 +599,7 @@ export default { |
|
|
|
|
.catch(err => { |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
this.$post(this.api.addChapter, data).then(res => { |
|
|
|
|
this.$post(this.api.addChapterTheoretical, data).then(res => { |
|
|
|
|
util.successMsg("添加成功"); |
|
|
|
|
this.chapterVisible = false; |
|
|
|
|
this.getData(); |
|
|
|
|
@ -586,7 +623,7 @@ export default { |
|
|
|
|
fileType: this.fileType, |
|
|
|
|
originalFileName: this.originalFileName |
|
|
|
|
}; |
|
|
|
|
this.$post(this.api.addSubsection, data).then(res => { |
|
|
|
|
this.$post(this.api.addSubsectionTheoretical, data).then(res => { |
|
|
|
|
util.successMsg("添加成功"); |
|
|
|
|
this.sectionVisible = false; |
|
|
|
|
this.getData(); |
|
|
|
|
@ -625,7 +662,7 @@ export default { |
|
|
|
|
this.pdfSrc = row.fileUrl; |
|
|
|
|
this.pdfVisible = true; |
|
|
|
|
} else { |
|
|
|
|
this.$get(`${this.api.getSubsection}/${row.id}`).then(res => { |
|
|
|
|
this.$get(`${this.api.getSubsectionTheoretical}?subsectionId=${row.id}`).then(res => { |
|
|
|
|
this.previewing = true; |
|
|
|
|
this.loadIns = Loading.service(); |
|
|
|
|
this.$route.fullPath.includes("#file") || history.pushState({ file: true }, "文件预览", "#" + this.$route.fullPath + "#file"); |
|
|
|
|
@ -687,7 +724,7 @@ export default { |
|
|
|
|
fileUrl: this.fileUrl, |
|
|
|
|
originalFileName: this.originalFileName |
|
|
|
|
}; |
|
|
|
|
this.$put(this.api.editSubsection, data).then(res => { |
|
|
|
|
this.$put(this.api.editSubsectionTheoretical, data).then(res => { |
|
|
|
|
util.successMsg("更换成功"); |
|
|
|
|
this.switchVisible = false; |
|
|
|
|
this.getData(); |
|
|
|
|
@ -718,7 +755,7 @@ export default { |
|
|
|
|
type: "warning" |
|
|
|
|
}) |
|
|
|
|
.then(() => { |
|
|
|
|
this.$del(`${this.api.deleteSubsection}/${row.id}`).then(res => { |
|
|
|
|
this.$del(`${this.api.deleteSubsectionTheoretical}?subsectionId=${row.id}`).then(res => { |
|
|
|
|
util.successMsg("删除成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
}).catch(res => { |
|
|
|
|
@ -761,7 +798,7 @@ export default { |
|
|
|
|
chapterId: this.chapterId, |
|
|
|
|
name: this.sectionName |
|
|
|
|
}; |
|
|
|
|
this.$put(this.api.editSubsection, data).then(res => { |
|
|
|
|
this.$put(this.api.editSubsectionTheoretical, data).then(res => { |
|
|
|
|
util.successMsg("修改成功"); |
|
|
|
|
this.sectionNameVisible = false; |
|
|
|
|
this.getData(); |
|
|
|
|
@ -785,13 +822,16 @@ export default { |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
.relative { |
|
|
|
|
position: relative; |
|
|
|
|
} |
|
|
|
|
.btns { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 12px; |
|
|
|
|
right: 24px; |
|
|
|
|
|
|
|
|
|
.el-button { |
|
|
|
|
font-size: 14px; |
|
|
|
|
font-size: 12px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/deep/.el-progress-bar { |
|
|
|
|
@ -807,7 +847,9 @@ export default { |
|
|
|
|
cursor: not-allowed |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.el-upload-list__item-status-label { |
|
|
|
|
// display: inline-block; |
|
|
|
|
} |
|
|
|
|
.el-image-viewer__wrapper { |
|
|
|
|
transform: translateY(-10px); |
|
|
|
|
transition: transform .5s; |
|
|
|
|
|
