/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable no-param-reassign */
import React, { useState, Suspense, useRef, useMemo } from 'react';
import { Layout, Menu, Skeleton, Input, Row, Col, Empty } from 'antd';
import { Link, history, useModel, useLocation } from '@umijs/max';
import styles from './index.less';
import { Scrollbars } from 'react-custom-scrollbars';
import { collectPerms, cancelCollectPerms, mtosave } from '@/services/login';
import * as Ant4Icons from '@ant-design/icons';
const { Sider } = Layout;
function strToHump(str) {
if (!str) return;
let strArr = str.split('-');
for (let i = 0; i < strArr.length; i++) {
strArr[i] = strArr[i].charAt(0).toUpperCase() + strArr[i].substr(1);
}
let res = strArr.join('');
return res + 'Outlined';
}
let CardItems = (datav, i, getstar, addHistory) => {
let name = datav.name,
collected = datav.isExist == '1',
icon = datav.icon ? strToHump(datav.icon) : 'ToolOutlined',
ItemIcon = icon ? Ant4Icons[icon] : Ant4Icons['ToolOutlined'];
return (
);
},
coles = { xs: 24, sm: 24, md: 12, lg: 8, xl: 6, xxl: 4 };
function SiderMenu({ logo, collapsed, onCollapse, fixSiderbar, theme, isMobile, name, menuData }) {
let location = useLocation();
const [anchor, setanchor] = useState();
const [search, setsearch] = useState();
const scrollRef = useRef();
const { alive, changealive } = useModel('useGlobal');
const {
initialState: { getmenuData, newMenu },
setInitialState,
} = useModel('@@initialState');
const getMenuData = newMenu?.userHavePermList ?? [],
collectPerm = newMenu?.collectPerm ?? [],
recentUsePermList = newMenu?.recentUsePermList ?? [];
let scrollToAnchor = (anchorName) => {
if (anchorName) {
setanchor(anchorName);
let anchorElement = document.getElementById(anchorName);
if (scrollRef) {
// anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' });
scrollRef?.current?.scrollTop(anchorElement.offsetTop);
}
}
};
let filterMenu = (alldata, search) => {
if (!search) {
return alldata;
}
alldata = alldata ?? [];
let newdata = alldata.filter((item) => {
return (
item.routes &&
item.routes.some((it) => {
return it.name.indexOf(search) != -1;
})
);
});
return newdata.map((item) => {
return {
...item,
routes: item.routes.filter((it) => {
return it.name.indexOf(search) != -1;
}),
};
});
};
const refreshs = async () => {
const menuDatas = await getmenuData();
if (menuDatas) {
await setInitialState((s) => {
return { ...s, newMenu: menuDatas };
});
}
};
async function getstar(e, collected, permissionId) {
e.stopPropagation();
if (collected) {
let cancelData = await cancelCollectPerms({ permissionId });
if (cancelData.code == '0000') {
await refreshs();
}
} else {
let collectData = await collectPerms({ permissionId });
if (collectData.code == '0000') {
await refreshs();
}
}
}
async function addHistory(permissionId) {
let cancelData = await mtosave({ permissionId });
if (cancelData.code == '0000') {
changealive(false);
await refreshs();
}
}
const collectList = useMemo(() => {
return collectPerm.map((item, i) => {
const icon = item.icon ? strToHump(item.icon) : 'ToolOutlined',
ItemIcon = icon ? Ant4Icons[icon] : Ant4Icons.ToolOutlined;
return {
key: item.path,
icon: ,
label: (
{item.name}
{
e.stopPropagation();
await getstar(e, true, item.key);
}}
/>
),
};
});
}, [collectPerm]);
return (
}>
{
{name}
历史记录
{recentUsePermList &&
recentUsePermList.map((item, i) => {
return (
{CardItems(item, i, getstar, addHistory)}
);
})}
{search && 搜索条件:{search},搜索结果:
}
{getMenuData &&
filterMenu(getMenuData, search).map((item, i) => {
const icon = item.icon ? strToHump(item.icon) : 'ToolOutlined',
ItemIcon = icon ? Ant4Icons[icon] : Ant4Icons['ToolOutlined'];
return (
{' '}
{item.name}
{item.routes &&
item.routes.map((it, ins) => {
return it ? CardItems(it, ins, getstar, addHistory) : null;
})}
);
})}
{filterMenu(getMenuData, search).length == 0 && }
{getMenuData &&
getMenuData.map((item, i) => {
const icon = item.icon ? strToHump(item.icon) : 'ToolOutlined',
ItemIcon = icon ? Ant4Icons[icon] : Ant4Icons['ToolOutlined'];
return (
{
scrollToAnchor(item.key);
}}
>
{item.name}
);
})}
}
);
}
export default SiderMenu;