Skip to content

S
sage-front-framework
提交 7831604d 作者: 郁骅焌
操作

刷新选中tab

上级 cae239e6
正在显示 包含 125 行增加 和 94 行删除
config/config.js
......@@ -23,6 +23,9 @@ export default defineConfig({
targets: {
ie: 11,
},
plugins: ['@alitajs/keep-alive'],
// 缓存页面
keepalive: ['/demo/crud', '/system/role'],
// umi routes: https://umijs.org/docs/routing
routes: [
{
......@@ -87,19 +90,10 @@ export default defineConfig({
},
],
},
{
component: './404',
},
],
},
{
component: './404',
},
],
},
{
component: './404',
},
],
// Theme for antd: https://ant.design/docs/react/customize-theme-cn
theme: {
......
package.json
......@@ -50,6 +50,7 @@
"not ie <= 10"
],
"dependencies": {
"@alitajs/keep-alive": "^2.3.9",
"@ant-design/icons": "^4.0.0",
"@ant-design/pro-layout": "^5.0.8",
"@ant-design/pro-table": "2.2.1",
......@@ -62,6 +63,7 @@
"path-to-regexp": "2.4.0",
"qs": "^6.9.0",
"react": "^16.8.6",
"react-activation": "^0.5.0",
"react-dom": "^16.8.6",
"react-helmet-async": "^1.0.4",
"umi": "3.1.1",
......
src/components/TabBar/index.jsx
import React, { useState, useEffect, useImperativeHandle } from 'react'
import { Tabs } from 'antd'
import { useLocation, history } from "umi"
import './style.less'
import React, { useState, useEffect, useImperativeHandle } from 'react';
import { Tabs, Menu, Dropdown, Button } from 'antd';
import { ReloadOutlined } from '@ant-design/icons';
import { useLocation, history, dropByCacheKey } from 'umi';
import './style.less';
const { TabPane } = Tabs;
const TabBar = (props, ref) => {
const location = useLocation()
const { pathname } = location
const { currentUser: { menuTree } } = props
const location = useLocation();
const { pathname } = location;
const {
currentUser: { menuTree },
} = props;
const [panes, setPanes] = useState([
{ title: '首页', key: '/home', closable: false },
......@@ -26,95 +28,94 @@ const TabBar = (props, ref) => {
// { title: '测试标签10', key: '11' },
// { title: '测试标签11', key: '12' },
// { title: '测试标签12', key: '13' }
])
const [activeKey, setActiveKey] = useState('')
const [allPath, setAllPath] = useState([])
]);
const [activeKey, setActiveKey] = useState('');
const [allPath, setAllPath] = useState([]);
const checkPaneExist = (path) => {
let isExist = false
let isExist = false;
for (let i = 0; i < panes.length; i++) {
if (panes[i].key === path) {
isExist = true
break
isExist = true;
break;
}
}
if (!isExist) {
const p = allPath.find((item) => {
return item.path === path
})
return item.path === path;
});
if (p) {
const newPanes = panes.slice()
const newPanes = panes.slice();
newPanes.push({
title: p.name,
key: path
})
setPanes(newPanes)
key: path,
});
setPanes(newPanes);
}
}
}
};
// 初始化
useEffect(() => {
const list = []
const list = [];
const loopPath = (arr) => {
arr.forEach(item => {
arr.forEach((item) => {
list.push(item);
if (item.hasSun) {
const clist = item.children.slice()
loopPath(clist)
const clist = item.children.slice();
loopPath(clist);
}
})
}
loopPath(menuTree)
setAllPath(list)
});
};
loopPath(menuTree);
setAllPath(list);
let isExist = false
let isExist = false;
for (let i = 0; i < panes.length; i++) {
if (panes[i].key === pathname) {
isExist = true
break
isExist = true;
break;
}
}
if (!isExist) {
const p = list.find((item) => {
return item.path === pathname
})
return item.path === pathname;
});
if (p) {
const newPanes = panes.slice()
const newPanes = panes.slice();
newPanes.push({
title: p.name,
key: pathname
})
setPanes(newPanes)
key: pathname,
});
setPanes(newPanes);
}
}
setActiveKey(pathname)
}, [])
setActiveKey(pathname);
}, []);
const onChange = (activekey, fromMenu) => {
if (activekey !== activeKey) {
setTimeout(() => {
setActiveKey(activekey)
}, 200)
// setTimeout(() => {
setActiveKey(activekey);
// }, 200)
if (!fromMenu) {
history.push(activekey)
history.push(activekey);
} else {
checkPaneExist(activekey)
checkPaneExist(activekey);
}
}
}
};
const remove = targetKey => {
let lastActiveKey = '/home'
const remove = (targetKey) => {
let lastActiveKey = '/home';
let lastIndex;
panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const lastPanes = panes.filter(pane => pane.key !== targetKey);
const lastPanes = panes.filter((pane) => pane.key !== targetKey);
if (lastPanes.length && activeKey === targetKey) {
if (lastIndex >= 0) {
lastActiveKey = lastPanes[lastIndex].key;
......@@ -124,11 +125,11 @@ const TabBar = (props, ref) => {
} else {
lastActiveKey = lastPanes[lastPanes.length - 1].key;
}
setTimeout(() => {
setActiveKey(lastActiveKey)
}, 200)
setPanes(lastPanes)
history.push(lastActiveKey)
// setTimeout(() => {
setActiveKey(lastActiveKey);
// }, 200)
setPanes(lastPanes);
history.push(lastActiveKey);
};
const onEdit = (targetKey, action) => {
......@@ -137,29 +138,49 @@ const TabBar = (props, ref) => {
}
};
// 刷新
const refreshTab = (e) => {
e.preventDefault();
dropByCacheKey(activeKey);
history.push(activeKey);
};
const menu = (
<Menu>
<Menu.Item key="0">
<a onClick={(e) => refreshTab(e)}>刷新</a>
</Menu.Item>
</Menu>
);
// 暴露外部方法
useImperativeHandle(ref, () => ({
onChange
}))
onChange,
}));
return (
<div className="sage-tabbar">
<Tabs
onChange={onChange}
activeKey={activeKey}
type="editable-card"
hideAdd
tabBarGutter={4}
onEdit={onEdit}
>
{
panes.map(pane => (
<div className="sage-tabbar-left">
<Tabs
onChange={onChange}
activeKey={activeKey}
type="editable-card"
hideAdd
tabBarGutter={4}
onEdit={onEdit}
>
{panes.map((pane) => (
<TabPane tab={pane.title} key={pane.key} closable={pane.closable} />
))
}
</Tabs>
))}
</Tabs>
</div>
<div className="sage-tabbar-right">
<Dropdown overlay={menu} trigger={['click']}>
<Button className="sage-tabbar-button" icon={<ReloadOutlined />} size="middle" />
</Dropdown>
</div>
</div>
)
}
);
};
export default React.forwardRef(TabBar)
export default React.forwardRef(TabBar);
src/components/TabBar/style.less
.sage-tabbar {
margin: -24px -24px -4px;
display: flex;
height: 40px;
margin: -24px -24px -4px;
background: #fff;
.sage-tabbar-left {
flex: 1;
}
.sage-tabbar-right {
flex: 0 0 40px;
.sage-tabbar-button {
float: right;
width: 40px;
height: 100%;
border: none;
}
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
border-bottom: 1px solid #f0f0f0;
}
......
src/layouts/BasicLayout.jsx
......@@ -5,7 +5,7 @@
*/
import ProLayout, { DefaultFooter } from '@ant-design/pro-layout';
import React, { useEffect, useRef } from 'react';
import { Link, useIntl, connect } from 'umi';
import { Link, useIntl, connect, KeepAliveLayout } from 'umi';
import { GithubOutlined } from '@ant-design/icons';
import { Result, Button } from 'antd';
import Authorized from '@/utils/Authorized';
......@@ -30,8 +30,8 @@ const noMatch = (
/**
* use Authorized check all menu item
*/
const menuDataRender = menuList =>
menuList.map(item => {
const menuDataRender = (menuList) =>
menuList.map((item) => {
const localItem = { ...item, children: item.children ? menuDataRender(item.children) : [] };
return Authorized.check(item.authority, localItem, null);
});
......@@ -62,7 +62,7 @@ const defaultFooterDom = (
/>
);
const BasicLayout = props => {
const BasicLayout = (props) => {
const {
dispatch,
children,
......@@ -70,13 +70,13 @@ const BasicLayout = props => {
location = {
pathname: '/',
},
currentUser
currentUser,
} = props;
/**
* constructor
*/
const tabBarRef = useRef()
const tabBarRef = useRef();
useEffect(() => {
if (dispatch) {
......@@ -89,7 +89,7 @@ const BasicLayout = props => {
* init variables
*/
const handleMenuCollapse = payload => {
const handleMenuCollapse = (payload) => {
if (dispatch) {
dispatch({
type: 'global/changeLayoutCollapsed',
......@@ -100,9 +100,9 @@ const BasicLayout = props => {
const handlePageChange = ({ pathname }) => {
if (tabBarRef.current) {
tabBarRef.current.onChange(pathname, true)
tabBarRef.current.onChange(pathname, true);
}
}
};
const authorized = getAuthorityFromRouter(props.route.routes, location.pathname || '/') || {
authority: undefined,
......@@ -152,7 +152,7 @@ const BasicLayout = props => {
>
<TabBar ref={tabBarRef} currentUser={currentUser} />
<Authorized authority={authorized.authority} noMatch={noMatch}>
{children}
<KeepAliveLayout {...props}>{children}</KeepAliveLayout>
</Authorized>
</ProLayout>
);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论