1、在src/api/video.js
中增加查询、添加、删除、修改小节的api接口方法
import request from '@/utils/request'
export default {
// 添加小节
addVideo(videoInfo) {
return request({
url: `/eduservice/eduvideo/addVideo`,
method: 'post',
data: videoInfo
})
},
// 删除小节
deleteVideo(id) {
return request({
url: `/eduservice/eduvideo/${id}`,
method: 'delete'
})
},
// 根据id查询小节信息
getVideoInfo(id) {
return request({
url: `/eduservice/eduvideo/${id}`,
method: 'get'
})
},
// 修改小节信息
updateVideo(videoInfo) {
return request({
url: `/eduservice/eduvideo/updateVideo`,
method: 'post',
data: videoInfo
})
}
}
2、添加、删除、编辑小节入口
在course/chapter.vue
页面中章节内容后添加小节按钮上添加、删除、编辑小节的方法。
<span class="acts">
<el-button type="text" @click="openAddVideo(chapter.id)">添加小节</el-button>
<el-button style type="text" @click="openUpdateChapter(chapter.id)">编辑</el-button>
<el-button type="text" @click="removeChapter(chapter.id)">删除</el-button>
</span>
3、添加和修改小节的弹框
在course/chapter.vue
页面创建添加和修改小节的弹框。
<!-- 添加和修改小节表单 -->
<el-dialog :visible.sync="dialogVideoFormVisible" title="添加课时">
<el-form :model="video" label-width="120px">
<el-form-item label="课时标题">
<el-input v-model="video.title"/>
</el-form-item>
<el-form-item label="课时排序">
<el-input-number v-model="video.sort" :min="0" controls-position="right"/>
</el-form-item>
<el-form-item label="是否免费">
<el-radio-group v-model="video.isFree">
<el-radio :label="true">免费</el-radio>
<el-radio :label="false">默认</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="上传视频">
<!-- TODO -->
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVideoFormVisible = false">取 消</el-button>
<el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveOrUpdateVideo">确 定</el-button>
</div>
</el-dialog>
4、调用video.js中的接口实现添加、修改、删除小节的功能
import video from "@/api/video";
export default {
data() {
return {
courseId: "",
saveBtnDisabled: false, // 保存按钮是否禁用
allChapterVideo: [], //章节小节数据集合
dialogChapterFormVisible: false, //章节添加修改表单是否展示
chapter: {}, //章节信息
dialogVideoFormVisible: false,//小节添加修改表单是否展示
video:{}//小节信息
};
},
methods: {
//添加小节前的操作
openAddVideo(chapterId) {
//打开小节弹框
this.dialogVideoFormVisible = true;
//清空小节对象
this.video = {};
//设置课程id
this.video.courseId = this.courseId;
//设置章节id
this.video.chapterId = chapterId;
},
//保存或者修改小节信息
saveOrUpdateVideo() {
if (this.video.id) {
//修改
this.updateVideoInfo();
} else {
//添加
this.saveVideo();
}
},
saveVideo(){
video.addVideo(this.video)
.then(response=>{
//关闭修改弹框
this.dialogVideoFormVisible = false;
//提示
this.$message({
type: "success",
message: "保存小节成功!"
});
//刷新页面
this.getChapterVideoList();
})
},
updateVideoInfo() {
video.updateVideo(this.video).then(response => {
// 关闭修改弹框
this.dialogVideoFormVisible = false
// 提示
this.$message({
type: 'success',
message: '修改小节成功!'
})
// 刷新页面
this.getChapterVideoList()
})
},
// 删除小节
removeVideo(videoId) {
this.$confirm('此操作将永久删除该章节, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 调用接口删除数据
video.deleteVideo(videoId).then(response => {
this.$message({
type: 'success',
message: '删除小节成功!'
})
// 刷新数据
this.getChapterVideoList()
})
})
},
// 根据小节id查询小节的回显数据
openUpdateVideo(videoId) {
// 显示弹框
this.dialogVideoFormVisible = true
// 调用接口回显数据
video.getVideoInfo(videoId).then(response => {
this.video = response.data.video
})
},