From 81c9b1f75b80fade52653243b914ccb2677b4a8f Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 22 三月 2022 18:34:17 +0800
Subject: [PATCH] 禅道bug修复

---
 src/pages/settings/views/clusterManagement.vue |  164 ++++++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 133 insertions(+), 31 deletions(-)

diff --git a/src/pages/settings/views/clusterManagement.vue b/src/pages/settings/views/clusterManagement.vue
index 970ca94..4648e4f 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,21 @@
               </el-input>
             </el-form-item>
           </el-form>
-           <div class="btns">
-        <div class="ok" @click="join('joinForm')">鍔犲叆闆嗙兢</div>
-      </div>
+          <div class="clu-list">
+            <!-- :class="pickedNodeI == index ? 'clu-item-active' : ''" -->
+            <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,27 +239,27 @@
   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";
 
 export default {
   data() {
     const checkPwd = (rule, value, callback) => {
-      if (!value) {
+      if (value == "") {
         return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"));
       }
-      setTimeout(() => {
-        if (value.length != 6) {
-          callback(new Error("瀵嗙爜搴斾负6浣�!"));
-        } else {
-          callback();
-        }
-      }, 1000);
+      // setTimeout(() => {
+      if (value.length != 6) {
+        callback(new Error("瀵嗙爜搴斾负6浣�!"));
+      } else {
+        callback();
+      }
+      // }, 1000);
     };
     const checkID = (rule, value, callback) => {
       if (!value) {
-        return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"));
+        return callback(new Error("ID涓嶈兘涓虹┖"));
       }
     };
     return {
@@ -256,6 +271,7 @@
       activePage: 0,
       inputIp: "",
       serverIp: "",
+      pickedNodeI: null,
       members: [],
       virtualIp: "192.168.1.188",
       searchDis: false,
@@ -287,20 +303,20 @@
         clustername: [
           { required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "blur" },
         ],
-        clusterpwd: [{ validator: checkPwd, trigger: "blur" }],
+        clusterpwd: [{ validator: checkPwd, required: true, trigger: "blur" }],
         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, trigger: "blur" }],
       },
     };
   },
   components: {
     // cloudNode,
     NetNode,
-    ipInput
+    ipInput,
   },
   mounted() {
     this.findCluster();
@@ -312,6 +328,57 @@
     clearInterval(this.intervalTimer);
   },
   methods: {
+    pickNode(index) {
+      this.pickedNodeI = index;
+      const node = this.members[index];
+      const h = this.$createElement;
+      // Address: "192.168.20.189:30190"
+      // cluster_id: "5ee1dfa8-e3fb-4d62-8692-388d7632859b"
+      // create_time: ""
+      // id: "DSVAD010120190703"
+      // nodeName: "192.168.20.189:30190"
+      // node_id: "DSVAD010120190703"
+      // role: "pc"
+      this.$msgbox({
+        title: "",
+        message: h(
+          "div",
+          {
+            style:
+              "display: flex;  flex-direction: column; justify-content: center; align-items: center;",
+          },
+          [
+            h("span", { class: "icon iconfont warn-icon" }, "\ue71c"),
+            h("span", { class: "warn-title" }, "鍔犲叆闆嗙兢"),
+            h(
+              "span",
+              { class: "warn-dec" },
+              `鎮ㄦ槸鍚﹁鍔犲叆 ${node.Address} 鍚楋紵`
+            ),
+          ]
+        ),
+        showCancelButton: true,
+        showClose: true,
+        confirmButtonText: "纭畾",
+        cancelButtonText: "鍙栨秷",
+        customClass: "del-account-message-box",
+      }).then(() => {
+        this.joinLoading = true;
+        let data = {
+          clusterId: node.cluster_id,
+          password: this.joinForm.clusterpwd,
+          nodeIps: [node.Address],
+        };
+        this.joinCluster(data)
+          .then(() => {
+            this.joinLoading = false;
+            this.findCluster();
+          })
+          .catch((e) => {
+            this.joinLoading = false;
+          });
+      });
+    },
     async createCluster(json) {
       let res = await createSerfCluster(json);
       this.$notify({
@@ -357,21 +424,16 @@
       });
     },
     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 data = {
             clusterId: _this.joinForm.clusterid,
             password: _this.joinForm.clusterpwd,
             nodeIps: [_this.joinForm.clusterip],
           };
+          debugger;
           _this
             .joinCluster(data)
             .then(() => {
@@ -500,8 +562,19 @@
         cancelButtonText: "鍙栨秷",
         customClass: "del-account-message-box",
       }).then(
+        // () => {
+        //   this.showCurCluster = false;
+        // }
         async () => {
-          let res = await leave();
+          try {
+            res = await leave();
+          } catch (err) {
+            console.log(err);
+            this.$notify.error({
+              title: "澶辫触",
+              message: err.msg,
+            });
+          }
           this.$notify({
             title: res.success ? "鎴愬姛" : "澶辫触",
             message: res.msg,
@@ -625,7 +698,7 @@
 }
 .cluster-guanli {
   margin: 0 auto;
-  /* width: 760px; */
+  width: 760px;
   padding: 0 10px;
   .btns {
     margin-top: 30px !important;
@@ -644,6 +717,7 @@
       margin-top: 0;
     }
   }
+
   .cloud {
     width: 100%;
     display: flex;
@@ -739,8 +813,10 @@
     box-sizing: border-box;
     flex-shrink: 0;
     padding: 10px;
+    padding-top: 6px;
     border-right: 4px solid #f2f2f7;
     border-left: 4px solid #f2f2f7;
+    border-top: 4px solid #f2f2f7;
     .menu-item {
       background-color: #f8f8f8;
       cursor: pointer;
@@ -769,7 +845,9 @@
     overflow: auto;
     box-sizing: border-box;
     position: relative;
+    border-top: 4px solid #f2f2f7;
     padding: 20px 40px;
+    padding-top: 16px;
     .el-form-item.is-required:not(.is-no-asterisk)
       > .el-form-item__label:before,
     .el-form-item.is-required:not(.is-no-asterisk)
@@ -777,7 +855,31 @@
       > .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;
+      }
+      .clu-item-active {
+        background: var(--colorCard);
+        color: #fff;
+      }
+    }
     .el-form-item__content {
       line-height: 48px;
       display: flex;
@@ -809,7 +911,7 @@
       left: 20px;
     }
     .el-form-item {
-    margin-bottom: 10px;
+      margin-bottom: 16px;
       .el-input__inner {
         background-color: #ffffff;
         border: 2px solid transparent;

--
Gitblit v1.8.0