antd树型选择控件选择父级_react 使用antd的TreeSelect树选择组件实现多个树选择循环...

需求说明，一个帐号角色可以设置管理多个项目的菜单权限

且菜单接口每次只能查询特定项目的菜单数据【无法查全部】

开发思路：

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: "