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 }) } }
在course/chapter.vue
页面中章节内容后添加小节按钮上添加、删除、编辑小节的方法。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>
在course/chapter.vue
页面建立添加和修改小节的弹框。java
<!-- 添加和修改小节表单 --> <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>
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 }) },