From e261fbcbfbb7a8caf13b072dd98c139b80273c5b Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Mon, 25 Dec 2017 14:25:55 +0800
Subject: [PATCH] perf[navbar]: set langSelect to component && refine errorLog
 component

---
 src/components/ErrorLog/index.vue      | 14 ++++-----
 src/components/LangSelect/index.vue    | 41 ++++++++++++++++++++++++++
 src/views/layout/components/Navbar.vue | 39 ++++++------------------
 src/views/login/index.vue              |  9 ++++++
 4 files changed, 66 insertions(+), 37 deletions(-)
 create mode 100644 src/components/LangSelect/index.vue

diff --git a/src/components/ErrorLog/index.vue b/src/components/ErrorLog/index.vue
index e30acb3e..ac8c2aa2 100644
--- a/src/components/ErrorLog/index.vue
+++ b/src/components/ErrorLog/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="errorLogs.length>0">
     <el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
       <el-button size="small" type="danger" class="bug-btn">
         <svg t="1492682037685" class="bug-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863"
@@ -11,7 +11,7 @@
     </el-badge>
 
     <el-dialog title="Error Log" :visible.sync="dialogTableVisible" width="80%">
-      <el-table :data="logsList" border>
+      <el-table :data="errorLogs" border>
         <el-table-column label="Message">
           <template slot-scope="scope">
             <div>
@@ -44,15 +44,15 @@
 <script>
 export default {
   name: 'errorLog',
-  props: {
-    logsList: {
-      type: Array
-    }
-  },
   data() {
     return {
       dialogTableVisible: false
     }
+  },
+  computed: {
+    errorLogs() {
+      return this.$store.getters.errorLogs
+    }
   }
 }
 </script>
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
new file mode 100644
index 00000000..608b126a
--- /dev/null
+++ b/src/components/LangSelect/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <el-dropdown trigger="click" class='international' @command="handleSetLanguage">
+    <div>
+      <svg-icon class-name='international-icon' icon-class="language" />
+    </div>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
+      <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  computed: {
+    language() {
+      return this.$store.getters.language
+    }
+  },
+  methods: {
+    handleSetLanguage(lang) {
+      this.$i18n.locale = lang
+      this.$store.dispatch('setLanguage', lang)
+      this.$message({
+        message: 'switch language success',
+        type: 'success'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.international-icon {
+  font-size: 20px;
+  cursor: pointer;
+  vertical-align: -5px;
+}
+</style>
+
+
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
index b5ba99b4..dd8cf835 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -5,21 +5,13 @@
     <breadcrumb class="breadcrumb-container"></breadcrumb>
 
     <div class="right-menu">
-      <error-log v-if="errorLogs.length>0" class="errLog-container right-menu-item" :logsList="errorLogs"></error-log>
+      <error-log class="errLog-container right-menu-item"></error-log>
 
       <el-tooltip effect="dark" content="全屏" placement="bottom">
         <screenfull class="screenfull right-menu-item"></screenfull>
       </el-tooltip>
 
-      <el-dropdown trigger="click" class='international' @command="handleSetLanguage">
-        <div>
-          <svg-icon class-name='right-menu-item international-icon' icon-class="language" />
-        </div>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
-          <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
+      <lang-select class="international right-menu-item"></lang-select>
 
       <el-tooltip effect="dark" content="换肤" placement="bottom">
         <theme-picker class="theme-switch right-menu-item"></theme-picker>
@@ -54,39 +46,31 @@
 import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
-import ThemePicker from '@/components/ThemePicker'
-import Screenfull from '@/components/Screenfull'
 import ErrorLog from '@/components/ErrorLog'
+import Screenfull from '@/components/Screenfull'
+import LangSelect from '@/components/LangSelect'
+import ThemePicker from '@/components/ThemePicker'
 
 export default {
   components: {
     Breadcrumb,
     Hamburger,
-    ThemePicker,
     ErrorLog,
-    Screenfull
+    Screenfull,
+    LangSelect,
+    ThemePicker
   },
   computed: {
     ...mapGetters([
       'sidebar',
       'name',
-      'avatar',
-      'language',
-      'errorLogs'
+      'avatar'
     ])
   },
   methods: {
     toggleSideBar() {
       this.$store.dispatch('toggleSideBar')
     },
-    handleSetLanguage(lang) {
-      this.$i18n.locale = lang
-      this.$store.dispatch('setLanguage', lang)
-      this.$message({
-        message: 'switch language success',
-        type: 'success'
-      })
-    },
     logout() {
       this.$store.dispatch('LogOut').then(() => {
         location.reload()// 为了重新实例化vue-router对象 避免bug
@@ -129,11 +113,6 @@ export default {
     }
     .international{
       vertical-align: top;
-      .international-icon{
-        font-size: 20px;
-        cursor: pointer;
-        vertical-align: -5px;
-      }
     }
     .theme-switch {
       vertical-align: 15px;
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 38c1c687..1a74c0d7 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -2,6 +2,15 @@
   <div class="login-container">
     <el-form class="card-box login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
       <h3 class="title">系统登录</h3>
+      <el-dropdown trigger="click" class='international' @command="handleSetLanguage">
+        <div>
+          <svg-icon class-name='right-menu-item international-icon' icon-class="language" />
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
+          <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
 
       <el-form-item prop="username">
         <span class="svg-container svg-container_login">