/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-11 14:22:43
|
* @LastEditTime: 2024-10-24 10:30:27
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 外层layout
|
*/
|
import React, { useState, useRef, useEffect } from 'react';
|
import { useLocation, Outlet, useNavigate, useSearchParams } 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' });
|
}
|
|
//对接单点登录，获取token
|
function gridLogin(data) {
|
return $$.ax.request({ url: `ctAccount/gridLogin`, type: 'post', service: 'cust', isGrid: true, data });
|
}
|
|
// 角色选择
|
function switchRoleApi(data) {
|
return $$.ax.request({ url: 'ctAccount/switchRole', type: 'get', data, 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: {} });
|
|
//网格跳转请求状态
|
const [gridStatus, setGridStatus] = useState(false)
|
const [searchParams] = useSearchParams();
|
const [userData, setUserData] = useState({});
|
|
|
// 切换头部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/visit/visitWorkBench');
|
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;
|
}
|
}
|
}
|
|
//请求网格token
|
const getGridToken = async (token) => {
|
const res = await gridLogin({
|
token
|
})
|
if (res.type) {
|
$$.clearSessionStorage();
|
$$.setSessionStorage('customerSystemToken', res.data?.token);
|
$$.setSessionStorage('customerSystemUser', res.data||{});
|
// $$.setLocal('customerSystemToken', res.data?.token);
|
// $$.setLocal('customerSystemUser', res.data || {});
|
setUserData(res.data || {})
|
let ctUseroleList = res.data?.ctUseroleList || [];
|
const roleId = ctUseroleList[0]?.roleId
|
const roleName = ctUseroleList[0]?.roleName
|
const roleCode = ctUseroleList[0]?.roleCode
|
$$.setSessionStorage('role', { roleId: roleId, roleName: roleName });
|
setRoleActive({ id: roleId, roleName: roleName, powerMap: {} });
|
const result = await switchRoleApi({ roleCode: roleCode });
|
if (result.type) {
|
$$.setSessionStorage('customerSystemToken', result.data);
|
// $$.setLocal('customerSystemToken', res.data?.token);
|
setGridStatus(true)
|
const toType = searchParams.get('toType');
|
if (toType) {
|
navigate(`/mediate/${toType}`)
|
}
|
}
|
}
|
}
|
|
|
// 初始化 格式化数据适应菜单栏
|
useEffect(() => {
|
//单点登录，网格传一个token在session，如果有就请求接口
|
const gridToken = searchParams.get('gridToken'); // 获取名为 'gridToken' 的参数
|
if (gridToken) {
|
getGridToken(gridToken)
|
} else {
|
setGridStatus(true)
|
let role = $$.getSessionStorage('role');
|
if (role) {
|
setRoleActive({ id: role.roleId, roleName: role.roleName, powerMap: {} });
|
return;
|
}
|
// let customerSystemUser = $$.getLocal('customerSystemUser');
|
let customerSystemUser = $$.getSessionStorage('customerSystemUser');
|
setUserData(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);
|
console.log('menu_data',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]);
|
|
useEffect(() => {
|
// let customerSystemUser = $$.getLocal('customerSystemUser');
|
let customerSystemUser = $$.getSessionStorage('customerSystemUser');
|
setUserData(customerSystemUser || {});
|
}, [headerUserChange]);
|
|
return (
|
<>
|
<Header
|
roleActive={roleActive}
|
headerMenu={menuData}
|
headerMenuActive={headerMenuActive}
|
handleClickMenu={handleClickHeaderMenu}
|
headerUserChange={headerUserChange}
|
handleChangeRole={handleChangeRole}
|
userData={userData}
|
/>
|
{gridStatus && isNotNav ? (
|
<main className="layout-main" id="layoutMain">
|
<Outlet />
|
</main>
|
) : gridStatus ? (
|
<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;
|
