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});} else {unitUser.push({userId: k.userId,userName: k.userName,checked: false});}});unitStruct[item.unitCode].userList = unitUser;item.departmentList && item.departmentList.forEach(department => {let departmentUser = [];unitStruct[item.unitCode].departmentList[department.departmentCode].userList.forEach(u => {if (department.userList.some(userItem => userItem.userId === u.userId)) {departmentUser.push({userId: u.userId,userName: u.userName,roleType: u.roleType,checked: true});} else {departmentUser.push({userId: u.userId,userName: u.userName,roleType: u.roleType,checked: false});}});unitStruct[item.unitCode].departmentList[department.departmentCode].userList = departmentUser;});});const allUserStatus = {departmentId: allUser.departmentId,departmentName: allUser.departmentName,unitList: unitStruct};return allUserStatus;}checkAllChange = (e, type, unitCode, departmentCode) => {const { dataSource } = this.state;let data = Object.assign({}, dataSource); let unitList = data.unitList;const isChecked = e.target.checked;if (type === 'all') {Object.keys(unitList).forEach(unit => {const list = unitList[unit].userList.map(item => {return {userId: item.userId,userName: item.userName,checked: isChecked};});unitList[unit].userList = list;Object.keys(unitList[unit].departmentList).forEach(department => {const f = unitList[unit].departmentList[department].userList.map(item => {return {userId: item.userId,userName: item.userName,roleType: item.roleType,checked: isChecked};});unitList[unit].departmentList[department].userList = f;});});} else if (type === 'unit') {const list = unitList[unitCode].userList.map(item => {return {userId: item.userId,userName: item.userName,checked: isChecked};});unitList[unitCode].userList = list;Object.keys(unitList[unitCode].departmentList).forEach(department => {const f = unitList[unitCode].departmentList[department].userList.map(item => {return {userId: item.userId,userName: item.userName,roleType: item.roleType,checked: isChecked};});unitList[unitCode].departmentList[department].userList = f;});} else {const f = unitList[unitCode].departmentList[departmentCode].userList.map(item => {return {userId: item.userId,userName: item.userName,roleType: item.roleType,checked: isChecked};});unitList[unitCode].departmentList[departmentCode].userList = f;}// console.log('-------------data: ', this.markStatus(data));this.setState({dataSource: this.markStatus(data)});}checkChange = (checkGroupCheckedList, unitCode, departmentCode) => {const { dataSource } = this.state;let data = Object.assign({}, dataSource); let unitList = data.unitList;if (departmentCode) {const f = unitList[unitCode].departmentList[departmentCode].userList.map(item => {return {userId: item.userId,userName: item.userName,roleType: item.roleType,checked: checkGroupCheckedList.indexOf(item.userId) > -1};});unitList[unitCode].departmentList[departmentCode].userList = f;} else {const f = unitList[unitCode].userList.map(item => {return {userId: item.userId,userName: item.userName,checked: checkGroupCheckedList.indexOf(item.userId) > -1};});unitList[unitCode].userList = f;}this.setState({dataSource: this.markStatus(data)});}renderUser = () => {const { dataSource } = this.state;if (!dataSource) return null;return (<div className={styles.main}><div className={styles.headQuarters}><Checkboxvalue={dataSource.departmentId}checked={dataSource.checked}onChange={(e) => this.checkAllChange(e, 'all')}>{dataSource.departmentName}</Checkbox></div><div className={styles.unitMain}>{Object.keys(dataSource.unitList).map(unit => (<div className={styles.unitItem} key={`${unit}+${Math.random()}`}><div className={styles.unitItemHeader}><Checkboxvalue={dataSource.unitList[unit].unitCode}checked={dataSource.unitList[unit].checked}onChange={(e) => this.checkAllChange(e, 'unit', unit)}>{dataSource.unitList[unit].unitName}</Checkbox></div><div className={styles.unitItemContent}><Checkbox.Group options={dataSource.unitList[unit].userList.map(user => {return {label: user.userName,value: user.userId};})}defaultValue={dataSource.unitList[unit] && dataSource.unitList[unit].userList && dataSource.unitList[unit].userList.reduce((t, c) => c.checked && [...t, c.userId] || t, [])}onChange={(checkedList) => this.checkChange(checkedList, unit)}/></div><div className={styles.departmentMain}>{dataSource.unitList[unit] && dataSource.unitList[unit].departmentList && Object.keys(dataSource.unitList[unit].departmentList).map(department => (<div className={styles.departmentItem} key={department}><div className={styles.departmentItemHeader}><Checkboxvalue={dataSource.unitList[unit].departmentList[department].departmentCode}checked={dataSource.unitList[unit].departmentList[department].checked}onChange={(e) => this.checkAllChange(e, 'department', unit, department)}>{dataSource.unitList[unit].departmentList[department].departmentName}</Checkbox></div><div className={styles.departmentItemContent}><Checkbox.Group options={dataSource.unitList[unit].departmentList[department].userList.map(user => {return {label: user.userName,value: user.userId};})}defaultValue={dataSource.unitList[unit].departmentList[department].userList.reduce((t, c) => c.checked && [...t, c.userId] || t, [])}onChange={(checkedList) => this.checkChange(checkedList, unit, department)}/></div></div>))}</div></div>))}</div></div>);}handleOk = () => {const { dataSource } = this.state;const { onOk } = this.props;let serverUserList = [];let userDisplay = [];let serverDList = [];let backData = [];if (!dataSource) {onOk && onOk(serverUserList, serverDList, userDisplay, backData);return;}if (dataSource.checked) {serverDList.push({departmentCode: dataSource.departmentId,type: '1'});userDisplay.push({userId: dataSource.departmentId,userName: dataSource.departmentName});const unitList = dataSource.unitList;Object.keys(unitList).forEach(item => {const userList = unitList[item].userList;let backDataItem = {};backDataItem.unitCode = item;backDataItem.userList = userList;userList.forEach(userItem => {serverUserList.push({unitCode: item,departmentCode: '',userId: userItem.userId});});const departmentList = unitList[item].departmentList;Object.keys(departmentList).forEach(dItem => {const userList = departmentList[item].userList;backDataItem.departmentList = [];backDataItem.departmentList.push({departmentCode: dItem,userList: userList});userList.forEach(userItem => {serverUserList.push({unitCode: dItem,departmentCode: '',userId: userItem.userId});});});backData.push(backDataItem);});onOk && onOk(serverUserList, serverDList, userDisplay, backData);return;}const unitList = dataSource.unitList;Object.keys(unitList).forEach(item => {const userList = unitList[item].userList;if (unitList[item].checked) {serverDList.push({departmentCode: item,type: '2'});userDisplay.push({userId: item,userName: unitList[item].unitName});}let backDataItem = {};backDataItem.unitCode = item;backDataItem.userList = userList.filter(item => item.checked || false);userList.forEach(userItem => {userItem.checked && serverUserList.push({unitCode: item,departmentCode: '',userId: userItem.userId});userItem.checked && !unitList[item].checked && userDisplay.push({userId: userItem.userId,userName: userItem.userName});});const departmentList = unitList[item].departmentList;backDataItem.departmentList = [];Object.keys(departmentList).forEach(dItem => {const userList = departmentList[dItem].userList;if (departmentList[dItem].checked && !unitList[item].checked) {serverDList.push({departmentCode: dItem,type: '3'});userDisplay.push({userId: dItem,userName: departmentList[dItem].departmentName});}backDataItem.departmentList.push({departmentCode: dItem,userList: userList.filter(item => item.checked || false)});userList.forEach(userItem => {userItem.checked && serverUserList.push({unitCode: item,departmentCode: dItem,userId: userItem.userId});userItem.checked && !departmentList[dItem].checked && userDisplay.push({userId: userItem.userId,userName: userItem.userName});});});backData.push(backDataItem);});onOk && onOk(serverUserList, serverDList, userDisplay, backData);}render() {return (<div>{this.renderUser()}<div className={styles.btns}><Button type="primary" size="default" onClick={this.handleCancel}>取消</Button><Button type="primary" size="default" onClick={this.handleOk}>提交</Button></div></div>);}
}

其实这段代码可以做很大规模的优化，最近时间比较赶，所以没有做花时间去做这个整理，不少方法可以单独拎出来做成一个公共的方法，细心的大佬可能会发现，我点击提交的时候给出了四个回参，这里说明一下，前两个回参是为了给后台的数据，可以随意修改，第三个是页面展示的数据，如果选了部门，部门下的小组和成员不展示。所以需要额外做一层处理。最后一个参数是重新回到组件的时候需要的数据，就是回填的数据。

这个组件复杂主要在对数据的处理上显得很复杂，其他的逻辑会触发数据的处理，就需要我们把一些核心的方法独立出来，作为公共的方法调用。

这个组件就讲到这儿了，大佬们有好的思路可以一起讨论。

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

为什么选择react？为前端开发选择React的六大理由
有许多框架和库可用于前端开发.并非所有这些都是好的.React前端开发是最受欢迎且使用最广泛的库(它不是框架)之一.那么为什么选择react?使用React有什么好处?下面将为你提供6个选择 Reac ...
转载 ---资深HR告诉你：我如何筛选简历与选择人员的
资深HR告诉你:我如何筛选简历与选择人员的有个公司HR看简历先直接丢掉一半理由是不要运气不好的应聘者. 当然这可能只是某些HR面对太多的简历产生了偷懒的情绪,但是不论是Manager,亦或是T ...
软件开发公司怎么选择比较好？-链环科技
软件开发公司怎么选择比较好?首先简单介绍一下我所在的软件开发公司:重庆链环科技有限公司,具备成熟的技术开发团队和丰富的项目经验,擅长软件外包解决方案等一站式技术服务,专注于为中小微企业提供专业移动端建 ...
建设网站制作公司的选择标准是什么？
随着社会的发展,大多数企业都在网络营销上提上工作日程.网站已经成为一家公司的面孔.企业之间的竞争日益激烈.一个好的网站可以促进企业的推广和产品销售.现在建设网站制作公司这么多,建设网站制作公司的选择标 ...
（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
回顾作者用心写作,请动动你可爱的小手点亮大拇指.你的鼓励是作者继续创作的动力- 前端的学习,不能仅仅依靠知识点的学习,实战项目的操作可以帮助我们整理知识点以及提高编程能力,更有助于学习和实践,最重要 ...
靠谱的软件开发公司怎样选择比较靠谱？（三）
靠谱的软件开发公司怎样选择比较靠谱?(三) 通过一些中介平台查找软件开发公司(靠谱指数:2星):比如猪八戒,一品威客,智城等.这类平台汇集了比较多的低端开发者和软件开发公司,价格便宜,但服务和项目质量 ...
为什么大型科技公司更会发生人员流失标准 ceo 软件技术图阅读2479 原文：Why Good People Leave Large Tech Companies 作者：steve
为什么大型科技公司更会发生人员流失标准 ceo 软件技术图阅读2479 原文:Why Good People Leave Large Tech Companies 作者:steve bla ...
[react] react是哪个公司开发的
[react] react是哪个公司开发的 facebook 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
[react] react是哪个公司开发的？
[react] react是哪个公司开发的? facebook 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
在选择人员定位系统是应该注意什么？
现代制造业规模大.人员多,极易发生安全事故,企业为了实现工厂的安全生产管理,会对厂区人员进行实时定位,那么,在选择定位系统时,应该注意些什么呢? 选择人员定位系统时的关键点 1.紧密结合业务需求企业 ...

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

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

最新文章

热门文章