<template>
|
<div class="JoinClusterBox" @click="showClusterList = false">
|
<div class="title">加入集群</div>
|
<!-- 切换tab -->
|
<div class="tabs" :class="{ right: activeTab == '加入已有集群' }">
|
<div
|
class="tab"
|
v-for="item in tabArr"
|
:key="item"
|
:class="{ active: activeTab == item }"
|
@click="activeTab = item"
|
>
|
{{ item }}
|
</div>
|
</div>
|
|
<!-- 创建集群表格 -->
|
<el-form
|
:model="formData"
|
ref="userForm"
|
label-position="left"
|
label-width="76px"
|
v-if="activeTab == '创建集群'"
|
>
|
<el-form-item prop="name" label="集群名称">
|
<el-input
|
v-model="formData.clustername"
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item prop="id" label="集群ID">
|
<el-input
|
v-model="id"
|
:disabled="true"
|
placeholder="创建集群后回显"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item prop="password" label="集群密码" class="password">
|
<el-input
|
v-model="formData.password"
|
placeholder="请输入,或点击生成密码"
|
></el-input>
|
<div class="createPassword" @click="generatePassword">生成密码</div>
|
</el-form-item>
|
|
<el-form-item prop="ip" label="集群IP">
|
<ip-input
|
:ip="formData.virtualIp"
|
:on-blur="onCreateIpBlur"
|
class="ip-input-comp"
|
></ip-input>
|
</el-form-item>
|
</el-form>
|
|
<!-- 加入已有集群表格 -->
|
<el-form
|
:model="formData2"
|
ref="userForm"
|
label-position="left"
|
label-width="76px"
|
v-if="activeTab == '加入已有集群'"
|
autocomplete="off"
|
>
|
<el-form-item prop="id" label="集群ID">
|
<el-input v-model="formData2.clusterId" placeholder="请输入"></el-input>
|
</el-form-item>
|
|
<el-form-item prop="ip" label="IP地址">
|
<ip-input
|
:ip="formData2.nodeIps"
|
:on-blur="onJoinIpBlur"
|
class="ip-input-comp"
|
></ip-input>
|
</el-form-item>
|
|
<el-form-item prop="password" label="集群密码" class="password">
|
<el-input
|
v-model="formData2.password"
|
placeholder="请输入"
|
class="passwordInput"
|
:class="{ hiddenPassword: hiddenPassword }"
|
>
|
<div class="control" slot="suffix">
|
<i
|
v-if="hiddenPassword == false"
|
@click="hiddenPassword = true"
|
class="iconfont"
|
></i
|
>
|
<i v-else @click="hiddenPassword = false" class="iconfont"
|
></i
|
>
|
</div>
|
</el-input>
|
<div class="search" @click="searchCluster">搜索集群</div>
|
</el-form-item>
|
|
<div class="clusterList" v-if="showClusterList">
|
<div
|
class="clusterItem"
|
v-for="(item, index) in clusterList"
|
:key="index"
|
@click="join2(item)"
|
>
|
{{ item.clusterId }}
|
</div>
|
</div>
|
</el-form>
|
|
<!-- 取消与提交 -->
|
<div class="btns">
|
<div class="cancel button" @click="close()">取消</div>
|
<div class="quit button" @click="submit">加入集群</div>
|
</div>
|
|
<div class="close iconfont" @click="close()"></div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
createSerfCluster,
|
getSearchNodes,
|
findCluster,
|
joinCluster,
|
} from "@/api/clusterManage";
|
import ipInput from "@/components/IPInput";
|
|
export default {
|
components: {
|
ipInput,
|
},
|
props: {
|
equipment: {},
|
},
|
created() {
|
this.formData.nodeId = this.equipment.devId;
|
this.formData2.nodeId = this.equipment.devId;
|
},
|
data() {
|
return {
|
id: "",
|
tabArr: ["创建集群", "加入已有集群"], //tab栏
|
activeTab: "创建集群", //选中的tab
|
formData: {
|
clustername: "",
|
password: "",
|
virtualIp: "",
|
}, //创建集群表单数据
|
formData2: {
|
clusterId: "",
|
password: "",
|
virtualIp: "",
|
nodeIps: "",
|
}, //加入集群表单数据
|
hiddenPassword: false, //隐藏密码
|
clusterList: [], //集群列表
|
showClusterList: false, //是否展示集群列表
|
};
|
},
|
methods: {
|
close() {
|
this.$emit("close");
|
},
|
//创建集群ip回调
|
onCreateIpBlur(ip) {
|
this.formData.virtualIp = ip;
|
},
|
//加入集群ip地址
|
onJoinIpBlur(ip) {
|
this.formData2.nodeIps = ip;
|
},
|
//加入集群集群ip
|
onClusterIpBlur(ip) {
|
this.formData2.virtualIp = ip;
|
},
|
|
//搜索集群列表
|
async searchCluster(e) {
|
this.clusterList = [];
|
e.stopPropagation();
|
this.showClusterList = true;
|
let res = await getSearchNodes({
|
nodeId: this.equipment.devId,
|
});
|
if (res && res.success) {
|
res.data.forEach((item) => {
|
const obj = {
|
clusterId: item.clusterID,
|
nodeIps: [item.nodeAddress],
|
password: this.formData2.password,
|
nodeId: this.equipment.devId,
|
};
|
this.clusterList.push(obj);
|
});
|
}
|
},
|
//创建集群
|
async submitForm() {
|
const res = await createSerfCluster(this.formData);
|
this.findCluster();
|
if (res && res.success) {
|
this.$notify({
|
message: "操作成功",
|
type: "success",
|
});
|
}
|
this.close();
|
},
|
// 生成密码
|
generatePassword() {
|
var chars =
|
"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
|
var uuid = [];
|
|
for (let i = 0; i < 6; i++) {
|
uuid[i] = chars[0 | (Math.random() * 50)];
|
}
|
this.formData.password = uuid.join("");
|
},
|
async findCluster() {
|
let res = await findCluster({
|
nodeId: this.equipment.devId,
|
});
|
if (res && res.success) {
|
if (res.data && res.data.clusterId) {
|
this.id = res.data.clusterId;
|
}
|
}
|
},
|
async join() {
|
let res = await joinCluster({
|
clusterId: this.formData2.clusterId,
|
password: this.formData2.password,
|
nodeIps: [this.formData2.nodeIps],
|
nodeId: this.equipment.devId,
|
});
|
if (res && res.success) {
|
this.$notify({
|
message: "操作成功",
|
type: "success",
|
});
|
}
|
this.close();
|
},
|
async join2(item) {
|
let res = await joinCluster(item);
|
if (res && res.success) {
|
this.$notify({
|
message: "操作成功",
|
type: "success",
|
});
|
}
|
this.close();
|
},
|
submit() {
|
if (this.activeTab == "创建集群") {
|
this.submitForm();
|
} else {
|
this.join();
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.JoinClusterBox {
|
position: relative;
|
box-sizing: border-box;
|
padding: 20px;
|
position: fixed;
|
width: 440px;
|
height: 434px;
|
top: 50%;
|
left: 50%;
|
margin-top: -217px;
|
margin-left: -230px;
|
filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
|
z-index: 3;
|
background-color: #fff;
|
|
.title {
|
padding-bottom: 20px;
|
font-size: 18px;
|
font-weight: 700;
|
border-bottom: 1px solid #e9ebee;
|
}
|
|
.tabs {
|
position: relative;
|
display: flex;
|
justify-content: center;
|
margin: 20px 0;
|
color: #999999;
|
font-size: 16px;
|
|
.tab {
|
cursor: pointer;
|
&:first-child {
|
margin-right: 20px;
|
}
|
|
&.active {
|
color: #0065ff;
|
}
|
}
|
|
&::after {
|
display: block;
|
position: absolute;
|
left: 118px;
|
bottom: -8px;
|
content: "";
|
width: 48px;
|
height: 2px;
|
background-color: #0065ff;
|
transition: all 0.15s linear;
|
}
|
|
&.right::after {
|
left: 217px;
|
}
|
}
|
|
.el-form-item ::v-deep {
|
margin-bottom: 20px;
|
|
label {
|
color: #666;
|
}
|
|
.el-input {
|
.el-input__inner {
|
padding: 0 10px;
|
color: #3d3d3d;
|
border-radius: 0;
|
border-color: #c0c5cc;
|
&::-webkit-input-placeholder {
|
color: #999999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
}
|
|
.el-form-item.password ::v-deep {
|
.el-form-item__content {
|
display: flex;
|
justify-content: space-between;
|
|
.el-input {
|
margin-left: -4px;
|
width: 250px;
|
}
|
|
.createPassword {
|
font-size: 14px;
|
color: #0065ff;
|
cursor: pointer;
|
}
|
|
.search {
|
margin-top: 8px;
|
width: 64px;
|
height: 24px;
|
font-size: 12px;
|
line-height: 24px;
|
text-align: center;
|
background-color: #0065ff;
|
color: #fff;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.ip-input-container ::v-deep {
|
border-color: #c0c5cc;
|
height: 40px;
|
|
.ip-segment,
|
input {
|
height: 40px;
|
}
|
}
|
|
.clusterList {
|
position: absolute;
|
width: 324px;
|
top: 288px;
|
left: 96px;
|
background: #ffffff;
|
box-shadow: 0px 4px 12px rgba(0, 43, 106, 0.12);
|
|
.clusterItem {
|
font-size: 12px;
|
padding-left: 10px;
|
height: 40px;
|
line-height: 40px;
|
color: #0065ff;
|
|
&:hover {
|
background: #f0f5fa;
|
}
|
}
|
}
|
|
.btns {
|
margin-top: 20px;
|
display: flex;
|
justify-content: flex-end;
|
text-align: center;
|
line-height: 32px;
|
font-size: 14px;
|
|
.cancel {
|
margin-right: 10px;
|
width: 60px;
|
height: 32px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
}
|
|
.quit {
|
width: 88px;
|
height: 32px;
|
color: #fff;
|
background-color: #0065ff;
|
border: 1px solid #0065ff;
|
}
|
}
|
|
.close {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
font-size: 12px;
|
color: #666;
|
cursor: pointer;
|
}
|
|
.passwordInput {
|
.iconfont {
|
font-size: 24px;
|
-webkit-text-security: none;
|
cursor: pointer;
|
}
|
|
&.hiddenPassword {
|
-webkit-text-security: disc;
|
}
|
}
|
}
|
</style>
|
