/* eslint-disable no-unused-expressions */ /* eslint-disable import/order */ import React, { useState, useEffect } from 'react'; import { Checkbox } from 'antd'; import classnames from 'classnames'; import styles from './itemCard.less'; import { checkChildrenByCondition, checkIsGroup, getId } from '.'; import { FolderFilled, FileOutlined } from '@ant-design/icons'; const ListCardItem = props => { const { searchWord, item, valueList, updateValueList, ouid, changedItem, flag, roleID } = props; // id const id = getId(item); // 是否是地图组件 const isMapWedgt = item.type === 'widgetUIPage'; // 当前组件是否是分组id const isGroup = checkIsGroup(item); const [indeterminate, setIndeterminate] = useState(isGroup); const [childrenKeys, setChildrenKeys] = useState([]); // 本次循环item的全部子元素id const [flag1, setFlag1] = useState(); // 首次进入刷新回显 useEffect(() => { setFlag1(roleID); // 子节点勾选状态变化时 if (isGroup) { const keys = item.children .map(child => checkChildrenByCondition(child, c => getId(c), true, 'map')) .flat(Infinity); setChildrenKeys(keys); } // 父复选框 if (localStorage.getItem('aa') == 1) { // 菜单组当前项,完整一次循环当前项不变 if (isGroup) { if (childrenKeys.every(c => valueList.includes(c))) { // 全选 updateValueList([id], [id], { item, value: true }); setIndeterminate(false); } else if (childrenKeys.some(c => valueList.includes(c))) { // 半选 valueList.includes(id) && updateValueList([], [id], { item, value: true }); setIndeterminate(true); } else { // 零选 valueList.includes(id) && updateValueList([], [id], { item, value: true }); setIndeterminate(false); } } } else if (localStorage.getItem('aa') == 0) { // eslint-disable-next-line no-lonely-if if ( isGroup && // changedItem.item !== item && // !checkIsGroup(changedItem.item) && childrenKeys.includes(getId(changedItem.item)) // 判断本次item是否是改变的本次的子选项用来父级回显,全选时要取消这一限制条件 ) { if (childrenKeys.every(c => valueList.includes(c))) { // 全选 updateValueList([id], [id], { item, value: true }); setIndeterminate(false); } else if (childrenKeys.some(c => valueList.includes(c))) { // 半选 valueList.includes(id) && updateValueList([], [id], { item, value: false }); setIndeterminate(true); } else { // 零选 valueList.includes(id) && updateValueList([], [id], { item, value: false }); setIndeterminate(false); } } } }, [changedItem.item, changedItem.value]); useEffect(() => { // 子节点勾选状态变化时 if (isGroup) { const keys = item.children .map(child => checkChildrenByCondition(child, c => getId(c), true, 'map')) .flat(Infinity); setChildrenKeys(keys); } if (isGroup) { if (childrenKeys.every(c => valueList.includes(c))) { // 全选 updateValueList([id], [id], { item, value: true }); setIndeterminate(false); } else if (childrenKeys.some(c => valueList.includes(c))) { // 半选 valueList.includes(id) && updateValueList([], [id], { item, value: false }); setIndeterminate(true); } else { // 零选 valueList.includes(id) && updateValueList([], [id], { item, value: false }); setIndeterminate(false); } } }, [flag, flag1]); // 最外层全选刷新,首次进入刷新标识,点击父复选框 // 勾选事件处理 const handleChecked = e => { const { checked: v } = e.target; console.log(e); console.log(v); if (isGroup) { let aa = item.children.find(i => i.type == 'widgetGroup'); if (aa) { localStorage.setItem('aa', 1); } else { localStorage.setItem('aa', 0); } const result = [...childrenKeys, id]; updateValueList(v ? result : [], result, { item, value: v }); setIndeterminate(false); } else { updateValueList(v ? [id] : [], [id], { item, value: v }); localStorage.setItem('aa', 0); } }; const renderChild = () => item.children && item.children.map((c, i) => ( <ListCardItem item={c} key={`item${i}key`} updateValueList={updateValueList} valueList={valueList} ouid={ouid} roleID={roleID} changedItem={changedItem} searchWord={searchWord} flag={flag} /> )); // 通过把isChecked为true的id存在valueList集合里面,递归数据当id是否被包含在valueList中时返回值来渲染true或false return ( <> <div className={classnames({ [styles.divBox]: isGroup, [styles.divSingle]: !isGroup, })} > <div className={styles.topCheckbox}> <Checkbox indeterminate={isGroup ? indeterminate : false} checked={valueList.includes(id)} onChange={handleChecked} > {isMapWedgt ? ( <div style={{ display: 'inline-block' }} ref={r => { if (r) r.innerHTML = item.text; }} /> ) : ( <span className={classnames({ [styles.boldLabel]: isGroup, [styles.isSearch]: searchWord && item.text.includes(searchWord), })} > {isGroup ? ( <> <FolderFilled style={{ color: '#1890ff', verticalAlign: 'middle', marginTop: '0px' }} /> <span style={{ marginLeft: '5px' }}>{item.text}</span> </> ) : ( <> <FileOutlined style={{ color: '#1890ff', verticalAlign: 'middle', marginTop: '0px' }} /> <span style={{ marginLeft: '5px' }}>{item.text}</span> </> )} </span> )} </Checkbox> </div> <div style={{ width: '100%' }} className={styles.checkdiv}> {renderChild()} </div> </div> </> ); }; export default ListCardItem;