KERNEL-14086 feat: widget/singletree、selecttree

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;

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

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

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

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

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

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() {}
+}

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

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

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

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

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

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() {
+    }
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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