|
|
@@ -1,43 +1,46 @@
|
|
|
<template>
|
|
|
- <div class="box-shadow-blue full-height" style="background-color: #f4f3ee">
|
|
|
- <div class="padding mt-20">
|
|
|
- <div class="flex flex-center mt-10" style="margin-bottom: 60px">
|
|
|
- <img src="@/assets/svg/logo.svg" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div
|
|
|
- class="flex flex-center flex-col bold font-16 item-bg padding-bottom full-width"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-for="(item, index) in data"
|
|
|
- :key="item.id"
|
|
|
- class="full-width flex flex-col flex-center pointer"
|
|
|
- >
|
|
|
+ <div class="full-height" style="background-color: #f6f7f8">
|
|
|
+ <div class="full-height">
|
|
|
+ <div class="padding-left padding-top">
|
|
|
+ <el-skeleton :rows="5" animated v-if="data.length === 0" />
|
|
|
+ <div v-else v-for="(item, index) in data" :key="item.id">
|
|
|
<div
|
|
|
- class="full-width flex flex-center padding"
|
|
|
- style="z-index: 2"
|
|
|
- :class="active === index ? 'item-s' : 'item'"
|
|
|
- @click="navClick(item, index)"
|
|
|
+ v-if="!item.hasChildren"
|
|
|
+ class="item flex flex-center flex-justify-start"
|
|
|
+ @click="navClick(index, 1, 0)"
|
|
|
+ :style="item.checked ? 'color:#409eff' : ''"
|
|
|
>
|
|
|
- <img :src="item.source" />
|
|
|
- <span class="flex-child-average">{{ item.name }}</span>
|
|
|
+ <img :src="item.source" style="width: 25px" class="mr-5" />
|
|
|
+ {{ item.name }}
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-if="item.children && item.children.length > 0 && active === index"
|
|
|
- class="flex flex-col flex-center item-sub padding"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-for="(sub, subIndex) in item.children"
|
|
|
- :key="sub.id"
|
|
|
- class="padding full-width flex flex-center"
|
|
|
- :class="subIndex === subActive ? 'item-sub-active' : ''"
|
|
|
- @click="subClick(sub, subIndex)"
|
|
|
+ <el-collapse v-else v-model="activeCollapse">
|
|
|
+ <el-collapse-item
|
|
|
+ :title="item.name"
|
|
|
+ :name="item.name"
|
|
|
+ :key="item.name"
|
|
|
>
|
|
|
- <div class="mr-10 main-color">·</div>
|
|
|
- <span>{{ sub.name }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <template #title>
|
|
|
+ <div class="flex flex-center flex-justify-start">
|
|
|
+ <img :src="item.source" style="width: 25px" class="mr-5" />
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ class="full-height"
|
|
|
+ @click="navClick(index, 2, subIndex)"
|
|
|
+ v-for="(sub, subIndex) in item.children"
|
|
|
+ :key="sub.name"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="item flex flex-center flex-justify-start"
|
|
|
+ style="margin-left: 20px"
|
|
|
+ :style="sub.checked ? 'color:#ECAB56' : ''"
|
|
|
+ >
|
|
|
+ {{ sub.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -51,7 +54,8 @@ export default {
|
|
|
active: 0,
|
|
|
subActive: 0,
|
|
|
data: [],
|
|
|
- currentPage: ''
|
|
|
+ currentPage: '',
|
|
|
+ activeCollapse: ''
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -72,102 +76,124 @@ export default {
|
|
|
const item = localStorage.getItem('index')
|
|
|
if (item) {
|
|
|
const menu = JSON.parse(item)
|
|
|
+ console.log(menu)
|
|
|
this.active = menu.active
|
|
|
this.subActive = menu.subActive
|
|
|
}
|
|
|
- const dataType = localStorage.getItem('data-type')
|
|
|
- console.log(dataType)
|
|
|
- if (
|
|
|
- dataType === null ||
|
|
|
- dataType === undefined ||
|
|
|
- dataType.length === 0
|
|
|
- ) {
|
|
|
- this.navClick(this.data[0], 0)
|
|
|
+ this.navClick(
|
|
|
+ this.active,
|
|
|
+ this.data[this.active].hasChildren ? 2 : 1,
|
|
|
+ this.subActive
|
|
|
+ )
|
|
|
+ console.log(this.data[this.active].hasChildren)
|
|
|
+ if (this.data[this.active].hasChildren === true) {
|
|
|
+ this.activeCollapse = this.data[this.active].name
|
|
|
+ this.data[this.active].children[this.subActive].checked = true
|
|
|
+ console.log(
|
|
|
+ this.activeCollapse,
|
|
|
+ this.data[this.active].children[this.subActive].checked
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ this.activeCollapse = this.data[this.active].name
|
|
|
+ this.data[this.active].checked = true
|
|
|
}
|
|
|
},
|
|
|
menus() {
|
|
|
this.$api.common.getMenus().then(res => {
|
|
|
if (res.code === 200) {
|
|
|
- this.data = res.data
|
|
|
+ this.data = res.data.map(sub => {
|
|
|
+ sub.hasChildren = Object.hasOwn(sub, 'children')
|
|
|
+ sub.checked = false
|
|
|
+ return sub
|
|
|
+ })
|
|
|
this.init()
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- navClick(item, index) {
|
|
|
- this.active = index
|
|
|
- if (item.children && item.children.length > 0) {
|
|
|
- this.subActive = 0
|
|
|
- this.$router.push(item.children[0].path)
|
|
|
+ navClick(index, type, subIndex) {
|
|
|
+ this.data.forEach(item => {
|
|
|
+ item.checked = false
|
|
|
+ if (item.hasChildren) {
|
|
|
+ item.children.forEach(ele => {
|
|
|
+ ele.checked = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (type === 2) {
|
|
|
+ this.data[index].children[subIndex].checked = true
|
|
|
+ } else {
|
|
|
+ this.data[index].checked = true
|
|
|
+ }
|
|
|
+ if (this.data[index].path.startsWith('http')) {
|
|
|
+ window.open(this.data[index].path, '_blank')
|
|
|
+ } else if (type === 2) {
|
|
|
+ this.$router.push(this.data[index].children[subIndex].path)
|
|
|
localStorage.setItem(
|
|
|
'data-type',
|
|
|
- item.children[0].remark ? item.children[0].remark : 'project'
|
|
|
+ this.data[index].children[subIndex].remark
|
|
|
+ ? this.data[index].children[subIndex].remark
|
|
|
+ : 'project'
|
|
|
)
|
|
|
this.$bus.emit(
|
|
|
'navChange',
|
|
|
- item.children[0].remark ? item.children[0].remark : 'project'
|
|
|
+ this.data[index].children[subIndex].remark
|
|
|
+ ? this.data[index].children[subIndex].remark
|
|
|
+ : 'project'
|
|
|
)
|
|
|
} else {
|
|
|
- this.$router.push(item.path)
|
|
|
- localStorage.setItem('data-type', item.remark ? item.remark : 'project')
|
|
|
- this.$bus.emit('navChange', item.remark ? item.remark : 'project')
|
|
|
+ this.$router.push(this.data[index].path)
|
|
|
+ localStorage.setItem(
|
|
|
+ 'data-type',
|
|
|
+ this.data[index].remark ? this.data[index].remark : 'project'
|
|
|
+ )
|
|
|
+ this.$bus.emit(
|
|
|
+ 'navChange',
|
|
|
+ this.data[index].remark ? this.data[index].remark : 'project'
|
|
|
+ )
|
|
|
}
|
|
|
- const menu = { active: this.active, subActive: this.subActive }
|
|
|
- localStorage.setItem('index', JSON.stringify(menu))
|
|
|
- },
|
|
|
- subClick(item, index) {
|
|
|
- this.subActive = index
|
|
|
- localStorage.setItem('data-type', item.remark ? item.remark : 'project')
|
|
|
- this.$router.push(item.path)
|
|
|
- const menu = { active: this.active, subActive: this.subActive }
|
|
|
+ const menu = { active: index, subActive: subIndex }
|
|
|
localStorage.setItem('index', JSON.stringify(menu))
|
|
|
- this.$bus.emit('navChange', item.remark ? item.remark : 'project')
|
|
|
+ this.$emit('closeMenu')
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.box-shadow-blue {
|
|
|
- position: fixed;
|
|
|
- width: 200px;
|
|
|
- left: 0;
|
|
|
- z-index: 2;
|
|
|
- background-color: white;
|
|
|
- box-shadow: 5px 0 10px -5px rgba(0, 0, 0, 0.1);
|
|
|
+.item {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 15px;
|
|
|
+ padding: 15px 10px;
|
|
|
+ z-index: 999;
|
|
|
}
|
|
|
|
|
|
-.item-bg {
|
|
|
- border-top: 1px solid #d1d1d1;
|
|
|
- border-bottom: 1px solid #d1d1d1;
|
|
|
+.item:hover {
|
|
|
+ background-color: #efefef;
|
|
|
}
|
|
|
|
|
|
-.item-s {
|
|
|
- width: 160px;
|
|
|
- border-radius: 14px;
|
|
|
- margin-top: 30px;
|
|
|
- color: white;
|
|
|
- background-color: #ab7630;
|
|
|
- box-shadow: 2px 2px 10px 2px rgba(242, 162, 58, 0.49);
|
|
|
+:deep(.el-collapse) {
|
|
|
+ --el-collapse-content-bg-color: transparent !important;
|
|
|
+ --el-collapse-header-bg-color: transparent !important;
|
|
|
+ --el-collapse-content-font-size: 15px !important;
|
|
|
+ --el-collapse-header-font-size: 15px !important;
|
|
|
+ --el-collapse-border-color: transparent !important;
|
|
|
+ border-top: none;
|
|
|
+ border-bottom: none;
|
|
|
+ margin: 0;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
-.item {
|
|
|
- width: 150px;
|
|
|
- border-radius: 14px;
|
|
|
- margin-top: 30px;
|
|
|
- color: #707070;
|
|
|
+:deep(.el-collapse-item__header) {
|
|
|
+ padding-left: 10px;
|
|
|
}
|
|
|
|
|
|
-.item-sub {
|
|
|
- width: 160px;
|
|
|
- border-bottom-left-radius: 14px;
|
|
|
- border-bottom-right-radius: 14px;
|
|
|
- margin-top: -10px;
|
|
|
- padding-top: 20px;
|
|
|
- color: #939393;
|
|
|
- background-color: #e4e4e4;
|
|
|
+:deep(.el-collapse-item__header):hover {
|
|
|
+ background-color: #efefef;
|
|
|
}
|
|
|
|
|
|
-.item-sub-active {
|
|
|
- background-color: #d3d3d3;
|
|
|
+:deep(.el-collapse-item__content) {
|
|
|
+ padding-bottom: 0 !important;
|
|
|
+ line-height: 1 !important;
|
|
|
+ padding-left: 10px;
|
|
|
}
|
|
|
</style>
|
scorpio