hi-ucs/back/src/views/main-content.vue

<template>
  <main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab }]">
    <!-- tab展示内容 -->
    <template v-if="$route.meta.isTab">
      <el-dropdown class="aui-content--tabs-tools">
        <i class="el-icon-arrow-down"></i>
        <el-dropdown-menu slot="dropdown" :show-timeout="0">
          <el-dropdown-item
            @click.native="tabRemoveHandle($store.state.contentTabsActiveName)"
            >{{ $t("contentTabs.closeCurrent") }}</el-dropdown-item
          >
          <el-dropdown-item @click.native="tabsCloseOtherHandle()">{{
            $t("contentTabs.closeOther")
          }}</el-dropdown-item>
          <el-dropdown-item @click.native="tabsCloseAllHandle()">{{
            $t("contentTabs.closeAll")
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-tabs
        v-model="$store.state.contentTabsActiveName"
        @tab-click="tabSelectedHandle"
        @tab-remove="tabRemoveHandle"
      >
        <el-tab-pane
          v-for="item in $store.state.contentTabs"
          :key="item.name"
          :name="item.name"
          :label="item.title"
          :closable="item.name !== 'home'"
          :class="{ 'is-iframe': tabIsIframe(item.iframeURL) }"
        >
          <template v-if="item.name === 'home'">
            <svg
              slot="label"
              class="icon-svg aui-content--tabs-icon-nav"
              aria-hidden="true"
            >
              <use xlink:href="#icon-home"></use>
            </svg>
          </template>
          <iframe
            v-if="tabIsIframe(item.iframeURL)"
            :src="item.iframeURL"
            width="100%"
            height="100%"
            frameborder="0"
            scrolling="yes"
          ></iframe>
          <keep-alive v-else>
            <router-view
              v-if="item.name === $store.state.contentTabsActiveName"
            />
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </template>
    <!-- 其他方式, 展示内容 -->
    <template v-else>
      <keep-alive>
        <router-view />
      </keep-alive>
    </template>
  </main>
</template>

<script>
import { isURL } from '@/utils/validate'
export default {
  data () {
    return {}
  },
  methods: {
    // tabs, 是否通过iframe展示
    tabIsIframe (url) {
      return isURL(url)
    },
    // tabs, 选中tab
    tabSelectedHandle (tab) {
      tab = this.$store.state.contentTabs.filter(
        (item) => item.name === tab.name
      )[0]
      if (tab) {
        this.$router.push({
          name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
          params: { ...tab.params },
          query: { ...tab.query }
        })
      }
    },
    // tabs, 删除tab
    tabRemoveHandle (tabName) {
      if (tabName === 'home') {
        return false
      }
      console.log('删除', this.$store.state.contentTabs)
      if (this.$store.state.contentTabs.length !== 1) {
        this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
          (item) => item.name !== tabName
        )
      } else {
        this.$message({
          message: '必须打开一个窗口！',
          type: 'warning'
        })
      }
      // if (this.$store.state.contentTabs.length <= 0) {
      //   this.$store.state.sidebarMenuActiveName =
      //     this.$store.state.contentTabsActiveName = 'home'
      //   return false
      // }
      // 当前选中tab被删除
      if (tabName === this.$store.state.contentTabsActiveName) {
        const tab =
          this.$store.state.contentTabs[
            this.$store.state.contentTabs.length - 1
          ]
        this.$router.push({
          name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
          params: { ...tab.params },
          query: { ...tab.query }
        })
      }
    },
    // tabs, 关闭其它
    tabsCloseOtherHandle () {
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
        (item) => {
          return (
            item.name === 'home' ||
            item.name === this.$store.state.contentTabsActiveName
          )
        }
      )
    },
    // tabs, 关闭全部
    tabsCloseAllHandle () {
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
        (item) => item.name === 'home'
      )
      this.$router.push({ name: 'home' })
    }
  }
}
</script>
<style scoped lang="scss">
.aui-content {
  .el-tabs {
    ::v-deep .el-tabs__header {
      left: 266px;
      .el-tabs__nav-wrap {
        .el-tabs__nav-scroll {
          .el-tabs__nav {
            .el-tabs__item ::after {
              background-color: #0058e1;
            }
          }
        }
      }
    }
  }
}
</style>