|
|
|
|
@ -2,7 +2,7 @@ |
|
|
|
|
<div> |
|
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
|
<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> |
|
|
|
|
<!--内容设置--> |
|
|
|
|
@ -16,6 +16,7 @@ |
|
|
|
|
<el-button type="primary" round v-throttle @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> |
|
|
|
|
</template> |
|
|
|
|
@ -40,6 +41,11 @@ |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-table :data="chapter.subsectionList" class="table" stripe header-align="center"> |
|
|
|
|
<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> |
|
|
|
|
@ -77,7 +83,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 |
|
|
|
|
@ -178,6 +184,25 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
|
<el-dialog title="资源移动" :visible.sync="moveVisible" :close-on-click-modal="false" width="330px"> |
|
|
|
|
<el-form> |
|
|
|
|
<el-form-item label="目标章节"> |
|
|
|
|
<el-select v-model="moveForm.id" placeholder="请选择目标章节" @change="chapterChange"> |
|
|
|
|
<el-option v-for="(item, i) in chapters" :key="i" :label="item.name" :value="item.id"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="目标排序"> |
|
|
|
|
<el-select v-model="moveForm.sort" placeholder="请选择目标排序"> |
|
|
|
|
<el-option v-for="(item, i) in sortList" :key="i" :label="item.name" :value="item.id"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button @click="moveVisible = false">取消</el-button> |
|
|
|
|
<el-button type="primary" @click="moveConfirm">确定</el-button> |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
@ -195,6 +220,7 @@ export default { |
|
|
|
|
token: util.local.get(Setting.tokenKey) |
|
|
|
|
}, |
|
|
|
|
id: "", |
|
|
|
|
originChapters: [], |
|
|
|
|
chapters: [], |
|
|
|
|
sorting: false, |
|
|
|
|
uploading: false, |
|
|
|
|
@ -227,7 +253,24 @@ export default { |
|
|
|
|
loadIns: null, |
|
|
|
|
pdfVisible: false, |
|
|
|
|
pdfSrc: "", |
|
|
|
|
previewing: false |
|
|
|
|
previewing: false, |
|
|
|
|
moveVisible: false, |
|
|
|
|
checkList: [], |
|
|
|
|
sortList: [ |
|
|
|
|
{ |
|
|
|
|
id: 'bottom', |
|
|
|
|
name: '置末' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 'top', |
|
|
|
|
name: '置顶' |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
moveForm: { |
|
|
|
|
id: '', |
|
|
|
|
sort: 'bottom' |
|
|
|
|
}, |
|
|
|
|
moved: false // 是否移动过 |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
components: { pdf }, |
|
|
|
|
@ -255,11 +298,30 @@ export default { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
goBack() { |
|
|
|
|
if (this.previewing) { |
|
|
|
|
this.closeIframe(); |
|
|
|
|
// 如果是预览则关闭预览 |
|
|
|
|
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.sorting = false |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
this.$router.push("/course/list"); |
|
|
|
|
this.$router.back() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
iframeOnload() { |
|
|
|
|
document.querySelector("#fileIframe").onload = e => { |
|
|
|
|
@ -353,16 +415,96 @@ export default { |
|
|
|
|
this.chapterVisible = true; |
|
|
|
|
}, |
|
|
|
|
sort() { |
|
|
|
|
this.sorting = true; |
|
|
|
|
this.originChapters = JSON.parse(JSON.stringify(this.chapters)) |
|
|
|
|
this.sorting = true; |
|
|
|
|
}, |
|
|
|
|
// 批量移动 |
|
|
|
|
move() { |
|
|
|
|
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' |
|
|
|
|
} |
|
|
|
|
this.sortList = [ |
|
|
|
|
{ |
|
|
|
|
id: 'bottom', |
|
|
|
|
name: '置末' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 'top', |
|
|
|
|
name: '置顶' |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
this.moveVisible = true |
|
|
|
|
} else { |
|
|
|
|
this.$message.warning('请选择小节！') |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 目标章节选择回调 |
|
|
|
|
chapterChange(id) { |
|
|
|
|
const list = [] |
|
|
|
|
// 获取多少个小节 |
|
|
|
|
this.chapters.find(e => e.id === id).subsectionList.map((e, i) => { |
|
|
|
|
list.push({ |
|
|
|
|
id: i, |
|
|
|
|
name: i+1 |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
// 置末和置顶写死 |
|
|
|
|
this.sortList = [ |
|
|
|
|
{ |
|
|
|
|
id: 'bottom', |
|
|
|
|
name: '置末' |
|
|
|
|
}, |
|
|
|
|
...list, |
|
|
|
|
{ |
|
|
|
|
id: 'top', |
|
|
|
|
name: '置顶' |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
// 资源移动校验 |
|
|
|
|
moveConfirm() { |
|
|
|
|
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 = { |
|
|
|
|
@ -370,7 +512,6 @@ export default { |
|
|
|
|
}; |
|
|
|
|
this.$post(this.api.reorder, data).then(res => { |
|
|
|
|
this.sorting = false; |
|
|
|
|
this.getData(); |
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
@ -599,6 +740,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]; |
|
|
|
|
@ -652,7 +794,10 @@ export default { |
|
|
|
|
font-size: 14px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.el-progress-bar { |
|
|
|
|
padding-right: 70px; |
|
|
|
|
margin-right: -70px; |
|
|
|
|
} |
|
|
|
|
.sort-icon { |
|
|
|
|
font-size: 24px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
