react 异步加载树型表格

import React, { Component } from 'react';
// import request from '$src/services';
// import APIS from '$src/services/api';
import { BreadNav, DefaultCard, StoTable } from '$src/components';
import { Button, Loading, Message, Drawer, Form, Divider, Tab, Grid, Select, DatePicker, Dialog,Icon } from '@alifd/next';
import CardInfos from '../component/card-infos';
import AppealAuthDrawer from './dialog/auth';
import DetailDrawer from './dialog/detail';
import classnames from 'classnames';
import styles from './index.scss';
import Column from './column';
import request from '../../../services';
import APIS from '$src/services/api';
import moment from 'moment';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actions } from '$src/redux/user';
import RenewalDialog from './dialog/renewal';

import { Table } from '@alifd/next';

const breadcrumbs = [
  {
    path: '#/main',
    name: '首页'
  },
  {
    path: null,
    name: '个人中心'
  },
  {
    path: null,
    name: '我的权限'
  }
];
const { RangePicker } = DatePicker;
const startValue = moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD');
const endValue = moment(new Date()).format('YYYY-MM-DD');
const currentDate = moment();
const disabledDate = function (date, view) {
  switch (view) {
    case 'date':
      return date.valueOf() >= currentDate.valueOf();
    case 'year':
      return date.year() > currentDate.year();
    case 'month':
      return date.year() * 100 + date.month() > currentDate.year() * 100 + currentDate.month();
    default:
      return false;
  }
};
const FormItem = Form.Item;
const { Row, Col } = Grid;
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 }
};
const applyData = [
  {
    label: '审批中',
    value: 0
  },
  {
    label: '通过',
    value: 1
  },
  {
    label: '不通过',
    value: 2
  },
  {
    label: '撤销',
    value: 3
  },
];

const data = [
  {
    key: 1,
    name: 'a',
    age: 32,
    address: 'aa',
    hasChildren:  true
    // children: [
    //   {
    //     key: 11,
    //     name: "b",
    //     age: 33,
    //     address: "bb"
    //   },
    //   {
    //     key: 12,
    //     name: "c",
    //     age: 33,
    //     address: "cc",
    //     children: [
    //       {
    //         key: 121,
    //         name: "d",
    //         age: 33,
    //         address: "dd"
    //       }
    //     ]
    //   },
    //   {
    //     key: 13,
    //     name: "e",
    //     age: 33,
    //     address: "ee",
    //     children: [
    //       {
    //         key: 131,
    //         name: "f",
    //         age: 33,
    //         address: "ff",
    //         children: [
    //           {
    //             key: 1311,
    //             name: "g",
    //             age: 33,
    //             address: "gg"
    //           },
    //           {
    //             key: 1312,
    //             name: "h",
    //             age: 33,
    //             address: "hh"
    //           }
    //         ]
    //       }
    //     ]
    //   }
    // ]
  },
  {
    key: 2,
    name: 'i',
    age: 32,
    address: 'ii',
    children: []
  }
];

class AccountAuth extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loadVisible: false,
      tableData: [],
      userPermissionTreeData: [],
      userInfo: {},
      role: [],
      permission: [],
      pageNum: 1,
      pageSize: 10,
      totalCount: 0,
      authTableData: [],
      authPageNum: 1,
      authPageSize: 10,
      authTotalCount: 0,
      authVisible: false,
      detailVisible: false,
      renewalVisible: false,
      detailId: '',
      activeTab: '1',
      renewalData: {},
      authForm: {},
      openRowKeys:[],
      dataSource:data
    };
  }

  async componentDidMount() {
    if (!this.props.accountInfo) {
      await this.props.fetchGetUserData();
    }
    this.fetchAuthInfos();
    this.fetchRoleInfos();
    this.handleSearch();
    this.fetchUserPermissionTreeData('');
    this.handleApplyData({ time: [moment().subtract(30, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')] }, 1);
    if (this.props.accountInfo && !this.props.accountInfo.isAdministrator) {
      await request(APIS.getSelfManagerUser, {
        method: 'GET'
      }).then(res => {
        if (res.success) {
          this.setState({ managerUser: res.data && res.data || null });
        }

      });
    }
  }

  fetchAuthInfos = async () => {
    this.setState({
      loadVisible: true
    });
    await request(APIS.jobInfo, {
      method: 'GET'
    }).then(res => {
      if (res && res.success) {
        if (res.data) {
          this.setState({
            loadVisible: false,
            userInfo: res.data && res.data || null
          });
        }
      }
    });
  };

  fetchRoleInfos = async () => {
    await request(APIS.roles, {
      method: 'GET'
    }).then(resp => {
      if (resp && resp.status) {
        this.setState({
            role: resp.data && resp.data || []
          }
        );
      }
    });
  };

  fetchModuleInfos = async () => {
    await request(APIS.modules, {
      method: 'GET'
    }).then(resp => {
      if (resp && resp.status) {
        this.setState({
            role: resp.data && resp.data || []
          }
        );
      }
    });
  };

  // 用户的权限
  fetchUserPermissionTreeData = async (parentId = null,callback) => {
    const {selectedRowKeys=[]} = this.state;
    const resp = await request(APIS.userPermissionTree, {
      method: 'GET',
      params: {
        parentId: parentId,
      }
    });
    if (resp && resp.success) {
      resp.data.map((item,index)=>{
        if(item.authFlag === '1' && !selectedRowKeys.includes(item.key)){
          selectedRowKeys.push(item.key);
        }
      })
      this.setState({
        selectedRowKeys,
      })
      if(callback){
        callback(resp.data || []);
      }else{

        this.setState({
            userPermissionTreeData: resp.data && resp.data || []
          }
        );
      }
    }
  };

  // 查询
  handleSearch = async (pageNum = 1) => {
    this.setState({
      loadVisible: true
    });
    const { activeTab } = this.state;
    const url = activeTab === '1' ? APIS.baseGetRoleListByUserId : APIS.modules;
    await request(url, {
      method: 'GET',
      params: {
        pageNum: pageNum && pageNum || 1,
        pageSize: 10
      }
    }).then(res => {
      if (res.success) {
        this.setState({
          totalCount: res.data && res.data.total,
          tableData: res.data && res.data.records
        });
      } else {
        Message.error(res.errorMsg);
      }

    }).catch(res => {
      Message.error('查询失败');
    }).finally(() => {
      this.setState({
        loadVisible: false,
      });
    });
  };

  // 翻页
  handlePageNum = (pageNum) => {
    this.setState({
      pageNum,
    }, () => {
      this.handleSearch(pageNum);
    });
  };

  // 权限申请详情
  handleAuthDetail = (record) => {
    this.setState({
      detailVisible: true,
      detailId: record.id
    });
  };

  // 权限申请记录
  handleApplyData = async (v, pageNum = 1) => {
    const form = {
      auditStatus: v && v.auditStatus && v.auditStatus,
    };
    if (v && v.time) {
      form.endDate = v && v.time && moment(v.time[1]).format('YYYY-MM-DD');
      form.startDate = v && v.time && moment(v.time[0]).format('YYYY-MM-DD');
    } else {
      form.endDate = v && v.endDate;
      form.startDate = v && v.startDate;
    }
    await request(APIS.authGetAuthorityApplies, {
      method: 'GET',
      params: {
        ...form,
        pageNum: pageNum && pageNum || 1,
        pageSize: 10
      }
    }).then(res => {
      if (res.success) {
        this.setState({
          authForm: form,
          authTotalCount: res.data && res.data.total,
          authTableData: res.data && res.data.list
        });
      } else {
        Message.error(res.errorMsg);
      }
    }).finally(() => {
      this.setState({
        loadVisible: false,
      });
    });
  };
  // 权限翻页
  handleAuthPageNum = (authPageNum) => {
    this.setState({
      authPageNum
    }, () => {
      const { authForm } = this.state;
      this.handleApplyData(authForm, authPageNum);
    });
  };

  // 权限撤销
  handleCancel = (record) => {
    const authorityId = record.id;
    Dialog.confirm({
      title: '操作确认',
      content: '撤销后无法恢复，你还要继续吗？',
      onOk: () => {
        this.fetchCancel(authorityId);
      }
    });
  };

  // 撤销
  fetchCancel = async (authorityId) => {
    await request(APIS.authCancel, {
      method: 'GET',
      params: {
        authorityId,
      }
    }).then(res => {
      if (res.success) {
        Message.success(res.data);
        const evt = document.getElementById('btnQuery');
        evt.click();
      } else {
        Message.error(res.errorMsg);
      }
    }).finally(() => {
      this.setState({
        loadVisible: false,
      });
    });
  };

  renderNumInfo = () => {
    return (
              title="我的工号信息"
      >
                  info={this.state.userInfo}
        />
      
    );
  };

  renderRole = () => {
    return (
              title="我的角色"
      >
        

          {
            this.state.role && this.state.role.length > 0 ? (
              this.state.role.map((item, index) => {
                return (
                  {item.realName}
                );
              })
            ) : null
          }
        

      
    );
  };
  // 提交申请
  handleApply = async (v, rowSelection, activeTab, treeChecked) => {
    // 表格里的多选
    let resourceIds = rowSelection.selectedRowKeys;
    if (activeTab === '2') {
      // 树的多选
      resourceIds = treeChecked;
    }
    await request(APIS.authGetICPDetail, {
      method: 'POST',
      params: {
        ...v,
        resourceCategory: activeTab === '1' ? 'UI_ROLE' : 'UI_MODULE',
        resourceIds: resourceIds
      }
    }).then(res => {
      if (res.success) {
        this.setState({ authVisible: false }, () => {
          Message.success(res.data);
          const evt = document.getElementById('btnQuery');
          evt.click();
        });
      } else {
        Message.error(res.errorMsg);
      }
    }).finally(() => {
      this.setState({
        loadVisible: false,
      });
    });
  };

  handleOpenApplyDialog = async () => {
    this.setState({ authVisible: true });

  };

  // renderTab = (key) => {
  renderAuth = () => {
    const { tableData, pageNum, pageSize, totalCount, activeTab } = this.state;
    return (
              column={Column[activeTab === '1' ? 'roleList' : 'authList']}
        isPagination={true}
        pageSize={pageSize}
        totalCount={totalCount}
        tableData={tableData}
        renderActionCell={activeTab === '1' && this.renderActionCell}
        handlePageNum={this.handlePageNum}
        isShowActionCell={true}
        isSel={true}
        pageNum={pageNum}
        pageSizeSelector="filter"
      />
    );
  };

  // 续签
  handleRenewalDrawer = (record) => {
    if (record.days === undefined) {
      this.setState({
        renewalVisible: true,
        renewalData: record
      });
    } else if (record.days > 60) {
      Message.error('过期日期大于60天，不能续签');
    } else {
      this.setState({
        renewalVisible: true,
        renewalData: record
      });
    }

  };
  // 表格的操作
  renderActionCell = (value, index, record) => {
    const renewalBtn = (<>续签);
    return (
      

        {renewalBtn}
      

    );
  };
  // 权限申请
  renderAppealAuth = () => {
    return (
              title={this.renderAuthHeader()}
      >
        {this.renderAuthForm()}
        {this.renderAuthTable()}
      
    );
  };

  // 头部信息
  renderAuthHeader = () => {
    return (
      

        
权限申请记录

         this.handleOpenApplyDialog()}
        >申请更多权限
      

    );
  };

  // 提交申请
  handleRenewalApply = async (v, rowSelection, activeTab, treeChecked) => {
    // 表格里的多选
    let resourceIds = rowSelection.selectedRowKeys;
    if (activeTab === '2') {
      // 树的多选
      resourceIds = treeChecked;
    }
    await request(APIS.authGetICPDetail, {
      method: 'POST',
      params: {
        ...v,
        resourceCategory: activeTab === '1' ? 'UI_ROLE' : 'UI_MODULE',
        resourceIds: resourceIds
      }
    }).then(res => {
      if (res.success) {
        this.setState({ authVisible: false }, () => {
          Message.success(res.data);
          const evt = document.getElementById('btnQuery');
          evt.click();
        });
      } else {
        Message.error(res.errorMsg);
      }
    }).finally(() => {
      this.setState({
        loadVisible: false,
      });
    });
  };

  // 查询条件
  renderAuthForm = () => {
    return (
      

        
          
            
              
                
                                                 onChange={this.handleChangeDate} name="time"/>
                
              
              
                
                                                                                                                                     onClick={(v) => this.handleApplyData(v, 1)}>查询              重置                                        );  };  // 查询列表  renderAuthTable = () => {    const { authTableData, authPageNum, authPageSize, authTotalCount } = this.state;    return (              column={Column.applyList}        isShowActionCell={true}        isPagination={true}        tableData={authTableData}        pageNum={authPageNum}        pageSize={authPageSize}        totalCount={authTotalCount}        renderActionCell={this.renderAuthActionCell}        handlePageNum={this.handleAuthPageNum}        actionWidth={80}      />    );  };  renderAuthActionCell = (value, index, record) => {    return (              详情        {record.auditStatus === 0 &&        <>                    撤销                }          );  };  // tab  handleChangeTab = (key) => {    this.setState({      activeTab: key,      pageNum: 1    }, () => {      this.handleSearch();    });  };  onRenewalClose = () => {    this.setState({      pageNum: 1,      renewalVisible: false    });  };  onClose = () => {    this.setState({ renewalVisible: false });  };  onIconClick=(record)=>{    console.log(record)    const {userPermissionTreeData} = this.state;    userPermissionTreeData.map(item=>{      if(item.key === record.key){        item.children=[{          categoryCode:'2323',          key: '14d8e84f49ea481590c6228a1ef99cc2be',          name: '服务质量2',          navigateUrl: '/managerCoupon/index'        }];      }    })    this.setState({      userPermissionTreeData    })  }  refreshData = (data, record,childrenArr) => {    data.forEach(item => {      const map = data => {        if (data.key === record.key) {          data.children = childrenArr;//childrenArr        }        data.children && data.children.forEach(child => map(child));      }      map(item);    })    this.setState({      userPermissionTreeData:data    })  }  toggleExpand(record) {    const key = record.key,      { openRowKeys, userPermissionTreeData } = this.state,      index = openRowKeys.indexOf(key);    if (index > -1) {      openRowKeys.splice(index, 1);    } else {      openRowKeys.push(key);    }     this.fetchUserPermissionTreeData(record.key,(newData)=>{          this.refreshData(userPermissionTreeData,record,newData);    })    console.log(openRowKeys)    this.setState({      openRowKeys: openRowKeys,    });  }  render() {    const { loadVisible, authVisible, detailVisible, detailId, managerUser, renewalVisible, activeTab, renewalData, userInfo, userPermissionTreeData,openRowKeys=[],selectedRowKeys=[] } = this.state;    const { accountInfo } = this.props;    console.log(userPermissionTreeData)    return (                                            {this.renderNumInfo()}            {/* {this.renderRole()} */}            {/* {this.renderAuth()} */}                                                            {this.renderAuth()}                                                  {                          openRowKeys={openRowKeys}                          primaryKey="key" rowSelection={{                        selectedRowKeys,                        getProps:(record,index)=>{                          return record.authFlag !== '1'? { disabled: true,}: {};                        }                      }} isTree>                     {                      return {}}>                        {                          record.expandable &&                         }                        {record.name}                    }} />                                                                                                  }                                                      {accountInfo && accountInfo.isAdministrator ? null : this.renderAppealAuth()}                                style={{ width: '800px' }}            title="权限续签"            visible={renewalVisible}            footer={false}            onClose={this.onClose}>                                                       handleRenewalApply={this.handleRenewalApply}                             handleSearch={this.handleSearch} onClose={this.onClose} userInfo={userInfo}                             managerUser={managerUser}                             closeVisible={() => this.setState({ renewalVisible: false })}                             onRenewalClose={this.onRenewalClose}/>                                {/* 权限分配 */}                      width="80%"            title="权限申请"            placement="right"            visible={authVisible}            onClose={() => this.setState({ authVisible: false })}          >                                          handleCloseDrawer={() => this.setState({ authVisible: false })}/>                    {/* 详情 */}                      width="60%"            title="权限审批详情"            placement="right"            visible={detailVisible}            onClose={() => this.setState({ detailVisible: false })}          >             this.fetchCancel(v)}                          onClose={() => this.setState({ detailVisible: false })}/>                            );  }}const mapStateToProps = ({ common }) => {  const { accountInfo, authority } = common;  return {    accountInfo,    authority  };};const mapDispatchToProps = dispatch => {  const { fetchGetUserData, fetchAuthority } = actions;  return {    fetchGetUserData: bindActionCreators(fetchGetUserData, dispatch),    fetchAuthority: bindActionCreators(fetchAuthority, dispatch),  };};export default connect(  mapStateToProps,  mapDispatchToProps)(AccountAuth);

 

@GetMapping("/getUserPermissionTree")
    @ApiOperation("我的权限列表，树型表格展示")
    public Result>> getUserPermissionTree(HttpServletRequest request) {
        BaseUserInfo baseUserInfo = UserInfoHolder.info();
        //超管不需要权限判断
        List uiModuleAll = uiModuleCacheService.getVisibleListByCache("UI", true, false);

        List userModules = null;
        String parentId = request.getParameter("parentId");
        if (StringUtils.isBlank(parentId)) {
            userModules = uiModuleAll.stream().filter(t -> StringUtils.isBlank(t.getParentId())).collect(Collectors.toList());
        } else {
            userModules = uiModuleAll.stream().filter(t -> StringUtils.equalsIgnoreCase(t.getParentId(), parentId)).collect(Collectors.toList());
        }
        BaseUser baseUser = baseUserService.getById(baseUserInfo.getUserId());
        List moduleIds = uiPermissionCacheService.getUserPermissionIdsByCache(baseUser);
        if (null != moduleIds && moduleIds.size() > 0) {
            // 将有权限的菜单打上有权限的标识
            userModules.parallelStream().forEach(t -> {
                if (moduleIds.contains(t.getId())) {
                    t.setAuthFlag("1");
                }
            });
        }
        //创建一个List集合来存放最终的树状结构数据
        List> menuList = new ArrayList<>();
        // 先存入最顶级的树（空代表没有父级，即最顶级），然后通过最顶级的id递归获取子级
        for (UiModule entity : userModules) {
            Map map = new HashMap<>();
            map.put("key", entity.getId());
            map.put("name", entity.getFullName());
            map.put("categoryCode", entity.getCategoryCode());
            map.put("navigateUrl", entity.getNavigateUrl());
            map.put("authFlag", entity.getAuthFlag());
            map.put("expandable", hasChildren(entity.getId(), uiModuleAll));
            //map.put("children", getChildren(uiModules, entity.getId()));
            menuList.add(map);
        }


        /*List> menuList = new ArrayList<>();
        // 先存入最顶级的树（空代表没有父级，即最顶级），然后通过最顶级的id递归获取子级
        for (UiModule entity : uiModuleAll) {
            Map map = new HashMap<>();
            map.put("key", entity.getId());
            map.put("name", entity.getFullName());
            map.put("categoryCode", entity.getCategoryCode());
            map.put("navigateUrl", entity.getNavigateUrl());
            map.put("authFlag", entity.getAuthFlag());
            //map.put("expandable", hasChildren(entity.getId(), uiModuleAll));
            map.put("children", getChildren(uiModuleAll, entity.getId()));
            menuList.add(map);
        }*/


        return Result.success(menuList);
    }

    private Boolean hasChildren(String id, List uiModules) {
        Boolean result= uiModules.stream().anyMatch(t -> StringUtils.equalsIgnoreCase(id, t.getParentId()));
        return result;
    }


    /**
     * 递归处理：通过id获取子级，查询子级下的子级
     *
     * @param data 数据库的原始数据
     * @param id   主id
     * @return 该id下得子级
     */
    public List> getChildren(List data, String id) {
        List> list = new ArrayList<>();
        if (data == null || data.size() == 0 || id == null) {
            return list;
        }
        for (UiModule entity : data) {
            Map map = new HashMap<>();
            //如果本级id与数据的父id相同，就说明是子父级关系
            if (id.equals(entity.getParentId())) {
                map.put("key", entity.getId());
                map.put("name", entity.getFullName());
                map.put("categoryCode", entity.getCategoryCode());
                map.put("navigateUrl", entity.getNavigateUrl());
                map.put("authFlag", entity.getAuthFlag());
                //查询子级下的子级
                map.put("children", getChildren(data, entity.getId()));
                list.add(map);
            }
        }
        return list;
    }