perf[navbar]: set langSelect to component && refine errorLog component

This commit is contained in:
Pan 2017-12-25 14:25:55 +08:00 committed by 花裤衩
parent 471c297f13
commit e261fbcbfb
4 changed files with 66 additions and 37 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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;

View File

@ -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">