xyc
2024-08-02 7abc95a191d2c1a9bb9ff8fd7fb05470a0d4e86b
web/src/views/layout/main-content.vue
@@ -1,20 +1,25 @@
<template>
  <main  style="display: flex;flex-direction: column;position: relative" >
  <main style="display: flex;flex-direction: column;position: relative">
    <!-- tab展示内容 -->
    <template v-if="$route.meta.isTab">
      <!--<el-dropdown class="aui-content&#45;&#45;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>-->
      <!--<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-form :inline="true" style="position:absolute;right:10px; margin-top:3px;z-index:9;overflow: hidden;white-space: nowrap">
        <zt-button class="CloseHandle" type="primary" @click.native="tabsCloseOtherHandle()">{{ $t('contentTabs.closeOther') }}</zt-button>
        <zt-button class="CloseHandle" type="primary" @click.native="tabsCloseAllHandle()">{{ $t('contentTabs.closeAll') }}</zt-button>
      <el-form :inline="true"
               style="position:absolute;right:10px; margin-top:3px;z-index:9;overflow: hidden;white-space: nowrap">
        <zt-button class="CloseHandle" type="primary" @click.native="tabsCloseOtherHandle()">{{
          $t('contentTabs.closeOther') }}
        </zt-button>
        <zt-button class="CloseHandle" type="primary" @click.native="tabsCloseAllHandle()">{{ $t('contentTabs.closeAll')
          }}
        </zt-button>
      </el-form>
      <el-tabs class="tabNext" v-model="$store.state.contentTabsActiveName" @tab-click="tabSelectedHandle"
               @tab-remove="tabRemoveHandle"
@@ -82,12 +87,25 @@
    },
    computed: {
      key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
        let key = ''
        if (this.$route.name !== undefined) {
          let tab = this.$store.state.contentTabs.filter(item => item.name === this.$route.name)[0]
          console.log(tab, 'key this.$store.state.contentTabs')
          key = this.$route.name
          if (!tab.isRefresh) {
            key += +new Date()
          }
        } else {
          key = this.$route + +new Date()
        }
        console.log(key, 'key')
        return key
      }
    },
    methods: {
      // tabs, 是否通过iframe展示
      tabIsIframe(url) {
        console.log(isURL(url), 'isURL(url)')
        return isURL(url)
      },
      reload() {
@@ -98,8 +116,9 @@
      },
      // tabs, 选中tab
      tabSelectedHandle(tab) {
        console.log(tab, 'tabSelectedHandle1')
        tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)[0]
        if (tab && (tab.name === 'miantainHome-home' || 'replaceProblemHome-home')) {
        if (tab && (tab.name === 'miantainHome-home' || tab.name === 'replaceProblemHome-home')) {
          this.$nextTick(() => {
            this.$router.push({
              'name': tab.name,
@@ -110,6 +129,7 @@
          })
          // this.reload()
        } else if (tab && tab.name !== this.$router.history.current.name) {
          console.log(tab, 'tabSelectedHandle3')
          this.$nextTick(() => {
            this.$router.push({
              'name': tab.name,
@@ -120,7 +140,7 @@
          })
        }
      },
      tabRemoveCurrentHandle(){
      tabRemoveCurrentHandle() {
        let tabName = this.$route.name
        tabRemoveHandle(tabName)
      },
@@ -190,13 +210,15 @@
  /* #tabNext .el-tabs__nav-next{*/
  /*  right: 21% !important;*/
  /*}*/
  .zt .tabNext>.el-tabs__header>.el-tabs__nav-wrap{
    width:80% ;
  .zt .tabNext > .el-tabs__header > .el-tabs__nav-wrap {
    width: 80%;
  }
  .zt .tabNext .el-tabs__nav-wrap.is-scrollable{
    width:80% ;
  .zt .tabNext .el-tabs__nav-wrap.is-scrollable {
    width: 80%;
  }
  #tab-home{
  #tab-home {
    padding-left: 10px;
  }
</style>