讲师修改功能

80 阅读1分钟

1、 新增修改按钮

<router-link :to="'/teacher/add/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>

2、点击按钮跳转页面

(1)添加隐藏路由

{
        path: 'add/:id',
        name: 'EduTeacherEdit',
        component: () => import('@/views/teacher/add'),
        meta: { title: '编辑讲师', noCache: true },
        hidden: true
      }

3、回显数据

(1)在src/api/teacher.js中创建根据id查询老师的接口方法

//根据id查询讲师
  getTeacherById(id){
    return request({
      url: `/eduservice/eduteacher/getTeacherById/${id}`,
      method: 'get'
    })
  }

(2)自动调用接口回显数据,创建新属性id

data() {
    return {
        id:'',
      eduTeacher: {},
      saveBtnDisabled: false
    };
  },
  created() {
      console.log(this.$route.params.id)
      if(this.$route.params&&this.$route.params.id){
          this.id = this.$route.params.id
          teacher.getTeacherById(this.id)
          .then(response=>{
              this.eduTeacher = response.data.eduTeacher
          })
      }
  },

4、保存修改功能

(1)创建api接口

//修改讲师
   updateTeacher(eduTeacher){
    return request({
      url: `/eduservice/eduteacher/updateTeacher`,
      method: 'post',
      data: eduTeacher//用json格式传输
    })
  }

(2)调用接口方法实现

//添加或者修改讲师的保存
    saveOrUpdate() {
        if(this.eduTeacher.id){
            this.updateEduTeacher()
        }else{
            this.saveTeacher()
        }
    },

    //添加讲师
    saveTeacher() {
      teacher.addTeacher(this.eduTeacher).then(response => {
        //提示成功
        this.$message({
          type: "success",
          message: "添加成功!"
        });
        //路由切换
        this.$router.push({ path: "/teacher/list" });
      });
    },

    //更新讲师
    updateEduTeacher() {
      teacher.updateTeacher(this.eduTeacher).then(response => {
        //提示成功
        this.$message({
          type: "success",
          message: "修改成功!"
        });
        //路由切换
        this.$router.push({ path: "/teacher/list" });
      });
    }