网站服务中域名多于1项时可以搜索

2025-11-06 06:40:27 +08:00 · 2021-01-11 21:13:36 +08:00
parent a6cdb5114b
commit d2865bbbaf
2 changed files with 86 additions and 40 deletions
--- a/web/public/js/components/server/server-name-box.js
+++ b/web/public/js/components/server/server-name-box.js
@@ -1,52 +1,98 @@
 Vue.component("server-name-box", {
-	props: ["v-server-names"],
-	data: function () {
-		let serverNames = this.vServerNames;
-		if (serverNames == null) {
-			serverNames = []
-		}
-		return {
-			serverNames: serverNames
-		}
-	},
-	methods: {
-		addServerName: function () {
-			window.UPDATING_SERVER_NAME = null
-			let that = this
-			teaweb.popup("/servers/addServerNamePopup", {
-				callback: function (resp) {
-					var serverName = resp.data.serverName
-					that.serverNames.push(serverName)
-				}
-			});
-		},
+    props: ["v-server-names"],
+    data: function () {
+        let serverNames = this.vServerNames;
+        if (serverNames == null) {
+            serverNames = []
+        }
+        return {
+            serverNames: serverNames,
+            isSearching: false,
+            keyword: ""
+        }
+    },
+    methods: {
+        addServerName: function () {
+            window.UPDATING_SERVER_NAME = null
+            let that = this
+            teaweb.popup("/servers/addServerNamePopup", {
+                callback: function (resp) {
+                    var serverName = resp.data.serverName
+                    that.serverNames.push(serverName)
+                }
+            });
+        },

-		removeServerName: function (index) {
-			this.serverNames.$remove(index)
-		},
+        removeServerName: function (index) {
+            this.serverNames.$remove(index)
+        },

-		updateServerName: function (index, serverName) {
-			window.UPDATING_SERVER_NAME = serverName
-			let that = this
-			teaweb.popup("/servers/addServerNamePopup", {
-				callback: function (resp) {
-					var serverName = resp.data.serverName
-					Vue.set(that.serverNames, index, serverName)
-				}
-			});
-		}
-	},
-	template: `<div>
+        updateServerName: function (index, serverName) {
+            window.UPDATING_SERVER_NAME = serverName
+            let that = this
+            teaweb.popup("/servers/addServerNamePopup", {
+                callback: function (resp) {
+                    var serverName = resp.data.serverName
+                    Vue.set(that.serverNames, index, serverName)
+                }
+            });
+        },
+        showSearchBox: function () {
+            this.isSearching = !this.isSearching
+            if (this.isSearching) {
+                let that = this
+                setTimeout(function () {
+                    that.$refs.keywordRef.focus()
+                }, 200)
+            } else {
+                this.keyword = ""
+            }
+        },
+    },
+    watch: {
+        keyword: function (v) {
+            this.serverNames.forEach(function (serverName) {
+                if (v.length == 0) {
+                    serverName.isShowing = true
+                    return
+                }
+                if (serverName.subNames == null || serverName.subNames.length == 0) {
+                    if (!teaweb.match(serverName.name, v)) {
+                        serverName.isShowing = false
+                    }
+                } else {
+                    let found = false
+                    serverName.subNames.forEach(function (subName) {
+                        if (teaweb.match(subName, v)) {
+                            found = true
+                        }
+                    })
+                    serverName.isShowing = found
+                }
+            })
+        }
+    },
+    template: `<div>
 	<input type="hidden" name="serverNames" :value="JSON.stringify(serverNames)"/>
 	<div v-if="serverNames.length > 0">
 		<div v-for="(serverName, index) in serverNames" class="ui label small basic">
 			<em v-if="serverName.type != 'full'">{{serverName.type}}</em>  
-			<span v-if="serverName.subNames == null || serverName.subNames.length == 0">{{serverName.name}}</span>
-			<span v-else>{{serverName.subNames[0]}}等{{serverName.subNames.length}}个域名</span>
+			<span v-if="serverName.subNames == null || serverName.subNames.length == 0" :class="{disabled: serverName.isShowing === false}">{{serverName.name}}</span>
+			<span v-else :class="{disabled: serverName.isShowing === false}">{{serverName.subNames[0]}}等{{serverName.subNames.length}}个域名</span>
 			<a href="" title="修改" @click.prevent="updateServerName(index, serverName)"><i class="icon pencil small"></i></a> <a href="" title="删除" @click.prevent="removeServerName(index)"><i class="icon remove"></i></a>
 		</div>
 		<div class="ui divider"></div>
 	</div>
-	<a href="" @click.prevent="addServerName()">[添加域名绑定]</a>
+	<div class="ui fields inline">
+	    <div class="ui field"><a href="" @click.prevent="addServerName()">[添加域名绑定]</a></div>
+	    <div class="ui field"><span class="grey">|</span> </div>
+	    <div class="ui field">
+	        <a href="" @click.prevent="showSearchBox()" v-if="!isSearching"><i class="icon search small"></i></a>
+	        <a href="" @click.prevent="showSearchBox()" v-if="isSearching"><i class="icon close small"></i></a>
+        </div>
+        <div class="ui field" v-if="isSearching">
+            <input type="text" placeholder="搜索域名" ref="keywordRef" class="ui input tiny" v-model="keyword"/>
+        </div>
+    </div>
 </div>`
 })