|
|
@@ -2,7 +2,7 @@
|
|
|
<div class="home">
|
|
|
<header class="header">
|
|
|
<div class="left">
|
|
|
- 慧牧科技
|
|
|
+ 智能耳标
|
|
|
<el-button
|
|
|
@click="onMenuCollapse"
|
|
|
circle
|
|
|
@@ -49,31 +49,30 @@
|
|
|
:unique-opened="true"
|
|
|
:default-openeds="defaultUnfoldedMenu"
|
|
|
select="1-1"
|
|
|
- background-color="rgba(46,38,87)"
|
|
|
+ background-color="#545c64"
|
|
|
text-color="#fff"
|
|
|
active-text-color="#ffd04b"
|
|
|
>
|
|
|
- <div v-for="(item) in menuData " :key="item.index">
|
|
|
+ <div v-for="(item, index1) in menuData " :key="index1">
|
|
|
<el-submenu
|
|
|
v-if="item.childList && item.childList.length > 0"
|
|
|
- :index="item.index"
|
|
|
+ :index="`${index1}`"
|
|
|
>
|
|
|
<template slot="title">
|
|
|
<i :class="item.iconClassName"></i>
|
|
|
<span slot="title">{{ !menuCollapse? item.optionName : '' }}</span>
|
|
|
- <!-- <span slot="title">{{ item.oneMenuName }}</span> -->
|
|
|
</template>
|
|
|
<el-menu-item
|
|
|
- v-for="(item1) in item.childList"
|
|
|
- :key="item1.index"
|
|
|
- :index="item1.index"
|
|
|
+ v-for="(item1, index2) in item.childList"
|
|
|
+ :key="`${index1}-${index2}`"
|
|
|
+ :index="`${index1}-${index2}`"
|
|
|
:routerName="item1.routerName"
|
|
|
@click="onClickMenu(item1)"
|
|
|
>{{ item1.optionName }}</el-menu-item>
|
|
|
</el-submenu>
|
|
|
<el-menu-item
|
|
|
v-else
|
|
|
- :index="item.index"
|
|
|
+ :index="`${index1}`"
|
|
|
:disabled="item.disabled"
|
|
|
:routerName="item.routerName"
|
|
|
@click="onClickMenu(item)"
|
|
|
@@ -84,22 +83,13 @@
|
|
|
</div>
|
|
|
</el-menu>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="col2">
|
|
|
- <header class="col2_header">
|
|
|
- <el-tag
|
|
|
- v-for="tag in tags"
|
|
|
- :key="tag.routerName"
|
|
|
- closable
|
|
|
- @close="close(tag)"
|
|
|
- @click="clickTag(tag)"
|
|
|
- :type="tag.type?tag.type:'info'"
|
|
|
- class="item"
|
|
|
- >{{tag.name}}</el-tag>
|
|
|
- </header>
|
|
|
<div class="warp">
|
|
|
<router-view />
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
|
@@ -115,16 +105,14 @@ export default {
|
|
|
menuData,
|
|
|
menuCollapse: false, //是否水平折叠收起菜单
|
|
|
defaultUnfoldedMenu: [menuData[0].index], // 默认展开第一项
|
|
|
- tags: []
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- console.log(process.env.NODE_ENV)
|
|
|
this.defaultUnfoldedMenu = [
|
|
|
localStorage.getItem("defaultUnfoldedMenu")
|
|
|
];
|
|
|
this.menuCollapse = JSON.parse(localStorage.getItem("menuCollapse"));
|
|
|
- this.tags = JSON.parse(localStorage.getItem("tagsNavList")) || [];
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
// 收取菜单按钮
|
|
|
@@ -137,13 +125,10 @@ export default {
|
|
|
},
|
|
|
// 菜单展开
|
|
|
handleOpen(key, keyPath) {
|
|
|
- console.log(key, keyPath);
|
|
|
localStorage.setItem("defaultUnfoldedMenu", "" + key);
|
|
|
},
|
|
|
// 菜单收取
|
|
|
- handleClose(key, keyPath) {
|
|
|
- console.log(key, keyPath);
|
|
|
- },
|
|
|
+ handleClose(key, keyPath) {},
|
|
|
// 点击菜单项
|
|
|
onClickMenu(item) {
|
|
|
let _this = this;
|
|
|
@@ -152,67 +137,9 @@ export default {
|
|
|
this.$router.push({
|
|
|
name: item.routerName
|
|
|
});
|
|
|
- // 如果tags中已经存在 return
|
|
|
- let temp = includes(item.routerName);
|
|
|
- if (temp) {
|
|
|
- this.tags.forEach(item => {
|
|
|
- item.type = "info";
|
|
|
- });
|
|
|
- temp.type = "success";
|
|
|
- return;
|
|
|
- }
|
|
|
- this.tags.forEach(item => {
|
|
|
- item.type = "info";
|
|
|
- });
|
|
|
- this.tags.push({
|
|
|
- name: item.optionName,
|
|
|
- routerName: item.routerName,
|
|
|
- type: "success"
|
|
|
- });
|
|
|
-
|
|
|
- this.changeTagColor(item.routerName);
|
|
|
- localStorage.setItem("tagsNavList", JSON.stringify(this.tags));
|
|
|
- // 查看当前 tags里有没有传进来的路由，返回 true false
|
|
|
-
|
|
|
- function includes(routerName) {
|
|
|
- let tags = _this.tags;
|
|
|
- return tags.find(item => {
|
|
|
- return item.routerName == routerName;
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- // 点击 tag
|
|
|
- clickTag(tag) {
|
|
|
- console.log(tag.routerName);
|
|
|
- if (this.$router.history.current.name == tag.routerName) return;
|
|
|
- this.$router.push({
|
|
|
- name: tag.routerName
|
|
|
- });
|
|
|
- this.changeTagColor(tag.routerName);
|
|
|
- localStorage.setItem("tagsNavList", JSON.stringify(this.tags));
|
|
|
- },
|
|
|
- // 点击 tag 的小×
|
|
|
- close(tag) {
|
|
|
- console.log(tag);
|
|
|
- let spliceIndex = this.tags.findIndex(item => {
|
|
|
- return item.routerName == tag.routerName;
|
|
|
- });
|
|
|
- console.log(spliceIndex);
|
|
|
- this.tags.splice(spliceIndex, 1);
|
|
|
- localStorage.setItem("tagsNavList", JSON.stringify(this.tags));
|
|
|
- },
|
|
|
- // 改变tag的颜色 公用的
|
|
|
- changeTagColor(routerName) {
|
|
|
- this.tags.forEach(item => {
|
|
|
- if (item.routerName == routerName) {
|
|
|
- item.type = "success";
|
|
|
- } else {
|
|
|
- item.type = "info";
|
|
|
- }
|
|
|
- });
|
|
|
},
|
|
|
onLogOut() {
|
|
|
- this.$router.push('login')
|
|
|
+ this.$router.redirect('login')
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -226,10 +153,8 @@ export default {
|
|
|
background-color: #eee;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- .header {
|
|
|
- // background-color: #029b62;
|
|
|
- // background-color: rgb(46,38,87);
|
|
|
- background-color: rgb(85, 70, 148);
|
|
|
+ >.header {
|
|
|
+ background-color: #4b545e;
|
|
|
height: 40px;
|
|
|
padding: 10px 20px;
|
|
|
margin-bottom: 5px;
|
|
|
@@ -260,7 +185,8 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
.col1 {
|
|
|
margin-right: 5px;
|
|
|
- background-color: rgb(46,38,87);
|
|
|
+ background-color: #545c64;
|
|
|
+ border-radius: 15px;
|
|
|
// background-image: linear-gradient(to bottom, rgb(85, 70, 148) , rgb(41, 33, 85), rgb(41, 33, 85));
|
|
|
}
|
|
|
.col2 {
|
|
|
@@ -271,27 +197,9 @@ export default {
|
|
|
margin-right: 5px;
|
|
|
height: 100%;
|
|
|
overflow: auto;
|
|
|
- .col2_header {
|
|
|
- position: relative;
|
|
|
- width: 85%;
|
|
|
- height: 50px;
|
|
|
- overflow: hidden;
|
|
|
- border-bottom: 2px solid #eee;
|
|
|
- background-color: #fff;
|
|
|
- padding: 10px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
- z-index: 1;
|
|
|
- position: fixed;
|
|
|
- .item {
|
|
|
- margin-right: 8px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
.warp {
|
|
|
margin: 15px;
|
|
|
- padding-top: 55px;
|
|
|
}
|
|
|
}
|
|
|
}
|
linan