学习项目-前端-第六课：ElementUI: modify

 一、easy-mock-->/api/gathering/{gatheringId}(get)

{
  "code": 20000,
  "flag": true,
  "message": "@string",
  "data": {
    "id": "@string",
    "name": "@cword(8,12)",
    "summary": "@cword(20,40)",
    "detail": "@cword(20,40)",
    "sponsor": "@string",
    "image": "@image",
    "starttime": "@date",
    "endtime": "@date",
    "address": "@county(true)",
    "enrolltime": "@string",
    "state": "@string",
    "city": "@string"
  }
}

二、vueadmin-template-master-->src-->api-->gathering.js

import request from "@/utils/request"
const group_name = 'api'
const api_name = 'gathering'


export default {
    getList() {
        return request(
            {
                url: `/${group_name}/${api_name}`,
                method: "get"
            }
        );
    },
    search(page, size, searchMap) {
        return request(
            {
                url: `/${group_name}/${api_name}/search/${page}/${size}`,
                method: "post",
                data: searchMap
            }
        );
    },
    save(pojo){
        return request({
            url : `/${group_name}/${api_name}`,
            method : 'post',
            data : pojo
        });
    },
    findById(id){
        return request({
            url : `/${group_name}/${api_name}/${id}`,
            method : 'get'
        });
    },
    update(id,pojo){
        if(id == null || id == ''){
            return this.save(pojo);
        }
        return request({
            url : `/${group_name}/${api_name}/${id}`,
            method : 'put',
            data : pojo
        });
    },
    deleteById(id){
        return request({
            url : `/${group_name}/${api_name}/${id}`,
            method : 'delete'
        });
    }
}

三、vueadmin-template-master-->src-->views-->table-->gathering.vue

<el-button @click="handleEdit('')" type="primary">新增</el-button>

<el-table-column
    fixed="right"
    label="操作"
    width="120">
    <template slot-scope="scope">
      <el-button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el-button>
    </template>
</el-table-column>

handleEdit(id){

      this.dialogFormVisible = true;

      if(id != ''){

        gatheringApi.findById(id).then(response=>{

          if(response.flag){

            this.pojo = response.data;

          }

        });

      } else {

        this.pojo = {}

      }

    }

 四、save modify-->easy-mock-->/api/gathering/{gatheringId}(save modify)

{
  "code": 20000,
  "flag": true,
  "message": "修改成功！"
}

五、/api/gathering/{gatheringId}(put)

update(id,pojo){

    if(id == null || id == ''){

        return this.save(pojo);

    }

    return request({

        url : `/api/gathering/${id}`,

        method : 'put',

        data : pojo

    });

}

六、vueadmin-template-master-->src-->views-->table-->gathering.vue

data() {
  return {
    list: [],
    total: 0,
    currentPage: 1,
    pageSize: 10,
    searchMap: {},
    dialogFormVisible: false,
    pojo: {},
    cityList : [],
    id : ''
  };
}

handleSave(){

    gatheringApi.update(this.id , this.pojo).then(response=>{

      this.$message({

        message: response.message,

        type: (response.flag?'success':'error')

      });

      if(response.flag){

        this.fetchData();

      } 

    });

  this.dialogFormVisible = false;

}