MWF.xDesktop.requireApp("process.Xform", "$Module", null, false); /** @class $Input 组件类,此类为所有输入组件的父类 * @hideconstructor * @o2category FormComponents * @extends MWF.xApplication.process.Xform.$Module * @abstract */ MWF.xApplication.process.Xform.$Input = MWF.APP$Input = new Class( /** @lends MWF.xApplication.process.Xform.$Input# */ { Implements: [Events], Extends: MWF.APP$Module, iconStyle: "personfieldIcon", options: { "moduleEvents": ["change", "load", "queryLoad", "postLoad"] }, 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; this.nodeHtml = this.node.get("html"); }, _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(); } } }, _loadDomEvents: function(){ Object.each(this.json.events, function(e, key){ if (e.code){ if (this.options.moduleEvents.indexOf(key)===-1){ (this.node.getFirst() || this.node).addEvent(key, function(event){ return this.form.Macro.fire(e.code, this, event); }.bind(this)); } } }.bind(this)); }, _loadEvents: function(){ Object.each(this.json.events, function(e, key){ if (e.code){ if (this.options.moduleEvents.indexOf(key)!==-1){ this.addEvent(key, function(event){ return this.form.Macro.fire(e.code, this, event); }.bind(this)); }else{ (this.node.getFirst() || this.node).addEvent(key, function(event){ return this.form.Macro.fire(e.code, this, event); }.bind(this)); } } }.bind(this)); }, addModuleEvent: function(key, fun){ if (this.options.moduleEvents.indexOf(key)!==-1){ this.addEvent(key, function(event){ return (fun) ? fun(this, event) : null; }.bind(this)); }else{ (this.node.getFirst() || this.node).addEvent(key, function(event){ return (fun) ? fun(this, event) : null; }.bind(this)); } }, /** * @summary 重新加载组件。会执行postLoad事件。 * @example * this.form.get("fieldId").reload(); //重新加载事件 */ reload: function(){ if( this.iconNode ){ this.iconNode.destroy(); this.iconNode = null; } if( this.descriptionNode ){ this.descriptionNode.destroy(); this.descriptionNode = null; } this.node.empty(); 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 }); }, loadDescription: function(){ if (this.isReadonly())return; var v = this._getBusinessData(); if (!v){ if (this.json.description){ var size, w; if( this.node.offsetParent === null ){ //隐藏 size = { y: 26 } }else{ size = this.node.getFirst().getSize(); w = size.x-3; if( this.hasIcon() ){ if (COMMON.Browser.safari) w = w-20; } } /** * @summary 描述信息节点,允许用户手工输入的组件才有此节点,只读情况下无此节点. * @member {Element} */ this.descriptionNode = new Element("div", {"styles": this.form.css.descriptionNode, "text": this.json.description}).inject(this.node); this.descriptionNode.setStyles({ "height": ""+size.y+"px", "line-height": ""+size.y+"px" }); if( w )this.descriptionNode.setStyles({ "width": ""+w+"px" }); this.setDescriptionEvent(); } } }, setDescriptionEvent: function(){ if (this.descriptionNode){ this.descriptionNode.addEvents({ "mousedown": function(){ this.descriptionNode.setStyle("display", "none"); this.clickSelect(); }.bind(this) }); this.node.getFirst().addEvents({ "focus": function(){ if (this.descriptionNode) this.descriptionNode.setStyle("display", "none"); }.bind(this), "blur": function(){ if (!this.node.getFirst().get("value")) if (this.descriptionNode) this.descriptionNode.setStyle("display", "block"); }.bind(this) }); } }, checkDescription: function(){ if (!this.node.getFirst().get("value")){ if (this.descriptionNode) this.descriptionNode.setStyle("display", "block"); }else{ if (this.descriptionNode) this.descriptionNode.setStyle("display", "none"); } }, _resetNodeEdit: function(){ var input = new Element("input", { "styles": { "background": "transparent", "width": "100%", "border": "0px" }, "readonly": true }); var node = new Element("div", {"styles": { "overflow": (this.json.styles && this.json.styles.overflow) ? this.json.styles.overflow : "hidden", "position": "relative", "margin-right": this.hasIcon() ? "20px" : "0px", "padding-right": "4px" }}).inject(this.node, "after"); input.inject(node); this.node.destroy(); this.node = node; }, hasIcon: function(){ return this.json.showIcon!='no' && ( !this.form.json || !this.form.json.hideModuleIcon ); }, _loadNodeEdit: function(){ if (!this.json.preprocessing) this._resetNodeEdit(); var input = this.node.getFirst(); if( !input && this.nodeHtml ){ this.node.set("html", this.nodeHtml); input = this.node.getFirst(); } input.set(this.json.properties); this.node.set({ "id": this.json.id, "MWFType": this.json.type, "readonly": true, "events": { "click": this.clickSelect.bind(this) } }); if ( this.hasIcon() ){ this.iconNode = new Element("div", { "styles": this.form.css[this.iconStyle], "events": { "click": this.clickSelect.bind(this) } }).inject(this.node, "before"); }else if( this.form.json.nodeStyleWithhideModuleIcon ){ this.node.setStyles(this.form.json.nodeStyleWithhideModuleIcon) } this.node.getFirst().addEvent("change", function(){ this.validationMode(); if (this.validation()) { this._setBusinessData(this.getInputData("change")); this.fireEvent("change"); } }.bind(this)); // // var inputNode = this.node.getFirst(); // if (inputNode) inputNode.addEvent("input", function(e){ // var v=e.target.get("value"); // this._setEnvironmentData(v); // }.bind(this)); }, _loadStyles: function(){ if (this.json.styles) this.node.setStyles(this.json.styles); if (this.json.inputStyles) 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")) } }, _computeValue: function(value){ return (this.json.defaultValue && this.json.defaultValue.code) ? this.form.Macro.exec(this.json.defaultValue.code, this): (value || ""); }, getValue: function(){ if (this.moduleValueAG) return this.moduleValueAG; var value = this._getBusinessData(); if (!value) value = this._computeValue(); return value || ""; }, _setValue: function(value){ // if (value && value.isAG){ // var ag = o2.AG.all(value).then(function(v){ // if (o2.typeOf(v)=="array") v = v[0]; // this.__setValue(v); // }.bind(this)); // this.moduleValueAG = ag; // ag.then(function(){ // this.moduleValueAG = null; // }.bind(this)); // }else { if (!!value && o2.typeOf(value.then)=="function"){ var p = Promise.resolve(value).then(function(v){ this.__setValue(v); }.bind(this), function(){}); this.moduleValueAG = p; }else{ this.moduleValueAG = null; this.__setValue(value); } //this.__setValue(value); // } }, __setValue: function(value){ this.moduleValueAG = null; this._setBusinessData(value); if (this.node.getFirst()) this.node.getFirst().set("value", value || ""); if (this.isReadonly()) this.node.set("text", value); this.moduleValueAG = null; this.fieldModuleLoaded = true; return value; }, _loadValue: function(){ this._setValue(this.getValue()); }, clickSelect: function(){ }, _afterLoaded: function(){ // if (this.iconNode){ //// var p = this.node.getPosition(); //// var s = this.node.getSize(); //// var is = this.iconNode.getSize(); //// //// var y = p.y; //// var x = p.x+s.x-is.x; // this.iconNode.setStyles({ // "top": "5px", // "left": "-18px" // }); // } if (!this.isReadonly()){ this.loadDescription(); } }, _beforeReloaded: function(){}, _afterReloaded: function(){}, /** * @summary 判断组件是否只读. * @example * var readonly = this.form.get('subject').isReadonly(); * @return {Boolean} 是否只读. */ isReadonly : function(){ return !!(this.readonly || this.json.isReadonly || this.form.json.isReadonly || this.isSectionMergeRead()); }, getTextData: function(){ //var value = this.node.get("value"); //var text = this.node.get("text"); var value = (this.node.getFirst()) ? this.node.getFirst().get("value") : this.node.get("text"); var text = (this.node.getFirst()) ? this.node.getFirst().get("text") : this.node.get("text"); return {"value": [value || ""] , "text": [text || value || ""]}; }, /** * @summary 判断组件值是否为空. * @example * if( this.form.get('subject').isEmpty() ){ * this.form.notice('标题不能为空', 'warn'); * } * @return {Boolean} 值是否为空. */ isEmpty : function(){ var data = this.getData(); return !data || !data.trim(); }, /** * 在脚本中使用 this.data[fieldId] 也可以获取组件值。 * 区别如下:
* 1、当使用Promise的时候
* 使用异步函数生成器(Promise)为组件赋值的时候,用getData方法立即获取数据,可能返回修改前的值,当Promise执行完成以后,会返回修改后的值。
* this.data[fieldId] 立即获取数据,可能获取到异步函数生成器,当Promise执行完成以后,会返回修改后的值。
* {@link https://www.yuque.com/o2oa/ixsnyt/ws07m0#EggIl|具体差异请查看链接}
* 2、当表单上没有对应组件的时候,可以使用this.data[fieldId]获取值,但是this.form.get('fieldId')无法获取到组件。 * @summary 获取组件值。 * @example * var data = this.form.get('fieldId').getData(); //没有使用promise的情况、 * @example * //如果无法确定表单上是否有组件,需要判断 * var data; * if( this.form.get('fieldId') ){ //判断表单是否有无对应组件 * data = this.form.get('fieldId').getData(); * }else{ * data = this.data['fieldId']; //直接从数据中获取字段值 * } * @example * //使用Promise的情况 * var field = this.form.get("fieldId"); * var dict = new this.Dict("test"); //test为数据字典名称 * var promise = dict.get("tools", true); //异步使用数据字典的get方法时返回Promise,参数true表示异步 * promise.then( function(){ * var data = field.getData(); //此时由于异步请求已经执行完毕,getData方法获取到了数据字典的值 * }) * field.setData( promise ); * @return 组件的数据. */ getData: function(when){ if (this.json.compute == "save") this._setValue(this._computeValue()); return this.getInputData(); }, getInputData: function(){ if (this.node.getFirst()){ return this.node.getFirst().get("value"); }else{ return this._getBusinessData(); } }, // /** // * @summary 重置组件的值为默认值或置空。 // * @example // * this.form.get('subject').resetData(); // */ resetData: function(){ this.setData(this.getValue()); }, /**当参数为Promise的时候,请参考文档: {@link https://www.yuque.com/o2oa/ixsnyt/ws07m0|使用Promise处理表单异步}
* 当表单上没有对应组件的时候,可以使用this.data.add(fieldId, data, true) 赋值。 * @summary 为组件赋值。 * @param data{String|Promise} . * @param fireChange{boolean} 可选,是否触发change事件,默认false. * @example * this.form.get("fieldId").setData("test"); //赋文本值 * @example * //如果无法确定表单上是否有组件,需要判断 * if( this.form.get('fieldId') ){ //判断表单是否有无对应组件 * this.form.get('fieldId').setData( data ); * }else{ * this.data.add(fieldId, data, true); * } * @example * //使用Promise * var field = this.form.get("fieldId"); * var dict = new this.Dict("test"); //test为数据字典名称 * var promise = dict.get("tools", true); //异步使用数据字典的get方法时返回Promise,参数true表示异步 * field.setData( promise ); */ setData: function(data, fireChange){ // if (data && data.isAG){ // var ag = o2.AG.all(data).then(function(v){ // if (o2.typeOf(v)=="array") v = v[0]; // this.__setData(v); // }.bind(this)); // this.moduleValueAG = ag; // ag.then(function(){ // this.moduleValueAG = null; // }.bind(this)); // }else{ if (!!data && o2.typeOf(data.then)=="function"){ var p = o2.promiseAll(data).then(function(v){ this.__setData(v, fireChange); // if (this.node.getFirst() && !this.readonly && !this.json.isReadonly) { // this.checkDescription(); // this.validationMode(); // } }.bind(this), function(){}); this.moduleValueAG = p; p.then(function(){ this.moduleValueAG = null; }.bind(this), function(){ this.moduleValueAG = null; }.bind(this)); }else{ this.moduleValueAG = null; this.__setData(data, fireChange); // if (this.node.getFirst() && !this.readonly && !this.json.isReadonly) { // this.checkDescription(); // this.validationMode(); // } } //this.__setData(data); //} }, __setData: function(data, fireChange){ var old = this.getInputData(); this._setBusinessData(data); if (this.node.getFirst()){ this.node.getFirst().set("value", data); this.checkDescription(); this.validationMode(); }else{ this.node.set("text", data); } if (fireChange && old!==data) this.fireEvent("change"); this.moduleValueAG = null; }, createErrorNode: function(text){ //var size = this.node.getFirst().getSize(); //var w = size.x-3; //if (COMMON.Browser.safari) w = w-20; //node.setStyles({ // "width": ""+w+"px", // "height": ""+size.y+"px", // "line-height": ""+size.y+"px", // "position": "absolute", // "top": "0px" //}); var node; if( this.form.json.errorStyle ){ if( this.form.json.errorStyle.type === "notice" ){ if( !this.form.errorNoticing ){ //如果是弹出 this.form.errorNoticing = true; this.form.notice(text, "error", this.node, null, null, { onClose : function () { this.form.errorNoticing = false; }.bind(this) }); } }else{ node = new Element("div",{ "styles" : this.form.json.errorStyle.node, "text": text }); if( this.form.json.errorStyle.close ){ var closeNode = new Element("div",{ "styles" : this.form.json.errorStyle.close , "events": { "click" : function(){ //this.destroy(); this.validationMode(); }.bind(this) } }).inject(node); } } }else{ node = new Element("div"); var iconNode = new Element("div", { "styles": { "width": "20px", "height": "20px", "float": "left", "background": "url("+"../x_component_process_Xform/$Form/default/icon/error.png) center center no-repeat" } }).inject(node); var textNode = new Element("div", { "styles": { "height": "20px", "line-height": "20px", "margin-left": "20px", "color": "red", "word-break": "keep-all" }, "text": text }).inject(node); } return node; }, notValidationMode: function(text){ if (!this.isNotValidationMode){ this.isNotValidationMode = true; this.node.store("borderStyle", this.node.getStyles("border-left", "border-right", "border-top", "border-bottom")); this.node.setStyle("border-color", "red"); this.errNode = this.createErrorNode(text); //if (this.iconNode){ // this.errNode.inject(this.iconNode, "after"); //}else{ this.errNode.inject(this.node, "after"); //} this.showNotValidationMode(this.node); var parentNode = this.errNode; while( parentNode && parentNode.offsetParent === null ){ parentNode = parentNode.getParent(); } if ( parentNode && !parentNode.isIntoView()) parentNode.scrollIntoView(false); } }, showNotValidationMode: function(node){ var p = node.getParent("div"); if (p){ var mwftype = p.get("MWFtype") || p.get("mwftype"); if (mwftype == "tab$Content"){ if (p.getParent("div").getStyle("display")=="none"){ var contentAreaNode = p.getParent("div").getParent("div"); var tabAreaNode = contentAreaNode.getPrevious("div"); var idx = contentAreaNode.getChildren().indexOf(p.getParent("div")); var tabNode = tabAreaNode.getLast().getFirst().getChildren()[idx]; tabNode.click(); p = tabAreaNode.getParent("div"); } } this.showNotValidationMode(p); } }, validationMode: function(){ if (this.isNotValidationMode){ this.isNotValidationMode = false; this.node.setStyles(this.node.retrieve("borderStyle")); if (this.errNode){ this.errNode.destroy(); this.errNode = null; } } }, validationConfigItem: function(routeName, data){ var flag = (data.status==="all") ? true: (routeName === data.decision); if (flag){ var n = this.getInputData(); var v = (data.valueType==="value") ? n : n.length; switch (data.operateor){ case "isnull": if (!v){ this.notValidationMode(data.prompt); return false; } break; case "notnull": if (v){ this.notValidationMode(data.prompt); return false; } break; case "gt": if (v>data.value){ this.notValidationMode(data.prompt); return false; } break; case "lt": if (vdata.value)return data.prompt; break; case "lt": if (v