From d8c730b184f9d982744e35cb720f20b9e44890f6 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期三, 12 十月 2022 17:14:54 +0800 Subject: [PATCH] 完善区域修改后的提示信息.关联场景的区域不可以删除 --- src/pages/settings/views/clusterManagement.vue | 516 ++++++++++++++++++++++++--------------------------------- 1 files changed, 218 insertions(+), 298 deletions(-) diff --git a/src/pages/settings/views/clusterManagement.vue b/src/pages/settings/views/clusterManagement.vue index a903df7..bec9238 100644 --- a/src/pages/settings/views/clusterManagement.vue +++ b/src/pages/settings/views/clusterManagement.vue @@ -19,17 +19,8 @@ v-model="selfForm.clustername" placeholder="璇疯緭鍏ュ唴瀹�" ></el-input> - <span - class="icon iconfont" - @click="startInput(1)" - v-show="!isFillingName" - ></span - > - <span - class="icon iconfont" - style="font-size: 18px" - @click="clearInput(1)" - v-show="isFillingName" + <span class="icon iconfont" @click="startInput(1)" v-show="!isFillingName"></span> + <span class="icon iconfont" style="font-size: 18px" @click="clearInput(1)" v-show="isFillingName" ></span > <span @@ -58,23 +49,9 @@ <div class="input-area"> <div class="text" v-show="!isFillingIp">{{ ruleForm.virtualIp }}</div> - <ip-input - v-if="isFillingIp" - :ip="selfForm.virtualIp" - :on-blur="onIpBlur" - class="ip-input-comp" - ></ip-input> - <span - class="icon iconfont" - v-show="!isFillingIp" - @click="startInput(2)" - ></span - > - <span - class="icon iconfont" - style="font-size: 18px" - @click="clearInput(2)" - v-show="isFillingIp" + <ip-input v-if="isFillingIp" :ip="selfForm.virtualIp" :on-blur="onIpBlur" class="ip-input-comp"></ip-input> + <span class="icon iconfont" v-show="!isFillingIp" @click="startInput(2)"></span> + <span class="icon iconfont" style="font-size: 18px" @click="clearInput(2)" v-show="isFillingIp" ></span > <span @@ -93,11 +70,7 @@ </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' : ''" @@ -115,40 +88,21 @@ <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item prop="clustername"> <div class="p-title">闆嗙兢鍚嶇О</div> - <el-input - v-model="ruleForm.clustername" - placeholder="鎵嬪姩杈撳叆, 濡傗�滈泦缇鈥�" - size="small" - ></el-input> + <el-input v-model="ruleForm.clustername" placeholder="鎵嬪姩杈撳叆, 濡傗�滈泦缇鈥�" size="small"></el-input> </el-form-item> <el-form-item> <div class="p-title">闆嗙兢ID</div> - <el-input - v-model="clusterid" - placeholder="涓嶅厑璁歌緭鍏�,淇濆瓨鍚庡洖鏄�" - disabled - size="small" - ></el-input> + <el-input v-model="clusterid" placeholder="涓嶅厑璁歌緭鍏�,淇濆瓨鍚庡洖鏄�" disabled size="small"></el-input> </el-form-item> <el-form-item prop="clusterpwd"> <div class="p-title">闆嗙兢瀵嗙爜</div> - <el-input - v-model="ruleForm.clusterpwd" - placeholder="璇疯緭鍏�6浣嶅瘑鐮�,鎴栫偣鍑荤敓鎴�" - size="small" - > - <el-button type="text" slot="suffix" @click="getPSW" - >鐢熸垚瀵嗙爜</el-button - > + <el-input v-model="ruleForm.clusterpwd" placeholder="璇疯緭鍏�6浣嶅瘑鐮�,鎴栫偣鍑荤敓鎴�" size="small"> + <el-button type="text" slot="suffix" @click="getPSW">鐢熸垚瀵嗙爜</el-button> </el-input> </el-form-item> <el-form-item prop="virtualIp"> <div class="p-title">闆嗙兢IP</div> - <ip-input - :ip="ruleForm.virtualIp" - :on-blur="onIpBlur" - class="ip-input-comp" - ></ip-input> + <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur" class="ip-input-comp"></ip-input> </el-form-item> </el-form> <div class="btns"> @@ -157,13 +111,7 @@ </div> <div class="join-exist" v-if="activePage == 1"> - <el-form - :model="joinForm" - :rules="joinExistRules" - ref="joinForm" - class="join-form" - v-loading="joinLoading" - > + <el-form :model="joinForm" :rules="joinExistRules" ref="joinForm" class="join-form" v-loading="joinLoading"> <el-form-item prop="clusterid"> <div class="p-title">闆嗙兢ID</div> <el-input v-model="joinForm.clusterid" size="small"></el-input> @@ -187,19 +135,8 @@ autocomplete="new-password" size="small" > - <el-button - type="text" - slot="suffix" - @click="searchColony" - v-show="!searchDis" - >鎼滅储闆嗙兢</el-button - > - <el-button - type="text" - slot="suffix" - v-show="searchDis" - @click="stopSearch" - > + <el-button type="text" slot="suffix" @click="searchColony" v-show="!searchDis">鎼滅储闆嗙兢</el-button> + <el-button type="text" slot="suffix" v-show="searchDis" @click="stopSearch"> <i class="el-icon-loading"></i>鍋滄鎼滅储 </el-button> </el-input> @@ -207,12 +144,7 @@ </el-form> <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)" - > + <div class="clu-item" v-for="(item, index) in members" :key="index" @click="pickNode(index)"> <i class="iconfont"></i> {{ item.Address }} </div> @@ -236,32 +168,32 @@ stopSearching, findCluster, updateClusterName, - joinCluster, -} from "@/api/clusterManage"; + joinCluster +} from "@/api/clusterManage" // import cloudNode from "../components/CloudNode"; -import NetNode from "../components/NetNode"; -import ipInput from "../components/IPInput"; -import { isIPv4 } from "@/scripts/validate"; +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 == "") { - return callback(new Error("瀵嗙爜涓嶈兘涓虹┖")); + return callback(new Error("瀵嗙爜涓嶈兘涓虹┖")) } // setTimeout(() => { if (value.length != 6) { - callback(new Error("瀵嗙爜搴斾负6浣�!")); + callback(new Error("瀵嗙爜搴斾负6浣�!")) } else { - callback(); + callback() } // }, 1000); - }; + } const checkID = (rule, value, callback) => { if (!value) { - return callback(new Error("ID涓嶈兘涓虹┖")); + return callback(new Error("ID涓嶈兘涓虹┖")) } - }; + } return { innerNodes: [], intervalTimer: null, @@ -278,16 +210,16 @@ ruleForm: { clustername: "", clusterpwd: "", - virtualIp: "", + virtualIp: "" }, selfForm: { virtualIp: "", - clustername: "", + clustername: "" }, joinForm: { clusterid: "", clusterip: "", - clusterpwd: "", + clusterpwd: "" }, isSearch: false, showCurCluster: true, @@ -300,38 +232,36 @@ isCreate: true, tabList: ["鍒涘缓闆嗙兢", "鍔犲叆宸叉湁闆嗙兢"], rules: { - clustername: [ - { required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "blur" }, - ], + clustername: [{ required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "blur" }], clusterpwd: [{ validator: checkPwd, required: true, trigger: "blur" }], - virtualIp: [{ required: true, validator: isIPv4, trigger: "change" }], + virtualIp: [{ required: true, validator: isIPv4, trigger: "change" }] }, joinExistRules: { clusterid: [{ validator: checkID, trigger: "blur" }], clusterip: [{ validator: isIPv4, trigger: "blur" }], - clusterpwd: [{ validator: checkPwd, required: true, trigger: "blur" }], - }, - }; + clusterpwd: [{ validator: checkPwd, required: true, trigger: "blur" }] + } + } }, components: { // cloudNode, NetNode, - ipInput, + ipInput }, mounted() { - this.findCluster(); + this.findCluster() this.intervalTimer = setInterval(() => { - this.findCluster(); - }, 30000); + this.findCluster() + }, 30000) }, beforeDestroy() { - clearInterval(this.intervalTimer); + clearInterval(this.intervalTimer) }, methods: { pickNode(index) { - this.pickedNodeI = index; - const node = this.members[index]; - const h = this.$createElement; + 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: "" @@ -344,173 +274,172 @@ message: h( "div", { - style: - "display: flex; flex-direction: column; justify-content: center; align-items: center;", + 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} 鍚楋紵` - ), + h("span", { class: "warn-dec" }, `鎮ㄦ槸鍚﹁鍔犲叆 ${node.Address} 鍚楋紵`) ] ), showCancelButton: true, showClose: true, confirmButtonText: "纭畾", cancelButtonText: "鍙栨秷", - customClass: "del-account-message-box", + customClass: "del-account-message-box" }).then(() => { - this.joinLoading = true; + this.joinLoading = true let data = { clusterId: node.cluster_id, password: this.joinForm.clusterpwd, - nodeIps: [node.Address], - }; + nodeIps: [node.Address] + } this.joinCluster(data) .then(() => { - this.joinLoading = false; - this.findCluster(); + this.joinLoading = false + this.findCluster() }) .catch((e) => { - this.joinLoading = false; - }); - }); + this.joinLoading = false + }) + }) }, async createCluster(json) { - let res = await createSerfCluster(json); + let res = await createSerfCluster(json) this.$notify({ title: res.success ? "鎴愬姛" : "澶辫触", message: res.msg, - type: res.success ? "success" : "error", - }); + type: res.success ? "success" : "error" + }) }, //鎼滅储闆嗙兢 async getSearchNodes() { - let res = await getSearchNodes(); + let res = await getSearchNodes() if (res && res.success) { let list = res.data.map((i) => { - let obj = {}; - obj.cluster_id = i.clusterID ? i.clusterID : ""; - obj.create_time = i.create_time ? i.create_time : ""; - obj.id = i.nodeID ? i.nodeID : ""; - obj.node_id = i.nodeID ? i.nodeID : ""; - obj.Address = i.nodeAddress ? i.nodeAddress : ""; - obj.nodeName = i.nodeAddress ? i.nodeAddress : ""; - obj.role = i.role ? i.role : "pc"; - return obj; - }); + let obj = {} + obj.cluster_id = i.clusterID ? i.clusterID : "" + obj.create_time = i.create_time ? i.create_time : "" + obj.id = i.nodeID ? i.nodeID : "" + obj.node_id = i.nodeID ? i.nodeID : "" + obj.Address = i.nodeAddress ? i.nodeAddress : "" + obj.nodeName = i.nodeAddress ? i.nodeAddress : "" + obj.role = i.role ? i.role : "pc" + return obj + }) list.map((i) => { let found = this.members.find((element) => { - return element.node_id === i.node_id; - }); + return element.node_id === i.node_id + }) if (found === undefined) { - this.members.push(i); + this.members.push(i) } - }); + }) } }, async joinCluster(json) { - let res = await 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) { - let _this = this; + console.log("join", formName) + let _this = this + _this.joinLoading = true + let data = { + clusterId: _this.joinForm.clusterid, + password: _this.joinForm.clusterpwd, + nodeIps: [_this.joinForm.clusterip] + } + console.log("body:", data) + _this + .joinCluster(data) + .then(() => { + _this.joinLoading = false + _this.findCluster() + }) + .catch((e) => { + _this.joinLoading = false + }) + this.$refs[formName].validate((valid) => { + console.log("join") if (valid) { - _this.joinLoading = true; - let data = { - clusterId: _this.joinForm.clusterid, - password: _this.joinForm.clusterpwd, - nodeIps: [_this.joinForm.clusterip], - }; - debugger; - _this - .joinCluster(data) - .then(() => { - _this.joinLoading = false; - _this.findCluster(); - }) - .catch((e) => { - _this.joinLoading = false; - }); } else { - return false; + onsole.log("鍙傛暟閿欒") + return false } - }); + }) }, setSchedule() { this.scheduleId = window.setInterval(() => { - this.getSearchNodes(); - }, 1000); + this.getSearchNodes() + }, 1000) }, async searchColony() { - this.isSearch = true; - this.$refs["joinForm"].clearValidate(); - this.$refs["joinForm"].validateField("clusterpwd"); + this.isSearch = true + this.$refs["joinForm"].clearValidate() + this.$refs["joinForm"].validateField("clusterpwd") if (this.joinForm.clusterpwd.trim().length === 6) { - this.members = []; + this.members = [] const data = { - password: this.joinForm.clusterpwd, - }; + password: this.joinForm.clusterpwd + } this.search(data) .then(() => { - this.setSchedule(); + this.setSchedule() }) .catch(() => { - this.searchDis = false; - this.loading = false; - this.isSearch = false; - }); + this.searchDis = false + this.loading = false + this.isSearch = false + }) } else { - this.searchDis = false; - this.loading = false; - this.isSearch = false; - return false; + this.searchDis = false + this.loading = false + this.isSearch = false + return false } }, async search(data) { - let res = await search(data); + let res = await search(data) if (res && res.success) { - this.searchNum = res.data; + this.searchNum = res.data } - this.searchDis = true; - this.loading = true; + this.searchDis = true + this.loading = true window.setTimeout(() => { - this.stopSearch(); - }, 10 * 1000); + this.stopSearch() + }, 10 * 1000) }, openRight(i) { - this.activePage = i; + this.activePage = i }, async stopSearch() { if (!this.loading) { - return true; + return true } stopSearching({ - searchNum: this.searchNum, + searchNum: this.searchNum }) .then((res) => { - this.loading = false; - this.searchDis = false; - window.clearInterval(this.scheduleId); + this.loading = false + this.searchDis = false + window.clearInterval(this.scheduleId) }) .catch((err) => { this.$notify({ type: "error", duration: 1000, - message: "鍋滄鎼滅储鎶ラ敊锛�", - }); - }); + message: "鍋滄鎼滅储鎶ラ敊锛�" + }) + }) }, saveCluster(formName) { this.$refs[formName].validate((valid) => { @@ -519,181 +448,179 @@ clusterId: this.clusterid, clusterName: this.ruleForm.clustername, password: this.ruleForm.clusterpwd, - virtualIp: this.ruleForm.virtualIp, - }; + virtualIp: this.ruleForm.virtualIp + } this.createCluster(data).then(() => { - this.findCluster(); - }); + this.findCluster() + }) } else { - return false; + return false } - }); + }) }, getPSW() { - var chars = - "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; - var uuid = []; + var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz" + var uuid = [] for (let i = 0; i < 6; i++) { - uuid[i] = chars[0 | (Math.random() * 50)]; + uuid[i] = chars[0 | (Math.random() * 50)] } - this.ruleForm.clusterpwd = uuid.join(""); + this.ruleForm.clusterpwd = uuid.join("") }, exitCluster() { - const h = this.$createElement; - let res = {}; + const h = this.$createElement + let res = {} this.$msgbox({ title: "", message: h( "div", { - style: - "display: flex; flex-direction: column; justify-content: center; align-items: center;", + 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" }, "纭畾閫�鍑洪泦缇ゅ悧锛�"), + h("span", { class: "warn-dec" }, "纭畾閫�鍑洪泦缇ゅ悧锛�") ] ), showCancelButton: true, showClose: true, confirmButtonText: "纭畾", cancelButtonText: "鍙栨秷", - customClass: "del-account-message-box", + customClass: "del-account-message-box" }).then( // () => { // this.showCurCluster = false; // } async () => { try { - res = await leave(); + res = await leave() if (res && res.success) { - clearInterval(this.intervalTimer); - this.showCurCluster = false; - this.ruleForm.virtualIp = ""; - this.ruleForm.clustername = ""; - this.ruleForm.clusterpwd = ""; - this.clusterid = ""; + clearInterval(this.intervalTimer) + this.showCurCluster = false + this.ruleForm.virtualIp = "" + this.ruleForm.clustername = "" + this.ruleForm.clusterpwd = "" + this.clusterid = "" } this.$notify({ title: res.success ? "鎴愬姛" : "澶辫触", message: res.msg, - type: res.success ? "success" : "error", - }); - this.findCluster(); + type: res.success ? "success" : "error" + }) + this.findCluster() } catch (err) { - console.log(err); + console.log(err) this.$notify.error({ title: "澶辫触", - message: err.msg, - }); + message: err.msg + }) } }, (err) => { - clearInterval(this.intervalTimer); - this.showCurCluster = false; - this.ruleForm.virtualIp = ""; - this.ruleForm.clustername = ""; - this.ruleForm.clusterpwd = ""; - this.clusterid = ""; + clearInterval(this.intervalTimer) + this.showCurCluster = false + this.ruleForm.virtualIp = "" + this.ruleForm.clustername = "" + this.ruleForm.clusterpwd = "" + this.clusterid = "" } - ); + ) }, clearInput(typ) { if (typ == 1) { - this.selfForm.clustername = ""; - this.isFillingName = false; + this.selfForm.clustername = "" + this.isFillingName = false } else { - this.selfForm.virtualIp = ""; - this.isFillingIp = false; + this.selfForm.virtualIp = "" + this.isFillingIp = false } }, async randomPwd() { - let res = await randomPwd(); + let res = await randomPwd() if (res && res.success) { - this.ruleForm.clusterpwd = res.data; + this.ruleForm.clusterpwd = res.data } }, startInput(typ) { if (typ == 1) { - this.selfForm.clustername = this.ruleForm.clustername; - this.isFillingName = true; + this.selfForm.clustername = this.ruleForm.clustername + this.isFillingName = true } else { - this.selfForm.virtualIp = this.ruleForm.virtualIp; - this.isFillingIp = true; + this.selfForm.virtualIp = this.ruleForm.virtualIp + this.isFillingIp = true } }, onIpBlur(ip) { - this.ruleForm.virtualIp = ip; + this.ruleForm.virtualIp = ip }, async updateCluster(v) { if (v == 1 || v == undefined) { - this.ruleForm.clustername = this.selfForm.clustername; + this.ruleForm.clustername = this.selfForm.clustername } if (this.ruleForm.clustername === "") { this.$message({ type: "error", - message: "闆嗙兢鍚嶇О涓嶈兘涓虹┖", - }); - return; + message: "闆嗙兢鍚嶇О涓嶈兘涓虹┖" + }) + return } const data = { clusterName: this.ruleForm.clustername, - virtualIp: this.ruleForm.virtualIp, - }; - let res = await updateClusterName(data); + virtualIp: this.ruleForm.virtualIp + } + let res = await updateClusterName(data) if (res.success) { - this.findCluster(); + this.findCluster() } this.$notify({ title: res.success ? "鎴愬姛" : "澶辫触", message: res.msg, - type: res.success ? "success" : "error", - }); - this.isFillingIp = false; - this.isFillingName = false; + type: res.success ? "success" : "error" + }) + this.isFillingIp = false + this.isFillingName = false }, async findCluster() { - let res = await findCluster(); + let res = await findCluster() if (res && res.success) { if (res.data && res.data.clusterId) { - this.isHasColony = true; - this.clusterid = res.data.clusterId; - this.ruleForm.clustername = res.data.clusterName; - this.ruleForm.clusterpwd = "******"; - this.ruleForm.virtualIp = res.data.virtualIp; - this.isSearch = false; + this.isHasColony = true + this.clusterid = res.data.clusterId + this.ruleForm.clustername = res.data.clusterName + this.ruleForm.clusterpwd = "******" + this.ruleForm.virtualIp = res.data.virtualIp + this.isSearch = false this.innerNodes = res.data.nodes.map((i) => { - let obj = {}; - obj.device_type = i.device_type; - obj.workType = i.device_type.substr(2, 2); - obj.hardwareType = i.device_type.substr(4, 2); - obj.cluster_id = i.cluster_id; - obj.clusterName = res.data.clusterName; - obj.create_time = i.create_time; - obj.id = i.id; - obj.node_id = i.node_id; - obj.node_ip = i.node_ip; - obj.nodeName = i.node_name; - obj.Address = i.node_ip; - obj.role = i.drift_state ? i.drift_state : "pc"; - return obj; - }); + let obj = {} + obj.device_type = i.device_type + obj.workType = i.device_type.substr(2, 2) + obj.hardwareType = i.device_type.substr(4, 2) + obj.cluster_id = i.cluster_id + obj.clusterName = res.data.clusterName + obj.create_time = i.create_time + obj.id = i.id + obj.node_id = i.node_id + obj.node_ip = i.node_ip + obj.nodeName = i.node_name + obj.Address = i.node_ip + obj.role = i.drift_state ? i.drift_state : "pc" + return obj + }) } else { - this.isHasColony = false; + this.isHasColony = false } } }, clearInnerNodes() { - this.innerNodes = []; - }, - }, -}; + this.innerNodes = [] + } + } +} </script> <style lang="scss"> .all { @@ -727,11 +654,7 @@ display: flex; height: 255px; border-radius: 8px; - background: linear-gradient( - 180deg, - #ffffff 0%, - rgba(255, 255, 255, 0) 100% - ); + background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%); .inner { background: url(/images/settings/easy-cloud.png) no-repeat; background-size: contain; @@ -852,11 +775,8 @@ 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) - .el-form-item__label-wrap - > .el-form-item__label:before { + .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before, + .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before { display: none; } .clu-list { -- Gitblit v1.8.0