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 } = props; const [indeterminate, setIndeterminate] = useState(false); const [allChecked, setAllChecked] = useState(false); // 全选状态 const [checkList, setCheckList] = useState([]); // 复选框列表选中的值 const [defaultList, setDefaultList] = useState([]); // 默认的选项 const [submitArr, setSubmitArr] = useState([]); // 提交的数组 // 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(() => { 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 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> </> ); }; export default ListCardItem;