fix: tab route close logic (#156)

This commit is contained in:
yuyang 2022-05-23 18:16:02 +08:00 committed by GitHub
parent 3a2d29df6c
commit f7e50cd10a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 8 deletions

View File

@ -50,6 +50,5 @@ export interface TRouterInfo {
export interface TTabRouterType { export interface TTabRouterType {
isRefreshing: boolean; isRefreshing: boolean;
homeRouter: TRouterInfo;
tabRouterList: Array<TRouterInfo>; tabRouterList: Array<TRouterInfo>;
} }

View File

@ -2,9 +2,18 @@ import { defineStore } from 'pinia';
import { TRouterInfo, TTabRouterType } from '@/interface'; import { TRouterInfo, TTabRouterType } from '@/interface';
import { store } from '@/store'; import { store } from '@/store';
const homeRoute: Array<TRouterInfo> = [
{
path: '/dashboard/base',
routeIdx: 0,
title: '仪表盘',
name: 'DashboardBase',
isHome: true,
},
];
const state = { const state = {
homeRouter: { path: '/dashboard/base', routeIdx: 0, title: '仪表盘', name: 'DashboardBase', isHome: true }, tabRouterList: homeRoute,
tabRouterList: [],
isRefreshing: false, isRefreshing: false,
}; };
@ -15,14 +24,16 @@ const ignoreCacheRoutes = [];
export const useTabsRouterStore = defineStore('tabsRouter', { export const useTabsRouterStore = defineStore('tabsRouter', {
state: () => state, state: () => state,
getters: { getters: {
tabRouters: (state: TTabRouterType) => [state.homeRouter].concat(state.tabRouterList), tabRouters: (state: TTabRouterType) => state.tabRouterList,
refreshing: (state: TTabRouterType) => state.isRefreshing, refreshing: (state: TTabRouterType) => state.isRefreshing,
}, },
actions: { actions: {
// 处理刷新
toggleTabRouterAlive(routeIdx: number) { toggleTabRouterAlive(routeIdx: number) {
this.isRefreshing = !this.isRefreshing; this.isRefreshing = !this.isRefreshing;
this.tabRouters[routeIdx].isAlive = !this.tabRouters[routeIdx].isAlive; this.tabRouters[routeIdx].isAlive = !this.tabRouters[routeIdx].isAlive;
}, },
// 处理新增
appendTabRouterList(newRoute: TRouterInfo) { appendTabRouterList(newRoute: TRouterInfo) {
const needAlive = !ignoreCacheRoutes.includes(newRoute.name); const needAlive = !ignoreCacheRoutes.includes(newRoute.name);
if (!this.tabRouters.find((route: TRouterInfo) => route.path === newRoute.path)) { if (!this.tabRouters.find((route: TRouterInfo) => route.path === newRoute.path)) {
@ -30,21 +41,25 @@ export const useTabsRouterStore = defineStore('tabsRouter', {
this.tabRouterList = this.tabRouterList.concat({ ...newRoute, isAlive: needAlive }); this.tabRouterList = this.tabRouterList.concat({ ...newRoute, isAlive: needAlive });
} }
}, },
// 处理关闭当前
subtractCurrentTabRouter(newRoute: TRouterInfo) { subtractCurrentTabRouter(newRoute: TRouterInfo) {
const { routeIdx } = newRoute; const { routeIdx } = newRoute;
this.tabRouterList = this.tabRouterList.slice(0, routeIdx - 1).concat(this.tabRouterList.slice(routeIdx)); this.tabRouterList = this.tabRouterList.slice(0, routeIdx).concat(this.tabRouterList.slice(routeIdx + 1));
}, },
// 处理关闭右侧
subtractTabRouterBehind(newRoute: TRouterInfo) { subtractTabRouterBehind(newRoute: TRouterInfo) {
const { routeIdx } = newRoute; const { routeIdx } = newRoute;
this.tabRouterList = this.tabRouterList.slice(0, routeIdx); this.tabRouterList = this.tabRouterList.slice(0, routeIdx + 1);
}, },
// 处理关闭左侧
subtractTabRouterAhead(newRoute: TRouterInfo) { subtractTabRouterAhead(newRoute: TRouterInfo) {
const { routeIdx } = newRoute; const { routeIdx } = newRoute;
this.tabRouterList = this.tabRouterList.slice(routeIdx - 1); this.tabRouterList = homeRoute.concat(this.tabRouterList.slice(routeIdx));
}, },
// 处理关闭其他
subtractTabRouterOther(newRoute: TRouterInfo) { subtractTabRouterOther(newRoute: TRouterInfo) {
const { routeIdx } = newRoute; const { routeIdx } = newRoute;
this.tabRouterList = [this.tabRouterList?.[routeIdx]]; this.tabRouterList = homeRoute.concat([this.tabRouterList?.[routeIdx]]);
}, },
removeTabRouterList() { removeTabRouterList() {
this.tabRouterList = []; this.tabRouterList = [];