From 41bec46dae6a1724ddb7130f55239c4f83970fc3 Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Mon, 25 Oct 2021 14:53:27 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B6=E9=83=A8=E8=8F=9C=E5=8D=95=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 epmet-oper-web/src/assets/scss/common.scss | 77 ++++++++++++++--------
 epmet-oper-web/src/js/store/index.js       |  1 +
 epmet-oper-web/src/views/main-navbar.vue   | 23 ++++---
 epmet-oper-web/src/views/main-sidebar.vue  | 14 ++--
 epmet-oper-web/src/views/main.vue          | 23 +++++--
 5 files changed, 89 insertions(+), 49 deletions(-)

diff --git a/epmet-oper-web/src/assets/scss/common.scss b/epmet-oper-web/src/assets/scss/common.scss
index 1509b2a..ba5139f 100644
--- a/epmet-oper-web/src/assets/scss/common.scss
+++ b/epmet-oper-web/src/assets/scss/common.scss
@@ -4,8 +4,8 @@
   box-sizing: border-box;
 }
 body {
-  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
-    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
+    sans-serif;
   font-size: $--font-size-base;
   line-height: $base--line-height;
   color: $--color-text-primary;
@@ -35,7 +35,7 @@ img {
 }
 .clearfix:before,
 .clearfix:after {
-  content: ' ';
+  content: " ";
   display: table;
 }
 .clearfix:after {
@@ -144,8 +144,8 @@ img {
     background-color: transparent;
   }
   &-add {
-    > span > *[class*='el-icon-'],
-    > span > *[class*='icon'] {
+    > span > *[class*="el-icon-"],
+    > span > *[class*="icon"] {
       vertical-align: middle;
       font-size: 18px;
       margin-right: 5px;
@@ -249,6 +249,20 @@ img {
   }
 }
 
+.aui-sidebar--noside {
+  .aui-sidebar {
+    display: none !important;
+  }
+  .aui-content {
+    &__wrapper {
+      margin-left: 0 !important;
+    }
+    &--tabs > .el-tabs > .el-tabs__header {
+      left: 0 !important;
+    }
+  }
+}
+
 /* Navbar
 ------------------------------ */
 .aui-navbar {
@@ -357,6 +371,29 @@ img {
     a:hover {
       text-decoration: none;
     }
+    &.z-div {
+      .el-menu-item {
+        position: relative;
+
+        &:last-child {
+          &::after {
+            display: none;
+          }
+        }
+
+        &::after {
+          position: absolute;
+          content: "";
+          right: 0;
+          top: 0;
+          bottom: 0;
+          margin: auto 0;
+          width: 1px;
+          height: 18px;
+          background-color: rgba(#ffffff, 0.6);
+        }
+      }
+    }
     .el-menu-item,
     .el-submenu > .el-submenu__title {
       height: $navbar--height;
@@ -411,8 +448,8 @@ img {
     }
   }
   &__search {
-    > *[class*='el-icon-'],
-    > *[class*='icon'] {
+    > *[class*="el-icon-"],
+    > *[class*="icon"] {
       display: inline-block;
       vertical-align: middle;
     }
@@ -535,9 +572,7 @@ img {
     min-height: calc(#{$content--fill-height} - 2px);
   }
   > .aui-card--fill > .el-card__header + .el-card__body {
-    min-height: calc(
-      #{$content--fill-height} - #{$content--card-header-height} - 2px
-    );
+    min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px);
   }
   &--tabs {
     padding: $content--tabs-header-height 0 0;
@@ -609,7 +644,7 @@ img {
               position: absolute;
               bottom: 0;
               left: 0;
-              content: '';
+              content: "";
               width: 100%;
               height: 2px;
               background-color: $--color-primary;
@@ -642,15 +677,10 @@ img {
           min-height: calc(#{$content--fill-height-tabs} - 2px);
         }
         > .aui-card--fill > .el-card__header + .el-card__body {
-          min-height: calc(
-            #{$content--fill-height-tabs} - #{$content--card-header-height} -
-              2px
-          );
+          min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
         }
         &.is-iframe {
-          height: calc(
-            #{$content--fill-height-tabs} + #{$content--padding * 2}
-          );
+          height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2});
           margin: -$content--padding;
           min-height: auto;
           > .aui-card--fill {
@@ -669,10 +699,7 @@ img {
             background-color: #fff;
           }
           > .aui-card--fill > .el-card__header + .el-card__body {
-            height: calc(
-              #{$content--fill-height-tabs} - #{$content--card-header-height} -
-                2px
-            );
+            height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
           }
         }
       }
@@ -702,7 +729,7 @@ img {
 
 /* Page
 ------------------------------ */
-*[class*='aui-page__'] {
+*[class*="aui-page__"] {
   padding-top: 0;
   .aui-content {
     min-height: auto;
@@ -714,9 +741,7 @@ img {
       min-height: calc(100vh - #{$content--padding * 2} - 2px);
     }
     > .aui-card--fill > .el-card__header + .el-card__body {
-      min-height: calc(
-        100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px
-      );
+      min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px);
     }
   }
 }
diff --git a/epmet-oper-web/src/js/store/index.js b/epmet-oper-web/src/js/store/index.js
index c11512f..b9969fc 100644
--- a/epmet-oper-web/src/js/store/index.js
+++ b/epmet-oper-web/src/js/store/index.js
@@ -20,6 +20,7 @@ export default new Vuex.Store({
     sidebarMenuList: [],
     sidebarMenuActiveName: '',
     LevelOneMenuActiveName: '',
+    sidebarActiveSubMenuList: [],
     // 内容, 是否需要刷新
     contentIsNeedRefresh: false,
     // 内容, 标签页(默认添加首页)
diff --git a/epmet-oper-web/src/views/main-navbar.vue b/epmet-oper-web/src/views/main-navbar.vue
index 3c75160..996c5d4 100644
--- a/epmet-oper-web/src/views/main-navbar.vue
+++ b/epmet-oper-web/src/views/main-navbar.vue
@@ -28,23 +28,28 @@
               <use xlink:href="#icon-outdent"></use>
             </svg>
           </el-menu-item>
+
+          <el-menu-item index="2" @click="refresh()">
+            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
+              <use xlink:href="#icon-sync"></use>
+            </svg>
+          </el-menu-item>
         </el-menu>
 
         <el-menu
           v-if="userType == 'work'"
           :default-active="$store.state.LevelOneMenuActiveName"
-          :collapse="$store.state.sidebarFold"
           :unique-opened="true"
           :collapseTransition="false"
           mode="horizontal"
-          class="aui-navbar__menu mr-auto"
+          class="aui-navbar__menu mr-auto z-div"
         >
           <el-menu-item
-            v-for="menu in $store.state.sidebarMenuList"
+            v-for="(menu, idx) in $store.state.sidebarMenuList"
             :key="menu.id"
             :menu="menu"
             :index="menu.id"
-            @click="gotoRouteHandle(menu.id)"
+            @click="gotoRouteHandle(menu.id, idx)"
           >
             <span>{{ menu.name }}</span>
           </el-menu-item>
@@ -78,11 +83,7 @@
               <use xlink:href="#icon-fullscreen"></use>
             </svg>
           </el-menu-item> -->
-          <el-menu-item index="2" @click="refresh()">
-            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
-              <use xlink:href="#icon-sync"></use>
-            </svg>
-          </el-menu-item>
+
           <el-menu-item index="4" class="aui-navbar__avatar">
             <el-dropdown placement="bottom" :show-timeout="0">
               <span class="el-dropdown-link">
@@ -151,7 +152,7 @@ export default {
   },
   methods: {
     // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
-    gotoRouteHandle(menuId) {
+    gotoRouteHandle(menuId, idx) {
       var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(
         (item) => item.meta.menuId === menuId
       )[0]
@@ -159,6 +160,8 @@ export default {
         this.$router.push({ name: route.name })
       }
       this.$store.state.LevelOneMenuActiveName = menuId
+      this.$store.state.sidebarActiveSubMenuList =
+        this.$store.state.sidebarMenuList[idx].children || []
     },
     changeCustomerName(customerName) {
       this.customerName = localStorage.getItem('customerName')
diff --git a/epmet-oper-web/src/views/main-sidebar.vue b/epmet-oper-web/src/views/main-sidebar.vue
index 2483a99..e229b65 100644
--- a/epmet-oper-web/src/views/main-sidebar.vue
+++ b/epmet-oper-web/src/views/main-sidebar.vue
@@ -20,20 +20,16 @@
 
       <el-menu
         :default-active="$store.state.sidebarMenuActiveName"
-        :collapse="$store.state.sidebarFold"
         :unique-opened="true"
         :collapseTransition="false"
         class="aui-sidebar__menu"
         v-else
       >
-        <template v-for="item in $store.state.sidebarMenuList">
-          <sub-menu
-            v-if="$store.state.LevelOneMenuActiveName == item.id"
-            v-for="menu in item.children"
-            :key="menu.id"
-            :menu="menu"
-          />
-        </template>
+        <sub-menu
+          v-for="menu in $store.state.sidebarActiveSubMenuList"
+          :key="menu.id"
+          :menu="menu"
+        />
       </el-menu>
     </div>
   </aside>
diff --git a/epmet-oper-web/src/views/main.vue b/epmet-oper-web/src/views/main.vue
index 3331f01..d4d13fa 100644
--- a/epmet-oper-web/src/views/main.vue
+++ b/epmet-oper-web/src/views/main.vue
@@ -2,7 +2,13 @@
   <div
     v-loading.fullscreen.lock="loading"
     :element-loading-text="$t('loading')"
-    :class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]"
+    :class="[
+      'aui-wrapper',
+      { 'aui-sidebar--fold': $store.state.sidebarFold },
+      {
+        'aui-sidebar--noside': $store.state.sidebarActiveSubMenuList.length == 0
+      }
+    ]"
   >
     <template v-if="!loading">
       <main-navbar ref="ref_navbar" />
@@ -25,6 +31,8 @@ import MainContent from './main-content'
 import MainThemeTools from './main-theme-tools'
 import debounce from 'lodash/debounce'
 import { mapGetters } from 'vuex'
+import nextTick from 'dai-js/tools/nextTick'
+
 export default {
   provide() {
     return {
@@ -51,7 +59,7 @@ export default {
   watch: {
     $route: 'routeHandle'
   },
-  created() {
+  async created() {
     this.windowResizeHandle()
     this.routeHandle(this.$route)
     if (localStorage.getItem('userType') === 'work') {
@@ -106,9 +114,14 @@ export default {
       this.$store.state.contentTabsActiveName = tab.name
       this.syncLevelOneMenuActive(tab.menuId)
     },
-    syncLevelOneMenuActive(menuId) {
+    async syncLevelOneMenuActive(menuId) {
+      await nextTick()
+      console.log(
+        '*******************************',
+        menuId,
+        this.$store.state.sidebarMenuList
+      )
       const fn = (item) => {
-        console.log('++++++++++++++', item)
         if (item.id == menuId) {
           return true
         } else if (item.children.length > 0) {
@@ -120,6 +133,8 @@ export default {
       let idx = this.$store.state.sidebarMenuList.findIndex(fn)
       this.$store.state.LevelOneMenuActiveName =
         idx !== -1 ? this.$store.state.sidebarMenuList[idx].id : ''
+      this.$store.state.sidebarActiveSubMenuList =
+        idx !== -1 ? this.$store.state.sidebarMenuList[idx].children : []
     },
     // 获取当前管理员信息
     getUserInfo() {