o2.xdesktop.requireapp("process.xform", "$module", null, false);
o2.xdesktop.requireapp("process.xform", "$elmodule", null, false);
/** @class elcommon 基于element ui的通用组件。
* @o2cn 通用组件
* @example
* //可以在脚本中获取该组件
* //方法1：
* var button = this.form.get("name"); //获取组件
* //方法2
* var button = this.target; //在组件事件脚本中获取
* @extends o2.xapplication.process.xform.$module
* @o2category formcomponents
* @o2range {process|cms|portal}
* @hideconstructor
*/
o2.xapplication.process.xform.elcommon = o2.appelcommon = new class(
/** @lends o2.xapplication.process.xform.elcommon# */
{
implements: [events],
extends: o2.app$elmodule,
/**
* @summary 组件的配置信息，同时也是vue组件的data。
* @member o2.xapplication.process.xform.elcommon#json {jsonobject}
* @example
* //可以在脚本中获取此对象，下面两行代码是等价的，它们获取的是同一个对象
* var json = this.form.get("elcommon").json; //获取组件的json对象
* var json = this.form.get("elcommon").vm.$data; //获取vue组件的data数据，
*
*/
// load: function(){
// this._loadmoduleevents();
// if (this.fireevent("queryload")){
// this._queryloaded();
// this._loaduserinterface();
// }
// },
//
// initialize: function(node, json, form, options){
// debugger;
// this.node = $(node);
// this.node.store("module", this);
// this.json = json;
// this.form = form;
// this.field = true;
// this.parentline = null;
// },
_checkvuehtml: function(){
var nodes = this.node.queryselectorall("*[v-model]");
this.tmpvuedata = {};
var arrs = ["el-checkbox-group"];
nodes.foreach(function(node){
var model = node.get("v-model");
if (model) this.tmpvuedata[model] = (arrs.indexof(node.tagname.tostring().tolowercase())===-1) ? "" : [];
}.bind(this));
},
_loaduserinterface: function(){
this.node.set("html", this._createelementhtml());
//this._checkvuehtml();
this._checkvmodel();
this.node.set({
"id": this.json.id,
"mwftype": this.json.type
});
this.node.addclass("o2_vue");
this._createvueapp();
},
// _createvueapp: function(){
// if (!this.vm) this._loadvue(this._mountvueapp.bind(this));
// },
//
// _loadvue: function(callback){
// if (!window.vue){
// o2.loadall({"css": "../o2_lib/vue/element/index.css", "js": ["vue", "elementui"]}, { "sequence": true }, callback);
// }else{
// if (callback) callback();
// }
// },
// _mountvueapp: function(){
// if (!this.vueapp) this.vueapp = this._createvueextend();
//
// /**
// * @summary vue对象实例
// * @see https://vuejs.org/
// * @member {vueinstance}
// */
// this.vm = new vue(this.vueapp).$mount(this.node);
// },
_createvueextend: function(){
// if (this.tmpvuedata){
// object.keys(this.tmpvuedata).each(function(k){
// this.form.macro.environment.data.check(k, this.tmpvuedata[k]);
// }.bind(this));
// }
if (this.vmodels && this.vmodels.length){
this.vmodels.foreach(function(m){
if (!this.json.hasownproperty(m)) this.json[m] = "";
}.bind(this));
}
var app = {};
if (this.json.vueapp && this.json.vueapp.code) app = this.form.macro.exec(this.json.vueapp.code, this);
if (!app) app = {};
if (app.data){
var ty = o2.typeof(app.data);
switch (ty){
case "object":
object.keys(app.data).each(function(k){
this.json[k] = app.data[k];
//this.form.macro.environment.data.add(k, app.data[k]);
}.bind(this));
app.data = this.json;
// app.data = this.json;
// app.data = object.merge(this.json, this.form.macro.environment.data);
break;
case "function":
var datafun = app.data;
var _slef = this;
app.data = function(){
var d = datafun();
//_self.form.macro.environment.data.add(_self.json.id, d);
object.keys(d).each(function(k){
_self.json[k] = d[k];
//_self.form.macro.environment.data.add(k, d[k]);
});
//var data = object.merge(_slef.json);
//return _self.form.macro.environment.data;
return _self.json;
};
break;
}
}else{
//app.data = this.form.macro.environment.data;
app.data = this.json;
}
var _self = this;
var mountedfun = app.mounted;
app.mounted = function(){
_self._aftermounted(this.$el);
if (mountedfun && o2.typeof(mountedfun)=="function") return mountedfun.apply(this);
};
this.appendvuewatch(app);
return app;
},
// _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.json.vuecss && this.json.vuecss.code){
// this.stylenode = this.node.loadcsstext(this.json.vuecss.code, {"notinject": true});
// this.stylenode.inject(this.node, "before");
// }
// },
// _filterhtml: function(html){
// var tmp = new element("div", {"html": html});
// var nodes = tmp.queryselectorall("*[v-model]");
// this.tmpvuedata = {};
// nodes.foreach(function(node){
// this.tmpvuedata[node.get("v-model")] = "";
// }.bind(this));
// return html;
// },
_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]);
// }
// }
// }
var nodes = this.node.queryselectorall("*[v-model]");
this.vmodels = [];
var arrs = ["el-checkbox-group"];
nodes.foreach(function(node){
var model = node.get("v-model");
var tag = node.tagname.tostring().tolowercase();
if (model){
var modelid = this.json.id.substring(0, this.json.id.lastindexof(".."));
modelid = (modelid) ? modelid ".." model : model;
this.json[model] = this._getbusinessdata(modelid);
if (!this.json[model]){
this.json[model] = (arrs.indexof(tag)===-1) ? "" : []
}
this.vmodels.push(model);
}
}.bind(this));
},
_createelementhtml: function(){
var html = this.json.vuetemplate || "";
// if (html) this._checkvmodel(html);
// return this._filterhtml(html);
return html;
},
resetdata: function(){
if (this.vmodels && this.vmodels.length){
this.vmodels.foreach(function(m){
var modelid = this.json.id.substring(0, this.json.id.lastindexof(".."));
modelid = (modelid) ? modelid ".." m : m;
this.json[m] = this._getbusinessdata(modelid);
}.bind(this));
}
},
});
source