diff --git a/packages/fes-plugin-layout/src/views/BaseLayout.vue b/packages/fes-plugin-layout/src/views/BaseLayout.vue index 681e6172..0dbfd332 100644 --- a/packages/fes-plugin-layout/src/views/BaseLayout.vue +++ b/packages/fes-plugin-layout/src/views/BaseLayout.vue @@ -25,11 +25,22 @@ + - Ant Design ©2020 Created by MumbleFe @@ -47,8 +58,12 @@ import Layout from 'ant-design-vue/lib/layout'; import 'ant-design-vue/lib/layout/style'; import Tabs from 'ant-design-vue/lib/tabs'; import 'ant-design-vue/lib/tabs/style'; +import { ReloadOutlined } from '@ant-design/icons-vue'; import Menu from './Menu'; +let i = 0; +const getKey = () => ++i; + export default { components: { [Layout.name]: Layout, @@ -58,6 +73,7 @@ export default { [Layout.Footer.name]: Layout.Footer, [Tabs.name]: Tabs, [Tabs.TabPane.name]: Tabs.TabPane, + ReloadOutlined, Menu }, props: { @@ -114,15 +130,42 @@ export default { }); router.beforeEach((to) => { if (!openedPageList.some(page => unref(page.path) === to.path)) { - openedPageList.push(to); + openedPageList.push({ + path: to.path, + route: to, + name: to.meta.name, + key: getKey() + }); } return true; }); // 还需要考虑参数 const switchTab = (path) => { - router.push(path); + const selectedRoute = openedPageList.find(item => item.path === path); + if (selectedRoute) { + router.push({ + path, + query: selectedRoute.route.query, + params: selectedRoute.route.params + }); + } + }; + const reloadTab = (path) => { + const selectedPage = openedPageList.find(item => item.path === path); + if (selectedPage) { + selectedPage.key = getKey(); + } + }; + const getPageKey = (_route) => { + const selectedPage = openedPageList.find(item => item.path === _route.path); + if (selectedPage) { + return selectedPage.key; + } + return ''; }; return { + getPageKey, + reloadTab, switchTab, route, openedPageList, @@ -188,6 +231,16 @@ export default { width: 100%; .ant-tabs-nav-container { padding-left: 16px; + .layout-tabs-close-icon { + vertical-align: middle; + color: rgba(0, 0, 0, 0.45); + font-size: 12px; + margin-left: 6px; + margin-top: -2px; + &:hover{ + color: rgba(0, 0, 0, 0.8); + } + } } } }