一、定义api

  removeById(id) {
    return request({
      url: `${api_name}/${id}`,
      method: 'delete'
    })
  },

  save(chapter) {
    return request({
      url: api_name,
      method: 'post',
      data: chapter
    })
  },

  getById(id) {
    return request({
      url: `${api_name}/${id}`,
      method: 'get'
    })
  },

  updateById(chapter) {
    return request({
      url: `${api_name}/${chapter.id}`,
      method: 'put',
      data: chapter
    })
  }

二、新增章节页面功能

1、定义data数据

dialogChapterFormVisible: false, //是否显示章节表单
chapter: {// 章节对象
  title: '',
  sort: 0
}

2、添加章节按钮

<el-button type="text" @click="dialogChapterFormVisible = true">添加章节</el-button>

3、章节表单dialog

<!-- 添加和修改章节表单 -->
<el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
    <el-form :model="chapter" label-width="120px">
        <el-form-item label="章节标题">
            <el-input v-model="chapter.title"/>
        </el-form-item>
        <el-form-item label="章节排序">
            <el-input-number v-model="chapter.sort" :min="0" controls-position="right"/>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
    </div>
</el-dialog>

4、添加章节methods

saveOrUpdate() {
  this.saveBtnDisabled = true
  if (!this.chapter.id) {
    this.saveData()
  } else {
    this.updateData()
  }
},

saveData() {
  this.chapter.courseId = this.courseId
  chapter.save(this.chapter).then(response => {
    this.$message({
      type: 'success',
      message: '保存成功!'
    })
    this.helpSave()
  }).catch((response) => {
    this.$message({
      type: 'error',
      message: response.message
    })
  })
},

updateData() {

},
    
helpSave(){
  this.dialogChapterFormVisible = false// 如果保存成功则关闭对话框
  this.fetchChapterNestedListByCourseId()// 刷新列表
  this.chapter.title = ''// 重置章节标题
  this.chapter.sort = 0// 重置章节标题
  this.saveBtnDisabled = false
},

三、修改章节信息

1、编辑章节按钮

<el-button type="text" @click="editChapter(chapter.id)">编辑</el-button>

2、定义编辑方法

editChapter(chapterId) {
    this.dialogChapterFormVisible = true
    chapter.getById(chapterId).then(response => {
        this.chapter = response.data.item
    })
},

3、定义更新方法

updateData() {
  chapter.updateById(this.chapter).then(response => {
    this.$message({
      type: 'success',
      message: '修改成功!'
    })
    this.helpSave()
  }).catch((response) => {
    // console.log(response)
    this.$message({
      type: 'error',
      message: response.message
    })
  })
},

四、删除章节

1、按钮

<el-button type="text" @click="removeChapter(chapter.id)">删除</el-button>

2、定义删除方法

removeChapter(chapterId) {
  this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    return chapter.removeById(chapterId)
  }).then(() => {
    this.fetchChapterNestedListByCourseId()// 刷新列表
    this.$message({
      type: 'success',
      message: '删除成功!'
    })
  }).catch((response) => { // 失败
    if (response === 'cancel') {
      this.$message({
        type: 'info',
        message: '已取消删除'
      })
    } else {
      this.$message({
        type: 'error',
        message: response.message
      })
    }
  })
},