一、后端实现

1、controller

SubjectAdminController
@ApiOperation(value = "新增二级分类")
@PostMapping("save-level-two")
public R saveLevelTwo(
    @ApiParam(name = "subject", value = "课程分类对象", required = true)
    @RequestBody Subject subject){

    boolean result = subjectService.saveLevelTwo(subject);
    if(result){
        return R.ok();
    }else{
        return R.error().message("保存失败");
    }
}

2、service

接口 SubjectService
boolean saveLevelTwo(Subject subject);

实现 SubjectServiceImpl

@Override
public boolean saveLevelTwo(Subject subject) {
    Subject subjectLevelTwo = this.getSubByTitle(subject.getTitle(), subject.getParentId());
    if(subjectLevelTwo == null){
        return this.save(subject);
    }else{
        throw new GuliException(20001, "类别已存在");
    }
}

二、前端实现

1、api

src/api/edu/subject.js

  saveLevelTwo(subject) {
    return request({
      url: `${api_name}/save-level-two`,
      method: 'post',
      data: subject
    })
  }

2、组件模板

sec/views/edu/subject/list.vue

按钮

<el-button
            v-if="node.level == 1"
            type="text"
            size="mini"
            @click="() => {dialogFormVisible = true; subject.parentId = data.id}">添加二级分类</el-button>

表单：

修改弹出表单的确定按钮绑定的事件

<el-button type="primary" @click="append()">确 定</el-button>

3、组件js

sec/views/edu/subject/list.vue

添加方法 append

append(data) {
    if (!this.subject.parentId) {
        this.appendLevelOne()
    } else {
        this.appendLevelTwo()
    }
},

保存方法

appendLevelTwo() {
    subject.saveLevelTwo(this.subject).then(response => {
        this.$message({
            type: 'success',
            message: '保存成功!'
        })
        this.dialogFormVisible = false// 如果保存成功则关闭对话框
        this.fetchNodeList()// 刷新列表
        this.subject.title = ''// 重置类别标题
        this.subject.parentId = '' // 重置表单parentId
    }).catch((response) => {
        // console.log(response)
        this.$message({
            type: 'error',
            message: response.data.message
        })
    })
}