all

heyujie

2021-07-21 b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1

 src/pages/settings/views/keyboardLanguage.vue

@@ -1,31 +1,52 @@
<template>

  <div class="all">

    <div class="cluster-content">

      <div class="cluster-center" ref="left">

    <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(item, i)"

          ref="leftbar"

        >

          <div>{{ item.name }}</div>

          <span class="iconfont">{{ item.icon }}</span>

          <span class="title">{{ item.name }}</span>

        </div>

      </div>

      <div class="cluster-right">

        <div class="lang" v-if="activePage == '系统语言'">

      <div class="language-right">

        <div class="lang" v-if="activePage == 0">

          <div class="title">语言列表</div>

          <div class="bar" v-for="(item, i) in langList" :key="i" @click="pickLang(item, i)">

          <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" v-show="activeLang == item.Lang">已选</span>

            <span

              class="icon iconfont"

              style="color: #3d68e1;font-size:18px;"

              v-show="activeLang == item.Lang"

              >&#xe6f1;</span

            >

          </div>

        </div>

        <div class="lang" v-if="activePage == '键盘管理'">

        <div class="lang" v-if="activePage == 1">

          <div class="title">键盘布局</div>

          <div class="bar" v-for="(item, i) in keyboardList" :key="i" @click="pickKb(item, i)">

          <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" v-show="activeKb == item.id">已选</span>

            <!-- <span class="icon iconfont">&#xe646;</span> -->

            <span

              class="icon iconfont"

              style="color: #3d68e1;font-size:18px;"

              v-show="activeKb == item.id"

              >&#xe6f1;</span

            >

          </div>

        </div>

      </div>

@@ -35,23 +56,6 @@


<script>

import {

  createSerfCluster,

  randomPwd,

  search,

  getSearchNodes,

  stopSearching,

  findCluster,

  updateClusterName,

  joinCluster,

  leave,

  getVrrp,

  setVrrp,

  createESNode,

  addESNode,

  getEsClusterInfo,

} from "@/api/clusterManage";



import {

  getLangs,

  setLang,

  getLang,

@@ -59,25 +63,19 @@
  getCurKeyboardLayout,

  setKeyboardLayout,

} from "@/api/system";

import { isIPv4 } from "@/scripts/validate";



export default {

  data() {

    return {

      activeLang: "",

      activeKb: "",

      inWifiDetail: false,

      inWireDetail: false,

      langList: [],

      keyboardList: [],

      tabList: [{ name: "系统语言" }, { name: "键盘管理" }],

      activePage: "系统语言",

      rules: {

        deviceName: [

          { required: true, message: "请输入设备名称", trigger: "change" },

        ],

      },

      value: "",

      tabList: [

        { name: "系统语言", icon: "\ue6e8" },

        { name: "键盘管理", icon: "\ue6fe" },

      ],

      activePage: 0,

    };

  },

  mounted() {

@@ -86,14 +84,12 @@
    this.fetchKeyBoardList();

    this.getCurKb();

  },

  props: ["barName"],

  methods: {

    getCurKb() {

      getCurKeyboardLayout().then((res) => {

        this.activeKb = res.data.keyboard;

      });

    },



    getCurLang() {

      getLang().then((res) => {

        if (res && res.success) {

@@ -116,6 +112,9 @@
      });

    },

    pickLang(item) {

      if (item.Lang==this.activeLang) {

        return

      }

      setLang({

        lang: item.Lang,

      }).then(

@@ -129,11 +128,14 @@
      );

    },

    pickKb(item) {

      if (this.activeKb==item.id) {

        return

      }

      setKeyboardLayout({

        layout: item.id,

      }).then(

        (res) => {

          this.getCurKb()

          this.getCurKb();

          this.$message.success(res.data);

        },

        (err) => {

@@ -142,20 +144,7 @@
      );

    },

    openRight(item, i) {

      this.activePage = item.name;

      this.$refs["leftbar"].forEach((x) => {

        x.style.backgroundColor = "rgba(248, 248, 248, 1)";

        x.style.color = "#333";

      });

      this.$refs["leftbar"][i].style.backgroundColor = "rgb(61, 104, 225)";

      this.$refs["leftbar"][i].style.color = "white";

    },

    wifiControl(val) { },

    checkWifi() {

      this.inWifiDetail = true;

    },

    checkWire(item) {

      this.inWireDetail = true;

      this.activePage = i;

    },

  },

};

@@ -165,14 +154,14 @@
  width: 100%;

}



.cluster-content {

.kb-content {

  height: 100%;

  display: flex;

  flex-direction: row;

  flex: 1;

  flex-basis: auto;

  box-sizing: border-box;

  .cluster-center {

  .kb-center {

    height: 100%;

    width: 280px;

    overflow: auto;

@@ -180,30 +169,41 @@
    flex-shrink: 0;

    padding: 10px;

    border-right: 5px solid #f8f8f8;



    // background-color: lavender;

    .menu-item {

      background-color: #f8f8f8;

      height: 40px;

      height: 50px;

      margin-bottom: 10px;

      border-radius: 8px;

      line-height: 40px;

      line-height: 50px;

      box-sizing: border-box;

      font-size: 14px;

      padding: 0 20px;

      display: flex;

      justify-content: space-between;

      align-items: center;

      .title {

        font-size: 16px;

      }

      .iconfont {

        margin-right: 10px;

        font-size: 19px;

      }

    }

    .menu-item-active {

      background-color: #3d68e1;

      color: white;

    }

    .menu-item:hover {

      background-color: #3d68e1;

      color: white;

    }

  }

  .cluster-right {

  .language-right {

    flex: 1;

    flex-basis: auto;

    overflow: auto;

    // background-color: rgba(240, 242, 245, 1);

    box-sizing: border-box;

    position: relative;

    padding: 20px 40px;

    // .create-new .join-exist {

    .el-form-item.is-required:not(.is-no-asterisk)

      > .el-form-item__label:before,

    .el-form-item.is-required:not(.is-no-asterisk)

@@ -236,16 +236,29 @@
      max-width: none !important;

    }

    .lang {

      .title {

        height: 30px;

        line-height: 30px;

        font-size: 16px;

        margin-bottom: 10px;

      }

      .bar {

        height: 50px;

        background-color: aliceblue;

        height: 48px;

        background-color: #f8f8f8;

        border-radius: 10px;

        line-height: 50px;

        box-sizing: border-box;

        padding: 0 20px;

        display: flex;

        justify-content: space-between;

        margin-bottom: 10px;

        cursor: pointer;

        margin-bottom: 12px;

        .name{

               font-size: 15px;

        }

      }

      .bar:hover{

            background-color: #e9e9e9;

      }

    }

    .save-btn {