import React, { useState, useEffect } from 'react'; import { Checkbox, Empty } from 'antd'; import styles from './checkBox.less'; const CheckList = props => { const { info = {}, valueCallback = () => {}, nodeType = '', addList } = props; console.log(info, 'info'); const [list, setList] = useState([]); const [addRoleList, setAddRoleList] = useState([]); useEffect(() => { if (info.pageUrl) { let arr = [...info.relatedRoleList]; let arr2 = []; arr.map(item => { if (item.related) { arr2.push(item.relatedRoleCode); } }); setList(arr); } }, [info]); useEffect(() => { if (addList && addList.length > 0) { setAddRoleList([...addList]); } }, [addList]); const handleSelect = (e, val) => { list.forEach(item => { if (item.relatedRoleCode === val) { item.related = e.target.checked; } }); setList([...list]); valueCallback(list); }; const handleRoleSelect = (e, val) => { addRoleList.forEach(item => { if (item.roleCode === val) { item.related = e.target.checked; } }); setAddRoleList([...addRoleList]); valueCallback(addRoleList); }; return ( <div> {nodeType === 3 || nodeType === 4 ? ( <div className={styles.box}> {/* <Checkbox>全选/反选</Checkbox> */} {list && list.length > 0 && list.map(item => ( <div key={item.relatedRoleCode} className={styles.check}> <Checkbox checked={item.related} onChange={e => { handleSelect(e, item.relatedRoleCode); }} > {item.relatedRoleName} </Checkbox> </div> ))} </div> ) : ( <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> )} {/* { <div className={styles.box}> {addRoleList && addRoleList.length > 0 && addRoleList.map(item => ( <div key={item.roleCode} className={styles.check}> <Checkbox checked={item.related} onChange={e => { handleRoleSelect(e, item.roleCode); }} > {item.roleName} </Checkbox> </div> ))} </div> } */} </div> ); }; export default CheckList;