import React, { useState, useEffect } from 'react'; import { Row, Col, Card, Input, Spin, notification, Button, Tooltip, Space, Empty, } from 'antd'; import Tree from '@/components/ExpendableTree'; import PageContainer from '@/components/BasePageContainer'; import { DoubleLeftOutlined, DoubleRightOutlined, BarsOutlined, UserOutlined, DesktopOutlined, MobileOutlined, } from '@ant-design/icons'; import { setMenuToRole, getRoleGroupList, getMenuByRoleWithLevel, getWebConfigTypes, } from '@/services/userCenter/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'; const { Search } = Input; const placeholder = '请输入功能名称'; 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 [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 [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 handleTreeSelect = (e, treenode) => { if (treenode) { console.log(e, node, 'node'); const { node } = treenode; const { roleID: id } = node; setItemObj(node); if (id) { setSaveTreeId(id); setRoleID(id); setValueList([...valueList]); } else { setRoleID(saveTreeId); } } if (e[0]) { setCurrentSelectId(e); setSaveCurId(e); } else { setCurrentSelectId(saveCurId); } }; useEffect(() => { setSpinLoading(true); getRoleGroupList({ userID: '1' }).then(res => { setSpinLoading(false); if (res.code === 0) { const { roleList } = res.data; let arr = transTree(roleList); setTreeData(arr); } }); return () => { setItemObj(''); }; }, [flag]); const buildMap = list => { const mapObj = { type: 'widgetGroup', searchWord, children: list.filter(l => l.type === 'widgetUIPage'), text: '地图组件', itemid: '9999', }; return list.some(l => l.type === 'widgetUIPage') ? [mapObj, ...list.filter(l => l.type !== 'widgetUIPage')] : list; }; useEffect(() => { if (!roleID) return; setLoading(true); const defaultConfig = { optionsList: [], title: '默认组', id: '', }; getMenuByRoleWithLevel({ roleID: itemObj.roleID, subSystemValue: itemObj.subSystemValue, subSystemName: itemObj.subSystemValue, _version: 9999, _dc: new Date().getTime(), }) .then(res => { const list = []; // eslint-disable-next-line no-unused-expressions res.success && res.root.forEach(item => { list.push({ ...defaultConfig, ...item }); }); const finalList = buildMap(list); setdataList(finalList); setValueList( finalList .map(l => checkChildrenByCondition( l, it => (it.isChecked ? [getId(it)] : []), true, 'map', ).flat(Infinity), ) .flat(Infinity) .filter(Boolean), ); 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 => { let arr = val; let newArr = []; let arr2 = arr.filter(item => { if (item.child && item.child.length > 0) { item.child.forEach(itemC => { item.roleList.unshift(itemC); }); } console.log(iconStyles); // if (item.visibleTitle === '手持系统') { // item.icon = <span className="iconfont iconanzhuo1" />; // newArr[0] = item; // } if (item.type === 'mobile') { item.icon = <MobileOutlined />; // newArr[0] = item; } else { item.icon = <DesktopOutlined />; } return ( item.visibleTitle !== '其它角色' && 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; i.key = i.roleID; i.subSystemValue = item.visibleValue; i.group = itemRole.visibleTitle; i.icon = <UserOutlined />; if (roleID && roleID === i.roleID) { console.log(roleID, typeof roleID, 'roleID'); setItemObj(i); // setCurrentSelectId(roleID); } }); itemRole.children = itemRole.roleList; } else { itemRole.title = itemRole.roleName; itemRole.key = itemRole.roleID; itemRole.subSystemValue = item.visibleValue; itemRole.icon = <UserOutlined />; if (roleID && roleID === itemRole.roleID) { console.log(roleID, typeof roleID, 'roleID'); setItemObj(itemRole); // setCurrentSelectId(roleID); } } return itemRole; }); } item.children = item.roleList; return item; }); return arr3; }; const handleChange = e => { const { value } = e.target; setSearchWord(value); }; // 确认回调 const confirmModal = e => { console.log(e, typeof e, 'e'); setModalVisible(false); setRoleID(`${e}`); setCurrentSelectId([`${e}`]); setFlag(flag + 1); setItemObj(''); }; // 删除弹窗回调 const delModal = () => { setDelVisible(false); setFlag(flag + 1); setItemObj(''); }; // 编辑弹窗回调 const editModal = () => { setEditVisible(false); setFlag(flag + 1); handleTreeSelect(saveCurId); // setItemObj(''); }; // 分组编辑回调 const groupModal = () => { setGroupVisible(false); setFlag(flag + 1); setItemObj(''); handleTreeSelect(saveCurId); }; const valueCallback = valueObj => { setSubList(valueObj); }; const handleHide = () => { setMulu(!mulu); }; const handleCommit = results => { setBtnLoading(true); setMenuToRole( qs.stringify({ roleID, menuNameList: String(results.flat()), }), { headers: { 'content-type': 'application/x-www-form-urlencggoded;charset=UTF-8', }, }, ) .then(res => { setBtnLoading(false); if (res.success) { setValueList([...results.flat()]); notification.success({ message: '提示', duration: 3, description: '设置成功', }); } else { notification.error({ message: '提示', duration: 15, description: res.message, }); } }) .catch(err => { setBtnLoading(false); console.log(err); }); }; return ( <PageContainer> <div className={classnames({ [styles.content]: true, })} > <Card className={classnames({ [styles.cardBox]: true, [styles.hideBox]: !mulu, })} > <Spin tip="loading...." spinning={spinLoading} style={{ margin: '20px auto ', display: 'block' }} > <div className={userStyles.siteTitle}> <span>选择角色:</span> </div> {treeData && treeData.length > 0 && ( <Tree // showLine={{ showLeafIcon: false }} showIcon onSelect={handleTreeSelect} autoExpandParent // expandedKeys={currentSelectId} treeData={treeData} selectedKeys={currentSelectId} blockNode /> )} </Spin> <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} /> <div> {mulu && ( <Tooltip title="隐藏角色栏" className={styles.hide}> <DoubleLeftOutlined onClick={() => handleHide()} /> </Tooltip> )} {!mulu && ( <Tooltip title="显示角色栏" className={styles.hide}> <DoubleRightOutlined onClick={() => handleHide()} /> </Tooltip> )} </div> </Card> <div className={classnames({ [styles.boxR]: true, [styles.boxH]: mulu, })} > <Card className={classnames({ [styles.cardBoxTop]: true, [styles.boxH]: mulu, })} > <Row align="middle"> <Col span={1}>搜索</Col> <Col span={8}> <Search allowClear placeholder={placeholder} // onSearch={handleSearch} onChange={handleChange} enterButton /> </Col> <Col span={3} /> <Col span={8}> <Space size="large"> <Button type="primary" onClick={() => { handleAdd(); }} disabled={!itemObj || (itemObj && itemObj.roleID)} > 新增角色 </Button> <Button type="primary" onClick={() => { groupEdit(); }} disabled={!itemObj.groupflag} > 编辑分组 </Button> <Button type="primary" disabled={!itemObj.roleID} onClick={() => { handleEdit(); }} > 编辑角色 </Button> <Button type="primary" danger onClick={() => { handleDel(); }} disabled={!itemObj.roleID} > 删除角色 </Button> </Space> </Col> </Row> </Card> <Card className={classnames({ [styles.boxH]: mulu, [styles.cardBoxR]: true, })} > {roleID ? ( <ListCard loading={loading} checkList={valueList} dataList={dataList} searchWord={searchWord} onCommit={handleCommit} btnLoading={btnLoading} hasData={hasData} /> ) : ( <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="当前未选中角色" /> )} </Card> </div> </div> </PageContainer> ); }; export default SiteManage;