From 8fa0c051f10cd8e03a3d21931f9f051f50286727 Mon Sep 17 00:00:00 2001 From: zsmj Date: Wed, 11 May 2022 10:56:07 +0800 Subject: [PATCH] =?UTF-8?q?DESIGN-4103=20feat:=20=E5=A4=9A=E5=B1=82?= =?UTF-8?q?=E7=BA=A7=E4=B8=8B=E6=8B=89=E6=A0=91=E6=8F=90=E4=BE=9B=E4=B8=80?= =?UTF-8?q?=E5=A5=97=E7=94=B1=E5=BC=80=E5=8F=91=E8=80=85=E6=89=8B=E5=8A=A8?= =?UTF-8?q?=E6=8E=A7=E5=88=B6=E7=9A=84=E6=A0=87=E7=BA=A2=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 由于多层级下拉树有同步和异步方式,无法想单选下拉框一样根据items自动判断缺失,所以交给外部手动控制了 --- src/case/trigger/trigger.text.select.js | 1 + src/less/base/combo/combo.less | 22 ++++++++++++++ .../multilayerselecttree.combo.less | 30 +++++++++++-------- .../multilayersingletree.combo.less | 29 ++++++++++-------- .../multilayerselecttree.combo.js | 15 +++++++++- .../multilayersingletree.combo.js | 14 ++++++++- src/widget/singletree/singletree.trigger.js | 1 + .../multilayerselecttree.combo.ts | 2 ++ .../multilayersingletree.combo.ts | 2 ++ 9 files changed, 88 insertions(+), 28 deletions(-) diff --git a/src/case/trigger/trigger.text.select.js b/src/case/trigger/trigger.text.select.js index a63fc4bb0..5461292c1 100644 --- a/src/case/trigger/trigger.text.select.js +++ b/src/case/trigger/trigger.text.select.js @@ -83,6 +83,7 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, { }, setTipType: function (v) { + this.options.tipType = v; this.trigger.setTipType(v); }, diff --git a/src/less/base/combo/combo.less b/src/less/base/combo/combo.less index f96f4b008..206953d4b 100644 --- a/src/less/base/combo/combo.less +++ b/src/less/base/combo/combo.less @@ -46,6 +46,28 @@ } } } + + + // 将来统一变成combo的特性 + //&.status-error { + // &.bi-border, &.bi-border-bottom { + // border-color: @border-color-negative; + // } + // + // .bi-trigger .select-text-label { + // color: @color-bi-text-error-text-trigger; + // } + //} + // + //&.status-warning { + // &.bi-border, &.bi-border-bottom { + // border-color: @border-color-warning; + // } + // + // .bi-trigger .select-text-label { + // color: @font-color-warning; + // } + //} } .bi-theme-dark { diff --git a/src/less/widget/multilayerselecttree/multilayerselecttree.combo.less b/src/less/widget/multilayerselecttree/multilayerselecttree.combo.less index ca3a79fbc..4ac60cf49 100644 --- a/src/less/widget/multilayerselecttree/multilayerselecttree.combo.less +++ b/src/less/widget/multilayerselecttree/multilayerselecttree.combo.less @@ -1,20 +1,24 @@ @import "../../index.less"; -@val: transform .3s ease; + .bi-multilayer-select-tree-combo { - & .trigger-icon-button{ - font-size: @font-size-16; - } - // 此combo的trigger_button是absolute上去的，与bi-combo在同一层级，独立写一下 - & .bi-combo.bi-combo-popup + .bi-trigger-icon-button { - & .x-icon { - .rotate(180deg); - .transition(@val); + + &.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-combo + .bi-trigger-icon-button { - & .x-icon { - .rotate(0deg); - .transition(@val); + + &.status-warning { + &.bi-border, &.bi-border-bottom { + border-color: @border-color-warning; + } + + .bi-trigger .select-text-label { + color: @font-color-warning; } } } diff --git a/src/less/widget/multilayersingletree/multilayersingletree.combo.less b/src/less/widget/multilayersingletree/multilayersingletree.combo.less index af046bc74..6a1390230 100644 --- a/src/less/widget/multilayersingletree/multilayersingletree.combo.less +++ b/src/less/widget/multilayersingletree/multilayersingletree.combo.less @@ -1,20 +1,23 @@ @import "../../index.less"; -@val: transform .3s ease; + .bi-multilayer-single-tree-combo { - & .trigger-icon-button{ - font-size: @font-size-16; - } - // 此combo的trigger_button是absolute上去的，与bi-combo在同一层级，独立写一下 - & .bi-combo.bi-combo-popup + .bi-trigger-icon-button { - & .x-icon { - .rotate(180deg); - .transition(@val); + &.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-combo + .bi-trigger-icon-button { - & .x-icon { - .rotate(0deg); - .transition(@val); + + &.status-warning { + &.bi-border, &.bi-border-bottom { + border-color: @border-color-warning; + } + + .bi-trigger .select-text-label { + color: @font-color-warning; } } } diff --git a/src/widget/multilayerselecttree/multilayerselecttree.combo.js b/src/widget/multilayerselecttree/multilayerselecttree.combo.js index 1613e9fbf..8230ace71 100644 --- a/src/widget/multilayerselecttree/multilayerselecttree.combo.js +++ b/src/widget/multilayerselecttree/multilayerselecttree.combo.js @@ -17,6 +17,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, { allowSearchValue: false, allowInsertValue: false, isNeedAdjustWidth: true, + status: "", // "error","warning" }); }, @@ -37,7 +38,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, { var self = this, o = this.options; return { type: "bi.combo", - cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius", + cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius " + (BI.isKey(o.status) ? ("status-" + o.status) : ""), container: o.container, destroyWhenHide: o.destroyWhenHide, adjustLength: 2, @@ -205,6 +206,18 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, { // do some work }, + setStatus: function (status) { + if (BI.isKey(this.options.status)) { + this.element.removeClass("status-" + this.options.status); + } + this.element.addClass("status-" + status); + this.options.status = status; + }, + + setTipType: function (v) { + this.trigger ? this.trigger.setTipType(v) : this.textTrigger.setTipType(v); + }, + populate: function (items) { this.combo.populate(items); }, diff --git a/src/widget/multilayersingletree/multilayersingletree.combo.js b/src/widget/multilayersingletree/multilayersingletree.combo.js index d0e11182f..2060eeaa6 100644 --- a/src/widget/multilayersingletree/multilayersingletree.combo.js +++ b/src/widget/multilayersingletree/multilayersingletree.combo.js @@ -77,7 +77,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, { var self = this, o = this.options; return { type: "bi.combo", - cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius", + cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius " + (BI.isKey(o.status) ? ("status-" + o.status) : ""), container: o.container, destroyWhenHide: o.destroyWhenHide, adjustLength: 2, @@ -237,6 +237,18 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, { return this.combo.getValue(); }, + setStatus: function (status) { + if (BI.isKey(this.options.status)) { + this.element.removeClass("status-" + this.options.status); + } + this.element.addClass("status-" + status); + this.options.status = status; + }, + + setTipType: function (v) { + this.trigger ? this.trigger.setTipType(v) : this.textTrigger.setTipType(v); + }, + populate: function (items) { this.combo.populate(items); }, diff --git a/src/widget/singletree/singletree.trigger.js b/src/widget/singletree/singletree.trigger.js index 2df5a259c..f4a4ca7df 100644 --- a/src/widget/singletree/singletree.trigger.js +++ b/src/widget/singletree/singletree.trigger.js @@ -60,6 +60,7 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, { }, setTipType: function (v) { + this.options.tipType = v; this.trigger.setTipType(v); }, diff --git a/typescript/widget/multilayerselecttree/multilayerselecttree.combo.ts b/typescript/widget/multilayerselecttree/multilayerselecttree.combo.ts index 1fc9e1519..6146190b8 100644 --- a/typescript/widget/multilayerselecttree/multilayerselecttree.combo.ts +++ b/typescript/widget/multilayerselecttree/multilayerselecttree.combo.ts @@ -21,4 +21,6 @@ export declare class MultiLayerSelectTreeCombo extends Widget { blur(): void; showView(): void; + + setStatus(status: "error" | "warning"): void; } diff --git a/typescript/widget/multilayersingletree/multilayersingletree.combo.ts b/typescript/widget/multilayersingletree/multilayersingletree.combo.ts index fcecc32c4..ebbf5c607 100644 --- a/typescript/widget/multilayersingletree/multilayersingletree.combo.ts +++ b/typescript/widget/multilayersingletree/multilayersingletree.combo.ts @@ -21,4 +21,6 @@ export declare class MultiLayerSingleTreeCombo extends Widget { blur(): void; showView(): void; + + setStatus(status: "error" | "warning"): void; }