/** * @class BI.TextValueCombo * @extend BI.Widget * combo : text + icon, popup : text * 参见场景dashboard布局方式选择 */ BI.TextValueCombo = BI.inherit(BI.Widget, { _defaultConfig: function (config) { return BI.extend(BI.TextValueCombo.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-text-value-combo " + (config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), height: 24, chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE, text: "", value: "", defaultText: "", el: {}, allowClear: false, status: "success", // success | warning | error, title: null, }); }, _init: function () { var self = this, o = this.options; BI.isNumeric(o.width) && (o.width -= (o.simple ? 0 : 2)); BI.isNumeric(o.height) && (o.height -= (o.simple ? 1 : 2)); o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { self.setValue(newValue); }) : o.value; o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { self.populate(newValue); }) : o.items; BI.TextValueCombo.superclass._init.apply(this, arguments); }, render: function () { const o = this.options; const title = () => { if (BI.isFunction(o.title)) { return o.title(); } if (this.options.status === "error") { return { level: "warning", text: o.warningTitle, }; } return { level: "success", }; }; 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, title, allowClear: o.allowClear, defaultText: o.defaultText, listeners: [ { eventName: BI.SelectTextTrigger.EVENT_CLEAR, action: () => { this._clear(); this.fireEvent(BI.TextValueCombo.EVENT_CHANGE); } } ], ...o.el }; let changeTag = false; const popup = { type: "bi.text_value_combo_popup", ref: ref => this.popup = ref, chooseType: o.chooseType, items: o.items, listeners: [ { eventName: BI.TextValueComboPopup.EVENT_CHANGE, action: (...args) => { changeTag = true; this.setValue(this.popup.getValue()); if (o.chooseType === BI.ButtonGroup.CHOOSE_TYPE_SINGLE) { 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, adjustLength: 2, el: trigger, listeners: [ { eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW, action: (...args) => { changeTag = false; } }, { eventName: BI.Combo.EVENT_AFTER_HIDEVIEW, action: (...args) => { if (o.chooseType !== BI.ButtonGroup.CHOOSE_TYPE_SINGLE && changeTag) { this.fireEvent(BI.TextValueCombo.EVENT_CHANGE, ...args); } } } ], popup: { el: popup, value: o.value, maxHeight: 240, minHeight: 25 } }; }, mounted: function () { const o = this.options; if (BI.isKey(o.value) || BI.isObject(o.value)) { this._checkError(o.value); } }, _clear: function () { this.combo.setValue(); this.setStatus("success"); }, _checkError: function (v) { if (BI.isNull(v)) { this.setStatus("success"); return; } var vals = BI.isArray(v) ? v : [v]; var result = BI.intersection(BI.map(this.options.items, (i, item) => item.value), vals); if (result.length !== vals.length) { this.setStatus("error"); } else { this.setStatus("success"); } }, clear: function () { this._clear(); }, setValue: function (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.combo.getValue(); return BI.isNull(value) ? [] : (BI.isArray(value) ? value : [value]); }, populate: function (items) { this.options.items = items; this.combo.populate(items); } }); BI.TextValueCombo.EVENT_CHANGE = "EVENT_CHANGE"; BI.shortcut("bi.text_value_combo", BI.TextValueCombo);