zhzf/client/src/layouts/index-cvi.vue

<!--
 * @MoudelName: 基本视图
 * @Company: 湖南xx科技有限公司
 * @Author: LJ
 * @Date: 2024-04-08 17:27:06
-->
<template>
  <div class="cvi-layout-container">
    <el-header>
      <Header />
    </el-header>
    <el-main
      v-if="
        projectName == 'tyrz' ||
        projectName == 'zbzx' ||
        projectName == 'rwzx' ||
        projectName == 'jqzx' ||
        projectName == 'zhgl' ||
        projectName == 'zdry' ||
        projectName == 'jcjcgk' ||
        projectName == 'zygl'
      "
    >
      <el-menu
        :default-active="activeMenu"
        background-color="#545c64"
        text-color="#ffffff"
        active-text-color="#ffffff"
        :unique-opened="true"
        :default-openeds="defaultOpends"
      >
        <template v-for="item in allMenuData[projectName]">
          <MenuItem v-if="!item.hidden" @select="handleSelect" :key="item.gncdbh" :item="item" />
        </template>
      </el-menu>
      <div class="cvi-left">
        <ElTabs :tabsdata="tabsData" @selected-data="handleTabClick" @tab-remove="removeTab"></ElTabs>
        <Content :tabHeight="true" />
      </div>
    </el-main>
    <el-main v-else>
      <Content />
    </el-main>
  </div>
</template>


<script setup>
  import { ref, watch, onMounted, defineEmits, defineComponent } from 'vue'
  import { useRouter } from 'vue-router'
  import { useUserStore } from '@/stores/modules/user'
  import { useRouteStore } from '@/stores/modules/router'
  import MenuItem from '@/components/ElMenu/index.vue'
  import ElTabs from '@/components/ElTabs/index.vue'
  import Header from './header/index-cvi.vue'
  import Content from './content/index-cvi.vue'

  const router = useRouter()
  const userStore = useUserStore()
  const routerStore = useRouteStore()

  const allMenuData = routerStore.allMenuData
  const currentPageURL = window.location.href
  const urlParts = currentPageURL.split('/')
  const projectName = urlParts[3]
  const activeMenu = ref('')
  const tabsData = ref([])
  const defaultOpends = ref([])

  const handleSelect = (item) => {
    activeMenu.value = item.path
    userStore.frameUrl = item.frameUrl
    router.push({ path: item.path, query: { frameUrl: item.frameUrl, label: item.label } })
    const selectedItem = findItemByRoute(allMenuData[projectName], item.path)
    addTab(selectedItem)
  }
  const findItemByRoute = (items, path) => {
    for (const item of items) {
      if (item.path === path) {
        return item
      }
      if (item.children) {
        const found = findItemByRoute(item.children, path)
        if (found) {
          return found
        }
      }
    }
    return null
  }
  const addTab = (item, isActive) => {
    const existingTab = tabsData.value.find((tab) => tab.path === item.path)
    if (!existingTab) {
      if (tabsData.value.length >= 10) {
        tabsData.value.splice(0, 1)
      }
      tabsData.value.push({
        path: item.path,
        label: item.label,
        name: item.name,
        icon: item.icon,
        noClosable: item.noClosable,
        frameUrl: item.frameUrl,
        query: item.query,
      })
      routerStore.setVisitedRoutes(tabsData.value)
      if (isActive) return
      activeMenu.value = item.path
      routerStore.setCurrentRoute(activeMenu.value)
    } else {
      activeMenu.value = item.path
      routerStore.setCurrentRoute(item.path)
    }
  }
  const handleTabClick = (data) => {
    const currentRoute = tabsData.value.find((item) => item.path == data.props.name)
    activeMenu.value = data.props.name
    routerStore.setCurrentRoute(activeMenu.value)
    router.push({ path: data.props.name, query: currentRoute.query })
  }

  const removeTab = (name, type) => {
    const index = tabsData.value.findIndex((item) => item.path === name)
    if (index !== -1) {
      if (type == 'current') {
        if (tabsData.value.length > 1) {
          tabsData.value.splice(index, 1)
          if (activeMenu.value === name) {
            activeMenu.value = tabsData.value.length > 0 ? tabsData.value[tabsData.value.length - 1].path : ''
            const currentRoute = tabsData.value.find((item) => item.path == activeMenu.value)
            routerStore.setCurrentRoute(activeMenu.value)
            routerStore.setVisitedRoutes(tabsData.value)
            router.push({
              path: activeMenu.value,
              query: { frameUrl: currentRoute.frameUrl, label: currentRoute.label },
            })
          }
        }
      } else {
        for (let i = tabsData.value.length - 1; i >= 0; i--) {
          if (tabsData.value[i].path !== name && !tabsData.value[i].noClosable) {
            tabsData.value.splice(i, 1)
            routerStore.setVisitedRoutes(tabsData.value)
          }
        }
      }
    }
  }

  const initNoClosableTabs = (routes) => {
    routes.forEach((route) => {
      if (route.noClosable) addTab(route, true)
      if (route.children) initNoClosableTabs(route.children)
    })
  }

  const initTags = () => {
    activeMenu.value = router.currentRoute.value.path
    routerStore.setCurrentRoute(router.currentRoute.value.path)
  }

  onMounted(async () => {
    initTags()
    const projectNameArr = ['tyrz', 'rwzx', 'jqzx', 'zhgl', 'zdry', 'zygl']
    if (projectNameArr.indexOf(projectName) != -1) {
      activeMenu.value = routerStore.currentRoute
      tabsData.value = routerStore.visitedRoutes
    }
    if (projectName == 'zbzx') {
      initNoClosableTabs(allMenuData[projectName])
      activeMenu.value = allMenuData[projectName][0].children[1].path
      activeMenu.value = routerStore.currentRoute
      tabsData.value = routerStore.visitedRoutes
    }
  })
</script>

<style lang="scss" scoped>
  .cvi-layout-container {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    transition: all 0.4s;

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

    .el-main {
      display: flex;
      overflow: hidden;
      width: 100%;
      height: calc(100% - 56px);
      padding: 0;

      .cvi-left {
        width: 100%;
      }

      .cvi-left::-webkit-scrollbar {
        width: 0;
      }
    }

    .newHeight {
      height: 100%;
    }
  }
</style>