multipleTab.ts 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. import type { RouteLocationNormalized, RouteLocationRaw, Router } from 'vue-router';
  2. import { toRaw, unref } from 'vue';
  3. import { defineStore } from 'pinia';
  4. import { store } from '/@/store';
  5. import { useGo, useRedo } from '/@/hooks/web/usePage';
  6. import { Persistent } from '/@/utils/cache/persistent';
  7. import { PageEnum } from '/@/enums/pageEnum';
  8. import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
  9. import { getRawRoute } from '/@/utils';
  10. import { MULTIPLE_TABS_KEY } from '/@/enums/cacheEnum';
  11. import projectSetting from '/@/settings/projectSetting';
  12. export interface MultipleTabState {
  13. cacheTabList: Set<string>;
  14. tabList: RouteLocationNormalized[];
  15. lastDragEndIndex: number;
  16. }
  17. function handleGotoPage(router: Router) {
  18. const go = useGo(router);
  19. go(unref(router.currentRoute).path, true);
  20. }
  21. const cacheTab = projectSetting.multiTabsSetting.cache;
  22. export const useMultipleTabStore = defineStore({
  23. id: 'app-multiple-tab',
  24. state: (): MultipleTabState => ({
  25. // Tabs that need to be cached
  26. cacheTabList: new Set(),
  27. // multiple tab list
  28. tabList: cacheTab ? Persistent.getLocal(MULTIPLE_TABS_KEY) || [] : [],
  29. // Index of the last moved tab
  30. lastDragEndIndex: 0,
  31. }),
  32. getters: {
  33. getTabList() {
  34. return this.tabList;
  35. },
  36. getCachedTabList(): string[] {
  37. return Array.from(this.cacheTabList);
  38. },
  39. getLastDragEndIndex(): number {
  40. return this.lastDragEndIndex;
  41. },
  42. },
  43. actions: {
  44. /**
  45. * Update the cache according to the currently opened tabs
  46. */
  47. async updateCacheTab() {
  48. const cacheMap: Set<string> = new Set();
  49. for (const tab of this.tabList) {
  50. const item = getRawRoute(tab);
  51. // Ignore the cache
  52. const needCache = !item.meta?.ignoreKeepAlive;
  53. if (!needCache) {
  54. return;
  55. }
  56. const name = item.name as string;
  57. cacheMap.add(name);
  58. }
  59. this.cacheTabList = cacheMap;
  60. },
  61. /**
  62. * Refresh tabs
  63. */
  64. async refreshPage(router: Router) {
  65. const { currentRoute } = router;
  66. const route = unref(currentRoute);
  67. const name = route.name;
  68. const findTab = this.getCachedTabList.find((item) => item === name);
  69. if (findTab) {
  70. this.cacheTabList.delete(findTab);
  71. }
  72. const redo = useRedo(router);
  73. await redo();
  74. },
  75. clearCacheTabs(): void {
  76. this.cacheTabList = new Set();
  77. },
  78. resetState(): void {
  79. this.tabList = [];
  80. this.clearCacheTabs();
  81. },
  82. goToPage(router: Router) {
  83. const go = useGo(router);
  84. const len = this.tabList.length;
  85. const { path } = unref(router.currentRoute);
  86. let toPath: PageEnum | string = PageEnum.BASE_HOME;
  87. if (len > 0) {
  88. const page = this.tabList[len - 1];
  89. const p = page.fullPath || page.path;
  90. if (p) {
  91. toPath = p;
  92. }
  93. }
  94. // Jump to the current page and report an error
  95. path !== toPath && go(toPath as PageEnum, true);
  96. },
  97. async addTab(route: RouteLocationNormalized) {
  98. const { path, name, fullPath, params, query } = getRawRoute(route);
  99. // 404 The page does not need to add a tab
  100. if (
  101. path === PageEnum.ERROR_PAGE ||
  102. !name ||
  103. [REDIRECT_ROUTE.name, PAGE_NOT_FOUND_ROUTE.name].includes(name as string)
  104. ) {
  105. return;
  106. }
  107. let updateIndex = -1;
  108. // Existing pages, do not add tabs repeatedly
  109. const tabHasExits = this.tabList.some((tab, index) => {
  110. updateIndex = index;
  111. return (tab.fullPath || tab.path) === (fullPath || path);
  112. });
  113. // If the tab already exists, perform the update operation
  114. if (tabHasExits) {
  115. const curTab = toRaw(this.tabList)[updateIndex];
  116. if (!curTab) {
  117. return;
  118. }
  119. curTab.params = params || curTab.params;
  120. curTab.query = query || curTab.query;
  121. curTab.fullPath = fullPath || curTab.fullPath;
  122. this.tabList.splice(updateIndex, 1, curTab);
  123. } else {
  124. // Add tab
  125. this.tabList.push(route);
  126. }
  127. this.updateCacheTab();
  128. cacheTab && Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList);
  129. },
  130. async closeTab(tab: RouteLocationNormalized, router: Router) {
  131. const getToTarget = (tabItem: RouteLocationNormalized) => {
  132. const { params, path, query } = tabItem;
  133. return {
  134. params: params || {},
  135. path,
  136. query: query || {},
  137. };
  138. };
  139. const close = (route: RouteLocationNormalized) => {
  140. const { fullPath, meta: { affix } = {} } = route;
  141. if (affix) {
  142. return;
  143. }
  144. const index = this.tabList.findIndex((item) => item.fullPath === fullPath);
  145. index !== -1 && this.tabList.splice(index, 1);
  146. };
  147. const { currentRoute, replace } = router;
  148. const { path } = unref(currentRoute);
  149. if (path !== tab.path) {
  150. // Closed is not the activation tab
  151. close(tab);
  152. return;
  153. }
  154. // Closed is activated atb
  155. let toTarget: RouteLocationRaw = {};
  156. const index = this.tabList.findIndex((item) => item.path === path);
  157. // If the current is the leftmost tab
  158. if (index === 0) {
  159. // There is only one tab, then jump to the homepage, otherwise jump to the right tab
  160. if (this.tabList.length === 1) {
  161. toTarget = PageEnum.BASE_HOME;
  162. } else {
  163. // Jump to the right tab
  164. const page = this.tabList[index + 1];
  165. toTarget = getToTarget(page);
  166. }
  167. } else {
  168. // Close the current tab
  169. const page = this.tabList[index - 1];
  170. toTarget = getToTarget(page);
  171. }
  172. close(currentRoute.value);
  173. replace(toTarget);
  174. },
  175. // Close according to key
  176. async closeTabByKey(key: string, router: Router) {
  177. const index = this.tabList.findIndex((item) => (item.fullPath || item.path) === key);
  178. index !== -1 && this.closeTab(this.tabList[index], router);
  179. },
  180. // Sort the tabs
  181. async sortTabs(oldIndex: number, newIndex: number) {
  182. const currentTab = this.tabList[oldIndex];
  183. this.tabList.splice(oldIndex, 1);
  184. this.tabList.splice(newIndex, 0, currentTab);
  185. this.lastDragEndIndex = this.lastDragEndIndex + 1;
  186. },
  187. // Close the tab on the right and jump
  188. async closeLeftTabs(route: RouteLocationNormalized, router: Router) {
  189. const index = this.tabList.findIndex((item) => item.path === route.path);
  190. if (index > 0) {
  191. const leftTabs = this.tabList.slice(0, index);
  192. const pathList: string[] = [];
  193. for (const item of leftTabs) {
  194. const affix = item?.meta?.affix ?? false;
  195. if (!affix) {
  196. pathList.push(item.fullPath);
  197. }
  198. }
  199. this.bulkCloseTabs(pathList);
  200. }
  201. this.updateCacheTab();
  202. handleGotoPage(router);
  203. },
  204. // Close the tab on the left and jump
  205. async closeRightTabs(route: RouteLocationNormalized, router: Router) {
  206. const index = this.tabList.findIndex((item) => item.fullPath === route.fullPath);
  207. if (index >= 0 && index < this.tabList.length - 1) {
  208. const rightTabs = this.tabList.slice(index + 1, this.tabList.length);
  209. const pathList: string[] = [];
  210. for (const item of rightTabs) {
  211. const affix = item?.meta?.affix ?? false;
  212. if (!affix) {
  213. pathList.push(item.fullPath);
  214. }
  215. }
  216. this.bulkCloseTabs(pathList);
  217. }
  218. this.updateCacheTab();
  219. handleGotoPage(router);
  220. },
  221. async closeAllTab(router: Router) {
  222. this.tabList = this.tabList.filter((item) => item?.meta?.affix ?? false);
  223. this.clearCacheTabs();
  224. this.goToPage(router);
  225. },
  226. /**
  227. * Close other tabs
  228. */
  229. async closeOtherTabs(route: RouteLocationNormalized, router: Router) {
  230. const closePathList = this.tabList.map((item) => item.fullPath);
  231. const pathList: string[] = [];
  232. for (const path of closePathList) {
  233. if (path !== route.fullPath) {
  234. const closeItem = this.tabList.find((item) => item.path === path);
  235. if (!closeItem) {
  236. continue;
  237. }
  238. const affix = closeItem?.meta?.affix ?? false;
  239. if (!affix) {
  240. pathList.push(closeItem.fullPath);
  241. }
  242. }
  243. }
  244. this.bulkCloseTabs(pathList);
  245. this.updateCacheTab();
  246. handleGotoPage(router);
  247. },
  248. /**
  249. * Close tabs in bulk
  250. */
  251. async bulkCloseTabs(pathList: string[]) {
  252. this.tabList = this.tabList.filter((item) => !pathList.includes(item.fullPath));
  253. },
  254. },
  255. });
  256. // Need to be used outside the setup
  257. export function useMultipleTabWithOutStore() {
  258. return useMultipleTabStore(store);
  259. }