tabs操作优化

src/components/common-form/index.vue

@@ -77,7 +77,7 @@ const rules = computed(() => {
   return ruleResult
 })
 
-const form = ref(null)
+const form = ref()
 
 </script>
 

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>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { useMenuInfo, useMenuName } from '@/components/utils'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useTabsViewStore } from '@/stores/TabsViewStore'
 
 const tabsViewStore = useTabsViewStore()
@@ -13,9 +13,26 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  removeHistoryTab: Function,
-  removeOtherHistoryTabs: Function,
-  refreshHistoryTab: Function
+  removeHistoryTab: {
+    type: Function,
+    required: true
+  },
+  removeOtherHistoryTabs: {
+    type: Function,
+    required: true
+  },
+  removeHistoryTabs: {
+    type: Function,
+    required: true
+  },
+  refreshHistoryTab: {
+    type: Function,
+    required: true
+  },
+  onDropdownVisibleChange: {
+    type: Function,
+    required: true
+  }
 })
 
 const menuName = computed(() => {
@@ -35,6 +52,12 @@ const menuIcon = computed(() => {
   }
   return null
 })
+const dropdownRef = ref()
+
+defineExpose({
+  dropdownRef
+})
+
 </script>
 
 <template>
@@ -42,7 +65,12 @@ const menuIcon = computed(() => {
     :name="tabItem.path"
   >
     <template #label>
-      <el-dropdown trigger="contextmenu">
+      <el-dropdown
+        :id="tabItem.path"
+        ref="dropdownRef"
+        trigger="contextmenu"
+        @visible-change="onDropdownVisibleChange($event, tabItem)"
+      >
         <span class="custom-tabs-label">
           <common-icon
             v-if="tabsViewStore.isShowTabIcon && menuIcon"
@@ -58,12 +86,32 @@ const menuIcon = computed(() => {
               <common-icon icon="refresh" />
               {{ $t('common.label.refresh') }}
             </el-dropdown-item>
-            <el-dropdown-item @click="removeHistoryTab(tabItem.path)">
+            <el-dropdown-item
+              v-if="tabsViewStore.hasCloseDropdown(tabItem, 'close')"
+              @click="removeHistoryTab(tabItem.path)"
+            >
               <common-icon icon="close" />
               {{ $t('common.label.close') }}
             </el-dropdown-item>
-            <el-dropdown-item @click="removeOtherHistoryTabs(tabItem)">
-              <common-icon icon="close" />
+            <el-dropdown-item
+              v-if="tabsViewStore.hasCloseDropdown(tabItem, 'left')"
+              @click="removeHistoryTabs(tabItem, 'left')"
+            >
+              <common-icon icon="KeyboardDoubleArrowLeftFilled" />
+              {{ $t('common.label.closeLeft') }}
+            </el-dropdown-item>
+            <el-dropdown-item
+              v-if="tabsViewStore.hasCloseDropdown(tabItem, 'right')"
+              @click="removeHistoryTabs(tabItem, 'right')"
+            >
+              <common-icon icon="KeyboardDoubleArrowRightFilled" />
+              {{ $t('common.label.closeRight') }}
+            </el-dropdown-item>
+            <el-dropdown-item
+              v-if="tabsViewStore.hasCloseDropdown(tabItem, 'other')"
+              @click="removeOtherHistoryTabs(tabItem)"
+            >
+              <common-icon icon="PlaylistRemoveFilled" />
               {{ $t('common.label.closeOther') }}
             </el-dropdown-item>
           </el-dropdown-menu>