From 8b31ebab2fd3bb4397f4966767a1ed7ddef3ff2c Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 27 九月 2021 17:42:06 +0800
Subject: [PATCH] 系统设置v1.1
---
src/pages/settings/views/clusterManagement.vue | 138 +++++++++++++++++++++++++++++----------------
1 files changed, 89 insertions(+), 49 deletions(-)
diff --git a/src/pages/settings/views/clusterManagement.vue b/src/pages/settings/views/clusterManagement.vue
index dbd06bf..25c41de 100644
--- a/src/pages/settings/views/clusterManagement.vue
+++ b/src/pages/settings/views/clusterManagement.vue
@@ -1,6 +1,6 @@
<template>
<div class="all">
- <div class="cluster-guanli" v-if="showCurCluster">
+ <div class="cluster-guanli" v-if="showCurCluster&& isHasColony">
<cloud-node :nodes="innerNodes"></cloud-node>
<div class="bar">
@@ -22,13 +22,13 @@
></span
>
<span
- class="icon iconfont"
+ class="icon iconfont" style="font-size:21px;"
@click="clearInput(1)"
v-show="isFillingName"
></span
>
- <span
- class="icon iconfont"
+ <span
+ class="icon iconfont" style="font-size:20px;"
@click="updateCluster(1)"
v-show="isFillingName"
></span
@@ -65,14 +65,14 @@
></span
>
<span
- class="icon iconfont"
+ class="icon iconfont" style="font-size:21px;"
@click="clearInput(2)"
v-show="isFillingIp"
></span
>
<span
class="icon iconfont"
- @click="updateCluster(2)"
+ @click="updateCluster(2)" style="font-size:20px;"
v-show="isFillingIp"
></span
>
@@ -83,12 +83,19 @@
</div>
<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="cluster-center" ref="left" v-if="!showCurCluster|| !isHasColony">
+ <div
+ class="menu-item"
+ :class="activePage == i ? 'menu-item-active' : ''"
+ v-for="(item, i) in tabList"
+ :key="i"
+ @click="openRight(i)"
+ >
+ {{ item }}
+ </div>
</div>
- <div class="cluster-right" v-if="!showCurCluster">
- <div class="create-new" v-if="isCreate">
+ <div class="cluster-right" v-if="!showCurCluster || !isHasColony">
+ <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"
@@ -190,18 +198,13 @@
import {
createSerfCluster,
randomPwd,
+ leave,
search,
getSearchNodes,
stopSearching,
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 +224,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 +264,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: "璇疯緭鍏ラ泦缇D", 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" }],
},
};
},
@@ -277,15 +285,13 @@
},
mounted() {
this.findCluster();
- let _this = this;
this.intervalTimer = setInterval(() => {
- _this.findCluster();
+ this.findCluster();
}, 30000);
},
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) {
@@ -399,6 +405,9 @@
this.stopSearch();
}, 10 * 1000);
},
+ openRight( i) {
+ this.activePage = i;
+ },
async stopSearch() {
if (!this.loading) {
return true;
@@ -407,7 +416,7 @@
searchNum: this.searchNum,
})
.then((res) => {
- this.loading = false;
+ this.loading = false;
this.searchDis = false;
window.clearInterval(this.scheduleId);
})
@@ -448,12 +457,29 @@
this.ruleForm.clusterpwd = uuid.join("");
},
exitCluster() {
- clearInterval(this.intervalTimer);
- this.showCurCluster = false;
- this.ruleForm.virtualIp = "";
- this.ruleForm.clustername = "";
- this.ruleForm.clusterpwd = "";
- this.clusterid = "";
+ this.$confirm("纭畾閫�鍑洪泦缇ゅ悧锛�","鎻愮ず").then(async () => {
+ let res = await leave();
+ this.$notify({
+ title: res.success ? "鎴愬姛" : "澶辫触",
+ message: res.msg,
+ type: res.success ? "success" : "error",
+ });
+ if (res && res.success) {
+ clearInterval(this.intervalTimer);
+ this.showCurCluster = false;
+ this.ruleForm.virtualIp = "";
+ this.ruleForm.clustername = "";
+ this.ruleForm.clusterpwd = "";
+ this.clusterid = "";
+ }
+ },(err) => {
+ clearInterval(this.intervalTimer);
+ this.showCurCluster = false;
+ this.ruleForm.virtualIp = "";
+ this.ruleForm.clustername = "";
+ this.ruleForm.clusterpwd = "";
+ this.clusterid = "";
+ })
},
clearInput(typ) {
if (typ == 1) {
@@ -480,7 +506,6 @@
}
},
onIpBlur(ip) {
- console.log(ip);
this.ruleForm.virtualIp = ip;
},
async updateCluster(v) {
@@ -563,14 +588,20 @@
padding: 0 20px;
justify-content: space-between;
align-items: center;
+ .title{
+ font-size: 14px;
+ }
.input-area {
display: flex;
width: 340px;
height: 30px;
line-height: 30px;
justify-content: inherit;
- // padding: 0 20px;
box-sizing: border-box;
+ .icon{
+ cursor: pointer;
+ // font-size: 18px;
+ }
}
}
.exit {
@@ -583,6 +614,7 @@
line-height: 40px;
font-size: 14px;
margin-top: 20px;
+ cursor: pointer;
}
}
.cluster-content {
@@ -599,25 +631,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;
+ background-color: #f8f8f8; cursor: pointer;
+ 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: var(--colorCard);
+ color: white;
+ }
+ .menu-item:hover {
+ background-color: var(--colorCard);
+ 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 +687,6 @@
.ip-input-container {
max-width: none !important;
}
- // }
.ntp-bar {
height: 40px;
background-color: rgba(248, 248, 248, 1);
--
Gitblit v1.8.0