[Vue.js]实战 -- 电商项目(四)

分类管理

商品分类概述

商品分类用于在购物时，快速找到所要购买的商品，可以通过电商平台主页直观的看到

商品分类列表

基本布局与数据获取

基本布局

面包屑导航区域

<!-- 面包屑导航区域 -->
<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-button type="primary">添加分类</el-button></el-row>
</el-card>

数据获取

获取商品分类数据

export default {data() {return {// 查询条件querInfo: {type: 3,pagenum: 1,pagesize: 5},// 商品分类的数据列表，默认为空catelist: [],totle: 0,}},created() {this.getCateList()},methods: {// 获取商品分类数据async getCateList() {const {data: res} = await this.$http.get('categories', {params: this.querInfo})if (res.meta.status !== 200) {return this.$message.error('获取商品分类失败！')}console.log(res.data)// 把数据列表，赋值给 catelistthis.catelist = res.data.result// 为总数据条数赋值this.total = res.data.total},}
}

树形表格

第三方树形表格的基本使用

安装运行依赖vue-table-with-tree-grid
导入main.js

import TreeTable from 'vue-table-with-tree-grid'Vue.component('tree-table',TreeTable)

实现分类树形列表

实现效果

<tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-indexindex-text="#" border :show-row-hover="false"><!-- 是否有效 --><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>

处理数据

columns: [{label: '分类名称',prop: 'cat_name'},{label: '是否有效',// 表示将当前列定义为模板列type: 'template',// 表示当前这一列使用模板名称template: 'isok'},{label: '排序',// 表示，将当前列定义为模板列type: 'template',// 表示当前这一列使用模板名称template: 'order'},{label: '操作',// 表示，将当前列定义为模板列type: 'template',// 表示当前这一列使用模板名称template: 'opt'}
],

分页功能

实现效果

<!--分页区域-->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="querInfo.pagenum" :page-sizes="[3, 5, 10, 15]" :page-size="querInfo.pagesize"layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>

处理数据

methods: {// 监听 pagesize 改变handleSizeChange(newSize) {this.querInfo.pagesize = newSizethis.getCateList()},// 监听pagenum的改变handleCurrentChange(newPage) {this.querInfo.pagenum = newPagethis.getCateList()}
}

添加分类

实现分类树形列表

实现添加分类对话框布局
控制对话框显示和隐藏

<el-dialog title="添加分类" :visible.sync="addDialogVisible" width="50%" @close="resetForm"><el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px"><el-form-item label="分类名称：" prop="cat_name"><el-input v-model="addForm.cat_name"></el-input></el-form-item><el-form-item label="父级分类："><!-- 分类菜单 --></el-form-item></el-form>
</el-dialog>

实现分类级联菜单效果

实现级联菜单效果
级联菜单数据加载与填充

<el-cascader expand-trigger="hover" :options="parentCateList" :props="cascaderConfig" v-model="selectedCateList" @change="handleChange" change-on-select clearable>
</el-cascader>

// 先获取所有父级分类的数据列表
const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
if (res.meta.status !== 200) return this.$message.error('获取父级分类失败！')
// 把父级分类数据，挂载到data中
this.parentCateList = res.data

控制父级分类的选择

父级分类选择时，获取对应的分类 id

handleChange() {if (this.selectedCateList.length === 0) {// 证明没有选中任何父级分类this.addForm.cat_pid = 0this.addForm.cat_level = 0} else {// 选中父级分类this.addForm.cat_pid = this.selectedCateList[this.selectedCateList.length - 1]// 设置分类等级this.addForm.cat_level = this.selectedCateList.length}
}

完成分类添加

将分类名称、分类等级和父分类 id 提交到后台，完成分类添加

const { data: res } = await this.$http.post('categories', this.addForm)
if (res.meta.status !== 201) {return this.$message.error('添加分类失败！')
}
this.$message.success('添加分类成功！')

实现商品分类的编辑和删除功能

首先要在编辑和删除绑定事件

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

编辑操作

编辑分类对话框布局

<!-- 编辑分类的对话框 -->
<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>

控制编辑对话框关闭

// 编辑对话框 控制
editCateDialogVisible: false,

验证编辑分类表单

// 编辑分类表单验证
editCateFormRules: {cat_name: [{required: true, message: '请输入分类名称', trigger: 'blur'}]
},

绑定编辑表单的对象

// 编辑表单 绑定对象
editCateForm: ''

显示编辑的对话框

// 显示编辑对话框
async showEditCateDialog(id) {const {data: res} = await this.$http.get('categories/' + id)if (res.meta.status !== 200) return this.$message.error('获取分类失败！')this.editCateForm = res.datathis.editCateDialogVisible = true
},

编辑分类名

// 编辑分类名
eidtCate() {this.$refs.editCateFormRef.validate(async valid => {if (!valid) returnconst {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})
},

删除操作

删除分类(利用id)

// 删除分类
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()
}

[Vue.js]实战 -- 电商项目(四)相关推荐

[Vue.js]实战 -- 电商项目(一)
项目目录项目概述项目初始化登录/退出功能主页布局用户管理模块权限管理模块分类管理模块参数管理模块商品管理模块订单管理模块数据统计模块项目概述电商项目基本业务概述电商后台管理 ...
[Vue.js]实战 -- 电商项目(二)
主页布局整体布局主页布局开始引入官网的框架时,首先要在element.js中添加 import { Container,Header,Aside,Main } from 'element-ui' ...
[Vue.js]实战 -- 电商项目(六)
商品管理商品管理概述用于维护电商平台的商品信息包括商品的类型.参数.图片.详情等信息.通过商品管理模块可以实现商品的添加.修改.展示和删除等功能商品列表实现商品列表布局效果调用后台接口获取 ...
[Vue.js]实战 -- 电商项目(八)
数据统计数据统计概述用于统计电商平台运营过程的中的各种统计数据通过直观的可视化方式展示出来,方便相关运营和管理人员查看用户来源数据统计报表 Echarts 第三方可视化库的基本使用安装ech ...
[Vue.js]实战 -- 电商项目(五)
参数管理参数管理概述商品参数用于显示商品的固定的特征信息,可以通过电商平台商品详情页面直观的看到商品分类选择选择商品分类页面布局 <div><!-- 面包屑导航区域 --& ...
[Vue.js]实战 -- 电商项目(三)
权限管理权限管理业务分析通过权限管理模块控制不同的用户可以进行哪些操作,具体可以通过角色的方式进行控制,即每个用户分配一个特定的角色,角色包括不同的功能权限权限列表展示创建对应规格在comp ...
[Vue.js]实战 -- 电商项目(七)
订单管理订单管理概述用于维护商品的订单信息可以查看订单的商品信息.物流信息,并且可以根据实际的运营情况对订单做适当的调整. 订单列表订单列表展示订单数据加载订单列表布局 const { d ...
JS任务机制 - springboot实战电商项目mall4j
springboot实战电商项目mall4j (https://gitee.com/gz-yami/mall4j) java商城系统源码 1.介绍工作一段时间了,今天在这总结一下浏览器执行JS任务机 ...
[Vue]实战---电商项目(项目的概述及初始化)【一】
项目实战项目目录项目概述项目初始化登录/退出功能主页布局用户管理模块权限管理模块分类管理模块参数管理模块商品管理模块订单管理模块数据统计模块项目概述电商项目基本业务概述电 ...

[Vue.js]实战 -- 电商项目(四)

分类管理

商品分类概述

商品分类列表

基本布局与数据获取

树形表格

第三方树形表格的基本使用

实现分类树形列表

分页功能

添加分类

实现分类树形列表

实现分类级联菜单效果

控制父级分类的选择

完成分类添加

实现商品分类的编辑和删除功能

编辑操作

删除操作

[Vue.js]实战 -- 电商项目(四)相关推荐

最新文章

热门文章