课时管理前端实现

痛定思痛。 2021-07-25 02:17 383阅读 0赞

# 一 定义api #

export default {
      // 保存课时
      save(video) {
        return request({
          url: '/admin/edu/video/save',
          method: 'post',
          data: video
        })
      },
      // 根据课时id获得课时
      getById(id) {
        return request({
          url: `/admin/edu/video/get/${id}`,
          method: 'get'
        })
      },
      // 更新课时
      updateById(video) {
        return request({
          url: '/admin/edu/video/update',
          method: 'put',
          data: video
        })
      },
      // 删除课时
      removeById(id) {
        return request({
          url: `/admin/edu/video/remove/${id}`,
          method: 'delete'
        })
      }
    }

# 二 课时表单组件 #

# 三 添加课时 #

## 1 引入课时表单 ##

// 1、引入组件
    import VideoForm from '@/views/course/components/Video/Form.vue'
    
    export default {
      components: { ChapterForm, VideoForm }, // 2、注册组件
      data() {
        return {
          chapterList: [] // 章节嵌套列表
        }
      },

## 2 使用课时组件 ##

<video-form ref="videoForm" />

## 3 添加课时按钮 ##

<el-button type="text" @click="addVideo(chapter.id)">添加课时</el-button>

## 4 添加课时相关方法 ##

// 添加课时
        addVideo(chapterId) {
          this.$refs.videoForm.open(chapterId)
        },

# 四 修改课时 #

## 1 编辑课时按钮 ##

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

## 2 编辑按钮方法 ##

// 编辑章节
        editChapter(chapterId) {
          this.$refs.chapterForm.open(chapterId)
        },

# 五 删除课时 #

## 1 删除课时按钮 ##

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

## 2 删除按钮方法 ##

// 根据id删除章节信息
        removeChapterById(chapterId) {
          this.$confirm('此操作将永久删除该章节，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            return chapterApi.removeById(chapterId)
          }).then(response => {
            this.fetchNodeList()
            this.$message.success(response.message)
          }).catch((response) => {
            if (response === 'cancel') {
              this.$message.info('取消删除')
            }
          })
        },