o2.xDesktop.requireApp("process.Xform", "$Elinput", null, false);
/** @class Eldropdown 基于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/dropdown|Element UI Dropdown 下拉菜单}
*/
MWF.xApplication.process.Xform.Eldropdown = MWF.APPEldropdown = new Class(
/** @lends o2.xApplication.process.Xform.Eldropdown# */
{
Implements: [Events],
Extends: MWF.APP$Elinput,
options: {
"moduleEvents": ["load", "queryLoad", "postLoad"],
/**
* split-button 为 true 时,点击左侧按钮的回调
* @event MWF.xApplication.process.Xform.Eldropdown#click
* @see {@link https://element.eleme.cn/#/zh-CN/component/dropdown|下拉菜单组件的Events章节}
*/
/**
* 点击菜单项触发的事件回调。this.event[0]指向dropdown-item 的指令(选项的command值)
* @event MWF.xApplication.process.Xform.Eldropdown#focus
* @see {@link https://element.eleme.cn/#/zh-CN/component/dropdown|下拉菜单组件的Events章节}
*/
/**
* 下拉框出现/隐藏时触发。出现则this.event[0]为 true,隐藏则this.event[0]为 false
* @event MWF.xApplication.process.Xform.Eldropdown#change
* @see {@link https://element.eleme.cn/#/zh-CN/component/dropdown|下拉菜单组件的Events章节}
*/
"elEvents": ["click", "command", "visible-change"]
},
__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();
},
_loadNodeEdit: function(){
var id = (this.json.id.indexOf("..")!==-1) ? this.json.id.replace(/\.\./g, "_") : this.json.id;
this.json["$id"] = (id.indexOf("-")!==-1) ? id.replace(/-/g, "_") : id;
this.node.appendHTML(this._createElementHtml(), "before");
var input = this.node.getPrevious();
this.node.destroy();
this.node = input;
this.node.setStyle("opacity", 0);
this.node.set({
"id": this.json.id,
"MWFType": this.json.type
});
this.node.addClass("o2_vue");
this._createVueApp();
},
_appendVueData: function(){
if (!this.json.size) this.json.size = "";
if (!this.json.placement) this.json.placement = "bottom-end";
if (!this.json.trigger) this.json.trigger = "hover";
if (o2.typeOf(this.json.hideOnClick)!=="boolean") this.json.hideOnClick = true;
if (o2.typeOf(this.json.splitButton)!=="boolean") this.json.splitButton = false;
if (!this.json.buttonType) this.json.buttonType = "";
if (!this.json.showTimeout) this.json.showTimeout = 250;
if (!this.json.hideTimeout) this.json.hideTimeout = 150;
// if(o2.typeOf(this.json.disabled)!=="boolean")this.json.disabled = this.isReadonly();
},
_afterMounted: function(el){
this.node = el;
this.node.setStyle("opacity", 1);
this.node.set({
"id": this.json.id,
"MWFType": this.json.type
});
this._loadVueCss();
this._loadDomEvents();
this._afterLoaded();
this.fireEvent("postLoad");
this.fireEvent("load");
},
_createElementHtml: function() {
var html = "";
if (this.json.vueSlot){
html += this.json.vueSlot;
}else{
html += this.getButtonHtml();
}
html += this.getItemHtml();
html += "";
return html;
},
getItemHtml: function(){
var html = " ";
var datToHtml = function (data) {
var command = data.command ? (" command=\""+data.command+"\"") : "";
var disabled = ( data.disabled && (data.disabled==="true" || data.disabled===true) ) ? " disabled" : "";
var divided = ( data.divided && (data.divided==="true" || data.divided===true) ) ? " divided" : "";
var icon = data.icon ? (" icon=\""+data.icon+"\"") : "";
html += " "+data.label+"";
};
if(this.json.dataType === "json"){
this.json.dataJson.each(function(d){
datToHtml(d)
})
}else if(this.json.dataScript && this.json.dataScript.code){
var data = this.form.Macro.exec(((this.json.dataScript) ? this.json.dataScript.code : ""), this);
if( data && o2.typeOf(data) !== "array" )data = [data];
if( data )data.each(function(d){
datToHtml(d)
})
}
html += "";
return html;
},
getButtonHtml: function(){
if( this.json.showButton ){
if( this.json.splitButton ) {
return this.json.text || MWF.xApplication.process.Xform.LP.pleaseSelect;
}else{
return ""+ ( this.json.text || MWF.xApplication.process.Xform.LP.pleaseSelect ) +
""+
"";
}
}else{
return " "+ ( this.json.text || MWF.xApplication.process.Xform.LP.pleaseSelect ) +
""+
"";
}
}
});