ele-usky-admin/src/layout/vab-tabs/index.vue

<template>
  <div class="vab-tabs">
    <div
      class="vab-tabs-left-panel"
      :style="
        this.$route.path === '/index/index'
          ? 'border-bottom: 1px solid rgba(0, 0, 0, 0.04);'
          : ''
      "
    >
      <!-- 缩进按钮 start -->
      <!-- <div
        style="
          display: inline-block;
          float: left;
          margin-top: 14px;
          margin-right: 11px;
        "
      >
        <menu-unfold-outlined
          v-if="collapse"
          class="trigger"
          @click="toggleCollapse"
        />
        <menu-fold-outlined v-else class="trigger" @click="toggleCollapse" />
      </div> -->
      <!-- 缩进按钮 start -->

      <!-- 面包屑start -->
      <!-- <el-breadcrumb separator="/" style="display: inline-block">
        <el-breadcrumb-item
          v-for="(item, ind) in breadListLast"
          :key="ind"
          :to="item.path"
        >
          {{ item.title }}
        </el-breadcrumb-item>
      </el-breadcrumb> -->

      <!-- <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item, ind) in breadListLast"
          :key="ind"
          :to="item.path"
        >
          {{ item.title }}
        </el-breadcrumb-item>
      </el-breadcrumb> -->
      
      <!-- {{visitedRoutes}} -->

      <a-tabs
        @tab-click="handleTabClick"
        @edit="handleTabRemove"
        v-model:activeKey="tabActive"
        hide-add
        type="editable-card"
      >
        <a-tab-pane
          v-for="item in visitedRoutes"
          :key="item.fullPath"
          :closable="!isAffix(item)"
          :tab="item.meta.title"
        ></a-tab-pane>
      </a-tabs>
    </div>

    <div class="version-header" v-if="this.$route.path === '/index'">
      <div style="width: 50%">
        <el-select
          v-model="this.$store.state.siteId"
          class="m-2"
          placeholder="Select"
          size="large"
          style="width: 280px; margin-top: 7.5px"
        >
          <el-option
            v-for="item in this.$store.state.siteList"
            :key="item.id"
            :label="item.siteName"
            :value="item.id"
          />
        </el-select>
      </div>

      <div style="width: 50%; text-align: right; user-select: none">
        {{ time }}
      </div>
    </div>
    <!-- 面包屑end -->

    <!-- <div class="vab-tabs-right-panel">
      <a-dropdown>
        <template v-slot:overlay>
          <a-menu @click="handleClick">
            <a-menu-item key="closeOthersTabs">
              <a>关闭其他</a>
            </a-menu-item>
            <a-menu-item key="closeLeftTabs">
              <a>关闭左侧</a>
            </a-menu-item>
            <a-menu-item key="closeRightTabs">
              <a>关闭右侧</a>
            </a-menu-item>
            <a-menu-item key="closeAllTabs">
              <a>关闭全部</a>
            </a-menu-item>
          </a-menu>
        </template>
        <a-button style="margin-left: 8px">
          更多
          <DownOutlined />
        </a-button>
      </a-dropdown>
    </div> -->
  </div>
</template>

<script>
// import { DownOutlined } from '@ant-design/icons-vue'
import { mapActions, mapGetters, useStore } from 'vuex'
// import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
export default {
  name: 'VabTabs',
  components: {
    // DownOutlined,
    // MenuUnfoldOutlined,
    // MenuFoldOutlined,
  },
  data() {
    return {
      breadListLast: [],
      affixTabs: [],
      tabActive: null,
      created: false,
      time: '',
    }
  },
  computed: {
    ...mapGetters({
      visitedRoutes: 'tagsBar/visitedRoutes',
      routes: 'routes/routes',
    }),
  },
  watch: {
    $route(route) {
      this.loadChange()
      this.addTabs(route)
    },
  },
  mounted() {
    const store = useStore()
    setInterval(() => {
      store.commit('getTimeAll')
      var time = store.state.Time_All
      this.time =
        time[0] +
        '年' +
        (time[1] < 9 ? '0' + (time[1] + 1) : time[1] + 1) +
        '月' +
        (time[2] < 10 ? '0' + time[2] : time[2]) +
        '日 ' +
        (time[3] < 10 ? '0' + time[3] : time[3]) +
        ':' +
        (time[4] < 10 ? '0' + time[4] : time[4]) +
        ':' +
        (time[5] < 10 ? '0' + time[5] : time[5])
    }, 0)
  },
  created() {
    this.initAffixTabs(this.routes)
    this.addTabs(this.$route)
    this.loadChange()
  },
  methods: {
    loadChange() {
      this.breadListLast = []

      this.$route.matched.map((val) => {
        this.breadListLast.push({
          path: val.path,
          title: val.meta.title,
        })
      })
    },

    ...mapActions({
      addVisitedRoute: 'tagsBar/addVisitedRoute',
      delVisitedRoute: 'tagsBar/delVisitedRoute',
      delOthersVisitedRoutes: 'tagsBar/delOthersVisitedRoutes',
      delLeftVisitedRoutes: 'tagsBar/delLeftVisitedRoutes',
      delRightVisitedRoutes: 'tagsBar/delRightVisitedRoutes',
      delAllVisitedRoutes: 'tagsBar/delAllVisitedRoutes',

      // toggleCollapse: 'settings/toggleCollapse',
    }),
    initAffixTabs(routes) {
      routes.forEach((route) => {
        if (route.meta && route.meta.affix) this.addTabs(route)
        if (route.children) this.initAffixTabs(route.children)
      })
    },
    async addTabs(tag) {
      console.log('tag')
      console.log(tag)

      if (tag.meta && tag.meta.title && tag.meta.tagHidden !== true) {
        let matched = [tag.name]
        if (tag.matched) matched = tag.matched.map((item) => item.name)
        await this.addVisitedRoute({
          path: tag.path,
          fullPath: tag.fullPath,
          query: tag.query,
          params: tag.params,
          name: tag.name,
          matched: matched,
          meta: { ...tag.meta },
        })
        this.tabActive = tag.fullPath
      }
    },
    isActive(route) {
      return route.path === this.$route.path
    },
    isAffix(tag) {
      return tag.meta && tag.meta.affix
    },
    handleTabClick(tab) {
      const route = this.visitedRoutes.filter((item) => item.path === tab)[0]
      if (this.$route.fullPath !== route.fullPath) this.$router.push(route)
    },
    async handleTabRemove(fullPath) {
      const view = this.visitedRoutes.find((item) => {
        return fullPath === item.fullPath
      })
      await this.delVisitedRoute(view)
      if (this.isActive(view)) this.toLastTag()
    },
    handleClick({ key }) {
      switch (key) {
        case 'closeOthersTabs':
          this.closeOthersTabs()
          break
        case 'closeLeftTabs':
          this.closeLeftTabs()
          break
        case 'closeRightTabs':
          this.closeRightTabs()
          break
        case 'closeAllTabs':
          this.closeAllTabs()
          break
      }
    },
    async closeSelectedTag(view) {
      await this.delVisitedRoute(view)
      if (this.isActive(view)) {
        this.toLastTag()
      }
    },
    async closeOthersTabs() {
      await this.delOthersVisitedRoutes(this.toThisTag())
    },
    async closeLeftTabs() {
      await this.delLeftVisitedRoutes(this.toThisTag())
    },
    async closeRightTabs() {
      await this.delRightVisitedRoutes(this.toThisTag())
    },
    async closeAllTabs() {
      await this.delAllVisitedRoutes()
      if (this.affixTabs.some((tag) => tag.path === this.toThisTag().path))
        return
      this.toLastTag()
    },
    toLastTag() {
      const latestView = this.visitedRoutes.slice(-1)[0]
      if (latestView) this.$router.push(latestView)
      else this.$router.push('/')
    },
    toThisTag() {
      const view = this.visitedRoutes.find(
        (item) => item.fullPath === this.$route.fullPath
      )
      if (this.$route.path !== view.path) this.$router.push(view)
      return view
    },
  },
}
</script>
<style lang="less">
.vab-tabs {
  // padding: 0 @vab-margin;
  background: #ffffff;
  overflow: hidden;
  &-left-panel {
    float: left;
    // width: calc(100% - 52px - @vab-margin - @vab-margin);
    width: 100%;
    padding: 0 @vab-margin;
  }
  &-right-panel {
    // float: left;
    width: 52px;
  }
  .version-header {
    display: flex;
    height: 50px;
    line-height: 50px;
    padding: 0 @vab-margin;
  }

  .ant-tabs {
    height: 50px;
    line-height: 50px;
    &-bar {
      // margin: 0 !important;
      margin-top: 9px;
      border-bottom: 0px solid red;
    }
    &-tab {
      height: 30px !important;
      margin-right: 5px !important;
      line-height: 30px !important;
      background: #ffffff !important;
      border: 1px solid #dedede !important;
      padding: 0 10px !important;
    }
    &-tab-prev,
    &-tab-next {
      height: 32px !important;
      line-height: 32px !important;
    }
    &-tab-active {
      border: 1px solid #1890ff !important;
      .ant-tabs-close-x {
        color: #1890ff !important;
      }
    }
  }
  // .el-breadcrumb {
  //   height: @vab-breadcrumb-height;
  //   line-height: @vab-breadcrumb-height;
  // }
  .el-breadcrumb {
    height: 36px;
    line-height: 36px;
  }
}

.ant-tabs-nav-container {
  font-size: 12px !important;
}
// .anticon[tabindex]{
//   position: relative;
//     top: -12px;
//     left:-5px
// }
</style>