集群管理搜索集群

heyujie

2022-01-26 4aa13af3c74cf57d70bad9c4bc53b2c26e04fb5d

 src/pages/settings/views/clusterManagement.vue

@@ -93,7 +93,11 @@
    </div>

    <!-- !showCurCluster || !isHasColony -->

    <div class="cluster-content" v-if="!showCurCluster || !isHasColony">

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

      <div

        class="cluster-center"

        ref="left"

        v-if="!showCurCluster || !isHasColony"

      >

        <div

          class="menu-item"

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

@@ -158,15 +162,14 @@
            :rules="joinExistRules"

            ref="joinForm"

            class="join-form"

         
            v-loading="joinLoading"

          >

            <el-form-item  prop="clusterid">

            <el-form-item prop="clusterid">

              <div class="p-title">集群ID</div>

              <el-input v-model="joinForm.clusterid" size="small"></el-input>

            </el-form-item>



            <el-form-item  prop="clusterip">

            <el-form-item prop="clusterip">

              <div class="p-title">IP地址</div>

              <el-input

                v-model="joinForm.clusterip"

@@ -175,7 +178,7 @@
                autocomplete="new-password"

              ></el-input>

            </el-form-item>

            <el-form-item  prop="clusterpwd">

            <el-form-item prop="clusterpwd">

              <div class="p-title">集群密码</div>

              <el-input

                v-model="joinForm.clusterpwd"

@@ -202,9 +205,20 @@
              </el-input>

            </el-form-item>

          </el-form>

           <div class="btns">

        <div class="ok" @click="join('joinForm')">加入集群</div>

      </div>

          <div class="clu-list">

            <div

              class="clu-item"

              v-for="(item, index) in members"

              :key="index"

              @click="pickNode(index)"

            >

              <i class="iconfont">&#xe727;</i>

              {{ item.Address }}

            </div>

          </div>

          <div class="btns">

            <div class="ok" @click="join('joinForm')">加入集群</div>

          </div>

        </div>

      </div>

    </div>

@@ -224,7 +238,7 @@
  joinCluster,

} from "@/api/clusterManage";

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

import NetNode from '../components/NetNode'

import NetNode from "../components/NetNode";

import ipInput from "../components/IPInput";

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



@@ -256,6 +270,7 @@
      activePage: 0,

      inputIp: "",

      serverIp: "",

      pickedNodeI: null,

      members: [],

      virtualIp: "192.168.1.188",

      searchDis: false,

@@ -287,20 +302,20 @@
        clustername: [

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

        ],

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

        clusterpwd: [{ validator: checkPwd, required: true }],

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

      },

      joinExistRules: {

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

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

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

        clusterpwd: [{ validator: checkPwd, required: true }],

      },

    };

  },

  components: {

    // cloudNode,

    NetNode,

    ipInput

    ipInput,

  },

  mounted() {

    this.findCluster();

@@ -312,6 +327,9 @@
    clearInterval(this.intervalTimer);

  },

  methods: {

    pickNode(index) {

      // this.pickedNodeI=index

    },

    async createCluster(json) {

      let res = await createSerfCluster(json);

      this.$notify({

@@ -357,21 +375,20 @@
      });

    },

    join(formName) {

      debugger

      let _this = this;

      this.$refs[formName].validate((valid) => {

      debugger

        if (valid) {

      debugger

          _this.joinLoading = true;

          let nodeIps = _this.members.map((i) => {

            return i.Address;

          });

          // let nodeIps = _this.members.map((i) => {

          //   return i.Address;

          // });

          debugger;

          let data = {

            clusterId: _this.joinForm.clusterid,

            password: _this.joinForm.clusterpwd,

            nodeIps: [_this.joinForm.clusterip],

          };

          debugger;

          _this

            .joinCluster(data)

            .then(() => {

@@ -625,7 +642,7 @@
}

.cluster-guanli {

  margin: 0 auto;

width: 760px; 
  width: 760px;

  padding: 0 10px;

  .btns {

    margin-top: 30px !important;

@@ -644,6 +661,7 @@
      margin-top: 0;

    }

  }



  .cloud {

    width: 100%;

    display: flex;

@@ -781,7 +799,27 @@
      > .el-form-item__label:before {

      display: none;

    }



    .clu-list {

      background: #f2f2f7;

      border-radius: 8px;

      margin-top: 20px;

      .clu-item {

        border-radius: 8px;

        height: 40px;

        // cursor: pointer;

        line-height: 40px;

        text-align: left;

        padding: 0 20px;

        font-size: 14px;

        .iconfont {

          margin-right: 8px;

        }

      }

      // .clu-item:hover {

      //   background: var(--colorCard);

      //   color: #fff;

      // }

    }

    .el-form-item__content {

      line-height: 48px;

      display: flex;

@@ -813,7 +851,7 @@
      left: 20px;

    }

    .el-form-item {

    margin-bottom: 10px;

      margin-bottom: 10px;

      .el-input__inner {

        background-color: #ffffff;

        border: 2px solid transparent;