diff --git a/.eslintrc b/.eslintrc index a2c317000..427a7b32b 100644 --- a/.eslintrc +++ b/.eslintrc @@ -36,7 +36,8 @@ "no-var": 2, "prefer-const": 2, "indent": ["error", 4], - "no-use-before-define": 0 + "no-use-before-define": 0, + "eqeqeq": 0 } }, { "files": ["webpack/*.js", "./*.js", "lib/**/*.js", "lib/*.js", "./bin/*.js", "./bin/**/*.js"], diff --git a/src/widget/index.js b/src/widget/index.js index 84e8b6e4f..e7d24f493 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -20,6 +20,8 @@ import { NumberInterval } from "./numberinterval/numberinterval"; import * as multiselect from "./multiselect"; import * as multiselectlist from "./multiselectlist"; import * as singleselect from "./singleselect"; +import * as multilayerdownlist from "./multilayerdownlist"; +import * as multilayersingletree from "./multilayersingletree"; Object.assign(BI, { Collapse, @@ -44,6 +46,8 @@ Object.assign(BI, { ...multiselect, ...multiselectlist, ...singleselect, + ...multilayerdownlist, + ...multilayersingletree, }); export * from "./date/calendar"; @@ -60,6 +64,8 @@ export * from "./downlist"; export * from "./singleslider"; export * from "./intervalslider"; export * from "./singleselect"; +export * from "./multilayerdownlist"; +export * from "./multilayersingletree"; export { Collapse, diff --git a/src/widget/multilayerdownlist/combo.downlist.js b/src/widget/multilayerdownlist/combo.downlist.js index e2e333827..281e2fc0f 100644 --- a/src/widget/multilayerdownlist/combo.downlist.js +++ b/src/widget/multilayerdownlist/combo.downlist.js @@ -1,9 +1,18 @@ -/** - * Created by roy on 15/8/14. - */ -BI.MultiLayerDownListCombo = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.MultiLayerDownListCombo.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, createWidget } from "@/core"; +import { MultiLayerDownListPopup } from "./popup.downlist"; +import { Combo } from "@/base"; +import { IconTrigger } from "@/case"; + +@shortcut() +export class MultiLayerDownListCombo extends Widget { + static xtype = "bi.multi_layer_down_list_combo"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multilayer-down-list-combo", height: 24, items: [], @@ -12,79 +21,74 @@ BI.MultiLayerDownListCombo = BI.inherit(BI.Widget, { trigger: "click", container: null, stopPropagation: false, - el: {} + el: {}, }); - }, + } - _init: function () { - BI.MultiLayerDownListCombo.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.popupview = BI.createWidget({ + _init() { + super._init(...arguments); + const o = this.options; + this.popupview = createWidget({ type: "bi.multi_layer_down_list_popup", items: o.items, chooseType: o.chooseType, - value: o.value + value: o.value, }); - this.popupview.on(BI.MultiLayerDownListPopup.EVENT_CHANGE, function (value) { - self.fireEvent(BI.MultiLayerDownListCombo.EVENT_CHANGE, value); - self.downlistcombo.hideView(); + this.popupview.on(MultiLayerDownListPopup.EVENT_CHANGE, value => { + this.fireEvent(MultiLayerDownListCombo.EVENT_CHANGE, value); + this.downlistcombo.hideView(); }); - this.popupview.on(BI.MultiLayerDownListPopup.EVENT_SON_VALUE_CHANGE, function (value, fatherValue) { - self.fireEvent(BI.MultiLayerDownListCombo.EVENT_SON_VALUE_CHANGE, value, fatherValue); - self.downlistcombo.hideView(); + this.popupview.on(MultiLayerDownListPopup.EVENT_SON_VALUE_CHANGE, (value, fatherValue) => { + this.fireEvent(MultiLayerDownListCombo.EVENT_SON_VALUE_CHANGE, value, fatherValue); + this.downlistcombo.hideView(); }); - - this.downlistcombo = BI.createWidget({ + this.downlistcombo = createWidget({ element: this, - type: "bi.combo", + type: Combo.xtype, trigger: o.trigger, isNeedAdjustWidth: false, container: o.container, adjustLength: o.adjustLength, direction: o.direction, stopPropagation: o.stopPropagation, - el: BI.createWidget(o.el, { - type: "bi.icon_trigger", + el: createWidget(o.el, { + type: IconTrigger.xtype, extraCls: o.iconCls ? o.iconCls : "pull-down-font", width: o.width, - height: o.height + height: o.height, }), popup: { el: this.popupview, stopPropagation: o.stopPropagation, - maxHeight: 1000 - } + maxHeight: 1000, + }, }); - this.downlistcombo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { - self.fireEvent(BI.MultiLayerDownListCombo.EVENT_BEFORE_POPUPVIEW); + this.downlistcombo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => { + this.fireEvent(MultiLayerDownListCombo.EVENT_BEFORE_POPUPVIEW); }); - }, + } - hideView: function () { + hideView() { this.downlistcombo.hideView(); - }, + } - showView: function (e) { + showView(e) { this.downlistcombo.showView(e); - }, + } - populate: function (items) { + populate(items) { this.popupview.populate(items); - }, + } - setValue: function (v) { + setValue(v) { this.popupview.setValue(v); - }, - getValue: function () { - return this.popupview.getValue(); } -}); -BI.MultiLayerDownListCombo.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiLayerDownListCombo.EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; -BI.MultiLayerDownListCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.shortcut("bi.multi_layer_down_list_combo", BI.MultiLayerDownListCombo); \ No newline at end of file + getValue() { + return this.popupview.getValue(); + } +} diff --git a/src/widget/multilayerdownlist/index.js b/src/widget/multilayerdownlist/index.js new file mode 100644 index 000000000..e73818700 --- /dev/null +++ b/src/widget/multilayerdownlist/index.js @@ -0,0 +1,2 @@ +export { MultiLayerDownListCombo } from "./combo.downlist"; +export { MultiLayerDownListPopup } from "./popup.downlist"; diff --git a/src/widget/multilayerdownlist/popup.downlist.js b/src/widget/multilayerdownlist/popup.downlist.js index 8fbacd285..b8abc5cf9 100644 --- a/src/widget/multilayerdownlist/popup.downlist.js +++ b/src/widget/multilayerdownlist/popup.downlist.js @@ -1,136 +1,173 @@ -/** - * Created by roy on 15/9/8. - * 处理popup中的item分组样式 - * 一个item分组中的成员大于一时，该分组设置为单选，并且默认状态第一个成员设置为已选择项 - */ -BI.MultiLayerDownListPopup = BI.inherit(BI.Pane, { - constants: { +import { + shortcut, + extend, + Selection, + createWidget, + createItems, + isNotNull, + contains, + each, + VerticalLayout, + isNotEmptyArray, + isEmpty, + Layout, + deepClone, + isArray, + isNotEmptyString, + some, + concat, + BlankSplitChar +} from "@/core"; +import { Pane, ButtonTree, ComboGroup } from "@/base"; +import { DownListGroup, DownListGroupItem, DownListItem } from "../downlist"; + +@shortcut() +export class MultiLayerDownListPopup extends Pane { + static xtype = "bi.multi_layer_down_list_popup"; + + constants = { nextIcon: "pull-right-e-font", height: 25, iconHeight: 12, iconWidth: 12, hgap: 0, vgap: 0, - border: 1 - }, - _defaultConfig: function () { - var conf = BI.MultiLayerDownListPopup.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { + border: 1, + }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { baseCls: "bi-down-list-popup", items: [], - chooseType: BI.Selection.Multi + chooseType: Selection.Multi, }); - }, - _init: function () { - BI.MultiLayerDownListPopup.superclass._init.apply(this, arguments); + } + + _init() { + super._init(...arguments); this.singleValues = []; this.childValueMap = {}; this.fatherValueMap = {}; this.items = []; - var self = this, o = this.options, children = this._createPopupItems(o.items); - this.popup = BI.createWidget({ - type: "bi.button_tree", - items: BI.createItems(children, - {}, { - adjustLength: -2 + const self = this, + o = this.options, + children = this._createPopupItems(o.items); + this.popup = createWidget({ + type: ButtonTree.xtype, + items: createItems( + children, + {}, + { + adjustLength: -2, } ), - layouts: [{ - type: "bi.vertical", - hgap: this.constants.hgap, - vgap: this.constants.vgap - }], + layouts: [ + { + type: VerticalLayout.xtype, + hgap: this.constants.hgap, + vgap: this.constants.vgap, + } + ], value: this._digest(o.value), - chooseType: o.chooseType + chooseType: o.chooseType, }); - this.popup.on(BI.ButtonTree.EVENT_CHANGE, function (value, object) { - var changedValue = value; - if (BI.isNotNull(self.childValueMap[value])) { + this.popup.on(ButtonTree.EVENT_CHANGE, (value, object) => { + let changedValue = value; + if (isNotNull(self.childValueMap[value])) { changedValue = self.childValueMap[value]; - var fatherValue = self.fatherValueMap[value]; - var fatherArrayValue = (fatherValue + "").split(BI.BlankSplitChar); - self.fireEvent(BI.MultiLayerDownListPopup.EVENT_SON_VALUE_CHANGE, changedValue, fatherArrayValue.length > 1 ? fatherArrayValue : fatherValue); + const fatherValue = self.fatherValueMap[value]; + const fatherArrayValue = (`${fatherValue}`).split(BlankSplitChar); + self.fireEvent( + MultiLayerDownListPopup.EVENT_SON_VALUE_CHANGE, + changedValue, + fatherArrayValue.length > 1 ? fatherArrayValue : fatherValue + ); } else { - self.fireEvent(BI.MultiLayerDownListPopup.EVENT_CHANGE, changedValue, object); + self.fireEvent(MultiLayerDownListPopup.EVENT_CHANGE, changedValue, object); } - - if (!BI.contains(self.singleValues, changedValue)) { - var item = self.getValue(); - var result = []; - BI.each(item, function (i, valueObject) { + if (!contains(self.singleValues, changedValue)) { + const item = self.getValue(); + const result = []; + each(item, (i, valueObject) => { if (valueObject.value != changedValue) { result.push(valueObject); } }); self.setValue(result); } - }); - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, element: this, items: [this.popup], - vgap: 5 + vgap: 5, }); + } - }, - _createPopupItems: function (items) { - var self = this, result = []; - BI.each(items, function (i, it) { - var item_done = { - type: "bi.down_list_group", - items: [] + _createPopupItems(items) { + const self = this, + result = []; + each(items, (i, it) => { + const item_done = { + type: DownListGroup.xtype, + items: [], }; - var storeItem = []; + const storeItem = []; - BI.each(it, function (i, sourceItem) { - var item = BI.extend({}, sourceItem); - if (BI.isNotEmptyArray(sourceItem.children) && !BI.isEmpty(sourceItem.el)) { - item.type = "bi.combo_group"; + each(it, (i, sourceItem) => { + const item = extend({}, sourceItem); + if (isNotEmptyArray(sourceItem.children) && !isEmpty(sourceItem.el)) { + item.type = ComboGroup.xtype; item.cls = "down-list-group"; item.trigger = "hover"; item.isNeedAdjustWidth = false; item.el = sourceItem.el; item.el.title = sourceItem.el.title || sourceItem.el.text; - item.el.type = "bi.down_list_group_item"; + item.el.type = DownListGroupItem.xtype; item.el.logic = { - dynamic: true + dynamic: true, }; item.el.height = sourceItem.el.height || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT; item.el.iconCls2 = self.constants.nextIcon; item.popup = { lgap: 1, el: { - type: "bi.button_tree", + type: ButtonTree.xtype, chooseType: 0, - layouts: [{ - type: "bi.vertical" - }] - + layouts: [ + { + type: VerticalLayout.xtype, + } + ], }, innerVgap: 5, maxHeight: 378, }; self._createChildren(item, sourceItem); } else { - item.type = sourceItem.type || "bi.down_list_item"; + item.type = sourceItem.type || DownListItem.xtype; item.title = sourceItem.title || sourceItem.text; item.textRgap = 10; item.isNeedAdjustWidth = false; item.logic = { - dynamic: true + dynamic: true, }; } - var el_done = {}; + const el_done = {}; el_done.el = item; item_done.items.push(el_done); storeItem.push(item); }); if (self._isGroup(item_done.items)) { - BI.each(item_done.items, function (i, item) { + each(item_done.items, (i, item) => { self.singleValues.push(item.el.value); }); } @@ -138,16 +175,17 @@ BI.MultiLayerDownListPopup = BI.inherit(BI.Pane, { result.push(item_done); self.items.push(storeItem); if (self._needSpliter(i, items.length)) { - var spliter_container = BI.createWidget({ - type: "bi.vertical", - items: [{ - el: { - type: "bi.layout", - cls: "bi-down-list-spliter bi-border-top cursor-pointer", - height: 0 + const spliter_container = createWidget({ + type: VerticalLayout.xtype, + items: [ + { + el: { + type: Layout.xtype, + cls: "bi-down-list-spliter bi-border-top cursor-pointer", + height: 0, + }, } - - }], + ], cls: "bi-down-list-spliter-container cursor-pointer", vgap: 5, hgap: 12, @@ -155,178 +193,180 @@ BI.MultiLayerDownListPopup = BI.inherit(BI.Pane, { result.push(spliter_container); } }); + return result; - }, + } - _createChildren: function (targetItem, sourceItem) { - var self = this; + _createChildren(targetItem, sourceItem) { + const self = this; this._formatEL(targetItem).el.childValues = []; targetItem.items = targetItem.children = []; - BI.each(sourceItem.children, function (i, child) { - var item = child.el ? BI.extend({}, child.el, {children: child.children}) : BI.extend({}, child); - var fatherValue = BI.deepClone(self._formatEL(targetItem).el.value); - var childValue = BI.deepClone(item.value); + each(sourceItem.children, (i, child) => { + const item = child.el ? extend({}, child.el, { children: child.children }) : extend({}, child); + const fatherValue = deepClone(self._formatEL(targetItem).el.value); + const childValue = deepClone(item.value); self.singleValues.push(item.value); - item.type = item.type || "bi.down_list_item"; + item.type = item.type || DownListItem.xtype; item.extraCls = " child-down-list-item"; item.title = item.title || item.text; item.textRgap = 10; item.isNeedAdjustWidth = false; item.logic = { - dynamic: true + dynamic: true, }; item.father = fatherValue; self.fatherValueMap[self._createChildValue(fatherValue, childValue)] = fatherValue; self.childValueMap[self._createChildValue(fatherValue, childValue)] = childValue; item.value = self._createChildValue(fatherValue, childValue); self._formatEL(targetItem).el.childValues.push(item.value); - if (BI.isNotEmptyArray(child.children)) { - item.type = "bi.down_list_group_item"; + if (isNotEmptyArray(child.children)) { + item.type = DownListGroupItem.xtype; item.iconCls2 = self.constants.nextIcon; item.height = child.height || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT; self._createChildren(item, child); } targetItem.items.push(item); }); - }, + } - _formatEL: function(obj) { + _formatEL(obj) { if (obj && obj.el) { return obj; } return { - el: obj + el: obj, }; - }, + } - _isGroup: function (i) { + _isGroup(i) { return i.length > 1; - }, + } - _needSpliter: function (i, itemLength) { + _needSpliter(i, itemLength) { return i < itemLength - 1; - }, + } - _createChildValue: function (fatherValue, childValue) { - var fValue = fatherValue; - if(BI.isArray(fatherValue)) { - fValue = fatherValue.join(BI.BlankSplitChar); + _createChildValue(fatherValue, childValue) { + let fValue = fatherValue; + if (isArray(fatherValue)) { + fValue = fatherValue.join(BlankSplitChar); } - return fValue + BI.BlankSplitChar + childValue; - }, + + return fValue + BlankSplitChar + childValue; + } - _digest: function (valueItem) { - var self = this; - var valueArray = []; - BI.each(valueItem, function (i, item) { - var value; - if (BI.isNotNull(item.childValue)) { - value = self._createChildValue(item.value, item.childValue); - } else { - value = item.value; - } - valueArray.push(value); + _digest(valueItem) { + const self = this; + const valueArray = []; + each(valueItem, (i, item) => { + let value; + if (isNotNull(item.childValue)) { + value = self._createChildValue(item.value, item.childValue); + } else { + value = item.value; } - ); + valueArray.push(value); + }); + return valueArray; - }, + } - _checkValues: function (values) { - var self = this, o = this.options; - var value = []; - BI.each(this.items, function (idx, itemGroup) { - BI.each(itemGroup, function (id, item) { - if(BI.isNotNull(item.children)) { - var childValues = getChildrenValue(item); - var v = joinValue(childValues, values[idx]); - if(BI.isNotEmptyString(v)) { + _checkValues(values) { + const value = []; + each(this.items, (idx, itemGroup) => { + each(itemGroup, (id, item) => { + if (isNotNull(item.children)) { + const childValues = getChildrenValue(item); + const v = joinValue(childValues, values[idx]); + if (isNotEmptyString(v)) { value.push(v); } - }else{ - if(item.value === values[idx][0]) { + } else { + if (item.value === values[idx][0]) { value.push(values[idx][0]); } } }); }); + return value; - function joinValue (sources, targets) { - var value = ""; - BI.some(sources, function (idx, s) { - return BI.some(targets, function (id, t) { - if(s === t) { - value = s; - return true; - } - }); - }); + function joinValue(sources, targets) { + let value = ""; + some(sources, (idx, s) => some(targets, (id, t) => { + if (s === t) { + value = s; + + return true; + } + })); + return value; } - function getChildrenValue (item) { - var children = []; - if(BI.isNotNull(item.children)) { - BI.each(item.children, function (idx, child) { - children = BI.concat(children, getChildrenValue(child)); + function getChildrenValue(item) { + let children = []; + if (isNotNull(item.children)) { + each(item.children, (idx, child) => { + children = concat(children, getChildrenValue(child)); }); } else { children.push(item.value); } + return children; } - }, + } - populate: function (items) { - BI.MultiLayerDownListPopup.superclass.populate.apply(this, arguments); - var self = this; + populate(items) { + super.populate(...arguments); + const self = this; self.childValueMap = {}; self.fatherValueMap = {}; self.singleValues = []; this.items = []; - var children = self._createPopupItems(items); - var popupItem = BI.createItems(children, - {}, { - adjustLength: -2 + const children = self._createPopupItems(items); + const popupItem = createItems( + children, + {}, + { + adjustLength: -2, } ); self.popup.populate(popupItem); - }, + } - setValue: function (valueItem) { + setValue(valueItem) { this.popup.setValue(this._digest(valueItem)); - }, + } - _getValue: function () { - var v = []; - BI.each(this.popup.getAllButtons(), function (i, item) { + _getValue() { + const v = []; + each(this.popup.getAllButtons(), (i, item) => { i % 2 === 0 && v.push(item.getValue()); }); + return v; - }, + } - getValue: function () { - var self = this, result = []; - var values = this._checkValues(this._getValue()); - BI.each(values, function (i, value) { - var valueItem = {}; - if (BI.isNotNull(self.childValueMap[value])) { - var fartherValue = self.fatherValueMap[value]; + getValue() { + const self = this, + result = []; + const values = this._checkValues(this._getValue()); + each(values, (i, value) => { + const valueItem = {}; + if (isNotNull(self.childValueMap[value])) { + const fartherValue = self.fatherValueMap[value]; valueItem.childValue = self.childValueMap[value]; - var fatherArrayValue = (fartherValue + "").split(BI.BlankSplitChar); + const fatherArrayValue = (`${fartherValue}`).split(BlankSplitChar); valueItem.value = fatherArrayValue.length > 1 ? fatherArrayValue : fartherValue; } else { valueItem.value = value; } result.push(valueItem); }); + return result; } - - -}); - -BI.MultiLayerDownListPopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiLayerDownListPopup.EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; -BI.shortcut("bi.multi_layer_down_list_popup", BI.MultiLayerDownListPopup); +} diff --git a/src/widget/multilayersingletree/index.js b/src/widget/multilayersingletree/index.js new file mode 100644 index 000000000..4098e74cc --- /dev/null +++ b/src/widget/multilayersingletree/index.js @@ -0,0 +1,7 @@ +export { MultiLayerSingleTreeCombo } from "./multilayersingletree.combo"; +export { MultiLayerSingleTreeInsertSearchPane } from "./multilayersingletree.insert.search.pane"; +export { MultiLayerSingleLevelTree } from "./multilayersingletree.leveltree"; +export { MultiLayerSingleTreePopup } from "./multilayersingletree.popup"; +export { MultiLayerSingleTreeTrigger } from "./multilayersingletree.trigger"; +export * from "./node"; +export * from "./treeitem"; diff --git a/src/widget/multilayersingletree/multilayersingletree.combo.js b/src/widget/multilayersingletree/multilayersingletree.combo.js index 4e26c1a0c..793d2364d 100644 --- a/src/widget/multilayersingletree/multilayersingletree.combo.js +++ b/src/widget/multilayersingletree/multilayersingletree.combo.js @@ -1,81 +1,105 @@ -/** - * 多层级下拉单选树 - * Created by GUY on 2016/1/26. - * - * @class BI.MultiLayerSingleTreeCombo - * @extends BI.Widget - */ -BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, { +import { shortcut, Widget, extend, emptyFn, isKey, toPix, AbsoluteLayout, nextTick, isArray } from "@/core"; +import { SingleTreeTrigger } from "../singletree/singletree.trigger"; +import { MultiLayerSingleTreePopup } from "./multilayersingletree.popup"; +import { Combo } from "@/base"; +import { MultiLayerSingleTreeTrigger } from "./multilayersingletree.trigger"; +import { TriggerIconButton } from "@/case"; - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleTreeCombo.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class MultiLayerSingleTreeCombo extends Widget { + static xtype = "bi.multilayer_single_tree_combo"; + + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multilayer-single-tree-combo", isDefaultInit: false, height: 24, text: "", defaultText: "", - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, items: [], allowEdit: false, allowSearchValue: false, allowInsertValue: false, isNeedAdjustWidth: true, }); - }, + } - render: function () { - var self = this, o = this.options; + render() { + const self = this, + o = this.options; - var cls = (o.simple ? "bi-border-bottom bi-focus-shadow " : "bi-border bi-border-radius bi-focus-shadow ") + (BI.isKey(o.status) ? ("status-" + o.status) : ""); + const cls = + (o.simple ? "bi-border-bottom bi-focus-shadow " : "bi-border bi-border-radius bi-focus-shadow ") + + (isKey(o.status) ? `status-${o.status}` : ""); - var baseConfig = this._getBaseConfig(); + const baseConfig = this._getBaseConfig(); if (o.allowEdit) { return { - type: "bi.absolute", - width: BI.toPix(o.width, 2), - height: BI.toPix(o.height, 2), + type: AbsoluteLayout.xtype, + width: toPix(o.width, 2), + height: toPix(o.height, 2), cls, items: [ { - el: BI.extend(baseConfig, this._getSearchConfig()), - top: 0, bottom: 0, right: 0, left: 0 - }, { - el: self._getTriggerIconButton(), - top: 0, bottom: 0, right: 0, + el: extend(baseConfig, this._getSearchConfig()), + top: 0, + bottom: 0, + right: 0, + left: 0, }, - ] + { + el: self._getTriggerIconButton(), + top: 0, + bottom: 0, + right: 0, + } + ], }; } - return BI.extend(baseConfig, { - width: BI.toPix(o.width, 2), - height: BI.toPix(o.height, 2), - el: { - type: "bi.single_tree_trigger", - ref: function (_ref) { - self.textTrigger = _ref; + return extend( + baseConfig, + { + width: toPix(o.width, 2), + height: toPix(o.height, 2), + el: { + type: SingleTreeTrigger.xtype, + ref (_ref) { + self.textTrigger = _ref; + }, + text: o.text, + defaultText: o.defaultText, + height: toPix(o.height, 2), + items: o.items, + value: o.value, + tipType: o.tipType, + warningTitle: o.warningTitle, + valueFormatter: o.valueFormatter, }, - text: o.text, - defaultText: o.defaultText, - height: BI.toPix(o.height, 2), - items: o.items, - value: o.value, - tipType: o.tipType, - warningTitle: o.warningTitle, - valueFormatter: o.valueFormatter, }, - }, { cls }); - }, + { cls } + ); + } - _getBaseConfig: function () { - var self = this, o = this.options; + _getBaseConfig() { + const self = this, + o = this.options; + return { - type: "bi.combo", + type: Combo.xtype, container: o.container, destroyWhenHide: o.destroyWhenHide, adjustLength: 2, - ref: function (_ref) { + ref (_ref) { self.combo = _ref; }, popup: { @@ -84,41 +108,47 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, { isDefaultInit: o.isDefaultInit, itemsCreator: o.itemsCreator, items: o.items, - ref: function (_ref) { + ref (_ref) { self.trigger && self.trigger.getSearcher().setAdapter(_ref); }, - listeners: [{ - eventName: BI.MultiLayerSingleTreePopup.EVENT_CHANGE, - action: function () { - self.setValue(this.getValue()); - self.combo.hideView(); - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_CHANGE); + listeners: [ + { + eventName: MultiLayerSingleTreePopup.EVENT_CHANGE, + action () { + self.setValue(this.getValue()); + self.combo.hideView(); + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_CHANGE); + }, } - }], - onLoaded: function () { - BI.nextTick(function () { + ], + onLoaded () { + nextTick(() => { self.combo.adjustWidth(); self.combo.adjustHeight(); }); - } + }, }, value: o.value, maxHeight: 400, maxWidth: o.isNeedAdjustWidth ? "auto" : 500, - minHeight: 240 + minHeight: 240, }, isNeedAdjustWidth: o.isNeedAdjustWidth, - listeners: [{ - eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW); + listeners: [ + { + eventName: Combo.EVENT_BEFORE_POPUPVIEW, + action () { + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW); + }, } - }] + ], }; - }, + } - _getSearchConfig: function () { - var self = this, o = this.options; + _getSearchConfig() { + const self = this, + o = this.options; + return { el: { type: "bi.multilayer_single_tree_trigger", @@ -126,154 +156,162 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, { allowInsertValue: o.allowInsertValue, allowSearchValue: o.allowSearchValue, cls: "multilayer-single-tree-trigger", - ref: function (_ref) { + ref (_ref) { self.trigger = _ref; }, watermark: o.watermark, items: o.items, itemsCreator: o.itemsCreator, valueFormatter: o.valueFormatter, - height: BI.toPix(o.height, 2), + height: toPix(o.height, 2), text: o.text, defaultText: o.defaultText, value: o.value, tipType: o.tipType, warningTitle: o.warningTitle, title: o.title, - listeners: [{ - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE, - action: function () { - self.setValue(this.getValue()); - self.combo.hideView(); - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_CHANGE); - } - }, { - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_FOCUS); - } - }, { - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BLUR); - } - }, { - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_SEARCHING, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_SEARCHING); - } - }, { - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_STOP, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_STOP); - } - }, { - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM, - action: function () { - var value = self.trigger.getSearcher().getKeyword(); - self.combo.setValue([value]); - self.combo.hideView(); - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_CHANGE); + listeners: [ + { + eventName: MultiLayerSingleTreeTrigger.EVENT_CHANGE, + action () { + self.setValue(this.getValue()); + self.combo.hideView(); + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_CHANGE); + }, + }, + { + eventName: MultiLayerSingleTreeTrigger.EVENT_FOCUS, + action () { + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_FOCUS); + }, + }, + { + eventName: MultiLayerSingleTreeTrigger.EVENT_BLUR, + action () { + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_BLUR); + }, + }, + { + eventName: MultiLayerSingleTreeTrigger.EVENT_SEARCHING, + action () { + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_SEARCHING); + }, + }, + { + eventName: MultiLayerSingleTreeTrigger.EVENT_STOP, + action () { + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_STOP); + }, + }, + { + eventName: MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM, + action () { + const value = self.trigger.getSearcher().getKeyword(); + self.combo.setValue([value]); + self.combo.hideView(); + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_CHANGE); + }, } - }] + ], }, toggle: !o.allowEdit, - hideChecker: function (e) { + hideChecker (e) { // 新增传配置container后对应hideChecker的修改 // IE11下，popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿 // 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页，所以 // 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪 - return (o.container && self.trigger.getSearcher().isSearching() && self.trigger.getSearcher().getView().element.find(e.target).length > 0) ? false : self.triggerBtn?.element.find(e.target).length === 0; + return o.container && + self.trigger.getSearcher().isSearching() && + self.trigger.getSearcher().getView().element.find(e.target).length > 0 + ? false + : self.triggerBtn?.element.find(e.target).length === 0; }, - listeners: [{ - eventName: BI.Combo.EVENT_AFTER_HIDEVIEW, - action: function () { - self.trigger.stopEditing(); - } - }, { - eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW); + listeners: [ + { + eventName: Combo.EVENT_AFTER_HIDEVIEW, + action () { + self.trigger.stopEditing(); + }, + }, + { + eventName: Combo.EVENT_BEFORE_POPUPVIEW, + action () { + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW); + }, } - }] + ], }; - }, + } - _getTriggerIconButton: function () { - var self = this, o = this.options; + _getTriggerIconButton() { + const self = this, + o = this.options; + return { - type: "bi.trigger_icon_button", + type: TriggerIconButton.xtype, cls: "bi-trigger trigger-icon-button", - ref: function (_ref) { + ref (_ref) { self.triggerBtn = _ref; }, - width: BI.toPix(o.height, 2), - height: BI.toPix(o.height, 2), + width: toPix(o.height, 2), + height: toPix(o.height, 2), listeners: [ { - eventName: BI.TriggerIconButton.EVENT_CHANGE, - action: function () { + eventName: TriggerIconButton.EVENT_CHANGE, + action () { if (self.combo.isViewVisible()) { self.combo.hideView(); } else { self.combo.showView(); } - } + }, } - ] + ], }; - }, + } - getSearcher: function () { + getSearcher() { return this.trigger ? this.trigger.getSearcher() : this.textTrigger.getTextor(); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.combo.setValue(v); - }, + } - getValue: function () { + getValue() { return this.combo.getValue(); - }, + } - setStatus: function (status) { - if (BI.isKey(this.options.status)) { - this.element.removeClass("status-" + this.options.status); + setStatus(status) { + if (isKey(this.options.status)) { + this.element.removeClass(`status-${this.options.status}`); } - this.element.addClass("status-" + status); + this.element.addClass(`status-${status}`); this.options.status = status; - }, + } - setTipType: function (v) { + setTipType(v) { this.trigger ? this.trigger.setTipType(v) : this.textTrigger.setTipType(v); - }, + } - populate: function (items) { + populate(items) { this.combo.populate(items); - }, + } - focus: function () { + focus() { this.trigger.focus(); - }, + } - blur: function () { + blur() { this.trigger.blur(); - }, + } - showView: function () { + showView() { this.combo.showView(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.trigger.setWaterMark(v); } -}); - -BI.MultiLayerSingleTreeCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiLayerSingleTreeCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiLayerSingleTreeCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiLayerSingleTreeCombo.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiLayerSingleTreeCombo.EVENT_STOP = "EVENT_STOP"; -BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.shortcut("bi.multilayer_single_tree_combo", BI.MultiLayerSingleTreeCombo); +} diff --git a/src/widget/multilayersingletree/multilayersingletree.insert.search.pane.js b/src/widget/multilayersingletree/multilayersingletree.insert.search.pane.js index 8e7fa06de..78b07ea5b 100644 --- a/src/widget/multilayersingletree/multilayersingletree.insert.search.pane.js +++ b/src/widget/multilayersingletree/multilayersingletree.insert.search.pane.js @@ -1,92 +1,110 @@ -/** - * Created by GUY on 2016/1/26. - * - * @class BI.MultiLayerSingleTreeInsertSearchPane - * @extends BI.Pane - */ +import { + shortcut, + Widget, + i18nText, + emptyFn, + createWidget, + Controller, + VerticalLayout, + isEmptyArray, + isArray +} from "@/core"; +import { MultiLayerSelectLevelTree } from "../multilayerselecttree/multilayerselecttree.leveltree"; +import { TextButton } from "@/base"; -BI.MultiLayerSingleTreeInsertSearchPane = BI.inherit(BI.Widget, { +@shortcut() +export class MultiLayerSingleTreeInsertSearchPane extends Widget { + static xtype = "bi.multilayer_single_tree_insert_search_pane"; - props: function() { + static EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; + static EVENT_CHANGE = "EVENT_CHANGE"; + + props() { return { baseCls: "bi-multilayer-single-tree-popup", - tipText: BI.i18nText("BI-No_Selected_Item"), + tipText: i18nText("BI-No_Selected_Item"), isDefaultInit: false, - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, items: [], - value: "" + value: "", }; - }, + } - render: function() { - var self = this, o = this.options; - this.tree = BI.createWidget({ + render() { + const o = this.options; + this.tree = createWidget({ type: "bi.multilayer_single_level_tree", isDefaultInit: o.isDefaultInit, items: o.items, - itemsCreator: o.itemsCreator === BI.emptyFn ? BI.emptyFn : function (op, callback) { - o.itemsCreator(op, function (res) { - callback(res); - self.setKeyword(o.keywordGetter()); - }); - }, + itemsCreator: + o.itemsCreator === emptyFn + ? emptyFn + : (op, callback) => { + o.itemsCreator(op, res => { + callback(res); + this.setKeyword(o.keywordGetter()); + }); + }, keywordGetter: o.keywordGetter, value: o.value, scrollable: null, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - } - }, { - eventName: BI.MultiLayerSelectLevelTree.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeInsertSearchPane.EVENT_CHANGE); + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action: (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); + }, + }, + { + eventName: MultiLayerSelectLevelTree.EVENT_CHANGE, + action: () => { + this.fireEvent(MultiLayerSingleTreeInsertSearchPane.EVENT_CHANGE); + }, } - }] + ], }); + return { - type: "bi.vertical", + type: VerticalLayout.xtype, scrolly: false, scrollable: true, vgap: 5, - items: [{ - type: "bi.text_button", - invisible: true, - text: BI.i18nText("BI-Basic_Click_To_Add_Text", ""), - height: 24, - cls: "bi-high-light", - hgap: 5, - ref: function (_ref) { - self.addNotMatchTip = _ref; + items: [ + { + type: TextButton.xtype, + invisible: true, + text: i18nText("BI-Basic_Click_To_Add_Text", ""), + height: 24, + cls: "bi-high-light", + hgap: 5, + ref: _ref => { + this.addNotMatchTip = _ref; + }, + handler: () => { + this.fireEvent(MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, o.keywordGetter()); + }, }, - handler: function () { - self.fireEvent(BI.MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, o.keywordGetter()); - } - }, this.tree] + this.tree + ], }; - }, + } - setKeyword: function (keyword) { - var showTip = BI.isEmptyArray(this.tree.getAllLeaves()); + setKeyword(keyword) { + const showTip = isEmptyArray(this.tree.getAllLeaves()); this.addNotMatchTip.setVisible(showTip); - showTip && this.addNotMatchTip.setText(BI.i18nText("BI-Basic_Click_To_Add_Text", keyword)); - }, + showTip && this.addNotMatchTip.setText(i18nText("BI-Basic_Click_To_Add_Text", keyword)); + } - 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) { + populate(items) { this.tree.populate(items); } -}); - -BI.MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; -BI.MultiLayerSingleTreeInsertSearchPane.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multilayer_single_tree_insert_search_pane", BI.MultiLayerSingleTreeInsertSearchPane); \ No newline at end of file +} diff --git a/src/widget/multilayersingletree/multilayersingletree.leveltree.js b/src/widget/multilayersingletree/multilayersingletree.leveltree.js index 8e14aa749..3e6a05433 100644 --- a/src/widget/multilayersingletree/multilayersingletree.leveltree.js +++ b/src/widget/multilayersingletree/multilayersingletree.leveltree.js @@ -1,170 +1,202 @@ -/** - * guy - * 二级树 - * @class BI.MultiLayerSingleLevelTree - * @extends BI.Single - */ -BI.MultiLayerSingleLevelTree = BI.inherit(BI.Pane, { - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleLevelTree.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + Selection, + each, + isKey, + UUID, + isNotEmptyArray, + defaults, + createWidget, + Tree, + nextTick, + Controller, + Events, + VerticalLayout, + AdaptiveLayout, + isNull, + isArray +} from "@/core"; +import { Pane, CustomTree, Loader, ButtonTree } from "@/base"; +import { BasicTreeNode, BasicTreeItem, TreeExpander } from "@/case"; + +@shortcut() +export class MultiLayerSingleLevelTree extends Pane { + static xtype = "bi.multilayer_single_level_tree"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multilayer-single-level-tree", isDefaultInit: false, items: [], - itemsCreator: BI.emptyFn, - keywordGetter: BI.emptyFn, - chooseType: BI.Selection.Single, - scrollable: true + itemsCreator: emptyFn, + keywordGetter: emptyFn, + chooseType: Selection.Single, + scrollable: true, }); - }, + } - _init: function () { - var o = this.options; - BI.MultiLayerSingleLevelTree.superclass._init.apply(this, arguments); + _init() { + const o = this.options; + super._init(...arguments); this.storeValue = o.value; this.initTree(this.options.items); this.check(); - }, + } - _formatItems: function (nodes, layer, pNode) { - var self = this, o = this.options; - var keyword = o.keywordGetter(); - BI.each(nodes, function (i, node) { - var extend = { + _formatItems(nodes, layer, pNode) { + const self = this, + o = this.options; + const keyword = o.keywordGetter(); + each(nodes, (i, node) => { + const extend = { isFirstNode: i === 0, isLastNode: i === nodes.length - 1, - height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, }; node.layer = layer; - if (!BI.isKey(node.id)) { - node.id = BI.UUID(); + if (!isKey(node.id)) { + node.id = UUID(); } node.keyword = node.keyword || keyword; extend.pNode = pNode; - if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) { - extend.type = "bi.tree_node"; + if (node.isParent === true || node.parent === true || isNotEmptyArray(node.children)) { + extend.type = BasicTreeNode.xtype; extend.selectable = false; - 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; - }, + } - _assertId: function (sNodes) { - BI.each(sNodes, function (i, node) { - node.id = node.id || BI.UUID(); + _assertId(sNodes) { + each(sNodes, (i, node) => { + node.id = node.id || UUID(); }); - }, + } - // 构造树结构， - initTree: function (nodes) { - var self = this, o = this.options; - var hasNext = false; + initTree(nodes) { + const self = this, + o = this.options; + let hasNext = false; this.empty(); this._assertId(nodes); - this.tree = BI.createWidget({ - type: "bi.custom_tree", + this.tree = createWidget({ + type: CustomTree.xtype, cls: "tree-view display-table", expander: { - type: "bi.tree_expander", + type: TreeExpander.xtype, isDefaultInit: o.isDefaultInit, el: {}, popup: { - type: "bi.custom_tree" - } + type: CustomTree.xtype, + }, }, - items: this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0), + items: this._formatItems(Tree.transformToTreeFormat(nodes), 0), value: o.value, - itemsCreator: function (op, callback) { - (op.times === 1 && !op.node) && BI.nextTick(function () { - self.loading(); - }); - o.itemsCreator(op, function (ob) { + itemsCreator (op, callback) { + op.times === 1 && + !op.node && + nextTick(() => { + self.loading(); + }); + o.itemsCreator(op, ob => { hasNext = ob.hasNext; - (op.times === 1 && !op.node) && self._populate(ob.items); - callback(self._formatItems(BI.Tree.transformToTreeFormat(ob.items), op.node ? op.node.layer + 1 : 0, op.node)); + op.times === 1 && !op.node && self._populate(ob.items); + callback( + self._formatItems( + Tree.transformToTreeFormat(ob.items), + op.node ? op.node.layer + 1 : 0, + op.node + ) + ); self.setValue(self.storeValue); - (op.times === 1 && !op.node) && BI.nextTick(function () { - self.loaded(); - }); + op.times === 1 && + !op.node && + nextTick(() => { + self.loaded(); + }); }); }, el: { - type: "bi.loader", - isDefaultInit: o.itemsCreator !== BI.emptyFn, + type: Loader.xtype, + isDefaultInit: o.itemsCreator !== emptyFn, el: { - type: "bi.button_tree", - chooseType: o.chooseType === BI.Selection.None ? BI.Selection.None : BI.Selection.Default, // 不使用buttontree内部getValue逻辑 + type: ButtonTree.xtype, + chooseType: o.chooseType === Selection.None ? Selection.None : Selection.Default, // 不使用buttontree内部getValue逻辑 behaviors: o.behaviors, - layouts: [{ - type: "bi.vertical" - }] + layouts: [ + { + type: VerticalLayout.xtype, + } + ], }, - hasNext: function () { + hasNext () { return hasNext; - } - } + }, + }, }); - this.tree.on(BI.Controller.EVENT_CHANGE, function (type, v) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if (type === BI.Events.CLICK) { + this.tree.on(Controller.EVENT_CHANGE, function (type, v) { + self.fireEvent(Controller.EVENT_CHANGE, arguments); + if (type === Events.CLICK) { self.setValue(v); - self.fireEvent(BI.MultiLayerSingleLevelTree.EVENT_CHANGE, v); + self.fireEvent(MultiLayerSingleLevelTree.EVENT_CHANGE, v); } }); - BI.createWidget({ - type: "bi.adaptive", + createWidget({ + type: AdaptiveLayout.xtype, element: this, scrollable: o.scrollable, - items: [this.tree] + items: [this.tree], }); - }, + } - _populate: function () { - BI.MultiLayerSelectLevelTree.superclass.populate.apply(this, arguments); - }, + _populate() { + super.populate(...arguments); + } - populate: function (nodes) { + populate(nodes) { this._populate(nodes); - BI.isNull(nodes) ? this.tree.populate() : this.tree.populate(this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0)); - }, + isNull(nodes) + ? this.tree.populate() + : this.tree.populate(this._formatItems(Tree.transformToTreeFormat(nodes), 0)); + } - setValue: function (v) { + setValue(v) { // getValue依赖于storeValue, 那么不选的时候就不要更新storeValue了 - if (this.options.chooseType === BI.Selection.None) { - } else { + if (this.options.chooseType !== Selection.None) { this.storeValue = v; this.tree.setValue(v); } - }, + } - getValue: function () { - return BI.isArray(this.storeValue) ? - this.storeValue : BI.isNull(this.storeValue) ? - [] : [this.storeValue]; - }, + getValue() { + return isArray(this.storeValue) ? this.storeValue : isNull(this.storeValue) ? [] : [this.storeValue]; + } - getAllLeaves: function () { + getAllLeaves() { return this.tree.getAllLeaves(); - }, + } - getNodeById: function (id) { + getNodeById(id) { return this.tree.getNodeById(id); - }, + } - getNodeByValue: function (id) { + getNodeByValue(id) { return this.tree.getNodeByValue(id); } -}); -BI.MultiLayerSingleLevelTree.EVENT_CHANGE = "EVENT_CHANGE"; - -BI.shortcut("bi.multilayer_single_level_tree", BI.MultiLayerSingleLevelTree); +} diff --git a/src/widget/multilayersingletree/multilayersingletree.popup.js b/src/widget/multilayersingletree/multilayersingletree.popup.js index 630c38237..244786fba 100644 --- a/src/widget/multilayersingletree/multilayersingletree.popup.js +++ b/src/widget/multilayersingletree/multilayersingletree.popup.js @@ -1,76 +1,73 @@ -/** - * Created by GUY on 2016/1/26. - * - * @class BI.MultiLayerSingleTreePopup - * @extends BI.Pane - */ +import { shortcut, Widget, extend, i18nText, emptyFn, createWidget, Controller, VerticalLayout, isArray, pixFormat } from "@/core"; +import { MultiLayerSingleLevelTree } from "./multilayersingletree.leveltree"; -BI.MultiLayerSingleTreePopup = BI.inherit(BI.Widget, { +@shortcut() +export class MultiLayerSingleTreePopup extends Widget { + static xtype = "bi.multilayer_single_tree_popup"; - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleTreePopup.superclass._defaultConfig.apply(this, arguments), { + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multilayer-singletree-popup", - tipText: BI.i18nText("BI-No_Selected_Item"), + tipText: i18nText("BI-No_Selected_Item"), isDefaultInit: false, - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, items: [], - onLoaded: BI.emptyFn, - minHeight: 240 + onLoaded: emptyFn, + minHeight: 240, }); - }, + } - _init: function () { - BI.MultiLayerSingleTreePopup.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, o = this.options; + const o = this.options; - this.tree = BI.createWidget({ - type: "bi.multilayer_single_level_tree", + this.tree = createWidget({ + type: MultiLayerSingleLevelTree.xtype, isDefaultInit: o.isDefaultInit, items: o.items, itemsCreator: o.itemsCreator, keywordGetter: o.keywordGetter, value: o.value, scrollable: null, - onLoaded: function () { - self.tree.check(); + onLoaded: () => { + this.tree.check(); o.onLoaded(); - } + }, }); - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, scrolly: false, scrollable: true, 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, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.tree.on(BI.MultiLayerSingleLevelTree.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiLayerSingleTreePopup.EVENT_CHANGE); + this.tree.on(MultiLayerSingleLevelTree.EVENT_CHANGE, () => { + this.fireEvent(MultiLayerSingleTreePopup.EVENT_CHANGE); }); - this.tree.css("min-height", BI.pixFormat(o.minHeight - 10)); - }, + this.tree.css("min-height", pixFormat(o.minHeight - 10)); + } - 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) { + populate(items) { this.tree.populate(items); } -}); - -BI.MultiLayerSingleTreePopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multilayer_single_tree_popup", BI.MultiLayerSingleTreePopup); \ No newline at end of file +} diff --git a/src/widget/multilayersingletree/multilayersingletree.trigger.js b/src/widget/multilayersingletree/multilayersingletree.trigger.js index 617c70d7b..d6c5ebda2 100644 --- a/src/widget/multilayersingletree/multilayersingletree.trigger.js +++ b/src/widget/multilayersingletree/multilayersingletree.trigger.js @@ -1,237 +1,282 @@ -/** - * Created by Windy on 2018/2/2. - */ -BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, { +import { + shortcut, + emptyFn, + i18nText, + bind, + isNotNull, + isKey, + HorizontalFillLayout, + Tree, + deepClone, + Func, + concat, + isNotEmptyArray, + each, + uniqBy, + map, + isFunction, + find +} from "@/core"; +import { Trigger, Searcher } from "@/base"; +import { StateEditor, DefaultTextEditor } from "@/case"; +import { MultiLayerSingleTreeInsertSearchPane } from "./multilayersingletree.insert.search.pane"; +import { MultiLayerSingleTreePopup } from "./multilayersingletree.popup"; - props: function () { +@shortcut() +export class MultiLayerSingleTreeTrigger extends Trigger { + static xtype = "bi.multilayer_single_tree_trigger"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_START = "EVENT_START"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; + + props() { return { extraCls: "bi-multi-layer-single-tree-trigger", height: 24, - itemsCreator: BI.emptyFn, - watermark: BI.i18nText("BI-Basic_Search"), + itemsCreator: emptyFn, + watermark: i18nText("BI-Basic_Search"), allowSearchValue: false, - title: BI.bind(this._getShowText, this) + title: bind(this._getShowText, this), }; - }, + } - render: function () { - var self = this, o = this.options; - if (o.itemsCreator === BI.emptyFn) { + render() { + const self = this, + o = this.options; + if (o.itemsCreator === emptyFn) { this._initData(); } return { - type: "bi.horizontal_fill", + type: HorizontalFillLayout.xtype, items: [ { el: { - type: "bi.searcher", - ref: function () { + type: Searcher.xtype, + ref () { self.searcher = this; }, - masker: BI.isNotNull(o.container) ? { - offset: {}, - container: o.container - } : { - offset: {} - }, + masker: isNotNull(o.container) + ? { + offset: {}, + container: o.container, + } + : { + offset: {}, + }, isAutoSearch: false, el: { - type: "bi.default_text_editor", - ref: function () { + type: DefaultTextEditor.xtype, + ref () { self.editor = this; }, defaultText: o.defaultText, - text: BI.isKey(o.value) ? this._digest(o.value) : o.text, + text: isKey(o.value) ? this._digest(o.value) : o.text, value: o.value, height: o.height, tipText: "", watermark: o.watermark, - listeners: [{ - eventName: BI.StateEditor.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_FOCUS); - } - }, { - eventName: BI.StateEditor.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_BLUR); + listeners: [ + { + eventName: StateEditor.EVENT_FOCUS, + action () { + self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_FOCUS); + }, + }, + { + eventName: StateEditor.EVENT_BLUR, + action () { + self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_BLUR); + }, + }, + { + eventName: StateEditor.EVENT_CHANGE, + action () { + self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_SEARCHING); + }, } - }, { - eventName: BI.StateEditor.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_SEARCHING); - } - }] + ], }, popup: { - type: o.allowInsertValue ? "bi.multilayer_single_tree_insert_search_pane" : "bi.multilayer_single_tree_popup", - itemsCreator: o.itemsCreator === BI.emptyFn ? BI.emptyFn : function (op, callback) { - op.keyword = self.editor.getValue(); - o.itemsCreator(op, callback); - }, - keywordGetter: function () { + type: o.allowInsertValue + ? MultiLayerSingleTreeInsertSearchPane.xtype + : MultiLayerSingleTreePopup.xtype, + itemsCreator: + o.itemsCreator === emptyFn + ? emptyFn + : function (op, callback) { + op.keyword = self.editor.getValue(); + o.itemsCreator(op, callback); + }, + keywordGetter () { return self.editor.getValue(); }, cls: "bi-card", - listeners: [{ - eventName: BI.MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, - action: function () { - self.options.text = self.getSearcher().getKeyword(); - self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM); + listeners: [ + { + eventName: MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, + action () { + self.options.text = self.getSearcher().getKeyword(); + self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM); + }, } - }], - ref: function (_ref) { + ], + ref (_ref) { self.popup = _ref; - } + }, }, - onSearch: function (obj, callback) { - var keyword = obj.keyword; - if (o.itemsCreator === BI.emptyFn) { + onSearch (obj, callback) { + const keyword = obj.keyword; + if (o.itemsCreator === emptyFn) { callback(self._getSearchItems(keyword)); o.allowInsertValue && self.popup.setKeyword(keyword); } else { callback(); } }, - listeners: [{ - eventName: BI.Searcher.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE); + listeners: [ + { + eventName: Searcher.EVENT_CHANGE, + action () { + self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_CHANGE); + }, } - }] + ], }, width: "fill", rgap: 24, - }, - ] + } + ], }; - }, + } - _initData: function () { - var o = this.options; - this.tree = new BI.Tree(); - this.nodes = BI.Tree.treeFormat(BI.deepClone(o.items)); + _initData() { + const o = this.options; + this.tree = new Tree(); + this.nodes = Tree.treeFormat(deepClone(o.items)); this.tree.initTree(this.nodes); - }, + } - _getSearchItems: function (keyword) { - var self = this, o = this.options; + _getSearchItems(keyword) { + const self = this, + o = this.options; // 把数组搜索换成用BI.tree搜索节点, 搜到了就不再往下搜索 - var items = []; - this.tree.traverse(function (node) { - var find = BI.Func.getSearchResult(self.tree.isRoot(node) ? [] : BI.concat([node.text], (o.allowSearchValue ? [node.value] : [])), keyword); + const items = []; + this.tree.traverse(node => { + const find = Func.getSearchResult( + self.tree.isRoot(node) ? [] : concat([node.text], o.allowSearchValue ? [node.value] : []), + keyword + ); if (find.find.length > 0 || find.match.length > 0) { items.push(node); + return true; } }); + return this._fillTreeStructure4Search(items, "id"); - }, + } - _createJson: function (node, open) { + _createJson(node, open) { return { id: node.id, pId: node.pId, text: node.text, value: node.value, - isParent: BI.isNotEmptyArray(node.children), - open: open + isParent: isNotEmptyArray(node.children), + open, }; - }, + } - _getChildren: function (node) { - var self = this; + _getChildren(node) { + const self = this; node.children = node.children || []; - var nodes = []; - BI.each(node.children, function (idx, child) { - var children = self._getChildren(child); + let nodes = []; + each(node.children, (idx, child) => { + const children = self._getChildren(child); nodes = nodes.concat(children); }); + return node.children.concat(nodes); - }, - - // 将搜索到的节点进行补充，构造成一棵完整的树 - _fillTreeStructure4Search: function (leaves) { - var self = this; - var result = []; - var queue = []; - BI.each(leaves, function (idx, node) { + } + + _fillTreeStructure4Search(leaves) { + const self = this; + let result = []; + const queue = []; + each(leaves, (idx, node) => { queue.push({ pId: node.pId }); result.push(node); result = result.concat(self._getChildren(node)); }); queue.reverse(); - while (BI.isNotEmptyArray(queue)) { - var node = queue.pop(); - var pNode = this.tree.search(this.tree.getRoot(), node.pId, "id"); + while (isNotEmptyArray(queue)) { + const node = queue.pop(); + const pNode = this.tree.search(this.tree.getRoot(), node.pId, "id"); if (pNode != null) { pNode.open = true; queue.push({ pId: pNode.pId }); result.push(pNode); } } - return BI.uniqBy(BI.map(result, function (idx, node) { - return self._createJson(node, node.open); - }), "id"); - }, + + return uniqBy( + map(result, (idx, node) => self._createJson(node, node.open)), + "id" + ); + } - _digest: function (v) { - var o = this.options; + _digest(v) { + const o = this.options; - if (BI.isFunction(o.valueFormatter)) { + if (isFunction(o.valueFormatter)) { return o.valueFormatter(v); } - var result = BI.find(o.items, function (i, item) { - return item.value === v; - }); + const result = find(o.items, (i, item) => item.value === v); - return BI.isNotNull(result) ? result.text : (o.text ?? v); - }, + return isNotNull(result) ? result.text : o.text ?? v; + } - _getShowText: function () { + _getShowText() { return this.editor.getText(); - }, + } - stopEditing: function () { + stopEditing() { this.searcher.stopSearch(); - }, + } - getSearcher: function () { + getSearcher() { return this.searcher; - }, + } - populate: function (items) { + populate(items) { this.options.items = items; this._initData(); - }, + } - setValue: function (v) { + setValue(v) { this.editor.setState(this._digest(v[0])); - }, + } - 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.MultiLayerSingleTreeTrigger.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiLayerSingleTreeTrigger.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiLayerSingleTreeTrigger.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiLayerSingleTreeTrigger.EVENT_STOP = "EVENT_STOP"; -BI.MultiLayerSingleTreeTrigger.EVENT_START = "EVENT_START"; -BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; -BI.shortcut("bi.multilayer_single_tree_trigger", BI.MultiLayerSingleTreeTrigger); +} diff --git a/src/widget/multilayersingletree/node/index.js b/src/widget/multilayersingletree/node/index.js new file mode 100644 index 000000000..25a92c14a --- /dev/null +++ b/src/widget/multilayersingletree/node/index.js @@ -0,0 +1,4 @@ +export { MultiLayerSingleTreeFirstPlusGroupNode } from "./node.first.plus"; +export { MultiLayerSingleTreeLastPlusGroupNode } from "./node.last.plus"; +export { MultiLayerSingleTreeMidPlusGroupNode } from "./node.mid.plus"; +export { MultiLayerSingleTreePlusGroupNode } from "./node.plus"; diff --git a/src/widget/multilayersingletree/node/node.first.plus.js b/src/widget/multilayersingletree/node/node.first.plus.js index 51177bcce..07e767331 100644 --- a/src/widget/multilayersingletree/node/node.first.plus.js +++ b/src/widget/multilayersingletree/node/node.first.plus.js @@ -1,69 +1,80 @@ -/** - * 加号表示的组节点 - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeFirstPlusGroupNode - * @extends BI.NodeButton - */ -BI.MultiLayerSingleTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSingleTreeFirstPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +import { + shortcut, + extend, + createWidget, + makeArray, + HorizontalAdaptLayout, + isNotNull, + Controller, + Events +} from "@/core"; +import { NodeButton } from "@/base"; +import { FirstPlusGroupNode } from "@/case"; + +@shortcut() +export class MultiLayerSingleTreeFirstPlusGroupNode extends NodeButton { + static xtype = "bi.multilayer_single_tree_first_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { extraCls: "bi-multilayer-single-tree-first-plus-group-node bi-list-item", layer: 0, // 第几层级 id: "", pId: "", open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.MultiLayerSingleTreeFirstPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } + + _init() { + super._init(...arguments); + const o = this.options; this.node = this._createNode(); - var items = []; + const items = []; items.push({ el: this.node, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 + lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, }); - BI.createWidget({ - type: "bi.horizontal_adapt", + createWidget({ + type: HorizontalAdaptLayout.xtype, element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items + columnSize: makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), + items, }); - }, + } - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, + doRedMark() { + this.node.doRedMark(...arguments); + } - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, + unRedMark() { + this.node.unRedMark(...arguments); + } - doClick: function () { - BI.MultiLayerSingleTreeFirstPlusGroupNode.superclass.doClick.apply(this, arguments); + doClick() { + super.doClick(...arguments); this.node.setSelected(this.isSelected()); - }, + } - setOpened: function (v) { - BI.MultiLayerSingleTreeFirstPlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.node)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.node)) { this.node.setOpened(v); } - }, + } - _createNode: function () { - var self = this, o = this.options; + _createNode() { + const o = this.options; - return BI.createWidget({ - type: "bi.first_plus_group_node", + return createWidget({ + type: FirstPlusGroupNode.xtype, cls: "bi-list-item-none", logic: { - dynamic: true + dynamic: true, }, id: o.id, pId: o.pId, @@ -75,17 +86,19 @@ BI.MultiLayerSingleTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, { value: o.value, py: o.py, keyword: o.keyword, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 - return; - } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action: (...args) => { + const [type] = args; + if (type === Events.CLICK) { + // 本身实现click功能 + return; + } + this.fireEvent(Controller.EVENT_CHANGE, ...args); + }, } - }] + ], }); } -}); - -BI.shortcut("bi.multilayer_single_tree_first_plus_group_node", BI.MultiLayerSingleTreeFirstPlusGroupNode); +} diff --git a/src/widget/multilayersingletree/node/node.last.plus.js b/src/widget/multilayersingletree/node/node.last.plus.js index 007837f5c..907dd71f8 100644 --- a/src/widget/multilayersingletree/node/node.last.plus.js +++ b/src/widget/multilayersingletree/node/node.last.plus.js @@ -1,69 +1,80 @@ -/** - * 加号表示的组节点 - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeLastPlusGroupNode - * @extends BI.NodeButton - */ -BI.MultiLayerSingleTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSingleTreeLastPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +import { + shortcut, + extend, + createWidget, + makeArray, + HorizontalAdaptLayout, + isNotNull, + Controller, + Events +} from "@/core"; +import { NodeButton } from "@/base"; +import { LastPlusGroupNode } from "@/case"; + +@shortcut() +export class MultiLayerSingleTreeLastPlusGroupNode extends NodeButton { + static xtype = "bi.multilayer_single_tree_last_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { extraCls: "bi-multilayer-single-tree-last-plus-group-node bi-list-item", layer: 0, // 第几层级 id: "", pId: "", open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.MultiLayerSingleTreeLastPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } + + _init() { + super._init(...arguments); + const o = this.options; this.node = this._createNode(); - var items = []; + const items = []; items.push({ el: this.node, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 + lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, }); - BI.createWidget({ - type: "bi.horizontal_adapt", + createWidget({ + type: HorizontalAdaptLayout.xtype, element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items + columnSize: makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), + items, }); - }, + } - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, + doRedMark() { + this.node.doRedMark(...arguments); + } - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, + unRedMark() { + this.node.unRedMark(...arguments); + } - doClick: function () { - BI.MultiLayerSingleTreeLastPlusGroupNode.superclass.doClick.apply(this, arguments); + doClick() { + super.doClick(...arguments); this.node.setSelected(this.isSelected()); - }, + } - setOpened: function (v) { - BI.MultiLayerSingleTreeLastPlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.node)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.node)) { this.node.setOpened(v); } - }, + } - _createNode: function () { - var self = this, o = this.options; + _createNode() { + const o = this.options; - return BI.createWidget({ - type: "bi.last_plus_group_node", + return createWidget({ + type: LastPlusGroupNode.xtype, cls: "bi-list-item-none", logic: { - dynamic: true + dynamic: true, }, id: o.id, pId: o.pId, @@ -74,17 +85,19 @@ BI.MultiLayerSingleTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, { value: o.value, py: o.py, keyword: o.keyword, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 - return; - } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action: (...args) => { + const [type] = args; + if (type === Events.CLICK) { + // 本身实现click功能 + return; + } + this.fireEvent(Controller.EVENT_CHANGE, ...args); + }, } - }] + ], }); } -}); - -BI.shortcut("bi.multilayer_single_tree_last_plus_group_node", BI.MultiLayerSingleTreeLastPlusGroupNode); +} diff --git a/src/widget/multilayersingletree/node/node.mid.plus.js b/src/widget/multilayersingletree/node/node.mid.plus.js index e8709cf78..f051ec2fe 100644 --- a/src/widget/multilayersingletree/node/node.mid.plus.js +++ b/src/widget/multilayersingletree/node/node.mid.plus.js @@ -1,69 +1,80 @@ -/** - * 加号表示的组节点 - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeMidPlusGroupNode - * @extends BI.NodeButton - */ -BI.MultiLayerSingleTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSingleTreeMidPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +import { + shortcut, + extend, + createWidget, + makeArray, + HorizontalAdaptLayout, + isNotNull, + Controller, + Events +} from "@/core"; +import { NodeButton } from "@/base"; +import { MidPlusGroupNode } from "@/case"; + +@shortcut() +export class MultiLayerSingleTreeMidPlusGroupNode extends NodeButton { + static xtype = "bi.multilayer_single_tree_mid_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { extraCls: "bi-multilayer-single-tree-mid-plus-group-node bi-list-item", layer: 0, // 第几层级 id: "", pId: "", open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.MultiLayerSingleTreeMidPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } + + _init() { + super._init(...arguments); + const o = this.options; this.node = this._createNode(); - var items = []; + const items = []; items.push({ el: this.node, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 + lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, }); - BI.createWidget({ - type: "bi.horizontal_adapt", + createWidget({ + type: HorizontalAdaptLayout.xtype, element: this, - columnSize: BI.makeArray(o.layer, 12), - items: items + columnSize: makeArray(o.layer, 12), + items, }); - }, + } - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, + doRedMark() { + this.node.doRedMark(...arguments); + } - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, + unRedMark() { + this.node.unRedMark(...arguments); + } - doClick: function () { - BI.MultiLayerSingleTreeMidPlusGroupNode.superclass.doClick.apply(this, arguments); + doClick() { + super.doClick(...arguments); this.node.setSelected(this.isSelected()); - }, + } - setOpened: function (v) { - BI.MultiLayerSingleTreeMidPlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.node)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.node)) { this.node.setOpened(v); } - }, + } - _createNode: function () { - var self = this, o = this.options; + _createNode() { + const o = this.options; - return BI.createWidget({ - type: "bi.mid_plus_group_node", + return createWidget({ + type: MidPlusGroupNode.xtype, cls: "bi-list-item-none", logic: { - dynamic: true + dynamic: true, }, id: o.id, pId: o.pId, @@ -74,17 +85,19 @@ BI.MultiLayerSingleTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, { value: o.value, py: o.py, keyword: o.keyword, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 - return; - } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action: (...args) => { + const [type] = args; + if (type === Events.CLICK) { + // 本身实现click功能 + return; + } + this.fireEvent(Controller.EVENT_CHANGE, ...args); + }, } - }] + ], }); } -}); - -BI.shortcut("bi.multilayer_single_tree_mid_plus_group_node", BI.MultiLayerSingleTreeMidPlusGroupNode); +} diff --git a/src/widget/multilayersingletree/node/node.plus.js b/src/widget/multilayersingletree/node/node.plus.js index bcff49737..24eebd83e 100644 --- a/src/widget/multilayersingletree/node/node.plus.js +++ b/src/widget/multilayersingletree/node/node.plus.js @@ -1,80 +1,96 @@ -/** - *@desc 根节点,既是第一个又是最后一个 - *@author dailer - *@date 2018/09/16 - */ -BI.MultiLayerSingleTreePlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSingleTreePlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +import { + shortcut, + extend, + count, + contains, + createWidget, + makeArray, + Layout, + HorizontalAdaptLayout, + isNotNull, + Controller, + Events +} from "@/core"; +import { NodeButton } from "@/base"; +import { PlusGroupNode } from "@/case"; + +@shortcut() +export class MultiLayerSingleTreePlusGroupNode extends NodeButton { + static xtype = "bi.multilayer_single_tree_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { extraCls: "bi-multilayer-single-tree-plus-group-node bi-list-item", layer: 0, // 第几层级 id: "", pId: "", open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.MultiLayerSingleTreePlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } + + _init() { + super._init(...arguments); + const o = this.options; this.node = this._createNode(); - var needBlankLayers = []; - var pNode = o.pNode; + const needBlankLayers = []; + let pNode = o.pNode; while (pNode) { if (pNode.isLastNode) { - needBlankLayers.push(pNode.layer) + needBlankLayers.push(pNode.layer); } pNode = pNode.pNode; } - var items = []; - BI.count(0, o.layer, function (index) { + const items = []; + count(0, o.layer, index => { items.push({ - type: "bi.layout", - cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background", + type: Layout.xtype, + cls: contains(needBlankLayers, index) ? "" : "base-line-conn-background", width: 12, - height: o.height + height: o.height, }); }); items.push(this.node); - BI.createWidget({ - type: "bi.horizontal_adapt", + createWidget({ + type: HorizontalAdaptLayout.xtype, element: this, - columnSize: BI.makeArray(o.layer, 12), - items: items + columnSize: makeArray(o.layer, 12), + items, }); - }, + } - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, + doRedMark() { + this.node.doRedMark(...arguments); + } - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, + unRedMark() { + this.node.unRedMark(...arguments); + } - doClick: function () { - BI.MultiLayerSingleTreePlusGroupNode.superclass.doClick.apply(this, arguments); + doClick() { + super.doClick(...arguments); this.node.setSelected(this.isSelected()); - }, + } - setOpened: function (v) { - BI.MultiLayerSingleTreePlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.node)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.node)) { this.node.setOpened(v); } - }, + } - _createNode: function () { - var self = this, o = this.options; + _createNode() { + const o = this.options; - return BI.createWidget({ - type: "bi.plus_group_node", + return createWidget({ + type: PlusGroupNode.xtype, cls: "bi-list-item-none", logic: { - dynamic: true + dynamic: true, }, id: o.id, pId: o.pId, @@ -86,17 +102,19 @@ BI.MultiLayerSingleTreePlusGroupNode = BI.inherit(BI.NodeButton, { value: o.value, py: o.py, keyword: o.keyword, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 - return; - } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action: (...args) => { + const [type] = args; + if (type === Events.CLICK) { + // 本身实现click功能 + return; + } + this.fireEvent(Controller.EVENT_CHANGE, ...args); + }, } - }] + ], }); } -}); - -BI.shortcut("bi.multilayer_single_tree_plus_group_node", BI.MultiLayerSingleTreePlusGroupNode); \ No newline at end of file +} diff --git a/src/widget/multilayersingletree/treeitem/index.js b/src/widget/multilayersingletree/treeitem/index.js new file mode 100644 index 000000000..ce4dc8b6c --- /dev/null +++ b/src/widget/multilayersingletree/treeitem/index.js @@ -0,0 +1,3 @@ +export { MultiLayerSingleTreeFirstTreeLeafItem } from "./item.first.treeleaf"; +export { MultiLayerSingleTreeLastTreeLeafItem } from "./item.last.treeleaf"; +export { MultiLayerSingleTreeMidTreeLeafItem } from "./item.mid.treeleaf"; diff --git a/src/widget/multilayersingletree/treeitem/item.first.treeleaf.js b/src/widget/multilayersingletree/treeitem/item.first.treeleaf.js index 4cc5203e4..469d215d0 100644 --- a/src/widget/multilayersingletree/treeitem/item.first.treeleaf.js +++ b/src/widget/multilayersingletree/treeitem/item.first.treeleaf.js @@ -1,30 +1,32 @@ -/** - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeFirstTreeLeafItem - * @extends BI.BasicButton - */ -BI.MultiLayerSingleTreeFirstTreeLeafItem = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleTreeFirstTreeLeafItem.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, extend, createWidget, Controller, Events, makeArray, HorizontalAdaptLayout } from "@/core"; +import { BasicButton } from "@/base"; + +@shortcut() +export class MultiLayerSingleTreeFirstTreeLeafItem extends BasicButton { + static xtype = "bi.multilayer_single_tree_first_tree_leaf_item"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { extraCls: "bi-multilayer-single-tree-first-tree-leaf-item bi-list-item-active", logic: { - dynamic: false + dynamic: false, }, layer: 0, id: "", pId: "", - height: 24 + height: 24, }); - }, - _init: function () { - BI.MultiLayerSingleTreeFirstTreeLeafItem.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.item = BI.createWidget({ + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.item = createWidget({ type: "bi.first_tree_leaf_item", cls: "bi-list-item-none", logic: { - dynamic: true + dynamic: true, }, id: o.id, pId: o.pId, @@ -33,54 +35,53 @@ BI.MultiLayerSingleTreeFirstTreeLeafItem = BI.inherit(BI.BasicButton, { text: o.text, value: o.value, py: o.py, - keyword: o.keyword + keyword: o.keyword, }); - this.item.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 + this.item.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { + // 本身实现click功能 return; } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - var items = []; + const items = []; items.push({ el: this.item, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 + lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, }); - BI.createWidget({ - type: "bi.horizontal_adapt", + createWidget({ + type: HorizontalAdaptLayout.xtype, element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items + columnSize: makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), + items, }); - }, + } - doHighLight: function () { - this.item.doHighLight.apply(this.item, arguments); - }, + doHighLight() { + this.item.doHighLight(...arguments); + } - unHighLight: function () { - this.item.unHighLight.apply(this.item, arguments); - }, + unHighLight() { + this.item.unHighLight(...arguments); + } - getId: function () { + getId() { return this.options.id; - }, + } - getPId: function () { + getPId() { return this.options.pId; - }, + } - doClick: function () { - BI.MultiLayerSingleTreeFirstTreeLeafItem.superclass.doClick.apply(this, arguments); + doClick() { + super.doClick(...arguments); this.item.setSelected(this.isSelected()); - }, + } - setSelected: function (v) { - BI.MultiLayerSingleTreeFirstTreeLeafItem.superclass.setSelected.apply(this, arguments); + setSelected(v) { + super.setSelected(...arguments); this.item.setSelected(v); } -}); - -BI.shortcut("bi.multilayer_single_tree_first_tree_leaf_item", BI.MultiLayerSingleTreeFirstTreeLeafItem); +} diff --git a/src/widget/multilayersingletree/treeitem/item.last.treeleaf.js b/src/widget/multilayersingletree/treeitem/item.last.treeleaf.js index 9aa604737..f4ca73929 100644 --- a/src/widget/multilayersingletree/treeitem/item.last.treeleaf.js +++ b/src/widget/multilayersingletree/treeitem/item.last.treeleaf.js @@ -1,30 +1,32 @@ -/** - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeLastTreeLeafItem - * @extends BI.BasicButton - */ -BI.MultiLayerSingleTreeLastTreeLeafItem = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleTreeLastTreeLeafItem.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, extend, createWidget, Controller, Events, makeArray, HorizontalAdaptLayout } from "@/core"; +import { BasicButton } from "@/base"; + +@shortcut() +export class MultiLayerSingleTreeLastTreeLeafItem extends BasicButton { + static xtype = "bi.multilayer_single_tree_last_tree_leaf_item"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { extraCls: "bi-multilayer-single-tree-last-tree-leaf-item bi-list-item-active", logic: { - dynamic: false + dynamic: false, }, layer: 0, id: "", pId: "", - height: 24 + height: 24, }); - }, - _init: function () { - BI.MultiLayerSingleTreeLastTreeLeafItem.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.item = BI.createWidget({ + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.item = createWidget({ type: "bi.last_tree_leaf_item", cls: "bi-list-item-none", logic: { - dynamic: true + dynamic: true, }, id: o.id, pId: o.pId, @@ -33,54 +35,53 @@ BI.MultiLayerSingleTreeLastTreeLeafItem = BI.inherit(BI.BasicButton, { text: o.text, value: o.value, py: o.py, - keyword: o.keyword + keyword: o.keyword, }); - this.item.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 + this.item.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { + // 本身实现click功能 return; } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - var items = []; + const items = []; items.push({ el: this.item, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 + lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, }); - BI.createWidget({ - type: "bi.horizontal_adapt", + createWidget({ + type: HorizontalAdaptLayout.xtype, element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items + columnSize: makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), + items, }); - }, + } - doHighLight: function () { - this.item.doHighLight.apply(this.item, arguments); - }, + doHighLight() { + this.item.doHighLight(...arguments); + } - unHighLight: function () { - this.item.unHighLight.apply(this.item, arguments); - }, + unHighLight() { + this.item.unHighLight(...arguments); + } - getId: function () { + getId() { return this.options.id; - }, + } - getPId: function () { + getPId() { return this.options.pId; - }, + } - doClick: function () { - BI.MultiLayerSingleTreeLastTreeLeafItem.superclass.doClick.apply(this, arguments); + doClick() { + super.doClick(...arguments); this.item.setSelected(this.isSelected()); - }, + } - setSelected: function (v) { - BI.MultiLayerSingleTreeLastTreeLeafItem.superclass.setSelected.apply(this, arguments); + setSelected(v) { + super.setSelected(...arguments); this.item.setSelected(v); } -}); - -BI.shortcut("bi.multilayer_single_tree_last_tree_leaf_item", BI.MultiLayerSingleTreeLastTreeLeafItem); +} diff --git a/src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js b/src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js index eed7d553c..527dac46a 100644 --- a/src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js +++ b/src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js @@ -1,30 +1,32 @@ -/** - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeMidTreeLeafItem - * @extends BI.BasicButton - */ -BI.MultiLayerSingleTreeMidTreeLeafItem = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleTreeMidTreeLeafItem.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, extend, createWidget, Controller, Events, makeArray, HorizontalAdaptLayout } from "@/core"; +import { BasicButton } from "@/base"; + +@shortcut() +export class MultiLayerSingleTreeMidTreeLeafItem extends BasicButton { + static xtype = "bi.multilayer_single_tree_mid_tree_leaf_item"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { extraCls: "bi-multilayer-single-tree-mid-tree-leaf-item bi-list-item-active", logic: { - dynamic: false + dynamic: false, }, layer: 0, id: "", pId: "", - height: 24 + height: 24, }); - }, - _init: function () { - BI.MultiLayerSingleTreeMidTreeLeafItem.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.item = BI.createWidget({ + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.item = createWidget({ type: "bi.mid_tree_leaf_item", cls: "bi-list-item-none", logic: { - dynamic: true + dynamic: true, }, id: o.id, pId: o.pId, @@ -33,54 +35,53 @@ BI.MultiLayerSingleTreeMidTreeLeafItem = BI.inherit(BI.BasicButton, { text: o.text, value: o.value, py: o.py, - keyword: o.keyword + keyword: o.keyword, }); - this.item.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 + this.item.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { + // 本身实现click功能 return; } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - var items = []; + const items = []; items.push({ el: this.item, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 + lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, }); - BI.createWidget({ - type: "bi.horizontal_adapt", + createWidget({ + type: HorizontalAdaptLayout.xtype, element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items + columnSize: makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), + items, }); - }, + } - doHighLight: function () { - this.item.doHighLight.apply(this.item, arguments); - }, + doHighLight() { + this.item.doHighLight(...arguments); + } - unHighLight: function () { - this.item.unHighLight.apply(this.item, arguments); - }, + unHighLight() { + this.item.unHighLight(...arguments); + } - getId: function () { + getId() { return this.options.id; - }, + } - getPId: function () { + getPId() { return this.options.pId; - }, + } - doClick: function () { - BI.MultiLayerSingleTreeMidTreeLeafItem.superclass.doClick.apply(this, arguments); + doClick() { + super.doClick(...arguments); this.item.setSelected(this.isSelected()); - }, + } - setSelected: function (v) { - BI.MultiLayerSingleTreeMidTreeLeafItem.superclass.setSelected.apply(this, arguments); + setSelected(v) { + super.setSelected(...arguments); this.item.setSelected(v); } -}); - -BI.shortcut("bi.multilayer_single_tree_mid_tree_leaf_item", BI.MultiLayerSingleTreeMidTreeLeafItem); +}