o2.xdesktop.requireapp("process.xform", "$elinput", null, false);
/** @class eltree 基于element ui的树形控件。
* @o2cn 树形控件
* @example
* //可以在脚本中获取该组件
* //方法1：
* var input = this.form.get("name"); //获取组件
* //方法2
* var input = this.target; //在组件事件脚本中获取
* @extends mwf.xapplication.process.xform.$module
* @o2category formcomponents
* @o2range {process|cms|portal}
* @hideconstructor
* @see {@link https://element.eleme.cn/#/zh-cn/component/tree|element ui tree 树形控件}
*/
mwf.xapplication.process.xform.eltree = mwf.appeltree = new class(
/** @lends o2.xapplication.process.xform.eltree# */
{
implements: [events],
extends: mwf.app$elinput,
options: {
"moduleevents": ["load", "queryload", "postload"],
/**
* 节点被点击时的回调。this.event[0]指向传递给 data 属性的数组中该节点所对应的对象；
* this.event[1]为节点对应的 node；this.event[2]为节点组件本身
* @event mwf.xapplication.process.xform.eltree#node-click
* @see {@link https://element.eleme.cn/#/zh-cn/component/tree|树组件的events章节}
*/
/**
* 当某一节点被鼠标右键点击时会触发该事件。this.event[0]指向event；
* this.event[1]为传递给 data 属性的数组中该节点所对应的对象；this.event[2]为节点对应的 node;
* this.event[3]为节点组件本身
* @event mwf.xapplication.process.xform.eltree#node-contextmenu
* @see {@link https://element.eleme.cn/#/zh-cn/component/tree|树组件的events章节}
*/
/**
* 节点选中状态发生变化时的回调。this.event[0]为传递给 data 属性的数组中该节点所对应的对象；
* this.event[1]为节点本身是否被选中；this.event[2]为节点的子树中是否有被选中的节点
* @event mwf.xapplication.process.xform.eltree#check-change
* @see {@link https://element.eleme.cn/#/zh-cn/component/tree|树组件的events章节}
*/
/**
* 当复选框被点击的时候触发。this.event[0]为传递给 data 属性的数组中该节点所对应的对象；
* this.event[1]为树目前的选中状态对象，包含 checkednodes、checkedkeys、halfcheckednodes、halfcheckedkeys 四个属性
* @event mwf.xapplication.process.xform.eltree#check
* @see {@link https://element.eleme.cn/#/zh-cn/component/tree|树组件的events章节}
*/
/**
* 当前选中节点变化时触发的事件。this.event[0]为当前节点的数据；
* this.event[1]为当前节点的 node 对象
* * @event mwf.xapplication.process.xform.eltree#current-change
* @see {@link https://element.eleme.cn/#/zh-cn/component/tree|树组件的events章节}
*/
/**
* 节点被展开时触发的事件。this.event[0]为传递给 data 属性的数组中该节点所对应的对象；
* this.event[1]为节点对应的 node；this.event[2]为节点组件本身
* * @event mwf.xapplication.process.xform.eltree#node-expand
* @see {@link https://element.eleme.cn/#/zh-cn/component/tree|树组件的events章节}
*/
/**
* 节点被关闭时触发的事件。this.event[0]为传递给 data 属性的数组中该节点所对应的对象；
* this.event[1]为节点对应的 node；this.event[2]为节点组件本身
* * @event mwf.xapplication.process.xform.eltree#node-collapse
* @see {@link https://element.eleme.cn/#/zh-cn/component/tree|树组件的events章节}
*/
/**
* 节点开始拖拽时触发的事件。this.event[0]为被拖拽节点对应的 node；
* this.event[1]为event
* * @event mwf.xapplication.process.xform.eltree#node-drag-start
* @see {@link https://element.eleme.cn/#/zh-cn/component/tree|树组件的events章节}
*/
/**
* 拖拽进入其他节点时触发的事件。this.event[0]为被拖拽节点对应的 node；
* this.event[1]为所进入节点对应的 node；this.event[2]为event
* * @event mwf.xapplication.process.xform.eltree#node-drag-enter
* @see {@link https://element.eleme.cn/#/zh-cn/component/tree|树组件的events章节}
*/
/**
* 拖拽离开某个节点时触发的事件。this.event[0]为被拖拽节点对应的 node；
* this.event[1]为所进入节点对应的 node；this.event[2]为event
* * @event mwf.xapplication.process.xform.eltree#node-drag-leave
* @see {@link https://element.eleme.cn/#/zh-cn/component/tree|树组件的events章节}
*/
/**
* 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件） 。this.event[0]为被拖拽节点对应的 node；
* this.event[1]为所进入节点对应的 node；this.event[2]为event
* * @event mwf.xapplication.process.xform.eltree#node-drag-over
* @see {@link https://element.eleme.cn/#/zh-cn/component/tree|树组件的events章节}
*/
/**
* 拖拽结束时（可能未成功）触发的事件。this.event[0]为被拖拽节点对应的 node；
* this.event[1]为结束拖拽时最后进入的节点（可能为空）；
* this.event[2]为被拖拽节点的放置位置（before、after、inner）
* this.event[3]为event
* @event mwf.xapplication.process.xform.eltree#node-drag-end
* @see {@link https://element.eleme.cn/#/zh-cn/component/tree|树组件的events章节}
*/
/**
* 拖拽成功完成时触发的事件。this.event[0]为被拖拽节点对应的 node；
* this.event[1]为结束拖拽时最后进入的节点；
* this.event[2]为被拖拽节点的放置位置（before、after、inner）
* this.event[3]为event
* @event mwf.xapplication.process.xform.eltree#node-drop
* @see {@link https://element.eleme.cn/#/zh-cn/component/tree|树组件的events章节}
*/
"elevents": ["node-click", "node-contextmenu", "check-change", "check", "current-change","node-expand",
"node-collapse","node-drag-start","node-drag-enter","node-drag-leave","node-drag-over","node-drag-end","node-drop"]
},
__setreadonly: function(data){
if (this.isreadonly()) {
this.node.set("text", data);
if( this.json.elproperties ){
this.node.set(this.json.elproperties );
}
if (this.json.elstyles){
this.node.setstyles( this._parsestyles(this.json.elstyles) );
}
}
},
_loadnode: function(){
// if (this.isreadonly()) this.json.disabled = true;
this._loadnodeedit();
},
_appendvuedata: function(){
if (!this.json.emptytext) this.json.emptytext = "";
// if (!this.json.renderafterexpand) this.json.renderafterexpand = true;
if (!this.json.highlightcurrent) this.json.highlightcurrent = false;
if (!this.json.defaultexpandall) this.json.defaultexpandall = false;
// if (!this.json.expandonclicknode) this.json.expandonclicknode = true;
if (!this.json.accordion) this.json.accordion = false;
if (!this.json.indent) this.json.indent = 16;
if (this.json.currentnodekey && this.json.currentnodekey.code){
this.json.currentnodekey = this.form.macro.fire(this.json.currentnodekey.code, this);
}
if( !this.json.defaultexpandall && this.json.defaultexpandedkeys && this.json.defaultexpandedkeys.code ){
this.json.defaultexpandedkeys = this.form.macro.fire(this.json.defaultexpandedkeys.code, this);
}
if( this.json.showcheckbox && this.json.defaultcheckedkeys && this.json.defaultcheckedkeys.code ){
this.json.defaultcheckedkeys = this.form.macro.fire(this.json.defaultcheckedkeys.code, this);
}
// if( this.json.lazy && this.json.loadfun && this.json.loadfun.code ){
// this.json.lazyloadfun = function(node, resolve){
// return this.form.macro.fire(this.json.loadfun.code, this, {
// node: node,
// resolve: resolve
// });
// }.bind(this)
// }
if( this.json.draggable ){
if( this.json.allowdrag && this.json.allowdrag.code ){
this.json.allowdragfun = function(node){
return this.form.macro.fire(this.json.allowdrag.code, this, node);
}.bind(this)
}
if( this.json.allowdrop && this.json.allowdrop.code ){
this.json.allowdropfun = function(node){
return this.form.macro.fire(this.json.allowdrop.code, this, node);
}.bind(this)
}
}
if (this.json.datatype === "script"){
this.json.data = this.form.macro.exec(((this.json.datascript) ? this.json.datascript.code : ""), this);
}else{
this.json.data = this.json.datajson;
}
this.parsedata();
},
_createelementhtml: function() {
var html = " 0 ){
this._parsedata(data, config);
}
},
_parsedata: function ( data, config ) {
if( o2.typeof(data) === "array" ){
data.each(function(d){ this._parse(d, config) }.bind(this))
}else{
this._parse(data, config);
}
},
_parse: function (data, config) {
object.each(config, function (value, key) {
if( data[key] )data[value] = data[key];
});
var children = data[ config.children || "children" ];
if(children && o2.typeof(children)==="array" )this._parsedata( children, config );
}
});
source