oaup9/o2web/source/x_component_process_Xform/Eldropdown.js

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 = "<el-dropdown";
        // html += " :readonly=\"readonly\"";
        html += " :placement=\"placement\"";
        html += " :trigger=\"trigger\"";
        html += " :hide-on-click=\"hideOnClick\"";
        html += " :size=\"size\"";
        html += " :disabled=\"disabled\"";

        if( this.json.showButton && this.json.splitButton ){
            html += " :split-button=\"splitButton\"";
            html += " :type=\"buttonType\"";
        }

        this.options.elEvents.forEach(function(k){
            html += " @"+k+"=\"$loadElEvent_"+k.camelCase()+"\"";
        });

        if (this.json.elProperties){
            Object.keys(this.json.elProperties).forEach(function(k){
                if (this.json.elProperties[k]) html += " "+k+"=\""+this.json.elProperties[k]+"\"";
            }, this);
        }

        if (this.json.elStyles) html += " :style=\"elStyles\"";

        html += ">";

        if (this.json.vueSlot){
            html += this.json.vueSlot;
        }else{
            html += this.getButtonHtml();
        }

        html += this.getItemHtml();

        html += "</el-dropdown>";
        return html;
    },
    getItemHtml: function(){
        var html = " <el-dropdown-menu slot=\"dropdown\">";

        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 += "	<el-dropdown-item" + command + disabled + divided + icon + ">"+data.label+"</el-dropdown-item>";
        };

        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 += "</el-dropdown-menu>";
        return html;
    },
    getButtonHtml: function(){
        if( this.json.showButton ){
            if( this.json.splitButton ) {
                return this.json.text || MWF.xApplication.process.Xform.LP.pleaseSelect;
            }else{
                return "<el-button type=\""+this.json.buttonType+"\" size=\""+this.json.size+"\">"+ ( this.json.text || MWF.xApplication.process.Xform.LP.pleaseSelect ) +
                		"<i class=\"el-icon-arrow-down el-icon--right\"></i>"+
                	"</el-button>";
            }
        }else{
            return " <span class=\"el-dropdown-link\">"+ ( this.json.text || MWF.xApplication.process.Xform.LP.pleaseSelect ) +
                "<i class=\"el-icon-arrow-down el-icon--right\"></i>"+
                "</span>";
        }
    }
});