微服务项目：尚融宝（15）（前端平台：完善积分等级模块）

放弃幻想，认清现实，准备斗争

一、删除数据

1、定义api

src/api/core/integral-grade.js


removeById(id) {
    return request({
        url: `/admin/core/integralGrade/remove/${id}`,
        method: 'delete'
    })
}

2、页面组件模板

src/views/core/integral-grade/list.vue，在table组件中添加删除列


"操作" width="200" align="center">
    <template slot-scope="scope">
        <el-button
                   type="danger"
                   size="mini"
                   icon="el-icon-delete"
                   @click="removeById(scope.row.id)"
                   >
            删除
        el-button>
    template>

3、删除数据脚本


// 根据id删除数据
removeById(id) {
  this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      integralGradeApi.removeById(id).then(response => {
        this.$message.success(response.message)
        this.fetchData()
      })
    })
    .catch(error => {
      this.$message.info('取消删除')
    })
}

二、新增数据

1、定义api

src/api/core/integral-grade.js


save(integralGrade) {
    return request({
        url: '/admin/core/integralGrade/save',
        method: 'post',
        data: integralGrade
    })
}

2、定义页面data

src/views/core/integral-grade/form.vue，完善data定义

3、页面组件模板

src/views/core/integral-grade/form.vue，完善template

4、新增数据脚本

src/views/core/integral-grade/form.vue，引入api

import integralGradeApi from '@/api/core/integral-grade'

定义保存方法

三、回显数据

1、列表页编辑按钮

src/views/core/integral-grade/list.vue，表格“操作”列中增加“修改”按钮


"'/core/integral-grade/edit/' + scope.row.id" style="margin-right:5px;" >
	<el-button type="primary" size="mini" icon="el-icon-edit">
		修改
	el-button>

2、定义api

src/api/core/integral-grade.js


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

3、获取数据脚本

src/views/core/integral-grade/form.vue，methods中定义回显方法


// 根据id查询记录
fetchDataById(id) {
    integralGradeApi.getById(id).then(response => {
        this.integralGrade = response.data.record
    })
}

页面渲染成功后获取数据

因为已在路由中定义如下内容：path: 'edit/:id'，因此可以使用 this.$route.params.id 获取路由中的id


//页面渲染成功
created() {
    if (this.$route.params.id) {
        this.fetchDataById(this.$route.params.id)
    }
},

四、更新数据

1、定义api

src/api/core/integral-grade.js


updateById(integralGrade) {
    return request({
      url: '/admin/core/integralGrade/update',
      method: 'put',
      data: integralGrade
    })
}

2、更新数据脚本

src/views/core/integral-grade/form.vue，methods中定义updateData


// 根据id更新记录
updateData() {
    // 数据的获取
    integralGradeApi.updateById(this.integralGrade).then(response => {
        this.$message({
            type: 'success',
            message: response.message
        })
        this.$router.push('/core/integral-grade/list')
    })
}

完善saveOrUpdate方法


saveOrUpdate() {
    // 禁用保存按钮
    this.saveBtnDisabled = true
    if (!this.integralGrade.id) {
        this.saveData()
    } else {
        this.updateData()
    }
},