谷粒商城-品牌管理开发(自定义开关)_谷粒商城前端不显示新增按钮

1.在系统管理里面新增品牌管理菜单

 2.复制之前逆向工程生成的前端页面代码到product目录下

3.重启renren-fast-vue前端项目：

npm run dev

这里页面能正常显示，但是未能显示出新增等按钮：是因为权限问题：找到utils包下的index.js:让返回值始终为true:

/**
 * 是否有权限
 * @param {*} key
 */
export function isAuth (key) {
  // return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
  return true;
}

4.自定义品牌的显示状态：

（1）vue表格中自定义列模板：通过Scoped  slot来实现（也就是vue中的slot插槽机制，说白了就是在某个位置插入自定义的内容）：在需要修改的这一列定义一个<template>模板,在模板里面定义一个slot-scope属性：其中"scope"的值分装了当前列一整行信息、以及当前列的信息、以及索引、以及整个表格的状态信息。

 <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
  </template>

（2）自定义显示状态

<el-table-column
        prop="showStatus"
        header-align="center"
        align="center"
        label="显示状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.showStatus"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
 </el-table-column>

点击新增按钮时把显示状态有input框改为switch

 <el-form-item label="显示状态" prop="showStatus">
   // <el-input v-model="dataForm.showStatus" placeholder="显示状态[0-不显示；1-显示]"></el-input>
      <el-switch
        v-model="dataForm.showStatus"
        active-color="#13ce66"
        inactive-color="#ff4949">
      </el-switch>
 </el-form-item>

需要监听switch按钮的变化来给后端发送请求：

这里用到switch开关里面的change事件：它会传开关最新状态的值的参数

在switch开关中加入一个change事件：updateBrandStatus

<el-switch
     v-model="scope.row.showStatus"
     active-color="#13ce66"
     inactive-color="#ff4949"
     @change="updateBrandStatus">
 </el-switch>

在方法中加入此方法：（自动传入switch开关最新状态的值）

 updateBrandStatus(status){
        console.log(status);
 
      },

当我们点击开关时，浏览器就会打印相关状态的值。

当是只接收状态值是不够的，我们需要知道改变的是哪个商品的状态，我们需要给updateBrandStatus传递一个参数，这个参数为这一整行数据：

<el-switch
      v-model="scope.row.showStatus"
      active-color="#13ce66"
      inactive-color="#ff4949"
      @change="updateBrandStatus(scope.row)">
</el-switch>

在方法中进行接收：

updateBrandStatus(data){
        console.log(data);
 
      },

当点击开关时，会获取到所有数据：（这个是一个对象）

获取到这些数据后就可以向后端发送请求修改某个商品的状态：

5.向后端发送请求：

（1）后端代码已经生成：

 /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody BrandEntity brand){
		brandService.updateById(brand);
 
        return R.ok();
    }

（2）前端发送请求：由于我们只需要向后端发送商品id和状态，所以解构data这个对象：

      updateBrandStatus(data){
        console.log(data);
        let {brandId,showStatus} = data;
        //发送请求修改商品状态
        this.$http({
          url: this.$http.adornUrl("/product/brand/update"),
          method: 'post',
          data: this.$http.adornData({brandId,showStatus},false)
        }).then(({data}) =>{
          this.$message({
            type: "success",
            message: "状态更新成功"
          })
        });
      },

但是这里会报错：

因为我们发送的showStatus是boolean值，而数据库需要的是int值。

这时我们需要使用switch的属性来操作开关状态的值：

active-value:开关激活的话，它的值默认为true

inactive-value:开关关闭的话，它的值默认为false

我们可以改变它的默认值，让默认值为0和1.

<el-switch
      v-model="scope.row.showStatus"
      active-color="#13ce66"
      inactive-color="#ff4949"
      :active-value="1"
      :inactive-value="0"
      @change="updateBrandStatus(scope.row)">
</el-switch>