节点列表节点IP超出4个后可以自动隐藏和显示

web/views/@default/clusters/cluster/nodes.html

@@ -73,7 +73,7 @@
 		<th class="two op">操作</th>
 	</tr>
 	</thead>
-	<tr v-for="node in nodes">
+	<tr v-for="(node, nodeIndex) in nodes">
         <td class="node-name-td"><a :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id">{{node.name}}<sup v-if="node.level > 1"><span class="blue"> &nbsp;L{{node.level}}</span></sup></a>
 
             <a :href="'/clusters/cluster/node/update?clusterId=' + clusterId + '&nodeId=' + node.id" title="设置"><i class="icon setting grey"></i></a>
@@ -91,7 +91,7 @@
 		<td>
 			<span v-if="node.ipAddresses.length == 0" class="disabled">-</span>
 			<div v-else class="address-box">
-				<div v-for="addr in node.ipAddresses" style="margin-bottom:0.3em">
+				<div v-for="(addr, index) in node.ipAddresses" v-if="node.ipAddresses.length < mostIPVisible || node.ipAddressesVisible || index < mostIPVisible" style="margin-bottom:0.3em">
 					<div class="ui label tiny basic">{{addr.ip}}
 						<span class="small" v-if="addr.name.length > 0">（{{addr.name}}<span v-if="!addr.canAccess">，不可访问</span>）</span>
 						<span class="small" v-if="addr.name.length == 0 && !addr.canAccess">（不可访问）</span>
@@ -102,6 +102,10 @@
                         </div>
 					</div>
 				</div>
+                <a href="" @click.prevent="showMoreIP(nodeIndex, node)" v-show="node.ipAddresses.length > mostIPVisible">
+                    <span class="small grey" v-if="!node.ipAddressesVisible">更多IP...</span>
+                    <span class="small grey" v-if="node.ipAddressesVisible">...收起</span>
+                </a>
 			</div>
 		</td>
 		<td class="routes-box" :class="{'show-link': node.dnsRouteNames.length == 0 &&  hasClusterDNS}">

web/views/@default/clusters/cluster/nodes.js

@@ -48,4 +48,17 @@ Tea.context(function () {
 			}
 		})
 	}
+
+	/**
+	 * 显示和隐藏IP
+	 */
+	this.mostIPVisible = 4
+
+	this.showMoreIP = function (nodeIndex, node) {
+		if (typeof node.ipAddressesVisible != "boolean") {
+			node.ipAddressesVisible = false
+		}
+		node.ipAddressesVisible = !node.ipAddressesVisible
+		Vue.set(this.nodes, nodeIndex, node)
+	}
 })

web/views/@default/clusters/nodes.html

@@ -67,7 +67,7 @@
         <th class="one op">操作</th>
     </tr>
     </thead>
-    <tr v-for="node in nodes">
+    <tr v-for="(node, nodeIndex) in nodes">
         <td class="node-name-td"><a :href="'/clusters/cluster/node?clusterId=' + node.cluster.id + '&nodeId=' + node.id">{{node.name}}<sup v-if="node.level > 1"><span class="blue"> &nbsp;L{{node.level}}</span></sup></a>
 
             <a :href="'/clusters/cluster/node/update?clusterId=' + node.cluster.id + '&nodeId=' + node.id" title="设置"><i class="icon setting grey"></i></a>
@@ -85,7 +85,7 @@
         <td>
             <span v-if="node.ipAddresses.length == 0" class="disabled">-</span>
             <div v-else class="address-box">
-                <div v-for="addr in node.ipAddresses" style="margin-bottom:0.3em">
+                <div v-for="(addr, index) in node.ipAddresses" v-if="node.ipAddresses.length < mostIPVisible || node.ipAddressesVisible || index < mostIPVisible" style="margin-bottom:0.3em">
                     <div class="ui label tiny basic">{{addr.ip}}
                         <span class="small" v-if="addr.name.length > 0">（{{addr.name}}<span v-if="!addr.canAccess">，不可访问</span>）</span>
                         <span class="small" v-if="addr.name.length == 0 && !addr.canAccess">（不可访问）</span>
@@ -96,6 +96,11 @@
                         </div>
                     </div>
                 </div>
+
+                <a href="" @click.prevent="showMoreIP(nodeIndex, node)" v-show="node.ipAddresses.length > mostIPVisible">
+                    <span class="small grey" v-if="!node.ipAddressesVisible">更多IP...</span>
+                    <span class="small grey" v-if="node.ipAddressesVisible">...收起</span>
+                </a>
             </div>
         </td>
         <td class="routes-box" :class="{'show-link': node.dnsRouteNames.length == 0 &&  hasClusterDNS}">

web/views/@default/clusters/nodes.js

@@ -48,4 +48,17 @@ Tea.context(function () {
 			}
 		})
 	}
+
+	/**
+	 * 显示和隐藏IP
+	 */
+	this.mostIPVisible = 4
+
+	this.showMoreIP = function (nodeIndex, node) {
+		if (typeof node.ipAddressesVisible != "boolean") {
+			node.ipAddressesVisible = false
+		}
+		node.ipAddressesVisible = !node.ipAddressesVisible
+		Vue.set(this.nodes, nodeIndex, node)
+	}
 })