From 6623fd8362b846ddbb7a4a11e6fcb25ad0a88d1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=A5=A5=E8=B6=85?= <iwind.liu@gmail.com>
Date: Tue, 11 Jan 2022 15:26:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/public/js/components/common/combo-box.js  | 29 +++++++++--
 .../@default/clusters/ip-addrs/index.html     |  5 +-
 web/views/@default/servers/index.html         | 49 ++++++++-----------
 3 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/web/public/js/components/common/combo-box.js b/web/public/js/components/common/combo-box.js
index 29d7d0f2..1f1db6a8 100644
--- a/web/public/js/components/common/combo-box.js
+++ b/web/public/js/components/common/combo-box.js
@@ -110,6 +110,29 @@ Vue.component("combo-box", {
 		},
 		change: function () {
 			this.$emit("change", this.selectedItem)
+
+			let that = this
+			setTimeout(function () {
+				if (that.$refs.selectedLabel != null) {
+					that.$refs.selectedLabel.focus()
+				}
+			})
+		},
+		submitForm: function (event) {
+			if (event.target.tagName != "A") {
+				return
+			}
+			let parentBox = this.$refs.selectedLabel.parentNode
+			while (true) {
+				parentBox = parentBox.parentNode
+				if (parentBox == null || parentBox.tagName == "BODY") {
+					return
+				}
+				if (parentBox.tagName == "FORM") {
+					parentBox.submit()
+					break
+				}
+			}
 		}
 	},
 	template: `<div style="display: inline; z-index: 10; background: white">
@@ -121,9 +144,9 @@ Vue.component("combo-box", {
 	<!-- 当前选中 -->
 	<div v-if="selectedItem != null">
 		<input type="hidden" :name="name" :value="selectedItem.value"/>
-		<span class="ui label basic">{{title}}：{{selectedItem.name}}
-			<a href="" title="清除" @click.prevent="reset"><i class="icon remove small"></i></a>
-		</span>
+		<a href="" class="ui label basic" ref="selectedLabel" @click.prevent="submitForm"><span>{{title}}：{{selectedItem.name}}</span>
+			<span title="清除" @click.prevent="reset"><i class="icon remove small"></i></span>
+		</a>
 	</div>
 	
 	<!-- 菜单 -->
diff --git a/web/views/@default/clusters/ip-addrs/index.html b/web/views/@default/clusters/ip-addrs/index.html
index 93e41595..f6a6c26e 100644
--- a/web/views/@default/clusters/ip-addrs/index.html
+++ b/web/views/@default/clusters/ip-addrs/index.html
@@ -6,10 +6,7 @@
 <form class="ui form" method="get" action="/clusters/ip-addrs">
     <div class="ui fields inline">
         <div class="ui field">
-            集群：
-        </div>
-        <div class="ui field">
-            <cluster-selector :v-cluster-id="clusterId"></cluster-selector>
+            <node-cluster-combo-box :v-cluster-id="clusterId"></node-cluster-combo-box>
         </div>
         <div class="ui field">
             状态：
diff --git a/web/views/@default/servers/index.html b/web/views/@default/servers/index.html
index 202e9ac9..077715bf 100644
--- a/web/views/@default/servers/index.html
+++ b/web/views/@default/servers/index.html
@@ -27,35 +27,28 @@
 <form method="get" class="ui form" action="/servers">
     <input type="hidden" name="auditingFlag" :value="auditingFlag"/>
 	<div class="ui margin"></div>
-    <div class="ui menu basic text">
-        <div class="item">
-            <div class="ui fields inline">
-                <div class="ui field" v-if="clusters.length > 0">
-                    <select class="ui dropdown auto-width" name="clusterId" v-model="clusterId">
-                        <option value="0">[选择集群]</option>
-                        <option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
-                    </select>
-                </div>
-                <div class="ui field" v-if="groups.length > 0">
-                    <select class="ui dropdown auto-width" name="groupId" v-model="groupId">
-                        <option value="0">[选择分组]</option>
-                        <option v-for="group in groups" :value="group.id">{{group.name}}</option>
-                    </select>
-                </div>
-                <div class="ui field">
-                    <input type="text" name="keyword" style="width:10em" placeholder="关键词" v-model="keyword"/>
-                </div>
-                <div class="ui field">
-                    <button type="submit" class="ui button">搜索</button>
-                    &nbsp;
-                    <a href="/servers" v-if="clusterId > 0 || groupId > 0 || keyword.length > 0">[清除条件]</a>
-                </div>
-                <div class="ui field" v-if="clusterId == 0 && groupId == 0 && keyword.length == 0 && latestServers.length > 0">
-                    <a href="" @click.prevent="showLatest()">常用<i class="icon angle" :class="{down: !latestVisible, up: latestVisible}"></i> </a>
-                </div>
-            </div>
+    <div class="ui fields inline">
+        <div class="ui field" v-if="clusters.length > 0">
+            <node-cluster-combo-box :v-cluster-id="clusterId"></node-cluster-combo-box>
         </div>
-        <div class="item right">
+        <div class="ui field" v-if="groups.length > 0">
+            <select class="ui dropdown auto-width" name="groupId" v-model="groupId">
+                <option value="0">[选择分组]</option>
+                <option v-for="group in groups" :value="group.id">{{group.name}}</option>
+            </select>
+        </div>
+        <div class="ui field">
+            <input type="text" name="keyword" style="width:10em" placeholder="关键词" v-model="keyword"/>
+        </div>
+        <div class="ui field">
+            <button type="submit" class="ui button">搜索</button>
+            &nbsp;
+            <a href="/servers" v-if="clusterId > 0 || groupId > 0 || keyword.length > 0">[清除条件]</a>
+        </div>
+        <div class="ui field" v-if="clusterId == 0 && groupId == 0 && keyword.length == 0 && latestServers.length > 0">
+            <a href="" @click.prevent="showLatest()">常用<i class="icon angle" :class="{down: !latestVisible, up: latestVisible}"></i> </a>
+        </div>
+        <div class="ui field">
             <checkbox name="checkDNS" :v-value="1" v-model="checkDNS">检查域名解析</checkbox>
         </div>
     </div>