一 定義api
export default {
// 課程章節列表
getNestedTreeList(courseId) {
return request({
url: `/admin/edu/chapter/nested-list/${courseId}`,
method: 'get'
})
},
// 刪除章節
removeById(id) {
return request({
url: `/admin/edu/chapter/remove/${id}`,
method: 'delete'
})
},
// 保存章節信息
save(chapter) {
return request({
url: '/admin/edu/chapter/save',
method: 'post',
data: chapter
})
},
// 根據章節id獲得章節信息
getById(id) {
return request({
url: `/admin/edu/chapter/get/${id}`,
method: 'get'
})
},
// 更新章節信息
updateById(chapter) {
return request({
url: '/admin/edu/chapter/update',
method: 'put',
data: chapter
})
}
}
二 顯示章節列表
1 組件腳本
export default {
components: { ChapterForm, VideoForm }, // 2、註冊組件
data() {
return {
chapterList: [] // 章節嵌套列表
}
},
created() {
this.fetchNodeList()
},
methods: {
// 獲取後端章節列表數據
fetchNodeList() {
chapterApi.getNestedTreeList(this.$parent.courseId).then(response => {
this.chapterList = response.data.items
})
},
// 根據id刪除章節信息
removeChapterById(chapterId) {
this.$confirm('此操作將永久刪除該章節,是否繼續?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return chapterApi.removeById(chapterId)
}).then(response => {
this.fetchNodeList()
this.$message.success(response.message)
}).catch((response) => {
if (response === 'cancel') {
this.$message.info('取消刪除')
}
})
},
// 添加章節
addChapter() {
this.$refs.chapterForm.open()
},
// 編輯章節
editChapter(chapterId) {
this.$refs.chapterForm.open(chapterId)
},
}
2 組件模板
<!-- 章節列表 -->
<!-- 添加章節按鈕 -->
<div>
<el-button type="primary" @click="addChapter()">添加章節</el-button>
</div>
<!-- 章節列表 -->
<ul class="chapterList">
<li v-for="chapter in chapterList" :key="chapter.id">
<p>{
{ chapter.title }}
<span class="acts">
<el-button type="text" @click="addVideo(chapter.id)">添加課時</el-button>
<el-button type="text" @click="editChapter(chapter.id)">編輯</el-button>
<el-button type="text" @click="removeChapterById(chapter.id)">刪除</el-button>
</span>
</p>
<ul class="chapterList videoList">
<li v-for="video in chapter.children" :key="video.id">
<p>{
{ video.title }}
<el-tag v-if="!video.videoSourceId" size="mini" type="danger">
{
{ '尚未上傳視頻' }}
</el-tag>
<span class="acts">
<el-tag v-if="video.free" size="mini" type="success">{
{ '免費觀看' }}</el-tag>
<el-button type="text" @click="editVideo(chapter.id, video.id)">編輯</el-button>
<el-button type="text" @click="removeVideoById(video.id)">刪除</el-button>
</span>
</p>
</li>
</ul>
</li>
</ul>
3 定義樣式
.chapterList{
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.chapterList li{
position: relative;
}
.chapterList p{
float: left;
font-size: 20px;
margin: 10px 0;
padding: 10px;
height: 70px;
line-height: 50px;
width: 100%;
border: 1px solid #DDD;
}
.chapterList .acts {
float: right;
font-size: 14px;
}