From f20a554bdb24e9dfde9dc6a69d78595944f61d15 Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期二, 25 十月 2022 14:53:57 +0800
Subject: [PATCH] 设备管理 样式调整
---
src/views/equipmentManagement/equipmentList/components/JoinClusterBox.vue | 156 +++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 124 insertions(+), 32 deletions(-)
diff --git a/src/views/equipmentManagement/equipmentList/components/JoinClusterBox.vue b/src/views/equipmentManagement/equipmentList/components/JoinClusterBox.vue
index 2b53c89..008dd73 100644
--- a/src/views/equipmentManagement/equipmentList/components/JoinClusterBox.vue
+++ b/src/views/equipmentManagement/equipmentList/components/JoinClusterBox.vue
@@ -1,5 +1,5 @@
<template>
- <div class="QuitClusterBox" @click="showClusterList = false">
+ <div class="JoinClusterBox" @click="showClusterList = false">
<div class="title">鍔犲叆闆嗙兢</div>
<!-- 鍒囨崲tab -->
<div class="tabs" :class="{ right: activeTab == '鍔犲叆宸叉湁闆嗙兢' }">
@@ -23,12 +23,15 @@
v-if="activeTab == '鍒涘缓闆嗙兢'"
>
<el-form-item prop="name" label="闆嗙兢鍚嶇О">
- <el-input v-model="formData.name" placeholder="璇疯緭鍏�"></el-input>
+ <el-input
+ v-model="formData.clustername"
+ placeholder="璇疯緭鍏�"
+ ></el-input>
</el-form-item>
<el-form-item prop="id" label="闆嗙兢ID">
<el-input
- v-model="formData.id"
+ v-model="id"
:disabled="true"
placeholder="鍒涘缓闆嗙兢鍚庡洖鏄�"
></el-input>
@@ -39,12 +42,12 @@
v-model="formData.password"
placeholder="璇疯緭鍏�,鎴栫偣鍑荤敓鎴愬瘑鐮�"
></el-input>
- <div class="createPassword">鐢熸垚瀵嗙爜</div>
+ <div class="createPassword" @click="generatePassword">鐢熸垚瀵嗙爜</div>
</el-form-item>
<el-form-item prop="ip" label="闆嗙兢IP">
<ip-input
- :ip="formData.ip"
+ :ip="formData.virtualIp"
:on-blur="onCreateIpBlur"
class="ip-input-comp"
></ip-input>
@@ -61,12 +64,12 @@
autocomplete="off"
>
<el-form-item prop="id" label="闆嗙兢ID">
- <el-input v-model="formData2.name" placeholder="璇疯緭鍏�"></el-input>
+ <el-input v-model="formData2.clusterId" placeholder="璇疯緭鍏�"></el-input>
</el-form-item>
<el-form-item prop="ip" label="IP鍦板潃">
<ip-input
- :ip="formData2.ip"
+ :ip="formData2.nodeIps"
:on-blur="onJoinIpBlur"
class="ip-input-comp"
></ip-input>
@@ -75,7 +78,7 @@
<el-form-item prop="password" label="闆嗙兢瀵嗙爜" class="password">
<el-input
v-model="formData2.password"
- placeholder="璇疯緭鍏�,鎴栫偣鍑荤敓鎴愬瘑鐮�"
+ placeholder="璇疯緭鍏�"
class="passwordInput"
:class="{ hiddenPassword: hiddenPassword }"
>
@@ -94,21 +97,14 @@
<div class="search" @click="searchCluster">鎼滅储闆嗙兢</div>
</el-form-item>
- <el-form-item prop="ip" label="闆嗙兢IP">
- <ip-input
- :ip="formData2.clusterIp"
- :on-blur="onClusterIpBlur"
- class="ip-input-comp"
- ></ip-input>
- </el-form-item>
-
<div class="clusterList" v-if="showClusterList">
<div
class="clusterItem"
v-for="(item, index) in clusterList"
:key="index"
+ @click="join2(item)"
>
- {{ item }}
+ {{ item.clusterId }}
</div>
</div>
</el-form>
@@ -116,7 +112,7 @@
<!-- 鍙栨秷涓庢彁浜� -->
<div class="btns">
<div class="cancel button" @click="close()">鍙栨秷</div>
- <div class="quit button" @click="close()">閫�鍑洪泦缇�</div>
+ <div class="quit button" @click="submit">鍔犲叆闆嗙兢</div>
</div>
<div class="close iconfont" @click="close()"></div>
@@ -124,30 +120,43 @@
</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: "鍒涘缓闆嗙兢", //閫変腑鐨則ab
formData: {
- name: "189闆嗙兢",
- id: "5ee1dfa8-e3fb-4d62-8692-388d7632859b",
- password: "123456",
- ip: "192.168.20.117",
+ clustername: "",
+ password: "",
+ virtualIp: "",
}, //鍒涘缓闆嗙兢琛ㄥ崟鏁版嵁
formData2: {
- id: "",
- ip: "",
+ clusterId: "",
password: "",
- clusterIp: "",
+ virtualIp: "",
+ nodeIps: "",
}, //鍔犲叆闆嗙兢琛ㄥ崟鏁版嵁
hiddenPassword: false, //闅愯棌瀵嗙爜
- clusterList: ["192.168.20.4", "192.168.20.5", "192.168.20.6"], //闆嗙兢鍒楄〃
+ clusterList: [], //闆嗙兢鍒楄〃
showClusterList: false, //鏄惁灞曠ず闆嗙兢鍒楄〃
};
},
@@ -157,27 +166,108 @@
},
//鍒涘缓闆嗙兢ip鍥炶皟
onCreateIpBlur(ip) {
- this.formData.ip = ip;
+ this.formData.virtualIp = ip;
},
//鍔犲叆闆嗙兢ip鍦板潃
onJoinIpBlur(ip) {
- this.formData2.ip = ip;
+ this.formData2.nodeIps = ip;
},
//鍔犲叆闆嗙兢闆嗙兢ip
onClusterIpBlur(ip) {
- this.formData2.clusterIp = ip;
+ this.formData2.virtualIp = ip;
},
+
//鎼滅储闆嗙兢鍒楄〃
- searchCluster(e) {
+ 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>
-.QuitClusterBox {
+.JoinClusterBox {
position: relative;
box-sizing: border-box;
padding: 20px;
@@ -272,6 +362,7 @@
.createPassword {
font-size: 14px;
color: #0065ff;
+ cursor: pointer;
}
.search {
@@ -307,6 +398,7 @@
box-shadow: 0px 4px 12px rgba(0, 43, 106, 0.12);
.clusterItem {
+ font-size: 12px;
padding-left: 10px;
height: 40px;
line-height: 40px;
@@ -321,7 +413,7 @@
.btns {
margin-top: 20px;
display: flex;
- justify-content: end;
+ justify-content: flex-end;
text-align: center;
line-height: 32px;
font-size: 14px;
--
Gitblit v1.8.0