pqs-9100_client/frontend/src/layouts/components/Tabs/index.vue

<template>
  <div class='tabs-box'>
    <div class='tabs-menu'>
      <el-tabs v-model='tabsMenuValue' type='card' @tab-click='tabClick' @tab-remove='tabRemove'>
        <el-tab-pane v-for='item in tabsMenuList' :key='item.path' :label='item.title' :name='item.path'
                     :closable='item.close'>
          <template #label>
            <el-icon v-show='item.icon && tabsIcon' class='tabs-icon'>
              <component :is='item.icon'></component>
            </el-icon>
            {{ item.title }}
          </template>
        </el-tab-pane>
      </el-tabs>
      <MoreButton />
    </div>
  </div>
</template>

<script setup lang='ts'>
import Sortable from 'sortablejs'
import { ref, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useGlobalStore } from '@/stores/modules/global'
import { useTabsStore } from '@/stores/modules/tabs'
import { useAuthStore } from '@/stores/modules/auth'
import { TabsPaneContext, TabPaneName } from 'element-plus'
import MoreButton from './components/MoreButton.vue'

const route = useRoute()
const router = useRouter()
const tabStore = useTabsStore()
const authStore = useAuthStore()
const globalStore = useGlobalStore()

const tabsMenuValue = ref(route.fullPath)
const tabsMenuList = computed(() => tabStore.tabsMenuList)
const tabsIcon = computed(() => globalStore.tabsIcon)

onMounted(() => {
  tabsDrop()
  initTabs()
})


// 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
watch(
  () => route.fullPath,
  () => {
    if (route.meta.isFull) return
    if (route.meta.hideTab){
      tabsMenuValue.value = route.meta.parentPath as string
    }else{
      tabsMenuValue.value = route.fullPath
      const tabsParams = {
        icon: route.meta.icon as string,
        title: route.meta.title as string,
        path: route.fullPath,
        name: route.name as string,
        close: !route.meta.isAffix,
        isKeepAlive: route.meta.isKeepAlive as boolean,
      }
      tabStore.addTabs(tabsParams)
    }
  },
  { immediate: true },
)

// 初始化需要固定的 tabs
const initTabs = () => {
  authStore.flatMenuListGet.forEach(item => {
    if (item.meta.isAffix && !item.meta.isHide && !item.meta.isFull) {
      const tabsParams = {
        icon: item.meta.icon,
        title: item.meta.title,
        path: item.path,
        name: item.name,
        close: !item.meta.isAffix,
        isKeepAlive: item.meta.isKeepAlive,
        unshift:true
      }
      tabStore.addTabs(tabsParams)
    }
  })
}

// tabs 拖拽排序
const tabsDrop = () => {
  Sortable.create(document.querySelector('.el-tabs__nav') as HTMLElement, {
    draggable: '.el-tabs__item',
    animation: 300,
    onEnd({ newIndex, oldIndex }) {
      const tabsList = [...tabStore.tabsMenuList]
      const currRow = tabsList.splice(oldIndex as number, 1)[0]
      tabsList.splice(newIndex as number, 0, currRow)
      tabStore.setTabs(tabsList)
    },
  })
}

// Tab Click
const tabClick = (tabItem: TabsPaneContext) => {
  const fullPath = tabItem.props.name as string
  console.log("🚀 ~ tabClick ~ fullPath:", tabItem)
  router.push(fullPath)
}

// Remove Tab
const tabRemove = (fullPath: TabPaneName) => {
  tabStore.removeTabs(fullPath as string, fullPath == route.fullPath)
}
</script>

<style scoped lang='scss'>
@import "./index.scss";
</style>