import React, { useState, useEffect, useRef, useLayoutEffect } from 'react'; import { Checkbox, Row, Col } from 'antd'; import styles from './ListCardItem.less'; const CheckGroup = Checkbox.Group; const ListCardItem = props => { const { getValueCallback, itemid, userList, OUName, searchWord, multiRoleList, multistationList, mult, } = props; const [indeterminate, setIndeterminate] = useState(false); const [allChecked, setAllChecked] = useState(false); // 全选状态 const [checkList, setCheckList] = useState([]); // 复选框列表选中的值 const [defaultList, setDefaultList] = useState([]); // 默认的选项 const [submitArr, setSubmitArr] = useState([]); // 提交的数组 const authority = sessionStorage.getItem('userType'); // const submitArr = []; useEffect(() => { let arr = []; userList.map((item, index) => { let obj = { ...item }; obj.label = ( <span className={ searchWord && obj.userName.includes(searchWord) ? styles.isSearch : '' } > {obj.userName || obj.roleName || obj.stationName} </span> ); obj.value = obj.userID || obj.roleID || obj.stationID; arr.push(obj); }); setDefaultList(arr); }, [searchWord]); useEffect(() => { if (mult == 'Yes') { console.log(multiRoleList); console.log(multistationList); let arr2 = []; if (multiRoleList != undefined) { multiRoleList.map((item, index) => { arr2.push(item); }); } if (multistationList != undefined) { multistationList.map((item1, index) => { arr2.push(item1); }); } console.log(arr2); console.log(userList); console.log(itemid); // 勾选展示 let flag = 0; let aa = []; userList.map((item, index) => { if (item.roleID != undefined) { if (arr2.indexOf(item.roleID) != -1) { flag += 1; aa.push(item.roleID); } } if (item.stationID != undefined) { if (arr2.indexOf(item.stationID) != -1) { flag += 1; aa.push(item.stationID); } } }); console.log(aa); console.log(userList.length); console.log(flag); if (flag == userList.length) { setIndeterminate(false); setAllChecked(true); } if (flag < userList.length && flag > 0) { setIndeterminate(true); setAllChecked(false); } if (flag == 0) { setIndeterminate(false); setAllChecked(false); } // eslint-disable-next-line no-unused-expressions getValueCallback && getValueCallback(aa, itemid); setCheckList(arr2); } else { let arr2 = []; userList.map((item, index) => { if (item.isChecked) { arr2.push(item.userID || item.roleID || item.stationID); } }); // eslint-disable-next-line no-unused-expressions getValueCallback && getValueCallback(arr2, itemid); const all = userList.every(u => u.isChecked); setIndeterminate(!all && userList.some(u => u.isChecked)); setAllChecked(all); setCheckList(arr2); } }, [userList]); const handleAllChecked = e => { const { checked } = e.target; setAllChecked(checked); let arr = []; if (checked) { arr = defaultList.map(item => item.value); } setIndeterminate(false); setCheckList(arr); // eslint-disable-next-line no-unused-expressions getValueCallback && getValueCallback(arr, itemid); }; const handleChecked = e => { setCheckList(e); setAllChecked(e.length === defaultList.length); setIndeterminate(!!e.length && e.length < defaultList.length); getValueCallback(e, itemid); }; if (defaultList.length === 0) { return null; } return ( <div style={{ display: OUName === '运维管理' && authority !== 'super' ? 'none' : 'block', }} > <div className={`${styles.divBox}`}> <div className={styles.topCheckbox}> <Checkbox indeterminate={indeterminate} checked={allChecked} onChange={e => { handleAllChecked(e); }} > {OUName} </Checkbox> </div> <div style={{ width: '100%' }} className={styles.checkdiv}> {defaultList && defaultList.length > 0 && ( <CheckGroup className={styles.check} onChange={e => { handleChecked(e); }} value={checkList} options={defaultList} /> )} </div> </div> </div> ); }; export default ListCardItem;