<template>
|
<div class="QuitClusterBox">
|
<div class="title">退出集群</div>
|
<div class="name">{{ equipment.devName }}</div>
|
|
<el-form
|
:model="formData"
|
ref="userForm"
|
label-position="left"
|
label-width="76px"
|
>
|
<el-form-item prop="name" label="集群名称">
|
<el-input v-model="formData.name"></el-input>
|
</el-form-item>
|
|
<el-form-item prop="id" label="集群ID">
|
<el-input v-model="formData.id"></el-input>
|
</el-form-item>
|
|
<el-form-item prop="password" label="集群密码">
|
<el-input v-model="formData.password"></el-input>
|
</el-form-item>
|
|
<el-form-item prop="ip" label="集群IP">
|
<el-input v-model="formData.ip"></el-input>
|
</el-form-item>
|
</el-form>
|
|
<div class="btns">
|
<div class="cancel button" @click="close()">取消</div>
|
<div class="submit button" @click="leave()">退出集群</div>
|
</div>
|
|
<div class="close iconfont" @click="close()"></div>
|
</div>
|
</template>
|
|
<script>
|
import { findCluster, leave } from "@/api/clusterManage";
|
export default {
|
props: {
|
equipment: {},
|
},
|
created() {
|
this.getCluster();
|
},
|
data() {
|
return {
|
formData: {
|
name: "",
|
id: "",
|
password: "",
|
ip: "",
|
},
|
};
|
},
|
methods: {
|
close() {
|
this.$emit("close");
|
},
|
async getCluster() {
|
let res = await findCluster({
|
nodeId: this.equipment.devId,
|
});
|
if (res && res.success) {
|
if (res.data && res.data.clusterId) {
|
this.formData.name = res.data.clusterName;
|
this.formData.id = res.data.clusterId;
|
this.formData.password = "******";
|
this.formData.ip = res.data.virtualIp;
|
}
|
}
|
},
|
async leave() {
|
const res = await leave({
|
nodeId: this.equipment.devId,
|
});
|
if (res && res.success) {
|
this.$notify({
|
message: "操作成功",
|
type: "success",
|
});
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.QuitClusterBox {
|
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;
|
}
|
|
.name {
|
margin: 20px 0;
|
color: #666;
|
font-size: 16px;
|
font-weight: 700;
|
}
|
|
.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;
|
}
|
}
|
}
|
}
|
|
.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;
|
}
|
|
.submit {
|
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;
|
}
|
}
|
</style>
|
