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

  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                     proid:proid, //取出项目ID存入每条信息中，方便在树选择中显示为哪个项目的提示【placeholder】
 82                     numIndex:numIndex
 83                 };
 84                 numListArry[item.id]=numIndex;
 85                 if (item.hasChildren) { //处理接口数据
 86                     let children = [];
 87                     item.children && item.children.map(menu => {
 88                         children.push({
 89                             id: menu.id,
 90                             fid: item.id,
 91                             label: menu.title,
 92                             value: menu.id,
 93                             key: menu.id,
 94                             proid:proid,
 95                             numIndex:numIndex
 96                         });
 97 
 98                         numListArry[menu.id]=numIndex;
 99                     });
100                     treeItem.children = children;
101                 }
102                 treeData.push(treeItem);
103             });
104             menuArry.push(treeData)
105 
106             var numArry = []
107             this.setState({menuList: menuArry,numListArry:numListArry}); //将全部菜单数据和处理好的菜单ID下标对象存入各自全局变量
108 
109             numIndex++;
110             if(numIndex<thisprolist.length){
111                 this.fetchCategoryList(userid,thisprolist,numIndex); //递归查询
112             }
113         });
114     },
115     deleteRole(parms){ //删除角色信息接口
116         let that = this;
117         if (!parms) return;
118         that.post({
119             url: "Api/batchDelete/module/role/key/dac509********4bac",
120             param: {ids:parms.id},
121             noLoading: true
122         }).then(result=> {
123             if (result.result) {
124                 that.success("删除成功");
125                 that.fetch();
126             }
127         });
128     },
129     addOrUpdate(modal,e) {
130         e && e.preventDefault() ;
131         e && e.stopPropagation();
132         new ModalWrapper(AddOrUpdateModal, "addOrUpdateModal", () => {
133             this.fetch();
134         }, null, {
135             menuList:this.state.menuList, //打开弹窗时，将全部菜单数据传入子组件
136             numListArry:this.state.numListArry,  //菜单ID下标对象，同上
137             title:  modal && modal.id  ? ‘编辑角色‘ : ‘新增角色‘,
138             item: modal && modal.id ? Helper.copyObject(modal) : {}, //本条角色信息的数据，包含其已有的菜单数据【回显】
139             isEdit: modal && modal.id  ? true:false
140         }).show();
141     },
142     render(){
143         let statusObj = {
144             0: "有效",
145             1: "无效"
146         };
147 
148         let columns = [
149             { title: ‘编号‘,dataIndex: ‘id‘,key: ‘id‘, width: ‘5%‘},
150             { title: ‘角色名称‘,dataIndex: ‘role_name‘,key: ‘role_name‘, width: ‘10%‘},
151             { title: ‘权限‘, dataIndex: ‘permission‘,key: ‘permission‘,  width: ‘35%‘,
152                 render: (text, record) => {
153                     let menuList = [];
154                     let permission = record.permission.split(‘,‘)
155                     permission && permission.map( item =>{
156                         this.state.fetchCategoryListArry && this.state.fetchCategoryListArry.map( first =>{
157                             if(item == first.id){
158                                 menuList.push(first.title);
159                             }
160                         })
161                     })
162                     
163                     if( !menuList==null || !menuList.length==0){
164                         return (
165                             menuList.join(‘,‘)+‘...‘
166                         )
167                     }
168 
169                 }
170             },
171             { title: ‘创建时间‘, dataIndex: ‘create_time‘,key: ‘create_time‘, width: ‘15%‘,},
172             { title: ‘更新时间‘, dataIndex: ‘update_time‘,key: ‘update_time‘, width: ‘15%‘, },
173             { title: ‘状态‘, dataIndex: ‘is_del‘,key: ‘is_del‘, width: ‘7%‘,
174                 render: (text, record) => {
175                     return (
176                         statusObj[record["is_del"]]
177                     )
178                 }
179             },
180 
181             { title: ‘操作‘, key: ‘#‘, width: ‘23%‘,
182                 render: (text, record) => {
183                     return (
184                         <div>
185                             <Button type="primary" style={{ marginRight: 8 }} onClick={this.addOrUpdate.bind(this,record)}>修改</Button>
186                             <Popconfirm title="确定删除角色？" onConfirm={this.deleteRole.bind(this,record)} okText="确定" cancelText="取消">
187                                 <Button type="primary">删除</Button>
188                             </Popconfirm>
189                         </div>
190 
191                     )
192                 }
193             }
194         ];
195         return (
196             <div className="role">
197                 <div className="title">
198                     <h2>角色管理</h2>
199 
200                     <Button type="primary" onClick={this.addOrUpdate.bind(this,‘‘)}>添加角色</Button>
201                 </div>
202                 <div className="list-role">
203                     <Table columns={columns}
204                            dataSource={this.state.data}
205                            pagination={false}
206                            scroll={{ y: 600 }}
207                            rowKey={(record) => record.id}
208                     >
209                     </Table>
210                 </div>
211             </div>
212         )
213     }
214 });
215 user = createForm()(user);
216 export default user;

  1 import React from "react";
  2 import {Modal, Form, Input, Select, TreeSelect} 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 LocalService from "../../../../../services/local.services";
  7 const FormItem = Form.Item;
  8 const createForm = Form.create;
  9 const Option = Select.Option;
 10 const SHOW_PARENT = TreeSelect.SHOW_ALL;
 11 let prolist = LocalService.getUserInfo() && JSON.parse(LocalService.getUserInfo()) || [] ;
 12 
 13 let addOrUpdateModal = React.createClass({
 14     mixins: [LoadingMixin, NotificationMixin, RequestMixin],
 15     propTypes: {
 16         onManualClose: React.PropTypes.func,
 17         onOk: React.PropTypes.func,
 18         onCancel: React.PropTypes.func,
 19         title: React.PropTypes.string,
 20         item: React.PropTypes.object,
 21         menuList: React.PropTypes.array,
 22         isEdit: React.PropTypes.bool,
 23         numListArry:React.PropTypes.object,
 24     },
 25     getInitialState() {
 26         return {
 27             item: this.props.item || {}, //用户信息
 28             menuList: this.props.menuList || [],  //权限集合
 29             numListArry: this.props.numListArry || [],
 30             permissions: [],
 31             oldPermissions: [],
 32             headNav:[],
 33             permissionsArry:[],
 34             newPermissionsArry:[],
 35             headNavsearchPlaceholder:[]
 36         };
 37     },
 38     componentWillMount(){
 39 
 40         if (this.props.isEdit) {
 41             let item = this.state.item || {}; //角色已有权限数据作去重去空转换成数组
 42             let permissions = item.permission.split(",");
 43             let menuList = this.state.menuList;
 44 
 45             var arry = permissions.filter(function(element,index,self){  //去重去空
 46                      return self.indexOf(element) === index;
 47               });
 48             for(var i = 0;i<arry.length;i++){
 49                 if(arry[i]==‘‘||arry[i]==null||typeof(arry[i])==undefined){
 50                     arry.splice(i,1);
 51                     i=i-1;
 52                 }
 53             }
 54             permissions = arry;
 55 
 56             this.setState({permissionsArry: permissions});
 57         }
 58         this.getHeaderMenu()
 59  
 60     },
 61     getHeaderMenu(){ //顶部菜单
 62         this.get({
 63             url: "Api/lists/module/project/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
 64             param: {
 65             }
 66         }).then(result => {
 67             this.setState({headNav: result.result || []});
 68             var permissions = []
 69             var itemList =[]
 70             var itemStr = this.state.permissionsArry
 71             var menuList = this.state.menuList;
 72             var menuListArry =[]
 73             menuList && menuList.map((item)=>{  //全部菜单数组转换成只含ID的数组【待与传来的角色已有权限数据作交集处理】
 74                 var newPermissions =[]
 75                 item && item.map((pros)=>{
 76                     if (pros.children){
 77                         newPermissions.push(pros.id);
 78                         pros.children.map( (list) =>{
 79                             newPermissions.push(list.id);
 80                         })
 81                     }else{
 82                         newPermissions.push(pros.id);
 83                     }
 84                 })
 85 
 86                 Array.intersect = function(arr1, arr2) {
 87                     if(Object.prototype.toString.call(arr1) === "[object Array]" && Object.prototype.toString.call(arr2) === "[object Array]") {
 88                         return arr1.filter(function(v){
 89                             return arr2.indexOf(v)!==-1
 90                         })
 91                     }
 92                 }
 93                 var mergeArry = Array.intersect(itemStr, newPermissions); // 此处求交集原因：因角色所含菜单数据是一个包含菜单ID的无绪字符串，转成数据也无法直接在树选择组件中循环回显
 94                 menuListArry.push(mergeArry)                                //所以要先将所有菜单数据的二维数组处理成一个只含ID的二维数组，将其每条子数组与角色所含菜单数据进行交集匹配，
 95             })                                                                //处理完的二维数组就可以用在树选择组件中循环回选了
 96 
 97             this.setState({permissions: menuListArry});
 98 
 99             var headNavsearchPlaceholder = [] //权限列表提示
100             this.state.headNav && this.state.headNav.map((item)=>{
101                 headNavsearchPlaceholder[item.id] = item.title
102             })
103             this.setState({headNavsearchPlaceholder:headNavsearchPlaceholder});
104         });
105     },
106 
107     onChange(value,label,extra){
108         let newPermissions = [];
109         let proid =‘‘
110         let permissions = this.state.permissions;
111         var numListArry = this.state.numListArry;
112         var numIndex = numListArry[extra.triggerValue];
113 
114         if(numIndex != null){ //判断 点击数据是否有菜单ID，有的话按照之前numListArry对象中匹配该菜单ID所属项目下标，【对应递归查询的二维数组下标】
115             permissions[numIndex] = value;
116         }
117        this.setState({permissions:permissions ,oldPermissions:permissions});
118     },
119     postSubmit(url, param) {
120         this.post({
121             url: url,
122             param: param,
123             noLoading: true
124         }).then(result => {
125             if (result && result.result) {
126                 this.success(!this.props.isEdit ? ‘新增成功‘ : ‘修改成功‘);
127                 this.props.onManualClose && this.props.onManualClose();
128             }
129         });
130     },
131     handleSubmit() {
132         this.props.form.validateFieldsAndScroll((errors, values) => {
133             if (!errors) {
134                 var param = values;
135                 param.permission = this.state.permissions.join(‘,‘); //循环后的树选择返回的数据也是个只含菜单ID二维数组，接口只能入传字符串，所以进行数据处理
136                 if (!this.props.isEdit) {  //判断是新增还是修改
137                     this.postSubmit("Api/add/module/role/key/dac509bd90******1af4bac", param);
138                 }
139                 else {
140                     param.id = this.state.item && this.state.item.id;
141                     this.postSubmit("Api/edit/module/role/key/dac509bd90*****af4bac", param);
142                 }
143             }
144         });
145     },
146     hideModal() {
147         this.props.onCancel && this.props.onCancel();
148     },
149     render() {
150         const {getFieldDecorator} = this.props.form;
151         const formItemLayout = {
152             labelCol: {span: 6},
153             wrapperCol: {span: 10},
154         };
155        
156         const treeSelectArry = []
157         this.state.menuList && this.state.menuList.map((item,index)=>{  //循环树选择数据
158             const tProps = {
159                 value: this.state.permissions[index],
160                 treeData: item,
161                 onChange: this.onChange,
162                 multiple: true,
163                 treeCheckable: true,
164                 dropdownStyle: {maxHeight:"350px"},
165                 showCheckedStrategy: SHOW_PARENT,
166                 searchPlaceholder: ‘请选择‘+this.state.headNavsearchPlaceholder[item[0].proid]+‘权限列表‘,
167                 style: {
168                     width: 300,
169                 },
170             };
171             treeSelectArry.push(tProps)
172         })
173 
174         return (
175             <Modal title={this.props.title || ‘新增‘} visible={true} width="550px" onOk={this.handleSubmit}
176                    onCancel={this.hideModal} maskClosable={false}>
177                 <Form layout="horizontal" autoComplete="off">
178                     <FormItem {...formItemLayout} label="角色名称" >
179                         {getFieldDecorator(‘role_name‘, {
180                             initialValue: this.state.item && this.state.item.role_name || ‘‘,
181                             rules: [{ required: true, message: ‘请输入角色名称！‘ }],
182                         })(
183                             <Input  placeholder="请输入角色名称"/>
184                         )}
185                     </FormItem>
186                   
187                     <FormItem {...formItemLayout} label="权限列表">
188                         {
189                             this.state.menuList && this.state.menuList.map((item,index)=>{ //循环树选择DOM
190                            
191                                 return (
192                                     <div style={{ marginBottom : "10px" }} key={index}>
193                                         <TreeSelect  {...treeSelectArry[index]} />
194                                     </div>
195                                 )
196                             })
197                         }
198                         {/*<TreeSelect {...tProps} />*/}
199                     </FormItem>
200 
201 
202                     <FormItem{...formItemLayout} label="状态">
203                         {getFieldDecorator(‘is_del‘,{
204                             initialValue: this.state.is_del && this.state.is_del || ‘0‘
205                         })(
206                             <Select style={{ width: 100 }}>
207                                 <Option value="1">无效</Option>
208                                 <Option value="0">有效</Option>
209                             </Select>
210                         )}
211                     </FormItem>
212 
213                 </Form>
214             </Modal>
215         )
216     }
217 });
218 addOrUpdateModal = createForm()(addOrUpdateModal);
219 export default addOrUpdateModal;