失眠网 > 电商后台管理系统添加编辑和删除商品分类

电商后台管理系统添加编辑和删除商品分类

时间：2021-01-01 10:21:19

相关推荐

电商后台管理系统添加编辑和删除商品分类

一代码

1修改Cate.vue

2修改 element.js

二效果

三源码参考

一代码

1修改Cate.vue

<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="tree-table":data="catelist":columns="columns":selection-type="false":expand-type="false":show-index="true"index-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"@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-dialogtitle="添加分类":visible.sync="addCatedialogVisible"width="50%" @close="addCateDialogCloded"><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-cascaderexpand-trigger="expand-trigger"v-model="selectedKeys":options="parentCateList":props="cascaderProps"@change="parentCateChanged"clearablechange-on-select></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 {name: "Cate",data() {return {/* 查询条件*/queryInfo: {type: 3,pagenum: 1,pagesize: 5},// 商品分类数据列表，默认为空catelist: [],/* 总数据条数 */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: '',// 父级分类idcat_pid: 0,// 当前分类等级，默认添加是1级分类cat_level: 0},// 添加分类表单数据对象校验规则addCateFormRules: {// 分类名称校验规则cat_name: [{required: true,message: '请输入分类名称',trigger: 'blur'}]},// 父级分类的列表parentCateList: [],// 级联选择器配置对象cascaderProps: {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('获取商品分类失败')}// 把数据列表，赋值给 catelistthis.catelist = res.data.result// 为总数据条数赋值this.total = res.data.total},// 监听pagesize改变事件handleSizeChange(newSize) {this.queryInfo.pagesize = newSizethis.getCateList()},// 监听pagenum改变事件handleCurrentChange(newPage) {this.queryInfo.pagenum = newPagethis.getCateList()},// 点击按钮，展示添加分类对话框showAddCateDialog() {// 获取父级分类的数据列表this.getPatentCateList()this.addCatedialogVisible = true},// 获得父级分类的数据列表async getPatentCateList() {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() {// 如果 selectedKeys 数组中的length 大于0，证明选择了父级分类// 反之，就说明没有选中任何父级分类if (this.selectedKeys.length > 0) {// 父级分类的Idthis.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]// 当前分类的等级this.addCateForm.cat_level = this.selectedKeys.length} else {// 父级分类的Idthis.addCateForm.cat_pid = 0// 当前分类的等级this.addCateForm.cat_level = 0}},// 点击按钮，添加分类async addCate() {this.$refs.addCateFormRef.validate(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},// 监听对话框的关闭事件，重置表单数据addCateDialogCloded() {this.$refs.addCateFormRef.resetFields()this.selectedKeys = []this.addCateForm.cat_level = 0this.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.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})}}}</script><style scoped>.tree-table {margin-top: 15px;}.el-cascader {width: 100%;}</style>

2修改 element.js

import Vue from 'vue'// 按需分配各个组件import {Button,Form,FormItem,Input,Message,Container,Header,Aside,Main,Menu,Submenu,MenuItem,Breadcrumb,BreadcrumbItem,Card,Row,Col,Table,TableColumn,Switch,Tooltip,Pagination,Dialog,MessageBox,Tag,Tree,Select,Option,Cascader} from 'element-ui'Vue.use(Button)Vue.use(Form)Vue.use(FormItem)Vue.use(Input)Vue.use(Container)Vue.use(Header)Vue.use(Aside)Vue.use(Main)Vue.use(Menu)Vue.use(Submenu)Vue.use(MenuItem)Vue.use(Breadcrumb)Vue.use(BreadcrumbItem)Vue.use(Card)Vue.use(Row)Vue.use(Col)Vue.use(Table)Vue.use(TableColumn)Vue.use(Switch)Vue.use(Tooltip)Vue.use(Pagination)Vue.use(Dialog)Vue.use(Tag)Vue.use(Tree)Vue.use(Select)Vue.use(Option)Vue.use(Cascader)// 这里和其他组件不一样，需要通过 prototype 全局挂载 MessageVue.prototype.$message = MessageVue.prototype.$confirm = MessageBox.confirm