章节表单前端实现

偏执的太偏执、 2021-07-24 19:49 448阅读 0赞

# 一 章节表单组件 #

## 1 组件模板 ##

## 2 组件脚本 ##

# 二 添加章节 #

## 1 引入章节表单组件 ##

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

使用组件

<chapter-form ref="chapterForm" />
    
        <div style="text-align:center">
          <el-button type="primary" @click="prev()">上一步</el-button>
          <el-button type="primary" @click="next()">下一步</el-button>
        </div>

## 2 添加章节按钮 ##

<div>
          <el-button type="primary" @click="addChapter()">添加章节</el-button>
        </div>

定义方法

// 添加章节
        addChapter() {
          this.$refs.chapterForm.open()
        },

## 3 保存章节 ##

import chapterApi from '@/api/chapter'
        // 保存章节
        save() {
          this.chapter.courseId = this.$parent.$parent.courseId
          chapterApi.save(this.chapter).then(response => {
            this.$message.success(response.message)
            // 关闭组件
            this.close()
            // 刷新列表
            this.$parent.fetchNodeList()
          })
        },

修改close()方法

// 关闭对话框
        close() {
          this.dialogVisible = false
          this.resetForm()
        },
    
        // 重置表单
        resetForm() {
          this.chapter = {
            sort: 0
          }
        },

# 三 修改章节 #

## 1 编辑章节按钮 ##

<el-button type="text" @click="editChapter(chapter.id)">编辑</el-button>
        // 编辑章节
        editChapter(chapterId) {
          this.$refs.chapterForm.open(chapterId)
        },

## 2 回显章节 ##

// 显示对话框
        open(chapterId) {
          this.dialogVisible = true
          if (chapterId) {
            chapterApi.getById(chapterId).then(response => {
              this.chapter = response.data.item
            })
          }
        },

## 3 完善更新方法 ##

// 更新章节
        update() {
          chapterApi.updateById(this.chapter).then(response => {
            this.$message.success(response.message)
            // 关闭组件
            this.close()
            // 刷新列表
            this.$parent.fetchNodeList()
          })
        }

# 四 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/2dc1919fcbc4483595e4a8305617603b.png