From d59f7419fa9884d57bf2596459ec757783002bbb Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Thu, 9 May 2019 11:09:21 +0800 Subject: [PATCH] =?UTF-8?q?trigger=E5=B0=9D=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/widget/multiselect/trigger/editor.css | 7 ++ .../trigger/editor.block.multiselect.less | 12 +++ .../trigger/editor.block.multiselect.js | 96 ++++++++----------- .../trigger/searcher.list.multi.tree.js | 47 ++++----- 4 files changed, 85 insertions(+), 77 deletions(-) create mode 100644 src/css/widget/multiselect/trigger/editor.css create mode 100644 src/less/widget/multiselect/trigger/editor.block.multiselect.less diff --git a/src/css/widget/multiselect/trigger/editor.css b/src/css/widget/multiselect/trigger/editor.css new file mode 100644 index 000000000..0e02317b1 --- /dev/null +++ b/src/css/widget/multiselect/trigger/editor.css @@ -0,0 +1,7 @@ +.bi-multi-select-block-editor .label-wrapper .label-item { + background-color: rgba(54, 133, 242, 0.06); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0f3685f2,endColorstr=#0f3685f2); +} +.bi-multi-select-block-editor .search-editor { + min-width: 40px; +} diff --git a/src/less/widget/multiselect/trigger/editor.block.multiselect.less b/src/less/widget/multiselect/trigger/editor.block.multiselect.less new file mode 100644 index 000000000..4927905f3 --- /dev/null +++ b/src/less/widget/multiselect/trigger/editor.block.multiselect.less @@ -0,0 +1,12 @@ +@import "../../../index"; + +.bi-multi-select-block-editor { + & .label-wrapper { + & .label-item { + .background-color(@color-bi-background-highlight, 6%); + } + } + & .search-editor { + min-width: 40px; + } +} \ No newline at end of file diff --git a/src/widget/multiselect/trigger/editor.block.multiselect.js b/src/widget/multiselect/trigger/editor.block.multiselect.js index 1f42f8d36..ef42a98e0 100644 --- a/src/widget/multiselect/trigger/editor.block.multiselect.js +++ b/src/widget/multiselect/trigger/editor.block.multiselect.js @@ -7,66 +7,49 @@ BI.MultiSelectBlockEditor = BI.inherit(BI.Widget, { props: { - baseCls: "bi-multi-select-editor", + baseCls: "bi-multi-select-block-editor", el: {} }, render: function () { + var self = this; return { - type: "bi.htape", + type: "bi.inline_vertical_adapt", + scrollx: false, items: [{ - type: "bi.vertical_adapt", - items: [], - width: 24 - }, { el: { - type: "bi.editor" + type: "bi.inline_vertical_adapt", + tagName: "ul", + cls: "label-wrapper", + ref: function (_ref) { + self.labelWrapper = _ref; + }, + items: [], + hgap: 5 + } + }, { + type: "bi.sign_editor", + allowBlank: true, + cls: "search-editor", + ref: function (_ref) { + self.editor = _ref; }, - + listeners: [{ + eventName: BI.Controller.EVENT_CHANGE, + action: function () { + self.fireEvent(BI.Controller.EVENT_CHANGE); + } + }, { + eventName: BI.Editor.EVENT_PAUSE, + action: function () { + self.fireEvent(BI.MultiSelectBlockEditor.EVENT_PAUSE); + } + }], + height: 22 }] }; }, - mounted: function () { - this._checkSize(); - }, - - getBlockSize: function() { - // return BI.redu - }, - - _checkSize: function () { - this.comboWrapper.attr("items")[0].width = o.height; - this.comboWrapper.resize(); - }, - - _init: function () { - BI.MultiSelectBlockEditor.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { - type: "bi.state_editor", - element: this, - height: o.height, - watermark: BI.i18nText("BI-Basic_Search"), - allowBlank: true, - value: o.value, - text: o.text, - tipType: o.tipType, - warningTitle: o.warningTitle, - }); - - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - }); - - this.editor.on(BI.StateEditor.EVENT_PAUSE, function () { - self.fireEvent(BI.MultiSelectBlockEditor.EVENT_PAUSE); - }); - this.editor.on(BI.StateEditor.EVENT_CLICK_LABEL, function () { - - }); - }, - focus: function () { this.editor.focus(); }, @@ -76,24 +59,29 @@ BI.MultiSelectBlockEditor = BI.inherit(BI.Widget, { }, setState: function (state) { - this.editor.setState(state); + var values = BI.map(state, function (idx, path) { + return BI.last(path); + }); + this.labelWrapper.populate(BI.map(values, function (idx, value) { + return { + type: "bi.text_button", + tagName: "li", + cls: "bi-border-radius bi-list-item-select label-item", + text: value + }; + })); }, setValue: function (v) { this.editor.setValue(v); }, - setTipType: function (v) { - this.editor.setTipType(v); - }, - getValue: function () { var v = this.editor.getState(); if (BI.isArray(v) && v.length > 0) { return v[v.length - 1]; } return ""; - }, getKeywords: function () { diff --git a/src/widget/multitree/trigger/searcher.list.multi.tree.js b/src/widget/multitree/trigger/searcher.list.multi.tree.js index acfe1cf45..dbbd48625 100644 --- a/src/widget/multitree/trigger/searcher.list.multi.tree.js +++ b/src/widget/multitree/trigger/searcher.list.multi.tree.js @@ -24,7 +24,7 @@ BI.MultiListTreeSearcher = BI.inherit(BI.Widget, { BI.MultiListTreeSearcher.superclass._init.apply(this, arguments); var self = this, o = this.options; this.editor = BI.createWidget({ - type: "bi.multi_select_editor", + type: "bi.multi_select_block_editor", height: o.height, el: { type: "bi.simple_state_editor", @@ -108,28 +108,29 @@ BI.MultiListTreeSearcher = BI.inherit(BI.Widget, { }, setState: function (ob) { - var o = this.options; - ob || (ob = {}); - ob.value || (ob.value = []); - var count = 0; - if (BI.isNumber(ob)) { - this.editor.setState(ob); - } else if (BI.size(ob.value) === 0) { - this.editor.setState(BI.Selection.None); - } else { - var text = ""; - BI.each(ob.value, function (idx, path) { - var childValue = BI.last(path); - text += (o.valueFormatter(childValue + "") || childValue) + "; "; - count++; - }); - - if (count > 20) { - this.editor.setState(BI.Selection.Multi); - } else { - this.editor.setState(text); - } - } + // var o = this.options; + // ob || (ob = {}); + // ob.value || (ob.value = []); + // var count = 0; + // if (BI.isNumber(ob)) { + // this.editor.setState(ob); + // } else if (BI.size(ob.value) === 0) { + // this.editor.setState(BI.Selection.None); + // } else { + // var text = ""; + // BI.each(ob.value, function (idx, path) { + // var childValue = BI.last(path); + // text += (o.valueFormatter(childValue + "") || childValue) + "; "; + // count++; + // }); + // + // if (count > 20) { + // this.editor.setState(BI.Selection.Multi); + // } else { + // this.editor.setState(text); + // } + // } + this.editor.setState(ob.value); }, setValue: function (ob) {