vue后台管理系统开发流程全记录(十)_标签管理功能开发: 标签修改

当点击 编辑 按钮后，弹出编辑窗口，并查询出标签信息渲染。修改后点击确定 提交。

编辑对话框组件与前文中新增对话框组件为同一组件，无需绘制页面和再次引入。

一 模拟接口

这里需要两个模拟接口，打开对话框时需要根据对应id取出标签信息作初始渲染，点击确认提交时提交数据。

1.1 标签信息查询接口

url: /article/label/{id}

methods: get

{
     
  "code": 20000, 
  "message": "查询成功", 
  "data": {
      
    "id": 8, // 返回 id=8 数据 
    "categoryId|1": "@integer(10, 17)", // 类别Id 11到17之间 
    "name": "@cname", // 标签名 
    "createDate": "@date", // 随机创建时间 
    "updateDate": "@date" // 随机更新时间 
    }
}

1.2 提交修改数据接口

url: /article/label

methods: put

{
     
  "code": 20000,
  'message': "修改成功"
}

二 封装接口

在src\api\label.js封装 两个接口的调用函数

import request from "@/utils/request"

export default {
         // 列表分页接口    
	... ...
    update(data) {
      
        return request({
      url: `/article/label`, method: 'put', data})
    },
    getById(id) {
      
        return request({
      url: `/article/label/${
       id}`, method: 'get'})
    }
} 

三 添加事件

3.1 对话框弹出

在src/views/lable/index.vue(标签管理主页面)，为编辑按钮编辑触发事件，事件中为对话框内容赋初值并打开对话框。

<el-button @click="handleEdit(scope.row.id)" size="mini">编辑el-button> 

    handleEdit(id) {
      
        // console.log('编辑', id) 
        api.getById(id).then(response => {
      
            if(response.code === 20000) {
      
                 this.edit.formData = response.data //弹出窗口 
                 this.edit.visible = true; 
                 this.edit.title = '编辑' 
             } 
         }) 
     }

3.2 提交事件

修改src/views/lable/edit.vue(对话框子组件)中确定按键绑定的提交事件。

首先检验是否通过校验，通过后判断该对话框为编辑对话框还是增加对话框，触发不同的接口函数，最后根据调用接口的返回值设置提示。

 <el-button type="primary" @click="submitForm('formData')" size='mini'>确 定el-button>

        submitForm(formName){
     
            this.$refs[formName].validate((valid) => {
     
                if(valid){
     
                    this.submitData();
                }else {
     
                    return false;
                }
            })
        },
        async submitData(){
     
            let res = null;
            if(this.formData.id){
     
                res = await api.update(this.formData);
            }else {
     
                res = await api.add(this.formData);
            }
            if(res.code === 20000){
     
                this.$message({
     
                    message: '保存成功',
                    type: 'success'
                });
                 this.handleClose();
            }else {
     
                this.$message({
     
                    message: '保存失败',
                    type: 'error'
                });
             }
        }