perf[navbar]: set langSelect to component && refine errorLog component
This commit is contained in:
Pan
花裤衩
parent
471c297f13
commit
e261fbcbfb
|
|
@ -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>
|
||||
|
|
|
|||
41
src/components/LangSelect/index.vue
Normal file
41
src/components/LangSelect/index.vue
Normal 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>
|
||||
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue