Zhenfei.Li
2 years ago
20 changed files with 1315 additions and 1058 deletions
@ -0,0 +1,2 @@
|
||||
export { MultiLayerDownListCombo } from "./combo.downlist"; |
||||
export { MultiLayerDownListPopup } from "./popup.downlist"; |
||||
@ -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"; |
||||
@ -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); |
||||
} |
||||
|
||||
@ -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); |
||||
} |
||||
|
||||
@ -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); |
||||
} |
||||
|
||||
@ -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); |
||||
} |
||||
|
||||
@ -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"; |
||||
@ -0,0 +1,3 @@
|
||||
export { MultiLayerSingleTreeFirstTreeLeafItem } from "./item.first.treeleaf"; |
||||
export { MultiLayerSingleTreeLastTreeLeafItem } from "./item.last.treeleaf"; |
||||
export { MultiLayerSingleTreeMidTreeLeafItem } from "./item.mid.treeleaf"; |
||||
Loading…
Reference in new issue