import React, { useState, useEffect } from 'react'; import { Row, Col, Card, Input, Spin, notification, Button, Tooltip, Space, Empty, message, Tabs, Tree, } from 'antd'; import TreeComponents from '@/components/ExpendableTree'; import PageContainer from '@/components/BasePageContainer'; import { DoubleLeftOutlined, DoubleRightOutlined, BarsOutlined, UserOutlined, DesktopOutlined, MobileOutlined, FolderAddTwoTone, PlusSquareOutlined, FormOutlined, EditOutlined, DeleteOutlined, UserAddOutlined, WindowsOutlined, IeOutlined, InfoCircleOutlined, } from '@ant-design/icons'; import { setMenuToRole, getRoleGroupList, getMenuByRoleWithLevel, DragGroup, getWebConfigTypes, } from '@/services/RoleManage/api'; import ListCard, { checkChildrenByCondition, getId } from '@/components/CheckGroup'; // import ListCard from '@/pages/orgnazation/ListCard'; import qs from 'qs'; import classnames from 'classnames'; import styles from '@/pages/userCenter/roleManage/RoleManage.less'; import AddModal from './AddModal'; import DelModal from './DelModal'; import EditModal from './EditModal'; import EditGroup from './EditGroup'; import userStyles from '@/pages/userCenter/userManage/UserManage.less'; import iconStyles from '@/assets/font/omsfont/iconfont.css'; import SelectUser from './SelectUser/SelectUser'; import NewSelectUser from './SelectUser/NewSelectUser'; import OpePermissions from './SelectUser/OpePermissions'; import { data } from '@/pages/platformCenter/messageManage/projectManage/components/Mock'; const { Search } = Input; const placeholder = '请输入功能名称'; const { TabPane } = Tabs; const SiteManage = () => { const [treeData, setTreeData] = useState([]); const [searchWord, setSearchWord] = useState(''); const [roleID, setRoleID] = useState(''); // 角色ID const [saveTreeId, setSaveTreeId] = useState(''); // 保存点击回调的roleid const [modalVisible, setModalVisible] = useState(false); // 新增弹窗 const [flag, setFlag] = useState(1); const [flagSearch, setFlagSearch] = useState(0); const [itemObj, setItemObj] = useState(''); // 选择的角色item const [delVisible, setDelVisible] = useState(false); // 删除弹窗 const [editVisible, setEditVisible] = useState(false); // 修改弹窗 const [subList, setSubList] = useState([]); // 选中的数组 const [spinLoading, setSpinLoading] = useState(false); const [currentSelectId, setCurrentSelectId] = useState([]); // 选中的树节点 const [saveCurId, setSaveCurId] = useState([]); // 树节点ID const [groupVisible, setGroupVisible] = useState(false); // 分组编辑弹窗 const [userVisible, setUserVisible] = useState(false); // 用户关联弹窗 const [userNewVisible, setUserNewVisible] = useState(false); // 用户关联弹窗 const [hasData, setHasData] = useState(false); const [valueList, setValueList] = useState([]); const [dataList, setdataList] = useState([]); const [loading, setLoading] = useState(true); const [btnLoading, setBtnLoading] = useState(false); const [mulu, setMulu] = useState(true); // 展示目录 const [siteList, setSiteList] = useState([]); const [disFlag, setDisFlag] = useState(false); const [chileID, setChildID] = useState([]); const [descrip, setDescrip] = useState('当前未选中角色'); const [keepTree, setKeepTree] = useState([]); const [keyValue, setKeyValue] = useState('0'); const [keepTreeData, setKeepTreeData] = useState([]); const [searchTreeValue, setSearchTreeValue] = useState(''); // const [childData, setChildData] = useState({visibleValue:''}) const [operation, setOperation] = useState(false); // 点击树的回调 const handleTreeSelect = (e, treenode) => { setSearchWord(''); if (treenode) { const { node } = treenode; const { roleID: id } = node; setItemObj(node); if (node.BuiltInRole) { setKeyValue('0'); } setUserNewVisible(true); if (id) { if (node.subSystemValue === 'view') { setOperation(true); } else { setOperation(false); } setSaveTreeId(id); setRoleID(id); setFlagSearch(1); setValueList([...valueList]); console.log([...valueList]); } else { if (node.visibleValue === 'view') { setOperation(true); } else { setOperation(false); } // setRoleID(saveTreeId); setRoleID(''); setDescrip('当前未选中角色'); setFlagSearch(0); } } if (e[0]) { setCurrentSelectId(e); setSaveCurId(e); } else { setCurrentSelectId(saveCurId); } }; useEffect(() => { getRoleGroup(); }, []); // 获取角色菜单树 const getRoleGroup = () => { setSpinLoading(true); getRoleGroupList({ userID: '1' }).then(res => { setSpinLoading(false); if (res.code === 0) { const { roleList } = res.data; let list = [...roleList]; list.map((i, j) => { if (i.visibleTitle.indexOf('手持') !== -1 && i.type !== 'mobile') { list.splice(j, 1); list.push(i); } }); setKeepTreeData([...list]); let arr = transTree(JSON.parse(JSON.stringify(list)), ''); setTreeData(arr); let aa = []; arr.forEach(i => { aa.push(i.visibleValue); }); setKeepTree(aa); } }); }; useEffect(() => { console.log('进入'); if (!roleID) return; console.log('选择后'); setLoading(true); const defaultConfig = { optionsList: [], title: '默认组', id: '', }; getMenuByRoleWithLevel({ roleID: itemObj.roleID, subSystemValue: itemObj.subSystemValue, subSystemName: itemObj.subSystemValue, }) .then(res => { const list = []; // eslint-disable-next-line no-unused-expressions res.code === 0 && res.data.root.forEach(item => { list.push({ ...defaultConfig, ...item }); }); console.log(list); setdataList(list); setValueList( list .map(l => checkChildrenByCondition( l, it => (it.isChecked ? [getId(it)] : []), true, 'map', ).flat(Infinity), ) .flat(Infinity) .filter(Boolean), ); console.log(valueList); setLoading(false); }) .catch(err => { setLoading(false); }); }, [roleID]); const handleAdd = e => { setModalVisible(true); }; // 角色删除 const handleDel = e => { setDelVisible(true); }; // 编辑角色 const handleEdit = e => { setEditVisible(true); }; // 分组编辑 const groupEdit = () => { setGroupVisible(true); }; // 树形数据转换; const transTree = (val, search) => { let arr = val; console.log(arr); let newArr = []; // 提取child里面的数组 let arr2 = arr.filter(item => { if (item.child && item.child.length > 0) { item.child.forEach(itemC => { item.roleList.unshift(itemC); }); } // if (item.visibleTitle === '手持系统') { // item.icon = <span className="iconfont iconanzhuo1" />; // newArr[0] = item; // } if (item.type === 'mobile') { item.icon = <MobileOutlined />; // newArr[0] = item; } else if (item.visibleValue == 'CS') { item.icon = <WindowsOutlined />; } else { if (item.visibleTitle.indexOf('手持') !== -1) { item.icon = <MobileOutlined />; } else { item.icon = <DesktopOutlined />; } } return ( item.visibleTitle !== '其它角色' && item.visibleTitle !== '运维管理' && item.visibleTitle !== '小程序' ); }); arr2 = arr2.concat(newArr); let arr3 = arr2.map(item => { if (item.visibleTitle === '小程序') { item.visibleTitle = '移动应用'; } item.title = item.visibleTitle || ''; item.key = item.visibleValue || ''; if (item.roleList && item.roleList.length > 0) { item.roleList.map((itemRole, index) => { if (itemRole.roleList) { itemRole.title = itemRole.visibleTitle || ''; itemRole.key = itemRole.visibleTitle + itemRole.visibleValue || ''; itemRole.groupflag = itemRole.visibleTitle; itemRole.icon = <BarsOutlined />; itemRole.roleList.map(i => { i.title = i.roleName; const indexsearch = i.title.indexOf(search); const beforeStr = i.title.substring(0, indexsearch); const afterStr = i.title.slice(indexsearch + search.length); i.title = ( <div className={styles.title}> {i.title.includes(search) && search != '' ? ( <div className={styles.titleTop}> {beforeStr} <span className={styles.titleSearch}>{search}</span> {afterStr} </div> ) : ( <div className={styles.titleTop}> {i.title} {i.description && ( <Tooltip title={i.description}> <InfoCircleOutlined style={{ color: 'rgb(24, 144, 255)', marginLeft: '5px', marginTop: '3px', }} /> </Tooltip> )} </div> )} <div className={styles.tip}> {i.roleID && ( <> <Tooltip title="编辑角色" className={styles.fs}> <FormOutlined style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }} onClick={e => editorUser(e, i)} /> </Tooltip> {!i.BuiltInRole && ( <Tooltip title="删除角色" className={styles.fs}> <DeleteOutlined style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }} onClick={e => deletesUser(e, i)} /> </Tooltip> )} {/* <Tooltip title="关联用户" className={styles.fs}> <UserAddOutlined style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }} onClick={e => relevancyUser(e, i)} /> </Tooltip> */} </> )} {!i.roleID && ( <Tooltip title="新增角色" className={styles.fs}> <PlusSquareOutlined style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }} onClick={e => addsUser(e, i)} /> </Tooltip> )} {i.groupflag && ( <Tooltip title="编辑分组" className={styles.fs}> <EditOutlined style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }} onClick={e => editorGroup(e, i)} /> </Tooltip> )} </div> </div> ); i.key = i.roleID; i.subSystemValue = item.visibleValue; i.group = itemRole.visibleTitle; console.log(i.BuiltInRole); if (i.BuiltInRole === true) { i.icon = <UserOutlined style={{ color: '#dfb14b' }} />; } else { i.icon = <UserOutlined />; } if (roleID && roleID === i.roleID) { setItemObj(i); // setCurrentSelectId(roleID); } }); itemRole.children = itemRole.roleList; } else { itemRole.title = itemRole.roleName; itemRole.key = itemRole.roleID; itemRole.subSystemValue = item.visibleValue; if (itemRole.BuiltInRole === true) { itemRole.icon = <UserOutlined style={{ color: '#dfb14b' }} />; } else { itemRole.icon = <UserOutlined />; } if (roleID && roleID === itemRole.roleID) { setItemObj(itemRole); // setCurrentSelectId(roleID); } } const indexsearch = itemRole.title.indexOf(search); const beforeStr = itemRole.title.substring(0, indexsearch); const afterStr = itemRole.title.slice(indexsearch + search.length); itemRole.title = ( <div className={styles.title}> {itemRole.title.includes(search) && search != '' ? ( <div className={styles.titleTop}> {beforeStr} <span className={styles.titleSearch}>{search}</span> {afterStr} </div> ) : ( <div className={styles.titleTop}> {itemRole.title} {itemRole.description && ( <Tooltip title={itemRole.description}> <InfoCircleOutlined style={{ color: 'rgb(24, 144, 255)', marginLeft: '5px', marginTop: '3px' }} /> </Tooltip> )} </div> )} <div className={styles.tip}> {itemRole.roleID && ( <> <Tooltip title="编辑角色" className={styles.fs}> <FormOutlined style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }} onClick={e => editorUser(e, itemRole)} /> </Tooltip> {!itemRole.BuiltInRole && ( <Tooltip title="删除角色" className={styles.fs}> <DeleteOutlined style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }} onClick={e => deletesUser(e, itemRole)} /> </Tooltip> )} {/* <Tooltip title="关联用户" className={styles.fs}> <UserAddOutlined style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }} onClick={e => relevancyUser(e, itemRole)} /> </Tooltip> */} </> )} {!itemRole.roleID && ( <Tooltip title="新增角色" className={styles.fs}> <PlusSquareOutlined style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }} onClick={e => addsUser(e, itemRole)} /> </Tooltip> )} {itemRole.groupflag && ( <Tooltip title="编辑分组" className={styles.fs}> <EditOutlined style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }} onClick={e => editorGroup(e, itemRole)} /> </Tooltip> )} </div> </div> ); return itemRole; }); } item.children = item.roleList; item.title = ( <div className={styles.title}> <div className={styles.titleTop}>{item.title}</div> <div className={styles.tip}> {item.roleID && ( <> <Tooltip title="编辑角色" className={styles.fs}> <FormOutlined style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }} onClick={e => editorUser(e, item)} /> </Tooltip> {!item.BuiltInRole && ( <Tooltip title="删除角色" className={styles.fs}> <DeleteOutlined style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }} onClick={e => deletesUser(e, item)} /> </Tooltip> )} {/* <Tooltip title="关联用户" className={styles.fs}> <UserAddOutlined style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }} onClick={e => relevancyUser(e, item)} /> </Tooltip> */} </> )} {!item.roleID && ( <Tooltip title="新增角色" className={styles.fs}> <PlusSquareOutlined style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }} onClick={e => addsUser(e, item)} /> </Tooltip> )} {item.groupflag && ( <Tooltip title="编辑分组" className={styles.fs}> <EditOutlined style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }} onClick={e => editorGroup(e, item)} /> </Tooltip> )} </div> </div> ); return item; }); return arr3; }; // 编辑角色 const editorUser = (e, record) => { console.log(e); e.stopPropagation(); setItemObj(record); setEditVisible(true); }; // 删除角色 const deletesUser = (e, record) => { e.stopPropagation(); setItemObj(record); setDelVisible(true); }; // 关联用户 const relevancyUser = (e, record) => { e.stopPropagation(); setItemObj(record); setUserVisible(true); }; // 编辑分组 const editorGroup = (e, record) => { e.stopPropagation(); setItemObj(record); setGroupVisible(true); }; // 新增角色 const addsUser = (e, record) => { e.stopPropagation(); setItemObj(record); setModalVisible(true); }; const handleChange = e => { const { value } = e.target; setSearchWord(value); }; // 确认回调 const confirmModal = e => { setModalVisible(false); // setRoleID(`${e}`); // setCurrentSelectId([`${e}`]); // setFlag(flag + 1); getRoleGroup(); setItemObj(''); }; // 删除弹窗回调 const delModal = () => { setDelVisible(false); // setFlag(flag + 1); getRoleGroup(); setRoleID(''); setItemObj(''); }; // 编辑弹窗回调 const editModal = prop => { getRoleGroup(); let aa = itemObj; aa.BuiltInRole = prop; setItemObj(aa); if (itemObj.roleID === currentSelectId[0]) { if (prop == true) { setRoleID(currentSelectId); setFlagSearch(1); } else { setRoleID(currentSelectId); setFlagSearch(1); } } // setItemObj(''); }; // 分组编辑回调 const groupModal = () => { setGroupVisible(false); // setFlag(flag + 1); getRoleGroup(); setItemObj(''); handleTreeSelect(saveCurId); }; const userModal = () => { setUserVisible(false); // setFlag(flag + 1); getRoleGroup(); setItemObj(''); handleTreeSelect(saveCurId); }; const userNewModal = () => { setUserNewVisible(false); // setFlag(flag + 1); // getRoleGroup(); // setItemObj(''); handleTreeSelect(saveCurId); }; const valueCallback = valueObj => { setSubList(valueObj); }; const handleHide = () => { setMulu(!mulu); }; const handleCommit = results => { setBtnLoading(true); setMenuToRole({ roleID: Number(roleID), menuIdList: String(results.flat()), }) .then(res => { setBtnLoading(false); if (res.code === 0) { setValueList([...results.flat()]); notification.success({ message: '提示', duration: 3, description: '设置成功', }); } else { notification.error({ message: '提示', duration: 15, description: res.msg, }); } }) .catch(err => { setBtnLoading(false); }); }; const handleUserAttach = () => { setUserVisible(true); }; // 返回拖拽完毕后的信息 const loop = (datas, key, parentID, callback) => { for (let i = 0; i < datas.length; i++) { if (datas[i].key === key) { return callback(datas[i], i, datas, parentID); } if (datas[i].children) { loop(datas[i].children, key, datas[i].key, callback); } } }; // 树的拖拽 const handleDrop = infos => { console.log(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 id; let dragList; let canDrop = false; // 保存拖拽到的节点信息 loop(datas, dropKey, -1, (item, index, arr) => { // 拖拽节点的下一个节点是否是菜单组 if (arr[index + 1] && !arr[index + 1].groupflag) { canDrop = true; } if (index + 1 === arr.length) { canDrop = true; } dropObj = item; }); // 保存节点信息并删除节点 loop(datas, dragKey, -1, (item, index, arr) => { arr.splice(index, 1); dragObj = item; }); console.log(dragObj, 'dragObj'); console.log(dropObj, 'dropObj'); // 最外层菜单组不允许拖拽 if (!dragObj.groupflag && !dragObj.subSystemValue) { return; } // 不允许拖拽到子菜单下 if (dropObj.subSystemValue && !infos.dropToGap) { console.log('不允许拖拽到子菜单下'); return; } // 子菜单不能跨站点拖拽 if ( dragObj.subSystemValue && dropObj.subSystemValue && dropObj.subSystemValue !== dragObj.subSystemValue ) { console.log('子菜单不能跨站点拖拽'); return; } if ( dragObj.subSystemValue && dropObj.visibleValue && dropObj.visibleValue !== dragObj.subSystemValue ) { console.log('子菜单不能跨站点拖拽'); return; } // 二级单组不能拖拽 if (dragObj.groupflag) { console.log('二级单组不能拖拽'); return; } // 将节点插入到正确的位置 if (!infos.dropToGap) { // 插入到第一个子节点 // 子菜单不能拖拽到二级菜单组上方 if (dropObj.roleList[0] && dropObj.roleList[0].groupflag) { return; } dropObj.children = dropObj.children || []; // 在哪里插入,示例添加到头部,可以是随意位置 dropObj.children.unshift(dragObj); if (dropObj.groupflag) { id = dropObj.visibleTitle; } else { id = ''; } dragList = dropObj.children.map(val => { if (!val.groupflag) { return val.key; } }); } else { if (!canDrop) { return; } // 子菜单组不能拖拽到子菜单组下 if (dragObj.groupflag && dropObj.subSystemValue) { return; } let ar; let i; loop(datas, dropKey, -1, (item, index, arr, parentID) => { ar = arr; i = index; if (item.group) { id = item.group; } else { id = ''; } }); if (dropPosition === -1) { ar.splice(i, 0, dragObj); } else { ar.splice(i + 1, 0, dragObj); } dragList = ar.filter(val => !val.groupflag).map(ele => ele.key); } DragGroup({ dragGroupType: 1, groupId: dragKey, groupList: dragList, MiniAppGroupName: id, }).then(res => { if (res.code === 0) { getRoleGroup(); if (infos.dragNode.roleID == itemObj.roleID) { if (id == '系统分组') { setRoleID(''); setDescrip('系统分组下的角色不可配置菜单权限'); setFlagSearch(0); } else { setRoleID(infos.dragNode.roleID); setFlagSearch(1); } } } }); }; const handleParChange = key => { setKeyValue(key); const { roleID: id } = itemObj; if (id) { setRoleID(id); setFlagSearch(1); } else { setRoleID(''); setDescrip('当前未选中角色'); setFlagSearch(0); } }; const onSearch = value => { setSearchTreeValue(value); if (value !== '') { let data = getNewData(JSON.parse(JSON.stringify(keepTreeData)), value); let lastdata = JSON.parse(JSON.stringify(data)); lastdata.map(i => { if (i.child.length > 0) { i.child = i.child.filter(ele => ele.roleList.length > 0); } }); let last = lastdata.filter(ele => ele.roleList.length > 0 || ele.child.length > 0); let arr = transTree(JSON.parse(JSON.stringify(last)), value); setTreeData(arr); } else { let arr = transTree(JSON.parse(JSON.stringify(keepTreeData)), ''); setTreeData(arr); } }; // 获取搜索tree数据 const getNewData = (treedata, value) => { treedata.map(i => { if (i.roleList.length > 0) { i.roleList = i.roleList.filter(ele => ele.roleName.includes(value)); } if (i.child.length > 0) { i.child.map(j => { j.roleList = j.roleList.filter(ele => ele.roleName.includes(value)); }); } }); return treedata; }; return ( <PageContainer> <div className={classnames({ [styles.content]: true, })} > <Spin tip="loading...." spinning={spinLoading} // style={{ margin: '20px auto ', display: 'block' }} > <Card className={classnames({ [styles.cardBox]: true, [styles.hideBox]: !mulu, })} > <div style={{ marginLeft: '6px' }}> <span style={{ fontSize: '15px ', fontWeight: 'bold', }} > 选择角色 </span> </div> <hr style={{ width: '95%', color: '#eeecec' }} /> <Search style={{ marginBottom: 8, width: '95%', marginLeft: '7px', }} placeholder="快速搜索角色" onSearch={onSearch} /> {searchTreeValue !== '' ? ( <> {treeData && treeData.length > 0 && ( <div style={{ height: 'calc(100% - 60px)', overflowY: 'scroll' }}> <Tree showIcon onSelect={handleTreeSelect} defaultExpandAll treeData={treeData} selectedKeys={currentSelectId} blockNode draggable onDrop={handleDrop} keepTree={keepTree} // setExpendKey={expendKey} /> </div> )} </> ) : ( <> {treeData && treeData.length > 0 && ( <div style={{ height: 'calc(100% - 60px)', overflowY: 'scroll' }}> <TreeComponents showIcon onSelect={handleTreeSelect} autoExpandParent treeData={treeData} selectedKeys={currentSelectId} blockNode draggable onDrop={handleDrop} keepTree={keepTree} // setExpendKey={expendKey} /> </div> )} </> )} <AddModal visible={modalVisible} onCancel={() => setModalVisible(false)} itemObj={itemObj} confirmModal={confirmModal} siteList={siteList} /> <DelModal visible={delVisible} itemObj={itemObj} onCancel={() => setDelVisible(false)} confirmModal={delModal} /> <EditModal visible={editVisible} itemObj={itemObj} onCancel={() => setEditVisible(false)} confirmModal={editModal} /> <EditGroup visible={groupVisible} itemObj={itemObj} onCancel={() => setGroupVisible(false)} confirmModal={groupModal} /> {/* <UserModal visible={userVisible} itemObj={itemObj} onCancel={() => setUserVisible(false)} confirmModal={userModal} /> */} <SelectUser visible={userVisible} itemObj={itemObj} onCancel={() => setUserVisible(false)} confirmModal={userModal} /> <div className={styles.switcher}> {mulu && ( <Tooltip title="隐藏角色栏" className={styles.hide}> <DoubleLeftOutlined onClick={() => handleHide()} style={{ marginLeft: '-5px' }} /> </Tooltip> )} {!mulu && ( <Tooltip title="显示角色栏" className={styles.hide}> <DoubleRightOutlined onClick={() => handleHide()} /> </Tooltip> )} </div> </Card> </Spin> <div className={classnames({ [styles.boxR]: true, [styles.boxH]: mulu, })} > <Card> <Tabs style={{ marginTop: '-14px' }} activeKey={keyValue} onChange={handleParChange}> <TabPane tab="关联用户" key="0"> {roleID ? ( <div className={styles.cardBoxRNew}> <NewSelectUser visible={userNewVisible} itemObj={itemObj} onCancel={() => setUserNewVisible(false)} confirmModal={userNewModal} /> </div> ) : ( <div className={styles.cardBoxH}> <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={descrip} /> </div> )} </TabPane> {!itemObj.BuiltInRole && ( <TabPane tab="菜单权限" key="1"> {flagSearch == 1 ? ( <Search style={{ width: 260 }} allowClear value={searchWord} placeholder={placeholder} // onSearch={handleSearch} onChange={handleChange} enterButton /> ) : ( <span /> )} {roleID ? ( <div className={styles.cardBoxR}> <ListCard roleID={roleID} loading={loading} checkList={valueList} dataList={dataList} searchWord={searchWord} onCommit={handleCommit} btnLoading={btnLoading} hasData={hasData} /> </div> ) : ( <div className={styles.cardBoxH}> <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={descrip} /> </div> )} </TabPane> )} {operation && ( <TabPane tab="操作权限" key="2"> {roleID ? ( <div className={styles.cardBoxRNew}> <OpePermissions visible={userNewVisible} itemObj={itemObj} onCancel={() => setUserNewVisible(false)} confirmModal={userNewModal} roleID={roleID} /> </div> ) : ( <div className={styles.cardBoxH}> <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={descrip} /> </div> )} </TabPane> )} {/* <TabPane tab="菜单权限优化" key="2"> {roleID ? ( <div className={styles.cardBoxR} /> ) : ( <div className={styles.cardBoxH}> <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={descrip} /> </div> )} </TabPane> */} </Tabs> </Card> </div> </div> </PageContainer> ); }; export default SiteManage;