From e775c5c346a66865d62abbf3bea1769688ea2d15 Mon Sep 17 00:00:00 2001 From: zsmj Date: Wed, 17 Aug 2022 20:56:55 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-12470=20feat:=20bi.text=5Fvalue=5Fcombo?= =?UTF-8?q?=E9=80=BB=E8=BE=91=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/case/combo/demo.text_value_combo.js | 93 ++++++++++---- .../combo/textvaluecombo/combo.textvalue.js | 119 ++++++++++++------ src/case/trigger/trigger.text.select.js | 2 +- src/less/base/combo/combo.textvalue.less | 24 ++++ 4 files changed, 174 insertions(+), 64 deletions(-) create mode 100644 src/less/base/combo/combo.textvalue.less diff --git a/demo/js/case/combo/demo.text_value_combo.js b/demo/js/case/combo/demo.text_value_combo.js index 77414af38..50e3fea43 100644 --- a/demo/js/case/combo/demo.text_value_combo.js +++ b/demo/js/case/combo/demo.text_value_combo.js @@ -6,7 +6,7 @@ Demo.TextValueCombo = BI.inherit(BI.Widget, { baseCls: "" }, render: function () { - var combo, wrapper; + var combo1, combo2; var items = [{ text: "MVC-1", @@ -30,8 +30,8 @@ Demo.TextValueCombo = BI.inherit(BI.Widget, { items: [ this.createCombo("无初始值,带提示文字", { type: "bi.text_value_combo", - ref: function () { - combo = this; + ref: (ref) => { + this.combo1 = ref; }, defaultText: "请选择", width: 300, @@ -100,16 +100,18 @@ Demo.TextValueCombo = BI.inherit(BI.Widget, { } ] }), - this.createCombo("有初始值,value不匹配,自动标红,可以清空", { + this.createCombo("有初始值,value不匹配,自动标红,指定标红文字", { type: "bi.text_value_combo", ref: function () { combo = this; }, - defaultText: "请选择", width: 300, + text: "MVC-111", value: 111, items: items, allowClear: true, + defaultText: "请选择", + warningTitle: "value值不合法", listeners: [ { eventName: BI.TextValueCombo.EVENT_CHANGE, @@ -119,23 +121,67 @@ Demo.TextValueCombo = BI.inherit(BI.Widget, { } ] }), - this.createCombo("有初始值,value不匹配,自动标红,指定标红文字", { - type: "bi.text_value_combo", - ref: function () { - combo = this; - }, - width: 300, - text: "MVC-111", - value: 111, - items: items, - allowClear: true, - defaultText: "df", - listeners: [ + this.createCombo("无初始值,外部受控调用setValue", { + type: "bi.vertical", + items: [ { - eventName: BI.TextValueCombo.EVENT_CHANGE, - action: function () { - console.log(this.getValue()); - } + type: "bi.text_value_combo", + ref: function () { + combo1 = this; + }, + width: 300, + items: items, + allowClear: true, + defaultText: "请选择", + listeners: [ + { + eventName: BI.TextValueCombo.EVENT_CHANGE, + action: function () { + console.log(this.getValue()); + } + } + ] + }, { + el: { + type: "bi.button", + text: "setValue(1)", + handler: function () { + combo1.setValue(); + }, + }, + vgap: 10, + } + ] + }), + this.createCombo("无初始值,外部受控调用setStatus", { + type: "bi.vertical", + items: [ + { + type: "bi.text_value_combo", + ref: function () { + combo2 = this; + }, + width: 300, + items: items, + allowClear: true, + defaultText: "请选择", + listeners: [ + { + eventName: BI.TextValueCombo.EVENT_CHANGE, + action: function () { + console.log(this.getValue()); + } + } + ] + }, { + el: { + type: "bi.button", + text: "setStatus()", + handler: function () { + combo2.setStatus("error"); + }, + }, + vgap: 10, } ] }) @@ -155,8 +201,9 @@ Demo.TextValueCombo = BI.inherit(BI.Widget, { }, bgap: 10 }, { - el: combo - } + el: combo, + bgap: 10, + }, ] }; } diff --git a/src/case/combo/textvaluecombo/combo.textvalue.js b/src/case/combo/textvaluecombo/combo.textvalue.js index e29d6c094..f59714c1f 100644 --- a/src/case/combo/textvaluecombo/combo.textvalue.js +++ b/src/case/combo/textvaluecombo/combo.textvalue.js @@ -14,6 +14,7 @@ BI.TextValueCombo = BI.inherit(BI.Widget, { value: "", defaultText: "", allowClear: false, + status: "success", // success | warning | error }); }, @@ -28,90 +29,128 @@ BI.TextValueCombo = BI.inherit(BI.Widget, { self.populate(newValue); }) : o.items; BI.TextValueCombo.superclass._init.apply(this, arguments); - this.trigger = BI.createWidget({ + }, + + render: function () { + + const o = this.options; + + const trigger = { type: "bi.select_text_trigger", + ref: ref => this.trigger = ref, cls: "text-value-trigger", items: o.items, height: o.height, text: o.text, value: o.value, - warningTitle: o.warningTitle, + title: () => { + if (this.options.status === "error") { + return { + level: "warning", + text: o.warningTitle, + }; + } + return { + level: "success", + }; + }, allowClear: o.allowClear, defaultText: o.defaultText, listeners: [ { eventName: BI.SelectTextTrigger.EVENT_CLEAR, - action: function () { - self._clear(); - self.fireEvent(BI.TextValueCombo.EVENT_CHANGE); + action: () => { + this._clear(); + this.fireEvent(BI.TextValueCombo.EVENT_CHANGE); } } ], - }); - this.popup = BI.createWidget({ + }; + const popup = { type: "bi.text_value_combo_popup", + ref: ref => this.popup = ref, chooseType: o.chooseType, value: o.value, - items: o.items - }); - this.popup.on(BI.TextValueComboPopup.EVENT_CHANGE, function () { - self.setValue(self.popup.getValue()); - self.textIconCombo.hideView(); - self.fireEvent(BI.TextValueCombo.EVENT_CHANGE, arguments); - }); - this.popup.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - }); - this.textIconCombo = BI.createWidget({ + items: o.items, + listeners: [ + { + eventName: BI.TextValueComboPopup.EVENT_CHANGE, + action: (...args) => { + this.setValue(this.popup.getValue()); + this.combo.hideView(); + this.fireEvent(BI.TextValueCombo.EVENT_CHANGE, args); + } + }, { + eventName: BI.Controller.EVENT_CHANGE, + action: (...args) => { + this.fireEvent(BI.Controller.EVENT_CHANGE, args); + } + } + ] + }; + + return { type: "bi.combo", + ref: ref => this.combo = ref, container: o.container, direction: o.direction, - element: this, adjustLength: 2, - el: this.trigger, + el: trigger, popup: { - el: this.popup, + el: popup, maxHeight: 240, minHeight: 25 } - }); + }; + }, + + mounted: function () { + const o = this.options; if (BI.isKey(o.value)) { this._checkError(o.value); } }, _clear: function () { - this.trigger.setValue(); - this.popup.setValue(); - this.element.removeClass("error"); - this.trigger.element.removeClass("error"); + this.combo.setValue(); + this.setStatus("success"); }, _checkError: function (v) { - v = BI.isArray(v) ? v[0] : v; - var tipType = null; + + if (BI.isNull(v)) { + this.setStatus("success"); + return; + } + + var vals = BI.isArray(v) ? v : [v]; + var result = BI.find(this.options.items, function (idx, item) { - return v === item.value; + return BI.contains(vals, item.value); }); + if (BI.isNull(result)) { - if (this.isEnabled()) { - tipType = "warning"; - } - this.element.addClass("error"); - this.trigger.element.addClass("error"); + this.setStatus("error"); } else { - this.element.removeClass("error"); - this.trigger.element.removeClass("error"); + this.setStatus("success"); } - this.trigger.setTipType(tipType); + }, + + clear: function () { + this._clear(); }, setValue: function (v) { - this.trigger.setValue(v); - this.popup.setValue(v); + this.combo.setValue(v); this._checkError(v); }, + setStatus: function (status) { + this.element.removeClass(`bi-status-${this.options.status}`); + this.element.addClass(`bi-status-${status}`); + this.options.status = status; + }, + getValue: function () { var value = this.popup.getValue(); return BI.isNull(value) ? [] : (BI.isArray(value) ? value : [value]); @@ -119,7 +158,7 @@ BI.TextValueCombo = BI.inherit(BI.Widget, { populate: function (items) { this.options.items = items; - this.textIconCombo.populate(items); + this.combo.populate(items); } }); BI.TextValueCombo.EVENT_CHANGE = "EVENT_CHANGE"; diff --git a/src/case/trigger/trigger.text.select.js b/src/case/trigger/trigger.text.select.js index 52d3878fb..3be2d7757 100644 --- a/src/case/trigger/trigger.text.select.js +++ b/src/case/trigger/trigger.text.select.js @@ -36,7 +36,7 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, { textTgap: o.textTgap, textBgap: o.textBgap, tipType: o.tipType, - warningTitle: o.warningTitle, + title: null, allowClear: o.allowClear, listeners: [ { diff --git a/src/less/base/combo/combo.textvalue.less b/src/less/base/combo/combo.textvalue.less new file mode 100644 index 000000000..89329e60f --- /dev/null +++ b/src/less/base/combo/combo.textvalue.less @@ -0,0 +1,24 @@ +@import "../../index.less"; + +.bi-text-value-combo { + //将来统一变成combo的特性 + &.bi-status-error { + &.bi-border, &.bi-border-bottom { + border-color: @border-color-negative; + } + + .bi-trigger .select-text-label { + color: @color-bi-text-error-text-trigger; + } + } + + &.bi-status-warning { + &.bi-border, &.bi-border-bottom { + border-color: @border-color-warning; + } + + .bi-trigger .select-text-label { + color: @font-color-warning; + } + } +}