需求说明,一个帐号角色可以设置管理多个项目的菜单权限
且菜单接口每次只能查询特定项目的菜单数据【无法查全部】
开发思路:
1,获取项目接口数组,得到项目数据
2,循环项目数据,以此为参数递归查询菜单数据【递归查询是为保证循环时数据异步请求顺序 不稳定】
3,将菜单数组组装成一个二维数组,以待循环树选择组件作展示 数据使用
4,循环树选择组件,实现树选择菜单功能
5,读取某条用户信息的菜单权限,将返回字符串菜单编码处理成与菜单数据相同的二维数组
6,奖该用户信息的菜单权限数组加载到循环树选择组件作默认选中
开发难点:
1,菜单编号要在指定数组中进行增删改,就需要对其分别 打上标签,这里是额外创建一个numListArry对象,打上对应项目标签顺序下标,以此匹配菜单数据二维数组的下标【因递归查询 ,所以次序固定】
2,理解树选择的点击事件返回的各种参数,将返回的数据 实时更新到该条用户信息的菜单权限数组中,实现树状选择功能
3,各种基础算法都用到不少,如字符串去重,数组求交集,递归,查找等
用户角色信息【表格数据】
项目数据:
菜单数据
numListArry对象,对应角标关系准确匹配数组数据
列表页面代码
1 import React from 'react';2 import {Table,Form,Button,Popconfirm } from 'antd';3 import LoadingMixin from '../../../../../libs/loading.common.mixin';4 import RequestMixin from '../../../../../libs/request.mixin';5 import NotificationMixin from '../../../../../libs/notification.mixin';6 import ModalWrapper from '../../../../../libs/modalwrapper';7 import Helper from '../../../../../libs/helper';8 import './index.css';9 import AddOrUpdateModal from './addorupdatemodal';10 import LocalService from "../../../../../services/local.services";11
12 let prolist = LocalService.getUserInfo() && JSON.parse(LocalService.getUserInfo()) ||[] ;13 const createForm =Form.create;14 let user =React.createClass({15 mixins: [LoadingMixin,NotificationMixin,RequestMixin],16 getInitialState(){17 return{18 data: [],19 menuList: [], //所有菜单信息集合
20 menuArry:[],21 fetchCategoryListArry:[],22 numListArry:{} //菜单ID匹配下标对象
23 }24
25 },26 componentWillMount() {27 this.fetch();28 if(prolist.prolist){29 this.fetchCategoryList(prolist.id,prolist.prolist,0);30 }31
32
33 },34 fetch() {35
36 this.get({ //查询用户角色信息 【数据用以在表格中展示】
37 url: "Api/lists/module/role/key/dac509bd9***********a6f1af4bac",38 param: {},39 noLoading: true
40 }).then(result=>{41 this.setState({data: result.result ||[]});42 this.fetchCategoryListArry()43 });44 },45 fetchCategoryListArry() { //查询项目信息
46 var getSessionId =LocalService.getSessionId()47 this.get({48 url: "