100字范文 > vue项目实战-电商后台管理系统

vue项目实战-电商后台管理系统

时间：2019-03-10 05:11:49

相关推荐

vue项目实战-电商后台管理系统

项目简介：

该项目为电商后台的管理系统。设计了登录页面。

管理人员需要通过输入正确的用户名和密码才能登录。登陆成功之后进入管理页面：

管理页面由五个子模块组成：用户管理，权限管理，商品管理，订单管理，数据统计；

每个子模块有若干子模块组成，用户管理下->用户列表，权限管理->角色列表，权限管理，商品管理->商品列表，分类参数，商品分配，订单管理->订单列表，数据统计->数据报表

登录页面

登录页面中对用户输入的内容进行预校验，如果不符合要求则，则不向后端发送请求，同事挂载路由守卫，防止强制跳转。同时设置令牌校验，避免重复登录。如果用户输入格式正确的用户名以及密码时，向后端发送请求，请求通过则跳转到管理页面，否则返回登录页面。

路由导航守卫：

// 挂载路由导航守卫router.beforeEach((to, from, next) => {// to 将要访问的路径// from 代表从哪个路径跳转而来// next 是一个函数，表示放行//next() 放行 next('/login') 强制跳转if (to.path === '/login') return next()// 获取tokenconst tokenStr = window.sessionStorage.getItem('token')if (!tokenStr) return next('/login')next()})

登录页面核心代码：

<template><div class="login_container"><div class="login_box"><div class="avatar_box"><img src="../assets/logo.png" alt=""></div><el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input></el-form-item><el-form-item prop="password"><el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input></el-form-item><el-form-item class="btns"><el-button type="primary" @click="login">登录</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item></el-form></div></div></template><script>export default {data() {return {// 这是登录表单的数据绑定对象loginForm: {username: 'admin',password: '123456'},// 这是表单的验证规则对象loginFormRules: {// 验证用户名是否合法username: [{ required: true, message: '请输入登录名称', trigger: 'blur' },{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],// 验证密码是否合法password: [{ required: true, message: '请输入登录密码', trigger: 'blur' },{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }]}}},methods: {// 点击重置按钮，重置登录表单resetLoginForm() {// console.log(this);this.$refs.loginFormRef.resetFields()},login() {this.$refs.loginFormRef.validate(async valid => {if (!valid) returnconst { data: res } = await this.$http.post('login', this.loginForm)if (res.meta.status !== 200) return this.$message.error('登录失败！')this.$message.success('登录成功')// 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中// 1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问// 1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中window.sessionStorage.setItem('token', res.data.token)// 2. 通过编程式导航跳转到后台主页，路由地址是 /homethis.$router.push('/home')})}}}</script><style lang="less" scoped>.login_container {background-color: #2b4b6b;height: 100%;}.login_box {width: 450px;height: 300px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);.avatar_box {height: 130px;width: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}}.login_form {position: absolute;bottom: 0;width: 100%;padding: 0 20px;box-sizing: border-box;}.btns {display: flex;justify-content: flex-end;}</style>

菜单实现

管理页面有一个侧面的两级菜单，菜单的数据来自于后端，点击二级菜单会跳转到相应的子页面中。在el-menu中设置router属性，即可通过index添加到路由上进行跳转。

<template><el-container class="home-container"><el-header><div><img src="../assets/heima.png" alt=""><span>电商后台管理系统</span></div><el-button type="info" @click="logout">退出</el-button></el-header><el-container><el-aside :width="isCollapse ? '64px' : '200px'"><div class="toggle-button" @click="toggleCollapse">|||</div><el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath"><el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id"><template slot="title"><i :class="iconsObj[item.id]"></i><span>{{item.authName}}</span></template><el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/' + subItem.path)"><template slot="title"><i class="el-icon-menu"></i><span>{{subItem.authName}}</span></template></el-menu-item></el-submenu></el-menu></el-aside><el-main><router-view></router-view></el-main></el-container></el-container></template><script>export default {data() {return {// 左侧菜单数据menulist: [],iconsObj: {'125': 'iconfont icon-user','103': 'iconfont icon-tijikongjian','101': 'iconfont icon-shangpin','102': 'iconfont icon-danju','145': 'iconfont icon-baobiao'},// 是否折叠isCollapse: false,// 被激活的链接地址activePath: ''}},created() {this.getMenuList()this.activePath = window.sessionStorage.getItem('activePath')},methods: {logout() {window.sessionStorage.clear()this.$router.push('/login')},// 获取所有的菜单async getMenuList() {const { data: res } = await this.$http.get('menus')if (res.meta.status !== 200) return this.$message.error(res.meta.msg)this.menulist = res.dataconsole.log(res)},// 点击按钮，切换菜单的折叠与展开toggleCollapse() {this.isCollapse = !this.isCollapse},// 保存链接的激活状态saveNavState(activePath) {window.sessionStorage.setItem('activePath', activePath)this.activePath = activePath}}}</script><style lang="less" scoped>.home-container {height: 100%;}.el-header {background-color: #373d41;display: flex;justify-content: space-between;padding-left: 0;align-items: center;color: #fff;font-size: 20px;> div {display: flex;align-items: center;span {margin-left: 15px;}}}.el-aside {background-color: #333744;.el-menu {border-right: none;}}.el-main {background-color: #eaedf1;}.iconfont {margin-right: 10px;}.toggle-button {background-color: #4a5064;font-size: 10px;line-height: 24px;color: #fff;text-align: center;letter-spacing: 0.2em;cursor: pointer;}</style>

用户管理

用户列表

用户管理下有用户列表，这里渲染了后端的用户列表，可以编辑用户信息，删除用户，为用户分配角色，还可以对用户是否禁用进行管理；除此之外，还添加了查询用户，添加用户，和分页功能。

核心代码：

<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 :gutter="20"><el-col :span="8"><el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList"><el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button></el-input></el-col><el-col :span="4"><el-button type="primary" @click="addDialogVisible = true">添加用户</el-button></el-col></el-row><el-table :data="userlist" border stripe><el-table-column type="index"></el-table-column><el-table-column label="姓名" prop="username"></el-table-column><el-table-column label="邮箱" prop="email"></el-table-column><el-table-column label="电话" prop="mobile"></el-table-column><el-table-column label="角色" prop="role_name"></el-table-column><el-table-column label="状态"><template slot-scope="scope"><el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch></template></el-table-column><el-table-column label="操作" width="180px"><template slot-scope="scope"><el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button><el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button><el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false"><el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button></el-tooltip></template></el-table-column></el-table><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination></el-card><el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed"><el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px"><el-form-item label="用户名" prop="username"><el-input v-model="addForm.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="addForm.password"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="addForm.email"></el-input></el-form-item><el-form-item label="手机" prop="mobile"><el-input v-model="addForm.mobile"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="addDialogVisible = false">取消</el-button><el-button type="primary" @click="addUser">确定</el-button></span></el-dialog><el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed"><el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px"><el-form-item label="用户名"><el-input v-model="editForm.username" disabled></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="editForm.email"></el-input></el-form-item><el-form-item label="手机" prop="mobile"><el-input v-model="editForm.mobile"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editDialogVisible = false">取消</el-button><el-button type="primary" @click="editUserInfo">确定</el-button></span></el-dialog><el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%" @close="setRoleDialogClosed"><div><p>当前的用户：{{userInfo.username}}</p><p>当前的角色：{{userInfo.role_name}}</p><p>分配新角色：<el-select v-model="selectedRoleId" placeholder="请选择"><el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id"></el-option></el-select></p></div><span slot="footer" class="dialog-footer"><el-button @click="setRoleDialogVisible = false">取消</el-button><el-button type="primary" @click="saveRoleInfo">确定</el-button></span></el-dialog></div></template><script>export default {data() {// 验证邮箱的规则var checkEmail = (rule, value, cb) => {// 验证邮箱的正则表达式const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/if (regEmail.test(value)) {// 合法的邮箱return cb()}cb(new Error('请输入合法的邮箱'))}// 验证手机号的规则var checkMobile = (rule, value, cb) => {// 验证手机号的正则表达式const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/if (regMobile.test(value)) {return cb()}cb(new Error('请输入合法的手机号'))}return {// 获取用户列表的参数对象queryInfo: {query: '',// 当前的页数pagenum: 1,// 当前每页显示多少条数据pagesize: 2},userlist: [],total: 0,// 控制添加用户对话框的显示与隐藏addDialogVisible: false,// 添加用户的表单数据addForm: {username: '',password: '',email: '',mobile: ''},// 添加表单的验证规则对象addFormRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{min: 3,max: 10,message: '用户名的长度在3~10个字符之间',trigger: 'blur'}],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{min: 6,max: 15,message: '用户名的长度在6~15个字符之间',trigger: 'blur'}],email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{ validator: checkEmail, trigger: 'blur' }],mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },{ validator: checkMobile, trigger: 'blur' }]},// 控制修改用户对话框的显示与隐藏editDialogVisible: false,// 查询到的用户信息对象editForm: {},// 修改表单的验证规则对象editFormRules: {email: [{ required: true, message: '请输入用户邮箱', trigger: 'blur' },{ validator: checkEmail, trigger: 'blur' }],mobile: [{ required: true, message: '请输入用户手机', trigger: 'blur' },{ validator: checkMobile, trigger: 'blur' }]},// 控制分配角色对话框的显示与隐藏setRoleDialogVisible: false,// 需要被分配角色的用户信息userInfo: {},// 所有角色的数据列表rolesList: [],// 已选中的角色Id值selectedRoleId: ''}},created() {this.getUserList()},methods: {async getUserList() {const { data: res } = await this.$http.get('users', {params: this.queryInfo})if (res.meta.status !== 200) {return this.$message.error('获取用户列表失败！')}this.userlist = res.data.usersthis.total = res.data.totalconsole.log(res)},// 监听 pagesize 改变的事件handleSizeChange(newSize) {// console.log(newSize)this.queryInfo.pagesize = newSizethis.getUserList()},// 监听页码值改变的事件handleCurrentChange(newPage) {console.log(newPage)this.queryInfo.pagenum = newPagethis.getUserList()},// 监听 switch 开关状态的改变async userStateChanged(userinfo) {console.log(userinfo)const { data: res } = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)if (res.meta.status !== 200) {userinfo.mg_state = !userinfo.mg_statereturn this.$message.error('更新用户状态失败！')}this.$message.success('更新用户状态成功！')},// 监听添加用户对话框的关闭事件addDialogClosed() {this.$refs.addFormRef.resetFields()},// 点击按钮，添加新用户addUser() {this.$refs.addFormRef.validate(async valid => {if (!valid) return// 可以发起添加用户的网络请求const { data: res } = await this.$http.post('users', this.addForm)if (res.meta.status !== 201) {this.$message.error('添加用户失败！')}this.$message.success('添加用户成功！')// 隐藏添加用户的对话框this.addDialogVisible = false// 重新获取用户列表数据this.getUserList()})},// 展示编辑用户的对话框async showEditDialog(id) {// console.log(id)const { data: res } = await this.$http.get('users/' + id)if (res.meta.status !== 200) {return this.$message.error('查询用户信息失败！')}this.editForm = res.datathis.editDialogVisible = true},// 监听修改用户对话框的关闭事件editDialogClosed() {this.$refs.editFormRef.resetFields()},// 修改用户信息并提交editUserInfo() {this.$refs.editFormRef.validate(async valid => {if (!valid) return// 发起修改用户信息的数据请求const { data: res } = await this.$http.put('users/' + this.editForm.id,{email: this.editForm.email,mobile: this.editForm.mobile})if (res.meta.status !== 200) {return this.$message.error('更新用户信息失败！')}// 关闭对话框this.editDialogVisible = false// 刷新数据列表this.getUserList()// 提示修改成功this.$message.success('更新用户信息成功！')})},// 根据Id删除对应的用户信息async removeUserById(id) {// 弹框询问用户是否删除数据const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).catch(err => err)// 如果用户确认删除，则返回值为字符串 confirm// 如果用户取消了删除，则返回值为字符串 cancel// console.log(confirmResult)if (confirmResult !== 'confirm') {return this.$message.info('已取消删除')}const { data: res } = await this.$http.delete('users/' + id)if (res.meta.status !== 200) {return this.$message.error('删除用户失败！')}this.$message.success('删除用户成功！')this.getUserList()},// 展示分配角色的对话框async setRole(userInfo) {this.userInfo = userInfo// 在展示对话框之前，获取所有角色的列表const { data: res } = await this.$http.get('roles')if (res.meta.status !== 200) {return this.$message.error('获取角色列表失败！')}this.rolesList = res.datathis.setRoleDialogVisible = true},// 点击按钮，分配角色async saveRoleInfo() {if (!this.selectedRoleId) {return this.$message.error('请选择要分配的角色！')}const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`,{rid: this.selectedRoleId})if (res.meta.status !== 200) {return this.$message.error('更新角色失败！')}this.$message.success('更新角色成功！')this.getUserList()this.setRoleDialogVisible = false},// 监听分配角色对话框的关闭事件setRoleDialogClosed() {this.selectedRoleId = ''this.userInfo = {}}}}</script><style lang="less" scoped></style>

权限管理

角色列表

角色列表中可以创建新的角色，创建的新的角色可以在用户管理中赋予用户，同时可以为已有的角色赋予权限

权限列表

权限列表对不同的权限做出展示，只发送一个请求即可获取所有需要的数据

商品管理

商品分类

商品列表

增加商品

在商品分类中点击新增商品，则跳转到新增商品窗口

<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-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert><el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center><el-step title="基本信息"></el-step><el-step title="商品参数"></el-step><el-step title="商品属性"></el-step><el-step title="商品图片"></el-step><el-step title="商品内容"></el-step><el-step title="完成"></el-step></el-steps><el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" label-position="top"><el-tabs v-model="activeIndex" :tab-position="'left'" :before-leave="beforeTabLeave" @tab-click="tabClicked"><el-tab-pane label="基本信息" name="0"><el-form-item label="商品名称" prop="goods_name"><el-input v-model="addForm.goods_name"></el-input></el-form-item><el-form-item label="商品价格" prop="goods_price"><el-input v-model="addForm.goods_price" type="number"></el-input></el-form-item><el-form-item label="商品重量" prop="goods_weight"><el-input v-model="addForm.goods_weight" type="number"></el-input></el-form-item><el-form-item label="商品数量" prop="goods_number"><el-input v-model="addForm.goods_number" type="number"></el-input></el-form-item><el-form-item label="商品分类" prop="goods_cat"><el-cascader expand-trigger="hover" :options="catelist" :props="cateProps" v-model="addForm.goods_cat" @change="handleChange"></el-cascader></el-form-item></el-tab-pane><el-tab-pane label="商品参数" name="1"><el-form-item :label="item.attr_name" v-for="item in manyTableData" :key="item.attr_id"><el-checkbox-group v-model="item.attr_vals"><el-checkbox :label="cb" v-for="(cb, i) in item.attr_vals" :key="i" border></el-checkbox></el-checkbox-group></el-form-item></el-tab-pane><el-tab-pane label="商品属性" name="2"><el-form-item :label="item.attr_name" v-for="item in onlyTableData" :key="item.attr_id"><el-input v-model="item.attr_vals"></el-input></el-form-item></el-tab-pane><el-tab-pane label="商品图片" name="3"><el-upload :action="uploadURL" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" :headers="headerObj" :on-success="handleSuccess"><el-button size="small" type="primary">点击上传</el-button></el-upload></el-tab-pane><el-tab-pane label="商品内容" name="4"><quill-editor v-model="addForm.goods_introduce"></quill-editor><el-button type="primary" class="btnAdd" @click="add">添加商品</el-button></el-tab-pane></el-tabs></el-form></el-card><el-dialog title="图片预览" :visible.sync="previewVisible" width="50%"><img :src="previewPath" alt="" class="previewImg"></el-dialog></div></template><script>import _ from 'lodash'export default {data() {return {activeIndex: '0',// 添加商品的表单数据对象addForm: {goods_name: '',goods_price: 0,goods_weight: 0,goods_number: 0,// 商品所属的分类数组goods_cat: [],// 图片的数组pics: [],// 商品的详情描述goods_introduce: '',attrs: []},addFormRules: {goods_name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],goods_price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],goods_weight: [{ required: true, message: '请输入商品重量', trigger: 'blur' }],goods_number: [{ required: true, message: '请输入商品数量', trigger: 'blur' }],goods_cat: [{ required: true, message: '请选择商品分类', trigger: 'blur' }]},// 商品分类列表catelist: [],cateProps: {label: 'cat_name',value: 'cat_id',children: 'children'},// 动态参数列表数据manyTableData: [],// 静态属性列表数据onlyTableData: [],// 上传图片的URL地址uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',// 图片上传组件的headers请求头对象headerObj: {Authorization: window.sessionStorage.getItem('token')},previewPath: '',previewVisible: false}},created() {this.getCateList()},methods: {// 获取所有商品分类数据async getCateList() {const { data: res } = await this.$http.get('categories')if (res.meta.status !== 200) {return this.$message.error('获取商品分类数据失败！')}this.catelist = res.dataconsole.log(this.catelist)},// 级联选择器选中项变化，会触发这个函数handleChange() {console.log(this.addForm.goods_cat)if (this.addForm.goods_cat.length !== 3) {this.addForm.goods_cat = []}},beforeTabLeave(activeName, oldActiveName) {// console.log('即将离开的标签页名字是：' + oldActiveName)// console.log('即将进入的标签页名字是：' + activeName)// return falseif (oldActiveName === '0' && this.addForm.goods_cat.length !== 3) {this.$message.error('请先选择商品分类！')return false}},async tabClicked() {// console.log(this.activeIndex)// 证明访问的是动态参数面板if (this.activeIndex === '1') {const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`,{params: { sel: 'many' }})if (res.meta.status !== 200) {return this.$message.error('获取动态参数列表失败！')}console.log(res.data)res.data.forEach(item => {item.attr_vals =item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ')})this.manyTableData = res.data} else if (this.activeIndex === '2') {const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`,{params: { sel: 'only' }})if (res.meta.status !== 200) {return this.$message.error('获取静态属性失败！')}console.log(res.data)this.onlyTableData = res.data}},// 处理图片预览效果handlePreview(file) {console.log(file)this.previewPath = file.response.data.urlthis.previewVisible = true},// 处理移除图片的操作handleRemove(file) {// console.log(file)// 1. 获取将要删除的图片的临时路径const filePath = file.response.data.tmp_path// 2. 从 pics 数组中，找到这个图片对应的索引值const i = this.addForm.pics.findIndex(x => x.pic === filePath)// 3. 调用数组的 splice 方法，把图片信息对象，从 pics 数组中移除this.addForm.pics.splice(i, 1)console.log(this.addForm)},// 监听图片上传成功的事件handleSuccess(response) {console.log(response)// 1. 拼接得到一个图片信息对象const picInfo = { pic: response.data.tmp_path }// 2. 将图片信息对象，push 到pics数组中this.addForm.pics.push(picInfo)console.log(this.addForm)},// 添加商品add() {this.$refs.addFormRef.validate(async valid => {if (!valid) {return this.$message.error('请填写必要的表单项！')}// 执行添加的业务逻辑// lodash cloneDeep(obj)const form = _.cloneDeep(this.addForm)form.goods_cat = form.goods_cat.join(',')// 处理动态参数this.manyTableData.forEach(item => {const newInfo = {attr_id: item.attr_id,attr_value: item.attr_vals.join(' ')}this.addForm.attrs.push(newInfo)})// 处理静态属性this.onlyTableData.forEach(item => {const newInfo = { attr_id: item.attr_id, attr_value: item.attr_vals }this.addForm.attrs.push(newInfo)})form.attrs = this.addForm.attrsconsole.log(form)// 发起请求添加商品// 商品的名称，必须是唯一的const { data: res } = await this.$http.post('goods', form)if (res.meta.status !== 201) {return this.$message.error('添加商品失败！')}this.$message.success('添加商品成功！')this.$router.push('/goods')})}},computed: {cateId() {if (this.addForm.goods_cat.length === 3) {return this.addForm.goods_cat[2]}return null}}}</script><style lang="less" scoped>.el-checkbox {margin: 0 10px 0 0 !important;}.previewImg {width: 100%;}.btnAdd {margin-top: 15px;}</style>

分类参数

在分类参数中选择一件商品，可以为其添加静态或者动态参数，这个参数可以展示在移动端商品的属性中。

<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-alert show-icon title="注意：只允许为第三级分类设置相关参数！" type="warning" :closable="false"></el-alert><el-row class="cat_opt"><el-col><span>选择商品分类：</span><el-cascader expand-trigger="hover" :options="catelist" :props="cateProps" v-model="selectedCateKeys" @change="handleChange"></el-cascader></el-col></el-row><el-tabs v-model="activeName" @tab-click="handleTabClick"><el-tab-pane label="动态参数" name="many"><el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">添加参数</el-button><el-table :data="manyTableData" border stripe><el-table-column type="expand"><template slot-scope="scope"><el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable @close="handleClose(i, scope.row)">{{item}}</el-tag><el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)"></el-input><el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button></template></el-table-column><el-table-column type="index"></el-table-column><el-table-column label="参数名称" prop="attr_name"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">编辑</el-button><el-button size="mini" type="danger" icon="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除</el-button></template></el-table-column></el-table></el-tab-pane><el-tab-pane label="静态属性" name="only"><el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">添加属性</el-button><el-table :data="onlyTableData" border stripe><el-table-column type="expand"><template slot-scope="scope"><el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable @close="handleClose(i, scope.row)">{{item}}</el-tag><el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)"></el-input><el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button></template></el-table-column><el-table-column type="index"></el-table-column><el-table-column label="属性名称" prop="attr_name"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">编辑</el-button><el-button size="mini" type="danger" icon="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除</el-button></template></el-table-column></el-table></el-tab-pane></el-tabs></el-card><el-dialog :title="'添加' + titleText" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed"><el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px"><el-form-item :label="titleText" prop="attr_name"><el-input v-model="addForm.attr_name"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="addDialogVisible = false">取消</el-button><el-button type="primary" @click="addParams">确定</el-button></span></el-dialog><el-dialog :title="'修改' + titleText" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed"><el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px"><el-form-item :label="titleText" prop="attr_name"><el-input v-model="editForm.attr_name"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editDialogVisible = false">取消</el-button><el-button type="primary" @click="editParams">确定</el-button></span></el-dialog></div></template><script>export default {data() {return {// 商品分类列表catelist: [],// 级联选择框的配置对象cateProps: {value: 'cat_id',label: 'cat_name',children: 'children'},// 级联选择框双向绑定到的数组selectedCateKeys: [],// 被激活的页签的名称activeName: 'many',// 动态参数的数据manyTableData: [],// 静态属性的数据onlyTableData: [],// 控制添加对话框的显示与隐藏addDialogVisible: false,// 添加参数的表单数据对象addForm: {attr_name: ''},// 添加表单的验证规则对象addFormRules: {attr_name: [{ required: true, message: '请输入参数名称', trigger: 'blur' }]},// 控制修改对话框的显示与隐藏editDialogVisible: false,// 修改的表单数据对象editForm: {},// 修改表单的验证规则对象editFormRules: {attr_name: [{ required: true, message: '请输入参数名称', trigger: 'blur' }]}}},created() {this.getCateList()},methods: {// 获取所有的商品分类列表async getCateList() {const { data: res } = await this.$http.get('categories')if (res.meta.status !== 200) {return this.$message.error('获取商品分类失败！')}this.catelist = res.dataconsole.log(this.catelist)},// 级联选择框选中项变化，会触发这个函数handleChange() {this.getParamsData()},// tab 页签点击事件的处理函数handleTabClick() {console.log(this.activeName)this.getParamsData()},// 获取参数的列表数据async getParamsData() {// 证明选中的不是三级分类if (this.selectedCateKeys.length !== 3) {this.selectedCateKeys = []this.manyTableData = []this.onlyTableData = []return}// 证明选中的是三级分类console.log(this.selectedCateKeys)// 根据所选分类的Id，和当前所处的面板，获取对应的参数const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`,{params: { sel: this.activeName }})if (res.meta.status !== 200) {return this.$message.error('获取参数列表失败！')}res.data.forEach(item => {item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []// 控制文本框的显示与隐藏item.inputVisible = false// 文本框中输入的值item.inputValue = ''})console.log(res.data)if (this.activeName === 'many') {this.manyTableData = res.data} else {this.onlyTableData = res.data}},// 监听添加对话框的关闭事件addDialogClosed() {this.$refs.addFormRef.resetFields()},// 点击按钮，添加参数addParams() {this.$refs.addFormRef.validate(async valid => {if (!valid) returnconst { data: res } = await this.$http.post(`categories/${this.cateId}/attributes`,{attr_name: this.addForm.attr_name,attr_sel: this.activeName})if (res.meta.status !== 201) {return this.$message.error('添加参数失败！')}this.$message.success('添加参数成功！')this.addDialogVisible = falsethis.getParamsData()})},// 点击按钮，展示修改的对话框async showEditDialog(attrId) {// 查询当前参数的信息const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes/${attrId}`,{params: { attr_sel: this.activeName }})if (res.meta.status !== 200) {return this.$message.error('获取参数信息失败！')}this.editForm = res.datathis.editDialogVisible = true},// 重置修改的表单editDialogClosed() {this.$refs.editFormRef.resetFields()},// 点击按钮，修改参数信息editParams() {this.$refs.editFormRef.validate(async valid => {if (!valid) returnconst { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${this.editForm.attr_id}`,{ attr_name: this.editForm.attr_name, attr_sel: this.activeName })if (res.meta.status !== 200) {return this.$message.error('修改参数失败！')}this.$message.success('修改参数成功！')this.getParamsData()this.editDialogVisible = false})},// 根据Id删除对应的参数项async removeParams(attrId) {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/${this.cateId}/attributes/${attrId}`)if (res.meta.status !== 200) {return this.$message.error('删除参数失败！')}this.$message.success('删除参数成功！')this.getParamsData()},// 文本框失去焦点，或摁下了 Enter 都会触发async handleInputConfirm(row) {if (row.inputValue.trim().length === 0) {row.inputValue = ''row.inputVisible = falsereturn}// 如果没有return，则证明输入的内容，需要做后续处理row.attr_vals.push(row.inputValue.trim())row.inputValue = ''row.inputVisible = false// 需要发起请求，保存这次操作this.saveAttrVals(row)},// 将对 attr_vals 的操作，保存到数据库async saveAttrVals(row) {// 需要发起请求，保存这次操作const { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`,{attr_name: row.attr_name,attr_sel: row.attr_sel,attr_vals: row.attr_vals.join(' ')})if (res.meta.status !== 200) {return this.$message.error('修改参数项失败！')}this.$message.success('修改参数项成功！')},// 点击按钮，展示文本输入框showInput(row) {row.inputVisible = true// 让文本框自动获得焦点// $nextTick 方法的作用，就是当页面上元素被重新渲染之后，才会指定回调函数中的代码this.$nextTick(_ => {this.$refs.saveTagInput.$refs.input.focus()})},// 删除对应的参数可选项handleClose(i, row) {row.attr_vals.splice(i, 1)this.saveAttrVals(row)}},computed: {// 如果按钮需要被禁用，则返回true，否则返回falseisBtnDisabled() {if (this.selectedCateKeys.length !== 3) {return true}return false},// 当前选中的三级分类的IdcateId() {if (this.selectedCateKeys.length === 3) {return this.selectedCateKeys[2]}return null},// 动态计算标题的文本titleText() {if (this.activeName === 'many') {return '动态参数'}return '静态属性'}}}</script><style lang="less" scoped>.cat_opt {margin: 15px 0;}.el-tag {margin: 10px;}.input-new-tag {width: 120px;}</style>