feat(tagView): ✨ 增加关闭当前tagView方法

增加关闭当前tagView方法

src/layout/components/TagsView/index.vue

@@ -9,7 +9,7 @@
         ref="tagRef"
         v-for="tag in visitedViews"
         :key="tag.fullPath"
-        :class="'tags-item ' + (isActive(tag) ? 'active' : '')"
+        :class="'tags-item ' + (tagsViewStore.isActive(tag) ? 'active' : '')"
         :to="{ path: tag.path, query: tag.query }"
         @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
         @contextmenu.prevent="openContentMenu(tag, $event)"
@@ -190,10 +190,6 @@ function moveToCurrentTag() {
   });
 }
 
-function isActive(tag: TagView) {
-  return tag.path === route.path;
-}
-
 function isAffix(tag: TagView) {
   return tag?.affix;
 }
@@ -228,26 +224,10 @@ function refreshSelectedTag(view: TagView) {
   });
 }
 
-function toLastView(visitedViews: TagView[], view?: TagView) {
-  const latestView = visitedViews.slice(-1)[0];
-  if (latestView && latestView.fullPath) {
-    router.push(latestView.fullPath);
-  } else {
-    // now the default is to redirect to the home page if there is no tags-view,
-    // you can adjust it according to your needs.
-    if (view?.name === "Dashboard") {
-      // to reload home page
-      router.replace("/redirect" + view.fullPath);
-    } else {
-      router.push("/");
-    }
-  }
-}
-
 function closeSelectedTag(view: TagView) {
   tagsViewStore.delView(view).then((res: any) => {
-    if (isActive(view)) {
+    if (tagsViewStore.isActive(view)) {
-      toLastView(res.visitedViews, view);
+      tagsViewStore.toLastView(res.visitedViews, view);
     }
   });
 }
@@ -255,14 +235,14 @@ function closeSelectedTag(view: TagView) {
 function closeLeftTags() {
   tagsViewStore.delLeftViews(selectedTag.value).then((res: any) => {
     if (!res.visitedViews.find((item: any) => item.path === route.path)) {
-      toLastView(res.visitedViews);
+      tagsViewStore.toLastView(res.visitedViews);
     }
   });
 }
 function closeRightTags() {
   tagsViewStore.delRightViews(selectedTag.value).then((res: any) => {
     if (!res.visitedViews.find((item: any) => item.path === route.path)) {
-      toLastView(res.visitedViews);
+      tagsViewStore.toLastView(res.visitedViews);
     }
   });
 }
@@ -276,7 +256,7 @@ function closeOtherTags() {
 
 function closeAllTags(view: TagView) {
   tagsViewStore.delAllViews().then((res: any) => {
-    toLastView(res.visitedViews, view);
+    tagsViewStore.toLastView(res.visitedViews, view);
   });
 }
 

src/store/modules/tagsView.ts

@@ -1,7 +1,8 @@
 export const useTagsViewStore = defineStore("tagsView", () => {
   const visitedViews = ref<TagView[]>([]);
   const cachedViews = ref<string[]>([]);
-
+  const router = useRouter();
+  const route = useRoute();
   /**
    * 添加已访问视图到已访问视图列表中
    */
@@ -189,6 +190,44 @@ export const useTagsViewStore = defineStore("tagsView", () => {
     });
   }
 
+  /**
+   * 关闭当前tagView
+   */
+  function closeCurrentView() {
+    const tags: TagView = {
+      name: route.name as string,
+      title: route.meta.title as string,
+      path: route.path,
+      fullPath: route.fullPath,
+      affix: route.meta?.affix,
+      keepAlive: route.meta?.keepAlive,
+      query: route.query,
+    };
+    delView(tags).then((res: any) => {
+      if (isActive(tags)) {
+        toLastView(res.visitedViews, tags);
+      }
+    });
+  }
+  function isActive(tag: TagView) {
+    return tag.path === route.path;
+  }
+
+  function toLastView(visitedViews: TagView[], view?: TagView) {
+    const latestView = visitedViews.slice(-1)[0];
+    if (latestView && latestView.fullPath) {
+      router.push(latestView.fullPath);
+    } else {
+      // now the default is to redirect to the home page if there is no tags-view,
+      // you can adjust it according to your needs.
+      if (view?.name === "Dashboard") {
+        // to reload home page
+        router.replace("/redirect" + view.fullPath);
+      } else {
+        router.push("/");
+      }
+    }
+  }
   return {
     visitedViews,
     cachedViews,
@@ -207,5 +246,8 @@ export const useTagsViewStore = defineStore("tagsView", () => {
     delAllViews,
     delAllVisitedViews,
     delAllCachedViews,
+    closeCurrentView,
+    isActive,
+    toLastView,
   };
 });