<template>
<div class="setting-container-box">
<div class="setting-container-left">
<div class="input-abs">
<el-input
placeholder="请输入内容"
style="width: 100%"
v-model="searchValue"
>
<i slot="suffix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<div class="setting-content-list">
<div v-for="(items, index) in settingNavbar" :key="index">
<div class="setting-title">
<p
@click="settingBtnClick(items, index)"
v-if="!items.isActive"
class="add-click-style"
>
<span class="title">{{ items.name }}</span>
<span class="icon-add"> </span>
</p>
<p
v-else
class="inter-click-style fs-f-14"
style="font-weight: bold"
@click="settingsubClick(items, index)"
>
<span>{{ items.name }}</span>
<span class="icon-sub"></span>
</p>
</div>
<div v-if="items.isActive">
<div
class="setting-show-item"
v-for="(value, indey) in items.children"
:key="indey"
>
<!-- 1. -->
<div
:class="[
currentIndex == indey ? 'active-item' : '',
'item-style',
]"
@click="togglePath(value, indey)"
>
{{ value.name }}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 2. -->
<component :is="navbarName"></component>
</div>
</template>
<script>
// 3.
import ssh from "./authentication/ssh.vue";
import raduis from "./authentication/raduis.vue";
import alertSetting from "./notifications/alertSetting.vue";
import contactManagement from "./notifications/contactManagement.vue";
import pushTargetSetting from "./notifications/pushTargetSetting.vue";
import aboutDetail from "./controller/aboutDetail.vue";
import timeDetail from "./controller/timeDetail.vue";
import backUp from "./controller/backUp.vue";
import remoteAccess from "./controller/remoteAccess.vue";
import equipmentUpgrade from "./updates/equipmentUpgrade.vue";
import localVersionUploading from "./updates/localVersionUploading.vue";
import versionPush from "./updates/versionPush.vue";
import adminstrators from "./adminstrators/adminstrators.vue";
export default {
components: {
alertSetting,
contactManagement,
pushTargetSetting,
ssh,
raduis,
aboutDetail,
timeDetail,
backUp,
remoteAccess,
equipmentUpgrade,
localVersionUploading,
versionPush,
adminstrators,
},
data() {
return {
// 整个的大列表
settingNavbar: [
{
name: "Wireless Networks",
isActive: false,
children: [],
},
{
name: "Wired Networks",
isActive: false,
children: [],
},
{
name: "Network Feature",
isActive: false,
children: [],
},
{
name: "Authentication",
isActive: false,
children: [
{
name: "SSH",
path: "ssh",
},
{
name: "RADUIS",
path: "raduis",
},
],
},
{
name: "Notifications",
isActive: false,
children: [
{
name: "告警内容设置",
path: "alertSetting",
},
{
name: "推送目标设置",
path: "pushTargetSetting",
},
{
name: "联系人管理",
path: "contactManagement",
},
],
},
{
name: "Adminstrators",
isActive: false,
children: [
{
name: "Adminstrators",
path: "adminstrators",
},
],
},
{
name: "Updates",
isActive: false,
children: [
{
name: "设备升级",
path: "equipmentUpgrade",
},
{
name: "版本推送",
path: "versionPush",
},
{
name: "本地版本上传",
path: "localVersionUploading",
},
],
},
{
name: "Controller Settings",
isActive: false,
children: [
{
name: "About",
path: "aboutDetail",
},
{
name: "Time",
path: "timeDetail",
},
{
name: "Remote Access",
path: "remoteAccess",
},
{
name: "BackUp",
path: "backUp",
},
],
},
],
navbarName: "adminstrators", // 默认进来的页面 管理员页面
searchValue: "",
currentIndex: 0,
};
},
created() {
if (this.$route.params.navName) {
this.navbarName = this.$route.params.navName;
this.settingNavbar[4].isActive = true;
}
const { row, indey } = JSON.parse(sessionStorage.getItem("setting_tab"));
const { items, index } = JSON.parse(sessionStorage.getItem("setting_btn_select"));
this.togglePath(row, indey);
this.settingBtnClick(items, index)
},
methods: {
// 切换选中状态值
settingBtnClick(items, index) {
sessionStorage.setItem("setting_btn_select",JSON.stringify({ items, index }));
items.isActive = !items.isActive;
this.settingNavbar.forEach((item) => {
item.isActive = false;
});
this.settingNavbar[index].isActive = true;
},
settingsubClick(items, index) {
console.log(index);
items.isActive = !items.isActive;
this.settingNavbar.forEach((item) => {
item.isActive = false;
});
},
//4.
togglePath(row = "adminstrators", indey = 0) {
sessionStorage.setItem("setting_tab", JSON.stringify({ row, indey }));
this.navbarName = row.path;
this.currentIndex = indey;
},
},
};
</script>
<style lang="scss" scoped>
.setting-container-box {
display: flex;
.setting-container-left {
height: 100vh;
width: 300px;
border-right: 1px solid #d9d9d9;
overflow-y: scroll;
padding: 0px 10px 0 10px;
box-sizing: border-box;
}
.setting-content-list {
margin-top: 30px;
padding: 0 20px;
.setting-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
border-bottom: 1px solid #f4f4f4;
padding-bottom: 20px;
.add-click-style {
cursor: pointer;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.title {
display: inline-block;
width: 100%;
font-size: 14px;
color: #6e6e73;
}
.icon-add {
display: block;
background: url("~@assets/fskey/img/bg_icon.png") no-repeat no-repeat -50px -422px;
width: 12px;
height: 12px;
cursor: pointer;
}
}
.inter-click-style {
cursor: pointer;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.title {
display: inline-block;
width: 100%;
font-size: 14px;
color: #6e6e73;
}
.icon-sub {
display: block;
background: url("~@assets/fskey/img/bg_icon.png") no-repeat no-repeat -92px -427px;
width: 12px;
height: 2px;
cursor: pointer;
}
}
}
.setting-show-item {
.item-style {
padding-left: 20px;
line-height: 38px;
font-size: 13px;
color: #414141;
cursor: pointer;
}
.active-item {
background-color: #f0f0f1;
color: #606060;
}
}
}
}
</style>
步骤截图一：
image.png
网友评论