From 05d754bb09ba4aeddd60320d33d583d388434c2f Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 20 十二月 2021 15:38:45 +0800
Subject: [PATCH] 树形组件修改

---
 src/pages/systemSettings/views/keyboardLanguage.vue |  100 ++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 76 insertions(+), 24 deletions(-)

diff --git a/src/pages/systemSettings/views/keyboardLanguage.vue b/src/pages/systemSettings/views/keyboardLanguage.vue
index 339ba0d..bdcdf56 100644
--- a/src/pages/systemSettings/views/keyboardLanguage.vue
+++ b/src/pages/systemSettings/views/keyboardLanguage.vue
@@ -2,27 +2,42 @@
   <div class="all">
     <div class="cluster-content">
       <div class="cluster-center" ref="left">
-        <div class="menu-item" @click="openRight('lang')">
-          <div>绯荤粺璇█</div>
-        </div>
-        <div class="menu-item" @click="openRight('keyboard')">
-          <div>閿洏绠＄悊</div>
+        <div
+          class="menu-item"
+          v-for="(item, i) in tabList"
+          :key="i"
+          @click="openRight(item, i)"
+          ref="leftbar"
+        >
+          <div>{{ item.name }}</div>
         </div>
       </div>
       <div class="cluster-right">
-        <div class="lang" v-if="activePage == 'lang'">
+        <div class="lang" v-if="activePage == '绯荤粺璇█'">
           <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">&#xe646;</span> -->
-            <span class="icon iconfont" v-show="activeLang == item.Lang">宸查��</span>
+            <span class="icon iconfont" v-show="activeLang == item.Lang"
+              >宸查��</span
+            >
           </div>
         </div>
-        <div class="lang" v-if="activePage == 'keyboard'">
+        <div class="lang" v-if="activePage == '閿洏绠＄悊'">
           <div class="title">閿洏甯冨眬</div>
-          <div class="bar" v-for="(item, i) in keyboardList" :key="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">&#xe646;</span>
+            <span class="icon iconfont" v-show="activeKb == item.id">宸查��</span>
+            <!-- <span class="icon iconfont">&#xe646;</span> -->
           </div>
         </div>
       </div>
@@ -48,18 +63,27 @@
   getEsClusterInfo,
 } from "@/api/clusterManage";
 
-import { getLangs, setLang, getLang, getKeyboardLayouts } from "@/api/system";
+import {
+  getLangs,
+  setLang,
+  getLang,
+  getKeyboardLayouts,
+  getCurKeyboardLayout,
+  setKeyboardLayout,
+} from "@/api/system";
 import { isIPv4 } from "@/scripts/validate";
 
 export default {
   data() {
     return {
       activeLang: "",
+      activeKb: "",
       inWifiDetail: false,
       inWireDetail: false,
       langList: [],
       keyboardList: [],
-      activePage: "lang",
+      tabList: [{ name: "绯荤粺璇█" }, { name: "閿洏绠＄悊" }],
+      activePage: "绯荤粺璇█",
       rules: {
         deviceName: [
           { required: true, message: "璇疯緭鍏ヨ澶囧悕绉�", trigger: "change" },
@@ -71,9 +95,17 @@
   mounted() {
     this.fetchLangList();
     this.getCurLang();
+    this.fetchKeyBoardList();
+    this.getCurKb();
   },
   props: ["barName"],
   methods: {
+    getCurKb() {
+      getCurKeyboardLayout().then((res) => {
+        this.activeKb = res.data.keyboard;
+      });
+    },
+
     getCurLang() {
       getLang().then((res) => {
         if (res && res.success) {
@@ -88,11 +120,19 @@
         }
       });
     },
+    fetchKeyBoardList() {
+      getKeyboardLayouts().then((res) => {
+        if (res && res.success) {
+          this.keyboardList = res.data.slice(0, 5);
+        }
+      });
+    },
     pickLang(item) {
       setLang({
         lang: item.Lang,
       }).then(
         (res) => {
+          this.getCurLang();
           this.$message.success(res.data);
         },
         (err) => {
@@ -100,17 +140,29 @@
         }
       );
     },
-    openRight(typ) {
-      this.activePage = typ;
-      if (typ == "keyboard") {
-        getKeyboardLayouts().then((res) => {
-          if (res && res.success) {
-            this.keyboardList = res.data.slice(0, 5);
-          }
-        });
-      }
+    pickKb(item) {
+      setKeyboardLayout({
+        layout: item.id,
+      }).then(
+        (res) => {
+          this.getCurKb()
+          this.$message.success(res.data);
+        },
+        (err) => {
+          this.$message.error(err.msg);
+        }
+      );
     },
-    wifiControl(val) { },
+    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;
     },

--
Gitblit v1.8.0