zjugis_OA/client/src/views/OaSystem/oaLayout/index.vue

<template>
  <div class="_layout">
    <div class="layout-left">
      <Menus />
    </div>
    <div class="layout-right">
      <div class="layout-header">
        <Header />
        <TagList />
      </div>
      <div class="layout-content" v-show="isFrameView">
        <iframe
          v-show="currentIframeId === item['query']['iFrameId']"
          v-for="(item, index) in iframeViews"
          :key="index"
          :src="item['query']['url']"
        ></iframe>
      </div>
      <div class="layout-content" v-show="!isFrameView">
        <router-view>
          <template #default="{ Component, route }">
            <keep-alive :include="getCaches">
              <component :is="Component" :key="route.fullPath" />
            </keep-alive>
          </template>
        </router-view>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useTagsViewStore } from '@/store/modules/tagsView'
import Header from './header.vue'
import TagList from './tagList.vue'
import Menus from './menus.vue'
import subscribe from '@/utils/Subscribe'

defineOptions({ name: 'Layout' })

const tagsViewStore = useTagsViewStore()

const route = useRoute()
const isFrameView = ref<boolean>(false)
const iframeViews = ref<any[]>([])
const currentIframeId = ref<string>('')

const getCaches = computed((): string[] => {
  return tagsViewStore.getCachedViews
})
const filterIframe = (arr): any[] => {
  return arr.filter((item) => {
    if (item && item.query && item.query.iframe == '1') {
      return item.query.iframe == '1'
    }
  })
}

subscribe.on('update:tagsView', () => {
  isFrameView.value = route.query.iframe === '1' ? true : false
  nextTick(() => {
    iframeViews.value = filterIframe(tagsViewStore.visitedViews)
    if (!route.query.iframe) {
      currentIframeId.value = ''
    } else {
      currentIframeId.value = route.query.iFrameId as string
    }
  })
})
watch(
  () => route.query,
  () => {
    isFrameView.value = route.query.iframe === '1' ? true : false
    nextTick(() => {
      iframeViews.value = filterIframe(tagsViewStore.visitedViews)
      if (!route.query.iframe) {
        currentIframeId.value = ''
      } else {
        currentIframeId.value = route.query.iFrameId as string
      }
    })
  },
  {
    immediate: true
  }
)
</script>
<style>
@import url('./content.scss');
</style>
<style lang="scss" scoped>
._layout {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;

  .layout-left {
    width: 184px;
    height: 100%;
    background: linear-gradient(180deg, #336fb6 0%, #0c4689 100%);
  }

  .layout-right {
    width: calc(100% - 184px);
    height: 100%;
    padding: 15px;
    background: #eaf1f9;

    .layout-header {
      width: 100%;
      height: 100px;
    }

    .layout-content {
      width: 100%;
      height: calc(100% - 140px);
      margin-top: 40px;
    }
  }
}

div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
  box-sizing: border-box;
}

iframe {
  width: 100%;
  height: 100%;
  border: 0px;
}
</style>