Browse Source

Merge pull request #144604 in DEC/fineui from master to feature/x

* commit '80c65febbe1551c84e830ce9b8c6e0fe8a9f9ef3':
  KERNEL-12470 feat: bi.text_value_combo逻辑优化
master
superman 2 years ago
parent
commit
6801c10062
  1. 93
      demo/js/case/combo/demo.text_value_combo.js
  2. 119
      src/case/combo/textvaluecombo/combo.textvalue.js
  3. 2
      src/case/trigger/trigger.text.select.js
  4. 24
      src/less/base/combo/combo.textvalue.less

93
demo/js/case/combo/demo.text_value_combo.js

@ -6,7 +6,7 @@ Demo.TextValueCombo = BI.inherit(BI.Widget, {
baseCls: "" baseCls: ""
}, },
render: function () { render: function () {
var combo, wrapper; var combo1, combo2;
var items = [{ var items = [{
text: "MVC-1", text: "MVC-1",
@ -30,8 +30,8 @@ Demo.TextValueCombo = BI.inherit(BI.Widget, {
items: [ items: [
this.createCombo("无初始值,带提示文字", { this.createCombo("无初始值,带提示文字", {
type: "bi.text_value_combo", type: "bi.text_value_combo",
ref: function () { ref: (ref) => {
combo = this; this.combo1 = ref;
}, },
defaultText: "请选择", defaultText: "请选择",
width: 300, width: 300,
@ -100,16 +100,18 @@ Demo.TextValueCombo = BI.inherit(BI.Widget, {
} }
] ]
}), }),
this.createCombo("有初始值,value不匹配,自动标红,可以清空", { this.createCombo("有初始值,value不匹配,自动标红,指定标红文字", {
type: "bi.text_value_combo", type: "bi.text_value_combo",
ref: function () { ref: function () {
combo = this; combo = this;
}, },
defaultText: "请选择",
width: 300, width: 300,
text: "MVC-111",
value: 111, value: 111,
items: items, items: items,
allowClear: true, allowClear: true,
defaultText: "请选择",
warningTitle: "value值不合法",
listeners: [ listeners: [
{ {
eventName: BI.TextValueCombo.EVENT_CHANGE, eventName: BI.TextValueCombo.EVENT_CHANGE,
@ -119,23 +121,67 @@ Demo.TextValueCombo = BI.inherit(BI.Widget, {
} }
] ]
}), }),
this.createCombo("有初始值,value不匹配,自动标红,指定标红文字", { this.createCombo("无初始值,外部受控调用setValue", {
type: "bi.text_value_combo", type: "bi.vertical",
ref: function () { items: [
combo = this;
},
width: 300,
text: "MVC-111",
value: 111,
items: items,
allowClear: true,
defaultText: "df",
listeners: [
{ {
eventName: BI.TextValueCombo.EVENT_CHANGE, type: "bi.text_value_combo",
action: function () { ref: function () {
console.log(this.getValue()); 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 bgap: 10
}, { }, {
el: combo el: combo,
} bgap: 10,
},
] ]
}; };
} }

119
src/case/combo/textvaluecombo/combo.textvalue.js

@ -14,6 +14,7 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
value: "", value: "",
defaultText: "", defaultText: "",
allowClear: false, allowClear: false,
status: "success", // success | warning | error
}); });
}, },
@ -28,90 +29,128 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
self.populate(newValue); self.populate(newValue);
}) : o.items; }) : o.items;
BI.TextValueCombo.superclass._init.apply(this, arguments); BI.TextValueCombo.superclass._init.apply(this, arguments);
this.trigger = BI.createWidget({ },
render: function () {
const o = this.options;
const trigger = {
type: "bi.select_text_trigger", type: "bi.select_text_trigger",
ref: ref => this.trigger = ref,
cls: "text-value-trigger", cls: "text-value-trigger",
items: o.items, items: o.items,
height: o.height, height: o.height,
text: o.text, text: o.text,
value: o.value, value: o.value,
warningTitle: o.warningTitle, title: () => {
if (this.options.status === "error") {
return {
level: "warning",
text: o.warningTitle,
};
}
return {
level: "success",
};
},
allowClear: o.allowClear, allowClear: o.allowClear,
defaultText: o.defaultText, defaultText: o.defaultText,
listeners: [ listeners: [
{ {
eventName: BI.SelectTextTrigger.EVENT_CLEAR, eventName: BI.SelectTextTrigger.EVENT_CLEAR,
action: function () { action: () => {
self._clear(); this._clear();
self.fireEvent(BI.TextValueCombo.EVENT_CHANGE); this.fireEvent(BI.TextValueCombo.EVENT_CHANGE);
} }
} }
], ],
}); };
this.popup = BI.createWidget({ const popup = {
type: "bi.text_value_combo_popup", type: "bi.text_value_combo_popup",
ref: ref => this.popup = ref,
chooseType: o.chooseType, chooseType: o.chooseType,
value: o.value, value: o.value,
items: o.items items: o.items,
}); listeners: [
this.popup.on(BI.TextValueComboPopup.EVENT_CHANGE, function () { {
self.setValue(self.popup.getValue()); eventName: BI.TextValueComboPopup.EVENT_CHANGE,
self.textIconCombo.hideView(); action: (...args) => {
self.fireEvent(BI.TextValueCombo.EVENT_CHANGE, arguments); this.setValue(this.popup.getValue());
}); this.combo.hideView();
this.popup.on(BI.Controller.EVENT_CHANGE, function () { this.fireEvent(BI.TextValueCombo.EVENT_CHANGE, args);
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); }
}); }, {
this.textIconCombo = BI.createWidget({ eventName: BI.Controller.EVENT_CHANGE,
action: (...args) => {
this.fireEvent(BI.Controller.EVENT_CHANGE, args);
}
}
]
};
return {
type: "bi.combo", type: "bi.combo",
ref: ref => this.combo = ref,
container: o.container, container: o.container,
direction: o.direction, direction: o.direction,
element: this,
adjustLength: 2, adjustLength: 2,
el: this.trigger, el: trigger,
popup: { popup: {
el: this.popup, el: popup,
maxHeight: 240, maxHeight: 240,
minHeight: 25 minHeight: 25
} }
}); };
},
mounted: function () {
const o = this.options;
if (BI.isKey(o.value)) { if (BI.isKey(o.value)) {
this._checkError(o.value); this._checkError(o.value);
} }
}, },
_clear: function () { _clear: function () {
this.trigger.setValue(); this.combo.setValue();
this.popup.setValue(); this.setStatus("success");
this.element.removeClass("error");
this.trigger.element.removeClass("error");
}, },
_checkError: function (v) { _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) { 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 (BI.isNull(result)) {
if (this.isEnabled()) { this.setStatus("error");
tipType = "warning";
}
this.element.addClass("error");
this.trigger.element.addClass("error");
} else { } else {
this.element.removeClass("error"); this.setStatus("success");
this.trigger.element.removeClass("error");
} }
this.trigger.setTipType(tipType); },
clear: function () {
this._clear();
}, },
setValue: function (v) { setValue: function (v) {
this.trigger.setValue(v); this.combo.setValue(v);
this.popup.setValue(v);
this._checkError(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 () { getValue: function () {
var value = this.popup.getValue(); var value = this.popup.getValue();
return BI.isNull(value) ? [] : (BI.isArray(value) ? value : [value]); return BI.isNull(value) ? [] : (BI.isArray(value) ? value : [value]);
@ -119,7 +158,7 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
populate: function (items) { populate: function (items) {
this.options.items = items; this.options.items = items;
this.textIconCombo.populate(items); this.combo.populate(items);
} }
}); });
BI.TextValueCombo.EVENT_CHANGE = "EVENT_CHANGE"; BI.TextValueCombo.EVENT_CHANGE = "EVENT_CHANGE";

2
src/case/trigger/trigger.text.select.js

@ -36,7 +36,7 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
textTgap: o.textTgap, textTgap: o.textTgap,
textBgap: o.textBgap, textBgap: o.textBgap,
tipType: o.tipType, tipType: o.tipType,
warningTitle: o.warningTitle, title: null,
allowClear: o.allowClear, allowClear: o.allowClear,
listeners: [ listeners: [
{ {

24
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;
}
}
}
Loading…
Cancel
Save