tabs操作优化

src/components/common-tabs-view/index.vue

@@ -8,11 +8,10 @@ import TabsViewItem from '@/components/common-tabs-view/tabs-view-item.vue'
 const router = useRouter()
 const route = useRoute()
 const tabsViewStore = useTabsViewStore()
-const currentTabValue = ref('')
 watch(route, () => {
   if (route.path) {
     tabsViewStore.addHistoryTab(route)
-    currentTabValue.value = route.path
+    tabsViewStore.currentTab = route.path
   }
 })
 
@@ -20,13 +19,14 @@ onMounted(() => {
   if (!tabsViewStore.historyTabs.length) {
     tabsViewStore.addHistoryTab(route)
   }
-  currentTabValue.value = route.path
+  tabsViewStore.currentTab = route.path
 })
 
 const selectHistoryTab = path => {
   const tab = isString(path) ? tabsViewStore.findHistoryTab(path) : path
   if (tab) {
     router.push(tab)
+    tabsViewStore.addCachedTab(tab)
   }
 }
 
@@ -40,6 +40,7 @@ const removeHistoryTab = path => {
 const refreshHistoryTab = tab => {
   const time = new Date().getTime()
   router.push(`${tab.path}?${time}`)
+  tabsViewStore.addCachedTab(tab)
 }
 
 const removeOtherHistoryTabs = tab => {
@@ -47,12 +48,29 @@ const removeOtherHistoryTabs = tab => {
   selectHistoryTab(tab.path)
 }
 
+const removeHistoryTabs = (tab, type) => {
+  tabsViewStore.removeHistoryTabs(tab, type)
+  selectHistoryTab(tab.path)
+}
+
+const tabItems = ref()
+const onDropdownVisibleChange = (visible, tab) => {
+  if (visible) {
+    tabItems.value.forEach(({ dropdownRef }) => {
+      console.info(Object.assign({}, dropdownRef))
+      if (dropdownRef.id !== tab.path) {
+        dropdownRef.handleClose()
+      }
+    })
+  }
+}
+
 </script>
 
 <template>
   <el-tabs
     v-bind="$attrs"
-    v-model="currentTabValue"
+    v-model="tabsViewStore.currentTab"
     class="common-tabs"
     type="card"
     :closable="tabsViewStore.historyTabs.length>1"
@@ -61,10 +79,13 @@ const removeOtherHistoryTabs = tab => {
   >
     <tabs-view-item
       v-for="item in tabsViewStore.historyTabs"
+      ref="tabItems"
       :key="item.path"
       :refresh-history-tab="refreshHistoryTab"
       :remove-history-tab="removeHistoryTab"
       :remove-other-history-tabs="removeOtherHistoryTabs"
+      :remove-history-tabs="removeHistoryTabs"
+      :on-dropdown-visible-change="onDropdownVisibleChange"
       :tab-item="item"
     />
   </el-tabs>