react 使用antd的TreeSelect树选择组件实现多个树选择循环

最新推荐文章于 2024-07-31 16:58:25 发布

weixin_30895603

最新推荐文章于 2024-07-31 16:58:25 发布

阅读量2.3k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhixi/p/10419878.html

版权

在项目中，通过React和Ant Design的TreeSelect组件，实现了根据项目动态查询并显示菜单权限的功能。针对每个项目，异步获取菜单数据并组装成二维数组。遇到的挑战包括处理异步请求顺序、菜单权限的增删改操作以及树选择事件的响应。同时，利用基础算法处理数据，如字符串去重、数组交集计算和递归查找。最终，将用户角色信息与菜单权限关联，展示在列表页面和弹窗组件中。

摘要由CSDN通过智能技术生成

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

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

开发思路：

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: "Api/lists/module/menu/key/dac509bd90a**************1af4bac",
 49             param: {
 50                 sessionid:getSessionId || ''
 51             },
 52             noLoading: true
 53         }).then(result=> {
 54             this.setState({fetchCategoryListArry: result.result || []});
 55         });
 56     },
 57     fetchCategoryList(userid,thisprolist,numIndex) {  //查询菜单
 58         var proid = thisprolist[numIndex];
 59         var getSessionId = LocalService.getSessionId()
 60         this.get({
 61             url: "Api/search/module/menu/key/dac509bd90***************6f1af4bac",
 62             param: {
 63                 userid: userid,
 64                 proid:proid,
 65                 sessionid:getSessionId || ''
 66             },
 67             noLoading: true
 68         }).then(result=> {
 69             let menuList = result.result || [];
 70             let treeData = [];
 71             let menuArry = this.state.menuArry;
 72             var numListArry=this.state.numListArry; 
 73 
 74             menuList && menuList.map(item => {
 75                 let treeItem = {
 76                     id: item.id,
 77                     label: item.title,
 78                     value: item.id,
 79                     key: item.id,
 80                     hasChildren: item.hasChildren,
 81