/* eslint-disable no-shadow */ /* eslint-disable array-callback-return */ /* eslint-disable consistent-return */ /* eslint-disable react/no-multi-comp */ /* eslint-disable eqeqeq */ import React, { useEffect, useState } from 'react'; import { Tree, message, Input, notification, Tooltip, Card, Button, Spin, Empty, Pagination, Checkbox, } from 'antd'; import classnames from 'classnames'; import { PlusSquareOutlined, FormOutlined, DeleteOutlined, DoubleLeftOutlined, DoubleRightOutlined, PlusSquareFilled, ApartmentOutlined, CaretUpOutlined, CaretDownOutlined, } from '@ant-design/icons'; import PageContainer from '@/components/BasePageContainer'; import TreeComponents from '@/components/ExpendableTree'; import voca from 'voca'; import zhCN from 'antd/es/locale/zh_CN'; import qs from 'qs'; import lodash, { clone, set } from 'lodash'; import styles from './SiteManage.less'; import { chooseUserToStation, getStationUserList, getSiteTree, getStationUsers, DragGroup, getGroupUserTree, } from '@/services/siteManage/api'; import AddModal from './AddModal'; import DelModal from './DelModal'; import EditModal from './EditModal'; import AddChildModal from './AddChildModal'; const { Search } = Input; const placeholder = '请输入查询条件'; const SiteManageV2 = () => { const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式 const [treeVisible, setTreeVisible] = useState(true); // 树是否可见 const [treeData, setTreeData] = useState([]); // 用户站点树 const [treeDataCopy, setTreeDataCopy] = useState([]); // 机构树数据备份,用于更改机构 const [treeState, setTreeState] = useState(true); // 树第一次加载 const [treeLoading, setTreeLoading] = useState(false); const [checkLoading, setCheckLoading] = useState(false); const [currentStation, setCurrentStation] = useState(''); // 当前选中站点 const [currentStationMsg, setCurrentStationMsg] = useState({}); // 当前编辑节点信息 const [dataList, setdataList] = useState([]); // 当前站点对应的分页用户列表 const [selectedState, setSelectedState] = useState(false); // 已选列表展开状态true为展开false为收起 const [visibleParams, setvisibleParams] = useState({ modalVisible: false, // 新增弹窗 delVisible: false, // 删除弹窗 editVisible: false, // 修改弹窗 spinLoading: false, // 加载弹窗 btnLoading: false, loading: false, checkBoxLoading: false, }); const [total, setTotal] = useState(0); // 分页总数 const [page, setPage] = useState({ pageNum: 1, pageSize: 10 }); const [selectList, setSelectList] = useState(new Map()); // 已勾选列表数据 const [updatePageUser, setUpdatePageUser] = useState(1); // const [updateCheck, setUpdateCheck] = useState(1); const [name, setName] = useState(''); const [des, setDes] = useState(''); const [data, setData] = useState(''); const [ch, setCh] = useState(''); const [keepTree, setKeepTree] = useState([]); // 保存所有一级id用于控制只展开一项一级菜单 const [indeterminate, setIndeterminate] = useState(new Map()); const [searchTreeValue, setSearchTreeValue] = useState(''); let a = []; // 渲染机构树 const mapTree = org => { const haveChildren = Array.isArray(org.children) && org.children.length > 0; const indexsearch = org.text.indexOf(searchTreeValue); const beforeStr = org.text.substring(0, indexsearch); const afterStr = org.text.slice(indexsearch + searchTreeValue.length); return { title: ( <div className={styles.title}> {org.text.includes(searchTreeValue) && searchTreeValue != '' ? ( <div className={styles.titleText}> {beforeStr} <span className={styles.titleSearch}>{searchTreeValue}</span> {afterStr} </div> ) : ( <div className={styles.titleText}>{org.text}</div> )} <div className={styles.tip}> <Tooltip title="添加下级站点" className={styles.fs}> <PlusSquareOutlined style={{ fontSize: '16px', color: '#1890FF' }} onClick={e => addSite(e, org)} /> </Tooltip> <Tooltip title="编辑当前站点" className={styles.fs}> <FormOutlined style={{ fontSize: '16px', color: '#1890FF' }} onClick={e => editorSite(e, org)} /> </Tooltip> <Tooltip title="删除当前站点" className={styles.fs}> <DeleteOutlined style={{ fontSize: '16px', color: '#1890FF' }} onClick={e => delSite(e, org)} /> </Tooltip> </div> </div> ), key: org.id, // icon: <UserOutlined style={{ display: 'inline' }} />, // 判断它是否存在子集,若果存在就进行再次进行遍历操作,知道不存在子集便对其他的元素进行操作 children: haveChildren ? org.children.map(i => mapTree(i)) : [], }; }; // 添加下级站点 const addSite = (e, recode) => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); setCurrentStation(recode.id); handleShowModal('addChildVisible', true); }; // 删除当前站点 const delSite = (e, recode) => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); setCurrentStation(recode.id); handleShowModal('delVisible', true); }; // 编辑当前站点 const editorSite = (e, recode) => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); // 保存编辑回显信息 setCurrentStationMsg(recode); // setCurrentStation(recode.id); handleShowModal('editVisible', true); }; // 重新渲染树 const updateTrees = value => { setTreeLoading(true); getSiteTree({ selectNode: -1, keyword: value }).then(res => { if (res.code === 0) { setTreeLoading(false); setTreeData(res.data); let aa = []; if (res.data.length > 0) { res.data.forEach(i => { aa.push(i.id); }); } setKeepTree(aa); setTreeDataCopy(res.data); // 第一次加载,默认选择第一个组织 if (treeState) { onSelect([res.data[0].id], false); // 待会儿要改 setTreeState(false); } } else { setTreeLoading(false); notification.error({ message: '提示', duration: 15, description: res.msg, }); } }); }; // 获取用户机构树 // useEffect(() => { // updateTrees(); // }, [flag]); useEffect(() => { getValue(); updateTrees(); }, []); // 切换站点,点击分页按钮,提交 useEffect(() => { if (!currentStation) return; getList(); setShowSearchStyle(false); }, [updatePageUser]); // 切换站点,提交时触发已勾选列表更新 useEffect(() => { if (!currentStation) return; // getAllcheckList(); getAllCheckListNew(); }, [currentStation, updateCheck]); const getList = () => { indeterminate.clear(); let params = { PageIndex: +page.pageNum, PageSize: +page.pageSize, }; if (name) params = { ...params, key: name }; setCheckLoading(true); getGroupUserTree(params).then(res => { if (res.code === 0 && res.data) { setCheckLoading(false); setShowSearchStyle(true); let list = res.data.data; // 还原选择的数据 let indete = indeterminate; if (selectList.size > 0) { [...selectList].map(item => { list.forEach((value, index) => { // if (item[1].groupId == value.groupId) { list[index].users.forEach((user, userIndex) => { if (user.userId === item[1].userId) { list[index].users[userIndex].isChecked = true; list[index].users[userIndex].groupName = value.groupName; } }); let checkedLen = list[index].users.filter(v => v.isChecked).length; if (checkedLen === list[index].users.length) { list[index].isChecked = true; indete.set(value.groupId, false); } else if (checkedLen < list[index].users.length && checkedLen != 0) { list[index].isChecked = false; indete.set(value.groupId, true); } else { list[index].isChecked = false; indete.set(value.groupId, false); } // } }); }); } setIndeterminate(lodash.cloneDeep(indete)); handleShowModal('loading', false); setdataList(lodash.cloneDeep(list)); setTotal(res.data.count); } else { setCheckLoading(false); handleShowModal('loading', false); setdataList(lodash.cloneDeep([])); } }); }; // 搜索状态时获取当前站点可编辑用户(已勾选和未勾选)分页展示 const getSearchList = value => { indeterminate.clear(); let params = { PageIndex: 1, PageSize: 10, }; setCheckLoading(true); if (value) params = { ...params, key: value }; getGroupUserTree(params).then(res => { setCheckLoading(false); if (res.code === 0 && res.data) { setShowSearchStyle(true); let list = res.data.data; // 还原选择的数据 let indete = indeterminate; if (selectList.length > 0) { selectList.forEach(item => { list.forEach((value, index) => { // if (item.groupId == value.groupId) { list[index].users.forEach((user, userIndex) => { if (user.userId === item.userId) { list[index].users[userIndex].isChecked = true; list[index].users[userIndex].groupName = value.groupName; } }); let checkedLen = list[index].users.filter(v => v.isChecked).length; if (checkedLen === list[index].users.length) { list[index].isChecked = true; indete.set(value.groupId, false); } else if (checkedLen < list[index].users.length && checkedLen != 0) { list[index].isChecked = false; indete.set(value.groupId, true); } else { list[index].isChecked = false; indete.set(value.groupId, false); } // } }); }); } setIndeterminate(lodash.cloneDeep(indete)); handleShowModal('loading', false); setdataList(lodash.cloneDeep(list)); setTotal(res.data.count); } else { handleShowModal('loading', false); setdataList(lodash.cloneDeep([])); } }); setPage({ pageNum: 1, pageSize: 10 }); }; // 重置 const restButton = () => { setName(''); indeterminate.clear(); let params = { PageIndex: 1, PageSize: 10, }; params = { ...params }; setCheckLoading(true); getGroupUserTree(params).then(res => { setCheckLoading(false); if (res.code === 0 && res.data) { setShowSearchStyle(true); let list = res.data.data; // 还原选择的数据 let indete = indeterminate; if (selectList.length > 0) { selectList.forEach(item => { list.forEach((value, index) => { // if (item.groupId == value.groupId) { list[index].users.forEach((user, userIndex) => { if (user.userId === item.userId) { list[index].users[userIndex].isChecked = true; list[index].users[userIndex].groupName = value.groupName; } }); let checkedLen = list[index].users.filter(v => v.isChecked).length; if (checkedLen === list[index].users.length) { list[index].isChecked = true; indete.set(value.groupId, false); } else if (checkedLen < list[index].users.length && checkedLen != 0) { list[index].isChecked = false; indete.set(value.groupId, true); } else { list[index].isChecked = false; indete.set(value.groupId, false); } // } }); }); } setIndeterminate(lodash.cloneDeep(indete)); handleShowModal('loading', false); setdataList(lodash.cloneDeep(list)); setTotal(res.data.count); } else { handleShowModal('loading', false); setdataList(lodash.cloneDeep([])); } }); setName(''); setPage({ pageNum: 1, pageSize: 10 }); }; const handleChange = e => { setName(e.target.value); }; // 获取当前站点所有已经勾选的用户新接口 const getAllCheckListNew = () => { selectList.clear(); getStationUsers({ stationId: currentStation, }).then(res => { if (res.data.length > 0) { res.data.map((item, index) => { console.log(selectList); selectList.set(`${item.userID}|${item.OUID.toString()}`, { groupId: item.OUID, groupName: item.OUName, userName: item.userName, userId: item.userID.toString(), }); }); } console.log(selectList); setUpdatePageUser(updatePageUser + 1); }); }; // 选中某个站点 const onSelect = (props, e) => { setCh(props[0]); console.log(props[0], 'props[0]'); if (!props[0]) { setCurrentStation(currentStation); } else { setCurrentStation(props[0]); } setPage({ pageNum: 1, pageSize: 10 }); if (data) { data.map((item, index) => { if (item.id == props[0]) { setDes(item.describe); } }); } }; const getValue = () => { getSiteTree({ selectNode: -1 }).then(res => { getData1(res.data); }); }; const getData1 = e => { e.map((i, j) => { a.push(i); if (i.children.length > 0) { getData1(i.children); } }); setData(a); }; // 弹出模态框 const handleShowModal = (key, value) => { setvisibleParams({ ...visibleParams, [key]: value }); }; // 获取搜索框的值 const handleSearch = value => { // setName(value); getSearchList(value); }; const confirmModal = e => { handleShowModal('modalVisible', false); updateTrees(); // setFlag(flag + 1); }; const delModal = () => { handleShowModal('delVisible', false); updateTrees(); // setFlag(flag + 1); }; const editModal = () => { handleShowModal('editVisible', false); updateTrees(); // setFlag(flag + 1); }; const addChildModal = () => { handleShowModal('addChildVisible', false); updateTrees(); // setFlag(flag + 1); }; const handleChangeCollpase = (groupId, isShow) => { let index = dataList.findIndex(item => item.groupId === groupId); if (dataList[index].children && dataList[index].children.length > 0) { setdataList(lodash.cloneDeep(dataList)); return; } handleShowModal('loading', true); getStationUserList({ stationID: currentStation, groupId }).then(res => { if (res.code === 0 && res.data) { handleShowModal('loading', false); dataList[index].children = res.data; setdataList(lodash.cloneDeep(dataList)); } }); }; // 每组全选全不选 const handleChangeAll = (e, index, groupName) => { dataList[index].isChecked = e.target.checked; setdataList(lodash.cloneDeep(dataList)); let select = selectList; dataList[index].users.forEach(item => { let datalist = item; datalist.groupName = groupName; if (e.target.checked) { select.set(`${item.userId}|${item.groupId}`, datalist); } else { select.delete(`${item.userId}|${item.groupId}`); } const indeterminateArr = indeterminate; indeterminateArr.set(item.groupId, false); setIndeterminate(lodash.cloneDeep(indeterminateArr)); }); setSelectList(lodash.cloneDeep(select)); }; // 单个选择checkbox const handleChangeSignel = (e, index, vIndex, item, groupName) => { let select = selectList; let datalist = item; datalist.groupName = groupName; if (e.target.checked) { select.set(`${item.userId}|${item.groupId}`, datalist); setSelectList(lodash.cloneDeep(select)); } else { select.delete(`${item.userId}|${item.groupId}`); setSelectList(lodash.cloneDeep(select)); } // 全选状态样式 let data = []; [...select].map(i => { if (i[1].groupId == item.groupId) { data.push(i[1]); // 分组中已选的数据 } }); console.log(data); console.log(dataList[index].users.length); const indeterminateArr = indeterminate; if (dataList[index].users.length == data.length) { indeterminateArr.set(item.groupId, false); dataList[index].isChecked = true; } else if (data.length < dataList[index].users.length && data.length != 0) { indeterminateArr.set(item.groupId, true); dataList[index].isChecked = false; } else { indeterminateArr.set(item.groupId, false); dataList[index].isChecked = false; } setIndeterminate(lodash.cloneDeep(indeterminateArr)); setdataList(lodash.cloneDeep(dataList)); }; // 删除已选列表 const handleDel = (e, item) => { let select = selectList; select.delete(item[0]); setSelectList(lodash.cloneDeep(select)); // 全选样式 let data = []; [...select].map(i => { if (i[1].groupId == item[1].groupId) { data.push(i[1]); } }); const indeterminateArr = indeterminate; [...indeterminateArr].map((i, j) => { if (i[0] == item[1].groupId) { dataList[j].isChecked = false; } }); if (data.length > 0) { indeterminateArr.set(item[1].groupId, true); } else { indeterminateArr.set(item[1].groupId, false); } setdataList(lodash.cloneDeep(dataList)); setIndeterminate(lodash.cloneDeep(indeterminateArr)); }; // 提交 const handleCommitBtn = () => { handleShowModal('btnLoading', true); let result = []; let aa = selectList; [...aa].map(i => { console.log(i[1].userId); result.push(i[1].userId); }); // 数据处理成后台需要的格式 if (result.length === 0) return notification.warning({ message: '提示', description: '请至少选择选择一个用户!', }); chooseUserToStation({ userList: String(result.flat()), stationID: currentStation, }) .then(res => { handleShowModal('btnLoading', false); if (res.code === 0) { setUpdateCheck(updateCheck + 1); notification.success({ message: '提示', duration: 3, description: '设置成功', }); } else { notification.error({ message: '提示', duration: 15, description: res.msg, }); } }) .catch(err => { handleShowModal('btnLoading', false); }); }; // 分页 const handleChangePage = (pageNum, pageSize) => { setPage({ pageNum, pageSize }); setUpdatePageUser(updatePageUser + 1); }; /** ***操作按钮**** */ // 机构操作 const addTopStation = () => { handleShowModal('modalVisible', true); }; // 模糊查询匹配的样式 const searchStyle = val => { let n; if (showSearchStyle) { n = val.replace(new RegExp(name, 'g'), `<span style='color:red'>${name}</span>`); } else { n = val; } return <div dangerouslySetInnerHTML={{ __html: n }} />; }; // 返回拖拽完毕后的信息 const loop = (datas, key, parentID, callback) => { for (let i = 0; i < datas.length; i++) { if (datas[i].id === key) { return callback(datas[i], i, datas, parentID); } if (datas[i].children) { loop(datas[i].children, key, datas[i].id, callback); } } }; // 树的拖拽 const handleDrop = infos => { const dropKey = infos.node.key; const dragKey = infos.dragNode.key; const dropPos = infos.node.pos.split('-'); const dropPosition = infos.dropPosition - Number(dropPos[dropPos.length - 1]); const datas = JSON.parse(JSON.stringify(treeData)); // 找到拖拽的元素 let dragObj; let dropObj; let parId; let dragList; // 保存拖拽到的节点信息 loop(datas, dropKey, -1, item => { dropObj = item; }); // 保存节点信息并删除节点 loop(datas, dragKey, -1, (item, index, arr) => { arr.splice(index, 1); dragObj = item; }); // 将节点插入到正确的位置 if (!infos.dropToGap) { dropObj.children = dropObj.children || []; // 在哪里插入,示例添加到头部,可以是随意位置 dropObj.children.unshift(dragObj); parId = dropObj.id; dragList = dropObj.children.map(val => val.id); } else { let ar; let i; loop(datas, dropKey, -1, (item, index, arr, parentID) => { ar = arr; i = index; parId = parentID; }); if (dropPosition === -1) { ar.splice(i, 0, dragObj); } else { ar.splice(i + 1, 0, dragObj); } dragList = ar.map(ele => ele.id); } DragGroup({ dragGroupType: 3, groupId: dragKey.toString(), groupList: dragList.map(item => item.toString()), parentId: parId.toString(), }).then(res => { if (res.code === 0) { updateTrees(); } else { message.error(res.msg); } }); }; const Panels = React.memo(props => { let { index, groupId, groupName, users, isChecked, isShow, color, item } = props; return ( <div className={styles.sitePanel} key={groupId} id={`siteId${groupId}`}> {/* onClick={() => props.handleChangeCollpase(GroupId, isShow)} */} <div className={styles.sitePanelHead}> {/* {isShow ? ( <UpOutlined className={styles.siteIcon} /> ) : ( <DownOutlined className={styles.siteIcon} /> )} */} {/* <UpOutlined className={styles.siteIcon} /> */} <ApartmentOutlined className={styles.siteIcon} /> {searchStyle(groupName)} <Checkbox key="0" className={styles.siteListTitle} checked={isChecked} indeterminate={indeterminate.get(groupId)} onClick={e => props.handleChangeAll(e, index, groupName)} > 全选 </Checkbox> </div> <div className={styles.sitePanelCon}> {users.length > 0 && users.map((v, vIndex) => ( <CheckBoxRow {...v} item={v} groupName={groupName} index={index} vIndex={vIndex} key={v.userId} selectList={selectList} handleChangeSignel={props.handleChangeSignel} /> ))} </div> </div> ); }); const onSearch = value => { setSearchTreeValue(value); updateTrees(value); }; return ( <PageContainer className={styles.siteManageContainer}> <div className={styles.contentContainer}> <Spin spinning={treeLoading} tip="loading..."> <Card className={classnames({ [styles.orgContainer]: true, [styles.orgContainerHide]: !treeVisible, })} > <span style={{ margin: '0 187px 0 7px', fontSize: '15px ', fontWeight: 'bold' }}> 站点列表 </span> <Tooltip title="添加顶级站点"> <PlusSquareFilled onClick={() => addTopStation()} style={{ color: '#1890FF', fontSize: '25px', }} /> </Tooltip> <hr style={{ width: '97%', color: '#eeecec', marginLeft: '8px' }} /> <Search style={{ marginBottom: 8, width: '98%', marginLeft: '7px', }} placeholder="快速搜索站点" onSearch={onSearch} /> {searchTreeValue !== '' ? ( <> {treeData.length > 0 && ( <div style={{ height: '100%', overflowY: 'scroll' }}> <Tree showIcon="true" showLine={{ showLeafIcon: false }} blockNode defaultExpandAll selectedKeys={[currentStation]} onSelect={onSelect} treeData={treeData.map(t => mapTree(t))} draggable onDrop={handleDrop} keepTree={keepTree} /> </div> )} </> ) : ( <> {treeData.length > 0 && ( <div style={{ height: '100%', overflowY: 'scroll' }}> <TreeComponents showIcon="true" showLine={{ showLeafIcon: false }} blockNode autoExpandParent selectedKeys={[currentStation]} onSelect={onSelect} treeData={treeData.map(t => mapTree(t))} expandedKeys={treeData[0].id} draggable onDrop={handleDrop} keepTree={keepTree} /> </div> )} </> )} <div className={styles.switcher}> {treeVisible && ( <Tooltip title="隐藏站点列表"> <DoubleLeftOutlined onClick={() => setTreeVisible(false)} /> </Tooltip> )} {!treeVisible && ( <Tooltip title="显示站点列表"> <DoubleRightOutlined onClick={() => setTreeVisible(true)} /> </Tooltip> )} </div> </Card> </Spin> {/* 右侧用户表 */} <div className={classnames({ [styles.userContainer]: true, [styles.userContainerHide]: !treeVisible, })} > <AddModal visible={visibleParams.modalVisible} onCancel={() => handleShowModal('modalVisible', false)} confirmModal={confirmModal} /> <AddChildModal visible={visibleParams.addChildVisible} pid={currentStation} onCancel={() => handleShowModal('addChildVisible', false)} confirmModal={addChildModal} /> <DelModal visible={visibleParams.delVisible} stationId={currentStation} onCancel={() => handleShowModal('delVisible', false)} confirmModal={delModal} /> <EditModal visible={visibleParams.editVisible} stationObj={currentStationMsg} des={des} onCancel={() => handleShowModal('editVisible', false)} confirmModal={editModal} /> <div className={classnames({ [styles.boxR]: true, [styles.boxH]: treeVisible, })} > <Card className={classnames({ [styles.cardBoxTop]: true, [styles.boxH]: treeVisible, })} > <Search style={{ width: 260 }} allowClear placeholder={placeholder} onSearch={handleSearch} value={name} onChange={e => handleChange(e)} enterButton /> <Button onClick={restButton}>重置</Button> </Card> <div style={{ background: '#fff', height: 'calc(100% - 64px)', paddingBottom: '10px' }}> <Spin spinning={checkLoading} tip="loading..."> <Card className={classnames({ [styles.boxH]: treeVisible, [styles.cardBoxR]: true, })} > <div style={{ display: 'flex', flexDirection: 'column ', height: '100%', }} > {/* <Checkbox className={styles.siteAll}>全选/反选</Checkbox> */} {dataList.length > 0 && !visibleParams.loading ? ( <> <p className={styles.siteline}>已选择列表:</p> <div className={styles.siteSelectList} style={{ height: selectedState ? '1200px' : '220px', transition: 'height 0.5s', }} > <ul className={styles.siteSelectUl}> {[...selectList].map((item, index) => ( <li key={`${item.userName}${item.groupId}${index}`} onClick={e => handleDel(e, item)} >{`${item[1].userName}(${item[1].groupName})`}</li> ))} </ul> </div> <div style={{ textAlign: 'center', margin: '10px 0' }}> <Tooltip title="收起"> <CaretUpOutlined style={{ fontSize: '20px', color: '#178BF6', display: selectedState ? 'block' : 'none', }} onClick={() => setSelectedState(false)} /> </Tooltip> <Tooltip title="展开"> <CaretDownOutlined style={{ fontSize: '20px', color: '#178BF6', display: selectedState ? 'none' : 'block', }} onClick={() => setSelectedState(true)} /> </Tooltip> </div> <div className={styles.siteBtn}> <Button type="primary" className={styles.siteCommit} onClick={handleCommitBtn} > 提交 </Button> </div> </> ) : ( <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> )} <div style={{ overflowY: 'scroll', flexGrow: '1', }} > {dataList.map((item, index) => ( <Panels {...item} index={index} key={item.groupId} handleChangeCollpase={handleChangeCollpase} handleChangeAll={handleChangeAll} handleChangeSignel={handleChangeSignel} item={item} /> ))} </div> </div> </Card> </Spin> {dataList.length > 0 && !visibleParams.loading ? ( <div style={{ textAlign: 'right', marginTop: '25px' }}> <Pagination size="small" total={total} current={page.pageNum} defaultPageSize="10" onChange={handleChangePage} pageSizeOptions={['10']} /> </div> ) : ( '' )} </div> </div> </div> </div> </PageContainer> ); }; const CheckBoxRow = props => { let { vIndex, index, isChecked, userName, item, selectList, groupName } = props; return ( <Checkbox className={styles.siteList} checked={selectList.size > 0 && selectList.has(`${item.userId}|${item.groupId}`)} onClick={e => props.handleChangeSignel(e, index, vIndex, item, groupName)} > {userName} </Checkbox> ); }; export default SiteManageV2;