bug修复

ZZJ

2022-07-14 2b99047683332624832c1dfcae596e957a710b7d

 src/views/equipmentManagement/equipmentList/components/JoinClusterBox.vue

@@ -1,5 +1,5 @@
<template>
  <div class="QuitClusterBox" @click="showClusterList = false">
  <div class="JoinClusterBox" @click="showClusterList = false">
    <div class="title">加入集群</div>
    <!-- 切换tab -->
    <div class="tabs" :class="{ right: activeTab == '加入已有集群' }">
@@ -23,12 +23,15 @@
      v-if="activeTab == '创建集群'"
    >
      <el-form-item prop="name" label="集群名称">
        <el-input v-model="formData.name" placeholder="请输入"></el-input>
        <el-input
          v-model="formData.clustername"
          placeholder="请输入"
        ></el-input>
      </el-form-item>

      <el-form-item prop="id" label="集群ID">
        <el-input
          v-model="formData.id"
          v-model="id"
          :disabled="true"
          placeholder="创建集群后回显"
        ></el-input>
@@ -39,12 +42,12 @@
          v-model="formData.password"
          placeholder="请输入,或点击生成密码"
        ></el-input>
        <div class="createPassword">生成密码</div>
        <div class="createPassword" @click="generatePassword">生成密码</div>
      </el-form-item>

      <el-form-item prop="ip" label="集群IP">
        <ip-input
          :ip="formData.ip"
          :ip="formData.virtualIp"
          :on-blur="onCreateIpBlur"
          class="ip-input-comp"
        ></ip-input>
@@ -61,12 +64,12 @@
      autocomplete="off"
    >
      <el-form-item prop="id" label="集群ID">
        <el-input v-model="formData2.name" placeholder="请输入"></el-input>
        <el-input v-model="formData2.clusterId" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item prop="ip" label="IP地址">
        <ip-input
          :ip="formData2.ip"
          :ip="formData2.nodeIps"
          :on-blur="onJoinIpBlur"
          class="ip-input-comp"
        ></ip-input>
@@ -75,7 +78,7 @@
      <el-form-item prop="password" label="集群密码" class="password">
        <el-input
          v-model="formData2.password"
          placeholder="请输入,或点击生成密码"
          placeholder="请输入"
          class="passwordInput"
          :class="{ hiddenPassword: hiddenPassword }"
        >
@@ -94,21 +97,14 @@
        <div class="search" @click="searchCluster">搜索集群</div>
      </el-form-item>

      <el-form-item prop="ip" label="集群IP">
        <ip-input
          :ip="formData2.clusterIp"
          :on-blur="onClusterIpBlur"
          class="ip-input-comp"
        ></ip-input>
      </el-form-item>

      <div class="clusterList" v-if="showClusterList">
        <div
          class="clusterItem"
          v-for="(item, index) in clusterList"
          :key="index"
          @click="join2(item)"
        >
          {{ item }}
          {{ item.clusterId }}
        </div>
      </div>
    </el-form>
@@ -116,7 +112,7 @@
    <!-- 取消与提交 -->
    <div class="btns">
      <div class="cancel button" @click="close()">取消</div>
      <div class="quit button" @click="close()">退出集群</div>
      <div class="quit button" @click="submit">加入集群</div>
    </div>

    <div class="close iconfont" @click="close()">&#xe60f;</div>
@@ -124,30 +120,43 @@
</template>

<script>
import {
  createSerfCluster,
  getSearchNodes,
  findCluster,
  joinCluster,
} from "@/api/clusterManage";
import ipInput from "@/components/IPInput";

export default {
  components: {
    ipInput,
  },
  props: {
    equipment: {},
  },
  created() {
    this.formData.nodeId = this.equipment.devId;
    this.formData2.nodeId = this.equipment.devId;
  },
  data() {
    return {
      id: "",
      tabArr: ["创建集群", "加入已有集群"], //tab栏
      activeTab: "创建集群", //选中的tab
      formData: {
        name: "189集群",
        id: "5ee1dfa8-e3fb-4d62-8692-388d7632859b",
        password: "123456",
        ip: "192.168.20.117",
        clustername: "",
        password: "",
        virtualIp: "",
      }, //创建集群表单数据
      formData2: {
        id: "",
        ip: "",
        clusterId: "",
        password: "",
        clusterIp: "",
        virtualIp: "",
        nodeIps: "",
      }, //加入集群表单数据
      hiddenPassword: false, //隐藏密码
      clusterList: ["192.168.20.4", "192.168.20.5", "192.168.20.6"], //集群列表
      clusterList: [], //集群列表
      showClusterList: false, //是否展示集群列表
    };
  },
@@ -157,27 +166,108 @@
    },
    //创建集群ip回调
    onCreateIpBlur(ip) {
      this.formData.ip = ip;
      this.formData.virtualIp = ip;
    },
    //加入集群ip地址
    onJoinIpBlur(ip) {
      this.formData2.ip = ip;
      this.formData2.nodeIps = ip;
    },
    //加入集群集群ip
    onClusterIpBlur(ip) {
      this.formData2.clusterIp = ip;
      this.formData2.virtualIp = ip;
    },

    //搜索集群列表
    searchCluster(e) {
    async searchCluster(e) {
      this.clusterList = [];
      e.stopPropagation();
      this.showClusterList = true;
      let res = await getSearchNodes({
        nodeId: this.equipment.devId,
      });
      if (res && res.success) {
        res.data.forEach((item) => {
          const obj = {
            clusterId: item.clusterID,
            nodeIps: [item.nodeAddress],
            password: this.formData2.password,
            nodeId: this.equipment.devId,
          };
          this.clusterList.push(obj);
        });
      }
    },
    //创建集群
    async submitForm() {
      const res = await createSerfCluster(this.formData);
      this.findCluster();
      if (res && res.success) {
        this.$notify({
          message: "操作成功",
          type: "success",
        });
      }
      this.close();
    },
    // 生成密码
    generatePassword() {
      var chars =
        "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
      var uuid = [];

      for (let i = 0; i < 6; i++) {
        uuid[i] = chars[0 | (Math.random() * 50)];
      }
      this.formData.password = uuid.join("");
    },
    async findCluster() {
      let res = await findCluster({
        nodeId: this.equipment.devId,
      });
      if (res && res.success) {
        if (res.data && res.data.clusterId) {
          this.id = res.data.clusterId;
        }
      }
    },
    async join() {
      let res = await joinCluster({
        clusterId: this.formData2.clusterId,
        password: this.formData2.password,
        nodeIps: [this.formData2.nodeIps],
        nodeId: this.equipment.devId,
      });
      if (res && res.success) {
        this.$notify({
          message: "操作成功",
          type: "success",
        });
      }
      this.close();
    },
    async join2(item) {
      let res = await joinCluster(item);
      if (res && res.success) {
        this.$notify({
          message: "操作成功",
          type: "success",
        });
      }
      this.close();
    },
    submit() {
      if (this.activeTab == "创建集群") {
        this.submitForm();
      } else {
        this.join();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.QuitClusterBox {
.JoinClusterBox {
  position: relative;
  box-sizing: border-box;
  padding: 20px;
@@ -272,6 +362,7 @@
      .createPassword {
        font-size: 14px;
        color: #0065ff;
        cursor: pointer;
      }

      .search {
@@ -307,6 +398,7 @@
    box-shadow: 0px 4px 12px rgba(0, 43, 106, 0.12);

    .clusterItem {
      font-size: 12px;
      padding-left: 10px;
      height: 40px;
      line-height: 40px;
@@ -321,7 +413,7 @@
  .btns {
    margin-top: 20px;
    display: flex;
    justify-content: end;
    justify-content: flex-end;
    text-align: center;
    line-height: 32px;
    font-size: 14px;