模板下载网站哪个好,网站开发提高加载速度,网站统计代码添加,石家庄网站开发培训Vue Element UI 实现权限管理系统 前端篇#xff08;十四#xff09;#xff1a;菜单功能实现
菜单功能实现
菜单接口封装
菜单管理是一个对菜单树结构的增删改查操作。
提供一个菜单查询接口#xff0c;查询整颗菜单树形结构。
http/modules/menu.js 添加 findMenu…Vue Element UI 实现权限管理系统 前端篇十四菜单功能实现
菜单功能实现
菜单接口封装
菜单管理是一个对菜单树结构的增删改查操作。
提供一个菜单查询接口查询整颗菜单树形结构。
http/modules/menu.js 添加 findMenuTree 接口。 import axios from ../axios/* * 菜单管理模块*/// 保存
export const save (data) {return axios({url: /menu/save,method: post,data})
}
// 删除
export const batchDelete (data) {return axios({url: /menu/delete,method: post,data})
}
// 查找导航菜单树
export const findNavTree (params) {return axios({url: /menu/findNavTree,method: get,params})
}
// 查找导航菜单树
export const findMenuTree () {return axios({url: /menu/findMenuTree,method: get})
} 菜单管理界面
菜单管理界面是使用封装的表格树组件显示菜单结构并提供增删改查的功能。
Menu.vue templatediv classcontainer stylewidth:99%;margin-top:-25px;!--工具栏--div classtoolbar stylefloat:left;padding-top:10px;padding-left:15px;el-form :inlinetrue :modelfilters :sizesizeel-form-itemel-input v-modelfilters.name placeholder名称/el-input/el-form-itemel-form-itemkt-button label查询 permssys:menu:view typeprimary clickfindTreeData(null)//el-form-itemel-form-itemkt-button label新增 permssys:menu:add typeprimary clickhandleAdd//el-form-item/el-form/div!--表格树内容栏--el-table :datatableTreeDdata stripe sizemini stylewidth: 100%;v-loadingloading element-loading-text拼命加载中el-table-columnpropid header-aligncenter aligncenter width80 labelID/el-table-columntable-tree-column propname header-aligncenter treeKeyid width150 label名称/table-tree-columnel-table-column header-aligncenter aligncenter label图标template slot-scopescopei :classscope.row.icon || /i/template/el-table-columnel-table-column proptype header-aligncenter aligncenter label类型template slot-scopescopeel-tag v-ifscope.row.type 0 sizesmall目录/el-tagel-tag v-else-ifscope.row.type 1 sizesmall typesuccess菜单/el-tagel-tag v-else-ifscope.row.type 2 sizesmall typeinfo按钮/el-tag/template/el-table-columnel-table-column propparentName header-aligncenter aligncenter width120 label上级菜单/el-table-columnel-table-columnpropurl header-aligncenter aligncenter width150 :show-overflow-tooltiptrue label菜单URL/el-table-columnel-table-columnpropperms header-aligncenter aligncenter width150 :show-overflow-tooltiptrue label授权标识/el-table-columnel-table-columnproporderNum header-aligncenter aligncenter label排序/el-table-columnel-table-columnfixedright header-aligncenter aligncenter width150 label操作template slot-scopescopekt-button label修改 permssys:menu:edit clickhandleEdit(scope.row)/kt-button label删除 permssys:menu:delete typedanger clickhandleDelete(scope.row)//template/el-table-column/el-table!-- 新增修改界面 --el-dialog :title!dataForm.id ? 新增 : 修改 width40% :visible.syncdialogVisible :close-on-click-modalfalseel-form :modeldataForm :rulesdataRule refdataForm keyup.enter.nativesubmitForm() label-width80px :sizesize styletext-align:left;el-form-item label菜单类型 proptypeel-radio-group v-modeldataForm.typeel-radio v-for(type, index) in menuTypeList :labelindex :keyindex{{ type }}/el-radio/el-radio-group/el-form-itemel-form-item :labelmenuTypeList[dataForm.type] 名称 propnameel-input v-modeldataForm.name :placeholdermenuTypeList[dataForm.type] 名称/el-input/el-form-itemel-form-item label上级菜单 propparentNamepopup-tree-input :datapopupTreeData :propspopupTreeProps :propdataForm.parentNamenull?根节点:dataForm.parentName :nodeKeydataForm.parentId :currentChangeHandlehandleTreeSelectChange/popup-tree-input/el-form-itemel-form-item v-ifdataForm.type 1 label菜单路由 propurlel-input v-modeldataForm.url placeholder菜单路由/el-input/el-form-itemel-form-item v-ifdataForm.type ! 0 label授权标识 proppermsel-input v-modeldataForm.perms placeholder如: sys:user:add, sys:user:edit, sys:user:delete/el-input/el-form-itemel-form-item v-ifdataForm.type ! 2 label排序编号 proporderNumel-input-number v-modeldataForm.orderNum controls-positionright :min0 label排序编号/el-input-number/el-form-itemel-form-item v-ifdataForm.type ! 2 label菜单图标 propiconel-rowel-col :span22!-- el-popoverreficonListPopoverplacementbottom-starttriggerclickpopper-classmod-menu__icon-popoverdiv classmod-menu__icon-listel-buttonv-for(item, index) in dataForm.iconList:keyindexclickiconActiveHandle(item):class{ is-active: item dataForm.icon }icon-svg :nameitem/icon-svg/el-button/div/el-popover --el-input v-modeldataForm.icon v-popover:iconListPopover :readonlytrue placeholder菜单图标名称如fa fa-home fa-lg classicon-list__input/el-input/el-colel-col :span2 classicon-list__tipsfa-icon-tooltip //el-col/el-row/el-form-item/el-formspan slotfooter classdialog-footerel-button :sizesize clickdialogVisible false取消/el-buttonel-button :sizesize typeprimary clicksubmitForm()确定/el-button/span/el-dialog/div
/templatescript
import KtButton from /views/Core/KtButton
import TableTreeColumn from /views/Core/TableTreeColumn
import PopupTreeInput from /components/PopupTreeInput
import FaIconTooltip from /components/FaIconTooltip
export default {components:{PopupTreeInput,KtButton,TableTreeColumn,FaIconTooltip},data() {return {size: small,loading: false,filters: {name: },tableTreeDdata: [],dialogVisible: false,menuTypeList: [目录, 菜单, 按钮],dataForm: {id: 0,type: 1,name: ,parentId: 0,parentName: ,url: ,perms: ,orderNum: 0,icon: ,iconList: []},dataRule: {name: [{ required: true, message: 菜单名称不能为空, trigger: blur }],parentName: [{ required: true, message: 上级菜单不能为空, trigger: change }]},popupTreeData: [],popupTreeProps: {label: name,children: children}}},methods: {// 获取数据findTreeData: function () {this.loading truethis.$api.menu.findMenuTree().then((res) {this.tableTreeDdata res.datathis.popupTreeData this.getParentMenuTree(res.data)this.loading false})},// 获取上级菜单树getParentMenuTree: function (tableTreeDdata) {let parent {parentId: -1,name: 根节点,children: tableTreeDdata}return [parent]},// 显示新增界面handleAdd: function () {this.dialogVisible truethis.dataForm {id: 0,type: 1,typeList: [目录, 菜单, 按钮],name: ,parentId: 0,parentName: ,url: ,perms: ,orderNum: 0,icon: ,iconList: []}},// 显示编辑界面handleEdit: function (row) {this.dialogVisible trueObject.assign(this.dataForm, row);},// 删除handleDelete (row) {this.$confirm(确认删除选中记录吗, 提示, {type: warning}).then(() {let params this.getDeleteIds([], row)this.$api.menu.batchDelete(params).then( res {this.findTreeData()this.$message({message: 删除成功, type: success})})})},// 获取删除的包含子菜单的id列表getDeleteIds (ids, row) {ids.push({id:row.id})if(row.children ! null) {for(let i0, lenrow.children.length; ilen; i) {this.getDeleteIds(ids, row.children[i])}}return ids},// 菜单树选中handleTreeSelectChange (data, node) {this.dataForm.parentId data.idthis.dataForm.parentName data.name},// 图标选中iconActiveHandle (iconName) {this.dataForm.icon iconName},// 表单提交submitForm () {this.$refs[dataForm].validate((valid) {if (valid) {this.$confirm(确认提交吗, 提示, {}).then(() {this.editLoading truelet params Object.assign({}, this.dataForm)this.$api.menu.save(params).then((res) {if(res.code 200) {this.$message({ message: 操作成功, type: success })} else {this.$message({message: 操作失败, res.msg, type: error})}this.editLoading falsethis.$refs[dataForm].resetFields()this.dialogVisible falsethis.findTreeData()})})}})}},mounted() {this.findTreeData()}
}
/scriptstyle scoped/style 其中对表格树组件进行了简单的封装。
views/Core/TableTreeColumn.vue templateel-table-column :propprop v-bind$attrstemplate slot-scopescopespan click.preventtoggleHandle(scope.$index, scope.row) :stylechildStyles(scope.row)i :classiconClasses(scope.row) :styleiconStyles(scope.row)/i{{ scope.row[prop] }}/span/template/el-table-column
/templatescriptimport isArray from lodash/isArrayexport default {name: table-tree-column,props: {prop: {type: String},treeKey: {type: String,default: id},parentKey: {type: String,default: parentId},levelKey: {type: String,default: level},childKey: {type: String,default: children}},methods: {childStyles (row) {return { padding-left: (row[this.levelKey] * 25) px }},iconClasses (row) {return [ !row._expanded ? el-icon-caret-right : el-icon-caret-bottom ]},iconStyles (row) {return { visibility: this.hasChild(row) ? visible : hidden }},hasChild (row) {return (isArray(row[this.childKey]) row[this.childKey].length 1) || false},// 切换处理toggleHandle (index, row) {if (this.hasChild(row)) {var data this.$parent.store.states.data.slice(0)data[index]._expanded !data[index]._expandedif (data[index]._expanded) {data data.splice(0, index 1).concat(row[this.childKey]).concat(data)} else {data this.removeChildNode(data, row[this.treeKey])}this.$parent.store.commit(setData, data)this.$nextTick(() {this.$parent.doLayout()})}},// 移除子节点removeChildNode (data, parentId) {var parentIds isArray(parentId) ? parentId : [parentId]if (parentId.length 0) {return data}var ids []for (var i 0; i data.length; i) {if (parentIds.indexOf(data[i][this.parentKey]) ! -1 parentIds.indexOf(data[i][this.treeKey]) -1) {ids.push(data.splice(i, 1)[0][this.treeKey])i--}}return this.removeChildNode(data, ids)}}}
/script 测试效果
最终测试效果下图所示。 源码下载
后端kitty: 基于Spring Boot、Spring Cloud、Vue.js 、Element UI实现采用前后端分离架构的权限管理系统JAVA快速开发平台。
前端kitty-ui: Kitty 前端基于 Vue Element 实现的权限管理系统。
