From 4aa13af3c74cf57d70bad9c4bc53b2c26e04fb5d Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 26 一月 2022 13:46:53 +0800
Subject: [PATCH] 集群管理搜索集群

---
 src/pages/settings/views/clusterManagement.vue |   80 +++++++++++++++++++++++++++++----------
 1 files changed, 59 insertions(+), 21 deletions(-)

diff --git a/src/pages/settings/views/clusterManagement.vue b/src/pages/settings/views/clusterManagement.vue
index 34d0f46..5115d54 100644
--- a/src/pages/settings/views/clusterManagement.vue
+++ b/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;

--
Gitblit v1.8.0