课程大纲-小节添加修改删除（前端）

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
      })
    },