|
|
|
@ -1,21 +1,18 @@
|
|
|
|
|
import { history } from '@umijs/max';
|
|
|
|
|
import { Dropdown, Tabs } from 'antd';
|
|
|
|
|
import { useCallback, useMemo } from 'react';
|
|
|
|
|
import { history } from '@umijs/max';
|
|
|
|
|
|
|
|
|
|
import { KeepAliveTab, useKeepAliveTabs } from './useKeepAliveTabs';
|
|
|
|
|
import type { ItemType, MenuInfo } from 'rc-menu/lib/interface';
|
|
|
|
|
import { KeepAliveTabContext } from './context';
|
|
|
|
|
import { KeepAliveTab, useKeepAliveTabs } from './useKeepAliveTabs';
|
|
|
|
|
enum OperationType {
|
|
|
|
|
REFRESH = 'refresh',
|
|
|
|
|
CLOSE = 'close',
|
|
|
|
|
CLOSEOTHER = 'close-other',
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
type MenuItemType = ItemType & { key: OperationType } | null;
|
|
|
|
|
type MenuItemType = (ItemType & { key: OperationType }) | null;
|
|
|
|
|
|
|
|
|
|
const KeepAliveLayout = () => {
|
|
|
|
|
|
|
|
|
|
const {
|
|
|
|
|
keepAliveTabs,
|
|
|
|
|
activeTabRoutePath,
|
|
|
|
@ -26,22 +23,31 @@ const KeepAliveLayout = () => {
|
|
|
|
|
onShow,
|
|
|
|
|
} = useKeepAliveTabs();
|
|
|
|
|
|
|
|
|
|
const menuItems: MenuItemType[] = useMemo(() => [
|
|
|
|
|
const menuItems: MenuItemType[] = useMemo(
|
|
|
|
|
() =>
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
label: '刷新',
|
|
|
|
|
key: OperationType.REFRESH,
|
|
|
|
|
},
|
|
|
|
|
keepAliveTabs.length <= 1 ? null : {
|
|
|
|
|
keepAliveTabs.length <= 1
|
|
|
|
|
? null
|
|
|
|
|
: {
|
|
|
|
|
label: '关闭',
|
|
|
|
|
key: OperationType.CLOSE,
|
|
|
|
|
},
|
|
|
|
|
keepAliveTabs.length <= 1 ? null : {
|
|
|
|
|
keepAliveTabs.length <= 1
|
|
|
|
|
? null
|
|
|
|
|
: {
|
|
|
|
|
label: '关闭其他',
|
|
|
|
|
key: OperationType.CLOSEOTHER,
|
|
|
|
|
},
|
|
|
|
|
].filter(o => o), [keepAliveTabs]);
|
|
|
|
|
].filter((o) => o),
|
|
|
|
|
[keepAliveTabs],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const menuClick = useCallback(({ key, domEvent }: MenuInfo, tab: KeepAliveTab) => {
|
|
|
|
|
const menuClick = useCallback(
|
|
|
|
|
({ key, domEvent }: MenuInfo, tab: KeepAliveTab) => {
|
|
|
|
|
domEvent.stopPropagation();
|
|
|
|
|
|
|
|
|
|
if (key === OperationType.REFRESH) {
|
|
|
|
@ -51,10 +57,12 @@ const KeepAliveLayout = () => {
|
|
|
|
|
} else if (key === OperationType.CLOSEOTHER) {
|
|
|
|
|
closeOtherTab(tab.routePath);
|
|
|
|
|
}
|
|
|
|
|
}, [closeOtherTab, closeTab, refreshTab]);
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
[closeOtherTab, closeTab, refreshTab],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const renderTabTitle = useCallback((tab: KeepAliveTab) => {
|
|
|
|
|
const renderTabTitle = useCallback(
|
|
|
|
|
(tab: KeepAliveTab) => {
|
|
|
|
|
return (
|
|
|
|
|
<Dropdown
|
|
|
|
|
menu={{ items: menuItems, onClick: (e) => menuClick(e, tab) }}
|
|
|
|
@ -65,39 +73,41 @@ const KeepAliveLayout = () => {
|
|
|
|
|
{tab.title}
|
|
|
|
|
</div>
|
|
|
|
|
</Dropdown>
|
|
|
|
|
)
|
|
|
|
|
}, [menuItems]);
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
[menuItems],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const tabItems = useMemo(() => {
|
|
|
|
|
let finalKeepAliveTabs = keepAliveTabs
|
|
|
|
|
let finalKeepAliveTabs = keepAliveTabs;
|
|
|
|
|
// .filter(item => !item?.isHideTab)
|
|
|
|
|
return finalKeepAliveTabs.map(tab => {
|
|
|
|
|
console.log(tab,'tabItems')
|
|
|
|
|
return finalKeepAliveTabs.map((tab) => {
|
|
|
|
|
console.log(tab, 'tabItems');
|
|
|
|
|
// TODO 未找到合适办法只去除tab标题栏位,保留页面内容
|
|
|
|
|
return {
|
|
|
|
|
key: tab.routePath,
|
|
|
|
|
label: renderTabTitle(tab),
|
|
|
|
|
children: (
|
|
|
|
|
<div
|
|
|
|
|
key={tab.key}
|
|
|
|
|
style={{ height: 'calc(100vh - 112px)', overflow: 'auto' }}
|
|
|
|
|
>
|
|
|
|
|
<div key={tab.key} style={{ height: 'calc(100vh - 112px)', overflow: 'auto' }}>
|
|
|
|
|
{tab.children}
|
|
|
|
|
</div>
|
|
|
|
|
),
|
|
|
|
|
// style: {display: 'none'},
|
|
|
|
|
closable: keepAliveTabs.length > 1,
|
|
|
|
|
forceRender: true
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
forceRender: true,
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
}, [keepAliveTabs]);
|
|
|
|
|
|
|
|
|
|
const onTabsChange = useCallback((tabRoutePath: string) => {
|
|
|
|
|
const curTab = keepAliveTabs.find(o => o.routePath === tabRoutePath);
|
|
|
|
|
const onTabsChange = useCallback(
|
|
|
|
|
(tabRoutePath: string) => {
|
|
|
|
|
const curTab = keepAliveTabs.find((o) => o.routePath === tabRoutePath);
|
|
|
|
|
if (curTab) {
|
|
|
|
|
history.push(curTab?.pathname);
|
|
|
|
|
}
|
|
|
|
|
}, [keepAliveTabs]);
|
|
|
|
|
},
|
|
|
|
|
[keepAliveTabs],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const onTabEdit = (
|
|
|
|
|
targetKey: React.MouseEvent | React.KeyboardEvent | string,
|
|
|
|
@ -116,23 +126,23 @@ const KeepAliveLayout = () => {
|
|
|
|
|
onHidden,
|
|
|
|
|
onShow,
|
|
|
|
|
}),
|
|
|
|
|
[closeTab, closeOtherTab, refreshTab, onHidden, onShow]
|
|
|
|
|
[closeTab, closeOtherTab, refreshTab, onHidden, onShow],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<KeepAliveTabContext.Provider value={keepAliveContextValue}>
|
|
|
|
|
<div>
|
|
|
|
|
<Tabs
|
|
|
|
|
type="editable-card"
|
|
|
|
|
items={tabItems}
|
|
|
|
|
activeKey={activeTabRoutePath}
|
|
|
|
|
onChange={onTabsChange}
|
|
|
|
|
className='keep-alive-tabs'
|
|
|
|
|
className="keep-alive-tabs"
|
|
|
|
|
hideAdd
|
|
|
|
|
animated={false}
|
|
|
|
|
onEdit={onTabEdit}
|
|
|
|
|
/>
|
|
|
|
|
</KeepAliveTabContext.Provider>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default KeepAliveLayout;
|
|
|
|
|