o2oa-cairong/o2web/source/x_component_process_Xform/Combox.js

MWF.xDesktop.requireApp("process.Xform", "$Selector", null, false);
/** @class Combox 组合框组件。
 * @o2cn 组合框
 * @example
 * //可以在脚本中获取该组件
 * //方法1：
 * var field = this.form.get("fieldId"); //获取组件对象
 * //方法2
 * var field = this.target; //在组件本身的脚本中获取，比如事件脚本、默认值脚本、校验脚本等等
 * @extends MWF.xApplication.process.Xform.$Selector
 * @o2category FormComponents
 * @o2range {Process|CMS}
 * @hideconstructor
 */
MWF.xApplication.process.Xform.Combox = MWF.APPCombox =  new Class(
    /** @lends MWF.xApplication.process.Xform.Combox# */
{
	Implements: [Events],
	Extends: MWF.APP$Selector,
	iconStyle: "selectIcon",
    options: {
        /**
         * 手工输入完成后触发。
         * @event MWF.xApplication.process.Xform.Combox#commitInput
         * @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
         */
        /**
         * 值改变时触发。
         * @event MWF.xApplication.process.Xform.Combox#change
         * @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
         */
        "moduleEvents": ["load", "queryLoad", "postLoad", "commitInput", "change"]
    },

    initialize: function(node, json, form, options){
        this.node = $(node);
        this.node.store("module", this);
        this.json = json;
        this.form = form;
        this.field = true;
        this.fieldModuleLoaded = false;
    },
    _loadUserInterface: function(){
        if ( this.isSectionMergeRead() ) { //区段合并显示
            this._loadMergeReadNode();
        }else{
            if( this.isSectionMergeEdit() ){
                this._loadMergeEditNode();
            }else{
                this._loadNode();
            }
            // if (this.json.compute === "show"){
            //     this._setValue(this._computeValue());
            // }else{
            //     this._loadValue();
            // }
        }
    },
    loadVal: function(){
        if (this.json.compute === "show"){
            this._setValue(this._computeValue());
        }else{
            this._loadValue();
        }
    },
	/**
	 * @summary 重新加载组件。会执行postLoad事件。
	 * @example
	 * this.form.get("fieldId").reload(); //重新加载事件
	 */
	reload: function(){
		if (this.areaNode){
			this.node = this.areaNode;
			this.areaNode.empty();
			this.areaNode = null;
		}
		this._beforeReloaded();
		this._loadUserInterface();
        this._loadStyles();
		this._afterLoaded();
		this._afterReloaded();
		this.fireEvent("postLoad");
	},
    _loadNode: function(){
        if (this.isReadonly()){
            this._loadNodeRead();
        }else{
            this._loadNodeEdit();
        }
    },
    _loadNodeRead: function(){
        this.node.empty();
        this.node.set({
            "nodeId": this.json.id,
            "MWFType": this.json.type
        });
        this.loadVal();
        //new Element("select").inject(this.node);
    },
    _loadMergeReadContentNode: function( contentNode, data ){
	    this.mergeRead = true;
        contentNode.setStyles({ "overflow": "hidden"});
		var textList = this.getTextListByValue( data.data );

        if( typeOf(textList.then) === "function" ){
            Promise.resolve(textList).then(function (tList) {
                this.__setValueRead( data.data, tList, contentNode );
            }.bind(this))
        }else{
            this.__setValueRead( data.data, textList, contentNode );
        }
        // textList.each(function(text, i){
        //     if (i<data.data.length-1) text += this.json.splitShow;
        //     new Element("div", {"styles": {
        //             "float": "left",
        //             "margin-right": "5px"
        //         },"text": text}).inject( contentNode ); //.inject(this.node.getFirst() || this.node);
        // }.bind(this));
    },
    _loadNodeEdit: function(){
        var options = this.getOptions();
        if( typeOf(options.then) === "function" ){
            Promise.resolve(options).then(function (opt) {
                this.__loadNodeEdit(opt);
                this.loadVal();
                this._loadStyles();
            }.bind(this))
        }else{
            this.__loadNodeEdit(options);
            this.loadVal();
        }
    },
    __loadNodeEdit: function(opt){
        this.node.empty();
        var select;
        MWF.require("MWF.widget.Combox", function(){
            select = this.combox = new MWF.widget.Combox({
                "style": this.form.json.comboxStyle ? this.form.json.comboxStyle.style : "default",
                "positionX": this.form.json.addressStyle ? this.form.json.addressStyle.positionX : "left",
                "onlySelect": this.json.onlySelect==="y",
                "count": this.json.count.toInt() || 0,
                "splitStr": this.json.splitStr || ",\\s*|;\\s*|，\\s*|；\\s*",
                "splitShow": this.json.splitShow || ", ",
                "focusList": this.json.showOptions === "focus",
                "list": opt,
                "onCommitInput": function(item){
                    this.fireEvent("commitInput");
                }.bind(this),
                "onChange": function(){
                    this.fireEvent("change");
                }.bind(this),
                "optionsMethod": this._searchOptions()
            });
        }.bind(this), false);


        // var select = new Element("select");
        // select.set(this.json.properties);
        select.inject(this.node);
        //this.node.destroy();
        // this.areaNode = this.node;
        // this.node = select;
        this.node.set({
            "id": this.json.id,
            "MWFType": this.json.type
        });

        this.combox.addEvent("change", function(){
            this.validationMode();
            if (this.validation()){
                var v = this.getInputData("change");
                this._setBusinessData(v);
            }
        }.bind(this));

    },
    _loadStyles: function(){
        if (this.json.styles) this.node.setStyles(this.json.styles);
        if (this.json.inputStyles && !this.mergeRead) if (this.node.getFirst()) this.node.getFirst().setStyles(this.json.inputStyles);
        if (this.iconNode && this.iconNode.offsetParent !== null){
            var size = this.node.getSize();
            //if (!size.y){
            //    var y1 = this.node.getStyle("height");
            //    var y2 = this.node.getFirst().getStyle("height");
            //    alert(y1+"," +y2);
            //    var y = ((y1!="auto" && y1>y2) || y2=="auto") ? y1 : y2;
            //    size.y = (y=="auto") ? "auto" : y.toInt();
            //    //alert(size.y)
            //}
            this.iconNode.setStyle("height", ""+size.y+"px");
            //alert(this.iconNode.getStyle("height"))
        }
    },
    _searchOptions: function(){
        if (this.json.itemType === "dynamic"){
			return function(value, callback){
				var event = {
					"value": value,
					"callback": callback
				};
                this.form.Macro.fire(((this.json.itemDynamic) ? this.json.itemDynamic.code : ""), this, event);
			}.bind(this);
		}else{
        	return null;
		}
	},
    /**
     * @summary 获取选择项。
     * @return {Array | Promise} 返回选择项数组或Promise，如：<pre><code class='language-js'>[
     *  "女|female",
     *  "男|male"
     * ]</code></pre>
     * @example
     * this.form.get('fieldId').getOptions();
     * @example
     * //异步
     * var opt = this.form.get('fieldId').getOptions();
     * Promise.resolve(opt).then(function(options){
     *     //options为选择项数组
     * })
     */
    getOptions: function(async, refresh){
        if( this.optionsCache && !refresh )return this.optionsCache;
        this.optionsCache = null;
        var opt = this._getOptions(async, refresh);
        if( (opt && typeOf(opt.then) === "function") ){
            var p = Promise.resolve( opt ).then(function(option){
                this.moduleSelectAG = null;
                this.optionsCache = this.parseOptions(option || []);
                return this.optionsCache;
            }.bind(this));
            this.moduleSelectAG = p;
            return p;
        }else{
            this.optionsCache = this.parseOptions(opt || []);
            return this.optionsCache;
        }
    },
    parseOptions: function(list){
    	// var list = [];
        // if (this.json.itemType === "values"){
        //     list = this.json.itemValues;
        // }else if (this.json.itemType === "script"){
        //     list = this.form.Macro.exec(((this.json.itemScript) ? this.json.itemScript.code : ""), this);
        // }

        if (list.length){
            var options = [];
            list.each(function(v){
                if (typeOf(v)==="object"){
                    options.push(v);
                }else{
                	v = v.toString();
                	var arr = v.split("|");
                	var o = { "text": "", "keyword": "", "value": "" };
                	switch (arr.length){
                        case 0: break;
						case 1:
                            o.text = arr[0];
                            o.keyword = arr[0];
                            o.value = arr[0];
							break;
						case 2:
                            o.text = arr[0];
                            o.keyword = arr[0];
                            o.value = arr[1];
							break;
						case 3:
                            o.text = arr[0];
                            o.keyword = arr[1];
                            o.value = arr[2];
							break;
						default:
                            o.text = arr[0];
                            o.keyword = arr[1];
                            o.value = arr[2];
					}
                    options.push(o);
				}
			}.bind(this));
            return options;
		}
        return [];
    },
    /**
     * 当表单上没有对应组件的时候，可以使用this.data[fieldId] = data赋值。
     * @summary 为组件赋值。
     * @param value{String} .
     * @example
     *  this.form.get("fieldId").setData("test"); //赋文本值
     * @example
     *  //如果无法确定表单上是否有组件，需要判断
     *  if( this.form.get('fieldId') ){ //判断表单是否有无对应组件
     *      this.form.get('fieldId').setData( data );
     *  }else{
     *      this.data['fieldId'] = data;
     *  }
     */
    setData: function(value){
        this._setBusinessData(value);
        this._setValue(value);
	},
    _setValue: function(value){
        if (!value) value = [];
        if (value.length==1 && (!value[0])) value = [];
        if (typeOf(value) !=="array") value = [value];

		if (this.combox){
            var textData = this.getTextData( value );
            if( typeOf(textData.then) === "function" ){
                Promise.resolve(textData).then(function (tData) {
                    this.combox.clear();
                    this.__setValueEdit( tData );
                }.bind(this))
            }else{
                this.combox.clear();
                this.__setValueEdit( textData )
            }
		}else{
		    var textList = this.getTextListByValue( value );
            if( typeOf(textList.then) === "function" ){
                Promise.resolve(textList).then(function (tList) {
                    this.__setValueRead( value, tList );
                }.bind(this))
            }else{
                this.__setValueRead( value, textList );
            }
		}
    },
    __setValueEdit: function(textData){
        var comboxValues = [];
        textData.value.each(function(v, i){
            comboxValues.push({
                "text": textData.text[i] || v,
                "value": v
            });
        }.bind(this));
        this.combox.addNewValues(comboxValues);
        this.fieldModuleLoaded = true;
    },
    __setValueRead: function(value, textList, contentNode){
        if(!contentNode)contentNode = new Element("div", {
            "styles": { "overflow": "hidden"}
        }).inject(this.node);
        textList.each(function(text, i){
            if (i<value.length-1) text += this.json.splitShow;
            new Element("div", {"styles": {
                    "float": "left",
                    "margin-right": "5px"
                },"text": text}).inject( contentNode ); //.inject(this.node.getFirst() || this.node);
        }.bind(this));
        this.fieldModuleLoaded = true;
    },
    /**
     * @summary 重新计算下拉选项.
     * @param {Function} callback 回调方法
     * @example
     * this.form.get('fieldId').resetOption();
     * @example
     * this.form.get('fieldId').resetOption(function(){
     *   //设置完成后的回调
     * });
     */
    resetOption: function( callback ){
        if (this.combox){
            var list = this.getOptions(true, true);
            if( typeOf(list.then) === "function" ){
                Promise.resolve(list).then(function (array) {
                    this.combox.setOptions({"list": array});
                    if(callback)callback();
                })
            }else{
                this.combox.setOptions({"list": list});
                if(callback)callback();
            }
        }
    },
    /**
     * @summary 添加下拉选项.
     * @param text  {String} 下拉选项文本
     * @param value {String} 下拉选项值
     * @example
     * this.form.get('fieldId').addOption("秘密","level1");
     */
	addOption: function(text, value){
        if (this.combox){
            var list = this.combox.options.list || [];
            list.push({
				"text": text,
                "value": value
			});
            this.combox.setOptions({"list": list});
        }
	},
    isEmpty : function(){
        var data = this.getData();
        if( typeOf(data) === "array" ){
            return data.length === 0;
        }else{
            return !data;
        }
    },
    getInputData: function(){
        if (this.combox) return this.combox.getData();
        return this._getBusinessData();
    },
    _beforeReloaded: function(){
	    if( this.combox )this.combox.clear();
        this.combox = null;
    },
    /**
     * @summary 获取选中项的text。
     * @return {Array|Promise} 返回选中项的text
     * @example
     * var text = this.form.get('fieldId').getText(); //获取选中项的文本
     * @example
     * //如果选项是异步的，比如数据字典、视图、查询视图
     * var p = this.form.get('fieldId').getText(); //获取选中项Promise
     * Promise.resolve(p).then(function(text){
     *     //text 为选选中项的文本
     * })
     */
    getText: function(){
        var d = this.getTextData();
        if( typeOf(d.then) === "function" ){
            return d.then(function( d1 ){
                return d1.text;
            });
        }else{
            return d.text;
        }
    },
    /**
     * @summary 获取选中的值和文本.
     * @example
     * var array = this.form.get('fieldId').getTextData();
     * @example
     * //异步
     * var array = this.form.get('fieldId').getTextData();
     * Promise.resolve(array).then(function(arr){
     *     //arr为选中项值和文本
     * })
     * @return {Object|Promise} 返回选中项值和文本，格式为 { 'value' : [value], 'text' : [text] }.
     */
    getTextData: function( value ){
	    var v = value || this.getData();
	    var textList = this.getTextListByValue( v );
        if( typeOf(textList.then) === "function" ){
            return Promise.resolve(textList).then(function (tList) {
                return {"value": v, "text": tList.length ? tList : v};
            }.bind(this));
        }else{
            return {"value": v, "text": textList.length ? textList : v};
        }
        //return this.node.get("text");
    },
    getTextListByValue: function( v ){
        var options, textList=[];
        if( this.json.itemType === "dynamic" ){
            var fun = this._searchOptions();
            if( fun ){
                v.each(function ( i ) {
                    var text;
                    if (typeOf(i)==="object"){
                        text = i.text || i.title || i.subject  || i.name;
                    }else{
                        i = i.toString();
                        fun(i, function( options ){
                            var matchList = options.filter(function (o) {
                                if( o.value === i )return true;
                            });
                            text = (matchList[0] && matchList[0].text) ? matchList[0].text : i;
                            textList.push( text );
                        }.bind(this));
                    }
                }.bind(this));
                return textList;
            }
        }else{
            options = this.getOptions();
            if( typeOf(options.then) === "function" ){
                return Promise.resolve(options).then(function (opt) {
                    return this._getTextListByValue(v, opt);
                }.bind(this));
            }else{
                return this._getTextListByValue(v, options);
            }
        }
        v.each(function ( i ) {
            var text;
            if (typeOf(i)==="object"){
                text = i.text || i.title || i.subject  || i.name;
            }else{
                text = i.toString();
            }
            textList.push( text );
        }.bind(this));
        return textList;
    },
    _getTextListByValue: function(v, options){
        var textList = [];
        v.each(function ( i ) {
            var text;
            if (typeOf(i)==="object"){
                text = i.text || i.title || i.subject  || i.name;
            }else{
                i = i.toString();
                var matchList = options.filter(function (o) {
                    if( o.value === i )return true;
                });
                text = (matchList[0] && matchList[0].text) ? matchList[0].text : i;
            }
            textList.push( text );
        }.bind(this));
        return textList;
    },

    getValueListByText: function( text ){
        var options, valueList=[];
        if( this.json.itemType === "dynamic" ){
        }else{
            options = this.getOptions();
            if( typeOf(options.then) === "function" ){
                return Promise.resolve(options).then(function (opt) {
                    return this._getValueListByText(text, opt);
                }.bind(this));
            }else{
                return this._getValueListByText(text, options);
            }
        }
        text.each(function ( i ) {
            var value;
            if (typeOf(i)==="object"){
                value = i.name || i.text || i.title || i.subject ;
            }else{
                value = i.toString();
            }
            valueList.push( value );
        }.bind(this));
        return valueList;
    },
    _getValueListByText: function(text, options){
        var valueList = [];
        text.each(function ( i ) {
            var value;
            if (typeOf(i)==="object"){
                value = i.name || i.text || i.title || i.subject;
            }else{
                i = i.toString();
                var matchList = options.filter(function (o) {
                    if( o.text === i )return true;
                });
                value = (matchList[0] && matchList[0].text) ? matchList[0].value : i;
            }
            valueList.push( value );
        }.bind(this));
        return valueList;
    },

    resetData: function(){
        //this._setBusinessData(this.getValue());
        this.setData(this.getValue());
    },

    getExcelData: function( type ){
        var value = this.getData();
        if( type === "value" )return o2.typeOf(value) === "array" ? value.join(", ") : value;

        var textList = this.getTextListByValue( value );
		return Promise.resolve(textList).then(function (tList) {
			return tList.join(", ");
		});
    },
    setExcelData: function(data, type){
        var arr = this.stringToArray(data);
        this.excelData = arr;
        if( type === "value" ){
            this.setData(arr, true);
        }else{
            var values = this.getValueListByText( arr );
            this.moduleExcelAG = Promise.resolve(values).then(function (vs) {
                this.setData(vs, true);
                this.moduleExcelAG = null;
            }.bind(this));
        }
    }
});