|
|
@@ -1,203 +1,169 @@
|
|
|
<template>
|
|
|
- <div class="p-menu">
|
|
|
- <!-- <div style="height:60px;background-color: #0b82ff;"></div> -->
|
|
|
- <!-- <el-card class="card" ref="menuCard"> -->
|
|
|
- <el-menu
|
|
|
- class="el-menu-vertical-demo"
|
|
|
- :default-active="getDefaultActive"
|
|
|
- router
|
|
|
- :collapse="collapse"
|
|
|
- @open="handleOpen"
|
|
|
- @close="handleClose"
|
|
|
- >
|
|
|
- <div class="menu-logo" style="height: 60px; line-height: 60px">
|
|
|
- <img
|
|
|
- width="95%"
|
|
|
- style="text-align: center; vertical-align: middle"
|
|
|
- src="../assets/newlogo.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- <!-- 引入组件 -->
|
|
|
- <div class="menuScoll">
|
|
|
- <menuItem :menuData="data" class="menuScoll-box"> </menuItem>
|
|
|
- </div>
|
|
|
- </el-menu>
|
|
|
- <!-- </el-card> -->
|
|
|
- </div>
|
|
|
+ <div class="p-menu">
|
|
|
+ <!-- <div style="height:60px;background-color: #0b82ff;"></div> -->
|
|
|
+ <!-- <el-card class="card" ref="menuCard"> -->
|
|
|
+ <el-menu class="el-menu-vertical-demo" :default-active="getDefaultActive" router :collapse="collapse"
|
|
|
+ @open="handleOpen" @close="handleClose" active-text-color="#71A6FD">
|
|
|
+ <div class="menu-logo" style="height: 60px; line-height: 60px">
|
|
|
+ <img width="95%" style="text-align: center; vertical-align: middle" src="../assets/newlogo1.png"
|
|
|
+ alt="" />
|
|
|
+ </div>
|
|
|
+ <!-- 引入组件 -->
|
|
|
+ <div class="menuScoll">
|
|
|
+ <menuItem :menuData="data" class="menuScoll-box">
|
|
|
+ </menuItem>
|
|
|
+ </div>
|
|
|
+ </el-menu>
|
|
|
+ <!-- </el-card> -->
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {
|
|
|
- props: {
|
|
|
- //菜单数据源类型Array<JsonObject>，具体格式参考data/menu-list.js
|
|
|
- data: {
|
|
|
- required: false,
|
|
|
- type: Array,
|
|
|
- default() {
|
|
|
- return [];
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- components: {
|
|
|
- menuItem: () => import(/* webpackChunkName: "system" */ "./p-menu-item"),
|
|
|
- },
|
|
|
- computed: {
|
|
|
- getDefaultActive() {
|
|
|
- return this.$store.state.defaultActive;
|
|
|
- },
|
|
|
- collapse() {
|
|
|
- return this.$store.state.collapse;
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- defaultActiveMenuItem: {},
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- if (this.data.length > 0) {
|
|
|
- this.recursion(this.data);
|
|
|
- }
|
|
|
- },
|
|
|
- updated() {
|
|
|
- if (this.data.length > 0) {
|
|
|
- // let tabList;
|
|
|
- // if (this.data[0].children) {
|
|
|
- // tabList = [this.data[0].children[0]];
|
|
|
- // } else {
|
|
|
- // tabList = [this.data[0]];
|
|
|
- // }
|
|
|
-
|
|
|
- // for (let item of this.data) {
|
|
|
- // if (item.children) {
|
|
|
- // for (let childrenItem of item.children) {
|
|
|
- // if (childrenItem.rountPath == this.$route.path) {
|
|
|
- // this.handelRouterTo(childrenItem);
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // if (item.rountPath == this.$route.path) {
|
|
|
- // this.handelRouterTo(item);
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // }
|
|
|
- this.recursion(this.data);
|
|
|
- // this.$store.commit("setDefaultActive", this.data[0].rountPath);
|
|
|
- // this.$store.commit("setTabList", tabList);
|
|
|
- // if (this.$route.path != this.data[0].rountPath) {
|
|
|
- // this.$router.push(this.data[0].rountPath);
|
|
|
- // }
|
|
|
- // this.defaultActiveMenuItem = this.data[0];
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- recursion(data) {
|
|
|
- for (let item of data) {
|
|
|
- if (item.children != "") {
|
|
|
- this.recursion(item.children);
|
|
|
- } else if (item.rountPath == this.$route.path) {
|
|
|
- if (item.systemflag != "1") {
|
|
|
- this.handelRouterTo(item);
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- handleOpen(e) {
|
|
|
- if (e.indexOf("/") != -1) {
|
|
|
- if (this.$route.path != e) {
|
|
|
- this.$router.push(e);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- handleClose() {},
|
|
|
- handelRouterTo(item) {
|
|
|
- if (item.systemflag == "1") {
|
|
|
- return;
|
|
|
- }
|
|
|
- let defaults = this.$store.state.tabList.filter((row) => {
|
|
|
- let rountPath = row.hasOwnProperty("rountPath")
|
|
|
- ? row.rountPath
|
|
|
- : row.jspUrl;
|
|
|
- if (rountPath == item.rountPath) {
|
|
|
- return row;
|
|
|
- }
|
|
|
- });
|
|
|
- if (defaults.length == 1) {
|
|
|
- return;
|
|
|
- }
|
|
|
- let set = new Set([...this.$store.state.tabList, item]);
|
|
|
- set.add(item);
|
|
|
- this.$store.commit("setDefaultActive", item.rountPath);
|
|
|
- this.$store.commit("setTabList", Array.from(set));
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ //菜单数据源类型Array<JsonObject>，具体格式参考data/menu-list.js
|
|
|
+ data: {
|
|
|
+ required: false,
|
|
|
+ type: Array,
|
|
|
+ default () {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ menuItem: () => import( /* webpackChunkName: "system" */ "./p-menu-item"),
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ getDefaultActive() {
|
|
|
+ return this.$store.state.defaultActive;
|
|
|
+ },
|
|
|
+ collapse() {
|
|
|
+ return this.$store.state.collapse;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ defaultActiveMenuItem: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.data.length > 0) {
|
|
|
+ this.recursion(this.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ updated() {
|
|
|
+ if (this.data.length > 0) {
|
|
|
+
|
|
|
+ this.recursion(this.data);
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ recursion(data) {
|
|
|
+ for (let item of data) {
|
|
|
+ if (item.children != "") {
|
|
|
+ this.recursion(item.children);
|
|
|
+ } else if (item.rountPath == this.$route.path) {
|
|
|
+ if (item.systemflag != "1") {
|
|
|
+ this.handelRouterTo(item);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleOpen(e) {
|
|
|
+ if (e.indexOf("/") != -1) {
|
|
|
+ if (this.$route.path != e) {
|
|
|
+ this.$router.push(e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClose() {},
|
|
|
+ handelRouterTo(item) {
|
|
|
+ if (item.systemflag == "1") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let defaults = this.$store.state.tabList.filter((row) => {
|
|
|
+ let rountPath = row.hasOwnProperty("rountPath") ?
|
|
|
+ row.rountPath :
|
|
|
+ row.jspUrl;
|
|
|
+ if (rountPath == item.rountPath) {
|
|
|
+ return row;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (defaults.length == 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let set = new Set([...this.$store.state.tabList, item]);
|
|
|
+ set.add(item);
|
|
|
+ this.$store.commit("setDefaultActive", item.rountPath);
|
|
|
+ this.$store.commit("setTabList", Array.from(set));
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
<style>
|
|
|
-.el-menu--collapse .menu-logo {
|
|
|
- background-image: url(../assets/leftlogo.png);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 50% 50%;
|
|
|
- background-position-x: 50%;
|
|
|
- background-position-y: 50%;
|
|
|
-}
|
|
|
+ .el-menu--collapse .menu-logo {
|
|
|
+ background-image: url(../assets/leftlogo.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 50% 50%;
|
|
|
+ background-position-x: 50%;
|
|
|
+ background-position-y: 50%;
|
|
|
+ }
|
|
|
|
|
|
-.menu-logo {
|
|
|
- border: 1px solid #f2f2f2;
|
|
|
-}
|
|
|
+ .menu-logo {
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
+ }
|
|
|
|
|
|
-.el-menu--collapse .menu-logo img {
|
|
|
- display: none;
|
|
|
-}
|
|
|
+ .el-menu--collapse .menu-logo img {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
-.el-menu--collapse .el-submenu__title span {
|
|
|
- display: none;
|
|
|
-}
|
|
|
+ .el-menu--collapse .el-submenu__title span {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
-.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
|
|
|
- display: none;
|
|
|
-}
|
|
|
+ .el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
-.p-menu .el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
|
- width: 200px;
|
|
|
- min-height: 400px;
|
|
|
-}
|
|
|
+ .p-menu .el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
|
+ width: 200px;
|
|
|
+ min-height: 400px;
|
|
|
+ }
|
|
|
</style>
|
|
|
<style scoped="scoped" lang="scss">
|
|
|
-.p-menu {
|
|
|
- height: 100%;
|
|
|
- // padding-left: 50px;
|
|
|
- // padding-top: 38px;
|
|
|
- max-width: 200px;
|
|
|
- background-color: white;
|
|
|
- overflow: hidden;
|
|
|
+ .p-menu {
|
|
|
+ height: 100%;
|
|
|
+ // padding-left: 50px;
|
|
|
+ // padding-top: 38px;
|
|
|
+ max-width: 200px;
|
|
|
+ background-color: white;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- .card {
|
|
|
- width: 100%;
|
|
|
- flex-grow: 0;
|
|
|
- flex-shrink: 0;
|
|
|
- height: 100%;
|
|
|
- max-height: 100%;
|
|
|
+ .card {
|
|
|
+ width: 100%;
|
|
|
+ flex-grow: 0;
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 100%;
|
|
|
+ max-height: 100%;
|
|
|
|
|
|
- /deep/ .el-card__body {
|
|
|
- padding: 0px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ /deep/ .el-card__body {
|
|
|
+ padding: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.menuScoll {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
+ .menuScoll {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- .menuScoll-box {
|
|
|
- width: calc(100% + 20px);
|
|
|
- max-height: 100vh;
|
|
|
- padding-bottom: 60px;
|
|
|
- overflow-y: scroll;
|
|
|
- }
|
|
|
-}
|
|
|
+ .menuScoll-box {
|
|
|
+ width: calc(100% + 20px);
|
|
|
+ max-height: calc(100vh - 60px);
|
|
|
+ padding-bottom: 60px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
liyuanpeng