import React, { useState, useEffect } from 'react'; import { Checkbox, Empty } from 'antd'; import styles from './checkBox.less'; const CheckList = props => { const { info, valueCallback, nodeType } = props; const [list, setList] = useState([]); const [flag, setFlag] = useState(false); useEffect(() => { if (info.pageUrl) { let arr = [...info.relatedRoleList]; let arr2 = []; arr.map(item => { if (item.related) { arr2.push(item.relatedRoleCode); } }); valueCallback(arr); setList(arr); setFlag(true); } return () => { setFlag(false); }; }, [info]); const handleSelect = (e, val) => { let arr = []; list.forEach(item => { if (item.relatedRoleCode === val) { item.related = e.target.checked; } }); setList([...list]); valueCallback(list); }; return ( <div> {nodeType === 1 ? ( <> <div className={styles.boxtitle}> <span className={styles.boxspan}>关联角色</span> </div> <div className={styles.box}> {list && list.length > 0 && list.map(item => ( <div key={item.relatedRoleCode} className={styles.check} title={item.relatedRoleName} > <Checkbox checked={item.related} onChange={e => { handleSelect(e, item.relatedRoleCode); }} > {item.relatedRoleName} </Checkbox> </div> ))} </div> </> ) : ( <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> )} </div> ); }; export default CheckList;