day04 - 商品管理（商品分类+分类参数）(1)

F.自定义数据列

使用vue-table-with-tree-grid定义模板列并添加自定义列

//先在columns中添加一个列

columns: [

{label:‘分类名称’,prop:‘cat_name’},

//type:‘template’(将该列设置为模板列)，template:‘isok’(设置该列模板的名称为isok)

{label:‘是否有效’,prop:‘’,type:‘template’,template:‘isok’},

{label:‘排序’,prop:‘’,type:‘template’,template:‘order’},

{label:‘操作’,prop:‘’,type:‘template’,template:‘opt’}

]

一级

二级

三级

编辑

删除

G.完成分页功能

<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”>

//添加对应的事件函数

methods:{

…

handleSizeChange(newSize){

//当pagesize发生改变时触发

this.queryInfo.pagesize = newSize;

this.getCateList();

},

handleCurrentChange(newPage){

//当pagenum发生改变时触发

this.queryInfo.pagenum = newPage;

this.getCateList();

}

}

H.完成添加分类

…

<el-button type=“primary” @click=“showAddCateDialog”>添加分类

…

<el-dialog title=“添加分类” :visible.sync=“addCateDialogVisible” width=“50%” @close=“addCateDialogClosed”>

<el-button @click=“addCateDialogVisible = false”>取 消

<el-button type=“primary” @click=“addCate”>确 定

//用来显示或隐藏添加分类对话框

addCateDialogVisible: false,

//添加分类的表单数据对象

addCateForm:{

//分类名称

cat_name:‘’,

//添加分类的父级id，0则表示父级为0.添加一级分类

cat_pid:0,

//添加分类的等级，0则表示添加一级分类

cat_level:0

},

//添加分类校验规则

addCateFormRules:{

//验证规则

cat_name:[ {required:true , message:‘请输入分类名称’,trigger:‘blur’} ]

},

//保存1,2级父级分类的列表

parentCateList:[]

…

showAddCateDialog() {

//调用getParentCateList获取分类列表

this.getParentCateList()

//显示添加分类对话框

this.addCateDialogVisible = true

},

async getParentCateList(){

//获取父级分类数据列表

const { data: res } = await this.$http.get(‘categories’, {

params: {type:2}

})

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

return this.$message.error(‘获取商品分类列表数据失败’)

}

this.parentCateList = res.data

}

添加级联菜单显示父级分类

先导入Cascader组件，并注册

然后添加使用级联菜单组件：

<el-cascader expandTrigger=‘hover’ v-model=“selectedKeys” :options=“parentCateList” :props=“cascaderProps” @change=“parentCateChange” clearable change-on-select>

添加数据

//配置级联菜单中数据如何展示

cascaderProps:{

value:‘cat_id’,

label:‘cat_name’,

children:‘children’,

expandTrigger:‘hover’

},

//绑定用户选择的分类值

selectedKeys:[]

…

methods:{

…

parentCateChange(){

//级联菜单中选择项发生变化时触发

console.log(this.selectedKeys)

//如果用户选择了父级分类

if(this.selectedKeys.length > 0){

//则将数组中的最后一项设置为父级分类

this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]

//level也要跟着发生变化

this.addCateForm.cat_level = this.selectedKeys.length

return

}else{

this.addCateForm.cat_pid = 0

this.addCateForm.cat_level = 0

return

}

},

addCateDialogClosed(){

//当关闭添加分类对话框时，重置表单

this.$refs.addCateFormRef.resetFields()

this.selectedKeys = [];

this.addCateForm.cat_pid = 0

this.addCateForm.cat_level = 0

},

addCate() {

//点击确定，完成添加分类

console.log(this.addCateForm)

this.$refs.addCateFormRef.validate(async valid => {

if (!valid) return

//发送请求完成添加分类

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

‘categories’,

this.addCateForm

)

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

return this.$message.error(‘添加分类失败’)

}

this.$message.success(‘添加分类成功’)

this.getCateList()

this.addCateDialogVisible = false

})

}

}

I.推送代码

制作完添加分类之后，将代码提交到仓库，推送到码云,将goods_cate分支合并到master

git add .

git commit -m ‘完成商品分类’

git push

git checkout master

git merge goods_cate

2.参数管理

只允许给三级分类内容设置参数，参数分为动态参数和静态参数属性

A.添加子级组件

添加Params.vue子组件，并在router.js中引入该组件并设置路由规则

import Params from ‘./components/goods/Params.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 }

]

B.完成组件基本布局

完成Params.vue组件的基本布局

其中警告提示信息使用了el-alert，在element.js引入该组件并注册

分类参数

首页

商品管理

分类参数

选择商品分类：

C.完成级联选择框

完成商品分类级联选择框

选择商品分类：

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

…

D.展示参数

展示动态参数数据以及静态属性数据

<el-tabs v-model=“activeName” @tab-click=“handleTabClick”>

添加参数

编辑

删除

添加属性

编辑

删除