优化代码

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)
-				Tea.action(dataUrl)
+				.params({
-					.params({
+					keyword: (keyword == null) ? "" : keyword
-						keyword: (keyword == null) ? "" : keyword
+				})
-					})
+				.post()
-					.post()
+				.success(function (resp) {
-					.success(function (resp) {
+					if (requestId != that.urlRequestId) {
-						if (requestId != that.urlRequestId) {
+						return
-							return
+					}
-						}
 
-						if (resp.data != null) {
+					if (resp.data != null) {
-							if (typeof (resp.data[dataKey]) == "object") {
+						if (typeof (resp.data[dataKey]) == "object") {
-								let items = that.formatItems(resp.data[dataKey])
+							let items = that.formatItems(resp.data[dataKey])
-								that.allItems = items
+							that.allItems = items
-								that.items = items.$copy()
+							that.items = items.$copy()
 
-								if (that.isInitial) {
+							if (that.isInitial) {
-									that.isInitial = false
+								that.isInitial = false
-									if (that.vValue != null) {
+								if (that.vValue != null) {
-										items.forEach(function (v) {
+									items.forEach(function (v) {
-											if (v.value == that.vValue) {
+										if (v.value == that.vValue) {
-												that.selectedItem = v
+											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">

web/public/js/components/ns/ns-domain-group-selector.js

@@ -0,0 +1,39 @@
+Vue.component("ns-domain-group-selector", {
+	props: ["v-domain-group-id"],
+	data: function () {
+		let groupId = this.vDomainGroupId
+		if (groupId == null) {
+			groupId = 0
+		}
+		return {
+			userId: 0,
+			groupId: groupId
+		}
+	},
+	methods: {
+		change: function (group) {
+			if (group != null) {
+				this.$emit("change", group.id)
+			} else {
+				this.$emit("change", 0)
+			}
+		},
+		reload: function (userId) {
+			this.userId = userId
+			this.$refs.comboBox.clear()
+			this.$refs.comboBox.setDataURL("/ns/domains/groups/options?userId=" + userId)
+			this.$refs.comboBox.reloadData()
+		}
+	},
+	template: `<div>
+	<combo-box 
+		data-url="/ns/domains/groups/options" 
+		placeholder="选择分组" 
+		data-key="groups" 
+		name="groupId"
+		:v-value="groupId" 
+		@change="change"
+		ref="comboBox">	
+	</combo-box>
+</div>`
+})

web/public/js/components/server/user-selector.js

@@ -27,6 +27,6 @@ Vue.component("user-selector", {
 		}
 	},
 	template: `<div>
-	<combo-box placeholder="选择用户" :data-url="dataURL" :data-key="'users'" name="userId" :v-value="userId" @change="change"></combo-box>
+	<combo-box placeholder="选择用户" :data-url="dataURL" :data-key="'users'" data-search="on" name="userId" :v-value="userId" @change="change"></combo-box>
 </div>`
 })