|
|
|
|
@ -2,7 +2,7 @@ |
|
|
|
|
<div> |
|
|
|
|
<el-card shadow="hover" class="mgb20"> |
|
|
|
|
<div class="flex-between"> |
|
|
|
|
<el-page-header @back="goBack" :content="'内容设置'"></el-page-header> |
|
|
|
|
<el-page-header @back="goBack" :content="sorting? '更改排序' : '内容设置'"></el-page-header> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
<!--内容设置--> |
|
|
|
|
@ -40,8 +40,12 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-table :data="chapter.subsectionList" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
|
|
|
|
<el-table-column v-if="sorting" type="selection" width="55" align="center"></el-table-column> |
|
|
|
|
<el-table :data="chapter.subsectionList" class="table" stripe header-align="center" row-key="id"> |
|
|
|
|
<el-table-column v-if="sorting" width="55" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-checkbox v-model="scope.row.check"></el-checkbox> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="name" label="资源名称"> |
|
|
|
|
</el-table-column> |
|
|
|
|
@ -80,7 +84,7 @@ |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
<el-dialog title="添加小节" :visible.sync="sectionVisible" width="24%" @close="closeSection" :close-on-click-modal="false"> |
|
|
|
|
<el-dialog title="添加小节" :visible.sync="sectionVisible" width="28%" @close="closeSection" :close-on-click-modal="false"> |
|
|
|
|
<el-form label-width="80px"> |
|
|
|
|
<el-form-item label="资源添加"> |
|
|
|
|
<el-upload |
|
|
|
|
@ -218,6 +222,7 @@ export default { |
|
|
|
|
token: sessionStorage.getItem('token') |
|
|
|
|
}, |
|
|
|
|
id: this.$route.query.cid, |
|
|
|
|
originChapters: [], |
|
|
|
|
chapters: [], |
|
|
|
|
multipleSelection: [], |
|
|
|
|
sorting: false, |
|
|
|
|
@ -255,6 +260,7 @@ export default { |
|
|
|
|
showProgress: false, |
|
|
|
|
progressPercent: 0, |
|
|
|
|
moveVisible: false, |
|
|
|
|
checkList: [], |
|
|
|
|
sortList: [ |
|
|
|
|
{ |
|
|
|
|
id: 'bottom', |
|
|
|
|
@ -268,7 +274,8 @@ export default { |
|
|
|
|
moveForm: { |
|
|
|
|
id: '', |
|
|
|
|
sort: 'bottom' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
moved: false // 是否移动过 |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
components: { pdf }, |
|
|
|
|
@ -299,15 +306,30 @@ export default { |
|
|
|
|
this.multipleSelection = val |
|
|
|
|
}, |
|
|
|
|
goBack() { |
|
|
|
|
if (this.previewing) { |
|
|
|
|
this.closeIframe(); |
|
|
|
|
} else { |
|
|
|
|
if (this.sorting) { |
|
|
|
|
this.sorting = false |
|
|
|
|
// 如果是预览则关闭预览 |
|
|
|
|
if (this.previewing) { |
|
|
|
|
this.closeIframe(); |
|
|
|
|
} else { |
|
|
|
|
// 排序中 |
|
|
|
|
if (this.sorting) { |
|
|
|
|
// 已经移动了顺序 |
|
|
|
|
if (this.moved) { |
|
|
|
|
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
this.saveSort() |
|
|
|
|
this.moved = false |
|
|
|
|
}).catch(() => { |
|
|
|
|
this.sorting = false |
|
|
|
|
this.chapters = JSON.parse(JSON.stringify(this.originChapters)) |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
this.$router.back() |
|
|
|
|
this.sorting = false |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
this.$router.back() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
iframeOnload() { |
|
|
|
|
document.querySelector("#fileIframe").onload = e => { |
|
|
|
|
@ -419,11 +441,20 @@ export default { |
|
|
|
|
this.chapterVisible = true; |
|
|
|
|
}, |
|
|
|
|
sort() { |
|
|
|
|
this.sorting = true; |
|
|
|
|
this.originChapters = JSON.parse(JSON.stringify(this.chapters)) |
|
|
|
|
this.sorting = true; |
|
|
|
|
}, |
|
|
|
|
// 批量移动 |
|
|
|
|
move() { |
|
|
|
|
if (this.multipleSelection.length) { |
|
|
|
|
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' |
|
|
|
|
@ -466,62 +497,40 @@ export default { |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
// 资源移动保存 |
|
|
|
|
moveSubmit() { |
|
|
|
|
const { moveForm } = this |
|
|
|
|
let { id, sort } = moveForm |
|
|
|
|
if (typeof sort === 'string') sort = sort === 'top' ? 0 : this.sortList.length - 2 // 置顶和置末直接给排序 |
|
|
|
|
const list = this.multipleSelection |
|
|
|
|
const promises = [] |
|
|
|
|
// 多选，所以循环调编辑接口 |
|
|
|
|
list.map(e => { |
|
|
|
|
promises.push(new Promise((resolve, reject) => { |
|
|
|
|
this.$put(this.api.editSubsection, { |
|
|
|
|
id: e.id, |
|
|
|
|
cid: this.id, |
|
|
|
|
chapterId: id, |
|
|
|
|
sort |
|
|
|
|
}).then(res => { |
|
|
|
|
resolve() |
|
|
|
|
}).catch(err => { |
|
|
|
|
reject() |
|
|
|
|
}) |
|
|
|
|
})) |
|
|
|
|
}) |
|
|
|
|
// 编辑完后再获取列表，重新排sort，然后再调排序接口 |
|
|
|
|
Promise.all(promises).then(() => { |
|
|
|
|
this.$get(`${this.api.queryChaptersAndSubsections}/${this.id}`).then(({ chapterList }) => { |
|
|
|
|
chapterList.forEach((n, k) => { |
|
|
|
|
n.sort = k + 1 |
|
|
|
|
n.subsectionList.forEach((j, i) => { |
|
|
|
|
j.sort = i + 1 |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
this.$post(this.api.reorder, { |
|
|
|
|
chapterVOList: chapterList |
|
|
|
|
}).then(res => { |
|
|
|
|
this.$message.success('移动成功！') |
|
|
|
|
this.getData() |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 资源移动校验 |
|
|
|
|
moveConfirm() { |
|
|
|
|
const { moveForm } = this |
|
|
|
|
let { id, sort } = moveForm |
|
|
|
|
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) |
|
|
|
|
}) |
|
|
|
|
this.moved = true |
|
|
|
|
}, |
|
|
|
|
cancelSort() { |
|
|
|
|
this.sorting = false; |
|
|
|
|
this.chapters = JSON.parse(JSON.stringify(this.originChapters)) |
|
|
|
|
this.sorting = false; |
|
|
|
|
}, |
|
|
|
|
saveSort() { |
|
|
|
|
this.chapters.forEach((n, k) => { |
|
|
|
|
n.sort = k + 1; |
|
|
|
|
n.subsectionList.forEach((j, i) => { |
|
|
|
|
j.sort = i + 1; |
|
|
|
|
j.sort = i + 1 |
|
|
|
|
j.chapterId = n.id |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
let data = { |
|
|
|
|
@ -529,7 +538,6 @@ export default { |
|
|
|
|
}; |
|
|
|
|
this.$post(this.api.reorder, data).then(res => { |
|
|
|
|
this.sorting = false; |
|
|
|
|
this.moveSubmit() |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}, |
|
|
|
|
editChapter(item) { |
|
|
|
|
@ -781,6 +789,7 @@ export default { |
|
|
|
|
}, |
|
|
|
|
sortSection(chapterIndex, type, disabled, index) { |
|
|
|
|
if (!disabled) { |
|
|
|
|
this.moved = true |
|
|
|
|
let list = this.chapters[chapterIndex].subsectionList; |
|
|
|
|
if (type == "up") { |
|
|
|
|
let tempItem = list.splice(index - 1, 1)[0]; |
|
|
|
|
@ -790,7 +799,6 @@ export default { |
|
|
|
|
list.splice(index, 0, tempItem); |
|
|
|
|
} |
|
|
|
|
this.chapters[chapterIndex].subsectionList = list; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
sectionNameSubmit() { |
|
|
|
|
@ -852,7 +860,10 @@ export default { |
|
|
|
|
cursor: not-allowed |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.el-progress-bar { |
|
|
|
|
padding-right: 70px; |
|
|
|
|
margin-right: -70px; |
|
|
|
|
} |
|
|
|
|
.el-image-viewer__wrapper { |
|
|
|
|
transform: translateY(-10px); |
|
|
|
|
transition: transform .5s; |
|
|
|
|
|
