KERNEL-12470 feat: bi.text_value_combo逻辑优化

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 () {
+                    ref: (ref) => {
-                        combo = this;
+                        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不匹配,自动标红,指定标红文字", {
+                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
                 }, {
-                    el: combo
+                    el: combo,
-                }
+                    bgap: 10,
+                },
             ]
         };
     }

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 () {
+                    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",
+            ref: ref => this.popup = ref,
             chooseType: o.chooseType,
             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",
+            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.combo.setValue();
-        this.popup.setValue();
+        this.setStatus("success");
-        this.element.removeClass("error");
-        this.trigger.element.removeClass("error");
     },
 
     _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()) {
+            this.setStatus("error");
-                tipType = "warning";
-            }
-            this.element.addClass("error");
-            this.trigger.element.addClass("error");
         } else {
-            this.element.removeClass("error");
+            this.setStatus("success");
-            this.trigger.element.removeClass("error");
         }
-        this.trigger.setTipType(tipType);
+    },
+
+    clear: function () {
+        this._clear();
     },
 
     setValue: function (v) {
-        this.trigger.setValue(v);
+        this.combo.setValue(v);
-        this.popup.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";

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: [
                 {

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;
+    }
+  }
+}