/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-11 14:22:43
|
* @LastEditTime: 2023-12-25 16:10:51
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @Version: 1.0.0
|
* @Description: 外层layout
|
*/
|
import React, { useState, useRef, useEffect } from 'react';
|
import { useLocation, Outlet, useNavigate } from 'react-router-dom';
|
import './index.less';
|
import Header from './Header';
|
import Navigation from './Navigation';
|
import SOP from '../SOP';
|
import * as $$ from '../../utils/utility';
|
|
// 获取角色权限
|
function getRolePowerApi(roleId) {
|
return $$.ax.request({ url: `ctRole/getById?id=${roleId}`, type: 'get', service: 'cust' });
|
}
|
|
const Layout = ({ isNotNav, headerUserChange }) => {
|
const location = useLocation() || {};
|
|
const navigate = useNavigate();
|
|
const pathname = location.pathname;
|
|
const layoutRef = useRef();
|
|
// 导航数据
|
const [menuData, setMenuData] = useState([]);
|
|
// 头部menu选择
|
const [headerMenuActive, setHeaderMenuActive] = useState({});
|
|
// side Menu
|
const [sideMenu, setSideMenu] = useState([]);
|
|
// 当前选中的角色 及其 权限
|
const [roleActive, setRoleActive] = useState({ id: null, powerMap: {} });
|
|
// 切换头部menu
|
function handleClickHeaderMenu(values) {
|
function loop(value) {
|
if (value.powerUrl) {
|
navigate(value.powerUrl);
|
setMenuActive(value.powerUrl, menuData);
|
} else {
|
if (value.children && value.children.length > 0) {
|
loop(value.children[0]);
|
}
|
}
|
}
|
if (values.children.length > 0) {
|
loop(values.children[0]);
|
}
|
}
|
|
// 切换角色
|
function handleChangeRole(roleName, roleId) {
|
navigate('/mediate/workbench');
|
setRoleActive({ ...roleActive, id: roleId, roleName });
|
}
|
|
// 设置权限数据格式化
|
function setPowerDataMap(power_data) {
|
let powerMap = {};
|
function loop(data) {
|
data.forEach((x) => {
|
if (x.powerUrl) {
|
powerMap[x.powerUrl] = {};
|
x.children.forEach((y) => {
|
powerMap[x.powerUrl][y.powerTag] = true;
|
});
|
} else {
|
loop(x.children);
|
}
|
});
|
}
|
power_data.forEach((x) => {
|
loop(x.children);
|
});
|
return powerMap;
|
}
|
|
// 设置头部menu选择和菜单栏选择
|
function setMenuActive(pathname, menuData) {
|
const arr = pathname?.split('/');
|
for (let i = 0; i < menuData.length; i++) {
|
if (arr && arr[1] === menuData[i].powerTag) {
|
setHeaderMenuActive(menuData[i]);
|
setSideMenu(menuData[i].children);
|
break;
|
}
|
}
|
}
|
|
// 初始化 格式化数据适应菜单栏
|
useEffect(() => {
|
let role = $$.getSessionStorage('role');
|
if (role) {
|
setRoleActive({ id: role.roleId, roleName: role.roleName, powerMap: {} });
|
return;
|
}
|
let customerSystemUser = $$.getLocal('customerSystemUser');
|
let ctUseroleList = customerSystemUser?.ctUseroleList || [];
|
if (ctUseroleList[0]?.roleId) {
|
setRoleActive({ id: ctUseroleList[0]?.roleId, roleName: ctUseroleList[0]?.roleName, powerMap: {} });
|
}
|
}, []);
|
|
// 根据角色获取权限
|
useEffect(() => {
|
// 获取角色权限和菜单展示
|
async function getRolePower(roleId, roleName) {
|
global.setSpinning(true);
|
const res = await getRolePowerApi(roleId);
|
global.setSpinning(false);
|
if (res.type) {
|
let resData = res.data?.roleTreeBOS || [];
|
let menu_data = [];
|
let power_data = [];
|
resData.forEach((x) => {
|
if (x.appClient === '1' && x.powerTag !== 'pay') {
|
menu_data.push(x);
|
}
|
if (x.appClient === '1' || x.powerTag === 'pay') {
|
power_data.push(x);
|
}
|
});
|
let powerMap = setPowerDataMap(power_data);
|
|
function loop(data, arr) {
|
data.forEach((x) => {
|
if (x.powerUrl && powerMap[x.powerUrl]?.show) {
|
arr.push(x.powerUrl);
|
|
}
|
if ( x.powerUrl && powerMap[x.powerUrl]?.update) {
|
arr.push(x.powerUrl);
|
console.log(powerMap[x.powerUrl]?.update, 'res111111111');
|
}
|
else {
|
loop(x.children, arr);
|
}
|
});
|
}
|
menu_data.forEach((x) => {
|
x.page = [];
|
loop(x.children, x.page);
|
});
|
setMenuActive(pathname, menu_data);
|
$$.setSessionStorage('role', { roleId, roleName });
|
setRoleActive({ id: roleId, roleName, powerMap: powerMap });
|
setMenuData(menu_data);
|
}
|
}
|
if (roleActive.id) {
|
getRolePower(roleActive.id, roleActive.roleName);
|
}
|
}, [roleActive.id]);
|
|
return (
|
<>
|
<Header
|
roleActive={roleActive}
|
headerMenu={menuData}
|
headerMenuActive={headerMenuActive}
|
handleClickMenu={handleClickHeaderMenu}
|
headerUserChange={headerUserChange}
|
handleChangeRole={handleChangeRole}
|
/>
|
{isNotNav ? (
|
<main className="layout-main" id="layoutMain">
|
<Outlet />
|
</main>
|
) : (
|
<main className="layout-main" id="layoutMain" ref={layoutRef}>
|
<Navigation powerMap={roleActive.powerMap} roleActive={roleActive} sideMenu={sideMenu} />
|
<main id="layoutChild" className="layout-child">
|
<Outlet context={{ powerMap: roleActive.powerMap, roleId: roleActive.id }} />
|
</main>
|
<SOP />
|
</main>
|
)}
|
</>
|
);
|
};
|
|
export default Layout;
|
