优化代码

internal/configloaders/admin_module.go

@@ -217,7 +217,7 @@ func AllModuleMaps() []maps.Map {
 			{
 				"name": "工单系统",
 				"code": AdminModuleCodeTicket,
-				"url":  "/ticket",
+				"url":  "/tickets",
 			},
 		}...)
 	}

internal/web/actions/default/servers/users/options.go

@@ -16,14 +16,14 @@ func (this *OptionsAction) RunPost(params struct {
 	usersResp, err := this.RPC().UserRPC().ListEnabledUsers(this.AdminContext(), &pb.ListEnabledUsersRequest{
 		Keyword: params.Keyword,
 		Offset:  0,
-		Size:    10000, // TODO 改进 <plan-user-selector> 组件
+		Size:    100,
 	})
 	if err != nil {
 		this.ErrorPage(err)
 		return
 	}
 
-	userMaps := []maps.Map{}
+	var userMaps = []maps.Map{}
 	for _, user := range usersResp.Users {
 		userMaps = append(userMaps, maps.Map{
 			"id":       user.Id,

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

@@ -2,31 +2,7 @@ Vue.component("combo-box", {
 	// data-url 和 data-key 成对出现
 	props: ["name", "title", "placeholder", "size", "v-items", "v-value", "data-url", "data-key", "width"],
 	mounted: function () {
-		// 从URL中获取选项数据
+		this.search("")
-		let dataUrl = this.dataUrl
-		let dataKey = this.dataKey
-		let that = this
-		if (dataUrl != null && dataUrl.length > 0 && dataKey != null) {
-			Tea.action(dataUrl)
-				.post()
-				.success(function (resp) {
-					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.vValue != null) {
-								items.forEach(function (v) {
-									if (v.value == that.vValue) {
-										that.selectedItem = v
-									}
-								})
-							}
-						}
-					}
-				})
-		}
 
 		// 设定菜单宽度
 		let searchBox = this.$refs.searchBox
@@ -74,10 +50,54 @@ Vue.component("combo-box", {
 			visible: false,
 			hideTimer: null,
 			hoverIndex: 0,
-			styleWidth: width
+			styleWidth: width,
+
+			isInitial: true,
+			urlRequestId: 0 // 记录URL请求ID，防止并行冲突
 		}
 	},
 	methods: {
+		search: function (keyword) {
+			// 从URL中获取选项数据
+			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
+						}
+
+						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
+											}
+										})
+									}
+								}
+							}
+						}
+					})
+			}
+		},
 		formatItems: function (items) {
 			items.forEach(function (v) {
 				if (v.value == null) {
@@ -107,15 +127,25 @@ Vue.component("combo-box", {
 			this.hoverIndex = 0
 			let keyword = this.keyword
 			if (keyword.length == 0) {
-				this.items = this.allItems.$copy()
+				if (this.dataUrl != null && this.dataUrl.length > 0) {
+					this.search(keyword)
+				} else {
+					this.items = this.allItems.$copy()
+				}
 				return
 			}
-			this.items = this.allItems.$copy().filter(function (v) {
+
-				if (v.fullname != null && v.fullname.length > 0 && teaweb.match(v.fullname, keyword)) {
+
-					return true
+			if (this.dataUrl != null && this.dataUrl.length > 0) {
-				}
+				this.search(keyword)
-				return teaweb.match(v.name, keyword)
+			} else {
-			})
+				this.items = this.allItems.$copy().filter(function (v) {
+					if (v.fullname != null && v.fullname.length > 0 && teaweb.match(v.fullname, keyword)) {
+						return true
+					}
+					return teaweb.match(v.name, keyword)
+				})
+			}
 		},
 		selectItem: function (item) {
 			this.selectedItem = item

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

@@ -1,33 +1,14 @@
 Vue.component("finance-user-selector", {
-	mounted: function () {
-		let that = this
-
-		Tea.action("/finance/users/options")
-			.post()
-			.success(function (resp) {
-				that.users = resp.data.users
-			})
-	},
 	props: ["v-user-id"],
 	data: function () {
-		let userId = this.vUserId
+		return {}
-		if (userId == null) {
-			userId = 0
-		}
-		return {
-			users: [],
-			userId: userId
-		}
 	},
-	watch: {
+	methods: {
-		userId: function (v) {
+		change: function (userId) {
-			this.$emit("change", v)
+			this.$emit("change", userId)
 		}
 	},
 	template: `<div>
-	<select class="ui dropdown auto-width" name="userId" v-model="userId">
+	<user-selector :v-user-id="vUserId" data-url="/finance/users/options" @change="change"></user-selector>
-		<option value="0">[选择用户]</option>
-		<option v-for="user in users" :value="user.id">{{user.fullname}} ({{user.username}})</option>
-	</select>
 </div>`
 })

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

@@ -1,28 +1,14 @@
 Vue.component("ns-user-selector", {
-	mounted: function () {
-		let that = this
-
-		Tea.action("/ns/users/options")
-			.post()
-			.success(function (resp) {
-				that.users = resp.data.users
-			})
-	},
 	props: ["v-user-id"],
 	data: function () {
-		let userId = this.vUserId
+		return {}
-		if (userId == null) {
+	},
-			userId = 0
+	methods: {
-		}
+		change: function (userId) {
-		return {
+			this.$emit("change", userId)
-			users: [],
-			userId: userId
 		}
 	},
 	template: `<div>
-	<select class="ui dropdown auto-width" name="userId" v-model="userId">
+	<user-selector :v-user-id="vUserId" data-url="/ns/users/options" @change="change"></user-selector>
-		<option value="0">[选择用户]</option>
-		<option v-for="user in users" :value="user.id">{{user.fullname}} ({{user.username}})</option>
-	</select>
 </div>`
 })

web/public/js/components/plans/plan-user-selector.js

@@ -1,33 +1,14 @@
 Vue.component("plan-user-selector", {
-	mounted: function () {
-		let that = this
-
-		Tea.action("/plans/users/options")
-			.post()
-			.success(function (resp) {
-				that.users = resp.data.users
-			})
-	},
 	props: ["v-user-id"],
 	data: function () {
-		let userId = this.vUserId
+		return {}
-		if (userId == null) {
-			userId = 0
-		}
-		return {
-			users: [],
-			userId: userId
-		}
 	},
-	watch: {
+	methods: {
-		userId: function (v) {
+		change: function (userId) {
-			this.$emit("change", v)
+			this.$emit("change", userId)
 		}
 	},
 	template: `<div>
-	<select class="ui dropdown auto-width" name="userId" v-model="userId">
+	<user-selector :v-user-id="vUserId" data-url="/plans/users/options" @change="change"></user-selector>
-		<option value="0">[选择用户]</option>
-		<option v-for="user in users" :value="user.id">{{user.fullname}} ({{user.username}})</option>
-	</select>
 </div>`
 })

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

@@ -1,21 +1,32 @@
 Vue.component("user-selector", {
-	props: ["v-user-id"],
+	props: ["v-user-id", "data-url"],
 	data: function () {
 		let userId = this.vUserId
 		if (userId == null) {
 			userId = 0
 		}
+
+		let dataURL = this.dataUrl
+		if (dataURL == null || dataURL.length == 0) {
+			dataURL = "/servers/users/options"
+		}
+
 		return {
 			users: [],
-			userId: userId
+			userId: userId,
+			dataURL: dataURL
 		}
 	},
-	watch: {
+	methods: {
-		userId: function (v) {
+		change: function(item) {
-			this.$emit("change", v)
+			if (item != null) {
+				this.$emit("change", item.id)
+			} else {
+				this.$emit("change", 0)
+			}
 		}
 	},
 	template: `<div>
-	<combo-box placeholder="选择用户" :data-url="'/servers/users/options'" :data-key="'users'" name="userId" :v-value="userId"></combo-box>
+	<combo-box placeholder="选择用户" :data-url="dataURL" :data-key="'users'" name="userId" :v-value="userId" @change="change"></combo-box>
 </div>`
 })