From aa3d0eb03570b0ddc775f693db4cc8bd1407870e Mon Sep 17 00:00:00 2001 From: zsmj Date: Wed, 11 Jan 2023 16:27:53 +0800 Subject: [PATCH 1/2] update --- src/case/button/node/treenode.js | 17 +++++++++-------- src/case/button/treeitem/treeitem.js | 12 ++++++------ 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/case/button/node/treenode.js b/src/case/button/node/treenode.js index e0a931e7d..f6ef4c5bc 100644 --- a/src/case/button/node/treenode.js +++ b/src/case/button/node/treenode.js @@ -1,13 +1,14 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend } from "../../../core"; +import { Label, NodeButton } from "@/base"; +import { shortcut, extend, VerticalAdaptLayout } from "@/core"; +import { TreeNodeSwitcher } from "@/case"; @shortcut() export class BasicTreeNode extends NodeButton { static xtype = "bi.tree_node"; - + _defaultConfig(props) { const conf = super._defaultConfig.apply(this, arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-tree-node ${props.selectable ? "bi-list-item-active" : "bi-list-item"}`, id: "", @@ -27,7 +28,7 @@ export class BasicTreeNode extends NodeButton { const o = this.options; const checkbox = { - type: "bi.tree_node_switcher", + type: TreeNodeSwitcher.xtype, ref: _ref => { this.switcher = _ref; }, @@ -39,7 +40,7 @@ export class BasicTreeNode extends NodeButton { layer: o.layer, ...o.switcherIcon, stopPropagation: o.selectable, - mounted () { + mounted() { this.setEnable(true); }, listeners: [ @@ -55,7 +56,7 @@ export class BasicTreeNode extends NodeButton { }; return { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: [o.iconWrapperWidth || o.height, "fill"], items: [ { @@ -63,7 +64,7 @@ export class BasicTreeNode extends NodeButton { lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, // 偏移公式为每一层的偏移量为节点高度的一半 }, { el: { - type: "bi.label", + type: Label.xtype, ref: _ref => { this.text = _ref; }, diff --git a/src/case/button/treeitem/treeitem.js b/src/case/button/treeitem/treeitem.js index 85777dd5c..64ae3ffdc 100644 --- a/src/case/button/treeitem/treeitem.js +++ b/src/case/button/treeitem/treeitem.js @@ -1,5 +1,5 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend } from "../../../core"; +import { shortcut, extend, VerticalAdaptLayout, Layout } from "@/core"; +import { NodeButton, Label } from "@/base"; @shortcut() export class BasicTreeItem extends NodeButton { @@ -7,7 +7,7 @@ export class BasicTreeItem extends NodeButton { _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-tree-item bi-list-item-active`, id: "", @@ -23,12 +23,12 @@ export class BasicTreeItem extends NodeButton { const o = this.options; return { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: ["", "fill"], items: [ { el: { - type: "bi.layout", + type: Layout.xtype, height: o.height, width: o.height, cls: this.getLineCls(), @@ -37,7 +37,7 @@ export class BasicTreeItem extends NodeButton { }, { el: { - type: "bi.label", + type: Label.xtype, ref: _ref => { this.text = _ref; }, From b9d0902fa7643af84ce2c4bb61eb05f5a4b58aab Mon Sep 17 00:00:00 2001 From: zsmj Date: Thu, 12 Jan 2023 11:40:03 +0800 Subject: [PATCH 2/2] =?UTF-8?q?KERNEL-14086=20feat:=20widget/singletree?= =?UTF-8?q?=E3=80=81selecttree?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- es6.js | 4 +- src/case/index.js | 1 + src/case/tree/tree.level.js | 8 +- src/core/func/function.js | 25 +- src/widget/index.js | 15 + src/widget/multiselect/multiselect.trigger.js | 216 ++++---- .../trigger/button.checkselected.js | 146 +++--- .../multiselect/trigger/editor.multiselect.js | 123 ++--- .../trigger/searcher.multiselect.js | 255 +++++----- .../trigger/switcher.checkselected.js | 154 +++--- src/widget/multiselecttree/multiselecttree.js | 240 ++++----- .../multiselecttree/multiselecttree.popup.js | 77 +-- .../multitree/check/multi.tree.check.pane.js | 147 +++--- src/widget/multitree/multi.tree.combo.js | 371 ++++++++------ .../multitree/multi.tree.insert.combo.js | 371 ++++++++------ src/widget/multitree/multi.tree.list.combo.js | 460 ++++++++++-------- src/widget/multitree/multi.tree.popup.js | 114 ++--- .../multi.tree.button.checkselected.js | 93 ++-- .../trigger/multi.tree.search.insert.pane.js | 199 ++++---- .../trigger/multi.tree.search.pane.js | 132 ++--- .../trigger/searcher.list.multi.tree.js | 235 +++++---- .../multitree/trigger/searcher.multi.tree.js | 290 ++++++----- .../selecttree/nodes/node.first.plus.js | 129 +++-- src/widget/selecttree/nodes/node.last.plus.js | 129 +++-- src/widget/selecttree/nodes/node.mid.plus.js | 129 +++-- src/widget/selecttree/nodes/node.plus.js | 129 +++-- src/widget/selecttree/selecttree.combo.js | 114 +++-- src/widget/selecttree/selecttree.expander.js | 77 +-- src/widget/selecttree/selecttree.popup.js | 125 ++--- src/widget/singletree/singletree.combo.js | 147 +++--- src/widget/singletree/singletree.popup.js | 80 +-- src/widget/singletree/singletree.trigger.js | 91 ++-- 32 files changed, 2681 insertions(+), 2145 deletions(-) diff --git a/es6.js b/es6.js index c93a368fc..1a025d511 100644 --- a/es6.js +++ b/es6.js @@ -45,6 +45,8 @@ const target = [ "VerticalAlign", "transformItems", "print", + "Tree", + "Func", ]; // 加载模块 @@ -105,7 +107,7 @@ async function handleFile(srcName) { return matchedSentence; } }); - + fs.writeFileSync(srcName, noXtypeCode); return; diff --git a/src/case/index.js b/src/case/index.js index 8892c93e2..d2cbe36fc 100644 --- a/src/case/index.js +++ b/src/case/index.js @@ -40,6 +40,7 @@ export * from "./loader"; export * from "./segment"; export * from "./layer"; export * from "./linearsegment"; +export * from "./checkbox"; export { MultiSelectBar, SelectList diff --git a/src/case/tree/tree.level.js b/src/case/tree/tree.level.js index 23a2c4473..426175b54 100644 --- a/src/case/tree/tree.level.js +++ b/src/case/tree/tree.level.js @@ -9,7 +9,7 @@ import { isNotEmptyArray, Tree, createWidget, - VerticalLayout + VerticalLayout, Controller, Events } from "@/core"; import { ButtonTree, CustomTree } from "@/base"; import { TreeExpander } from "./treeexpander/tree.expander"; @@ -102,9 +102,9 @@ export class LevelTree extends Widget { ], }, o.el), }); - this.tree.on(BI.Controller.EVENT_CHANGE, function (type, value, ob) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if (type === BI.Events.CLICK) { + this.tree.on(Controller.EVENT_CHANGE, function (type, value, ob) { + self.fireEvent(Controller.EVENT_CHANGE, arguments); + if (type === Events.CLICK) { self.fireEvent(LevelTree.EVENT_CHANGE, value, ob); self.setValue(value); } diff --git a/src/core/func/function.js b/src/core/func/function.js index 5977e24d7..0de246721 100644 --- a/src/core/func/function.js +++ b/src/core/func/function.js @@ -15,13 +15,12 @@ export function createDistinctName(array, name) { let src = name, idx = 1; name = name || ""; while (true) { - if (every(array, function (i, item) { - return isKey(item) ? item !== name : item.name !== name; - })) { + if (every(array, (i, item) => isKey(item) ? item !== name : item.name !== name)) { break; } name = src + (idx++); } + return name; } @@ -31,8 +30,9 @@ export function createDistinctName(array, name) { * @return {number} */ export function getGBWidth(str) { - str = str + ""; + str = `${str}`; str = str.replace(/[^\x00-\xff]/g, "xx"); + return Math.ceil(str.length / 2); } @@ -55,7 +55,7 @@ export function getSearchResult(items, keyword, param) { let t, text, py; keyword = toUpperCase(keyword); const matched = array ? [] : {}, find = array ? [] : {}; - each(items, function (i, item) { + each(items, (i, item) => { // 兼容item为null的处理 if (isNull(item)) { return; @@ -77,7 +77,7 @@ export function getSearchResult(items, keyword, param) { } else { array ? find.push(item) : (find[i] = item); } - } else { // BI-56386 这边两个pid / text.length是为了防止截取的首字符串不是完整的，但光这样做还不够，即时错位了，也不能说明就不符合条件 + } else { // BI-56386 这边两个pid / text.length是为了防止截取的首字符串不是完整的，但光这样做还不够，即时错位了，也不能说明就不符合条件 pidx = py.indexOf(keyword); if (pidx > -1) { if (text === keyword || keyword.length === text.length) { @@ -88,9 +88,10 @@ export function getSearchResult(items, keyword, param) { } } }); + return { match: matched, - find: find, + find, }; } @@ -100,7 +101,7 @@ export function getSearchResult(items, keyword, param) { * @param key * @return {any[]} */ -export function getSortedResult(items, key) { +export function getSortedResult(items, key = null) { const getTextOfItem = BI.isFunction(key) ? key : function (item, key) { if (BI.isNotNull(key)) { @@ -112,10 +113,11 @@ export function getSortedResult(items, key) { if (BI.isNotNull(item.value)) { return item.value; } + return item; }; - return items.sort(function (item1, item2) { + return items.sort((item1, item2) => { const str1 = getTextOfItem(item1, key); const str2 = getTextOfItem(item2, key); if (BI.isNull(str1) && BI.isNull(str2)) { @@ -139,28 +141,33 @@ export function getSortedResult(items, key) { return (BI.isNull(BI.CODE_INDEX[char1]) ? BI.MAX : BI.CODE_INDEX[char1]) - (BI.isNull(BI.CODE_INDEX[char2]) ? BI.MAX : BI.CODE_INDEX[char2]); } } + return len1 - len2; }); } export function beforeFunc(sFunc, func) { const __self = sFunc; + return function () { if (func.apply(sFunc, arguments) === false) { return false; } + return __self.apply(sFunc, arguments); }; } export function afterFunc(sFunc, func) { const __self = sFunc; + return function () { const ret = __self.apply(sFunc, arguments); if (ret === false) { return false; } func.apply(sFunc, arguments); + return ret; }; } diff --git a/src/widget/index.js b/src/widget/index.js index aee31d038..6ce1b935c 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -6,6 +6,11 @@ import * as datetime from "./datetime"; import * as datetimepane from "./datetimepane"; import * as dynamicdatetime from "./dynamicdatetime"; import * as time from "./time"; +import { SelectTreeCombo } from "./selecttree/selecttree.combo"; +import { SingleTreeCombo } from "./singletree/singletree.combo"; +import { MultiTreeCombo } from "/multitree/multi.tree.combo"; +import { MultiTreeInsertCombo } from "/multitree/multi.tree.insert.combo"; +import { MultiTreeListCombo } from "/multitree/multi.tree.list.combo"; Object.assign(BI, { Collapse, @@ -16,6 +21,11 @@ Object.assign(BI, { ...datetimepane, ...dynamicdatetime, ...time, + SelectTreeCombo, + SingleTreeCombo, + MultiTreeCombo, + MultiTreeInsertCombo, + MultiTreeListCombo }); export * from "./date/calendar"; @@ -25,6 +35,11 @@ export * from "./datetime"; export * from "./datetimepane"; export * from "./dynamicdatetime"; export * from "./time"; +export { SelectTreeCombo } from "./selecttree/selecttree.combo"; +export { SingleTreeCombo } from "./singletree/singletree.combo"; +export { MultiTreeCombo } from "/multitree/multi.tree.combo"; +export { MultiTreeInsertCombo } from "/multitree/multi.tree.insert.combo"; +export { MultiTreeListCombo } from "/multitree/multi.tree.list.combo"; export { Collapse }; diff --git a/src/widget/multiselect/multiselect.trigger.js b/src/widget/multiselect/multiselect.trigger.js index f8f95c02b..f2affe91a 100644 --- a/src/widget/multiselect/multiselect.trigger.js +++ b/src/widget/multiselect/multiselect.trigger.js @@ -1,40 +1,56 @@ -/** - * - * 复选下拉框 - * @class BI.MultiSelectTrigger - * @extends BI.Trigger - */ - -BI.MultiSelectTrigger = BI.inherit(BI.Trigger, { - - constants: { - height: 14, - rgap: 4, - lgap: 4 - }, - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectTrigger.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + createWidget, + isFunction, + Layout, + HTapeLayout, + AbsoluteLayout +} from "@/core"; +import { Trigger, Text } from "@/base"; +import { MultiSelectSearcher } from "trigger/searcher.multiselect"; + +@shortcut() +export class MultiSelectTrigger extends Trigger { + static xtype = "bi.multi_select_trigger"; + + constants = { height: 14, rgap: 4, lgap: 4 }; + + static EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK"; + static EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_START = "EVENT_START"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_FOCUS = "EVENT_FOCUS"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-trigger", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, searcher: {}, switcher: {}, adapter: null, masker: {}, allowEdit: true, - itemHeight: 24 + itemHeight: 24, }); - }, + } - _init: function () { - BI.MultiSelectTrigger.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, o = this.options; + const self = this, + o = this.options; - this.searcher = BI.createWidget(o.searcher, { - type: "bi.multi_select_searcher", + this.searcher = createWidget(o.searcher, { + type: MultiSelectSearcher.xtype, height: o.height, text: o.text, defaultText: o.defaultText, @@ -46,125 +62,111 @@ BI.MultiSelectTrigger = BI.inherit(BI.Trigger, { popup: {}, adapter: o.adapter, masker: o.masker, - value: o.value + value: o.value, }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_START, function () { - self.fireEvent(BI.MultiSelectTrigger.EVENT_START); + this.searcher.on(MultiSelectSearcher.EVENT_START, () => { + self.fireEvent(MultiSelectTrigger.EVENT_START); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_PAUSE, function () { - self.fireEvent(BI.MultiSelectTrigger.EVENT_PAUSE); + this.searcher.on(MultiSelectSearcher.EVENT_PAUSE, () => { + self.fireEvent(MultiSelectTrigger.EVENT_PAUSE); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_SEARCHING, function () { - self.fireEvent(BI.MultiSelectTrigger.EVENT_SEARCHING, arguments); + this.searcher.on(MultiSelectSearcher.EVENT_SEARCHING, function () { + self.fireEvent(MultiSelectTrigger.EVENT_SEARCHING, arguments); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_STOP, function () { - self.fireEvent(BI.MultiSelectTrigger.EVENT_STOP); + this.searcher.on(MultiSelectSearcher.EVENT_STOP, () => { + self.fireEvent(MultiSelectTrigger.EVENT_STOP); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectTrigger.EVENT_CHANGE, arguments); + this.searcher.on(MultiSelectSearcher.EVENT_CHANGE, function () { + self.fireEvent(MultiSelectTrigger.EVENT_CHANGE, arguments); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_BLUR, function () { - self.fireEvent(BI.MultiSelectTrigger.EVENT_BLUR); + this.searcher.on(MultiSelectSearcher.EVENT_BLUR, () => { + self.fireEvent(MultiSelectTrigger.EVENT_BLUR); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_FOCUS, function () { - self.fireEvent(BI.MultiSelectTrigger.EVENT_FOCUS); + this.searcher.on(MultiSelectSearcher.EVENT_FOCUS, () => { + self.fireEvent(MultiSelectTrigger.EVENT_FOCUS); }); - this.wrapNumberCounter = BI.createWidget({ - type: "bi.layout" + this.wrapNumberCounter = createWidget({ + type: Layout.xtype, }); - this.wrapper = BI.createWidget({ - type: "bi.htape", + this.wrapper = createWidget({ + type: HTapeLayout.xtype, element: this, items: [ { el: this.searcher, width: "fill", - rgap: 24 + rgap: 24, } - ] + ], }); - !o.allowEdit && BI.createWidget({ - type: "bi.absolute", - element: this, - items: [ - { - el: { - type: "bi.text", - title: function () { - /** 修正REPORT-73699引入，需要考虑到传递过来的值是方法的情况 */ - var state = self.searcher.getState(); - if (BI.isFunction(state)) { - return state(); - } - return state; - } - }, - left: 0, - right: 24, - top: 0, - bottom: 0 - } - ] - }); - }, + !o.allowEdit && + createWidget({ + type: AbsoluteLayout.xtype, + element: this, + items: [ + { + el: { + type: Text.xtype, + title () { + /** 修正REPORT-73699引入，需要考虑到传递过来的值是方法的情况 */ + const state = self.searcher.getState(); + if (isFunction(state)) { + return state(); + } + + return state; + }, + }, + left: 0, + right: 24, + top: 0, + bottom: 0, + } + ], + }); + } - /** - * 重新调整numberCounter的空白占位符 - */ - refreshPlaceHolderWidth: function (width) { + refreshPlaceHolderWidth(width) { this.wrapper.attr("items")[0].rgap = 24 + width; this.wrapper.resize(); - }, + } - getSearcher: function () { + getSearcher() { return this.searcher; - }, + } - stopEditing: function () { + stopEditing() { this.searcher.stopSearch(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.searcher.setAdapter(adapter); - }, + } - setValue: function (ob) { + setValue(ob) { this.searcher.setValue(ob); - }, + } - getKey: function () { + getKey() { return this.searcher.getKey(); - }, + } - getValue: function () { + getValue() { return this.searcher.getValue(); - }, + } - focus: function () { + focus() { this.searcher.focus(); - }, + } - blur: function () { + blur() { this.searcher.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.searcher.setWaterMark(v); } -}); - -BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK"; -BI.MultiSelectTrigger.EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK"; -BI.MultiSelectTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiSelectTrigger.EVENT_START = "EVENT_START"; -BI.MultiSelectTrigger.EVENT_STOP = "EVENT_STOP"; -BI.MultiSelectTrigger.EVENT_PAUSE = "EVENT_PAUSE"; -BI.MultiSelectTrigger.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW"; -BI.MultiSelectTrigger.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiSelectTrigger.EVENT_FOCUS = "EVENT_FOCUS"; - -BI.shortcut("bi.multi_select_trigger", BI.MultiSelectTrigger); +} diff --git a/src/widget/multiselect/trigger/button.checkselected.js b/src/widget/multiselect/trigger/button.checkselected.js index 17468061f..97854a485 100644 --- a/src/widget/multiselect/trigger/button.checkselected.js +++ b/src/widget/multiselect/trigger/button.checkselected.js @@ -1,102 +1,122 @@ -/** - * 查看已选按钮 - * Created by guy on 15/11/3. - * @class BI.MultiSelectCheckSelectedButton - * @extends BI.Single - */ -BI.MultiSelectCheckSelectedButton = BI.inherit(BI.Single, { +import { + shortcut, + extend, + emptyFn, + createWidget, + Controller, + i18nText, + isNotNull, + isNotEmptyString, + nextTick +} from "@/core"; +import { Single, TextButton } from "@/base"; +import { MultiSelectCombo } from "../multiselect.combo"; - _defaultConfig: function () { - return BI.extend(BI.MultiSelectCheckSelectedButton.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class MultiSelectCheckSelectedButton extends Single { + static xtype = "bi.multi_select_check_selected_button"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-check-selected-button", - itemsCreator: BI.emptyFn + itemsCreator: emptyFn, }); - }, + } - _init: function () { - BI.MultiSelectCheckSelectedButton.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.numberCounter = BI.createWidget({ - type: "bi.text_button", + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.numberCounter = createWidget({ + type: TextButton.xtype, element: this, hgap: 4, text: "0", textAlign: "center", textHeight: 16, - cls: "bi-high-light-background count-tip" + cls: "bi-high-light-background count-tip", }); - this.numberCounter.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.numberCounter.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.numberCounter.on(BI.TextButton.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectCheckSelectedButton.EVENT_CHANGE, arguments); + this.numberCounter.on(TextButton.EVENT_CHANGE, function () { + self.fireEvent( + MultiSelectCheckSelectedButton.EVENT_CHANGE, + arguments + ); }); - this.numberCounter.element.hover(function () { - self.numberCounter.setTag(self.numberCounter.getText()); - self.numberCounter.setText(BI.i18nText("BI-Check_Selected")); - }, function () { - self.numberCounter.setText(self.numberCounter.getTag()); - }); + this.numberCounter.element.hover( + () => { + self.numberCounter.setTag(self.numberCounter.getText()); + self.numberCounter.setText(i18nText("BI-Check_Selected")); + }, + () => { + self.numberCounter.setText(self.numberCounter.getTag()); + } + ); this.setVisible(false); - if (BI.isNotNull(o.value)) { + if (isNotNull(o.value)) { this.setValue(o.value); } - }, + } - _populate: function (ob) { - var self = this, o = this.options; + _populate(ob) { + const self = this, + o = this.options; if (ob.type === BI.Selection.All) { - o.itemsCreator({ - type: BI.MultiSelectCombo.REQ_GET_DATA_LENGTH - }, function (res) { - if (self.options.value.type !== BI.Selection.All) { - return; - } - if (BI.isNotEmptyString(res.count)) { - BI.nextTick(function () { - self.numberCounter.setText(res.count); - self.setVisible(true); - }); + o.itemsCreator( + { + type: MultiSelectCombo.REQ_GET_DATA_LENGTH, + }, + res => { + if (self.options.value.type !== BI.Selection.All) { + return; + } + if (isNotEmptyString(res.count)) { + nextTick(() => { + self.numberCounter.setText(res.count); + self.setVisible(true); + }); - return; + return; + } + const length = res.count - ob.value.length; + nextTick(() => { + self.numberCounter.setText(length); + self.setVisible(length > 0); + }); } - var length = res.count - ob.value.length; - BI.nextTick(function () { - self.numberCounter.setText(length); - self.setVisible(length > 0); - }); - }); + ); + return; } - BI.nextTick(function () { + nextTick(() => { self.numberCounter.setText(ob.value.length); self.setVisible(ob.value.length > 0); }); - }, + } - _assertValue: function (ob) { + _assertValue(ob) { ob || (ob = {}); ob.type || (ob.type = BI.Selection.Multi); ob.value || (ob.value = []); + return ob; - }, + } - setValue: function (ob) { + setValue(ob) { ob = this._assertValue(ob); this.options.value = ob; this._populate(ob); - }, + } - populate: function () { + populate() { this._populate(this._assertValue(this.options.value)); - }, - - getValue: function () { - } -}); -BI.MultiSelectCheckSelectedButton.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_check_selected_button", BI.MultiSelectCheckSelectedButton); + getValue() {} +} diff --git a/src/widget/multiselect/trigger/editor.multiselect.js b/src/widget/multiselect/trigger/editor.multiselect.js index db9acc9a4..ed8217cb6 100644 --- a/src/widget/multiselect/trigger/editor.multiselect.js +++ b/src/widget/multiselect/trigger/editor.multiselect.js @@ -1,23 +1,36 @@ -/** - * 多选输入框 - * Created by guy on 15/11/3. - * @class BI.MultiSelectEditor - * @extends Widget - */ -BI.MultiSelectEditor = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectEditor.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + i18nText, + createWidget, + Controller, + isEmptyString, + isEmptyArray +} from "@/core"; +import { StateEditor } from "@/case"; + +@shortcut() +export class MultiSelectEditor extends Widget { + static xtype = "bi.multi_select_editor"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_PAUSE = "EVENT_PAUSE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-editor", el: {}, - watermark: BI.i18nText("BI-Basic_Search") + watermark: i18nText("BI-Basic_Search"), }); - }, + } - _init: function () { - BI.MultiSelectEditor.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.editor = createWidget(o.el, { type: "bi.select_patch_editor", element: this, height: o.height, @@ -30,49 +43,49 @@ BI.MultiSelectEditor = BI.inherit(BI.Widget, { warningTitle: o.warningTitle, }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.editor.on(BI.StateEditor.EVENT_FOCUS, function () { - self.fireEvent(BI.MultiSelectEditor.EVENT_FOCUS); + this.editor.on(StateEditor.EVENT_FOCUS, () => { + self.fireEvent(MultiSelectEditor.EVENT_FOCUS); }); - this.editor.on(BI.StateEditor.EVENT_BLUR, function () { - self.fireEvent(BI.MultiSelectEditor.EVENT_BLUR); + this.editor.on(StateEditor.EVENT_BLUR, () => { + self.fireEvent(MultiSelectEditor.EVENT_BLUR); }); - }, + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - setState: function (state) { + setState(state) { this.editor.setState(state); - }, + } - setValue: function (v) { + setValue(v) { this.editor.setValue(v); - }, + } - setTipType: function (v) { + setTipType(v) { this.editor.setTipType(v); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - getState: function () { + getState() { return this.editor.getText(); - }, + } - getKeywords: function () { - var val = this.editor.getValue(); - var keywords = val.split(/\u200b\s\u200b/); - if (BI.isEmptyString(keywords[keywords.length - 1])) { + getKeywords() { + const val = this.editor.getValue(); + let keywords = val.split(/\u200b\s\u200b/); + if (isEmptyString(keywords[keywords.length - 1])) { keywords = keywords.slice(0, keywords.length - 1); } if (/\u200b\s\u200b$/.test(val)) { @@ -80,27 +93,21 @@ BI.MultiSelectEditor = BI.inherit(BI.Widget, { } return keywords; - }, + } - getKeyword: function () { - var val = this.editor.getValue(); - var keywords = val.split(/\u200b\s\u200b/); - if (BI.isEmptyString(keywords[keywords.length - 1])) { + getKeyword() { + const val = this.editor.getValue(); + let keywords = val.split(/\u200b\s\u200b/); + if (isEmptyString(keywords[keywords.length - 1])) { keywords = keywords.slice(0, keywords.length - 1); } - return BI.isEmptyArray(keywords) ? "" : keywords[keywords.length - 1]; - }, - - populate: function (items) { + + return isEmptyArray(keywords) ? "" : keywords[keywords.length - 1]; + } - }, + populate(items) {} - setWaterMark: function (v) { + setWaterMark(v) { this.editor.setWaterMark(v); } -}); - -BI.MultiSelectEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiSelectEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiSelectEditor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.shortcut("bi.multi_select_editor", BI.MultiSelectEditor); +} diff --git a/src/widget/multiselect/trigger/searcher.multiselect.js b/src/widget/multiselect/trigger/searcher.multiselect.js index e7ed00874..a1a18c661 100644 --- a/src/widget/multiselect/trigger/searcher.multiselect.js +++ b/src/widget/multiselect/trigger/searcher.multiselect.js @@ -1,160 +1,187 @@ -/** - * searcher - * Created by guy on 15/11/3. - * @class BI.MultiSelectSearcher - * @extends Widget - */ -BI.MultiSelectSearcher = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectSearcher.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + emptyFn, + i18nText, + createWidget, + isNotNull, + size, + each +} from "@/core"; +import { MultiSelectEditor } from "editor.multiselect"; +import { Searcher } from "@/base"; + +@shortcut() +export class MultiSelectSearcher extends Widget { + static xtype = "bi.multi_select_searcher"; + + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_START = "EVENT_START"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-searcher", - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, el: {}, popup: {}, - valueFormatter: BI.emptyFn, + valueFormatter: emptyFn, adapter: null, masker: {}, - defaultText: BI.i18nText("BI-Basic_Please_Select"), - itemHeight: 24 + defaultText: i18nText("BI-Basic_Please_Select"), + itemHeight: 24, }); - }, + } - _init: function () { - BI.MultiSelectSearcher.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { - type: "bi.multi_select_editor", + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.editor = createWidget(o.el, { + type: MultiSelectEditor.xtype, height: o.height, text: o.text, defaultText: o.defaultText, watermark: o.watermark, listeners: [ { - eventName: BI.MultiSelectEditor.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_FOCUS); - } - }, { - eventName: BI.MultiSelectEditor.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_BLUR); - } + eventName: MultiSelectEditor.EVENT_FOCUS, + action () { + self.fireEvent(MultiSelectSearcher.EVENT_FOCUS); + }, + }, + { + eventName: MultiSelectEditor.EVENT_BLUR, + action () { + self.fireEvent(MultiSelectSearcher.EVENT_BLUR); + }, } - ] + ], }); - this.searcher = BI.createWidget({ - type: "bi.searcher", + this.searcher = createWidget({ + type: Searcher.xtype, element: this, height: o.height, isAutoSearch: false, isAutoSync: false, - onSearch: function (op, callback) { + onSearch (op, callback) { callback(); }, el: this.editor, - popup: BI.extend({ - type: "bi.multi_select_search_pane", - valueFormatter: o.valueFormatter, - itemFormatter: o.itemFormatter, - keywordGetter: function () { - return self.editor.getValue(); - }, - itemsCreator: function (op, callback) { - var keyword = self.editor.getValue(); - op.keywords = [keyword]; - o.itemsCreator(op, function () { - var keyword = self.editor.getValue(); + popup: extend( + { + type: "bi.multi_select_search_pane", + valueFormatter: o.valueFormatter, + itemFormatter: o.itemFormatter, + keywordGetter () { + return self.editor.getValue(); + }, + itemsCreator (op, callback) { + const keyword = self.editor.getValue(); op.keywords = [keyword]; - o.itemsCreator(op, function () { - if (keyword === self.editor.getValue()) { - callback.apply(null, arguments); - } + o.itemsCreator(op, () => { + const keyword = self.editor.getValue(); + op.keywords = [keyword]; + o.itemsCreator(op, function () { + if (keyword === self.editor.getValue()) { + callback.apply(null, arguments); + } + }); }); - }); + }, + itemHeight: o.itemHeight, + value: o.value, }, - itemHeight: o.itemHeight, - value: o.value - }, o.popup), + o.popup + ), adapter: o.adapter, - masker: o.masker + masker: o.masker, }); - this.searcher.on(BI.Searcher.EVENT_START, function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_START); + this.searcher.on(Searcher.EVENT_START, () => { + self.fireEvent(MultiSelectSearcher.EVENT_START); }); - this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { + this.searcher.on(Searcher.EVENT_PAUSE, function () { if (this.hasMatched()) { - } - self.fireEvent(BI.MultiSelectSearcher.EVENT_PAUSE); + self.fireEvent(MultiSelectSearcher.EVENT_PAUSE); }); - this.searcher.on(BI.Searcher.EVENT_STOP, function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_STOP); + this.searcher.on(Searcher.EVENT_STOP, () => { + self.fireEvent(MultiSelectSearcher.EVENT_STOP); }); - this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_CHANGE, arguments); + this.searcher.on(Searcher.EVENT_CHANGE, function () { + self.fireEvent(MultiSelectSearcher.EVENT_CHANGE, arguments); }); - this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () { - var keywords = this.getKeywords(); - self.fireEvent(BI.MultiSelectSearcher.EVENT_SEARCHING, keywords); + this.searcher.on(Searcher.EVENT_SEARCHING, function () { + const keywords = this.getKeywords(); + self.fireEvent(MultiSelectSearcher.EVENT_SEARCHING, keywords); }); - if (BI.isNotNull(o.value)) { + if (isNotNull(o.value)) { this.setState(o.value); } - }, + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - adjustView: function () { + adjustView() { this.searcher.adjustView(); - }, + } - isSearching: function () { + isSearching() { return this.searcher.isSearching(); - }, + } - stopSearch: function () { + stopSearch() { this.searcher.stopSearch(); - }, + } - getKeyword: function () { + getKeyword() { return this.editor.getValue(); - }, + } - hasMatched: function () { + hasMatched() { return this.searcher.hasMatched(); - }, + } - hasChecked: function () { + hasChecked() { return this.searcher.getView() && this.searcher.getView().hasChecked(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.searcher.setAdapter(adapter); - }, + } - setState: function (ob) { - var o = this.options; + setState(ob) { + const o = this.options; ob || (ob = {}); ob.value || (ob.value = []); if (ob.type === BI.Selection.All) { if (ob.value.length === 0) { this.editor.setState(BI.Selection.All); - } else if (BI.size(ob.assist) <= 20) { + } else if (size(ob.assist) <= 20) { var state = ""; - BI.each(ob.assist, function (i, v) { + each(ob.assist, (i, v) => { if (i === 0) { - state += "" + (v === null ? "" : (o.valueFormatter(v + "") || v)); + state += + `${ + v === null ? "" : o.valueFormatter(`${v}`) || v}`; } else { - state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v)); + state += + `,${ + v === null ? "" : o.valueFormatter(`${v}`) || v}`; } }); this.editor.setState(state); @@ -164,13 +191,17 @@ BI.MultiSelectSearcher = BI.inherit(BI.Widget, { } else { if (ob.value.length === 0) { this.editor.setState(BI.Selection.None); - } else if (BI.size(ob.value) <= 20) { + } else if (size(ob.value) <= 20) { var state = ""; - BI.each(ob.value, function (i, v) { + each(ob.value, (i, v) => { if (i === 0) { - state += "" + (v === null ? "" : (o.valueFormatter(v + "") || v)); + state += + `${ + v === null ? "" : o.valueFormatter(`${v}`) || v}`; } else { - state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v)); + state += + `,${ + v === null ? "" : o.valueFormatter(`${v}`) || v}`; } }); this.editor.setState(state); @@ -178,36 +209,26 @@ BI.MultiSelectSearcher = BI.inherit(BI.Widget, { this.editor.setState(BI.Selection.Multi); } } - }, + } - getState: function () { + getState() { return this.editor.getState(); - }, + } - setValue: function (ob) { + setValue(ob) { this.setState(ob); this.searcher.setValue(ob); - }, + } - getKey: function () { + getKey() { return this.editor.getValue(); - }, + } - getValue: function () { + getValue() { return this.searcher.getValue(); - }, + } - populate: function (items) { + populate(items) { this.searcher.populate.apply(this.searcher, arguments); } -}); - -BI.MultiSelectSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.MultiSelectSearcher.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiSelectSearcher.EVENT_START = "EVENT_START"; -BI.MultiSelectSearcher.EVENT_STOP = "EVENT_STOP"; -BI.MultiSelectSearcher.EVENT_PAUSE = "EVENT_PAUSE"; -BI.MultiSelectSearcher.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiSelectSearcher.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiSelectSearcher.EVENT_BLUR = "EVENT_BLUR"; -BI.shortcut("bi.multi_select_searcher", BI.MultiSelectSearcher); +} diff --git a/src/widget/multiselect/trigger/switcher.checkselected.js b/src/widget/multiselect/trigger/switcher.checkselected.js index 6804c2c5e..b264f8220 100644 --- a/src/widget/multiselect/trigger/switcher.checkselected.js +++ b/src/widget/multiselect/trigger/switcher.checkselected.js @@ -1,112 +1,126 @@ -/** - * 查看已选switcher - * Created by guy on 15/11/3. - * @class BI.MultiSelectCheckSelectedSwitcher - * @extends Widget - */ -BI.MultiSelectCheckSelectedSwitcher = BI.inherit(BI.Widget, { +import { + shortcut, + Widget, + extend, + emptyFn, + createWidget, + Events, + nextTick +} from "@/core"; +import { Switcher } from "@/base"; +import { MultiSelectCheckSelectedButton } from "button.checkselected"; - _defaultConfig: function () { - return BI.extend(BI.MultiSelectCheckSelectedSwitcher.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class MultiSelectCheckSelectedSwitcher extends Widget { + static xtype = "bi.multi_select_check_selected_switcher"; + + static EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-check-selected-switcher", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, el: {}, popup: {}, adapter: null, - masker: {} + masker: {}, }); - }, + } - _init: function () { - BI.MultiSelectCheckSelectedSwitcher.superclass._init.apply(this, arguments); - var self = this, o = this.options; + _init() { + super._init(...arguments); + const self = this, + o = this.options; - this.button = BI.createWidget(o.el, { - type: "bi.multi_select_check_selected_button", + this.button = createWidget(o.el, { + type: MultiSelectCheckSelectedButton.xtype, itemsCreator: o.itemsCreator, - value: o.value + value: o.value, }); - this.button.on(BI.Events.VIEW, function () { - self.fireEvent(BI.Events.VIEW, arguments); + this.button.on(Events.VIEW, function () { + self.fireEvent(Events.VIEW, arguments); }); - this.switcher = BI.createWidget({ - type: "bi.switcher", + this.switcher = createWidget({ + type: Switcher.xtype, toggle: false, element: this, el: this.button, - popup: BI.extend({ - type: "bi.multi_select_check_pane", - valueFormatter: o.valueFormatter, - itemsCreator: o.itemsCreator, - onClickContinueSelect: function () { - self.switcher.hideView(); - }, - ref: function (_ref) { - self.checkPane = _ref; + popup: extend( + { + type: "bi.multi_select_check_pane", + valueFormatter: o.valueFormatter, + itemsCreator: o.itemsCreator, + onClickContinueSelect () { + self.switcher.hideView(); + }, + ref (_ref) { + self.checkPane = _ref; + }, + value: o.value, }, - value: o.value - }, o.popup), + o.popup + ), adapter: o.adapter, - masker: o.masker + masker: o.masker, }); - this.switcher.on(BI.Switcher.EVENT_TRIGGER_CHANGE, function () { - self.fireEvent(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE); + this.switcher.on(Switcher.EVENT_TRIGGER_CHANGE, () => { + self.fireEvent( + MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE + ); }); - this.switcher.on(BI.Switcher.EVENT_BEFORE_POPUPVIEW, function () { - self.fireEvent(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW); + this.switcher.on(Switcher.EVENT_BEFORE_POPUPVIEW, () => { + self.fireEvent( + MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW + ); }); - this.switcher.on(BI.Switcher.EVENT_AFTER_HIDEVIEW, function () { - self.fireEvent(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW); + this.switcher.on(Switcher.EVENT_AFTER_HIDEVIEW, () => { + self.fireEvent( + MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW + ); }); - this.switcher.on(BI.Switcher.EVENT_AFTER_POPUPVIEW, function () { - var me = this; - BI.nextTick(function () { + this.switcher.on(Switcher.EVENT_AFTER_POPUPVIEW, function () { + const me = this; + nextTick(() => { me._populate(); }); }); - }, + } - adjustView: function () { + adjustView() { this.switcher.adjustView(); - }, + } - hideView: function () { + hideView() { this.switcher.empty(); this.switcher.hideView(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.switcher.setAdapter(adapter); - }, + } - setValue: function (v) { + setValue(v) { this.switcher.setValue(v); - }, + } - // 与setValue的区别是只更新查看已选面板的的selectedValue, 不会更新按钮的计数 - updateSelectedValue: function (v) { + updateSelectedValue(v) { this.checkPane.setValue(v); - }, + } - setButtonChecked: function (v) { + setButtonChecked(v) { this.button.setValue(v); - }, - - getValue: function () { + } - }, + getValue() {} - populate: function (items) { + populate(items) { this.switcher.populate.apply(this.switcher, arguments); - }, + } - populateSwitcher: function () { + populateSwitcher() { this.button.populate.apply(this.button, arguments); } -}); - -BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE"; -BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW"; -BI.shortcut("bi.multi_select_check_selected_switcher", BI.MultiSelectCheckSelectedSwitcher); \ No newline at end of file +} diff --git a/src/widget/multiselecttree/multiselecttree.js b/src/widget/multiselecttree/multiselecttree.js index 959c6593b..3e77234cd 100644 --- a/src/widget/multiselecttree/multiselecttree.js +++ b/src/widget/multiselecttree/multiselecttree.js @@ -1,171 +1,193 @@ -/** - * Created by zcf_1 on 2017/5/11. - */ -BI.MultiSelectTree = BI.inherit(BI.Single, { - _constant: { - EDITOR_HEIGHT: 24 - }, - - _defaultConfig: function () { - return BI.extend(BI.MultiSelectTree.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + createWidget, + nextTick, + AbsoluteLayout +} from "@/core"; +import { Single, Searcher } from "@/base"; +import { MultiSelectTreePopup } from "./multiselecttree.popup"; + +@shortcut() +export class MultiSelectTree extends Single { + static xtype = "bi.multi_select_tree"; + + _constant = { EDITOR_HEIGHT: 24 }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-tree", - itemsCreator: BI.emptyFn + itemsCreator: emptyFn, }); - }, + } - _init: function () { - BI.MultiSelectTree.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.storeValue = {value: {}}; + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.storeValue = { value: {} }; - this.adapter = BI.createWidget({ - type: "bi.multi_select_tree_popup", + this.adapter = createWidget({ + type: MultiSelectTreePopup.xtype, itemsCreator: o.itemsCreator, - showLine: o.showLine + showLine: o.showLine, }); - this.adapter.on(BI.MultiSelectTreePopup.EVENT_CHANGE, function () { + this.adapter.on(MultiSelectTreePopup.EVENT_CHANGE, () => { if (self.searcher.isSearching()) { - self.storeValue = {value: self.searcherPane.getValue()}; + self.storeValue = { value: self.searcherPane.getValue() }; } else { - self.storeValue = {value: self.adapter.getValue()}; + self.storeValue = { value: self.adapter.getValue() }; } self.setSelectedValue(self.storeValue.value); - self.fireEvent(BI.MultiSelectTree.EVENT_CHANGE); + self.fireEvent(MultiSelectTree.EVENT_CHANGE); }); // 搜索中的时候用的是parttree，同adapter中的synctree不一样 - this.searcherPane = BI.createWidget({ + this.searcherPane = createWidget({ type: "bi.multi_tree_search_pane", cls: "bi-border-left bi-border-right bi-border-bottom", - keywordGetter: function () { + keywordGetter() { return self.searcher.getKeyword(); }, - itemsCreator: function (op, callback) { + itemsCreator(op, callback) { op.keyword = self.searcher.getKeyword(); o.itemsCreator(op, callback); - } + }, }); this.searcherPane.setVisible(false); - this.searcher = BI.createWidget({ - type: "bi.searcher", + this.searcher = createWidget({ + type: Searcher.xtype, isAutoSearch: false, isAutoSync: false, - onSearch: function (op, callback) { + onSearch(op, callback) { callback({ - keyword: self.searcher.getKeyword() + keyword: self.searcher.getKeyword(), }); }, adapter: this.adapter, popup: this.searcherPane, masker: false, - listeners: [{ - eventName: BI.Searcher.EVENT_START, - action: function () { - self._showSearcherPane(); - // self.storeValue = {value: self.adapter.getValue()}; - // self.searcherPane.setSelectedValue(self.storeValue.value); - } - }, { - eventName: BI.Searcher.EVENT_STOP, - action: function () { - self._showAdapter(); - // self.storeValue = {value: self.searcherPane.getValue()}; - // self.adapter.setSelectedValue(self.storeValue.value); - BI.nextTick(function () { - self.adapter.populate(); - }); - } - }, { - eventName: BI.Searcher.EVENT_CHANGE, - action: function () { - if (self.searcher.isSearching()) { - self.storeValue = {value: self.searcherPane.getValue()}; - } else { - self.storeValue = {value: self.adapter.getValue()}; - } - self.setSelectedValue(self.storeValue.value); - self.fireEvent(BI.MultiSelectTree.EVENT_CHANGE); + listeners: [ + { + eventName: Searcher.EVENT_START, + action() { + self._showSearcherPane(); + // self.storeValue = {value: self.adapter.getValue()}; + // self.searcherPane.setSelectedValue(self.storeValue.value); + }, + }, + { + eventName: Searcher.EVENT_STOP, + action() { + self._showAdapter(); + // self.storeValue = {value: self.searcherPane.getValue()}; + // self.adapter.setSelectedValue(self.storeValue.value); + nextTick(() => { + self.adapter.populate(); + }); + }, + }, + { + eventName: Searcher.EVENT_CHANGE, + action() { + if (self.searcher.isSearching()) { + self.storeValue = { + value: self.searcherPane.getValue(), + }; + } else { + self.storeValue = { + value: self.adapter.getValue(), + }; + } + self.setSelectedValue(self.storeValue.value); + self.fireEvent(MultiSelectTree.EVENT_CHANGE); + }, + }, + { + eventName: Searcher.EVENT_PAUSE, + action() { + self._showAdapter(); + // BI-64732 pause 和stop一致, 都应该刷新adapter + nextTick(() => { + self.adapter.populate(); + }); + }, } - }, { - eventName: BI.Searcher.EVENT_PAUSE, - action: function () { - self._showAdapter(); - // BI-64732 pause 和stop一致, 都应该刷新adapter - BI.nextTick(function () { - self.adapter.populate(); - }); - } - }] + ], }); - BI.createWidget({ + createWidget({ type: "bi.vertical_fill", element: this, - items: [{ - el: this.searcher, - height: "" - }, { - el: this.adapter, - height: "fill" - }] + items: [ + { + el: this.searcher, + height: "", + }, + { + el: this.adapter, + height: "fill", + } + ], }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.searcherPane, - top: this._constant.EDITOR_HEIGHT, - bottom: 0, - left: 0, - right: 0 - }] + items: [ + { + el: this.searcherPane, + top: this._constant.EDITOR_HEIGHT, + bottom: 0, + left: 0, + right: 0, + } + ], }); + } - }, - - _showAdapter: function () { + _showAdapter() { this.adapter.setVisible(true); this.searcherPane.setVisible(false); - }, + } - _showSearcherPane: function () { + _showSearcherPane() { this.searcherPane.setVisible(true); this.adapter.setVisible(false); - }, - - resize: function () { + } - }, + resize() { + } - setSelectedValue: function (v) { + setSelectedValue(v) { this.storeValue.value = v || {}; this.adapter.setSelectedValue(v); this.searcherPane.setSelectedValue(v); this.searcher.setValue({ - value: v || {} + value: v || {}, }); - }, + } - setValue: function (v) { + setValue(v) { this.adapter.setValue(v); - }, + } - stopSearch: function () { + stopSearch() { this.searcher.stopSearch(); - }, + } - updateValue: function (v) { + updateValue(v) { this.adapter.updateValue(v); - }, + } - getValue: function () { + getValue() { return this.storeValue.value; - }, + } - populate: function () { + populate() { this.adapter.populate(); } -}); -BI.MultiSelectTree.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_tree", BI.MultiSelectTree); +} diff --git a/src/widget/multiselecttree/multiselecttree.popup.js b/src/widget/multiselecttree/multiselecttree.popup.js index 95af718ce..805d0571c 100644 --- a/src/widget/multiselecttree/multiselecttree.popup.js +++ b/src/widget/multiselecttree/multiselecttree.popup.js @@ -1,58 +1,63 @@ -/** - * Created by zcf on 2016/12/21. - */ -BI.MultiSelectTreePopup = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.MultiSelectTreePopup.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-multi-select-tree-popup bi-border-left bi-border-right bi-border-bottom", - itemsCreator: BI.emptyFn +import { shortcut, Widget, extend, emptyFn, createWidget } from "@/core"; +import { TreeView, Asynctree } from "@/case"; + +@shortcut() +export class MultiSelectTreePopup extends Widget { + static xtype = "bi.multi_select_tree_popup"; + + static EVENT_AFTER_INIT = "EVENT_AFTER_INIT"; + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { + baseCls: + "bi-multi-select-tree-popup bi-border-left bi-border-right bi-border-bottom", + itemsCreator: emptyFn, }); - }, - _init: function () { - BI.MultiSelectTreePopup.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.popup = BI.createWidget({ - type: "bi.async_tree", + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.popup = createWidget({ + type: Asynctree.xtype, showLine: o.showLine, element: this, - itemsCreator: o.itemsCreator + itemsCreator: o.itemsCreator, }); - this.popup.on(BI.TreeView.EVENT_AFTERINIT, function () { - self.fireEvent(BI.MultiSelectTreePopup.EVENT_AFTER_INIT); + this.popup.on(TreeView.EVENT_AFTERINIT, () => { + self.fireEvent(MultiSelectTreePopup.EVENT_AFTER_INIT); }); - this.popup.on(BI.TreeView.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectTreePopup.EVENT_CHANGE); + this.popup.on(TreeView.EVENT_CHANGE, () => { + self.fireEvent(MultiSelectTreePopup.EVENT_CHANGE); }); - }, + } - hasChecked: function () { + hasChecked() { return this.popup.hasChecked(); - }, + } - getValue: function () { + getValue() { return this.popup.getValue(); - }, + } - setValue: function (v) { + setValue(v) { v || (v = {}); this.popup.setValue(v); - }, + } - setSelectedValue: function (v) { + setSelectedValue(v) { v || (v = {}); this.popup.setSelectedValue(v); - }, + } - updateValue: function (v) { + updateValue(v) { this.popup.updateValue(v); this.popup.refresh(); - }, + } - populate: function (config) { + populate(config) { this.popup.stroke(config); } - -}); -BI.MultiSelectTreePopup.EVENT_AFTER_INIT = "EVENT_AFTER_INIT"; -BI.MultiSelectTreePopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_tree_popup", BI.MultiSelectTreePopup); \ No newline at end of file +} diff --git a/src/widget/multitree/check/multi.tree.check.pane.js b/src/widget/multitree/check/multi.tree.check.pane.js index 598a19f21..56ef73fca 100644 --- a/src/widget/multitree/check/multi.tree.check.pane.js +++ b/src/widget/multitree/check/multi.tree.check.pane.js @@ -1,121 +1,128 @@ -/** - * - * @class BI.MultiTreeCheckPane - * @extends BI.Pane - */ -BI.MultiTreeCheckPane = BI.inherit(BI.Pane, { - - constants: { - height: 25, - lgap: 10, - tgap: 5 - }, - - _defaultConfig: function () { - return BI.extend(BI.MultiTreeCheckPane.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + createWidget, + i18nText, + nextTick, + Events, + VerticalAdaptLayout, VTapeLayout +} from "@/core"; +import { Pane, TextButton, Label } from "@/base"; +import { DisplayTree, TreeView } from "@/case"; + +@shortcut() +export class MultiTreeCheckPane extends Pane { + static xtype = "bi.multi_tree_check_pane"; + + constants = { height: 25, lgap: 10, tgap: 5 }; + + static EVENT_CONTINUE_CLICK = "EVENT_CONTINUE_CLICK"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-tree-check-pane bi-background", - onClickContinueSelect: BI.emptyFn, + onClickContinueSelect: emptyFn, el: { - type: "bi.display_tree" - } + type: DisplayTree.xtype, + }, }); - }, + } - _init: function () { - BI.MultiTreeCheckPane.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, opts = this.options; + const self = this, + opts = this.options; this.selectedValues = {}; - var continueSelect = BI.createWidget({ - type: "bi.text_button", - title: BI.i18nText("BI-Continue_Select"), - text: BI.i18nText("BI-Continue_Select"), - cls: "multi-tree-check-selected" + const continueSelect = createWidget({ + type: TextButton.xtype, + title: i18nText("BI-Continue_Select"), + text: i18nText("BI-Continue_Select"), + cls: "multi-tree-check-selected", }); - continueSelect.on(BI.TextButton.EVENT_CHANGE, function () { + continueSelect.on(TextButton.EVENT_CHANGE, () => { opts.onClickContinueSelect(); - BI.nextTick(function () { + nextTick(() => { self.empty(); }); }); - var backToPopup = BI.createWidget({ - type: "bi.vertical_adapt", + const backToPopup = createWidget({ + type: VerticalAdaptLayout.xtype, columnSize: ["auto", "auto"], cls: "multi-tree-continue-select", items: [ { el: { - type: "bi.label", - title: BI.i18nText("BI-Selected_Data"), - text: BI.i18nText("BI-Selected_Data") + type: Label.xtype, + title: i18nText("BI-Selected_Data"), + text: i18nText("BI-Selected_Data"), }, lgap: this.constants.lgap, - tgap: this.constants.tgap + tgap: this.constants.tgap, }, { el: continueSelect, hgap: this.constants.lgap, - tgap: this.constants.tgap - }] + tgap: this.constants.tgap, + } + ], }); - this.display = BI.createWidget(opts.el, { - type: "bi.display_tree", + this.display = createWidget(opts.el, { + type: DisplayTree.xtype, cls: "bi-multi-tree-display", - itemsCreator: function (op, callback) { - op.type = BI.TreeView.REQ_TYPE_GET_SELECTED_DATA; + itemsCreator(op, callback) { + op.type = TreeView.REQ_TYPE_GET_SELECTED_DATA; opts.itemsCreator(op, callback); }, - value: (opts.value || {}).value + value: (opts.value || {}).value, }); - this.display.on(BI.Events.AFTERINIT, function () { - self.fireEvent(BI.Events.AFTERINIT); + this.display.on(Events.AFTERINIT, () => { + self.fireEvent(Events.AFTERINIT); }); - this.display.on(BI.TreeView.EVENT_INIT, function () { + this.display.on(TreeView.EVENT_INIT, () => { backToPopup.setVisible(false); }); - this.display.on(BI.TreeView.EVENT_AFTERINIT, function () { + this.display.on(TreeView.EVENT_AFTERINIT, () => { backToPopup.setVisible(true); }); - BI.createWidget({ - type: "bi.vtape", + createWidget({ + type: VTapeLayout.xtype, element: this, - items: [{ - height: this.constants.height, - el: backToPopup - }, { - height: "fill", - el: this.display - }] + items: [ + { + height: this.constants.height, + el: backToPopup, + }, + { + height: "fill", + el: this.display, + } + ], }); - }, + } - empty: function () { + empty() { this.display.empty(); - }, + } - populate: function (configs) { + populate(configs) { this.display.stroke(configs); - }, + } - setValue: function (v) { + setValue(v) { v || (v = {}); this.display.setSelectedValue(v.value); - }, - - getValue: function () { - } -}); -BI.MultiTreeCheckPane.EVENT_CONTINUE_CLICK = "EVENT_CONTINUE_CLICK"; - - -BI.shortcut("bi.multi_tree_check_pane", BI.MultiTreeCheckPane); + getValue() { + } +} diff --git a/src/widget/multitree/multi.tree.combo.js b/src/widget/multitree/multi.tree.combo.js index 5fca0ca4f..571f86e03 100644 --- a/src/widget/multitree/multi.tree.combo.js +++ b/src/widget/multitree/multi.tree.combo.js @@ -1,33 +1,67 @@ -/** - * - * @class BI.MultiTreeCombo - * @extends BI.Single - */ - -BI.MultiTreeCombo = BI.inherit(BI.Single, { - _defaultConfig: function () { - return BI.extend(BI.MultiTreeCombo.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + createWidget, + toPix, + nextTick, + Events, + AbsoluteLayout, + VerticalAdaptLayout, + deepClone +} from "@/core"; +import { Single, Combo } from "@/base"; +import { MultiTreeSearcher } from "trigger/searcher.multi.tree"; +import { MultiTreePopup } from "multi.tree.popup"; +import { MultiSelectTrigger } from "../multiselect/multiselect.trigger"; +import { TriggerIconButton } from "@/case"; +import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected"; + +@shortcut() +export class MultiTreeCombo extends Single { + static xtype = "bi.multi_tree_combo"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-tree-combo", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, height: 24, allowEdit: true, isNeedAdjustWidth: true, }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.MultiTreeCombo.superclass._init.apply(this, arguments); - var isInit = false; - var want2showCounter = false; + _init() { + const triggerBtn = createWidget({ + type: TriggerIconButton.xtype, + width: o.height, + height: o.height, + cls: "multi-select-trigger-icon-button", + }); + let clear; + let change; + const self = this, + o = this.options; + super._init(...arguments); + let isInit = false; + let want2showCounter = false; this.storeValue = { value: o.value || {} }; - this.trigger = BI.createWidget({ + this.trigger = createWidget({ type: "bi.multi_select_trigger", allowEdit: o.allowEdit, - height: BI.toPix(o.height, o.simple ? 1 : 2), + height: toPix(o.height, o.simple ? 1 : 2), valueFormatter: o.valueFormatter, text: o.text, defaultText: o.defaultText, @@ -45,72 +79,78 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { itemsCreator: o.itemsCreator, listeners: [ { - eventName: BI.MultiTreeSearcher.EVENT_CLICK_TREE_NODE, - action: function () { + eventName: MultiTreeSearcher.EVENT_CLICK_TREE_NODE, + action() { self._dataChange = true; - } + }, } ], }, - value: { value: o.value || {} } + value: { value: o.value || {} }, }); - this.combo = BI.createWidget({ - type: "bi.combo", - cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), + this.combo = createWidget({ + type: Combo.xtype, + cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius", toggle: !o.allowEdit, container: o.container, el: this.trigger, adjustLength: 1, popup: { type: "bi.multi_tree_popup_view", - ref: function () { + ref() { self.popup = this; self.trigger.setAdapter(this); self.numberCounter.setAdapter(this); }, listeners: [ { - eventName: BI.MultiTreePopup.EVENT_AFTERINIT, - action: function () { + eventName: MultiTreePopup.EVENT_AFTERINIT, + action() { self.numberCounter.adjustView(); isInit = true; if (want2showCounter === true) { showCounter(); } - } - }, { - eventName: BI.MultiTreePopup.EVENT_CHANGE, - action: function () { + }, + }, + { + eventName: MultiTreePopup.EVENT_CHANGE, + action() { change = true; - var val = { + const val = { type: BI.Selection.Multi, - value: this.hasChecked() ? this.getValue() : {} + value: this.hasChecked() ? this.getValue() : {}, }; self.trigger.getSearcher().setState(val); self.numberCounter.setButtonChecked(val); self.storeValue = { value: self.combo.getValue() }; - self.fireEvent(BI.MultiTreeCombo.EVENT_CLICK_ITEM, self.combo.getValue()); + self.fireEvent( + MultiTreeCombo.EVENT_CLICK_ITEM, + self.combo.getValue() + ); self._dataChange = true; - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM, - action: function () { + }, + }, + { + eventName: MultiTreePopup.EVENT_CLICK_CONFIRM, + action() { self.combo.hideView(); - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR, - action: function () { + }, + }, + { + eventName: MultiTreePopup.EVENT_CLICK_CLEAR, + action() { clear = true; self._dataChange = true; self.setValue(); self._defaultState(); - } + }, } ], itemsCreator: o.itemsCreator, - onLoaded: function () { - BI.nextTick(function () { + onLoaded() { + nextTick(() => { self.numberCounter.adjustView(); self.trigger.getSearcher().adjustView(); }); @@ -119,49 +159,51 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { }, isNeedAdjustWidth: o.isNeedAdjustWidth, value: { value: o.value || {} }, - hideChecker: function (e) { - return triggerBtn.element.find(e.target).length === 0 && - self.numberCounter.element.find(e.target).length === 0; - } + hideChecker(e) { + return ( + triggerBtn.element.find(e.target).length === 0 && + self.numberCounter.element.find(e.target).length === 0 + ); + }, }); - var change = false; - var clear = false; // 标识当前是否点击了清空 + change = false; + clear = false; // 标识当前是否点击了清空 - var isSearching = function () { + function isSearching() { return self.trigger.getSearcher().isSearching(); - }; + } - var isPopupView = function () { + function isPopupView() { return self.combo.isViewVisible(); - }; + } - this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () { - self.fireEvent(BI.MultiTreeCombo.EVENT_FOCUS); + this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => { + self.fireEvent(MultiTreeCombo.EVENT_FOCUS); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () { - self.fireEvent(BI.MultiTreeCombo.EVENT_BLUR); + this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => { + self.fireEvent(MultiTreeCombo.EVENT_BLUR); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { + this.trigger.on(MultiSelectTrigger.EVENT_START, function () { self.storeValue = { value: self.combo.getValue() }; this.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { + this.trigger.on(MultiSelectTrigger.EVENT_STOP, function () { self.storeValue = { value: this.getValue() }; self.combo.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); - BI.nextTick(function () { + nextTick(() => { if (isPopupView()) { self.combo.populate(); } }); - self.fireEvent(BI.MultiTreeCombo.EVENT_STOP); + self.fireEvent(MultiTreeCombo.EVENT_STOP); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function () { - self.fireEvent(BI.MultiTreeCombo.EVENT_SEARCHING); + this.trigger.on(MultiSelectTrigger.EVENT_SEARCHING, () => { + self.fireEvent(MultiTreeCombo.EVENT_SEARCHING); }); function showCounter() { @@ -174,28 +216,33 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { self.numberCounter.setValue(self.storeValue); } - this.trigger.on(BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK, function () { + this.trigger.on(MultiSelectTrigger.EVENT_TRIGGER_CLICK, () => { self.combo.toggle(); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_COUNTER_CLICK, function () { + this.trigger.on(MultiSelectTrigger.EVENT_COUNTER_CLICK, () => { if (!self.combo.isViewVisible()) { self.combo.showView(); } }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function () { - var checked = this.getSearcher().hasChecked(); - var val = { + this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function () { + const checked = this.getSearcher().hasChecked(); + const val = { type: BI.Selection.Multi, - value: checked ? { 1: 1 } : {} + value: checked ? { 1: 1 } : {}, }; - this.getSearcher().setState(checked ? BI.Selection.Multi : BI.Selection.None); + this.getSearcher().setState( + checked ? BI.Selection.Multi : BI.Selection.None + ); self.numberCounter.setButtonChecked(val); - self.fireEvent(BI.MultiTreeCombo.EVENT_CLICK_ITEM, self.combo.getValue()); + self.fireEvent( + MultiTreeCombo.EVENT_CLICK_ITEM, + self.combo.getValue() + ); self._dataChange = true; }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () { if (isSearching()) { return; } @@ -209,12 +256,13 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { self.combo.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); self.populate(); - self.fireEvent(BI.MultiTreeCombo.EVENT_BEFORE_POPUPVIEW); + self.fireEvent(MultiTreeCombo.EVENT_BEFORE_POPUPVIEW); }); - this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, () => { if (isSearching()) { self._stopEditing(); - self._dataChange && self.fireEvent(BI.MultiTreeCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiTreeCombo.EVENT_CONFIRM); } else { if (isPopupView()) { self._stopEditing(); @@ -222,23 +270,18 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { if (clear === true) { self.storeValue = { value: {} }; } - self._dataChange && self.fireEvent(BI.MultiTreeCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiTreeCombo.EVENT_CONFIRM); } } clear = false; change = false; }); - this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () { - self.fireEvent(BI.MultiTreeCombo.EVENT_AFTER_HIDEVIEW); + this.combo.on(Combo.EVENT_AFTER_HIDEVIEW, () => { + self.fireEvent(MultiTreeCombo.EVENT_AFTER_HIDEVIEW); }); - var triggerBtn = BI.createWidget({ - type: "bi.trigger_icon_button", - width: o.height, - height: o.height, - cls: "multi-select-trigger-icon-button" - }); - triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { self.numberCounter.hideView(); if (self.combo.isViewVisible()) { self.combo.hideView(); @@ -247,13 +290,13 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { } }); - this.numberCounter = BI.createWidget({ + this.numberCounter = createWidget({ type: "bi.multi_select_check_selected_switcher", el: { - type: "bi.multi_tree_check_selected_button" + type: "bi.multi_tree_check_selected_button", }, popup: { - type: "bi.multi_tree_check_pane" + type: "bi.multi_tree_check_pane", }, masker: { offset: { @@ -265,43 +308,56 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { }, itemsCreator: o.itemsCreator, valueFormatter: o.valueFormatter, - value: { value: o.value || {} } - }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); - } + value: { value: o.value || {} }, }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { - if (want2showCounter === false) { - want2showCounter = true; + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, + () => { + if (!self.combo.isViewVisible()) { + self.combo.showView(); + } } - if (isInit === true) { - want2showCounter = null; - showCounter(); + ); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, + () => { + if (want2showCounter === false) { + want2showCounter = true; + } + if (isInit === true) { + want2showCounter = null; + showCounter(); + } } - }); - - this.numberCounter.on(BI.Events.VIEW, function (b) { - BI.nextTick(function () {// 自动调整宽度 - self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0)); + ); + + this.numberCounter.on(Events.VIEW, b => { + nextTick(() => { + // 自动调整宽度 + self.trigger.refreshPlaceHolderWidth( + b === true ? self.numberCounter.element.outerWidth() + 8 : 0 + ); }); }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { - BI.nextTick(function () {// 收起时自动调整宽度 - self.trigger.refreshPlaceHolderWidth(0); - }); - }); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, + () => { + nextTick(() => { + // 收起时自动调整宽度 + self.trigger.refreshPlaceHolderWidth(0); + }); + } + ); - this.trigger.element.click(function (e) { + this.trigger.element.click(e => { if (self.trigger.element.find(e.target).length > 0) { self.numberCounter.hideView(); } }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, items: [ { @@ -309,85 +365,76 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { left: 0, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: triggerBtn, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: { - type: "bi.vertical_adapt", - items: [this.numberCounter] + type: VerticalAdaptLayout.xtype, + items: [this.numberCounter], }, right: o.height, top: 0, - bottom: 0 + bottom: 0, } - ] + ], }); - }, + } - _stopEditing: function () { + _stopEditing() { this.trigger.stopEditing(); this.numberCounter.hideView(); - }, + } - _defaultState: function () { + _defaultState() { this._stopEditing(); this.combo.hideView(); - }, + } - showView: function () { + showView() { this.combo.showView(); - }, + } - hideView: function () { + hideView() { this.combo.hideView(); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue.value = v || {}; this.combo.setValue({ - value: v || {} + value: v || {}, }); this.numberCounter.setValue({ - value: v || {} + value: v || {}, }); - }, + } - getSearcher: function () { + getSearcher() { return this.trigger.getSearcher(); - }, + } - getValue: function () { - return BI.deepClone(this.storeValue.value); - }, + getValue() { + return deepClone(this.storeValue.value); + } - populate: function () { + populate() { this.combo.populate(); - }, + } - focus: function () { + focus() { this.trigger.focus(); - }, + } - blur: function () { + blur() { this.trigger.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.trigger.setWaterMark(v); } -}); - -BI.MultiTreeCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiTreeCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiTreeCombo.EVENT_STOP = "EVENT_STOP"; -BI.MultiTreeCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiTreeCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.MultiTreeCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.MultiTreeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.MultiTreeCombo.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW"; - -BI.shortcut("bi.multi_tree_combo", BI.MultiTreeCombo); +} diff --git a/src/widget/multitree/multi.tree.insert.combo.js b/src/widget/multitree/multi.tree.insert.combo.js index acacbb875..604fddd6d 100644 --- a/src/widget/multitree/multi.tree.insert.combo.js +++ b/src/widget/multitree/multi.tree.insert.combo.js @@ -1,34 +1,58 @@ -/** - * 可以往当前选中节点下添加新值的下拉树 - * @class BI.MultiTreeInsertCombo - * @extends BI.Single - */ - -BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { - - _defaultConfig: function () { - return BI.extend(BI.MultiTreeInsertCombo.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + createWidget, + toPix, + nextTick, + Events, + AbsoluteLayout, + VerticalAdaptLayout, + deepClone +} from "@/core"; +import { Single, Combo } from "@/base"; +import { MultiTreeSearchInsertPane } from "trigger/multi.tree.search.insert.pane"; +import { MultiTreePopup } from "multi.tree.popup"; +import { MultiSelectTrigger } from "../multiselect/multiselect.trigger"; +import { TriggerIconButton } from "@/case"; +import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected"; + +@shortcut() +export class MultiTreeInsertCombo extends Single { + static xtype = "bi.multi_tree_insert_combo"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-tree-insert-combo", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, height: 24, allowEdit: true, isNeedAdjustWidth: true, }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.MultiTreeInsertCombo.superclass._init.apply(this, arguments); - var isInit = false; - var want2showCounter = false; + _init() { + const self = this, + o = this.options; + super._init(...arguments); + let isInit = false; + let want2showCounter = false; this.storeValue = { value: o.value || {} }; - this.trigger = BI.createWidget({ + this.trigger = createWidget({ type: "bi.multi_select_trigger", allowEdit: o.allowEdit, - height: BI.toPix(o.height, o.simple ? 1 : 2), + height: toPix(o.height, o.simple ? 1 : 2), valueFormatter: o.valueFormatter, text: o.text, defaultText: o.defaultText, @@ -49,85 +73,94 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { type: "bi.multi_tree_search_insert_pane", listeners: [ { - eventName: BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, - action: function () { - self.storeValue.value[self.trigger.getSearcher().getKeyword()] = {}; + eventName: MultiTreeSearchInsertPane.EVENT_ADD_ITEM, + action () { + self.storeValue.value[ + self.trigger.getSearcher().getKeyword() + ] = {}; self._assertShowValue(); // setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了 self.combo.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); self._stopEditing(); self._dataChange = true; - } - }, { - eventName: BI.MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE, - action: function () { + }, + }, + { + eventName: + MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE, + action () { self._dataChange = true; - } + }, } - ] - } + ], + }, }, - value: { value: o.value || {} } - + value: { value: o.value || {} }, }); - this.combo = BI.createWidget({ - type: "bi.combo", - cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), + this.combo = createWidget({ + type: Combo.xtype, + cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius", toggle: !o.allowEdit, container: o.container, el: this.trigger, adjustLength: 1, popup: { type: "bi.multi_tree_popup_view", - ref: function () { + ref () { self.popup = this; self.trigger.setAdapter(this); self.numberCounter.setAdapter(this); }, listeners: [ { - eventName: BI.MultiTreePopup.EVENT_AFTERINIT, - action: function () { + eventName: MultiTreePopup.EVENT_AFTERINIT, + action () { self.numberCounter.adjustView(); isInit = true; if (want2showCounter === true) { showCounter(); } - } - }, { - eventName: BI.MultiTreePopup.EVENT_CHANGE, - action: function () { + }, + }, + { + eventName: MultiTreePopup.EVENT_CHANGE, + action () { change = true; - var val = { + const val = { type: BI.Selection.Multi, - value: this.hasChecked() ? this.getValue() : {} + value: this.hasChecked() ? this.getValue() : {}, }; self.trigger.getSearcher().setState(val); self.numberCounter.setButtonChecked(val); self.storeValue = { value: self.combo.getValue() }; - self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CLICK_ITEM, self.getValue()); + self.fireEvent( + MultiTreeInsertCombo.EVENT_CLICK_ITEM, + self.getValue() + ); self._dataChange = true; - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM, - action: function () { + }, + }, + { + eventName: MultiTreePopup.EVENT_CLICK_CONFIRM, + action () { self.combo.hideView(); - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR, - action: function () { + }, + }, + { + eventName: MultiTreePopup.EVENT_CLICK_CLEAR, + action () { clear = true; self._dataChange = true; self.setValue(); self._defaultState(); - } + }, } ], itemsCreator: o.itemsCreator, - onLoaded: function () { - BI.nextTick(function () { + onLoaded () { + nextTick(() => { self.numberCounter.adjustView(); self.trigger.getSearcher().adjustView(); }); @@ -136,49 +169,51 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { }, isNeedAdjustWidth: o.isNeedAdjustWidth, value: { value: o.value || {} }, - hideChecker: function (e) { - return triggerBtn.element.find(e.target).length === 0 && - self.numberCounter.element.find(e.target).length === 0; - } + hideChecker (e) { + return ( + triggerBtn.element.find(e.target).length === 0 && + self.numberCounter.element.find(e.target).length === 0 + ); + }, }); var change = false; - var clear = false; // 标识当前是否点击了清空 + var clear = false; // 标识当前是否点击了清空 - var isSearching = function () { + const isSearching = function () { return self.trigger.getSearcher().isSearching(); }; - var isPopupView = function () { + const isPopupView = function () { return self.combo.isViewVisible(); }; - this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () { - self.fireEvent(BI.MultiTreeInsertCombo.EVENT_FOCUS); + this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => { + self.fireEvent(MultiTreeInsertCombo.EVENT_FOCUS); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () { - self.fireEvent(BI.MultiTreeInsertCombo.EVENT_BLUR); + this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => { + self.fireEvent(MultiTreeInsertCombo.EVENT_BLUR); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { + this.trigger.on(MultiSelectTrigger.EVENT_START, function () { self.storeValue = { value: self.combo.getValue() }; this.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { + this.trigger.on(MultiSelectTrigger.EVENT_STOP, function () { self.storeValue = { value: this.getValue() }; self.combo.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); - BI.nextTick(function () { + nextTick(() => { if (isPopupView()) { self.combo.populate(); } }); - self.fireEvent(BI.MultiTreeInsertCombo.EVENT_STOP); + self.fireEvent(MultiTreeInsertCombo.EVENT_STOP); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function () { - self.fireEvent(BI.MultiTreeInsertCombo.EVENT_SEARCHING); + this.trigger.on(MultiSelectTrigger.EVENT_SEARCHING, () => { + self.fireEvent(MultiTreeInsertCombo.EVENT_SEARCHING); }); function showCounter() { @@ -191,23 +226,28 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { self.numberCounter.setValue(self.storeValue); } - this.trigger.on(BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK, function () { + this.trigger.on(MultiSelectTrigger.EVENT_TRIGGER_CLICK, () => { self.combo.toggle(); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function () { - var checked = this.getSearcher().hasChecked(); - var val = { + this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function () { + const checked = this.getSearcher().hasChecked(); + const val = { type: BI.Selection.Multi, - value: checked ? { 1: 1 } : {} + value: checked ? { 1: 1 } : {}, }; - this.getSearcher().setState(checked ? BI.Selection.Multi : BI.Selection.None); + this.getSearcher().setState( + checked ? BI.Selection.Multi : BI.Selection.None + ); self.numberCounter.setButtonChecked(val); - self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CLICK_ITEM, self.combo.getValue()); + self.fireEvent( + MultiTreeInsertCombo.EVENT_CLICK_ITEM, + self.combo.getValue() + ); self._dataChange = true; }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () { if (isSearching()) { return; } @@ -221,12 +261,13 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { self.combo.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); self.populate(); - self.fireEvent(BI.MultiTreeInsertCombo.EVENT_BEFORE_POPUPVIEW); + self.fireEvent(MultiTreeInsertCombo.EVENT_BEFORE_POPUPVIEW); }); - this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, () => { if (isSearching()) { self._stopEditing(); - self._dataChange && self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiTreeInsertCombo.EVENT_CONFIRM); } else { if (isPopupView()) { self._stopEditing(); @@ -234,20 +275,21 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { if (clear === true) { self.storeValue = { value: {} }; } - self._dataChange && self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiTreeInsertCombo.EVENT_CONFIRM); } } clear = false; change = false; }); - var triggerBtn = BI.createWidget({ - type: "bi.trigger_icon_button", + var triggerBtn = createWidget({ + type: TriggerIconButton.xtype, width: o.height, height: o.height, - cls: "multi-select-trigger-icon-button" + cls: "multi-select-trigger-icon-button", }); - triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { self.numberCounter.hideView(); if (self.combo.isViewVisible()) { self.combo.hideView(); @@ -256,13 +298,13 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { } }); - this.numberCounter = BI.createWidget({ + this.numberCounter = createWidget({ type: "bi.multi_select_check_selected_switcher", el: { - type: "bi.multi_tree_check_selected_button" + type: "bi.multi_tree_check_selected_button", }, popup: { - type: "bi.multi_tree_check_pane" + type: "bi.multi_tree_check_pane", }, itemsCreator: o.itemsCreator, masker: { @@ -274,43 +316,56 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { }, }, valueFormatter: o.valueFormatter, - value: o.value + value: o.value, }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, + () => { + if (!self.combo.isViewVisible()) { + self.combo.showView(); + } } - }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { - if (want2showCounter === false) { - want2showCounter = true; + ); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, + () => { + if (want2showCounter === false) { + want2showCounter = true; + } + if (isInit === true) { + want2showCounter = null; + showCounter(); + } } - if (isInit === true) { - want2showCounter = null; - showCounter(); + ); + + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, + () => { + nextTick(() => { + // 收起时自动调整宽度 + self.trigger.refreshPlaceHolderWidth(0); + }); } - }); - - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { - BI.nextTick(function () {// 收起时自动调整宽度 - self.trigger.refreshPlaceHolderWidth(0); - }); - }); - - this.numberCounter.on(BI.Events.VIEW, function (b) { - BI.nextTick(function () {// 自动调整宽度 - self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0)); + ); + + this.numberCounter.on(Events.VIEW, b => { + nextTick(() => { + // 自动调整宽度 + self.trigger.refreshPlaceHolderWidth( + b === true ? self.numberCounter.element.outerWidth() + 8 : 0 + ); }); }); - this.trigger.element.click(function (e) { + this.trigger.element.click(e => { if (self.trigger.element.find(e.target).length > 0) { self.numberCounter.hideView(); } }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, items: [ { @@ -318,89 +373,81 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { left: 0, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: triggerBtn, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: { - type: "bi.vertical_adapt", - items: [this.numberCounter] + type: VerticalAdaptLayout.xtype, + items: [this.numberCounter], }, right: o.height, top: 0, height: o.height, } - ] + ], }); - }, + } - _assertShowValue: function () { + _assertShowValue() { this.trigger.getSearcher().setState(this.storeValue); this.numberCounter.setButtonChecked(this.storeValue); - }, + } - _stopEditing: function () { + _stopEditing() { this.trigger.stopEditing(); this.numberCounter.hideView(); - }, + } - _defaultState: function () { + _defaultState() { this._stopEditing(); this.combo.hideView(); - }, + } - getSearcher: function () { + getSearcher() { return this.trigger.getSearcher(); - }, + } - showView: function () { + showView() { this.combo.showView(); - }, + } - hideView: function () { + hideView() { this.combo.hideView(); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue.value = v || {}; this.combo.setValue({ - value: v || {} + value: v || {}, }); this.numberCounter.setValue({ - value: v || {} + value: v || {}, }); - }, + } - getValue: function () { - return BI.deepClone(this.storeValue.value); - }, + getValue() { + return deepClone(this.storeValue.value); + } - populate: function () { + populate() { this.combo.populate(); - }, + } - focus: function () { + focus() { this.trigger.focus(); - }, + } - blur: function () { + blur() { this.trigger.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.trigger.setWaterMark(v); } -}); - -BI.MultiTreeInsertCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiTreeInsertCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiTreeInsertCombo.EVENT_STOP = "EVENT_STOP"; -BI.MultiTreeInsertCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.MultiTreeInsertCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiTreeInsertCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.MultiTreeInsertCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; - -BI.shortcut("bi.multi_tree_insert_combo", BI.MultiTreeInsertCombo); +} diff --git a/src/widget/multitree/multi.tree.list.combo.js b/src/widget/multitree/multi.tree.list.combo.js index a3a016179..3d6e6d269 100644 --- a/src/widget/multitree/multi.tree.list.combo.js +++ b/src/widget/multitree/multi.tree.list.combo.js @@ -1,38 +1,68 @@ -/** - * 选中节点不影响父子节点状态的下拉树 - * @class BI.MultiTreeListCombo - * @extends BI.Single - */ - -BI.MultiTreeListCombo = BI.inherit(BI.Single, { - _defaultConfig: function () { - return BI.extend(BI.MultiTreeListCombo.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + createWidget, + toPix, + nextTick, + Events, + AbsoluteLayout, + VerticalAdaptLayout, + deepClone +} from "@/core"; +import { Single, Combo } from "@/base"; +import { MultiTreeSearchInsertPane } from "trigger/multi.tree.search.insert.pane"; +import { MultiTreePopup } from "multi.tree.popup"; +import { MultiSelectTrigger } from "../multiselect/multiselect.trigger"; +import { + TriggerIconButton, + ListPartTree, + ListDisplayTree, + Listasynctree +} from "@/case"; +import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected"; + +@shortcut() +export class MultiTreeListCombo extends Single { + static xtype = "bi.multi_tree_list_combo"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-tree-list-combo", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, height: 24, allowEdit: true, allowInsertValue: true, isNeedAdjustWidth: true, text: "", }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.MultiTreeListCombo.superclass._init.apply(this, arguments); - var isInit = false; - var want2showCounter = false; + _init() { + const self = this, + o = this.options; + super._init(...arguments); + let isInit = false; + let want2showCounter = false; this.storeValue = { value: o.value || [] }; - this.trigger = BI.createWidget({ + this.trigger = createWidget({ type: "bi.multi_select_trigger", allowEdit: o.allowEdit, text: o.text, defaultText: o.defaultText, watermark: o.watermark, - height: BI.toPix(o.height, o.simple ? 1 : 2), + height: toPix(o.height, o.simple ? 1 : 2), valueFormatter: o.valueFormatter, masker: { offset: { @@ -46,96 +76,110 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, { type: "bi.multi_list_tree_searcher", itemsCreator: o.itemsCreator, popup: { - type: o.allowInsertValue ? "bi.multi_tree_search_insert_pane" : "bi.multi_tree_search_pane", + type: o.allowInsertValue + ? "bi.multi_tree_search_insert_pane" + : "bi.multi_tree_search_pane", el: { - type: "bi.list_part_tree" + type: ListPartTree.xtype, }, - listeners: [{ - eventName: BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, - action: function () { - self.storeValue.value.unshift([self.trigger.getSearcher().getKeyword()]); - self._assertShowValue(); - // setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了 - self.combo.setValue(self.storeValue); - self.numberCounter.setValue(self.storeValue); - self._stopEditing(); - self._dataChange = true; + listeners: [ + { + eventName: MultiTreeSearchInsertPane.EVENT_ADD_ITEM, + action () { + self.storeValue.value.unshift([ + self.trigger.getSearcher().getKeyword() + ]); + self._assertShowValue(); + // setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了 + self.combo.setValue(self.storeValue); + self.numberCounter.setValue(self.storeValue); + self._stopEditing(); + self._dataChange = true; + }, } - }] - } + ], + }, }, switcher: { el: { - type: "bi.multi_tree_check_selected_button" + type: "bi.multi_tree_check_selected_button", }, popup: { type: "bi.multi_tree_check_pane", el: { - type: "bi.list_display_tree" + type: ListDisplayTree.xtype, }, - itemsCreator: o.itemsCreator - } + itemsCreator: o.itemsCreator, + }, }, - value: this.storeValue + value: this.storeValue, }); - this.combo = BI.createWidget({ - type: "bi.combo", - cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), + this.combo = createWidget({ + type: Combo.xtype, + cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius", toggle: !o.allowEdit, container: o.container, el: this.trigger, adjustLength: 1, popup: { - type: "bi.multi_tree_popup_view", - ref: function () { + type: MultiTreePopup.xtype, + ref () { self.popup = this; self.trigger.setAdapter(this); self.numberCounter.setAdapter(this); }, el: { - type: "bi.list_async_tree" + type: Listasynctree.xtype, }, - listeners: [{ - eventName: BI.MultiTreePopup.EVENT_AFTERINIT, - action: function () { - self.numberCounter.adjustView(); - isInit = true; - if (want2showCounter === true) { - showCounter(); - } - } - }, { - eventName: BI.MultiTreePopup.EVENT_CHANGE, - action: function () { - change = true; - var val = { - type: BI.Selection.Multi, - value: this.hasChecked() ? this.getValue() : [] - }; - self.trigger.getSearcher().setState(val); - self.numberCounter.setButtonChecked(val); - self.storeValue = { value: self.combo.getValue() }; - self.fireEvent(BI.MultiTreeListCombo.EVENT_CLICK_ITEM, self.getValue()); - self._dataChange = true; - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM, - action: function () { - self.combo.hideView(); - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR, - action: function () { - clear = true; - self._dataChange = true; - self.setValue(); - self._defaultState(); + listeners: [ + { + eventName: MultiTreePopup.EVENT_AFTERINIT, + action () { + self.numberCounter.adjustView(); + isInit = true; + if (want2showCounter === true) { + showCounter(); + } + }, + }, + { + eventName: MultiTreePopup.EVENT_CHANGE, + action () { + change = true; + const val = { + type: BI.Selection.Multi, + value: this.hasChecked() ? this.getValue() : [], + }; + self.trigger.getSearcher().setState(val); + self.numberCounter.setButtonChecked(val); + self.storeValue = { value: self.combo.getValue() }; + self.fireEvent( + MultiTreeListCombo.EVENT_CLICK_ITEM, + self.getValue() + ); + self._dataChange = true; + }, + }, + { + eventName: MultiTreePopup.EVENT_CLICK_CONFIRM, + action () { + self.combo.hideView(); + }, + }, + { + eventName: MultiTreePopup.EVENT_CLICK_CLEAR, + action () { + clear = true; + self._dataChange = true; + self.setValue(); + self._defaultState(); + }, } - }], + ], itemsCreator: o.itemsCreator, - onLoaded: function () { - BI.nextTick(function () { + onLoaded () { + nextTick(() => { self.numberCounter.adjustView(); self.trigger.getSearcher().adjustView(); }); @@ -144,49 +188,51 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, { }, isNeedAdjustWidth: o.isNeedAdjustWidth, value: this.storeValue, - hideChecker: function (e) { - return triggerBtn.element.find(e.target).length === 0 && - self.numberCounter.element.find(e.target).length === 0; - } + hideChecker (e) { + return ( + triggerBtn.element.find(e.target).length === 0 && + self.numberCounter.element.find(e.target).length === 0 + ); + }, }); var change = false; - var clear = false; // 标识当前是否点击了清空 + var clear = false; // 标识当前是否点击了清空 - var isSearching = function () { + const isSearching = function () { return self.trigger.getSearcher().isSearching(); }; - var isPopupView = function () { + const isPopupView = function () { return self.combo.isViewVisible(); }; - this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () { - self.fireEvent(BI.MultiTreeListCombo.EVENT_FOCUS); + this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => { + self.fireEvent(MultiTreeListCombo.EVENT_FOCUS); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () { - self.fireEvent(BI.MultiTreeListCombo.EVENT_BLUR); + this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => { + self.fireEvent(MultiTreeListCombo.EVENT_BLUR); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { + this.trigger.on(MultiSelectTrigger.EVENT_START, function () { self.storeValue = { value: self.combo.getValue() }; this.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { + this.trigger.on(MultiSelectTrigger.EVENT_STOP, function () { self.storeValue = { value: this.getValue() }; self.combo.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); - BI.nextTick(function () { + nextTick(() => { if (isPopupView()) { self.combo.populate(); } }); - self.fireEvent(BI.MultiTreeListCombo.EVENT_STOP); + self.fireEvent(MultiTreeListCombo.EVENT_STOP); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function () { - self.fireEvent(BI.MultiTreeListCombo.EVENT_SEARCHING); + this.trigger.on(MultiSelectTrigger.EVENT_SEARCHING, () => { + self.fireEvent(MultiTreeListCombo.EVENT_SEARCHING); }); function showCounter() { @@ -199,23 +245,28 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, { self.numberCounter.setValue(self.storeValue); } - this.trigger.on(BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK, function () { + this.trigger.on(MultiSelectTrigger.EVENT_TRIGGER_CLICK, () => { self.combo.toggle(); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function () { - var checked = this.getSearcher().hasChecked(); - var val = { + this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function () { + const checked = this.getSearcher().hasChecked(); + const val = { type: BI.Selection.Multi, - value: checked ? { 1: 1 } : {} + value: checked ? { 1: 1 } : {}, }; - this.getSearcher().setState(checked ? BI.Selection.Multi : BI.Selection.None); + this.getSearcher().setState( + checked ? BI.Selection.Multi : BI.Selection.None + ); self.numberCounter.setButtonChecked(val); - self.fireEvent(BI.MultiTreeListCombo.EVENT_CLICK_ITEM, self.combo.getValue()); + self.fireEvent( + MultiTreeListCombo.EVENT_CLICK_ITEM, + self.combo.getValue() + ); self._dataChange = true; }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () { if (isSearching()) { return; } @@ -229,12 +280,13 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, { self.combo.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue); self.populate(); - self.fireEvent(BI.MultiTreeListCombo.EVENT_BEFORE_POPUPVIEW); + self.fireEvent(MultiTreeListCombo.EVENT_BEFORE_POPUPVIEW); }); - this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, () => { if (isSearching()) { self.trigger.stopEditing(); - self._dataChange && self.fireEvent(BI.MultiTreeListCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiTreeListCombo.EVENT_CONFIRM); } else { if (isPopupView()) { self._stopEditing(); @@ -242,20 +294,21 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, { if (clear === true) { self.storeValue = { value: [] }; } - self._dataChange && self.fireEvent(BI.MultiTreeListCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(MultiTreeListCombo.EVENT_CONFIRM); } } clear = false; change = false; }); - var triggerBtn = BI.createWidget({ - type: "bi.trigger_icon_button", + var triggerBtn = createWidget({ + type: TriggerIconButton.xtype, width: o.height, height: o.height, - cls: "multi-select-trigger-icon-button" + cls: "multi-select-trigger-icon-button", }); - triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { self.numberCounter.hideView(); if (self.combo.isViewVisible()) { self.combo.hideView(); @@ -264,13 +317,13 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, { } }); - this.numberCounter = BI.createWidget({ + this.numberCounter = createWidget({ type: "bi.multi_select_check_selected_switcher", el: { - type: "bi.multi_tree_check_selected_button" + type: "bi.multi_tree_check_selected_button", }, popup: { - type: "bi.multi_tree_check_pane" + type: "bi.multi_tree_check_pane", }, itemsCreator: o.itemsCreator, masker: { @@ -282,131 +335,138 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, { }, }, valueFormatter: o.valueFormatter, - value: o.value - }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); - } + value: o.value, }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { - if (want2showCounter === false) { - want2showCounter = true; + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, + () => { + if (!self.combo.isViewVisible()) { + self.combo.showView(); + } } - if (isInit === true) { - want2showCounter = null; - showCounter(); + ); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, + () => { + if (want2showCounter === false) { + want2showCounter = true; + } + if (isInit === true) { + want2showCounter = null; + showCounter(); + } } - }); - - this.numberCounter.on(BI.Events.VIEW, function (b) { - BI.nextTick(function () {// 自动调整宽度 - self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0)); + ); + + this.numberCounter.on(Events.VIEW, b => { + nextTick(() => { + // 自动调整宽度 + self.trigger.refreshPlaceHolderWidth( + b === true ? self.numberCounter.element.outerWidth() + 8 : 0 + ); }); }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { - BI.nextTick(function () {// 收起时自动调整宽度 - self.trigger.refreshPlaceHolderWidth(0); - }); - }); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, + () => { + nextTick(() => { + // 收起时自动调整宽度 + self.trigger.refreshPlaceHolderWidth(0); + }); + } + ); - this.trigger.element.click(function (e) { + this.trigger.element.click(e => { if (self.trigger.element.find(e.target).length > 0) { self.numberCounter.hideView(); } }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.combo, - left: 0, - right: 0, - top: 0, - bottom: 0 - }, { - el: triggerBtn, - right: 0, - top: 0, - bottom: 0 - }, { - el: { - type: "bi.vertical_adapt", - items: [this.numberCounter] + items: [ + { + el: this.combo, + left: 0, + right: 0, + top: 0, + bottom: 0, + }, + { + el: triggerBtn, + right: 0, + top: 0, + bottom: 0, }, - right: o.height, - top: 0, - height: o.height, - }] + { + el: { + type: VerticalAdaptLayout.xtype, + items: [this.numberCounter], + }, + right: o.height, + top: 0, + height: o.height, + } + ], }); - }, + } - _assertShowValue: function () { + _assertShowValue() { this.trigger.getSearcher().setState(this.storeValue); this.numberCounter.setButtonChecked(this.storeValue); - }, + } - _stopEditing: function () { + _stopEditing() { this.trigger.stopEditing(); this.numberCounter.hideView(); - }, + } - _defaultState: function () { + _defaultState() { this._stopEditing(); this.combo.hideView(); - }, + } - showView: function () { + showView() { this.combo.showView(); - }, + } - hideView: function () { + hideView() { this.combo.hideView(); - }, + } - getSearcher: function () { + getSearcher() { return this.trigger.getSearcher(); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue.value = v || []; this.combo.setValue({ - value: v || [] + value: v || [], }); this.numberCounter.setValue({ - value: v || [] + value: v || [], }); - }, + } - getValue: function () { - return BI.deepClone(this.storeValue.value); - }, + getValue() { + return deepClone(this.storeValue.value); + } - populate: function () { + populate() { this.combo.populate(); - }, + } - focus: function () { + focus() { this.trigger.focus(); - }, + } - blur: function () { + blur() { this.trigger.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.trigger.setWaterMark(v); } -}); - -BI.MultiTreeListCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiTreeListCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiTreeListCombo.EVENT_STOP = "EVENT_STOP"; -BI.MultiTreeListCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.MultiTreeListCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiTreeListCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.MultiTreeListCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; - -BI.shortcut("bi.multi_tree_list_combo", BI.MultiTreeListCombo); +} diff --git a/src/widget/multitree/multi.tree.popup.js b/src/widget/multitree/multi.tree.popup.js index 970c76cc6..aeb1ced3d 100644 --- a/src/widget/multitree/multi.tree.popup.js +++ b/src/widget/multitree/multi.tree.popup.js @@ -1,106 +1,108 @@ -/** - * 带加载的多选下拉面板 - * @class BI.MultiTreePopup - * @extends BI.Pane - */ -BI.MultiTreePopup = BI.inherit(BI.Pane, { - - _defaultConfig: function () { - return BI.extend(BI.MultiTreePopup.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, extend, emptyFn, createWidget, i18nText } from "@/core"; +import { Pane } from "@/base"; +import { Asynctree, MultiPopupView, TreeView } from "@/case"; + +@shortcut() +export class MultiTreePopup extends Pane { + static xtype = "bi.multi_tree_popup_view"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; + static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; + static EVENT_AFTERINIT = "EVENT_AFTERINIT"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-tree-popup", maxWidth: "auto", minWidth: 140, maxHeight: 400, - onLoaded: BI.emptyFn, + onLoaded: emptyFn, el: { - type: "bi.async_tree" - } + type: Asynctree.xtype, + }, }); - }, + } - _init: function () { - BI.MultiTreePopup.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, opts = this.options, v = opts.value; + const self = this, + opts = this.options, + v = opts.value; this.selectedValues = {}; - this.tree = BI.createWidget(opts.el, { - type: "bi.async_tree", + this.tree = createWidget(opts.el, { + type: Asynctree.xtype, showLine: opts.showLine, height: 400, cls: "popup-view-tree", itemsCreator: opts.itemsCreator, onLoaded: opts.onLoaded, - value: v.value || {} + value: v.value || {}, }); - this.popupView = BI.createWidget({ - type: "bi.multi_popup_view", + this.popupView = createWidget({ + type: MultiPopupView.xtype, element: this, stopPropagation: false, maxWidth: opts.maxWidth, minWidth: opts.minWidth, maxHeight: opts.maxHeight, - buttons: [BI.i18nText("BI-Basic_Clears"), BI.i18nText("BI-Basic_OK")], - el: this.tree + buttons: [i18nText("BI-Basic_Clears"), i18nText("BI-Basic_OK")], + el: this.tree, }); - this.popupView.on(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, function (index) { - switch (index) { + this.popupView.on( + MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, + index => { + switch (index) { case 0: - self.fireEvent(BI.MultiTreePopup.EVENT_CLICK_CLEAR); + self.fireEvent(MultiTreePopup.EVENT_CLICK_CLEAR); break; case 1: - self.fireEvent(BI.MultiTreePopup.EVENT_CLICK_CONFIRM); + self.fireEvent(MultiTreePopup.EVENT_CLICK_CONFIRM); break; + } } - }); + ); - this.tree.on(BI.TreeView.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiTreePopup.EVENT_CHANGE); + this.tree.on(TreeView.EVENT_CHANGE, () => { + self.fireEvent(MultiTreePopup.EVENT_CHANGE); }); - this.tree.on(BI.TreeView.EVENT_AFTERINIT, function () { - self.fireEvent(BI.MultiTreePopup.EVENT_AFTERINIT); + this.tree.on(TreeView.EVENT_AFTERINIT, () => { + self.fireEvent(MultiTreePopup.EVENT_AFTERINIT); }); + } - }, - - getValue: function () { + getValue() { return this.tree.getValue(); - }, + } - setValue: function (v) { + setValue(v) { v || (v = {}); this.tree.setSelectedValue(v.value); - }, + } - populate: function (config) { + populate(config) { this.tree.stroke(config); - }, + } - hasChecked: function () { + hasChecked() { return this.tree.hasChecked(); - }, + } - setDirection: function (direction, position) { + setDirection(direction, position) { this.popupView.setDirection(direction, position); - }, + } - resetHeight: function (h) { + resetHeight(h) { this.popupView.resetHeight(h); - }, + } - resetWidth: function (w) { + resetWidth(w) { this.popupView.resetWidth(w); } -}); - -BI.MultiTreePopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiTreePopup.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; -BI.MultiTreePopup.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; -BI.MultiTreePopup.EVENT_AFTERINIT = "EVENT_AFTERINIT"; - - -BI.shortcut("bi.multi_tree_popup_view", BI.MultiTreePopup); +} diff --git a/src/widget/multitree/trigger/multi.tree.button.checkselected.js b/src/widget/multitree/trigger/multi.tree.button.checkselected.js index 5efd65b2e..7c8e95444 100644 --- a/src/widget/multitree/trigger/multi.tree.button.checkselected.js +++ b/src/widget/multitree/trigger/multi.tree.button.checkselected.js @@ -1,67 +1,80 @@ -/** - * 查看已选按钮 - * Created by guy on 15/11/3. - * @class BI.MultiTreeCheckSelectedButton - * @extends BI.Single - */ -BI.MultiTreeCheckSelectedButton = BI.inherit(BI.Single, { +import { + shortcut, + extend, + emptyFn, + createWidget, + i18nText, + Controller, + size +} from "@/core"; +import { Single, TextButton, IconButton } from "@/base"; +import { MultiSelectCheckSelectedButton } from "../../multiselect/trigger/button.checkselected"; - _defaultConfig: function () { - return BI.extend(BI.MultiTreeCheckSelectedButton.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class MultiTreeCheckSelectedButton extends Single { + static xtype = "bi.multi_tree_check_selected_button"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-tree-check-selected-button", - itemsCreator: BI.emptyFn + itemsCreator: emptyFn, }); - }, + } - _init: function () { - BI.MultiTreeCheckSelectedButton.superclass._init.apply(this, arguments); - var self = this; - this.indicator = BI.createWidget({ - type: "bi.icon_button", + _init() { + super._init(...arguments); + const self = this; + this.indicator = createWidget({ + type: IconButton.xtype, cls: "check-font trigger-check-selected icon-size-12", width: 16, height: 16, - stopPropagation: true + stopPropagation: true, }); - this.checkSelected = BI.createWidget({ - type: "bi.text_button", + this.checkSelected = createWidget({ + type: TextButton.xtype, cls: "bi-high-light-background trigger-check-text", invisible: true, hgap: 4, - text: BI.i18nText("BI-Check_Selected"), + text: i18nText("BI-Check_Selected"), textAlign: "center", }); - this.checkSelected.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.checkSelected.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.checkSelected.on(BI.TextButton.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiSelectCheckSelectedButton.EVENT_CHANGE, arguments); + this.checkSelected.on(TextButton.EVENT_CHANGE, function () { + self.fireEvent( + MultiSelectCheckSelectedButton.EVENT_CHANGE, + arguments + ); }); - BI.createWidget({ + createWidget({ type: "bi.horizontal", element: this, - items: [this.indicator, this.checkSelected] + items: [this.indicator, this.checkSelected], }); - this.element.hover(function () { - self.indicator.setVisible(false); - self.checkSelected.setVisible(true); - }, function () { - self.indicator.setVisible(true); - self.checkSelected.setVisible(false); - }); + this.element.hover( + () => { + self.indicator.setVisible(false); + self.checkSelected.setVisible(true); + }, + () => { + self.indicator.setVisible(true); + self.checkSelected.setVisible(false); + } + ); this.setVisible(false); - }, + } - setValue: function (v) { + setValue(v) { v || (v = {}); - var show = BI.size(v.value) > 0; + const show = size(v.value) > 0; this.setVisible(show); } -}); - -BI.MultiTreeCheckSelectedButton.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_tree_check_selected_button", BI.MultiTreeCheckSelectedButton); +} diff --git a/src/widget/multitree/trigger/multi.tree.search.insert.pane.js b/src/widget/multitree/trigger/multi.tree.search.insert.pane.js index 345d8dab2..bb0a8f219 100644 --- a/src/widget/multitree/trigger/multi.tree.search.insert.pane.js +++ b/src/widget/multitree/trigger/multi.tree.search.insert.pane.js @@ -1,129 +1,148 @@ -/** - * - * 在搜索框中输入文本弹出的面板 - * @class BI.MultiTreeSearchInsertPane - * @extends BI.Pane - */ +import { + shortcut, + Widget, + i18nText, + extend, + Controller, + AbsoluteLayout, + isEmptyArray +} from "@/core"; +import { TreeView, PartTree } from "@/case"; +import { TextButton } from "@/base"; -BI.MultiTreeSearchInsertPane = BI.inherit(BI.Widget, { +@shortcut() +export class MultiTreeSearchInsertPane extends Widget { + static xtype = "bi.multi_tree_search_insert_pane"; - constants: { - height: 24, - }, - - props: { + props = { baseCls: "bi-multi-tree-search-insert-pane bi-card", - itemsCreator: BI.emptyFn, - keywordGetter: BI.emptyFn, - el: { - type: "bi.part_tree" - } - }, + el: { type: PartTree.xtype }, + }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; + static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; + static EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; + static EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; - render: function () { - var self = this, opts = this.options; + render() { + const self = this, + opts = this.options; return { - type: "bi.absolute", + type: AbsoluteLayout.xtype, items: [ { el: { - type: "bi.text_button", + type: TextButton.xtype, invisible: true, - ref: function (_ref) { + ref(_ref) { self.addTip = _ref; }, - text: BI.i18nText("BI-Basic_Click_To_Add_Text", ""), + text: i18nText("BI-Basic_Click_To_Add_Text", ""), height: this.constants.height, cls: "bi-high-light", - handler: function () { - self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, opts.keywordGetter()); - } + handler() { + self.fireEvent( + MultiTreeSearchInsertPane.EVENT_ADD_ITEM, + opts.keywordGetter() + ); + }, }, top: 5, left: 0, - right: 0 - }, { - el: BI.extend({ - type: "bi.part_tree", - tipText: BI.i18nText("BI-No_Select"), - itemsCreator: function (op, callback) { - op.keyword = opts.keywordGetter(); - opts.itemsCreator(op, function (res) { - callback(res); - self.setKeyword(opts.keywordGetter(), res.items); - }); - }, - ref: function (_ref) { - self.partTree = _ref; - }, - value: opts.value, - listeners: [ - { - eventName: BI.Controller.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - } - }, { - eventName: BI.TreeView.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_CHANGE); - } - }, { - eventName: BI.PartTree.EVENT_CLICK_TREE_NODE, - action: function () { - self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE); + right: 0, + }, + { + el: extend( + { + type: PartTree.xtype, + tipText: i18nText("BI-No_Select"), + itemsCreator(op, callback) { + op.keyword = opts.keywordGetter(); + opts.itemsCreator(op, res => { + callback(res); + self.setKeyword( + opts.keywordGetter(), + res.items + ); + }); + }, + ref(_ref) { + self.partTree = _ref; + }, + value: opts.value, + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action() { + self.fireEvent( + Controller.EVENT_CHANGE, + arguments + ); + }, + }, + { + eventName: TreeView.EVENT_CHANGE, + action() { + self.fireEvent( + MultiTreeSearchInsertPane.EVENT_CHANGE + ); + }, + }, + { + eventName: PartTree.EVENT_CLICK_TREE_NODE, + action() { + self.fireEvent( + MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE + ); + }, } - } - ] - }, opts.el), + ], + }, + opts.el + ), left: 0, top: 0, bottom: 0, - right: 0 + right: 0, } - ] + ], }; - }, + } - setKeyword: function (keyword, nodes) { - var isAddTipVisible = BI.isEmptyArray(nodes); + setKeyword(keyword, nodes) { + const isAddTipVisible = isEmptyArray(nodes); this.addTip.setVisible(isAddTipVisible); this.partTree.setVisible(!isAddTipVisible); - isAddTipVisible && this.addTip.setText(BI.i18nText("BI-Basic_Click_To_Add_Text", keyword)); - }, + isAddTipVisible && + this.addTip.setText( + i18nText("BI-Basic_Click_To_Add_Text", keyword) + ); + } - hasChecked: function () { + hasChecked() { return this.partTree.hasChecked(); - }, + } - setValue: function (v) { + setValue(v) { this.setSelectedValue(v.value); - }, + } - setSelectedValue: function (v) { + setSelectedValue(v) { v || (v = {}); this.partTree.setSelectedValue(v); - }, + } - getValue: function () { + getValue() { return this.partTree.getValue(); - }, + } - empty: function () { + empty() { this.partTree.empty(); - }, - - populate: function (op) { - this.partTree.stroke.apply(this.partTree, arguments); } -}); - -BI.MultiTreeSearchInsertPane.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiTreeSearchInsertPane.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; -BI.MultiTreeSearchInsertPane.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; -BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; -BI.MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; - -BI.shortcut("bi.multi_tree_search_insert_pane", BI.MultiTreeSearchInsertPane); + populate(op) { + this.partTree.stroke(...arguments); + } +} diff --git a/src/widget/multitree/trigger/multi.tree.search.pane.js b/src/widget/multitree/trigger/multi.tree.search.pane.js index 82c221d18..bfea3f11b 100644 --- a/src/widget/multitree/trigger/multi.tree.search.pane.js +++ b/src/widget/multitree/trigger/multi.tree.search.pane.js @@ -1,84 +1,84 @@ -/** - * - * 在搜索框中输入文本弹出的面板 - * @class BI.MultiTreeSearchPane - * @extends BI.Pane - */ +import { shortcut, extend, i18nText, Controller } from "@/core"; +import { Pane } from "@/base"; +import { TreeView, PartTree } from "@/case"; -BI.MultiTreeSearchPane = BI.inherit(BI.Pane, { +@shortcut() +export class MultiTreeSearchPane extends Pane { + static xtype = "bi.multi_tree_search_pane"; - props: { - baseCls: "bi-multi-tree-search-pane bi-card", - itemsCreator: BI.emptyFn, - keywordGetter: BI.emptyFn - }, + props = { baseCls: "bi-multi-tree-search-pane bi-card" }; - render: function () { - var self = this, opts = this.options; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; + static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; + static EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; - return BI.extend({ - type: "bi.part_tree", - element: this, - tipText: BI.i18nText("BI-No_Select"), - itemsCreator: function (op, callback) { - op.keyword = opts.keywordGetter(); - opts.itemsCreator(op, callback); - }, - value: opts.value, - listeners: [ - { - eventName: BI.Controller.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - } - }, { - eventName: BI.TreeView.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiTreeSearchPane.EVENT_CHANGE); - } - }, { - eventName: BI.PartTree.EVENT_CLICK_TREE_NODE, - action: function () { - self.fireEvent(BI.MultiTreeSearchPane.EVENT_CLICK_TREE_NODE); + render() { + const self = this, + opts = this.options; + + return extend( + { + type: PartTree.xtype, + element: this, + tipText: i18nText("BI-No_Select"), + itemsCreator(op, callback) { + op.keyword = opts.keywordGetter(); + opts.itemsCreator(op, callback); + }, + value: opts.value, + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action() { + self.fireEvent(Controller.EVENT_CHANGE, arguments); + }, + }, + { + eventName: TreeView.EVENT_CHANGE, + action() { + self.fireEvent(MultiTreeSearchPane.EVENT_CHANGE); + }, + }, + { + eventName: PartTree.EVENT_CLICK_TREE_NODE, + action() { + self.fireEvent( + MultiTreeSearchPane.EVENT_CLICK_TREE_NODE + ); + }, } - } - ], - ref: function (_ref) { - self.partTree = _ref; - } - }, opts.el); - }, + ], + ref(_ref) { + self.partTree = _ref; + }, + }, + opts.el + ); + } - hasChecked: function () { + hasChecked() { return this.partTree.hasChecked(); - }, + } - setValue: function (v) { + setValue(v) { this.setSelectedValue(v.value); - }, + } - setSelectedValue: function (v) { + setSelectedValue(v) { v || (v = {}); this.partTree.setSelectedValue(v); - }, + } - getValue: function () { + getValue() { return this.partTree.getValue(); - }, + } - empty: function () { + empty() { this.partTree.empty(); - }, - - populate: function (op) { - this.partTree.stroke.apply(this.partTree, arguments); } -}); -BI.MultiTreeSearchPane.EVENT_CHANGE = "EVENT_CHANGE"; - -BI.MultiTreeSearchPane.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; -BI.MultiTreeSearchPane.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; -BI.MultiTreeSearchPane.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; - -BI.shortcut("bi.multi_tree_search_pane", BI.MultiTreeSearchPane); + populate(op) { + this.partTree.stroke(...arguments); + } +} diff --git a/src/widget/multitree/trigger/searcher.list.multi.tree.js b/src/widget/multitree/trigger/searcher.list.multi.tree.js index 8c54afe63..0a853ca54 100644 --- a/src/widget/multitree/trigger/searcher.list.multi.tree.js +++ b/src/widget/multitree/trigger/searcher.list.multi.tree.js @@ -1,140 +1,168 @@ -/** - * searcher - * Created by guy on 15/11/3. - * @class BI.MultiListTreeSearcher - * @extends Widget - */ -BI.MultiListTreeSearcher = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.MultiListTreeSearcher.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + emptyFn, + createWidget, + isNotNull, + isNumber, + size, + each, + last +} from "@/core"; +import { MultiSelectEditor } from "../../multiselect/trigger/editor.multiselect"; +import { MultiSelectSearcher } from "../../multiselect/trigger/searcher.multiselect"; +import { Searcher } from "@/base"; +import { SimpleStateEditor } from "@/case"; +import { MultiTreeSearchPane } from "multi.tree.search.pane"; + +@shortcut() +export class MultiListTreeSearcher extends Widget { + static xtype = "bi.multi_list_tree_searcher"; + + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_START = "EVENT_START"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_PAUSE = "EVENT_PAUSE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-list-tree-searcher", - itemsCreator: BI.emptyFn, - valueFormatter: function (v) { + itemsCreator: emptyFn, + valueFormatter(v) { return v; }, popup: {}, adapter: null, - masker: {} + masker: {}, }); - }, + } - _init: function () { - BI.MultiListTreeSearcher.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget({ - type: "bi.multi_select_editor", + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.editor = createWidget({ + type: MultiSelectEditor.xtype, height: o.height, text: o.text, defaultText: o.defaultText, watermark: o.watermark, el: { - type: "bi.simple_state_editor", - height: o.height + type: SimpleStateEditor.xtype, + height: o.height, }, - listeners: [{ - eventName: BI.MultiSelectEditor.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_FOCUS); - } - }, { - eventName: BI.MultiSelectEditor.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_BLUR); + listeners: [ + { + eventName: MultiSelectEditor.EVENT_FOCUS, + action() { + self.fireEvent(MultiSelectSearcher.EVENT_FOCUS); + }, + }, + { + eventName: MultiSelectEditor.EVENT_BLUR, + action() { + self.fireEvent(MultiSelectSearcher.EVENT_BLUR); + }, } - }] + ], }); - this.searcher = BI.createWidget({ - type: "bi.searcher", + this.searcher = createWidget({ + type: Searcher.xtype, element: this, isAutoSearch: false, isAutoSync: false, - onSearch: function (op, callback) { + onSearch(op, callback) { callback({ - keyword: self.editor.getValue() + keyword: self.editor.getValue(), }); }, el: this.editor, - popup: BI.extend({ - type: "bi.multi_tree_search_pane", - keywordGetter: function () { - return self.editor.getValue(); + popup: extend( + { + type: MultiTreeSearchPane.xtype, + keywordGetter() { + return self.editor.getValue(); + }, + itemsCreator(op, callback) { + op.keyword = self.editor.getValue(); + o.itemsCreator(op, callback); + }, + value: o.value, }, - itemsCreator: function (op, callback) { - op.keyword = self.editor.getValue(); - o.itemsCreator(op, callback); - }, - value: o.value - }, o.popup), + o.popup + ), adapter: o.adapter, - masker: o.masker + masker: o.masker, }); - this.searcher.on(BI.Searcher.EVENT_START, function () { - self.fireEvent(BI.MultiListTreeSearcher.EVENT_START); + this.searcher.on(Searcher.EVENT_START, () => { + self.fireEvent(MultiListTreeSearcher.EVENT_START); }); - this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { - if (this.hasMatched()) { - - } - self.fireEvent(BI.MultiListTreeSearcher.EVENT_PAUSE); + this.searcher.on(Searcher.EVENT_PAUSE, () => { + self.fireEvent(MultiListTreeSearcher.EVENT_PAUSE); }); - this.searcher.on(BI.Searcher.EVENT_STOP, function () { - self.fireEvent(BI.MultiListTreeSearcher.EVENT_STOP); + this.searcher.on(Searcher.EVENT_STOP, () => { + self.fireEvent(MultiListTreeSearcher.EVENT_STOP); }); - this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiListTreeSearcher.EVENT_CHANGE, arguments); + this.searcher.on(Searcher.EVENT_CHANGE, function () { + self.fireEvent(MultiListTreeSearcher.EVENT_CHANGE, arguments); }); - if (BI.isNotNull(o.value)) { + if (isNotNull(o.value)) { this.setState(o.value); } - }, + } - adjustView: function () { + adjustView() { this.searcher.adjustView(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.searcher.setAdapter(adapter); - }, + } - isSearching: function () { + isSearching() { return this.searcher.isSearching(); - }, + } - stopSearch: function () { + stopSearch() { this.searcher.stopSearch(); - }, + } - getKeyword: function () { + getKeyword() { return this.editor.getValue(); - }, + } - hasMatched: function () { + hasMatched() { return this.searcher.hasMatched(); - }, + } - hasChecked: function () { + hasChecked() { return this.searcher.getView() && this.searcher.getView().hasChecked(); - }, + } - setState: function (ob) { - var o = this.options; + setState(ob) { + const o = this.options; ob || (ob = {}); ob.value || (ob.value = []); - var count = 0; - if (BI.isNumber(ob)) { + let count = 0; + if (isNumber(ob)) { this.editor.setState(ob); - } else if (BI.size(ob.value) === 0) { + } else if (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 += (path === "null" ? "" : (o.valueFormatter(childValue + "") || childValue) + "; "); + let text = ""; + each(ob.value, (idx, path) => { + const childValue = last(path); + text += + path === "null" + ? "" + : `${o.valueFormatter(`${childValue}`) || childValue + }; `; count++; }); @@ -144,45 +172,38 @@ BI.MultiListTreeSearcher = BI.inherit(BI.Widget, { this.editor.setState(text); } } - }, + } - getState: function () { + getState() { return this.editor.getState(); - }, + } - setValue: function (ob) { + setValue(ob) { this.setState(ob); this.searcher.setValue(ob); - }, + } - getKey: function () { + getKey() { return this.editor.getValue(); - }, + } - getValue: function () { + getValue() { return this.searcher.getValue(); - }, + } - populate: function (items) { - this.searcher.populate.apply(this.searcher, arguments); - }, + populate(items) { + this.searcher.populate(...arguments); + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.editor.setWaterMark(v); } -}); - -BI.MultiListTreeSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.MultiListTreeSearcher.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiListTreeSearcher.EVENT_START = "EVENT_START"; -BI.MultiListTreeSearcher.EVENT_STOP = "EVENT_STOP"; -BI.MultiListTreeSearcher.EVENT_PAUSE = "EVENT_PAUSE"; -BI.shortcut("bi.multi_list_tree_searcher", BI.MultiListTreeSearcher); +} diff --git a/src/widget/multitree/trigger/searcher.multi.tree.js b/src/widget/multitree/trigger/searcher.multi.tree.js index 1b2dc6983..8a10023ea 100644 --- a/src/widget/multitree/trigger/searcher.multi.tree.js +++ b/src/widget/multitree/trigger/searcher.multi.tree.js @@ -1,220 +1,260 @@ -/** - * searcher - * Created by guy on 15/11/3. - * @class BI.MultiTreeSearcher - * @extends Widget - */ -BI.MultiTreeSearcher = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.MultiTreeSearcher.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + emptyFn, + createWidget, + isNotNull, + isNumber, + size, + keys, + each, + isEmptyObject, Func +} from "@/core"; +import { MultiSelectEditor } from "../../multiselect/trigger/editor.multiselect"; +import { MultiSelectSearcher } from "../../multiselect/trigger/searcher.multiselect"; +import { MultiTreeSearchPane } from "multi.tree.search.pane"; +import { Searcher } from "@/base"; +import { SimpleStateEditor } from "@/case"; + +@shortcut() +export class MultiTreeSearcher extends Widget { + static xtype = "bi.multi_tree_searcher"; + + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_START = "EVENT_START"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-tree-searcher", - itemsCreator: BI.emptyFn, - valueFormatter: function (v) { + itemsCreator: emptyFn, + valueFormatter(v) { return v; }, popup: {}, adapter: null, - masker: {} + masker: {}, }); - }, + } - _init: function () { - BI.MultiTreeSearcher.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget({ + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.editor = createWidget({ type: "bi.multi_select_editor", watermark: o.watermark, height: o.height, el: { - type: "bi.simple_state_editor", + type: SimpleStateEditor.xtype, text: o.text, defaultText: o.defaultText, - height: o.height + height: o.height, }, listeners: [ { - eventName: BI.MultiSelectEditor.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_FOCUS); - } - }, { - eventName: BI.MultiSelectEditor.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_BLUR); - } + eventName: MultiSelectEditor.EVENT_FOCUS, + action() { + self.fireEvent(MultiSelectSearcher.EVENT_FOCUS); + }, + }, + { + eventName: MultiSelectEditor.EVENT_BLUR, + action() { + self.fireEvent(MultiSelectSearcher.EVENT_BLUR); + }, } - ] + ], }); - this.searcher = BI.createWidget({ - type: "bi.searcher", + this.searcher = createWidget({ + type: Searcher.xtype, element: this, isAutoSearch: false, isAutoSync: false, - onSearch: function (op, callback) { + onSearch(op, callback) { callback({ - keyword: self.editor.getValue() + keyword: self.editor.getValue(), }); }, el: this.editor, - popup: BI.extend({ - type: "bi.multi_tree_search_pane", - keywordGetter: function () { - return self.editor.getValue(); - }, - itemsCreator: function (op, callback) { - op.keyword = self.editor.getValue(); - o.itemsCreator(op, callback); - }, - listeners: [ - { - eventName: BI.MultiTreeSearchPane.EVENT_CLICK_TREE_NODE, - action: function () { - self.fireEvent(BI.MultiTreeSearcher.EVENT_CLICK_TREE_NODE, arguments); + popup: extend( + { + type: MultiTreeSearchPane.xtype, + keywordGetter() { + return self.editor.getValue(); + }, + itemsCreator(op, callback) { + op.keyword = self.editor.getValue(); + o.itemsCreator(op, callback); + }, + listeners: [ + { + eventName: + MultiTreeSearchPane.EVENT_CLICK_TREE_NODE, + action() { + self.fireEvent( + MultiTreeSearcher.EVENT_CLICK_TREE_NODE, + arguments + ); + }, } - } - ], - value: o.value - }, o.popup), + ], + value: o.value, + }, + o.popup + ), adapter: o.adapter, - masker: o.masker + masker: o.masker, }); - this.searcher.on(BI.Searcher.EVENT_START, function () { - self.fireEvent(BI.MultiTreeSearcher.EVENT_START); + this.searcher.on(Searcher.EVENT_START, () => { + self.fireEvent(MultiTreeSearcher.EVENT_START); }); - this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { - self.fireEvent(BI.MultiTreeSearcher.EVENT_PAUSE); + this.searcher.on(Searcher.EVENT_PAUSE, () => { + self.fireEvent(MultiTreeSearcher.EVENT_PAUSE); }); - this.searcher.on(BI.Searcher.EVENT_STOP, function () { - self.fireEvent(BI.MultiTreeSearcher.EVENT_STOP); + this.searcher.on(Searcher.EVENT_STOP, () => { + self.fireEvent(MultiTreeSearcher.EVENT_STOP); }); - this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiTreeSearcher.EVENT_CHANGE, arguments); + this.searcher.on(Searcher.EVENT_CHANGE, function () { + self.fireEvent(MultiTreeSearcher.EVENT_CHANGE, arguments); }); - this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () { - var keywords = this.getKeywords(); - self.fireEvent(BI.MultiTreeSearcher.EVENT_SEARCHING, keywords); + this.searcher.on(Searcher.EVENT_SEARCHING, function () { + const keywords = this.getKeywords(); + self.fireEvent(MultiTreeSearcher.EVENT_SEARCHING, keywords); }); - if (BI.isNotNull(o.value)) { + if (isNotNull(o.value)) { this.setState(o.value); } - }, + } - adjustView: function () { + adjustView() { this.searcher.adjustView(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.searcher.setAdapter(adapter); - }, + } - isSearching: function () { + isSearching() { return this.searcher.isSearching(); - }, + } - stopSearch: function () { + stopSearch() { this.searcher.stopSearch(); - }, + } - getKeyword: function () { + getKeyword() { return this.editor.getValue(); - }, + } - hasMatched: function () { + hasMatched() { return this.searcher.hasMatched(); - }, + } - hasChecked: function () { + hasChecked() { return this.searcher.getView() && this.searcher.getView().hasChecked(); - }, + } - setState: function (ob) { - var o = this.options; + setState(ob) { + const o = this.options; ob || (ob = {}); ob.value || (ob.value = {}); - var count = 0; - if (BI.isNumber(ob)) { + let count = 0; + if (isNumber(ob)) { this.editor.setState(ob); - } else if (BI.size(ob.value) === 0) { + } else if (size(ob.value) === 0) { this.editor.setState(BI.Selection.None); } else { - var text = ""; - var value = ob.value; - var names = BI.Func.getSortedResult(BI.keys(value)); - BI.each(names, function (idx, name) { - var childNodes = getChildrenNode(value[name]); - text += (name === "null" ? "" : (o.valueFormatter(name + "") || name)) + (childNodes === "" ? (BI.isEmptyObject(value[name]) ? "" : ":") : (":" + childNodes)) + "; "; + let text = ""; + const value = ob.value; + const names = BI.Func.getSortedResult(keys(value)); + each(names, (idx, name) => { + const childNodes = getChildrenNode(value[name]); + text += + `${(name === "null" + ? "" + : o.valueFormatter(`${name}`) || name) + + (childNodes === "" + ? isEmptyObject(value[name]) + ? "" + : ":" + : `:${childNodes}`) + }; `; if (childNodes === "") { count++; } }); if (count > 20) { - this.editor.setState(BI.Selection.Multi); + this.editor.setState(Selection.Multi); } else { this.editor.setState(text); } } function getChildrenNode(ob) { - var text = ""; - var index = 0, size = BI.size(ob); - var names = BI.Func.getSortedResult(BI.keys(ob)); - BI.each(names, function (idx, name) { + let text = ""; + const size = size(ob); + let index = 0; + + const names = Func.getSortedResult(keys(ob)); + each(names, (idx, name) => { index++; - var childNodes = getChildrenNode(ob[name]); - text += (name === "null" ? "" : (o.valueFormatter(name + "") || name)) + (childNodes === "" ? "" : (":" + childNodes)) + (index === size ? "" : ","); + const childNodes = getChildrenNode(ob[name]); + text += + (name === "null" + ? "" + : o.valueFormatter(`${name}`) || name) + + (childNodes === "" ? "" : `:${childNodes}`) + + (index === size ? "" : ","); if (childNodes === "") { count++; } }); + return text; } - }, + } - getState: function () { + getState() { return this.editor.getState(); - }, + } - setValue: function (ob) { + setValue(ob) { this.setState(ob); this.searcher.setValue(ob); - }, + } - getKey: function () { + getKey() { return this.editor.getValue(); - }, + } - getValue: function () { + getValue() { return this.searcher.getValue(); - }, + } - populate: function (items) { - this.searcher.populate.apply(this.searcher, arguments); - }, + populate(items) { + this.searcher.populate(...arguments); + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.editor.setWaterMark(v); } -}); - -BI.MultiTreeSearcher.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiTreeSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.MultiTreeSearcher.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiTreeSearcher.EVENT_START = "EVENT_START"; -BI.MultiTreeSearcher.EVENT_STOP = "EVENT_STOP"; -BI.MultiTreeSearcher.EVENT_PAUSE = "EVENT_PAUSE"; -BI.MultiTreeSearcher.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; -BI.shortcut("bi.multi_tree_searcher", BI.MultiTreeSearcher); +} diff --git a/src/widget/selecttree/nodes/node.first.plus.js b/src/widget/selecttree/nodes/node.first.plus.js index 378eac230..484128e4d 100644 --- a/src/widget/selecttree/nodes/node.first.plus.js +++ b/src/widget/selecttree/nodes/node.first.plus.js @@ -1,35 +1,48 @@ -/** - * 加号表示的组节点 - * Created by GUY on 2015/9/6. - * @class BI.SelectTreeFirstPlusGroupNode - * @extends BI.NodeButton - */ -BI.SelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.SelectTreeFirstPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-select-tree-first-plus-group-node bi-list-item-active", +import { + shortcut, + extend, + createWidget, + Controller, + Events, + isNotNull, LogicFactory, Direction +} from "@/core"; +import { NodeButton, Label } from "@/base"; +import { FirstTreeNodeCheckbox } from "@/case"; + +@shortcut() +export class SelectTreeFirstPlusGroupNode extends NodeButton { + static xtype = "bi.select_tree_first_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: + `${conf.baseCls || "" + } bi-select-tree-first-plus-group-node bi-list-item-active`, logic: { - dynamic: false + dynamic: false, }, id: "", pId: "", readonly: true, open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.SelectTreeFirstPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.checkbox = BI.createWidget({ - type: "bi.first_tree_node_checkbox", + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.checkbox = createWidget({ + type: FirstTreeNodeCheckbox.xtype, stopPropagation: true, iconHeight: o.height, - iconWidth: o.height + iconWidth: o.height, }); - this.text = BI.createWidget({ - type: "bi.label", + this.text = createWidget({ + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -38,10 +51,10 @@ BI.SelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, { text: o.text, value: o.value, keyword: o.keyword, - py: o.py + py: o.py, }); - this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) { + this.checkbox.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { if (this.isSelected()) { self.triggerExpand(); } else { @@ -49,40 +62,48 @@ BI.SelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, { } } }); - var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox - }, this.text); - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { - items: items - })))); - }, + const type = LogicFactory.createLogicTypeByDirection( + Direction.Left + ); + const items = LogicFactory.createLogicItemsByDirection( + Direction.Left, + { + width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + el: this.checkbox, + }, + this.text + ); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + type, + extend(o.logic, { + items, + }) + ) + ) + ); + } - isOnce: function () { + isOnce() { return true; - }, - - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + doRedMark() { + this.text.doRedMark(...arguments); + } - doClick: function () { - BI.NodeButton.superclass.doClick.apply(this, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - setOpened: function (v) { - BI.SelectTreeFirstPlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.checkbox)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.checkbox)) { this.checkbox.setSelected(v); } } -}); - -BI.shortcut("bi.select_tree_first_plus_group_node", BI.SelectTreeFirstPlusGroupNode); \ No newline at end of file +} diff --git a/src/widget/selecttree/nodes/node.last.plus.js b/src/widget/selecttree/nodes/node.last.plus.js index f8e764e10..572d66e55 100644 --- a/src/widget/selecttree/nodes/node.last.plus.js +++ b/src/widget/selecttree/nodes/node.last.plus.js @@ -1,35 +1,48 @@ -/** - * 加号表示的组节点 - * Created by GUY on 2015/9/6. - * @class BI.SelectTreeLastPlusGroupNode - * @extends BI.NodeButton - */ -BI.SelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.SelectTreeLastPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-select-tree-last-plus-group-node bi-list-item-active", +import { + shortcut, + extend, + createWidget, + Controller, + Events, + isNotNull, LogicFactory, Direction +} from "@/core"; +import { NodeButton, Label } from "@/base"; +import { LastTreeNodeCheckbox } from "@/case"; + +@shortcut() +export class SelectTreeLastPlusGroupNode extends NodeButton { + static xtype = "bi.select_tree_last_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: + `${conf.baseCls || "" + } bi-select-tree-last-plus-group-node bi-list-item-active`, logic: { - dynamic: false + dynamic: false, }, id: "", pId: "", readonly: true, open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.SelectTreeLastPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.checkbox = BI.createWidget({ - type: "bi.last_tree_node_checkbox", + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.checkbox = createWidget({ + type: LastTreeNodeCheckbox.xtype, stopPropagation: true, iconHeight: o.height, - iconWidth: o.height + iconWidth: o.height, }); - this.text = BI.createWidget({ - type: "bi.label", + this.text = createWidget({ + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -38,10 +51,10 @@ BI.SelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, { text: o.text, value: o.value, keyword: o.keyword, - py: o.py + py: o.py, }); - this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) { + this.checkbox.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { if (this.isSelected()) { self.triggerExpand(); } else { @@ -49,40 +62,48 @@ BI.SelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, { } } }); - var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox - }, this.text); - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { - items: items - })))); - }, + const type = LogicFactory.createLogicTypeByDirection( + Direction.Left + ); + const items = LogicFactory.createLogicItemsByDirection( + Direction.Left, + { + width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + el: this.checkbox, + }, + this.text + ); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + type, + extend(o.logic, { + items, + }) + ) + ) + ); + } - isOnce: function () { + isOnce() { return true; - }, - - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + doRedMark() { + this.text.doRedMark(...arguments); + } - doClick: function () { - BI.NodeButton.superclass.doClick.apply(this, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - setOpened: function (v) { - BI.SelectTreeLastPlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.checkbox)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.checkbox)) { this.checkbox.setSelected(v); } } -}); - -BI.shortcut("bi.select_tree_last_plus_group_node", BI.SelectTreeLastPlusGroupNode); \ No newline at end of file +} diff --git a/src/widget/selecttree/nodes/node.mid.plus.js b/src/widget/selecttree/nodes/node.mid.plus.js index ddafe5704..670533dd5 100644 --- a/src/widget/selecttree/nodes/node.mid.plus.js +++ b/src/widget/selecttree/nodes/node.mid.plus.js @@ -1,35 +1,48 @@ -/** - * 加号表示的组节点 - * Created by GUY on 2015/9/6. - * @class BI.SelectTreeMidPlusGroupNode - * @extends BI.NodeButton - */ -BI.SelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.SelectTreeMidPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-select-tree-mid-plus-group-node bi-list-item-active", +import { + shortcut, + extend, + createWidget, + Controller, + Events, + isNotNull, Direction, LogicFactory +} from "@/core"; +import { NodeButton, Label } from "@/base"; +import { MidTreeNodeCheckbox } from "@/case"; + +@shortcut() +export class SelectTreeMidPlusGroupNode extends NodeButton { + static xtype = "bi.select_tree_mid_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: + `${conf.baseCls || "" + } bi-select-tree-mid-plus-group-node bi-list-item-active`, logic: { - dynamic: false + dynamic: false, }, id: "", pId: "", readonly: true, open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.SelectTreeMidPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.checkbox = BI.createWidget({ - type: "bi.mid_tree_node_checkbox", + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.checkbox = createWidget({ + type: MidTreeNodeCheckbox.xtype, stopPropagation: true, iconHeight: o.height, - iconWidth: o.height + iconWidth: o.height, }); - this.text = BI.createWidget({ - type: "bi.label", + this.text = createWidget({ + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -38,10 +51,10 @@ BI.SelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, { text: o.text, value: o.value, keyword: o.keyword, - py: o.py + py: o.py, }); - this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) { + this.checkbox.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { if (this.isSelected()) { self.triggerExpand(); } else { @@ -49,40 +62,48 @@ BI.SelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, { } } }); - var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox - }, this.text); - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { - items: items - })))); - }, + const type = LogicFactory.createLogicTypeByDirection( + Direction.Left + ); + const items = LogicFactory.createLogicItemsByDirection( + Direction.Left, + { + width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + el: this.checkbox, + }, + this.text + ); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + type, + extend(o.logic, { + items, + }) + ) + ) + ); + } - isOnce: function () { + isOnce() { return true; - }, - - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + doRedMark() { + this.text.doRedMark(...arguments); + } - doClick: function () { - BI.NodeButton.superclass.doClick.apply(this, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - setOpened: function (v) { - BI.SelectTreeMidPlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.checkbox)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.checkbox)) { this.checkbox.setSelected(v); } } -}); - -BI.shortcut("bi.select_tree_mid_plus_group_node", BI.SelectTreeMidPlusGroupNode); \ No newline at end of file +} diff --git a/src/widget/selecttree/nodes/node.plus.js b/src/widget/selecttree/nodes/node.plus.js index d5cd39c66..e3e41de7f 100644 --- a/src/widget/selecttree/nodes/node.plus.js +++ b/src/widget/selecttree/nodes/node.plus.js @@ -1,35 +1,48 @@ -/** - * 加号表示的组节点 - * Created by GUY on 2015/9/6. - * @class BI.SelectTreePlusGroupNode - * @extends BI.NodeButton - */ -BI.SelectTreePlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.SelectTreePlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-select-tree-plus-group-node bi-list-item-active", +import { + shortcut, + extend, + createWidget, + Controller, + Events, + isNotNull, LogicFactory +} from "@/core"; +import { NodeButton, Label } from "@/base"; +import { TreeNodeCheckbox } from "@/case"; + +@shortcut() +export class SelectTreePlusGroupNode extends NodeButton { + static xtype = "bi.select_tree_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: + `${conf.baseCls || "" + } bi-select-tree-plus-group-node bi-list-item-active`, logic: { - dynamic: false + dynamic: false, }, id: "", pId: "", readonly: true, open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.SelectTreePlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.checkbox = BI.createWidget({ - type: "bi.tree_node_checkbox", + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.checkbox = createWidget({ + type: TreeNodeCheckbox.xtype, stopPropagation: true, iconHeight: o.height, - iconWidth: o.iconWrapperWidth || o.height + iconWidth: o.iconWrapperWidth || o.height, }); - this.text = BI.createWidget({ - type: "bi.label", + this.text = createWidget({ + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -38,10 +51,10 @@ BI.SelectTreePlusGroupNode = BI.inherit(BI.NodeButton, { text: o.text, value: o.value, keyword: o.keyword, - py: o.py + py: o.py, }); - this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) { + this.checkbox.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { if (this.isSelected()) { self.triggerExpand(); } else { @@ -49,40 +62,48 @@ BI.SelectTreePlusGroupNode = BI.inherit(BI.NodeButton, { } } }); - var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: 24, - el: this.checkbox - }, this.text); - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { - items: items - })))); - }, + const type = LogicFactory.createLogicTypeByDirection( + BI.Direction.Left + ); + const items = LogicFactory.createLogicItemsByDirection( + BI.Direction.Left, + { + width: 24, + el: this.checkbox, + }, + this.text + ); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + type, + extend(o.logic, { + items, + }) + ) + ) + ); + } - isOnce: function () { + isOnce() { return true; - }, - - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + doRedMark() { + this.text.doRedMark(...arguments); + } - doClick: function () { - BI.NodeButton.superclass.doClick.apply(this, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - setOpened: function (v) { - BI.SelectTreePlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.checkbox)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.checkbox)) { this.checkbox.setSelected(v); } } -}); - -BI.shortcut("bi.select_tree_plus_group_node", BI.SelectTreePlusGroupNode); \ No newline at end of file +} diff --git a/src/widget/selecttree/selecttree.combo.js b/src/widget/selecttree/selecttree.combo.js index 5095c120d..4e80f3c3b 100644 --- a/src/widget/selecttree/selecttree.combo.js +++ b/src/widget/selecttree/selecttree.combo.js @@ -1,11 +1,32 @@ /** - * @class BI.SelectTreeCombo - * @extends BI.Widget + * @class SelectTreeCombo + * @extends Widget */ -BI.SelectTreeCombo = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.SelectTreeCombo.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + extend, + createWidget, + Controller, + contains, + isArray, + toPix, + isKey, + isEmptyArray, + isEmptyString, + find, + isNull +} from "@/core"; +import { Combo } from "@/base"; +import { SingleTreeTrigger } from "@/widget/singletree/singletree.trigger"; +import { SelectTreePopup } from "./selecttree.popup"; + +@shortcut() +export class SelectTreeCombo extends Widget { + static xtype = "bi.select_tree_combo"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-select-tree-combo bi-border bi-border-radius", height: 24, text: "", @@ -13,70 +34,68 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, { value: "", allowClear: false, }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.SelectTreeCombo.superclass._init.apply(this, arguments); + _init() { + const self = this, o = this.options; + super._init(...arguments); - this.trigger = BI.createWidget({ - type: "bi.single_tree_trigger", + this.trigger = createWidget({ + type: SingleTreeTrigger.xtype, text: o.text, - height: BI.toPix(o.height, 2), + height: toPix(o.height, 2), items: o.items, value: o.value, allowClear: o.allowClear, warningTitle: o.warningTitle, }); - this.trigger.on(BI.SingleTreeTrigger.EVENT_CLEAR, function () { - self._clear(); + this.trigger.on(SingleTreeTrigger.EVENT_CLEAR, () => { + this._clear(); }); - this.popup = BI.createWidget({ - type: "bi.select_level_tree", + this.popup = createWidget({ + type: SelectTreePopup.xtype, items: o.items, - value: o.value + value: o.value, }); - this.combo = BI.createWidget({ - type: "bi.combo", - width: BI.toPix(o.width, 2), - height: BI.toPix(o.height, 2), + this.combo = createWidget({ + type: Combo.xtype, + width: toPix(o.width, 2), + height: toPix(o.height, 2), container: o.container, element: this, adjustLength: 2, el: this.trigger, popup: { - el: this.popup - } + el: this.popup, + }, }); - this.combo.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.combo.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.popup.on(BI.SingleTreePopup.EVENT_CHANGE, function () { + this.popup.on(SelectTreePopup.EVENT_CHANGE, () => { self.setValue(self.popup.getValue()); self.combo.hideView(); }); - if (BI.isKey(o.value)) { + if (isKey(o.value)) { this._checkError(o.value); } - }, + } - _checkError: function (v) { - if (BI.isNull(v) || BI.isEmptyArray(v) || BI.isEmptyString(v)) { + _checkError(v) { + if (isNull(v) || isEmptyArray(v) || isEmptyString(v)) { this.trigger.options.tipType = "success"; this.trigger.element.removeClass("error"); this.element.removeClass("error"); } else { - v = BI.isArray(v) ? v : [v]; - var result = BI.find(this.options.items, function (idx, item) { - return BI.contains(v, item.value); - }); - if (BI.isNull(result)) { + v = isArray(v) ? v : [v]; + const result = find(this.options.items, (idx, item) => contains(v, item.value)); + if (isNull(result)) { this.trigger.setTipType("warning"); this.element.removeClass("error").addClass("error"); this.trigger.element.removeClass("error").addClass("error"); @@ -86,27 +105,24 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, { this.element.removeClass("error"); } } - }, + } - _clear: function () { + _clear() { this.setValue([]); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.trigger.setValue(v); this.popup.setValue(v); this._checkError(v); - }, + } - getValue: function () { + getValue() { return this.popup.getValue(); - }, + } - populate: function (items) { + populate(items) { this.combo.populate(items); } -}); - - -BI.shortcut("bi.select_tree_combo", BI.SelectTreeCombo); +} diff --git a/src/widget/selecttree/selecttree.expander.js b/src/widget/selecttree/selecttree.expander.js index b708e4bb9..9220d8811 100644 --- a/src/widget/selecttree/selecttree.expander.js +++ b/src/widget/selecttree/selecttree.expander.js @@ -1,77 +1,86 @@ -/** - * @class BI.SelectTreeExpander - * @extends BI.Widget - */ -BI.SelectTreeExpander = BI.inherit(BI.Widget, { +import { + shortcut, + Widget, + extend, + createWidget, + Controller, + Events, + contains +} from "@/core"; +import { Expander } from "@/base"; - _defaultConfig: function () { - return BI.extend(BI.SelectTreeExpander.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class SelectTreeExpander extends Widget { + static xtype = "bi.select_tree_expander"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-select-tree-expander", trigger: "", toggle: true, direction: "bottom", isDefaultInit: true, el: {}, - popup: {} + popup: {}, }); - }, + } - _init: function () { - BI.SelectTreeExpander.superclass._init.apply(this, arguments); - var self = this, o = this.options; + _init() { + super._init(...arguments); + const self = this, + o = this.options; - this.trigger = BI.createWidget(o.el); - this.trigger.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) { + this.trigger = createWidget(o.el); + this.trigger.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { if (this.isSelected()) { self.expander.setValue([]); } } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.expander = BI.createWidget({ - type: "bi.expander", + this.expander = createWidget({ + type: Expander.xtype, element: this, trigger: o.trigger, toggle: o.toggle, direction: o.direction, isDefaultInit: o.isDefaultInit, el: this.trigger, - popup: o.popup + popup: o.popup, }); - this.expander.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) { + this.expander.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { self.trigger.setSelected(false); } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - }, + } - getAllLeaves: function () { + getAllLeaves() { return this.expander.getAllLeaves(); - }, + } - setValue: function (v) { - if (BI.contains(v, this.trigger.getValue())) { + setValue(v) { + if (contains(v, this.trigger.getValue())) { this.trigger.setSelected(true); this.expander.setValue([]); } else { this.trigger.setSelected(false); this.expander.setValue(v); } - }, + } - getValue: function () { + getValue() { if (this.trigger.isSelected()) { return [this.trigger.getValue()]; } + return this.expander.getValue(); - }, + } - populate: function (items) { + populate(items) { this.expander.populate(items); } -}); - -BI.shortcut("bi.select_tree_expander", BI.SelectTreeExpander); \ No newline at end of file +} diff --git a/src/widget/selecttree/selecttree.popup.js b/src/widget/selecttree/selecttree.popup.js index cfce060ef..b9ea1e2e2 100644 --- a/src/widget/selecttree/selecttree.popup.js +++ b/src/widget/selecttree/selecttree.popup.js @@ -1,94 +1,109 @@ -/** - * @class BI.SelectTreePopup - * @extends BI.Pane - */ - -BI.SelectTreePopup = BI.inherit(BI.Pane, { - - _defaultConfig: function () { - return BI.extend(BI.SelectTreePopup.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + i18nText, + each, + createWidget, + Controller, + isArray, isNotEmptyArray, UUID, defaults, Tree, VerticalLayout +} from "@/core"; +import { Pane } from "@/base"; +import { BasicTreeItem, BasicTreeNode, LevelTree, TreeExpander } from "@/case"; + +@shortcut() +export class SelectTreePopup extends Pane { + static xtype = "bi.select_level_tree"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-select-level-tree", - tipText: BI.i18nText("BI-No_Selected_Item"), + tipText: i18nText("BI-No_Selected_Item"), items: [], - value: "" + value: "", }); - }, + } - _formatItems: function (nodes, layer, pNode) { - var self = this; - BI.each(nodes, function (i, node) { - var extend = { - layer: layer, + _formatItems(nodes, layer, pNode) { + const self = this; + each(nodes, (i, node) => { + const extend = { + layer, isFirstNode: i === 0, isLastNode: i === nodes.length - 1, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - pNode: pNode, + pNode, }; - node.id = node.id || BI.UUID(); - - if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) { - - extend.type = "bi.tree_node"; + node.id = node.id || UUID(); + + if ( + node.isParent === true || + node.parent === true || + isNotEmptyArray(node.children) + ) { + extend.type = BasicTreeNode.xtype; extend.selectable = true; - BI.defaults(node, extend); + defaults(node, extend); self._formatItems(node.children, layer + 1, node); } else { - extend.type = "bi.tree_item"; - BI.defaults(node, extend); + extend.type = BasicTreeItem.xtype; + defaults(node, extend); } }); + return nodes; - }, + } - _init: function () { - BI.SelectTreePopup.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, o = this.options; + const self = this, + o = this.options; - this.tree = BI.createWidget({ - type: "bi.level_tree", + this.tree = createWidget({ + type: LevelTree.xtype, expander: { - type: "bi.tree_expander", + type: TreeExpander.xtype, // isDefaultInit: true, selectable: true, }, - items: this._formatItems(BI.Tree.transformToTreeFormat(o.items), 0), + items: this._formatItems(Tree.transformToTreeFormat(o.items), 0), value: o.value, - chooseType: BI.Selection.Single + chooseType: Selection.Single, }); - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, element: this, vgap: 5, - items: [this.tree] + items: [this.tree], }); - this.tree.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.tree.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.tree.on(BI.LevelTree.EVENT_CHANGE, function () { - self.fireEvent(BI.SelectTreePopup.EVENT_CHANGE); + this.tree.on(LevelTree.EVENT_CHANGE, () => { + self.fireEvent(SelectTreePopup.EVENT_CHANGE); }); this.check(); - }, + } - getValue: function () { + getValue() { return this.tree.getValue(); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.tree.setValue(v); - }, - - populate: function (items) { - BI.SelectTreePopup.superclass.populate.apply(this, arguments); - this.tree.populate(this._formatItems(BI.Tree.transformToTreeFormat(items))); } -}); -BI.SelectTreePopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.select_level_tree", BI.SelectTreePopup); + populate(items) { + super.populate(...arguments); + this.tree.populate( + this._formatItems(Tree.transformToTreeFormat(items)) + ); + } +} diff --git a/src/widget/singletree/singletree.combo.js b/src/widget/singletree/singletree.combo.js index 589c205c6..cfa92ea91 100644 --- a/src/widget/singletree/singletree.combo.js +++ b/src/widget/singletree/singletree.combo.js @@ -1,12 +1,35 @@ -/** - * @class BI.SingleTreeCombo - * @extends BI.Widget - */ -BI.SingleTreeCombo = BI.inherit(BI.Widget, { - - _defaultConfig: function (config) { - return BI.extend(BI.SingleTreeCombo.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-single-tree-combo " + (config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), +import { + shortcut, + Widget, + extend, + createWidget, + toPix, + Controller, + isKey, + isNull, + isEmptyArray, + isEmptyString, + isArray, + contains, find +} from "@/core"; +import { Combo } from "@/base"; +import { SingleTreeTrigger } from "./singletree.trigger"; +import { SingleTreePopup } from "./singletree.popup"; + +@shortcut() +export class SingleTreeCombo extends Widget { + static xtype = "bi.single_tree_combo"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + + _defaultConfig(config) { + return extend(super._defaultConfig(...arguments), { + baseCls: + `bi-single-tree-combo ${ + config.simple + ? "bi-border-bottom" + : "bi-border bi-border-radius"}`, trigger: {}, height: 24, text: "", @@ -14,75 +37,79 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, { value: "", allowClear: false, }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.SingleTreeCombo.superclass._init.apply(this, arguments); + _init() { + const self = this, + o = this.options; + super._init(...arguments); - this.trigger = BI.createWidget(BI.extend({ - type: "bi.single_tree_trigger", - text: o.text, - defaultText: o.defaultText, - height: BI.toPix(o.height, 2), - items: o.items, - value: o.value, - allowClear: o.allowClear, - warningTitle: o.warningTitle, - }, o.trigger)); + this.trigger = createWidget( + extend( + { + type: SingleTreeTrigger.xtype, + text: o.text, + defaultText: o.defaultText, + height: toPix(o.height, 2), + items: o.items, + value: o.value, + allowClear: o.allowClear, + warningTitle: o.warningTitle, + }, + o.trigger + ) + ); - this.trigger.on(BI.SingleTreeTrigger.EVENT_CLEAR, function () { + this.trigger.on(SingleTreeTrigger.EVENT_CLEAR, () => { self._clear(); }); - this.popup = BI.createWidget({ - type: "bi.single_level_tree", + this.popup = createWidget({ + type: SingleTreePopup.xtype, items: o.items, - value: o.value + value: o.value, }); - this.combo = BI.createWidget({ - type: "bi.combo", - width: BI.toPix(o.width, 2), - height: BI.toPix(o.height, 2), + this.combo = createWidget({ + type: Combo.xtype, + width: toPix(o.width, 2), + height: toPix(o.height, 2), container: o.container, element: this, adjustLength: 2, el: this.trigger, popup: { - el: this.popup - } + el: this.popup, + }, }); - this.combo.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.combo.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { - self.fireEvent(BI.SingleTreeCombo.EVENT_BEFORE_POPUPVIEW, arguments); + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () { + self.fireEvent(SingleTreeCombo.EVENT_BEFORE_POPUPVIEW, arguments); }); - this.popup.on(BI.SingleTreePopup.EVENT_CHANGE, function () { + this.popup.on(SingleTreePopup.EVENT_CHANGE, () => { self.setValue(self.popup.getValue()); self.combo.hideView(); - self.fireEvent(BI.SingleTreeCombo.EVENT_CHANGE); + self.fireEvent(SingleTreeCombo.EVENT_CHANGE); }); - if (BI.isKey(o.value)) { + if (isKey(o.value)) { this._checkError(o.value); } - }, + } - _checkError: function (v) { - if (BI.isNull(v) || BI.isEmptyArray(v) || BI.isEmptyString(v)) { + _checkError(v) { + if (isNull(v) || isEmptyArray(v) || isEmptyString(v)) { this.trigger.options.tipType = "success"; this.trigger.element.removeClass("error"); this.element.removeClass("error"); } else { - v = BI.isArray(v) ? v : [v]; - var result = BI.find(this.options.items, function (idx, item) { - return BI.contains(v, item.value); - }); - if (BI.isNull(result)) { + v = isArray(v) ? v : [v]; + const result = find(this.options.items, (idx, item) => contains(v, item.value)); + if (isNull(result)) { this.trigger.setTipType("warning"); this.element.removeClass("error").addClass("error"); this.trigger.element.removeClass("error").addClass("error"); @@ -92,28 +119,24 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, { this.element.removeClass("error"); } } - }, + } - _clear: function () { + _clear() { this.setValue([]); - }, + } - populate: function (items) { + populate(items) { this.combo.populate(items); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.trigger.setValue(v); this.popup.setValue(v); this._checkError(v); - }, + } - getValue: function () { + getValue() { return this.popup.getValue(); } -}); - -BI.SingleTreeCombo.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SingleTreeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.shortcut("bi.single_tree_combo", BI.SingleTreeCombo); +} diff --git a/src/widget/singletree/singletree.popup.js b/src/widget/singletree/singletree.popup.js index 6a73680af..7e4b6899d 100644 --- a/src/widget/singletree/singletree.popup.js +++ b/src/widget/singletree/singletree.popup.js @@ -1,66 +1,74 @@ -/** - * @class BI.SingleTreePopup - * @extends BI.Pane - */ +import { + shortcut, + extend, + i18nText, + createWidget, + Controller, + isArray, VerticalLayout +} from "@/core"; +import { Pane } from "@/base"; +import { LevelTree } from "@/case"; -BI.SingleTreePopup = BI.inherit(BI.Pane, { +@shortcut() +export class SingleTreePopup extends Pane { + static xtype = "bi.single_level_tree"; - _defaultConfig: function () { - return BI.extend(BI.SingleTreePopup.superclass._defaultConfig.apply(this, arguments), { + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-level-tree", - tipText: BI.i18nText("BI-No_Selected_Item"), + tipText: i18nText("BI-No_Selected_Item"), items: [], - value: "" + value: "", }); - }, + } - _init: function () { - BI.SingleTreePopup.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, o = this.options; - - this.tree = BI.createWidget({ + const self = this, + o = this.options; + + this.tree = createWidget({ type: "bi.level_tree", expander: { - isDefaultInit: true + isDefaultInit: true, }, items: o.items, value: o.value, - chooseType: BI.Selection.Single + chooseType: Selection.Single, }); - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, element: this, vgap: 5, - items: [this.tree] + items: [this.tree], }); - this.tree.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.tree.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.tree.on(BI.LevelTree.EVENT_CHANGE, function () { - self.fireEvent(BI.SingleTreePopup.EVENT_CHANGE); + this.tree.on(LevelTree.EVENT_CHANGE, () => { + self.fireEvent(SingleTreePopup.EVENT_CHANGE); }); this.check(); - }, + } - getValue: function () { + getValue() { return this.tree.getValue(); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.tree.setValue(v); - }, + } - populate: function (items) { - BI.SingleTreePopup.superclass.populate.apply(this, arguments); + populate(items) { + super.populate(...arguments); this.tree.populate(items); } -}); - -BI.SingleTreePopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_level_tree", BI.SingleTreePopup); \ No newline at end of file +} diff --git a/src/widget/singletree/singletree.trigger.js b/src/widget/singletree/singletree.trigger.js index 221c8b069..a328a147c 100644 --- a/src/widget/singletree/singletree.trigger.js +++ b/src/widget/singletree/singletree.trigger.js @@ -1,29 +1,41 @@ -/** - * @class BI.SingleTreeTrigger - * @extends BI.Trigger - */ +import { + shortcut, + extend, + emptyFn, + createWidget, + contains, + isArray, + some +} from "@/core"; +import { Trigger } from "@/base"; +import { SelectTextTrigger } from "@/case"; -BI.SingleTreeTrigger = BI.inherit(BI.Trigger, { +@shortcut() +export class SingleTreeTrigger extends Trigger { + static xtype = "bi.single_tree_trigger"; - _defaultConfig: function () { - return BI.extend(BI.SingleTreeTrigger.superclass._defaultConfig.apply(this, arguments), { + static EVENT_CLEAR = "EVENT_CLEAR"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-tree-trigger", height: 24, text: "", items: [], value: "", allowClear: false, - valueFormatter: BI.emptyFn, + valueFormatter: emptyFn, }); - }, + } - _init: function () { - BI.SingleTreeTrigger.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, o = this.options; + const self = this, + o = this.options; - this.trigger = BI.createWidget({ - type: "bi.select_text_trigger", + this.trigger = createWidget({ + type: SelectTextTrigger.xtype, element: this, text: o.text, defaultText: o.defaultText, @@ -36,50 +48,47 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, { valueFormatter: o.valueFormatter, listeners: [ { - eventName: BI.SelectTextTrigger.EVENT_CLEAR, - action: function () { - self.fireEvent(BI.SingleTreeTrigger.EVENT_CLEAR); - } + eventName: SelectTextTrigger.EVENT_CLEAR, + action() { + self.fireEvent(SingleTreeTrigger.EVENT_CLEAR); + }, } - ] + ], }); - }, + } + + _checkTitle() { + const val = this.getValue(); + some(this.options.items, (i, item) => { + if (contains(val, item.value)) { + this.trigger.setTitle(item.text || item.value); - _checkTitle: function () { - var self = this, val = this.getValue(); - BI.any(this.options.items, function (i, item) { - if (BI.contains(val, item.value)) { - self.trigger.setTitle(item.text || item.value); return true; } }); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.options.value = v; this.trigger.setValue(v); this._checkTitle(); - }, + } - setTipType: function (v) { + setTipType(v) { this.options.tipType = v; this.trigger.setTipType(v); - }, + } - getValue: function () { + getValue() { return this.options.value || []; - }, + } - getTextor: function () { + getTextor() { return this.trigger.getTextor(); - }, + } - populate: function (items) { + populate(items) { this.trigger.populate(items); } - -}); - -BI.SingleTreeTrigger.EVENT_CLEAR = "EVENT_CLEAR"; -BI.shortcut("bi.single_tree_trigger", BI.SingleTreeTrigger); +}