|
|
@@ -3,8 +3,25 @@
|
|
|
<Headers class="headers"></Headers>
|
|
|
<div class="content d-flex">
|
|
|
<side class="content-sticky" v-if="!router.currentRoute.value?.meta?.hideSide"></side>
|
|
|
- <div class="pa-3 content-box">
|
|
|
- <router-view></router-view>
|
|
|
+ <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></router-view>
|
|
|
+ </div>
|
|
|
+ <div v-else class="full">
|
|
|
+ <router-view></router-view>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<Slider class="slider"></Slider>
|
|
|
@@ -12,18 +29,66 @@
|
|
|
</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 } from 'vue-router'
|
|
|
-defineOptions({ name: 'enterprise-layout-index' })
|
|
|
+import { useRouter, useRoute } from 'vue-router'
|
|
|
+import { watch, ref } from 'vue'
|
|
|
+
|
|
|
const router = useRouter()
|
|
|
+const route = useRoute()
|
|
|
+
|
|
|
+const whiteList = [
|
|
|
+ '/enterprise/talentPool/details',
|
|
|
+ '/enterprise/position/details',
|
|
|
+ '/enterprise/purchasePackage'
|
|
|
+]
|
|
|
+// 查询是否在白名单内，在则不展示面包屑
|
|
|
+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 {
|
|
|
- // height: 100vh;
|
|
|
background-color: var(--default-bgc);
|
|
|
}
|
|
|
.headers {
|
|
|
@@ -31,6 +96,26 @@ $top: 50px;
|
|
|
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%;
|
|
|
@@ -41,9 +126,6 @@ $top: 50px;
|
|
|
.content {
|
|
|
height: 0;
|
|
|
flex: 1;
|
|
|
- &-box {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
|
|
|
&-sticky {
|
|
|
position: sticky;
|
|
|
@@ -51,5 +133,19 @@ $top: 50px;
|
|
|
height: calc(100vh - $top);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+.breadcrumbs_sticky {
|
|
|
+ position: sticky;
|
|
|
+ top: $top;
|
|
|
+ background: #FFF;
|
|
|
+ z-index: var(--zIndex-breadcrumbs);
|
|
|
+ border-left: 1px solid #eaecef;
|
|
|
+}
|
|
|
+.text {
|
|
|
+ color: #999;
|
|
|
+ font-size: 14px;
|
|
|
+ &.active {
|
|
|
+ color: #00897B;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
Xiao_123