/* 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 (
{ history.push(datav.path); await addHistory(datav.key); }} > {' '} {React.createElement(Ant4Icons[icon], { style: { marginRight: 6 } })} {name} {collected ? ( { getstar(e, collected, datav.key); }} /> ) : ( { getstar(e, collected, datav.key); }} /> )}
); }, 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 (
}>
{
{ if (key == '0') { changealive(!alive); return; } // await addHistory(item.key); history.push(key); }} items={[ { key: '0', icon: alive ? ( ) : ( ), label: '产品与服务', type: 'sub1', }, ...collectList, ]} />
} placeholder="输入关键词查找模块" allowClear className={styles.diyinput} value={search} onChange={(e) => { setsearch(e.target.value); }} /> { changealive(false); }} />

历史记录

{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;