谷粒学院（十）课程管理模块 | 课程大纲列表 | 二级联动 | 富文本编辑器（三）

<!-- 章节 -->
<ul class="chanpterList">
   <li
       v-for="chapter in chapterVideoList"
       :key="chapter.id">
       <p>
           {{ chapter.title }}
           <span class="acts">
               <el-button style="" type="text" @click="openVideo(chapter.id)">添加小节</el-button>
               <el-button style="" type="text" @click="openEditChatper(chapter.id)">编辑</el-button>
               <el-button type="text" @click="removeChapter(chapter.id)">删除</el-button>
           </span>
       </p>
       <!-- 视频 -->
       <ul class="chanpterList videoList">
           <li
               v-for="video in chapter.children"
               :key="video.id">
               <p>{{ video.title }}
           <span class="acts">
               <el-button style="" type="text" @click="openEditVideo(video.id)">编辑</el-button>
               <el-button type="text" @click="removeVideo(video.id)">删除</el-button>
           </span>
               </p>
           </li>
       </ul>
   </li>
</ul>
<div>
   <el-button @click="previous">上一步</el-button>
   <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
</div>

<style scoped>
.chanpterList{
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.chanpterList li{
  position: relative;
}
.chanpterList p{
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #DDD;
}
.chanpterList .acts {
    float: right;
    font-size: 14px;
}
.videoList{
  padding-left: 50px;
}
.videoList p{
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #DDD;
}
</style>

import request from '@/utils/request'
export default {
    //根据课程id查询章节和小节
    getChapterVideo(courseId) {
        return request({
            url: `/eduservice/chapter/getChapterVideo/${courseId}`,
            method: 'get'
        })
    }
}

created() {
  //获取路由中的id值
  if(this.$route.params && this.$route.params.id) {
    this.courseId = this.$route.params.id
    //调用 根据课程id查询章节和小节
    this.getChapterVideo()
  }
},
methods:{
    //根据课程id查询章节和小节
    getChapterVideo() {
      chapter.getChapterVideo(this.courseId)
        .then(response =>{
            this.chapterVideoList = response.data.allChapterVideo
        })
    },
    //......
}

created() {
    //获取路由id值,回显数据
    if(this.$route.params && this.$route.params.id) {
        this.courseId = this.$route.params.id
        //调用根据id查询课程的方法
        this.getCourseInfo()
    }else{
        //初始化courseInfo
        this.courseInfo = {cover: 'https://guli-photos.oss-cn-hangzhou.aliyuncs.com/course.jpg'}//先清空...
        //初始化一级分类
        this.getOneSubject()
    } 
    //初始化讲师列表
    this.getListTeacher()
},
methods:{
  //根据课程id查询,回显数据
  getCourseInfo(){
      course.getCourseInfo(this.courseId)
          .then(response => {
              //在courseInfo课程基本信息，包含一级分类id和二级分类id
              this.courseInfo = response.data.courseInfoVo
              //需要补充代码的地方...
          })
  }
  //....
}

addCourseInfo(){//添加课程基本信息
    course.saveCourseInfo(this.courseInfo)
        .then(response=>{
        this.$message({
            type:'success',
            message:'课程添加成功!'
        })
        //跳转到课程大纲页面
        this.$router.push({path:'/course/chapter/'+response.data.courseId})
    }).catch(response=>{
        this.$message({
            type:'error',
            message:'课程添加失败!'
        })
    })
},
updateCourseInfo(){//修改课程基本信息
    course.updateCourseInfo(this.courseInfo).then(response=>{
        this.$message({
            type:'success',
            message:'课程修改成功!'
        })
        //跳转到课程大纲页面
        this.$router.push({path:'/course/chapter/'+this.courseId})
    }).catch(response=>{
        this.$message({
            type:'error',
            message:'课程修改失败!'
        })
    })
},
//提交课程信息
saveOrUpdate(){
    if(!this.courseInfo.id){
        // console.log("添加课程");
        this.addCourseInfo()
    }else{
        // console.log("修改课程");
        this.updateCourseInfo()
    }        
},

created() {
      this.init()
},
watch:{//监听
    $route(to,from){//当路由路径发生变化时,方法就会被执行
        this.init()
    }
},
methods: {
    init(){//初始化方法封装
        if(this.$route.params && this.$route.params.id){//如果是数据回显
            this.courseId = this.$route.params.id
            //查询课程信息
            this.getCourseInfo()
        }else{//如果是课程添加
            this.courseInfo = {cover: 'https://guli-photos.oss-cn-hangzhou.aliyuncs.com/course.jpg'}//先清空...
            this.getOneSubject()//查询所有一级分类
        }
        // this.getAllSubject()//方法二:级联下拉菜单
        this.getTeacherList()
    }
}