day05 - 商品管理 （参数管理+商品添加

<el-pagination @size-change=“handleSizeChange” @current-change=“handleCurrentChange” :current-page=“queryInfo.pagenum” :page-sizes=“[3, 5, 10, 15]” :page-size=“queryInfo.pagesize” layout=“total, sizes, prev, pager, next, jumper” :total=“total”>

//绑定数据以及添加方法

C.实现删除商品

//绑定按钮点击事件

<el-button size=“mini” type=“danger” icon=“el-icon-delete” @click=“removeGoods(scope.row.goods_id)”>

//事件函数代码编写

async removeGoods(goods_id) {

//根据id删除对应的参数或属性

//弹窗提示用户是否要删除

const confirmResult = await this.$confirm(

‘请问是否要删除该商品’,

‘删除提示’,

{

confirmButtonText: ‘确认删除’,

cancelButtonText: ‘取消’,

type: ‘warning’

}

).catch(err => err)

//如果用户点击确认，则confirmResult 为’confirm’

//如果用户点击取消, 则confirmResult获取的就是catch的错误消息’cancel’

if (confirmResult != ‘confirm’) {

return this.$message.info(‘已经取消删除’)

}

//没有取消就是要删除，发送请求完成删除

const {data:res} = await this.$http.delete(‘goods/${goods_id}`)

if (res.meta.status !== 200) {

return this.$message.error(‘删除商品失败’)

}

this.$message.success(‘删除商品成功’)

this.getGoodsList()

}

[](()4.添加商品

A.添加编程式导航

在List.vue中添加编程式导航，并创建添加商品路由组件及规则

//在List.vue中添加编程式导航

<el-button type=“primary” @click=“goAddPage”>添加商品

goAddPage(){

this.$router.push(‘/goods/add’)

}

在router.js中引入goods/Add.vue,并添加路由规则

import GoodAdd from ‘./components/goods/Add.vue’

path: ‘/home’, component: Home, redirect: ‘/welcome’, children: [

{ path: “/welcome”, component: Welcome },

{ path: “/users”, component: Users },

{ path: “/rights”, component: Rights },

{ path: “/roles”, component: Roles },

{ path: “/categories”, component: Cate },

{ path: “/params”, component: Params },

{ path: “/goods”, component: GoodList },

{ path: “/goods/add”, component: GoodAdd }

]

B.布局Add.vue组件

布局过程中需要使用Steps组件，在element.js中引入并注册该组件，并在global.css中给组件设置全局样式

import {Steps,Step} from ‘element-ui’

Vue.use(Step)

Vue.use(Steps)

//global.css

.el-steps{

《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 margin:15px 0;

}

.el-step__title{

font-size: 13px;

}

然后再在Add.vue中进行页面布局

添加商品

首页

商品管理

添加商品

<el-cascader expandTrigger=‘hover’ v-model=“addForm.goods_cat” :options=“cateList” :props=“cateProps” @change=“handleChange” clearable>

C.添加tab栏切换验证

也就是说不输入某些内容，无法切换到别的tab栏

//首先给tabs添加tab切换前事件

…

//再到methods编写事件函数beforeTabLeave

beforeTabLeave(activeName,oldActiveName){

//在tab栏切换之前触发，两个形参为切换前，后的tab栏name

if(oldActiveName === ‘0’){

//在第一个标签页的时候

if(this.addForm.goods_cat.length !== 3){

this.$message.error(‘请选择商品的分类’)

return false

}else if(this.addForm.goods_name.trim() === ‘’){

this.$message.error(‘请输入商品名称’)

return false

}else if(this.addForm.goods_price.trim() === ‘0’){

this.$message.error(‘请输入商品价格’)

return false

}else if(this.addForm.goods_weight.trim() === ‘0’){

this.$message.error(‘请输入商品重量’)

return false

}else if(this.addForm.goods_number.trim() === ‘0’){

this.$message.error(‘请输入商品数量’)

return false

}

}

}

D.展示信息

展示商品参数信息,商品属性信息

在商品参数信息展示中使用的el-checkbox,el-checkbox-group组件，打开element.js引入组件并注册组件

//在用户点击tab栏时触发事件

<el-tabs v-model=“activeIndex” :tab-position=“‘left’” :before-leave=“beforeTabLeave” @tab-click=“tabClicked”>

…

//在参数信息，商品属性面板中添加循环生成结构的代码

//在data数据中添加保存动态参数和静态属性的数组

export default {

data() {

return {

…

//动态参数列表

manyTableData: [],

//静态属性列表

onlyTableData:[]

}

},methods: {

…

async tabClicked() {

//当用户点击切换tab栏时触发

if (this.activeIndex === ‘1’) {

//发送请求获取动态参数

const { data: res } = await this.$http.get(

categories/${this.cateId}/attributes,

{ params: { sel: ‘many’ } }

)

if (res.meta.status !== 200) {

return this.$message.error(‘获取动态参数列表失败’)

}

//将attr_vals字符串转换为数组

res.data.forEach(item => {

item.attr_vals =

item.attr_vals.length === 0 ? [] : item.attr_vals.split(’ ')

})

this.manyTableData = res.data

} else if (this.activeIndex === ‘2’) {

//发送请求获取静态属性

const { data: res } = await this.$http.get(

categories/${this.cateId}/attributes,

{ params: { sel: ‘only’ } }

)

if (res.meta.status !== 200) {

return this.$message.error(‘获取静态属性列表失败’)

}

this.onlyTableData = res.data

}

}