商品分类

创建分支

  • 创建一个goods_cate分支用于开发商品分类功能
1
2
3
4
5
git branch
# 创建分支
git checkout -b goods_cate
# 初次推送分支到云端
git push -u origin goods_cate

分类路由

  • 创建Categories组件,并配置路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Categories from '../components/goods/Categories'
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{
path: '/home',
component: Home,
redirect: '/welcome',
children: [
//....
{ path: '/categories',component: Categories}
]
}
]
})
  • 然后发送请求获取分类数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export default {
name: 'Categories',
data(){
return {
// 查询分页条件
queryInfo: {
type: 3,
pagenum: 1,
pagesize: 5,
},
// 商品分类的数据列表,默认为空
cateList: [],
// 总数据条数
total: 0,
}
},
created() {
this.getCateList()
},
methods:{
// 获取商品分类数据
async getCateList() {
const { data: res } = await this.$http.get('categories',{params:this.queryInfo})
if(res.meta.status !== 200){
return this.$message.error('获取分类数据失败')
}
// 把数据列表数据赋值给cateList
this.cateList = res.data.result
// 为总条数赋值
this.total = res.data.total
}
}
}

树形表格组件

  • 需要使用第三方插件,在Vue可视化工具【依赖】中,搜索vue-table-with-tree-grid安装依赖

1
2
3
import TreeTable from 'vue-table-with-tree-grid'
// 使用<tree-table>即可使用,可用自定义
Vue.component('tree-table',TreeTable)
  • 使用方法查看官方API文档添加属性即可
1
2
3
4
5
6
7
8
9
10
11
<!--表格-->
<tree-table
:data="cateList"
:columns="columns"
:selection-type="false"
:expand-type="false"
:show-index="true"
index-text="#"
border
>
</tree-table
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default {
name: 'Categories',
data() {
return {
// 商品分类的数据列表,默认为空
cateList: [],
// 总数据条数
total: 0,
// 树形组件指定列的定义
columns: [
{
label: '分类名称', // 列名
prop: 'cat_name', //具体的值
},
],
}
},
}

  • 使用自定义模板列渲染表格数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--表格-->
<tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" :show-index="true"
index-text="#" border>
<!--是否有效-->
<template slot="isok" slot-scope="scope">
<i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:lightgreen;"></i>
<i class="el-icon-error" v-else style="color:red;"></i>
</template>
<!--排序-->
<template slot="order" slot-scope="scope">
<el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
<el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
<el-tag type="warning" size="mini" v-else>三级</el-tag>
</template>
<!--操作-->
<template slot="opt" slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
</template>
</tree-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export default {
name: 'Categories',
data() {
return {
// 商品分类的数据列表,默认为空
cateList: [],
// 总数据条数
total: 0,
// 树形组件指定列的定义
columns: [
{
label: '分类名称', // 列名
prop: 'cat_name', //具体的值
},
{
label: '是否有效', // 列名
type: 'template', // 表示当前列定义为模板列
template: 'isok', // 使用的模板名称
},
{
label: '排序',
type:'template',
template:'order'
},
{
label: '操作',
type:'template',
template:'opt'
}
],
}
},
}

分页功能

  • 分页功能组件
1
2
3
4
5
6
7
8
9
10
11
<!--分页-->
<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"
>
</el-pagination>
  • 然后重新回调函数,当pagesizepagenum发生变化时重新获取数据。前提是后台已经做好了分页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
export default {
name: 'Categories',
data() {
return {
// 查询分页条件
queryInfo: {
type: 3,
pagenum: 1,
pagesize: 5,
},
// 商品分类的数据列表,默认为空
cateList: [],
// 总数据条数
total: 0,
// 树形组件指定列的定义
columns: [
// ...
],
}
},
created() {
this.getCateList()
},
methods: {
// 获取商品分类数据
async getCateList() {
const { data: res } = await this.$http.get('categories', {
params: this.queryInfo,
})
if (res.meta.status !== 200) {
return this.$message.error('获取分类数据失败')
}
// 把数据列表数据赋值给cateList
this.cateList = res.data.result
// 为总条数赋值
this.total = res.data.total
},
// 监听pagesize改变的事件
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize
// 重新查询获取数据
this.getCateList()
},
// 监听pagenum的改变
handleCurrentChange(newPage) {
this.queryInfo.pagenum = newPage
this.getCateList()
},
},
}

添加分类实现

  • 使用到了对话框组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--添加分类的对话框-->
<el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%">
<!--添加分类的表单-->
<el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
<el-form-item label="分类名称" prop="cat_name">
<el-input v-model="addCateForm.cat_name"></el-input>
</el-form-item>
<el-form-item label="父级分类">
<!--级联选择框-->
</el-form-item>
</el-form>
<!--底部按钮-->
<span slot="footer" class="dialog-footer">
<el-button @click="addCateDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addCateDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
export default {
name: 'Categories',
data() {
return {
// 查询分页条件
queryInfo: {
type: 3,
pagenum: 1,
pagesize: 5,
},
// ...
// 控制添加分类对话框的显示与隐藏
addCateDialogVisible: false,
// 添加分类表单对象
addCateForm: {
cat_name: '', //将要添加的分类的名称
cat_pid: 0, // 父级分类的ID
cat_level: 0, //当前分类的等级,默认一级分类
},
addCateFormRules: {
cat_name: [
{ required: true, message: '请输入分类名称', trigger: 'blur' },
],
},
// 父级分类列表数据
parentCateList:[]
}
},
created() {
this.getCateList()
},
methods: {
// ..
showAddCateDialog() {
// 获取父级分类数据列表
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 级联选择器组件
1
2
3
4
5
6
7
8
9
10
11
<el-form-item label="父级分类">
<!--options指定数据源,props指定配置对象-->
<el-cascader
v-model="selectedKeys"
:options="parentCateList"
expand-trigger="hover"
:props="cascaderProps"
@change="parentCateChanged"
clearable
></el-cascader>
</el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
export default {
name: 'Categories',
data() {
return {
// 查询分页条件
queryInfo: {
type: 3,
pagenum: 1,
pagesize: 5,
},
// 商品分类的数据列表,默认为空
cateList: [],
// 总数据条数
total: 0,
// 树形组件指定列的定义
columns: [
],
// 控制添加分类对话框的显示与隐藏
addCateDialogVisible: false,
// 添加分类表单对象
addCateForm: {
cat_name: '', //将要添加的分类的名称
cat_pid: 0, // 父级分类的ID
cat_level: 0, //当前分类的等级,默认一级分类
},
addCateFormRules: {
cat_name: [
{ required: true, message: '请输入分类名称', trigger: 'blur' },
],
},
// 父级分类列表数据
parentCateList: [],
// 指定级联选择器的配置对象
cascaderProps: {
value: 'cat_id', // 所选择的值,为ID值
label: 'cat_name', // 分类名
children: 'children', // 嵌套的值
checkStrictly: true, // 是否可用选择任一项
},
// 选中的父级分类的ID数组
selectedKeys: [],
}
},
created() {
this.getCateList()
},
methods: {
// 获取商品分类数据
// 监听pagesize改变的事件
// 监听pagenum的改变
// 点击按钮打开对话框
showAddCateDialog() {
// 获取父级分类数据列表
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
},
// 选择项发生变化触发
parentCateChanged() {
// 如果selectKeys数组中的length>0 证明选中了父级分类,反正没有选中
if (this.selectedKeys.length > 0) {
// 父级分类的ID
this.addCateForm.cat_pid =
this.selectedKeys[this.selectedKeys.length - 1]
// 为当前分类的等级赋值
this.addCateForm.cat_level = this.selectedKeys.length
return
} else {
// 父级分类的ID
this.addCateForm.cat_pid = 0
// 为当前分类的等级赋值
this.addCateForm.cat_level = 0
}
},
// 点击按钮添加新的分类
addCate() {
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
})
},
// 监听对话框的关闭事件
addCateDialogClosed() {
this.$refs.addCateFormRef.resetFields()
this.selectedKeys = []
this.addCateForm.cat_level = 0
this.addCateForm.cat_pid = 0
},
},
}

上传码云

  • goods_cate分支提交到码云并合并
1
2
3
4
5
6
7
8
git status
git add .
git commit -m "完成了分类管理"
git push
git branch
git checkout master
git merge goods_cate
git push