useTabs.ts 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. import type { RouteLocationNormalized, Router } from 'vue-router';
  2. import { useRouter } from 'vue-router';
  3. import { unref } from 'vue';
  4. import { useMultipleTabStore } from '@jeesite/core/store/modules/multipleTab';
  5. import { useAppStore } from '@jeesite/core/store/modules/app';
  6. enum TableActionEnum {
  7. REFRESH,
  8. CLOSE_ALL,
  9. CLOSE_LEFT,
  10. CLOSE_RIGHT,
  11. CLOSE_OTHER,
  12. CLOSE_CURRENT,
  13. CLOSE,
  14. }
  15. export function useTabs(_router?: Router) {
  16. const appStore = useAppStore();
  17. function canIUseTabs(): boolean {
  18. const { show } = appStore.getMultiTabsSetting;
  19. if (!show) {
  20. throw new Error('The multi-tab page is currently not open, please open it in the settings!');
  21. }
  22. return !!show;
  23. }
  24. const tabStore = useMultipleTabStore();
  25. const router = _router || useRouter();
  26. const { currentRoute } = router;
  27. function getCurrentTab() {
  28. const route = unref(currentRoute);
  29. return tabStore.getTabList.find((item) => {
  30. return (item.fullPath || item.path) === route.fullPath;
  31. })!;
  32. }
  33. async function updateTabTitle(title: string, tab?: RouteLocationNormalized) {
  34. const canIUse = canIUseTabs;
  35. if (!canIUse) {
  36. return;
  37. }
  38. const targetTab = tab || getCurrentTab();
  39. await tabStore.setTabTitle(title, targetTab);
  40. }
  41. async function updateTabPath(path: string, tab?: RouteLocationNormalized) {
  42. const canIUse = canIUseTabs;
  43. if (!canIUse) {
  44. return;
  45. }
  46. const targetTab = tab || getCurrentTab();
  47. await tabStore.updateTabPath(path, targetTab);
  48. }
  49. async function handleTabAction(action: TableActionEnum, tab?: RouteLocationNormalized) {
  50. const canIUse = canIUseTabs;
  51. if (!canIUse) {
  52. return;
  53. }
  54. const currentTab = getCurrentTab();
  55. switch (action) {
  56. case TableActionEnum.REFRESH:
  57. await tabStore.refreshPage(router);
  58. break;
  59. case TableActionEnum.CLOSE_ALL:
  60. await tabStore.closeAllTab(router);
  61. break;
  62. case TableActionEnum.CLOSE_LEFT:
  63. await tabStore.closeLeftTabs(currentTab, router);
  64. break;
  65. case TableActionEnum.CLOSE_RIGHT:
  66. await tabStore.closeRightTabs(currentTab, router);
  67. break;
  68. case TableActionEnum.CLOSE_OTHER:
  69. await tabStore.closeOtherTabs(currentTab, router);
  70. break;
  71. case TableActionEnum.CLOSE_CURRENT:
  72. case TableActionEnum.CLOSE:
  73. await tabStore.closeTab(tab || currentTab, router);
  74. break;
  75. }
  76. }
  77. return {
  78. tabStore,
  79. refreshPage: () => handleTabAction(TableActionEnum.REFRESH),
  80. closeAll: () => handleTabAction(TableActionEnum.CLOSE_ALL),
  81. closeLeft: () => handleTabAction(TableActionEnum.CLOSE_LEFT),
  82. closeRight: () => handleTabAction(TableActionEnum.CLOSE_RIGHT),
  83. closeOther: () => handleTabAction(TableActionEnum.CLOSE_OTHER),
  84. closeCurrent: () => handleTabAction(TableActionEnum.CLOSE_CURRENT),
  85. close: (tab?: RouteLocationNormalized) => handleTabAction(TableActionEnum.CLOSE, tab),
  86. setTitle: (title: string, tab?: RouteLocationNormalized) => updateTabTitle(title, tab),
  87. updatePath: (fullPath: string, tab?: RouteLocationNormalized) => updateTabPath(fullPath, tab),
  88. };
  89. }