Vue电商管理系统-商品分类
Posted Kira~~
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue电商管理系统-商品分类相关的知识,希望对你有一定的参考价值。
- 创建新分支
a. 创建good_cate
子分支git checkout -b good_cate
b. 创建远程子分支git push -u
- 创建Cate组件并添加路由
- 添加面包屑导航区
<!-- 面包屑导航区-->
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>商品分类</el-breadcrumb-item>
</el-breadcrumb>
- 添加卡片视图
<el-card>
<el-button type="primary">添加分类</el-button>
</el-card>
- 获取商品分类的数据列表
a. data中添加查询参数queryInfo
,商品分类的数据列表商品分类的数据列表
,总数据条数total
b.methods
中添加getCateList()
方法获取商品分类数据
c.created()
函数中调用this.getCateList()
方法
// 查询参数
queryInfo: {
type: 3,
pagenum: 1,
pagesize: 5
},
//商品分类的数据列表
cateList: [],
// 总数据条数
total: 0
}
// 获取商品分类数据
async getCateList(){
const {data:res} = await this.$http.get('categories',{params: this.queryInfo})
console.log(res.data)
if (res.meta.status !== 200){
return this.$message.error('获取商品分类列表失败')
}
// 给数据列表赋值
this.cateList = res.data.result
// 为总数据条数赋值
this.total = res.data.total
}
- 添加树形控件
a. 通过vue ui
打开vue可视化面板
b. 点击安装依赖,查找vue-table-with-tree-grid控件,点击安装
c. 在main.js中添加import TreeTable from 'vue-table-with-tree-grid'
导入控件,并通过Vue.component('tree-table',TreeTable)
挂载全局
d. Cate组件中添加tree-table控件:去除复选框:selection-type="false"
,去除展开按钮:expand-type="false"
,展示索引列show-index
,添加索引列表头show-index
,添加边框,去除鼠标hover效果:show-row-hover="false"
e. 使用自定义模板列渲染是否有效,排序和操作列
<tree-table
:data="cateList" :columns="columns"
:selection-type="false" :expand-type="false"
show-index index-text="#"
border :show-row-hover="false">
<!-- 是否有效-->
<template slot="isok" slot-scope="scope">
<i class="el-icon-success" v-if="scope.row.cat_deleted === true" style="color: lightgreen"></i>
<i class="el-icon-error" v-if="scope.row.cat_deleted === false" 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 size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
<el-tag size="mini" type="warning" v-else>三级</el-tag>
</template>
<!--操作-->
<template slot="opt">
<el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
<el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
</template>
</tree-table>
// 为tree-table指定列的定义
columns: [
{label: '分类名称', prop: 'cat_name'},
{label: '是否有效', type: 'template', template: 'isok'},
{label: '排序', type: 'template', template: 'order'},
{label: '操作', type: 'template', template: 'opt'}
]
- 实现分页的功能
添加el-pagination
控件,绑定size改变事件handleSizeChange
,页面切换事件handleCurrentChange
,当前页面queryInfo.pagenum
,当前分页大小queryInfo.pagesiz
,总页数total
<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>
// 监听pagesize的改变
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize
this.getCateList()
},
// 监听pagenum的改变
handleCurrentChange(newPage) {
this.queryInfo.pagenum = newPage
this.getCateList()
}
- 实现添加分类的功能
a. 添加添加分类对话框,设置控制对话框显示与关闭的变量:visible.sync="addCateDialogVisible"
b. 添加Cascader
组件:value / v-model
选中项绑定值,options
可选项数据源,键名可通过 Props 属性配置,props
配置选项,具体见下表,clearable 是否支持清空选项,filterable
是否可搜索选项,change 当选中节点变化时触发
c. 实现parentCateChanged
,当第二个选项为空时,增加发的是父级分类,否则增加的是子集分类,为该分类添加父节点的id和level值。
<!-- 添加分类的对话框-->
<el-dialog title="添加分类" width="30%" :visible.sync="addCateDialogVisible"
@close="addCateDialogClosed">
<el-form :model="addCateForm" ref="addCateFormRef" :rules="addCateFormRules" 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-cascader
v-model="selectedKeys"
:options="parentCateList"
:props="cascaderProps"
@change="parentCateChanged"
clearable
filterable
style="width: 100%"
></el-cascader>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addCateDialogVisible = false">取消</el-button>
<el-button type="primary" @click="addCate">确定</el-button>
</span>
</el-dialog>
// 指定级联选择器的配置对象
cascaderProps: {
// 配置触发选项 hover/click
expandTrigger: 'hover',
value: 'cat_id',
label: 'cat_name',
children: 'children'
},
// 添加分类的表单验证规则对象
addCateFormRules: {
cat_name: [
{required: true, message: '请输入分类名称', trigger: 'blur'}
]
},
// 添加分类 选择项发生变化触发
parentCateChanged() {
// 如果selectKeys 数组长度>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 0
} 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
},
- 实现编辑分类的功能
<!-- 编辑分类的对话框 -->
<el-dialog title="编辑分类" :visible.sync="editCateDialogVisible" width="50%">
<el-form
:model="editCateForm"
:rules="editCateFormRules"
ref="editCateFormRef"
label-width="100px">
<el-form-item label="分类名称:" prop="cat_name">
<el-input v-model="editCateForm.cat_name"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editCateDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editCate">确 定</el-button>
</span>
</el-dialog>
// 控制编辑分类对话框的显示与隐藏
editCateDialogVisible:false,
editCateFormRules:{
cat_name: [
{required: true, message: '请输入分类名称', trigger: 'blur'}
]
},
// 编辑分类名
editCate() {
this.$refs.editCateFormRef.validate(async valid => {
if (!valid) return
const {data: res} = await this.$http.put('categories/'+this.editCateForm.cat_id,{
cat_name: this.editCateForm.cat_name
})
if (res.meta.status !== 200) return this.$message.error('更新分类名失败!')
this.$message.success('更新分类名成功!')
this.getCateList()
this.editCateDialogVisible = false
})
},
- 实现删除分类的功能
// 删除分类信息
async removeCate(id){
const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err)
if (confirmResult !== 'confirm') { return this.$message.info('已取消删除!') }
const { data: res } = await this.$http.delete('categories/' + id)
if (res.meta.status !== 200) { return this.$message.error('删除商品分类失败!') }
this.$message.success('删除商品分类成功!')
this.getCateList()
}
- 保存道本地仓库并提交远程仓库
a. 添加到本地仓库git add .
b. 提交修改git commit -m "完成了分类功能的开 发"
c. 新建远程分支并推送代码到该分支git push -u origin good_cate
d. 切换到主分支git checkout master
e. 将good_cate分支合并到主分支git merge good_cate
f. 推送到远程主分支git push
以上是关于Vue电商管理系统-商品分类的主要内容,如果未能解决你的问题,请参考以下文章