ShibeiWorkPlatform_Frontend/src/views/main-content.vue

<template>
  <main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab }]">
    <!-- tab展示内容 -->
    <template v-if="$route.meta.isTab && !$store.state.inIframe">
      <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>
          <template v-if="tabIsIframe(item.iframeURL)">
            <iframe :src="item.iframeURL + '?token=' + token + '&customerId=' + customerId"
                  ref="iframes"
                  class="iframes"
                  id="iframes"
                  width="100%"
                  height="100%"
                  frameborder="0"
                  scrolling="yes"
                  ></iframe>
                   <!-- <div v-if="tabIsIframe(item.iframeURL)" id="addend-iframe" style="height: 100%;"> </div> -->
          </template>
          <keep-alive v-else>
            <router-view v-if="item.name === $store.state.contentTabsActiveName"
                         @changeCustomerName="changeCustomerName" />
          </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'
import Cookie from 'js-cookie'
export default {
  data () {
    return {
      iframeUrl: '',
      token: '',
      customerId: ''
    }
  },
  created () {
    // this.$nextTick(() => {
    //   this.sendMessage()
    // })
    this.token = Cookie.get('token')
    this.customerId = localStorage.getItem('customerId')
  },
  methods: {
    changeCustomerName (customerName) {
      this.$emit('changeCustomerName', customerName)
    },
    // tabs, 是否通过iframe展示
    tabIsIframe (url) {
      // this.appendIframe(url)
      this.iframeUrl = url + '?token=' + Cookie.get('token') + '&customerId=' + localStorage.getItem('customerId')
      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': tab.name,
          'params': { ...tab.params },
          'query': { ...tab.query }
        })
      }
    },
    // tabs, 删除tab
    tabRemoveHandle (tabName) {
      if (tabName === 'home') {
        return false
      }
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
      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) {
        let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1]
        this.$router.push({
          name: 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' })
    },
    sendMessage () {
      // const iframe = this.$refs.iframes.contentWindow
      const iframe = document.getElementsByClassName('iframes')[0].contentWindow

      console.log('iframe', iframe)
      // iframe.postMessage({
      //   token: Cookie.get('token'),
      //   customerId: localStorage.getItem('customerId')
      // }, '*')
      iframe.postMessage({ name: 'lalalal' }, '*')
    },
  }
}
</script>