menduner/src/layout/enterprise.vue

<template>
  <div class="parent d-flex flex-column">
    <Headers class="headers"></Headers>
    <div class="content d-flex">
      <side class="content-sticky" v-if="!router.currentRoute.value?.meta?.hideSide"></side>
      <div class="content-box d-flex flex-column" :style="`width: ${ !isInWhiteList(route.path, whiteList) ? 'calc(100vw - 250px)' : '100%'}`">
        <div v-if="!isInWhiteList(route.path, whiteList)" class="breadcrumbs_sticky">
          <div class=" d-flex align-center justify-space-between">
            <v-breadcrumbs :items="breadcrumbs" elevation="3">
              <template v-slot:item="{ item }">
                <span class="text" :class="{active: !item.disabled}" @click="toPath(item)">{{ item.text }}</span>
              </template>
            </v-breadcrumbs>
          </div>
          <v-divider></v-divider>
        </div>
        <div class="box pa-3">
          <div v-if="!isInWhiteList(route.path, whiteList)" class="box-content">
            <router-view :key="key"></router-view>
          </div>
          <div v-else class="full">
            <router-view :key="key"></router-view>
          </div>
        </div>
      </div>
    </div>
    <Slider class="slider"></Slider>
  </div>
</template>

<script setup>
defineOptions({ name: 'enterprise-layout-index' })
import Headers from './company/navBar.vue'
import Slider from './company/slider.vue'
import side from './company/side.vue'
import { useRouter, useRoute } from 'vue-router'
import { watch, ref, computed } from 'vue'

const router = useRouter()
const route = useRoute()
const key = computed(() => {
  return route.path + Math.random()
})

const whiteList = [
  '/recruit/enterprise/talentPool/details',
  '/recruit/enterprise/position/details',
  '/recruit/enterprise/purchasePackage',
  '/recruit/enterprise/systemManagement/groupAccount/invite/0',
  '/recruit/enterprise/systemManagement/groupAccount/invite/1'
]
// 查询是否在白名单内，在则不展示面包屑
const isInWhiteList = (url, whiteList)=> {
  const path = url.split('?')[0]
  for (const item of whiteList) {
    if (path.startsWith(item)) {
      return true
    }
  }
  return false
}

const breadcrumbs = ref([])
const getTitle = (list) => {
  const arr = list.map((item, index) => {
    if (item.path === list[index - 1]?.path) return false
    const text = item.meta.title
    const obj = { text,  to: item.path }
    return obj
  }).filter(e => e)
  arr[arr.length - 1].disabled = true
  arr[arr.length - 1].link = true
  breadcrumbs.value = arr
}

watch(
  () => route.matched,
  (val) => {
    getTitle(val)
  },
  { immediate: true },
  { deep: true }
)

const toPath = ({ disabled, to }) => {
  if (disabled) {
    event.preventDefault()
    return
  }
  router.push(to)
}
</script>

<style lang="scss" scoped>
$top: 50px;
.parent {
  background-color: var(--default-bgc);
}
.headers {
  position: sticky;
  top: 0;
  z-index: 999;
}
.box {
  height: 0;
  flex: 1;
  height: calc(100vh - 50px);
  &-content {
    width: 100%;
    min-height: 100%;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
.full {
  height: calc(100vh - $top);
  width: 100%;
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}
.slider {
  position: fixed;
  bottom: 50%;
  right: 24px;
  translate: 0 50%;
  z-index: 999;
}
.content {
  height: 0;
  flex: 1;

  &-sticky {
    position: sticky;
    top: $top;
    height: calc(100vh - $top);
  }
}
.breadcrumbs_sticky {
  position: sticky;
  top: $top;
  background: #FFF;
  z-index: var(--zIndex-breadcrumbs);
  border-left: 1px solid #eaecef;
}
.text {
  color: var(--color-999);
  font-size: 14px;
  &.active {
    color: var(--v-primary-base);
    cursor: pointer;
  }
}
/* 滚动条样式 */
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 0px;
  height: 0px;
}
/* 滚动条内的轨道 */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0;
}
/* 滚动条内的滑块 */
::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.15);
  transition: color 0.2s ease;
}
</style>