all

heyujie

2021-07-21 b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1

 src/pages/settings/views/clusterManagement.vue

@@ -84,11 +84,18 @@


    <div class="cluster-content">

      <div class="cluster-center" ref="left" v-if="!showCurCluster">

        <div class="menu-item" @click="isCreate = true">创建集群</div>

        <div class="menu-item" @click="isCreate = false">加入已有集群</div>

        <div

          class="menu-item"

          :class="activePage == i ? 'menu-item-active' : ''"

          v-for="(item, i) in tabList"

          :key="i"

          @click="openRight(item, i)"

        >

          {{ item }}

        </div>

      </div>

      <div class="cluster-right" v-if="!showCurCluster">

        <div class="create-new" v-if="isCreate">

        <div class="create-new" v-if="activePage == 0">

          <el-form

            :model="ruleForm"

            :rules="rules"

@@ -131,10 +138,11 @@
          </el-form>

          <div class="save-btn" @click="saveCluster('ruleForm')">保存</div>

        </div>

        <div class="join-exist" v-if="!isCreate">



        <div class="join-exist" v-if="activePage == 1">

          <el-form

            :model="joinForm"

            :rules="joinRules"

            :rules="joinExistRules"

            ref="joinForm"

            class="join-form"

            label-width="150px"

@@ -196,12 +204,6 @@
  findCluster,

  updateClusterName,

  joinCluster,

  leave,

  getVrrp,

  setVrrp,

  createESNode,

  addESNode,

  getEsClusterInfo,

} from "@/api/clusterManage";

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

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

@@ -221,12 +223,18 @@
        }

      }, 1000);

    };

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

      if (!value) {

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

      }

    }

    return {

      innerNodes: [],

      intervalTimer: null,

      isFillingName: false,

      isFillingIp: false,

      inputName: "",

      activePage: 0,

      inputIp: "",

      serverIp: "",

      members: [],

@@ -255,19 +263,18 @@
      searchNum: "",

      scheduleId: "",

      isCreate: true,

      tabList: ["创建集群", "加入已有集群"],

      rules: {

        clustername: [

          { required: true, message: "请输入集群名称", trigger: "change" },

          { required: true, message: "请输入集群名称", trigger: "blur" },

        ],

        clusterpwd: [{ validator: checkPwd, trigger: "change" }],

        clusterpwd: [{ validator: checkPwd, trigger: "blur" }],

        virtualIp: [{ required: true, validator: isIPv4, trigger: "change" }],

      },

      joinRules: {

        clusterid: [

          { required: true, message: "请输入集群ID", trigger: "change" },

        ],

        clusterip: [{ required: true, validator: isIPv4, trigger: "change" }],

        clusterpwd: [{ validator: checkPwd, trigger: "change" }],

      joinExistRules: {

        clusterid: [{ validator: checkID, trigger: "blur" }],

        clusterip: [{ validator: isIPv4, trigger: "blur" }],

        clusterpwd: [{ validator: checkPwd, trigger: "blur" }],

      },

    };

  },

@@ -285,7 +292,6 @@
  beforeDestroy() {

    clearInterval(this.intervalTimer);

  },

  props: ["barName"],

  methods: {

    async createCluster(json) {

      let res = await createSerfCluster(json);

@@ -323,12 +329,12 @@
    async joinCluster(json) {

      let res = await joinCluster(json);

      if (res.success) {

        this.members = []

        this.members = [];

      }

      this.$notify({

        title: res.success ? "成功" : "失败",

        message: res.msg,

        type: res.success ? "success" : "error"

        type: res.success ? "success" : "error",

      });

    },

    join(formName) {

@@ -398,6 +404,9 @@
      window.setTimeout(() => {

        this.stopSearch();

      }, 10 * 1000);

    },

    openRight(item, i) {

      this.activePage = i;

    },

    async stopSearch() {

      if (!this.loading) {

@@ -480,7 +489,6 @@
      }

    },

    onIpBlur(ip) {

      console.log(ip);

      this.ruleForm.virtualIp = ip;

    },

    async updateCluster(v) {

@@ -569,7 +577,6 @@
      height: 30px;

      line-height: 30px;

      justify-content: inherit;

      //   padding: 0 20px;

      box-sizing: border-box;

    }

  }

@@ -583,6 +590,7 @@
    line-height: 40px;

    font-size: 14px;

    margin-top: 20px;

    cursor: pointer;

  }

}

.cluster-content {

@@ -599,25 +607,34 @@
    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;

    // background-color: lightpink;

    border-right: 5px solid #f8f8f8;

    .menu-item {

      background-color: #f8f8f8;

      height: 40px;

      height: 50px;

      margin-bottom: 10px;

      border-radius: 8px;

      line-height: 40px;

      font-size: 14px;

      line-height: 50px;

      font-size: 15px;

      text-align: left;

      box-sizing: border-box;

      padding: 0 20px;

    }

    .menu-item-active {

      background-color: #3d68e1;

      color: white;

    }

    .menu-item:hover {

      background-color: #3d68e1;

      color: white;

    }

  }

  .cluster-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)

@@ -646,7 +663,6 @@
    .ip-input-container {

      max-width: none !important;

    }

    // }

    .ntp-bar {

      height: 40px;

      background-color: rgba(248, 248, 248, 1);