解决筛选条件项多次重复问题

heyujie

2021-06-25 81fd2fff7dba4af2749ce5288a7afde8e5cdb538

 src/pages/systemSettings/views/keyboardLanguage.vue

@@ -10,14 +10,15 @@
        </div>

      </div>

      <div class="cluster-right">

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

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

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

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

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

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

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

          </div>

        </div>

        <div class="lang" v-if="activePage=='keyboard'">

        <div class="lang" v-if="activePage == 'keyboard'">

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

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

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

@@ -46,89 +47,70 @@
  addESNode,

  getEsClusterInfo,

} from "@/api/clusterManage";

import cloudNode from "../components/CloudNode";

import ipInput from "@/components/subComponents/IPInput";



import { getLangs, setLang, getLang, getKeyboardLayouts } from "@/api/system";

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

import switchBar from "../components/switchBar";



export default {

  data() {

    const checkPwd = (rule, value, callback) => {

      if (!value) {

        return callback(new Error("密码不能为空"));

      }

      setTimeout(() => {

        if (value.length != 6) {

          callback(new Error("密码应为6位!"));

        } else {

          callback();

        }

      }, 1000);

    };

    return {

      isHighClass: false,



      ruleForm: {

        deviceName: "",

        port: "",

      },

      wifiForm: {

        name: "",

        password: "",

      },

      wireArr: [{ name: "有线网络1" }, { name: "有线网络2" }],

      activeLang: "",

      inWifiDetail: false,

      wifiList: [{ name: "无线网络1" }, { name: "无线网络2" }],

      isOpenWifi: false,

      inWireDetail: false,

      wireForm: {},

      langList: [

        { name: "简体中文" },

        { name: "英文" },

        { name: "繁体中文（香港）" },

      ],

        keyboardList: [

        { name: "Hanyu Pinyin(algtr)" },

        { name: "ENG" },

      ],

      
      wireFormRules: {},

      langList: [],

      keyboardList: [],

      activePage: "lang",

      rules: {

        deviceName: [

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

        ],

      },

      ipv4Form: {},

      ipv6Form: {},

      ipv4FormRules: {},

      ipv6FormRules: {},

      options: [

        {

          value: "选项1",

          label: "手动",

        },

        {

          value: "选项2",

          label: "自动",

        },

      ],

      value: "",

    };

  },

  components: {

    cloudNode,

    ipInput,

    switchBar,

  mounted() {

    this.fetchLangList();

    this.getCurLang();

  },

  mounted() {},

  beforeDestroy() {},

  props: ["barName"],

  methods: {

    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;

        }

      });

    },

    pickLang(item) {

      setLang({

        lang: item.Lang,

      }).then(

        (res) => {

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

        },

        (err) => {

          this.$message.error(err.msg);

        }

      );

    },

    openRight(typ) {

      this.activePage = typ;

      if (typ == "keyboard") {

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

          if (res && res.success) {

            this.keyboardList = res.data.slice(0, 5);

          }

        });

      }

    },

    wifiControl(val) {},

    wifiControl(val) { },

    checkWifi() {

      this.inWifiDetail = true;

    },

@@ -152,12 +134,14 @@
  box-sizing: border-box;

  .cluster-center {

    height: 100%;

    width: 260px;

    width: 280px;

    overflow: auto;

    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;

    background-color: lavender;

    border-right: 5px solid #f8f8f8;



    // background-color: lavender;

    .menu-item {

      background-color: #f8f8f8;

      height: 40px;