vue 后台之商品分类 (表榕树组件)
程序员文章站
2024-01-03 13:54:40
...
目录
商品分类
- 功能:
- 使用表榕树组件
- 官网:
https://www.npmjs.com/package/vue-table-with-tree-grid
- 下载 :
npm i vue-table-with-tree-grid -S
- main.js中引入:
import TreeTable from 'vue-table-with-tree-grid'
- main.js中注册为全局组件
Vue.component('tree-table', TreeTable)
-
tree-table
组件的使用- data :表格各行的数据
- columns : 表格各列的配置 详情见官网
- 这需要自己定义一下需要显示的列 数据
- show-index : 显示索引列
- index-text : 显示索引列的名称 一般为 1 开始 —
- show-row-hover : 鼠标悬停时,是否高亮当前行
- selection-type : 是否为多选类型表格 一般为否
- border :是否显示纵向边框
- 官网:
- 获取表榕树的数据
getCateList
然后赋值给cateList
一般还需要拿到数据的总数,为了分页使用- 查询条件
queryInfo: { type: 3, pagenum: 1, pagesize: 5 },
type为3代表的是 包含3个级别 - 表榕树数据 匹配对应的属性,渲染数据,需要使用
template
去包裹,想要显示的组件等数据 (比如:是否有效 排序等)
- 查询条件
- 添加分类
- 点击添加分类的时候
- 先获取商品分类的数据(也称之为父级分类数据)
- 再显示 添加分类的对话框
showAddCateDialog
- 定义一个添加分类的对象
addCateForm: { cat_name: '', cat_pid: 0,cat_level: 0 },
- 将要添加分类名称 分类父级id 分类等级:
0
表示一级分类;1
表示二级分类;2
表示三级分类
- 将要添加分类名称 分类父级id 分类等级:
- 父级联列表 为了是在添加分类的对话框中 渲染的
- 父级联列表 中
change
事件 就是当级联选项发生变化的时候 根据选中的数据长度 给级联添加父级联 和 当前分类的等级 若是没有选中,直接是一级的级联!
- 父级联列表 中
- 添加分类中对话框的 确定按钮 点击确定后 添加分类,需要向后台写入当前添加分类的这个对象
- 然后调用获取 分类列表的方法 获取最新的数据
- 最后隐藏对话框
- 点击关闭的时候,对表单的重置,还有对选中的数据清空,对级联的当前id 和 当前等级 清空
- 使用表榕树组件
<template>
<div>
<!-- 面包屑导航区 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<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-row>
<el-col>
<el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
</el-col>
</el-row>
<!-- 表格 -->
<tree-table
class="treeTable"
:data="cateList"
:columns="columns"
:selection-type="false"
:expand-type="false"
index-text="#"
:show-row-hover="false"
show-index
border
>
<!-- 是否有效 -->
<template slot="isOk" slot-scope="scope">
<i
class="el-icon-success"
style="color: lightgreen"
v-if="scope.row.cat_deleted === false"
></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" slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditCateDialog(scope.row.cat_id)">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCate(scope.row.cat_id)">删除</el-button>
</template>
</tree-table>
<!-- 分页 -->
<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>
</el-card>
<!-- 添加分类的对话框 -->
<el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClosed">
<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="父级分类:">
<!-- options:数据源 -->
<!-- props:指定配置对象 -->
<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>
<!-- 编辑分类的对话框 -->
<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="eidtCate">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return {
// 商品分类数据
cateList: [],
// 查询条件
queryInfo: {
type: 3,
pagenum: 1,
pagesize: 5
},
total: 0,
// 为table指定列的定义
columns: [
{
label: '分类名称',
prop: 'cat_name'
},
{
label: '是否有效',
// 当前列 自定义模板
type: 'template',
template: 'isOk'
},
{
label: '排序',
// 当前列 自定义模板
type: 'template',
template: 'order'
},
{
label: '操作',
// 当前列 自定义模板
type: 'template',
template: 'opt'
}
],
// 添加分类
addCateDialogVisible: false,
// 添加分类对象
addCateForm: {
// 将要添加分类名称
cat_name: '',
// 分类父级id
cat_pid: 0,
// 分类等级:`0`表示一级分类;`1`表示二级分类;`2`表示三级分类
cat_level: 0
},
// 添加分类表单的验证规则
addCateFormRules: {
cat_name: [
{ required: true, message: '请输入分类名称', trigger: 'blur' }
]
},
// 父级分类列表
parentCateList: [],
// 指定级联选择器的配置对象
cascaderProps: {
// 配置触发选项 hover/click
expandTrigger: 'hover',
value: 'cat_id',
label: 'cat_name',
children: 'children'
},
// 选中的父级Id数组
selectedKeys: [],
// 编辑对话框 控制
editCateDialogVisible: false,
// 编辑分类表单验证
editCateFormRules: {
cat_name: [
{ required: true, message: '请输入分类名称', trigger: 'blur' }
]
},
// 编辑表单 绑定对象
editCateForm: ''
}
},
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('获取商品分类失败!')
}
// 给数据列表赋值
this.cateList = res.data.result
// 总数据条数
this.total = res.data.total
},
// 监听 pageSizeChange
handleSizeChange (newSize) {
this.queryInfo.pagesize = newSize
this.getCateList()
},
// 监听 pagenum改变
handleCurrentChange (newPage) {
this.queryInfo.pagenum = newPage
this.getCateList()
},
// 添加操作
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 数组的长度>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
},
// 删除分类
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()
},
// 显示编辑对话框
async showEditCateDialog (id) {
const { data: res } = await this.$http.get('categories/' + id)
if (res.meta.status !== 200) return this.$message.error('获取分类失败!')
this.editCateForm = res.data
this.editCateDialogVisible = true
},
// 编辑分类名
eidtCate () {
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
})
}
}
}
</script>
<style lang='less' scoped>
.treeTable {
margin-top: 20px;
}
// .el-cascader {
// width: 100%;
// }
</style>
推荐阅读