react 实现展示公司层级，选择人员的功能

       前言：不知不觉又过去了不少时间了，这段时间写了不少复杂的组件，也帮同事出一些复杂组件的技术方案，都没什么时间累计了，现在回想一下，其实复杂与否不在代码量，而是一些我们的思考方式，或者我们对这一块逻辑做的处理方式是否得当，处理的比较得当的话整个流程调理会很清晰，连贯性会比较好，虽然也复杂，但是找问题，debugger的时候都会变得事半功倍。

       今天分享一个这两天写的一个组件。先介绍一下这个组件，这个组件主要用于会议申请的时候选择参与人，参与人会有不同的职位级别，比如董事大佬们，部门老大，团队老大，小职员等等一些职级，团队会有专属的团队下小成员，然后构建成一个人员树的样子，然后供选择，选择部门，则部门下都被选中，选择团队，则团队下的都被选中。

        代码大概分为几个部分，首先对后端的数据进行一个整理，然后标记人员是否被选中，最后给节点标记是否被选中。之所以把节点单独拿出来做处理，是为了后面单独选人，或者选部门后，会重新被节点做标记。

        

import React, { Component } from 'react';
import { connect } from 'dva';
import { Checkbox, Button } from 'antd';
import styles from './index.less';
@connect(({ zyManage, loading }) => ({
    zyManage,
    loading: loading.models.zyManage
}))
export default class SelectParticipant extends Component {
    
    state = {
        dataSource: null,                                            // 已被选中的数据
    }

    // 获取数据源
    async componentDidMount() {
        const { dataSource, dispatch } = this.props;

        // 获取全部的数据源
        await dispatch({
            type: 'zyManage/fetchAllDepartmentUserList'
        });
        const { zyManage } = this.props;
        const { allDepartmentUserList } = zyManage;
        // // 如果是新增，则数据源是null，如果是修改，数据源是调用接口以后的数据
        // if (type === 'add') {
        //     return this.setState({
        //         dataSource: null
        //     });
        // }
        let listAll = Object.assign({}, allDepartmentUserList);
        listAll = this.getDataSource(listAll, dataSource);
        listAll = this.markStatus(listAll);
        this.setState({
            dataSource: listAll
        });
    }

    markStatus = (dataSource) => {
        let headQuartersFlag = true;
        let unitList = dataSource.unitList || [];
        Object.keys(unitList).forEach(unit => {
            let unitFlag = true;
            unitFlag = !unitList[unit].userList.some(item => !item.checked);
            Object.keys(unitList[unit].departmentList).forEach(department => {
                const f = !unitList[unit].departmentList[department].userList.some(item => !item.checked);
                unitList[unit].departmentList[department].checked = f;
                if (unitFlag) unitFlag = f;
            });
            unitList[unit].checked = unitFlag;
            if (headQuartersFlag) headQuartersFlag = unitFlag;
        });
        dataSource.checked = headQuartersFlag;
        return dataSource;
    }

    getDataSource = (allUser, selectedList) => {
        const unitList = allUser.unitList;
        let unitStruct = {};
        // 修正后端的垃圾数据结构
        unitList.forEach(item => {
            unitStruct[item.unitCode] = {
                unitCode: item.unitCode,
                unitName: item.unitName,
                userList: [].slice.call(item.userList),
                departmentList: {}
            };
            item.departmentList && item.departmentList.forEach(k => {
                unitStruct[item.unitCode].departmentList[k.departmentCode] = Object.assign({}, k);
            });
        });
        // 遍历修正过的数据，并标记是否已被选中
        selectedList.forEach(item => {
            // console.log('-------------------------------item: ', item);
            let unitUser = [];
            unitStruct[item.unitCode].userList.forEach(k => {
                if (item.userList && item.userList.some(userItem => userItem.userId === k.userId)) {
                    unitUser.push({
                        userId: k.userId,
                        userName: k.userName,
                        checked: true
                    });