o2.xdesktop.requireapp("process.xform", "$module", null, false);
/** @classdesc $elmodule elementui组件类，此类为所有elementui组件的父类。
* @class
* @o2category formcomponents
* @hideconstructor
* */
o2.xapplication.process.xform.$elmodule = mwf.app$elmodule = new class(
/** @lends o2.xapplication.process.xform.$elmodule# */
{
implements: [events],
extends: mwf.app$module,
options: {
/**
* 组件加载前触发。queryload执行的时候，当前组件没有在form里注册，通过this.form.get("fieldid")不能获取到当前组件，需要用this.target获取。
* @event mwf.xapplication.process.xform.$elmodule#queryload
* @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zts|组件事件说明}
*/
/**
* 组件加载时触发.
* @event mwf.xapplication.process.xform.$elmodule#load
* @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zts|组件事件说明}
*/
/**
* 组件加载后触发.
* @event mwf.xapplication.process.xform.$elmodule#postload
* @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zts|组件事件说明}
*/
"moduleevents": ["load", "queryload", "postload"],
"elevents": ["focus", "blur", "change", "input", "clear"]
},
/**
* @summary 组件的配置信息，同时也是vue组件的data。
* @member mwf.xapplication.process.xform.elinput#json {jsonobject}
* @example
* //可以在脚本中获取此对象，下面两行代码是等价的，它们获取的是同一个对象
* var json = this.form.get("elinput").json; //获取组件的json对象
* var json = this.form.get("elinput").vm.$data; //获取vue组件的data数据，
*
* //通过json对象操作element组件
* json.size = "mini"; //改变输入框大小
* json.disabled = true; //设置输入框为禁用
*/
load: function(){
this._loadmoduleevents();
if (this.fireevent("queryload")){
this._queryloaded();
this._loaduserinterface();
}
},
_checkvmodel: function(text){
if (text){
this.vmodels = [];
var reg = /(?:v-model)(?:.lazy|.number|.trim)?(?:\s*=\s*)(?:["'])?([^"']*)/g;
var arr;
while ((arr = reg.exec(text)) !== null) {
if (arr.length>1 && arr[1]){
var modelid = this.json.id.substring(0, this.json.id.lastindexof(".."));
modelid = (modelid) ? modelid ".." arr[1] : arr[1];
this.json[arr[1]] = this._getbusinessdata(modelid) || "";
this.vmodels.push(arr[1]);
}
}
}
},
_loaduserinterface: function(){
this.node.appendhtml(this._createelementhtml(), "before");
var input = this.node.getprevious();
this.node.destroy();
this.node = input;
this.node.set({
"id": this.json.id,
"mwftype": this.json.type
});
this.node.addclass("o2_vue");
this._createvueapp();
},
_createvueapp: function(){
if (this.json.vueslot) this._checkvmodel(this.json.vueslot);
if (!this.vm) this._loadvue(this._mountvueapp.bind(this));
},
_loadvue: function(callback){
var flag = (o2.session.isdebugger && this.form.app.inbrowser);
var vue = flag ? "vue_develop" : "vue";
//var vuename = flag ? "vue" : "cn";
// if (!window.vue || window.vue.name!==vuename){
// o2.loadall({"css": "../o2_lib/vue/element/index.css", "js": [vue, "elementui"]}, { "sequence": true }, callback);
// }else{
// if (callback) callback();
// }
o2.loadall({"css": "../o2_lib/vue/element/index.css", "js": [vue, "elementui"]}, { "sequence": true }, callback);
},
_mountvueapp: function(){
if (!this.vueapp) this.vueapp = this._createvueextend();
/**
* @summary vue对象实例
* @see https://vuejs.org/
* @member {vueinstance}
*/
this.vm = new vue(this.vueapp);
this.vm.$mount(this.node);
},
_createvueextend: function(){
var _self = this;
var app = {
data: this._createvuedata(),
mounted: function(){
_self._aftermounted(this.$el);
}
};
app.methods = this._createvuemethods(app);
this.appendvueextend(app);
this.appendvuewatch(app);
this._aftercreatevueextend(app);
return app;
},
appendvuewatch: function(app){
if (this.vmodels && this.vmodels.length){
app.watch = app.watch || {};
this.vmodels.foreach(function(m){
app.watch[m] = function(val, oldval){
var modelid = this.json.id.substring(0, this.json.id.lastindexof(".."));
modelid = (modelid) ? modelid ".." m : m;
this._setbusinessdata(val, modelid);
}.bind(this);
}.bind(this));
}
},
appendvuemethods: function(methods){},
appendvueextend: function(app){
// if (!app.methods) app.methods = {};
// this.options.elevents.foreach(function(k){
// this._createeventfunction(app, k);
// }.bind(this));
},
appendvueevents: function(methods){
this.options.elevents.foreach(function(k){
this._createeventfunction(methods, k);
}.bind(this));
},
_createeventfunction: function(methods, k){
methods["$loadelevent_" k.camelcase()] = function(){
var flag = true;
if (k==="change"){
this.validationmode();
this._setbusinessdata(this.getinputdata());
if( !this.validation() )flag = false;
}
if (this.json.events && this.json.events[k] && this.json.events[k].code){
this.form.macro.fire(this.json.events[k].code, this, arguments);
}
if( flag )this.fireevent(k, arguments);
}.bind(this);
},
_createvuemethods: function(){
var methods = {};
if (this.json.vuemethods && this.json.vuemethods.code){
methods = this.form.macro.exec(this.json.vuemethods.code, this);
}
this.appendvueevents(methods);
this.appendvuemethods(methods);
return methods || {};
},
_createvuedata: function(){
if (this.vmodels && this.vmodels.length){
this.vmodels.foreach(function(m){
if (!this.json.hasownproperty(m)) this.json[m] = "";
}.bind(this));
}
if (this.json.vuedata && this.json.vuedata.code){
var d = this.form.macro.exec(this.json.vuedata.code, this);
this.json = object.merge(d, this.json);
}
if (this.json.$id===this.json.id) this.form.macro.environment.data.check(this.json.$id);
this.json[this.json.$id] = this._getbusinessdata();
this._appendvuedata();
return this.json;
},
_aftermounted: function(el){
this.node = el;
this.node.set({
"id": this.json.id,
"mwftype": this.json.type
});
this._loadvuecss();
this._loaddomevents();
this._afterloaded();
this.fireevent("postload");
this.fireevent("load");
},
_loadvuecss: function(){
if (this.stylenode){
this.node.removeclass(this.stylenode.get("id"));
}
if (this.json.vuecss && this.json.vuecss.code){
this.stylenode = this.node.getparent().loadcsstext(this.json.vuecss.code, {"notinject": true});
this.stylenode.inject(this.node.getparent(), "before");
}
},
_appendvuedata: function(){},
_createelementhtml: function(){
return "";
},
_aftercreatevueextend: function (app) {}
});
source