🐛 修复导航样式bug

Author: 陈鑫

src/components/GlobalHeader/Menus.vue

@@ -1,20 +1,23 @@
 <template>
   <div :class="['menu-class', mode+'-menu-class']">
-    <a-menu
-      theme="dark"
-      :selected-keys="[activeRoute]"
-      :default-open-keys="!collapsed ? openKeys : []"
-      @click="handleMenuItem"
-      :mode="mode"
-      :inline-collapsed="collapsed"
-      :style="{ lineHeight: '54px' }"
-    >
+    <a-menu theme="dark"
+            :selected-keys="[activeRoute]"
+            :default-open-keys="openKeys"
+            @click="handleMenuItem"
+            :mode="mode"
+            :inline-collapsed="collapsed"
+            :style="{ lineHeight: '54px' }">
       <template v-for="menu in menuLists">
-        <a-menu-item v-if="!menu.children || !menu.children.length" :key="menu.path">
-          <span v-if="menu.meta['icon']" :class="['iconfont', menu.meta['icon'], 'menu-icon']"></span>
+        <a-menu-item v-if="!menu.children || !menu.children.length"
+                     :key="menu.path">
+          <span v-if="menu.meta['icon']"
+                :class="['iconfont', menu.meta['icon'], 'menu-icon']"></span>
           <span>{{$t(menu.meta['title'])}}</span>
         </a-menu-item>
-        <sub-menu v-else :menu="menu" :transferI18n="transferI18n" :key="menu.path"></sub-menu>
+        <sub-menu v-else
+                  :menu="menu"
+                  :transferI18n="transferI18n"
+                  :key="menu.path"></sub-menu>
       </template>
     </a-menu>
   </div>
@@ -32,33 +35,38 @@ import SubMenu from "./SubMenu.vue";
     AMenu: Menu,
     AMenuItem: Menu.Item,
     ASubMenu: Menu.SubMenu,
-    SubMenu
-  }
+    SubMenu,
+  },
 })
 export default class Menus extends Vue {
   @Prop({
     type: String,
     required: false,
-    default: "horizontal"
+    default: "horizontal",
   })
   mode!: string;
 
   //inital data
   private activeRoute: string = "";
   private menus: RouteConfig[] = [];
-  private openKeys: string[] = ["/smart", "/eoms", "/system", "/database"];
 
   mounted() {
     this.getMenus();
     this.routeChange(this.$route, this.$route);
   }
-
   //inital computed
+  get openKeys() {
+    if (this.mode == "inline" && !this.collapsed) {
+      return ["/smart", "/eoms", "/system", "/database"];
+    } else {
+      return [];
+    }
+  }
   get collapsed(): boolean {
     return CommonModule.getCollapsed;
   }
   get menuLists() {
-    return this.menus.filter(item => {
+    return this.menus.filter((item) => {
       return !item.meta["hidden"];
     });
   }

src/layouts/LevelBasicLayout.vue

@@ -5,6 +5,14 @@
       <template slot="rightCon">
         <menus></menus>
         <div class="user-info">
+          <a-select :default-value="lang"
+                    size="small"
+                    @change="toggleChangeLang"
+                    class="lang-box">
+            <a-select-option v-for="(item, index) in Languages"
+                             :value="item.value"
+                             :key="item.value">{{$t(item.label)}}</a-select-option>
+          </a-select>
           <a-dropdown>
             <div>
               <img src="../assets/user.png"
@@ -37,11 +45,12 @@
 </template>
 
 <script lang="ts">
+import { Languages } from "@/utils/const";
 import { logout } from "@/api/users";
-import { Component, Vue, Ref } from "vue-property-decorator";
+import { Component, Vue, Ref, Inject } from "vue-property-decorator";
 import { GlobalHeader, Menus } from "@/components/GlobalHeader";
 import UpdatePass from "@/views/user/model/updatePass.vue";
-import { Layout, Dropdown, Menu, Icon, Modal } from "ant-design-vue";
+import { Layout, Dropdown, Menu, Icon, Modal, Select } from "ant-design-vue";
 
 @Component({
   components: {
@@ -54,15 +63,25 @@ import { Layout, Dropdown, Menu, Icon, Modal } from "ant-design-vue";
     AMenu: Menu,
     AMenuItem: Menu.Item,
     AMenuDivider: Menu.Divider,
+    ASelect: Select,
+    ASelectOption: Select.Option,
   },
 })
 export default class LevelBasicLayout extends Vue {
   @Ref() readonly updatePass!: UpdatePass;
+  @Inject() reload!: any;
+  private Languages: { value: string; label: string }[] = Languages;
+  private lang: string = sessionStorage.getItem("LANGUAGE") as string;
 
   private goToHome() {
     this.$router.push("/");
   }
-
+  //切换语言
+  private toggleChangeLang(val: string) {
+    this.$i18n.locale = val;
+    sessionStorage.setItem("LANGUAGE", val);
+    this.reload();
+  }
   //显示修改密码框
   private handlePass() {
     this.updatePass.show();
@@ -106,6 +125,22 @@ export default class LevelBasicLayout extends Vue {
     flex-flow: row nowrap;
     align-items: center;
     justify-content: flex-end;
+    .lang-box {
+      width: 80px;
+      margin-right: 10px;
+      &.ant-select {
+        font-size: 12px;
+      }
+      .ant-select-selection {
+        background: transparent;
+        border: 1px solid #a7a5a5;
+        color: #fff;
+      }
+      .ant-select-arrow {
+        color: #fff;
+        font-size: 10px;
+      }
+    }
     .ant-dropdown-trigger {
       height: 54px;
       line-height: 54px;

src/layouts/VerticalBasicLayout.vue

@@ -33,7 +33,7 @@
     <a-layout-content>
       <div class="left-menus"
            :style="{width:collapsed ? '60px' : '220px'}">
-        <Menus mode="inline"></Menus>
+        <menus mode="inline"></menus>
         <div class="tootip"
              @click="collapseExpand">
           <a-icon v-if="!collapsed"
@@ -163,6 +163,7 @@ export default class VerticalBasicLayout extends Vue {
       background: #fff;
       margin: 10px 10px 0 10px;
       box-shadow: 0 1px 20px #c6c4c4;
+      overflow: hidden;
     }
   }
   .user-info {

src/router/router.config.ts

@@ -13,7 +13,7 @@ const mainRoutes: RouteConfig = {
   path: '/',
   name: 'home',
   redirect: '/login',
-  component: VerticalBasicLayout,
+  component: LevelBasicLayout,
   children: [
     {
       path: '/404',