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>