forked from fanruan/fineui
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 @@ |
|||||||
/** |
import { |
||||||
* Created by GUY on 2016/1/26. |
shortcut, |
||||||
* |
Widget, |
||||||
* @class BI.MultiLayerSingleTreeInsertSearchPane |
i18nText, |
||||||
* @extends BI.Pane |
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 { |
return { |
||||||
baseCls: "bi-multilayer-single-tree-popup", |
baseCls: "bi-multilayer-single-tree-popup", |
||||||
tipText: BI.i18nText("BI-No_Selected_Item"), |
tipText: i18nText("BI-No_Selected_Item"), |
||||||
isDefaultInit: false, |
isDefaultInit: false, |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
items: [], |
items: [], |
||||||
value: "" |
value: "", |
||||||
}; |
}; |
||||||
}, |
} |
||||||
|
|
||||||
render: function() { |
render() { |
||||||
var self = this, o = this.options; |
const o = this.options; |
||||||
this.tree = BI.createWidget({ |
this.tree = createWidget({ |
||||||
type: "bi.multilayer_single_level_tree", |
type: "bi.multilayer_single_level_tree", |
||||||
isDefaultInit: o.isDefaultInit, |
isDefaultInit: o.isDefaultInit, |
||||||
items: o.items, |
items: o.items, |
||||||
itemsCreator: o.itemsCreator === BI.emptyFn ? BI.emptyFn : function (op, callback) { |
itemsCreator: |
||||||
o.itemsCreator(op, function (res) { |
o.itemsCreator === emptyFn |
||||||
|
? emptyFn |
||||||
|
: (op, callback) => { |
||||||
|
o.itemsCreator(op, res => { |
||||||
callback(res); |
callback(res); |
||||||
self.setKeyword(o.keywordGetter()); |
this.setKeyword(o.keywordGetter()); |
||||||
}); |
}); |
||||||
}, |
}, |
||||||
keywordGetter: o.keywordGetter, |
keywordGetter: o.keywordGetter, |
||||||
value: o.value, |
value: o.value, |
||||||
scrollable: null, |
scrollable: null, |
||||||
listeners: [{ |
listeners: [ |
||||||
eventName: BI.Controller.EVENT_CHANGE, |
{ |
||||||
action: function () { |
eventName: Controller.EVENT_CHANGE, |
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
action: (...args) => { |
||||||
} |
this.fireEvent(Controller.EVENT_CHANGE, ...args); |
||||||
}, { |
}, |
||||||
eventName: BI.MultiLayerSelectLevelTree.EVENT_CHANGE, |
}, |
||||||
action: function () { |
{ |
||||||
self.fireEvent(BI.MultiLayerSingleTreeInsertSearchPane.EVENT_CHANGE); |
eventName: MultiLayerSelectLevelTree.EVENT_CHANGE, |
||||||
|
action: () => { |
||||||
|
this.fireEvent(MultiLayerSingleTreeInsertSearchPane.EVENT_CHANGE); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}); |
}); |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.vertical", |
type: VerticalLayout.xtype, |
||||||
scrolly: false, |
scrolly: false, |
||||||
scrollable: true, |
scrollable: true, |
||||||
vgap: 5, |
vgap: 5, |
||||||
items: [{ |
items: [ |
||||||
type: "bi.text_button", |
{ |
||||||
|
type: TextButton.xtype, |
||||||
invisible: true, |
invisible: true, |
||||||
text: BI.i18nText("BI-Basic_Click_To_Add_Text", ""), |
text: i18nText("BI-Basic_Click_To_Add_Text", ""), |
||||||
height: 24, |
height: 24, |
||||||
cls: "bi-high-light", |
cls: "bi-high-light", |
||||||
hgap: 5, |
hgap: 5, |
||||||
ref: function (_ref) { |
ref: _ref => { |
||||||
self.addNotMatchTip = _ref; |
this.addNotMatchTip = _ref; |
||||||
}, |
}, |
||||||
handler: function () { |
handler: () => { |
||||||
self.fireEvent(BI.MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, o.keywordGetter()); |
this.fireEvent(MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, o.keywordGetter()); |
||||||
} |
|
||||||
}, this.tree] |
|
||||||
}; |
|
||||||
}, |
}, |
||||||
|
}, |
||||||
|
this.tree |
||||||
|
], |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
setKeyword: function (keyword) { |
setKeyword(keyword) { |
||||||
var showTip = BI.isEmptyArray(this.tree.getAllLeaves()); |
const showTip = isEmptyArray(this.tree.getAllLeaves()); |
||||||
this.addNotMatchTip.setVisible(showTip); |
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(); |
return this.tree.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
v = BI.isArray(v) ? v : [v]; |
v = isArray(v) ? v : [v]; |
||||||
this.tree.setValue(v); |
this.tree.setValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
this.tree.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 @@ |
|||||||
/** |
import { |
||||||
* guy |
shortcut, |
||||||
* 二级树 |
extend, |
||||||
* @class BI.MultiLayerSingleLevelTree |
emptyFn, |
||||||
* @extends BI.Single |
Selection, |
||||||
*/ |
each, |
||||||
BI.MultiLayerSingleLevelTree = BI.inherit(BI.Pane, { |
isKey, |
||||||
_defaultConfig: function () { |
UUID, |
||||||
return BI.extend(BI.MultiLayerSingleLevelTree.superclass._defaultConfig.apply(this, arguments), { |
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", |
baseCls: "bi-multilayer-single-level-tree", |
||||||
isDefaultInit: false, |
isDefaultInit: false, |
||||||
items: [], |
items: [], |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
keywordGetter: BI.emptyFn, |
keywordGetter: emptyFn, |
||||||
chooseType: BI.Selection.Single, |
chooseType: Selection.Single, |
||||||
scrollable: true |
scrollable: true, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
var o = this.options; |
const o = this.options; |
||||||
BI.MultiLayerSingleLevelTree.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
|
|
||||||
this.storeValue = o.value; |
this.storeValue = o.value; |
||||||
|
|
||||||
this.initTree(this.options.items); |
this.initTree(this.options.items); |
||||||
|
|
||||||
this.check(); |
this.check(); |
||||||
}, |
} |
||||||
|
|
||||||
_formatItems: function (nodes, layer, pNode) { |
_formatItems(nodes, layer, pNode) { |
||||||
var self = this, o = this.options; |
const self = this, |
||||||
var keyword = o.keywordGetter(); |
o = this.options; |
||||||
BI.each(nodes, function (i, node) { |
const keyword = o.keywordGetter(); |
||||||
var extend = { |
each(nodes, (i, node) => { |
||||||
|
const extend = { |
||||||
isFirstNode: i === 0, |
isFirstNode: i === 0, |
||||||
isLastNode: i === nodes.length - 1, |
isLastNode: i === nodes.length - 1, |
||||||
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT |
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
||||||
}; |
}; |
||||||
node.layer = layer; |
node.layer = layer; |
||||||
if (!BI.isKey(node.id)) { |
if (!isKey(node.id)) { |
||||||
node.id = BI.UUID(); |
node.id = UUID(); |
||||||
} |
} |
||||||
node.keyword = node.keyword || keyword; |
node.keyword = node.keyword || keyword; |
||||||
extend.pNode = pNode; |
extend.pNode = pNode; |
||||||
if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) { |
if (node.isParent === true || node.parent === true || isNotEmptyArray(node.children)) { |
||||||
extend.type = "bi.tree_node"; |
extend.type = BasicTreeNode.xtype; |
||||||
extend.selectable = false; |
extend.selectable = false; |
||||||
BI.defaults(node, extend); |
defaults(node, extend); |
||||||
self._formatItems(node.children, layer + 1, node); |
self._formatItems(node.children, layer + 1, node); |
||||||
} else { |
} else { |
||||||
extend.type = "bi.tree_item"; |
extend.type = BasicTreeItem.xtype; |
||||||
BI.defaults(node, extend); |
defaults(node, extend); |
||||||
} |
} |
||||||
}); |
}); |
||||||
|
|
||||||
return nodes; |
return nodes; |
||||||
}, |
} |
||||||
|
|
||||||
_assertId: function (sNodes) { |
_assertId(sNodes) { |
||||||
BI.each(sNodes, function (i, node) { |
each(sNodes, (i, node) => { |
||||||
node.id = node.id || BI.UUID(); |
node.id = node.id || UUID(); |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
// 构造树结构,
|
initTree(nodes) { |
||||||
initTree: function (nodes) { |
const self = this, |
||||||
var self = this, o = this.options; |
o = this.options; |
||||||
var hasNext = false; |
let hasNext = false; |
||||||
this.empty(); |
this.empty(); |
||||||
this._assertId(nodes); |
this._assertId(nodes); |
||||||
this.tree = BI.createWidget({ |
this.tree = createWidget({ |
||||||
type: "bi.custom_tree", |
type: CustomTree.xtype, |
||||||
cls: "tree-view display-table", |
cls: "tree-view display-table", |
||||||
expander: { |
expander: { |
||||||
type: "bi.tree_expander", |
type: TreeExpander.xtype, |
||||||
isDefaultInit: o.isDefaultInit, |
isDefaultInit: o.isDefaultInit, |
||||||
el: {}, |
el: {}, |
||||||
popup: { |
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, |
value: o.value, |
||||||
itemsCreator: function (op, callback) { |
itemsCreator (op, callback) { |
||||||
(op.times === 1 && !op.node) && BI.nextTick(function () { |
op.times === 1 && |
||||||
|
!op.node && |
||||||
|
nextTick(() => { |
||||||
self.loading(); |
self.loading(); |
||||||
}); |
}); |
||||||
o.itemsCreator(op, function (ob) { |
o.itemsCreator(op, ob => { |
||||||
hasNext = ob.hasNext; |
hasNext = ob.hasNext; |
||||||
(op.times === 1 && !op.node) && self._populate(ob.items); |
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)); |
callback( |
||||||
|
self._formatItems( |
||||||
|
Tree.transformToTreeFormat(ob.items), |
||||||
|
op.node ? op.node.layer + 1 : 0, |
||||||
|
op.node |
||||||
|
) |
||||||
|
); |
||||||
self.setValue(self.storeValue); |
self.setValue(self.storeValue); |
||||||
(op.times === 1 && !op.node) && BI.nextTick(function () { |
op.times === 1 && |
||||||
|
!op.node && |
||||||
|
nextTick(() => { |
||||||
self.loaded(); |
self.loaded(); |
||||||
}); |
}); |
||||||
}); |
}); |
||||||
}, |
}, |
||||||
|
|
||||||
el: { |
el: { |
||||||
type: "bi.loader", |
type: Loader.xtype, |
||||||
isDefaultInit: o.itemsCreator !== BI.emptyFn, |
isDefaultInit: o.itemsCreator !== emptyFn, |
||||||
el: { |
el: { |
||||||
type: "bi.button_tree", |
type: ButtonTree.xtype, |
||||||
chooseType: o.chooseType === BI.Selection.None ? BI.Selection.None : BI.Selection.Default, // 不使用buttontree内部getValue逻辑
|
chooseType: o.chooseType === Selection.None ? Selection.None : Selection.Default, // 不使用buttontree内部getValue逻辑
|
||||||
behaviors: o.behaviors, |
behaviors: o.behaviors, |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}] |
type: VerticalLayout.xtype, |
||||||
|
} |
||||||
|
], |
||||||
}, |
}, |
||||||
hasNext: function () { |
hasNext () { |
||||||
return hasNext; |
return hasNext; |
||||||
} |
}, |
||||||
} |
}, |
||||||
}); |
}); |
||||||
this.tree.on(BI.Controller.EVENT_CHANGE, function (type, v) { |
this.tree.on(Controller.EVENT_CHANGE, function (type, v) { |
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
self.fireEvent(Controller.EVENT_CHANGE, arguments); |
||||||
if (type === BI.Events.CLICK) { |
if (type === Events.CLICK) { |
||||||
self.setValue(v); |
self.setValue(v); |
||||||
self.fireEvent(BI.MultiLayerSingleLevelTree.EVENT_CHANGE, v); |
self.fireEvent(MultiLayerSingleLevelTree.EVENT_CHANGE, v); |
||||||
} |
} |
||||||
}); |
}); |
||||||
|
|
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.adaptive", |
type: AdaptiveLayout.xtype, |
||||||
element: this, |
element: this, |
||||||
scrollable: o.scrollable, |
scrollable: o.scrollable, |
||||||
items: [this.tree] |
items: [this.tree], |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_populate: function () { |
_populate() { |
||||||
BI.MultiLayerSelectLevelTree.superclass.populate.apply(this, arguments); |
super.populate(...arguments); |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (nodes) { |
populate(nodes) { |
||||||
this._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了
|
// getValue依赖于storeValue, 那么不选的时候就不要更新storeValue了
|
||||||
if (this.options.chooseType === BI.Selection.None) { |
if (this.options.chooseType !== Selection.None) { |
||||||
} else { |
|
||||||
this.storeValue = v; |
this.storeValue = v; |
||||||
this.tree.setValue(v); |
this.tree.setValue(v); |
||||||
} |
} |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return BI.isArray(this.storeValue) ? |
return isArray(this.storeValue) ? this.storeValue : isNull(this.storeValue) ? [] : [this.storeValue]; |
||||||
this.storeValue : BI.isNull(this.storeValue) ? |
} |
||||||
[] : [this.storeValue]; |
|
||||||
}, |
|
||||||
|
|
||||||
getAllLeaves: function () { |
getAllLeaves() { |
||||||
return this.tree.getAllLeaves(); |
return this.tree.getAllLeaves(); |
||||||
}, |
} |
||||||
|
|
||||||
getNodeById: function (id) { |
getNodeById(id) { |
||||||
return this.tree.getNodeById(id); |
return this.tree.getNodeById(id); |
||||||
}, |
} |
||||||
|
|
||||||
getNodeByValue: function (id) { |
getNodeByValue(id) { |
||||||
return this.tree.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 @@ |
|||||||
/** |
import { shortcut, Widget, extend, i18nText, emptyFn, createWidget, Controller, VerticalLayout, isArray, pixFormat } from "@/core"; |
||||||
* Created by GUY on 2016/1/26. |
import { MultiLayerSingleLevelTree } from "./multilayersingletree.leveltree"; |
||||||
* |
|
||||||
* @class BI.MultiLayerSingleTreePopup |
|
||||||
* @extends BI.Pane |
|
||||||
*/ |
|
||||||
|
|
||||||
BI.MultiLayerSingleTreePopup = BI.inherit(BI.Widget, { |
@shortcut() |
||||||
|
export class MultiLayerSingleTreePopup extends Widget { |
||||||
|
static xtype = "bi.multilayer_single_tree_popup"; |
||||||
|
|
||||||
_defaultConfig: function () { |
static EVENT_CHANGE = "EVENT_CHANGE"; |
||||||
return BI.extend(BI.MultiLayerSingleTreePopup.superclass._defaultConfig.apply(this, arguments), { |
|
||||||
|
_defaultConfig() { |
||||||
|
return extend(super._defaultConfig(...arguments), { |
||||||
baseCls: "bi-multilayer-singletree-popup", |
baseCls: "bi-multilayer-singletree-popup", |
||||||
tipText: BI.i18nText("BI-No_Selected_Item"), |
tipText: i18nText("BI-No_Selected_Item"), |
||||||
isDefaultInit: false, |
isDefaultInit: false, |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
items: [], |
items: [], |
||||||
onLoaded: BI.emptyFn, |
onLoaded: emptyFn, |
||||||
minHeight: 240 |
minHeight: 240, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.MultiLayerSingleTreePopup.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
|
|
||||||
var self = this, o = this.options; |
const o = this.options; |
||||||
|
|
||||||
this.tree = BI.createWidget({ |
this.tree = createWidget({ |
||||||
type: "bi.multilayer_single_level_tree", |
type: MultiLayerSingleLevelTree.xtype, |
||||||
isDefaultInit: o.isDefaultInit, |
isDefaultInit: o.isDefaultInit, |
||||||
items: o.items, |
items: o.items, |
||||||
itemsCreator: o.itemsCreator, |
itemsCreator: o.itemsCreator, |
||||||
keywordGetter: o.keywordGetter, |
keywordGetter: o.keywordGetter, |
||||||
value: o.value, |
value: o.value, |
||||||
scrollable: null, |
scrollable: null, |
||||||
onLoaded: function () { |
onLoaded: () => { |
||||||
self.tree.check(); |
this.tree.check(); |
||||||
o.onLoaded(); |
o.onLoaded(); |
||||||
} |
}, |
||||||
}); |
}); |
||||||
|
|
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.vertical", |
type: VerticalLayout.xtype, |
||||||
scrolly: false, |
scrolly: false, |
||||||
scrollable: true, |
scrollable: true, |
||||||
element: this, |
element: this, |
||||||
vgap: 5, |
vgap: 5, |
||||||
items: [this.tree] |
items: [this.tree], |
||||||
}); |
}); |
||||||
|
|
||||||
this.tree.on(BI.Controller.EVENT_CHANGE, function () { |
this.tree.on(Controller.EVENT_CHANGE, (...args) => { |
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
this.fireEvent(Controller.EVENT_CHANGE, ...args); |
||||||
}); |
}); |
||||||
|
|
||||||
this.tree.on(BI.MultiLayerSingleLevelTree.EVENT_CHANGE, function () { |
this.tree.on(MultiLayerSingleLevelTree.EVENT_CHANGE, () => { |
||||||
self.fireEvent(BI.MultiLayerSingleTreePopup.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(); |
return this.tree.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
v = BI.isArray(v) ? v : [v]; |
v = isArray(v) ? v : [v]; |
||||||
this.tree.setValue(v); |
this.tree.setValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
this.tree.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 @@ |
|||||||
/** |
import { |
||||||
* Created by Windy on 2018/2/2. |
shortcut, |
||||||
*/ |
emptyFn, |
||||||
BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, { |
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 { |
return { |
||||||
extraCls: "bi-multi-layer-single-tree-trigger", |
extraCls: "bi-multi-layer-single-tree-trigger", |
||||||
height: 24, |
height: 24, |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
watermark: BI.i18nText("BI-Basic_Search"), |
watermark: i18nText("BI-Basic_Search"), |
||||||
allowSearchValue: false, |
allowSearchValue: false, |
||||||
title: BI.bind(this._getShowText, this) |
title: bind(this._getShowText, this), |
||||||
}; |
}; |
||||||
}, |
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
var self = this, o = this.options; |
const self = this, |
||||||
if (o.itemsCreator === BI.emptyFn) { |
o = this.options; |
||||||
|
if (o.itemsCreator === emptyFn) { |
||||||
this._initData(); |
this._initData(); |
||||||
} |
} |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.horizontal_fill", |
type: HorizontalFillLayout.xtype, |
||||||
items: [ |
items: [ |
||||||
{ |
{ |
||||||
el: { |
el: { |
||||||
type: "bi.searcher", |
type: Searcher.xtype, |
||||||
ref: function () { |
ref () { |
||||||
self.searcher = this; |
self.searcher = this; |
||||||
}, |
}, |
||||||
masker: BI.isNotNull(o.container) ? { |
masker: isNotNull(o.container) |
||||||
|
? { |
||||||
|
offset: {}, |
||||||
|
container: o.container, |
||||||
|
} |
||||||
|
: { |
||||||
offset: {}, |
offset: {}, |
||||||
container: o.container |
|
||||||
} : { |
|
||||||
offset: {} |
|
||||||
}, |
}, |
||||||
isAutoSearch: false, |
isAutoSearch: false, |
||||||
el: { |
el: { |
||||||
type: "bi.default_text_editor", |
type: DefaultTextEditor.xtype, |
||||||
ref: function () { |
ref () { |
||||||
self.editor = this; |
self.editor = this; |
||||||
}, |
}, |
||||||
defaultText: o.defaultText, |
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, |
value: o.value, |
||||||
height: o.height, |
height: o.height, |
||||||
tipText: "", |
tipText: "", |
||||||
watermark: o.watermark, |
watermark: o.watermark, |
||||||
listeners: [{ |
listeners: [ |
||||||
eventName: BI.StateEditor.EVENT_FOCUS, |
{ |
||||||
action: function () { |
eventName: StateEditor.EVENT_FOCUS, |
||||||
self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_FOCUS); |
action () { |
||||||
} |
self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_FOCUS); |
||||||
}, { |
}, |
||||||
eventName: BI.StateEditor.EVENT_BLUR, |
}, |
||||||
action: function () { |
{ |
||||||
self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_BLUR); |
eventName: StateEditor.EVENT_BLUR, |
||||||
} |
action () { |
||||||
}, { |
self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_BLUR); |
||||||
eventName: BI.StateEditor.EVENT_CHANGE, |
}, |
||||||
action: function () { |
}, |
||||||
self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_SEARCHING); |
{ |
||||||
|
eventName: StateEditor.EVENT_CHANGE, |
||||||
|
action () { |
||||||
|
self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_SEARCHING); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}, |
}, |
||||||
popup: { |
popup: { |
||||||
type: o.allowInsertValue ? "bi.multilayer_single_tree_insert_search_pane" : "bi.multilayer_single_tree_popup", |
type: o.allowInsertValue |
||||||
itemsCreator: o.itemsCreator === BI.emptyFn ? BI.emptyFn : function (op, callback) { |
? MultiLayerSingleTreeInsertSearchPane.xtype |
||||||
|
: MultiLayerSingleTreePopup.xtype, |
||||||
|
itemsCreator: |
||||||
|
o.itemsCreator === emptyFn |
||||||
|
? emptyFn |
||||||
|
: function (op, callback) { |
||||||
op.keyword = self.editor.getValue(); |
op.keyword = self.editor.getValue(); |
||||||
o.itemsCreator(op, callback); |
o.itemsCreator(op, callback); |
||||||
}, |
}, |
||||||
keywordGetter: function () { |
keywordGetter () { |
||||||
return self.editor.getValue(); |
return self.editor.getValue(); |
||||||
}, |
}, |
||||||
cls: "bi-card", |
cls: "bi-card", |
||||||
listeners: [{ |
listeners: [ |
||||||
eventName: BI.MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, |
{ |
||||||
action: function () { |
eventName: MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, |
||||||
|
action () { |
||||||
self.options.text = self.getSearcher().getKeyword(); |
self.options.text = self.getSearcher().getKeyword(); |
||||||
self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM); |
self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM); |
||||||
|
}, |
||||||
} |
} |
||||||
}], |
], |
||||||
ref: function (_ref) { |
ref (_ref) { |
||||||
self.popup = _ref; |
self.popup = _ref; |
||||||
} |
|
||||||
}, |
}, |
||||||
onSearch: function (obj, callback) { |
}, |
||||||
var keyword = obj.keyword; |
onSearch (obj, callback) { |
||||||
if (o.itemsCreator === BI.emptyFn) { |
const keyword = obj.keyword; |
||||||
|
if (o.itemsCreator === emptyFn) { |
||||||
callback(self._getSearchItems(keyword)); |
callback(self._getSearchItems(keyword)); |
||||||
o.allowInsertValue && self.popup.setKeyword(keyword); |
o.allowInsertValue && self.popup.setKeyword(keyword); |
||||||
} else { |
} else { |
||||||
callback(); |
callback(); |
||||||
} |
} |
||||||
}, |
}, |
||||||
listeners: [{ |
listeners: [ |
||||||
eventName: BI.Searcher.EVENT_CHANGE, |
{ |
||||||
action: function () { |
eventName: Searcher.EVENT_CHANGE, |
||||||
self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE); |
action () { |
||||||
|
self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_CHANGE); |
||||||
|
}, |
||||||
} |
} |
||||||
}] |
], |
||||||
}, |
}, |
||||||
width: "fill", |
width: "fill", |
||||||
rgap: 24, |
rgap: 24, |
||||||
}, |
} |
||||||
] |
], |
||||||
}; |
}; |
||||||
}, |
} |
||||||
|
|
||||||
_initData: function () { |
_initData() { |
||||||
var o = this.options; |
const o = this.options; |
||||||
this.tree = new BI.Tree(); |
this.tree = new Tree(); |
||||||
this.nodes = BI.Tree.treeFormat(BI.deepClone(o.items)); |
this.nodes = Tree.treeFormat(deepClone(o.items)); |
||||||
this.tree.initTree(this.nodes); |
this.tree.initTree(this.nodes); |
||||||
}, |
} |
||||||
|
|
||||||
_getSearchItems: function (keyword) { |
_getSearchItems(keyword) { |
||||||
var self = this, o = this.options; |
const self = this, |
||||||
|
o = this.options; |
||||||
// 把数组搜索换成用BI.tree搜索节点, 搜到了就不再往下搜索
|
// 把数组搜索换成用BI.tree搜索节点, 搜到了就不再往下搜索
|
||||||
var items = []; |
const items = []; |
||||||
this.tree.traverse(function (node) { |
this.tree.traverse(node => { |
||||||
var find = BI.Func.getSearchResult(self.tree.isRoot(node) ? [] : BI.concat([node.text], (o.allowSearchValue ? [node.value] : [])), keyword); |
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) { |
if (find.find.length > 0 || find.match.length > 0) { |
||||||
items.push(node); |
items.push(node); |
||||||
|
|
||||||
return true; |
return true; |
||||||
} |
} |
||||||
}); |
}); |
||||||
|
|
||||||
return this._fillTreeStructure4Search(items, "id"); |
return this._fillTreeStructure4Search(items, "id"); |
||||||
}, |
} |
||||||
|
|
||||||
_createJson: function (node, open) { |
_createJson(node, open) { |
||||||
return { |
return { |
||||||
id: node.id, |
id: node.id, |
||||||
pId: node.pId, |
pId: node.pId, |
||||||
text: node.text, |
text: node.text, |
||||||
value: node.value, |
value: node.value, |
||||||
isParent: BI.isNotEmptyArray(node.children), |
isParent: isNotEmptyArray(node.children), |
||||||
open: open |
open, |
||||||
}; |
}; |
||||||
}, |
} |
||||||
|
|
||||||
_getChildren: function (node) { |
_getChildren(node) { |
||||||
var self = this; |
const self = this; |
||||||
node.children = node.children || []; |
node.children = node.children || []; |
||||||
var nodes = []; |
let nodes = []; |
||||||
BI.each(node.children, function (idx, child) { |
each(node.children, (idx, child) => { |
||||||
var children = self._getChildren(child); |
const children = self._getChildren(child); |
||||||
nodes = nodes.concat(children); |
nodes = nodes.concat(children); |
||||||
}); |
}); |
||||||
|
|
||||||
return node.children.concat(nodes); |
return node.children.concat(nodes); |
||||||
}, |
} |
||||||
|
|
||||||
// 将搜索到的节点进行补充,构造成一棵完整的树
|
_fillTreeStructure4Search(leaves) { |
||||||
_fillTreeStructure4Search: function (leaves) { |
const self = this; |
||||||
var self = this; |
let result = []; |
||||||
var result = []; |
const queue = []; |
||||||
var queue = []; |
each(leaves, (idx, node) => { |
||||||
BI.each(leaves, function (idx, node) { |
|
||||||
queue.push({ pId: node.pId }); |
queue.push({ pId: node.pId }); |
||||||
result.push(node); |
result.push(node); |
||||||
result = result.concat(self._getChildren(node)); |
result = result.concat(self._getChildren(node)); |
||||||
}); |
}); |
||||||
queue.reverse(); |
queue.reverse(); |
||||||
while (BI.isNotEmptyArray(queue)) { |
while (isNotEmptyArray(queue)) { |
||||||
var node = queue.pop(); |
const node = queue.pop(); |
||||||
var pNode = this.tree.search(this.tree.getRoot(), node.pId, "id"); |
const pNode = this.tree.search(this.tree.getRoot(), node.pId, "id"); |
||||||
if (pNode != null) { |
if (pNode != null) { |
||||||
pNode.open = true; |
pNode.open = true; |
||||||
queue.push({ pId: pNode.pId }); |
queue.push({ pId: pNode.pId }); |
||||||
result.push(pNode); |
result.push(pNode); |
||||||
} |
} |
||||||
} |
} |
||||||
return BI.uniqBy(BI.map(result, function (idx, node) { |
|
||||||
return self._createJson(node, node.open); |
|
||||||
}), "id"); |
|
||||||
}, |
|
||||||
|
|
||||||
_digest: function (v) { |
return uniqBy( |
||||||
var o = this.options; |
map(result, (idx, node) => self._createJson(node, node.open)), |
||||||
|
"id" |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
_digest(v) { |
||||||
|
const o = this.options; |
||||||
|
|
||||||
if (BI.isFunction(o.valueFormatter)) { |
if (isFunction(o.valueFormatter)) { |
||||||
return o.valueFormatter(v); |
return o.valueFormatter(v); |
||||||
} |
} |
||||||
|
|
||||||
var result = BI.find(o.items, function (i, item) { |
const result = find(o.items, (i, item) => item.value === v); |
||||||
return 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(); |
return this.editor.getText(); |
||||||
}, |
} |
||||||
|
|
||||||
stopEditing: function () { |
stopEditing() { |
||||||
this.searcher.stopSearch(); |
this.searcher.stopSearch(); |
||||||
}, |
} |
||||||
|
|
||||||
getSearcher: function () { |
getSearcher() { |
||||||
return this.searcher; |
return this.searcher; |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
this.options.items = items; |
this.options.items = items; |
||||||
this._initData(); |
this._initData(); |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.editor.setState(this._digest(v[0])); |
this.editor.setState(this._digest(v[0])); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return this.searcher.getValue(); |
return this.searcher.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
focus: function () { |
focus() { |
||||||
this.searcher.focus(); |
this.searcher.focus(); |
||||||
}, |
} |
||||||
|
|
||||||
blur: function () { |
blur() { |
||||||
this.searcher.blur(); |
this.searcher.blur(); |
||||||
}, |
} |
||||||
|
|
||||||
setWaterMark: function (v) { |
setWaterMark(v) { |
||||||
this.searcher.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