|
@@ -2,117 +2,136 @@
|
|
|
<template>
|
|
|
<div class="aside">
|
|
|
<div class="aside-list">
|
|
|
- <div class="aside-item" v-for="(item,i) in menu" :key="i">
|
|
|
- <div :class="{active:belong==item.id}"><i class="iconfont" :class="item.icon"></i>{{item.name}}</div>
|
|
|
- <div @click="goto(sub)" v-for="(sub,idx) in item.routes" :key="idx" :class="{activeFont:activeIdx === sub.key}">
|
|
|
- {{sub.name}}</div>
|
|
|
+ <div class="aside-item" v-for="(item, i) in menu" :key="i">
|
|
|
+ <div :class="{ active: belong == item.id }">
|
|
|
+ <i class="iconfont" :class="item.icon"></i>{{ item.name }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ @click="goto(sub)"
|
|
|
+ v-for="(sub, idx) in item.routes"
|
|
|
+ :key="idx"
|
|
|
+ :class="{ activeFont: activeIdx === sub.key }"
|
|
|
+ >
|
|
|
+ {{ sub.name }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { routes, main } from '@/configue/menu'
|
|
|
+import { routes, main } from "@/configue/menu";
|
|
|
|
|
|
export default {
|
|
|
+ name: "Aside",
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
routes,
|
|
|
main,
|
|
|
menu: [],
|
|
|
- tmpRoute: []
|
|
|
- }
|
|
|
+ tmpRoute: [],
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
activeIdx: {
|
|
|
get: function () {
|
|
|
- return this.$route.meta.index
|
|
|
+ return this.$route.meta.index;
|
|
|
},
|
|
|
- set: function () {
|
|
|
- }
|
|
|
+ set: function () {},
|
|
|
},
|
|
|
belong: {
|
|
|
get: function () {
|
|
|
- return this.$route.meta.belong
|
|
|
+ return this.$route.meta.belong;
|
|
|
},
|
|
|
- set: function () {
|
|
|
- }
|
|
|
- }
|
|
|
+ set: function () {},
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
- 'activeIdx': {
|
|
|
+ activeIdx: {
|
|
|
immediate: true,
|
|
|
handler: function (newVal) {
|
|
|
- console.log(newVal, 'activeIdx');
|
|
|
+ // console.log(newVal, "activeIdx");
|
|
|
if (this.tmpRoute.length > 0) {
|
|
|
- let temp = this.tmpRoute.filter(item => {
|
|
|
- return item.key == newVal
|
|
|
- })
|
|
|
+ let temp = this.tmpRoute.filter((item) => {
|
|
|
+ return item.key == newVal;
|
|
|
+ });
|
|
|
|
|
|
this.$store.commit("SetActiveMenu", temp[0] || this.tmpRoute[0]);
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
tmpRoute(newVal, oldVal) {
|
|
|
- console.log(newVal, oldVal, 'newVal,oldVal');
|
|
|
+ if (newVal.length <= 0) {
|
|
|
+ console.log("一个权限都没有");
|
|
|
+ this.$alert("没有权限,请联系管理员", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ callback: () => {
|
|
|
+ this.$emit("close");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ localStorage.removeItem("token");
|
|
|
+ this.$router.push("/login");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log(newVal, oldVal, "newVal,oldVal");
|
|
|
if (oldVal.length <= 0 && newVal[0].key != "museum") {
|
|
|
- this.goto(newVal[0], true)
|
|
|
+ this.goto(newVal[0], true);
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
goto(item, replace = null) {
|
|
|
- let path = { path: `/${item.key}${item.param ? `/${item.param.map(tt => tt.default).join('/')}` : ''}` }
|
|
|
- replace ? this.$router.replace(path) : this.$router.push(path)
|
|
|
+ let path = {
|
|
|
+ path: `/${item.key}${
|
|
|
+ item.param ? `/${item.param.map((tt) => tt.default).join("/")}` : ""
|
|
|
+ }`,
|
|
|
+ };
|
|
|
+ replace ? this.$router.replace(path) : this.$router.push(path);
|
|
|
},
|
|
|
async getResource() {
|
|
|
let result = await this.$http({
|
|
|
- method: 'GET',
|
|
|
- url: 'sys/resource/getTreePermissions'
|
|
|
- })
|
|
|
-
|
|
|
- this.tmpRoute = routes.filter(item => {
|
|
|
- let tmp = ''
|
|
|
- result.data.forEach(sub => {
|
|
|
+ method: "GET",
|
|
|
+ url: "sys/resource/getTreePermissions",
|
|
|
+ });
|
|
|
+ this.tmpRoute = routes.filter((item) => {
|
|
|
+ let tmp = "";
|
|
|
+ result.data.forEach((sub) => {
|
|
|
if (item.name == sub.name) {
|
|
|
- sub.authority = item.authority
|
|
|
- tmp = sub
|
|
|
+ if (sub.authority) {
|
|
|
+ tmp = sub;
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
|
|
|
- return tmp ? Object.assign(item, tmp) : tmp
|
|
|
+ return tmp ? Object.assign(item, tmp) : tmp;
|
|
|
});
|
|
|
|
|
|
- let temp = this.tmpRoute.filter(item => {
|
|
|
- return item.key == this.activeIdx
|
|
|
- })
|
|
|
+ // let temp = this.tmpRoute.filter((item) => {
|
|
|
+ // return item.key == this.activeIdx;
|
|
|
+ // });
|
|
|
|
|
|
- console.log(temp, 'temp');
|
|
|
+ // this.$store.commit("SetActiveMenu", temp[0] || this.tmpRoute[0]);
|
|
|
|
|
|
- this.$store.commit("SetActiveMenu", temp[0] || this.tmpRoute[0]);
|
|
|
-
|
|
|
-
|
|
|
- this.menu = main.filter(item => {
|
|
|
- let route = []
|
|
|
+ this.menu = main.filter((item) => {
|
|
|
+ let route = [];
|
|
|
this.tmpRoute.forEach((sub) => {
|
|
|
if (item.key == sub.type) {
|
|
|
- route.push(sub)
|
|
|
+ route.push(sub);
|
|
|
}
|
|
|
- })
|
|
|
- item.routes = route
|
|
|
- return route.length > 0 && item
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
+ });
|
|
|
+ item.routes = route;
|
|
|
+ return route.length > 0 && item;
|
|
|
+ });
|
|
|
|
|
|
+ // console.log(this.menu);
|
|
|
+ },
|
|
|
},
|
|
|
+ created() {},
|
|
|
mounted() {
|
|
|
- this.getResource()
|
|
|
- }
|
|
|
-}
|
|
|
+ this.getResource();
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
@@ -122,11 +141,10 @@ export default {
|
|
|
}
|
|
|
|
|
|
.aside-item {
|
|
|
- padding: .625rem 0;
|
|
|
+ padding: 0.625rem 0;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.aside-item:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
@@ -134,24 +152,24 @@ export default {
|
|
|
.aside-item div {
|
|
|
height: 2.875rem;
|
|
|
line-height: 2.875rem;
|
|
|
- margin: .0625rem 0;
|
|
|
+ margin: 0.0625rem 0;
|
|
|
width: 89%;
|
|
|
padding-left: 5.7rem;
|
|
|
- font-size: .875rem;
|
|
|
+ font-size: 0.875rem;
|
|
|
cursor: pointer;
|
|
|
color: #707070;
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.aside-item div:not(:first-child):hover {
|
|
|
- color: #B63C25;
|
|
|
+ color: #b63c25;
|
|
|
}
|
|
|
|
|
|
.aside-item div:first-child {
|
|
|
padding-left: 3.81rem;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- color: #532F1C;
|
|
|
+ color: #532f1c;
|
|
|
font-size: 1.25rem;
|
|
|
font-weight: bold;
|
|
|
margin-bottom: 0.2rem;
|
|
@@ -160,27 +178,26 @@ export default {
|
|
|
.aside-item div:first-child img {
|
|
|
width: 1.1rem;
|
|
|
height: 1.1rem;
|
|
|
- margin-right: .625rem;
|
|
|
+ margin-right: 0.625rem;
|
|
|
}
|
|
|
|
|
|
.aside-item .iconfont {
|
|
|
- color: #532F1C;
|
|
|
- margin-right: .8125rem;
|
|
|
+ color: #532f1c;
|
|
|
+ margin-right: 0.8125rem;
|
|
|
}
|
|
|
|
|
|
.aside-item .active {
|
|
|
- background-color: #B63C25;
|
|
|
+ background-color: #b63c25;
|
|
|
border-top-right-radius: 80px;
|
|
|
border-bottom-right-radius: 80px;
|
|
|
- color: #F2ECDE !important;
|
|
|
+ color: #f2ecde !important;
|
|
|
}
|
|
|
|
|
|
.aside-item .active .iconfont {
|
|
|
- color: #F2ECDE;
|
|
|
+ color: #f2ecde;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.aside-item .activeFont {
|
|
|
- color: #B63C25;
|
|
|
+ color: #b63c25;
|
|
|
}
|
|
|
</style>
|