diff --git a/web/public/js/components/common/combo-box.js b/web/public/js/components/common/combo-box.js index f8d6b49a..cbebc0fe 100644 --- a/web/public/js/components/common/combo-box.js +++ b/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: `