网站开发中为什么有两个控制层,我们便进入了()阶段答案,中国风html5网站模板,苏州建网站的公司平台收费标准vue2antd——实现权限管理——js数据格式处理 效果图如下#xff1a;1.需求说明2.如何展开所有子项及孙子项目——在弹窗之前就获取树形结构#xff0c;然后直接将数据传到弹窗中3.template部分代码4.script的data部分5.权限tree数据处理——将row中的权限分配到具体的value参… vue2antd——实现权限管理——js数据格式处理 效果图如下1.需求说明2.如何展开所有子项及孙子项目——在弹窗之前就获取树形结构然后直接将数据传到弹窗中3.template部分代码4.script的data部分5.权限tree数据处理——将row中的权限分配到具体的value参数中6.权限的保存——handleSubmit 最近在写后台管理系统遇到一个问题是关于菜单/按钮权限的处理 效果图如下 1.需求说明
点击编辑API权限弹窗如上图所示 弹窗内容分左右两部分左侧是大类右侧是子类及孙子类其中所有的项目都要展开显示。
2.如何展开所有子项及孙子项目——在弹窗之前就获取树形结构然后直接将数据传到弹窗中
在弹窗之前就要调用接口获取数据
1addPermission就是弹窗的组件
2getCrmPermissionTree 获取权限tree的接口handleAPI(row){let permissionList [];this.loading true;getCrmPermissionTree().then((res) {permissionList res || [];this.$refs.addPermission.handleShow(row, permissionList);}).finally(() {this.loading false;});
}3.template部分代码
a-modaltitle编辑API权限:visible.syncvisiblewidth500px:maskClosabletruecancelhandleCloseokhandleSubmitdiv idtopId/diva-tabs tab-positionlefta-tab-paneforceRenderv-for(group, index) in permissionList:keyindex 1:tabgroup.displayNamea-treerefpermissionTreev-modelgroup.valuecheckablecheckStrictly:defaultExpandAlltrue:treeDatagroup.permissions:replaceFieldsreplaceFieldscheckonCheck($event, group)//a-tab-pane/a-tabs/a-modal4.script的data部分
data(){return{visible: false,loadLoading: false,permissionList: [],checkedKeys: [],id: undefined,replaceFields: {value: permissionName,title: displayName,children: children,key: permissionName,},menuRoteIds: [],}
},
methods:{onCheck(obj, item) {item.value obj.checked || [];this.$forceUpdate();},
}5.权限tree数据处理——将row中的权限分配到具体的value参数中
handleShow(row, permissionList) {this.visible true;this.id row.id;this.permissionList [...permissionList];this.menuRoteIds [...row.permissionNames];this.permissionList.forEach((item) {item.value [];if (this.menuRoteIds.includes(item.id)) {item.value.push(item.id);}if (item.children item.children.length 0) {item this.filterMenuList(item.children, item);}});this.$nextTick(() {//这一步是为了弹窗打开的时候滚动到页面顶部在页面顶部有个topId的dom元素document.getElementById(topId).scrollIntoView(true);});
},
filterMenuList(arr, item) {arr.forEach((child) {this.expandedKeys.push(child.id);if (this.menuRoteIds.includes(child.id)) {item.value.push(child.id);}if (child.children child.children.length 0) {child this.filterMenuList(child.children, item);}});return item;
},6.权限的保存——handleSubmit
handleClose() {this.visible false;
},
handleSubmit() {let arr [];this.permissionList this.permissionList.forEach((item) {arr arr.concat(item.value);});let params {permissionNames: arr || [],};this.loadLoading true;putApiPermission(this.id, params).then(() {this.$message.success(保存成功);this.$emit(ok);this.handleClose();}).finally(() {this.loadLoading false;});
},
