mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-23 13:36:32 +08:00
fix: tab route close logic (#156)
This commit is contained in:
parent
3a2d29df6c
commit
f7e50cd10a
|
@ -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>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 = [];
|
||||||
|
|
Loading…
Reference in New Issue
Block a user