分配节点组件

4 files changed, 386 insertions, 243 deletions

diff --git a/nezha-admin/src/main/resources/statics/css/nodeRel.css b/nezha-admin/src/main/resources/statics/css/nodeRel.css
new file mode 100644
index 00000000..b2bc64d9
--- /dev/null
+++ b/nezha-admin/src/main/resources/statics/css/nodeRel.css
@@ -0,0 +1,67 @@
+.nodeRel {

+	display: none;

+	position: relative;

+}

+.box {

+	padding: 10px 10px 10px 16px;

+	width: 49.6%;

+	display: inline-block;

+}

+.title {

+	line-height: 30px;

+    text-align: center;

+    font-size: 16px;

+    margin-bottom: 8px;

+    width: 340px;

+}

+.tools .form-group {

+	margin-right: 0;

+}

+.form-control {

+	height: 28px;

+}

+.node-box {

+	font-size: 13px;

+	border: 1px solid #cccccc;

+	width: 340px;

+	border-radius: 4px;

+	position: relative;

+	padding: 5px;

+}

+.conn-symbol {

+	display: inline-block;

+	width: 12px;

+	text-align: center;

+}

+.box .btn-groups {

+	margin-left: 20px;

+	float: left;

+}

+.box .btn {

+	padding: 5px 9px 4px 9px;

+	font-size: 12px;

+}

+.box_toleft {

+	display: block;

+	position: absolute;

+	top: calc(50% + 30px);

+	left: 364px;

+	cursor: pointer;

+}

+.box_toright {

+	display: block;

+	position: absolute;

+	top: 50%;

+	left: 364px;

+	cursor: pointer;

+}

+.box_counter {

+	font-size: 12px;

+	padding-top: 5px;

+}

+.box_counter>span {

+	color: #d9534f;

+}

+.new-node {

+	background-color: #f0fff0;

+}
\ No newline at end of file
diff --git a/nezha-admin/src/main/resources/templates/js/modules/common/nodeRel.js b/nezha-admin/src/main/resources/templates/js/modules/common/nodeRel.js
new file mode 100644
index 00000000..e41763a6
--- /dev/null
+++ b/nezha-admin/src/main/resources/templates/js/modules/common/nodeRel.js
@@ -0,0 +1,296 @@
+<script>

+//分配节点组件

+var nodeRelComponent = Vue.extend({

+	template: "#nodeRelTemplate",

+	props: {

+		initSelectedNodes: { //已分配节点

+            type: Array,

+            required: true

+        },

+		initSelectableNodes: { //可分配节点

+            type: Array,

+            required: true

+        },

+        initSelectedTotalCount: Number, //初始的已分配数量

+        initSelectableTotalCount: Number //初始的可分配数量

+	},

+	data: function () {

+		return {

+			height: top.$(".content").height()-220, //动态生成box的高度

+			selectedIP: '',

+			selectedIPStart: '',

+			selectedIPEnd: '',

+			selectableIP: '',

+			selectableIPStart: '',

+			selectableIPEnd: '',

+			selectedCount: 0, //已分配列表中勾选的数量

+			selectableCount: 0, //可分配列表中勾选的数量

+			selectedTotalCount: null, //已分配总数

+			selectableTotalCount: null, //可分配总数

+			selectedNodes: [],

+			selectableNodes: [],

+			tempSelectedNodes: [],

+			tempSelectableNodes: [],

+			selectedNodesAdd: [], //新增的已分配节点，uuid数组，例如:[10,11,12]

+			selectableNodesAdd: [], //新增的可分配节点（从已分配节点里删除的）

+			selectedRange: false, //已分配搜索栏是搜索范围还是指定ip

+			selectableRange: false, //可分配搜索栏是搜索范围还是指定ip

+			colModel: [

+	            {name: "IP", field: "ip", width: 120},

+	            {name: "类型", field: "type", width: 70,formatter:function(rowData){

+	            	return rowData["type"]=='1'?"服务器":"网元";

+	            }},

+	            {name: "状态", field: "state", width: 60,formatter:function(rowData){

+	            	return rowData["state"]=='1'?"在线":"<span style='color:#aaa;'>下线</span>";

+	            }}

+	        ],

+		}

+	},

+	methods: {

+		check: function(event, tr) { //节点列表的点击事件

+			if (!tr) {

+				var tr = event.currentTarget; //绑定了点击事件的tr

+			}

+			//列表中的checkbox是否打钩控制

+			if ($(tr).find(".r-checkbox").hasClass("checkbox_false_full")) {

+				$(tr).find(".r-checkbox").removeClass("checkbox_false_full").addClass("checkbox_true_full");

+				$(tr).addClass("success");

+			} else if ($(tr).find(".r-checkbox").hasClass("checkbox_true_full")) {

+				$(tr).find(".r-checkbox").removeClass("checkbox_true_full").addClass("checkbox_false_full");

+				$(tr).removeClass("success");

+			}

+			//已选数量控制

+			this.countControll();

+			//tr背景色、全选框控制

+			if ($(tr).parent().find(".success").length == 0) {

+				$(tr).parent().prev().find(".r-checkbox").removeClass("checkbox_false_part").removeClass("checkbox_true_part").addClass("checkbox_false_full");

+			} else if ($(tr).parent().find(".success").length < $(tr).parent().find("tr").length) {

+				$(tr).parent().prev().find(".r-checkbox").removeClass("checkbox_false_full").removeClass("checkbox_true_part").addClass("checkbox_false_part");

+			} else if ($(tr).parent().find(".success").length == $(tr).parent().find("tr").length) {

+				$(tr).parent().prev().find(".r-checkbox").removeClass("checkbox_false_full").removeClass("checkbox_false_part").addClass("checkbox_true_part");

+			}

+		},

+		checkAll: function(event) {

+			//全选框控制

+			if (!$(event.currentTarget).hasClass("checkbox_true_part")) {

+				$(event.currentTarget).removeClass("checkbox_false_full").removeClass("checkbox_false_part").addClass("checkbox_true_part");

+				$(event.currentTarget).parent().parent().parent().next().find("tr").removeClass("success").addClass("success");

+				$(event.currentTarget).parent().parent().parent().next().find(".r-checkbox").removeClass("checkbox_false_full").removeClass("checkbox_true_full").addClass("checkbox_true_full");

+			} else {

+				$(event.currentTarget).removeClass("checkbox_true_part").addClass("checkbox_false_full");

+				$(event.currentTarget).parent().parent().parent().next().find("tr").removeClass("success");

+				$(event.currentTarget).parent().parent().parent().next().find(".r-checkbox").removeClass("checkbox_true_full").addClass("checkbox_false_full");

+			}

+			//已选数量控制

+			this.countControll();

+		},

+		countControll: function() { //更新已选数量和总数

+			this.selectedCount = $("#selected-box").find(".success").length;

+			this.selectableCount = $("#selectable-box").find(".success").length;

+			this.selectedTotalCount = this.selectedNodes.length;

+			this.selectableTotalCount = this.selectableNodes.length;

+		},

+		nodeRelChange: function(flag, event) { //节点分配状态更改

+			if (flag == 0) { //取消分配

+				var willChangeNodeDom = $("#selected-box").find(".success"); //所有将要改变的节点

+				var addToSelectableNodes = [];

+				for (var i = 0; i < willChangeNodeDom.length; i++) {

+					var uuid = $(willChangeNodeDom[i]).attr("uuid");

+					for (var j = this.selectedNodes.length-1; j >= 0; j--) {

+						if (this.selectedNodes[j].uuid == uuid) {

+							var addToSelectableNode = this.selectedNodes[j];

+							if (addToSelectableNode.newNode) {

+								for (var k = this.selectedNodesAdd.length-1; k >= 0; k--) {

+									if (this.selectedNodesAdd[k] == addToSelectableNode.uuid) {

+										this.selectedNodesAdd.splice(k, 1);

+									}

+								}

+								addToSelectableNode.newNode = false;

+							} else {

+								this.selectableNodesAdd.push(addToSelectableNode.uuid);

+								addToSelectableNode.newNode = true;

+							}

+							addToSelectableNodes.push(addToSelectableNode);

+							this.selectedNodes.splice(j, 1);

+							for (var k = this.tempSelectedNodes.length-1; k >= 0; k--) {

+								if (this.tempSelectedNodes[k].uuid == uuid) {

+									this.tempSelectedNodes.splice(k, 1);

+									break;

+								}

+							}

+						}

+					}

+				}

+				this.selectableNodes = addToSelectableNodes.concat(this.selectableNodes);

+				this.tempSelectableNodes = addToSelectableNodes.concat(this.tempSelectableNodes);

+			} else if (flag == 1) { //分配

+				var willChangeNodeDom = $("#selectable-box").find(".success"); //所有将要改变的节点

+				var addToSelectedNodes = [];

+				for (var i = 0; i < willChangeNodeDom.length; i++) {

+					var uuid = $(willChangeNodeDom[i]).attr("uuid");

+					for (var j = this.selectableNodes.length-1; j >= 0; j--) {

+						if (this.selectableNodes[j].uuid == uuid) {

+							var addToSelectedNode = this.selectableNodes[j];

+							if (addToSelectedNode.newNode) {

+								for (var k = this.selectableNodesAdd.length-1; k >= 0; k--) {

+									if (this.selectableNodesAdd[k] == addToSelectedNode.uuid) {

+										this.selectableNodesAdd.splice(k, 1);

+									}

+								}

+								addToSelectedNode.newNode = false;

+							} else {

+								this.selectedNodesAdd.push(addToSelectedNode.uuid);

+								addToSelectedNode.newNode = true;

+							}

+							addToSelectedNodes.push(addToSelectedNode);

+							this.selectableNodes.splice(j, 1);

+							for (var k = this.tempSelectableNodes.length-1; k >= 0; k--) {

+								if (this.tempSelectableNodes[k].uuid == uuid) {

+									this.tempSelectableNodes.splice(k, 1);

+									break;

+								}

+							}

+						}

+					}

+				}

+				this.selectedNodes = addToSelectedNodes.concat(this.selectedNodes);

+				this.tempSelectedNodes = addToSelectedNodes.concat(this.tempSelectedNodes);

+			}

+			$(".checkbox_true_part").removeClass("checkbox_true_part").addClass("checkbox_false_full");

+			$(".checkbox_false_part").removeClass("checkbox_false_part").addClass("checkbox_false_full");

+			$(".checkbox_true_full").removeClass("checkbox_true_full").addClass("checkbox_false_full");

+			$(".success").removeClass("success");

+			

+			//已选数量和总数量控制

+			this.countControll();

+			//更新序号

+			this.refreshRowIndex();

+			//将数据传递给父组件

+			this.$emit("node-change", [this.selectedNodesAdd, this.selectableNodesAdd, this.tempSelectedNodes.length]);

+		},

+		refreshRowIndex: function() { //更新序号

+			var selectedTrs = $("#selected-box").find("tbody").find("tr");

+			var selectableTrs = $("#selectable-box").find("tbody").find("tr");

+			var objects = [selectedTrs, selectableTrs];

+			for (var i = 0; i < objects.length; i++) {

+				for (var j = 0; j < objects[i].length; j++) {

+					$(objects[i][j]).children(":first").text(j+1);

+				}

+			}

+		},

+		inputTouch: function(position, event) { //搜索框点击事件

+			if (position == 0) { //范围搜索

+				$(event.currentTarget).parent().find("input").css("color", "#555");

+				$(event.currentTarget).parent().next().find("input").css("color", "lightgray");

+				if ($(event.currentTarget).parent().parent().parent().find("#selected-box").length > 0) {

+					this.selectedRange = true;

+				} else if ($(event.currentTarget).parent().parent().parent().find("#selectable-box").length > 0) {

+					this.selectableRange = true;

+				}

+			} else if (position == 1) { //精确搜索

+				$(event.currentTarget).css("color", "#555");

+				$(event.currentTarget).parent().prev().find("input").css("color", "lightgray");

+				if ($(event.currentTarget).parent().parent().parent().find("#selected-box").length > 0) {

+					this.selectedRange = false;

+				} else if ($(event.currentTarget).parent().parent().parent().find("#selectable-box").length > 0) {

+					this.selectableRange = false;

+				}

+			}

+		},

+		searchIp: function(event) { //ip搜索

+			//TODO 校验

+			

+			var matchNodes = [];

+			if ($(event.currentTarget).parent().parent().find("#selected-box").length > 0) { //已分配

+				//搜索

+				var input = $(event.currentTarget).parent().find("[active=true]");

+				if (input.length > 1) { //范围搜索

+					var ipStart = $(input[0]).val();

+					var ipEnd = $(input[1]).val();

+					var ipStartLong = ipToNumber(ipStart);

+					var ipEndLong = ipToNumber(ipEnd);

+					this.selectedNodes = [];

+					for (var i = 0; i < this.tempSelectedNodes.length; i++) {

+						if (ipStartLong <= this.tempSelectedNodes[i].ipLong && ipEndLong >= this.tempSelectedNodes[i].ipLong) {

+							this.selectedNodes.push(this.tempSelectedNodes[i]);

+						}

+					}

+				} else if (input.length == 1) { //精确搜索

+					if (!this.selectedIP) {

+						this.selectedNodes = this.tempSelectedNodes;

+					} else {

+						this.selectedNodes = [];

+						for (var i = 0; i < this.tempSelectedNodes.length; i++) {

+							if (this.tempSelectedNodes[i].ip.indexOf(this.selectedIP) > -1) {

+								this.selectedNodes.push(this.tempSelectedNodes[i]);

+							}

+						}

+					}

+				}

+			}

+			//已选数量和总数量控制

+			this.countControll();

+			//更新序号

+			this.refreshRowIndex();

+		},

+		reset: function(event) {

+			if ($(event.currentTarget).parent().parent().parent().find("#selected-box").length > 0) { //已分配

+				this.selectedIP = '';

+				this.selectedIPStart = '';

+				this.selectedIPEnd = '';

+			} else {

+				this.selectableIP = '';

+				this.selectableIPStart = '';

+				this.selectableIPEnd = '';

+			}

+		}

+	},

+	mounted: function() {

+		//box内滚动条

+		var ps1 = new PerfectScrollbar('#selected-box');

+		var ps2 = new PerfectScrollbar('#selectable-box');

+	},

+	watch: {

+		initSelectedNodes: function(n, o) {

+			this.tempSelectedNodes = n;

+			this.selectedNodes = n;

+		},

+		initSelectableNodes: function(n, o) {

+			this.tempSelectableNodes = n;

+			this.selectableNodes = n;

+		}

+	}

+})

+Vue.component('node-rel-component', nodeRelComponent);

+function ipToNumber(ip) { 

+	var num = 0; 

+	if(ip == "") { 

+		return num; 

+	}   

+	var aNum = ip.split(".");  

+	if(aNum.length != 4) { 

+		return num; 

+	}   

+	num += parseInt(aNum[0]) << 24; 

+	num += parseInt(aNum[1]) << 16; 

+	num += parseInt(aNum[2]) << 8; 

+	num += parseInt(aNum[3]) << 0; 

+	num = num >>> 0;

+	return num;  

+}   

+	   

+function numberToIp(number) {   

+	var ip = ""; 

+	if(number <= 0) { 

+		return ip; 

+	} 

+	var ip3 = (number << 0 ) >>> 24; 

+	var ip2 = (number << 8 ) >>> 24; 

+	var ip1 = (number << 16) >>> 24; 

+	var ip0 = (number << 24) >>> 24 

+		    

+	ip += ip3 + "." + ip2 + "." + ip1 + "." + ip0; 

+		    

+	return ip;   

+}

+</script>
\ No newline at end of file
diff --git a/nezha-admin/src/main/resources/templates/js/modules/sys/system.js b/nezha-admin/src/main/resources/templates/js/modules/sys/system.js
index 19fa753a..5c585862 100644
--- a/nezha-admin/src/main/resources/templates/js/modules/sys/system.js
+++ b/nezha-admin/src/main/resources/templates/js/modules/sys/system.js
@@ -68,167 +68,6 @@ $(function () {
     });
 });
 
-//分配节点组件
-var nodeRelComponent = Vue.extend({
-	template: "#nodeRelTemplate",
-	props: {
-		selectedNodes: { //已分配节点
-            type: Array,
-            required: true
-        },
-		selectableNodes: { //可分配节点
-            type: Array,
-            required: true
-        },
-        initSelectedTotalCount: Number,
-        initSelectableTotalCount: Number
-	},
-	data: function () {
-		return {
-			height: top.$(".content").height()-220,
-			selectedIP: '',
-			selectedIPStart: '',
-			selectedIPEnd: '',
-			selectableIP: '',
-			selectableIPStart: '',
-			selectableIPEnd: '',
-			selectedCount: 0,
-			selectableCount: 0,
-			selectedTotalCount: null,
-			selectableTotalCount: null,
-			selectedNodesAdd: [], //新增的已分配节点
-			selectableNodesAdd: [], //新增的可分配节点（从已分配节点里删除的）
-			colModel: [
-	            {name: "IP", field: "ip", width: 120},
-	            {name: "类型", field: "type", width: 70,formatter:function(rowData){
-	            	return rowData["type"]=='1'?"服务器":"网元";
-	            }},
-	            {name: "状态", field: "state", width: 60,formatter:function(rowData){
-	            	return rowData["state"]=='1'?"在线":"<span style='color:#aaa;'>下线</span>";
-	            }}
-	        ],
-		}
-	},
-	methods: {
-		check: function(event, tr) { //节点列表的点击事件
-			if (!tr) {
-				var tr = event.currentTarget; //绑定了点击事件的tr
-			}
-			//列表中的checkbox是否打钩控制
-			if ($(tr).find(".r-checkbox").hasClass("checkbox_false_full")) {
-				$(tr).find(".r-checkbox").removeClass("checkbox_false_full").addClass("checkbox_true_full");
-				$(tr).addClass("success");
-			} else if ($(tr).find(".r-checkbox").hasClass("checkbox_true_full")) {
-				$(tr).find(".r-checkbox").removeClass("checkbox_true_full").addClass("checkbox_false_full");
-				$(tr).removeClass("success");
-			}
-			//已选数量控制
-			this.countControll();
-			//tr背景色、全选框控制
-			if ($(tr).parent().find(".success").length == 0) {
-				$(tr).parent().prev().find(".r-checkbox").removeClass("checkbox_false_part").removeClass("checkbox_true_part").addClass("checkbox_false_full");
-			} else if ($(tr).parent().find(".success").length < $(tr).parent().find("tr").length) {
-				$(tr).parent().prev().find(".r-checkbox").removeClass("checkbox_false_full").removeClass("checkbox_true_part").addClass("checkbox_false_part");
-			} else if ($(tr).parent().find(".success").length == $(tr).parent().find("tr").length) {
-				$(tr).parent().prev().find(".r-checkbox").removeClass("checkbox_false_full").removeClass("checkbox_false_part").addClass("checkbox_true_part");
-			}
-		},
-		checkAll: function(event) {
-			//全选框控制
-			if (!$(event.currentTarget).hasClass("checkbox_true_part")) {
-				$(event.currentTarget).removeClass("checkbox_false_full").removeClass("checkbox_false_part").addClass("checkbox_true_part");
-				$(event.currentTarget).parent().parent().parent().next().find("tr").removeClass("success").addClass("success");
-				$(event.currentTarget).parent().parent().parent().next().find(".r-checkbox").removeClass("checkbox_false_full").removeClass("checkbox_true_full").addClass("checkbox_true_full");
-			} else {
-				$(event.currentTarget).removeClass("checkbox_true_part").addClass("checkbox_false_full");
-				$(event.currentTarget).parent().parent().parent().next().find("tr").removeClass("success");
-				$(event.currentTarget).parent().parent().parent().next().find(".r-checkbox").removeClass("checkbox_true_full").addClass("checkbox_false_full");
-			}
-			//已选数量控制
-			this.countControll();
-		},
-		countControll: function() { //更新已选数量和总数的数字
-			this.selectedCount = $("#selected-box").find(".success").length;
-			this.selectableCount = $("#selectable-box").find(".success").length;
-			this.selectedTotalCount = $("#selected-box").find("tbody").find("tr").length;
-			this.selectableTotalCount = $("#selectable-box").find("tbody").find("tr").length;
-		},
-		nodeRelChange: function(flag, event) { //节点分配状态更改
-			if (flag == 0) { //取消分配
-				var fromSelector = "selected";
-				var toSelector = "selectable";
-			} else if (flag == 1) { //分配
-				var fromSelector = "selectable";
-				var toSelector = "selected";
-			}
-			$("#" + fromSelector + "-box").find("thead").find(".r-checkbox").removeClass("checkbox_false_part").removeClass("checkbox_true_part").addClass("checkbox_false_full");
-			var willChangeNode = $("#" + fromSelector + "-box").find(".success"); //所有将要改变的节点
-			this.copyNode($("#" + toSelector + "-box").find("tbody"), willChangeNode);//复制dom
-			$("#" + fromSelector + "-box").find(".success").remove(); //复制后删除自身
-			var changeNode = $("#" + toSelector + "-box").find(".success." + fromSelector); //改变后的节点所在tr
-			var tmp = [];
-			for (var i = 0; i < changeNode.length; i++) {
-				this.check(null, changeNode[i]);
-				$(changeNode[i]).removeClass(fromSelector).addClass(toSelector).removeClass("success");
-				if ($(changeNode[i]).hasClass("new-node")) {
-					$(changeNode[i]).removeClass("new-node");
-				} else {
-					tmp.push(changeNode[i]);
-					$(changeNode[i]).remove();
-				}
-			}
-			for (var i = tmp.length-1; i >= 0; i--) {
-				$(tmp[i]).addClass("new-node");
-				$("#" + toSelector + "-box").find("tbody").prepend(tmp[i]);
-			}
-			//同步数组数据
-			this.selectedNodesAdd = [];
-			this.selectableNodesAdd = [];
-			var vmTemp = this;
-			$("#selected-box").find(".new-node").each(function(index) {
-				vmTemp.selectedNodesAdd.push($(this).attr("uuid"));
-			});
-			$("#selectable-box").find(".new-node").each(function(index) {
-				vmTemp.selectableNodesAdd.push($(this).attr("uuid"));
-			});
-			//已选数量和总数量控制
-			this.countControll();
-			//更新序号
-			this.refreshRowIndex();
-			//将数据传递给父组件
-			this.$emit("node-change", [this.selectedNodesAdd, this.selectableNodesAdd]);
-		},
-		copyNode: function(container, nodes) { //复制节点dom
-			var trs = $(container).find("tr");
-			if (trs.length == 0) {
-				container.append(nodes);
-			} else {
-				for (var i = 0; i < trs.length; i++) {
-					if (!$(trs[i]).hasClass("new-node")) {
-						$(trs[i]).before(nodes);
-						break;
-					}
-				}
-			}
-		},
-		refreshRowIndex: function() { //更新序号
-			var selectedTrs = $("#selected-box").find("tbody").find("tr");
-			var selectableTrs = $("#selectable-box").find("tbody").find("tr");
-			var objects = [selectedTrs, selectableTrs];
-			for (var i = 0; i < objects.length; i++) {
-				for (var j = 0; j < objects[i].length; j++) {
-					$(objects[i][j]).children(":first").text(j+1);
-				}
-			}
-		}
-	},
-	mounted: function() {
-		//box内滚动条
-		var ps1 = new PerfectScrollbar('#selected-box');
-		var ps2 = new PerfectScrollbar('#selectable-box');
-	}
-})
-Vue.component('node-rel-component', nodeRelComponent)
 
 //引用vuelidate组件
 Vue.use(window.vuelidate.default);
@@ -315,7 +154,7 @@ var vm = new Vue({
             vm.title = "<@spring.message 'common.edit'/>";
             vm.getInfo(id);
 		},
-		getInfo: function(id){
+		getInfo: function(id) {
 			$.get(baseURL + "system/detail?id=" + id, function(r){
                 vm.system = r.data;
                 vm.system.usergroupIds = [];
@@ -325,7 +164,7 @@ var vm = new Vue({
             });
 			var vm_tmp = this;
 			$.ajax({
-	            url: baseURL + "/system/nodes?id=" + id,
+	            url: baseURL + "/system/nodes?limit=9999&id=" + id,
 	            type: "GET",
 	            async: false,
 	            success: function (r) {
@@ -415,7 +254,7 @@ var vm = new Vue({
 		nodeChange: function(data) {
 			this.system.addUuids = data[0];
 			this.system.removeUuids = data[1];
-			this.system.nodeNum = $("#selected-box").find("tbody").find("tr").length;
+			this.system.nodeNum = data[2];
 		},
 		reload: function (event) {
 			vm.single = vm.multi = true;
diff --git a/nezha-admin/src/main/resources/templates/modules/sys/system.html b/nezha-admin/src/main/resources/templates/modules/sys/system.html
index 9aeba89f..9373b6c1 100644
--- a/nezha-admin/src/main/resources/templates/modules/sys/system.html
+++ b/nezha-admin/src/main/resources/templates/modules/sys/system.html
@@ -5,73 +5,7 @@
 <title>业务系统管理</title>
 <#include "/header.html">
 <link rel="stylesheet" href="${request.contextPath}/statics/css/nzNodeSelector.css">
-<style>
-.nodeRel {
-	display: none;
-	position: relative;
-}
-.box {
-	padding: 10px 10px 10px 16px;
-	width: 49.6%;
-	display: inline-block;
-}
-.title {
-	line-height: 30px;
-    text-align: center;
-    font-size: 16px;
-    margin-bottom: 8px;
-    width: 340px;
-}
-.tools .form-group {
-	margin-right: 0;
-}
-.form-control {
-	height: 28px;
-}
-.node-box {
-	font-size: 13px;
-	border: 1px solid #cccccc;
-	width: 340px;
-	border-radius: 4px;
-	position: relative;
-	padding: 5px;
-}
-.conn-symbol {
-	display: inline-block;
-	width: 12px;
-	text-align: center;
-}
-.box .btn {
-	padding: 5px 9px 4px 9px;
-	float: left; 
-	margin-left: 20px;
-	font-size: 12px;
-}
-.box_toleft {
-	display: block;
-	position: absolute;
-	top: calc(50% + 30px);
-	left: 364px;
-	cursor: pointer;
-}
-.box_toright {
-	display: block;
-	position: absolute;
-	top: 50%;
-	left: 364px;
-	cursor: pointer;
-}
-.box_counter {
-	font-size: 12px;
-	padding-top: 5px;
-}
-.box_counter>span {
-	color: #d9534f;
-}
-.new-node {
-	background-color: #f0fff0;
-}
-</style>
+<link rel="stylesheet" href="${request.contextPath}/statics/css/nodeRel.css">
 </head>
 <body>
 <div id="rrapp" v-cloak>
@@ -135,8 +69,8 @@
 	<div class="nodeRel" style="display: none;">
 		<node-rel-component
 			v-on:node-change="nodeChange"
-			:selected-nodes="selectedNodes"
-			:selectable-nodes="selectableNodes"
+			:init-selected-nodes="selectedNodes"
+			:init-selectable-nodes="selectableNodes"
 			:init-selected-total-count="selectedNodes.length"
 			:init-selectable-total-count="selectableNodes.length"
 		></node-rel-component>
@@ -148,14 +82,17 @@
 			<div class="title">已分配</div>
 			<div class="tools">
 				<div class="form-group">
-					<input v-model="selectedIPStart" type="text" class="form-control input-medium" placeholder="IPStart">
+					<input :active="selectedRange + ''" @click="inputTouch(0, $event)" v-model="selectedIPStart" type="text" class="form-control input-medium" placeholder="IPStart">
 					<span class="conn-symbol">-</span>
-					<input v-model="selectedIPEnd" type="text" class="form-control input-medium" placeholder="IPEnd">
+					<input :active="selectedRange + ''" @click="inputTouch(0, $event)" v-model="selectedIPEnd" type="text" class="form-control input-medium" placeholder="IPEnd">
 				</div>
 				<div class="form-group">
-					<input v-model="selectedIP" type="text" class="form-control input-medium" placeholder="IP">
+					<input :active="!selectedRange + ''" @click="inputTouch(1, $event)" v-model="selectedIP" type="text" class="form-control input-medium" placeholder="IP">
+				</div>
+				<div class="btn-groups">
+					<a @click="searchIp" class="btn btn-default" title="<@spring.message 'common.search'/>"><i class="fa fa-search"></i></a>
+					<a @click="reset" class="btn btn-default" title="<@spring.message 'common.reset'/>"><i class="fa fa-refresh"></i></a>
 				</div>
-				<a class="btn btn-default btn-search" title="<@spring.message 'common.search'/>"><i class="fa fa-search"></i></a>
 			</div>
 			<div style="clear:both"></div>
 			<div id="selected-box" class="node-box" :style="'height:' + height + 'px'">
@@ -171,7 +108,7 @@
 					</thead>
 		            <tbody>
 						<template v-for="(selected,index) in selectedNodes">
-		            		<tr class="selected" @click="check" :uuid="selected.uuid" :id="'selected-' + selected.uuid">
+		            		<tr :class="{'new-node': selected.newNode}" class="selected" @click="check" :uuid="selected.uuid" :id="'selected-' + selected.uuid" :iplong="selected.ipLong">
 								<td>{{index+1}}</td>
 								<td><span class="r-checkbox checkbox_false_full"></span></td>
 								<td v-for="(item) in colModel" v-html="typeof item.formatter == 'undefined' || item.formatter == null ? selected[item.field] : item.formatter(selected)"></td>
@@ -186,14 +123,17 @@
 			<div class="title">可分配</div>
 			<div class="tools">
 				<div class="form-group">
-					<input v-model="selectableIPStart" type="text" class="form-control input-medium" placeholder="IPStart">
+					<input :active="selectableRange + ''" @click="inputTouch(0, $event)" v-model="selectableIPStart" type="text" class="form-control input-medium" placeholder="IPStart">
 					<span class="conn-symbol">-</span>
-					<input v-model="selectableIPEnd" type="text" class="form-control input-medium" placeholder="IPEnd">
+					<input :active="selectableRange + ''" @click="inputTouch(0, $event)" v-model="selectableIPEnd" type="text" class="form-control input-medium" placeholder="IPEnd">
 				</div>
 				<div class="form-group">
-					<input v-model="selectableIP" type="text" class="form-control input-medium" placeholder="IP">
+					<input :active="!selectableRange + ''" @click="inputTouch(1, $event)" v-model="selectableIP" type="text" class="form-control input-medium" placeholder="IP">
+				</div>
+				<div class="btn-groups">
+					<a @click="searchIp" class="btn btn-default" title="<@spring.message 'common.search'/>"><i class="fa fa-search"></i></a>
+					<a @click="reset" class="btn btn-default" title="<@spring.message 'common.reset'/>"><i class="fa fa-refresh"></i></a>
 				</div>
-				<a class="btn btn-default btn-search" title="<@spring.message 'common.search'/>"><i class="fa fa-search"></i></a>
 			</div>
 			<div style="clear:both"></div>
 			<div id="selectable-box" class="node-box" :style="'height:' + height + 'px'">
@@ -209,7 +149,7 @@
 					</thead>
 		            <tbody>
 						<template v-for="(selectable,index) in selectableNodes">
-		            		<tr class="selectable" @click="check" :uuid="selectable.uuid" :id="'selectable-' + selectable.uuid">
+		            		<tr :class="{'new-node': selectable.newNode}" class="selectable" @click="check" :uuid="selectable.uuid" :id="'selectable-' + selectable.uuid" :iplong="selectable.ipLong">
 								<td>{{index+1}}</td>
 								<td><span class="r-checkbox checkbox_false_full"></span></td>
 								<td v-for="(item) in colModel" v-html="typeof item.formatter == 'undefined' || item.formatter == null ? selectable[item.field] : item.formatter(selectable)"></td>
@@ -224,6 +164,7 @@
 		<span class="box_toleft myicon-left1" @click="nodeRelChange(1)"></span>
 	</div>
 </script>
+<#include "/js/modules/common/nodeRel.js">
 <#include "/js/modules/sys/system.js">
 </body>
 </html>
\ No newline at end of file