蓝桥到家第三课

接第二课继续往下说，下面讲调用批量删除接口删除商品

• 打开接口文档，https://www.showdoc.com.cn/2059631189527964/9359500321871159，找到【批量删除商品】接口，/api/del/all/goods，把接口路径复制一下
• 打开项目src/api/user.js，新建一个api方法

/**
 * /api/del/all/goods 批量删除商品
 */
 export function delAllShopFun(data) {
  return request({
    url: '/api/del/all/goods',
    method: 'delete',
    data
  })
}

• 然后复制delShopFun方法，在需要的页面引入进来

import { delAllShopFun } from "@/api/user";

• 方法引入后，放在那待用，既然要执行批量删除商品，根据后端接口文档要求，要传给后端key为ids，value为要删除商品的id数组的json对象，即如下：

{
   "ids":["62f5f109c30baf69c6bd8c61","62f5f10ac30baf69c6bd8c63"]
}

• 既然要传id数组，那就要先拿到我们选择的商品数据，table表格给我们提供了一个方法，找到element-ui文档的多选表格

image.png

• 有一个方法 叫 selection-change，给表格绑定这个方法@selection-change="handleSelectionChange"，当你多选后，会触发handleSelectionChange方法，会回调你选中的数据数组，如下

<el-table
     :data="tableData"
     style="width: 100%"
     size="small"
     border
     @selection-change="handleSelectionChange"
     :height="tableHeight"
     >
     ......
     ......
     ......
</el-table>

methods:{
  handleSelectionChange(e){ 
      console.log(e);
  }
}

image.png

• 可以看到，此方法回调的是一组你选中的数据数组，后端需要的是一组id数组，那么我们就要使用方法，把id拿出来，组装成id数组，这里使用map方法

data() {
    return {
      ids:[],//定义一个空数组
    };
  },

handleSelectionChange(e){
      console.log(e);
      this.ids = e.map(item=>{
        return item._id //返回每条数据的_id
      })
      console.log(this.ids);
    }

• 既然我们拿到了id数组，下面就可以继续开发点击【批量删除】按钮触发调用批量删除的接口了

<el-button type="danger" size="small" icon="el-icon-delete" @click="handelDelAll">批量删除</el-button>

handelDelAll(){
      if(this.ids.length==0){
        alert("请先选中要删除的商品")
        return
      }
      delAllShopFun({ids:this.ids}).then(res=>{
        alert("删除成功")
        this.getShopListFun()
      })
    }

继续往下说，下面讲实现switch开发控制商品上下架，调用update接口

• switch开发有个event事件 change

change  switch 状态发生变化时的回调函数

• 给switch开关绑定一个change事件，该事件回调一个新状态的值

<el-switch
   v-model="scope.row.status"
   :active-value="1"
   :inactive-value="2"
   active-color="#13ce66"
   inactive-color="#eee"
   @change="changeSwitch"
   >
 </el-switch>

changeSwitch(e){
   console.log(e);
}

image.png

• 打开接口文档找到修改商品的接口路径/api/update/goods/:id，注意:id是动态参数，拼接到接口路径后面的
• 打开src/api/user.js文件，新建一个修改商品信息的接口

/**
 * /api/update/goods/:id 更新商品信息
 */
 export function updateShopFun(data,id) {
  return request({
    url: '/api/update/goods/'+id,
    method: 'put',
    data
  })
}

• 然后在需要的页面 引入 updateShopFun方法

import { updateShopFun } from "@/api/user";

• 然后在changeSwitch方法内调用该方法，根据文档传status参数给到后端，因为changeSwitch回调的是新状态的值，我们要拿到新状态的值和这条数据的id，所以要覆盖changeSwitch默认的回调

<el-switch
   v-model="scope.row.status"
   :active-value="1"
   :inactive-value="2"
   active-color="#13ce66"
   inactive-color="#eee"
   @change="changeSwitch(scope.row)"
   >
 </el-switch>

• 然后这样调用

changeSwitch(e){
      console.log(e);
      updateShopFun({status:e.status},e._id).then(res=>{
        alert('更新成功')
      })
    }