<template>
|
<div class="all">
|
<div class="kb-content">
|
<div class="kb-center" ref="left">
|
<div
|
class="menu-item"
|
v-for="(item, i) in tabList"
|
:class="activePage == i ? 'menu-item-active' : ''"
|
:key="i"
|
@click="openRight( i)"
|
ref="leftbar"
|
>
|
<span class="iconfont">{{ item.icon }}</span>
|
<span class="title">{{ item.name }}</span>
|
</div>
|
</div>
|
<div class="language-right">
|
<div class="lang" v-if="activePage == 0">
|
<div class="bar title">语言列表</div>
|
<div
|
class="bar"
|
v-for="(item, i) in langList"
|
:key="i"
|
@click="pickLang(item, i)"
|
>
|
<span class="name">{{ item.Name }}</span>
|
<span
|
class="icon iconfont"
|
style="color: #4E94FF;font-size:16px;"
|
v-show="activeLang == item.Lang"
|
></span
|
>
|
</div>
|
</div>
|
<div class="lang" v-if="activePage == 1">
|
<div class="title bar">键盘布局</div>
|
<div
|
class="bar"
|
v-for="(item, i) in keyboardList"
|
:key="i"
|
@click="pickKb(item, i)"
|
>
|
<span class="name">{{ item.name }}</span>
|
<span
|
class="icon iconfont"
|
style="color: #4E94FF;font-size:16px;"
|
v-show="activeKb == item.id"
|
></span
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getLangs,
|
setLang,
|
getLang,
|
getKeyboardLayouts,
|
getCurKeyboardLayout,
|
setKeyboardLayout,
|
} from "@/api/system";
|
|
export default {
|
data() {
|
return {
|
activeLang: "",
|
activeKb: "",
|
langList: [],
|
keyboardList: [],
|
tabList: [
|
{ name: "系统语言", icon: "\ue6e8" },
|
{ name: "键盘管理", icon: "\ue6fe" },
|
],
|
activePage: 0,
|
};
|
},
|
mounted() {
|
this.fetchLangList();
|
this.getCurLang();
|
this.fetchKeyBoardList();
|
this.getCurKb();
|
},
|
methods: {
|
getCurKb() {
|
getCurKeyboardLayout().then((res) => {
|
this.activeKb = res.data.keyboard;
|
});
|
},
|
getCurLang() {
|
getLang().then((res) => {
|
if (res && res.success) {
|
this.activeLang = res.data.lang;
|
}
|
});
|
},
|
fetchLangList() {
|
getLangs().then((res) => {
|
if (res && res.success) {
|
this.langList = res.data;
|
}
|
});
|
},
|
fetchKeyBoardList() {
|
getKeyboardLayouts().then((res) => {
|
if (res && res.success) {
|
this.keyboardList = res.data.slice(0, 5);
|
}
|
});
|
},
|
pickLang(item) {
|
if (item.Lang==this.activeLang) {
|
return
|
}
|
setLang({
|
lang: item.Lang,
|
}).then(
|
(res) => {
|
this.getCurLang();
|
this.$message.success(res.data);
|
},
|
(err) => {
|
this.$message.error(err.msg);
|
}
|
);
|
},
|
pickKb(item) {
|
if (this.activeKb==item.id) {
|
return
|
}
|
setKeyboardLayout({
|
layout: item.id,
|
}).then(
|
(res) => {
|
this.getCurKb();
|
this.$message.success(res.data);
|
},
|
(err) => {
|
this.$message.error(err.msg);
|
}
|
);
|
},
|
openRight(i) {
|
this.activePage = i;
|
},
|
},
|
};
|
</script>
|
<style lang="scss">
|
.all {
|
width: 100%;
|
}
|
|
.kb-content {
|
font-weight: 700;
|
height: 100%;
|
display: flex;
|
flex-direction: row;
|
flex: 1;
|
flex-basis: auto;
|
box-sizing: border-box;
|
.kb-center {
|
height: 100%;
|
width: 300px;
|
overflow: auto;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
padding: 24px 10px 0px 10px;
|
background-color: #FBFAFF;
|
border-right: 4px solid #F2F2F7;
|
.menu-item {
|
/* background-color: #F2F2F7; */
|
height: 56px;
|
margin-bottom: 4px;
|
border-radius: 8px;
|
line-height: 56px;
|
box-sizing: border-box;
|
padding: 0 20px;cursor: pointer;
|
display: flex;
|
align-items: center;
|
color: #333;
|
.title {
|
font-size: 16px;
|
font-weight: 700;
|
}
|
.iconfont {
|
margin: 15px;
|
font-size: 24px;
|
}
|
}
|
.menu-item-active {
|
background-color: var(--colorCard);
|
color: white;
|
}
|
.menu-item:hover {
|
background-color: var(--colorCard);
|
color: white;
|
}
|
}
|
.language-right {
|
flex: 1;
|
flex-basis: auto;
|
overflow: auto;
|
box-sizing: border-box;
|
position: relative;
|
padding: 10px;
|
.el-form-item.is-required:not(.is-no-asterisk)
|
> .el-form-item__label:before,
|
.el-form-item.is-required:not(.is-no-asterisk)
|
.el-form-item__label-wrap
|
> .el-form-item__label:before {
|
display: none;
|
}
|
.el-select {
|
width: 100%;
|
}
|
.el-form-item {
|
margin-bottom: 10px;
|
height: 50px;
|
background: #f8f8f8;
|
padding: 4px 20px;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
border-radius: 10px;
|
.el-form-item__label {
|
text-align: left;
|
line-height: 42px;
|
}
|
}
|
.el-form-item__content {
|
line-height: 40px;
|
position: relative;
|
font-size: 14px;
|
}
|
.ip-input-container {
|
max-width: none !important;
|
}
|
.lang {
|
.bar {
|
height: 48px;
|
background-color: #f8f8f8;
|
border-radius: 8px;
|
line-height: 50px;
|
box-sizing: content-box;
|
padding: 0 15px 0 20px;
|
display: flex;
|
justify-content: space-between;
|
cursor: pointer;
|
margin-bottom: 4px;
|
border: 2px solid #f8f8f8;
|
.name{
|
font-size: 14px;
|
}
|
}
|
.bar:hover{
|
border: 2px solid #4E94FF;
|
}
|
.title {
|
cursor:default ;
|
font-size: 16px;
|
justify-content: center;
|
border: 2px solid #f8f8f8 !important;
|
}
|
}
|
.save-btn {
|
background-color: #3d68e1;
|
width: 240px;
|
height: 40px;
|
margin: 0 auto;
|
border-radius: 10px;
|
color: #fff;
|
line-height: 40px;
|
font-size: 14px;
|
margin-top: 20px;
|
}
|
}
|
}
|
</style>
|
