优化代码

web/public/js/components/common/combo-box.js

@@ -1,8 +1,16 @@
 Vue.component("combo-box", {
 	// data-url 和 data-key 成对出现
-	props: ["name", "title", "placeholder", "size", "v-items", "v-value", "data-url", "data-key", "width"],
+	props: [
+		"name", "title", "placeholder", "size", "v-items", "v-value",
+		"data-url", // 数据源URL
+		"data-key", // 数据源中数据的键名
+		"data-search", // 是否启用动态搜索，如果值为on或true，则表示启用
+		"width"
+	],
 	mounted: function () {
-		this.search("")
+		if (this.dataURL.length > 0) {
+			this.search("")
+		}
 
 		// 设定菜单宽度
 		let searchBox = this.$refs.searchBox
@@ -42,6 +50,12 @@ Vue.component("combo-box", {
 			}
 		}
 
+		// data url
+		let dataURL = ""
+		if (typeof this.dataUrl == "string" && this.dataUrl.length > 0) {
+			dataURL = this.dataUrl
+		}
+
 		return {
 			allItems: items, // 原始的所有的items
 			items: items.$copy(), // 候选的items
@@ -53,50 +67,49 @@ Vue.component("combo-box", {
 			styleWidth: width,
 
 			isInitial: true,
+			dataURL: dataURL,
 			urlRequestId: 0 // 记录URL请求ID，防止并行冲突
 		}
 	},
 	methods: {
 		search: function (keyword) {
 			// 从URL中获取选项数据
-			let dataUrl = this.dataUrl
+			let dataUrl = this.dataURL
 			let dataKey = this.dataKey
 			let that = this
 
 			let requestId = Math.random()
 			this.urlRequestId = requestId
 
-			if (dataUrl != null && dataUrl.length > 0 && dataKey != null) {
-				Tea.action(dataUrl)
-					.params({
-						keyword: (keyword == null) ? "" : keyword
-					})
-					.post()
-					.success(function (resp) {
-						if (requestId != that.urlRequestId) {
-							return
-						}
+			Tea.action(dataUrl)
+				.params({
+					keyword: (keyword == null) ? "" : keyword
+				})
+				.post()
+				.success(function (resp) {
+					if (requestId != that.urlRequestId) {
+						return
+					}
 
-						if (resp.data != null) {
-							if (typeof (resp.data[dataKey]) == "object") {
-								let items = that.formatItems(resp.data[dataKey])
-								that.allItems = items
-								that.items = items.$copy()
+					if (resp.data != null) {
+						if (typeof (resp.data[dataKey]) == "object") {
+							let items = that.formatItems(resp.data[dataKey])
+							that.allItems = items
+							that.items = items.$copy()
 
-								if (that.isInitial) {
-									that.isInitial = false
-									if (that.vValue != null) {
-										items.forEach(function (v) {
-											if (v.value == that.vValue) {
-												that.selectedItem = v
-											}
-										})
-									}
+							if (that.isInitial) {
+								that.isInitial = false
+								if (that.vValue != null) {
+									items.forEach(function (v) {
+										if (v.value == that.vValue) {
+											that.selectedItem = v
+										}
+									})
 								}
 							}
 						}
-					})
-			}
+					}
+				})
 		},
 		formatItems: function (items) {
 			items.forEach(function (v) {
@@ -124,10 +137,12 @@ Vue.component("combo-box", {
 			this.hoverIndex = 0
 		},
 		changeKeyword: function () {
+			let shouldSearch = this.dataURL.length > 0 && (this.dataSearch == "on" || this.dataSearch == "true")
+
 			this.hoverIndex = 0
 			let keyword = this.keyword
 			if (keyword.length == 0) {
-				if (this.dataUrl != null && this.dataUrl.length > 0) {
+				if (shouldSearch) {
 					this.search(keyword)
 				} else {
 					this.items = this.allItems.$copy()
@@ -136,7 +151,7 @@ Vue.component("combo-box", {
 			}
 
 
-			if (this.dataUrl != null && this.dataUrl.length > 0) {
+			if (shouldSearch) {
 				this.search(keyword)
 			} else {
 				this.items = this.allItems.$copy().filter(function (v) {
@@ -222,6 +237,13 @@ Vue.component("combo-box", {
 					break
 				}
 			}
+		},
+
+		setDataURL: function (dataURL) {
+			this.dataURL = dataURL
+		},
+		reloadData: function () {
+			this.search("")
 		}
 	},
 	template: `<div style="display: inline; z-index: 10; background: white" class="combo-box">