mwf.xdesktop.requireapp("process.xform", "elradio", null, false);
/** @class elradio 基于element ui的多选组件。
* @o2cn 多选组件
* @example
* //可以在脚本中获取该组件
* //方法1：
* var radio = this.form.get("name"); //获取组件
* //方法2
* var radio = this.target; //在组件事件脚本中获取
* @extends mwf.xapplication.process.xform.$module
* @o2category formcomponents
* @o2range {process|cms|portal}
* @hideconstructor
* @see {@link https://element.eleme.cn/#/zh-cn/component/checkbox|element ui checkbox 多选框}
*/
mwf.xapplication.process.xform.elcheckbox = mwf.appelcheckbox = new class(
/** @lends mwf.xapplication.process.xform.elcheckbox# */
{
implements: [events],
extends: mwf.appelradio,
options: {
/**
* 组件加载前触发。当前组件的queryload事件还没有在form里注册，通过this.form.get("fieldid")不能获取到当前组件，需要用this.target获取当前组件。
* @event mwf.xapplication.process.xform.elcheckbox#queryload
* @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zts|组件事件说明}
*/
/**
* 组件加载后触发。如果选项加载为异步，则异步处理完成后触发此事件
* @event mwf.xapplication.process.xform.elcheckbox#load
*/
/**
* 组件加载后触发.
* @event mwf.xapplication.process.xform.elcheckbox#postload
* @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zts|组件事件说明}
*/
"moduleevents": ["load", "queryload", "postload", "change"],
/**
* 当绑定值变化时触发的事件。this.event[0]为更新后的值
* @event mwf.xapplication.process.xform.elcheckbox#change
* @see {@link https://element.eleme.cn/#/zh-cn/component/checkbox|多选框的checkbox events章节}
*/
"elevents": ["change"]
},
/**
* @summary 组件的配置信息，同时也是vue组件的data。
* @member mwf.xapplication.process.xform.elradio#json {jsonobject}
* @example
* //可以在脚本中获取此对象，下面两行代码是等价的，它们获取的是同一个对象
* var json = this.form.get("elcheckbox").json; //获取组件的json对象
* var json = this.form.get("elcheckbox").vm.$data; //获取vue组件的data数据，
*
* //通过json对象操作element组件
* json.border = true; //带边框的多选按钮
* json.size = "small"; //设置多选按钮大小，仅border为true时有效
* json.textcolor = "#ff0000"; //设置按钮样式时，选中状态的文本颜色
* json.fillcolor = "#ff0000"; //设置按钮样式时，选中状态的背景颜色
*/
load: function(){
this._loadmoduleevents();
if (this.fireevent("queryload")){
this._queryloaded();
this._loaduserinterface();
}
},
_loadnode: function(){
this.node.empty();
if (this.isreadonly()){
this._loadnoderead();
}else{
this._loadnodeedit();
}
},
_loadmergereadcontentnode: function( contentnode, data ){
this._showvalue(contentnode, data.data)
},
_loadmergeeditnodebydefault: function(){
var data = this.getsortedsectiondata();
var businessdata = [];
data.each(function(d){
businessdata = businessdata.concat( d.data || [] );
});
this._setbusinessdata( businessdata );
this._loadnode();
},
_loadnoderead: function(){
this.node.empty();
this.node.set({
"nodeid": this.json.id,
"mwftype": this.json.type
});
var value = this.getvalue();
this._showvalue(this.node, value);
if( this.json.elproperties ){
this.node.set(this.json.elproperties );
}
if (this.json.elstyles){
this.node.setstyles( this._parsestyles(this.json.elstyles) );
}
this.fireevent("postload");
if( this.moduleselectag && typeof(this.moduleselectag.then) === "function" ){
this.moduleselectag.then(function () {
this.fireevent("load");
this.isloaded = true;
}.bind(this));
}else{
this.fireevent("load");
this.isloaded = true;
}
},
__showvalue: function(node, value, optionitems){
debugger;
if (value){
var texts = [];
optionitems.each(function(item){
var tmps = item.split("|");
var t = tmps[0];
var v = tmps[1] || t;
if (value.indexof(v)!=-1){
texts.push(t || v);
}
});
node.set("text", texts.join(", "));
}
},
_resetnodeedit: function(){
var div = new element("div");
div.inject(this.node, "after");
this.node.destroy();
this.node = div;
},
_loadnodeedit: function(){
if (!this.json.preprocessing) this._resetnodeedit();
this.setoptions();
},
setoptions: function(){
var optionitems = this.getoptions();
this._setoptions(optionitems);
},
_setoptions: function(optionitems){
var p = o2.promiseall(optionitems).then(function(radiovalues){
//this.moduleselectag = null;
return this._loadelradio(radiovalues);
}.bind(this), function(){
this.moduleselectag = null;
}.bind(this));
this.moduleselectag = promise.resolve(p);
},
_loadelradio: function(radiovalues){
return new promise(function(resolve){
if (radiovalues && o2.typeof(radiovalues)==="array"){
this.node.appendhtml(this._createelementhtml(radiovalues), "before");
var button = this.node.getprevious();
this.node.destroy();
this.node = button;
this.node.set({
"id": this.json.id,
"mwftype": this.json.type
});
this._createvueapp(resolve);
}
}.bind(this));
},
_createelementhtml: function(radiovalues){
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;
var html = "" : "";
}.bind(this));
html = " ";
return html;
},
_setvalue: function(value, m){
var mothed = m || "__setvalue";
if (!!value){
var p = o2.promiseall(value).then(function(v){
//if (o2.typeof(v)=="array") v = v[0];
if (this.moduleselectag){
this.modulevalueag = this.moduleselectag;
this.moduleselectag.then(function(){
this[mothed](v);
return v;
}.bind(this), function(){});
}else{
this[mothed](v)
}
return v;
}.bind(this), function(){});
this.modulevalueag = p;
if (this.modulevalueag) this.modulevalueag.then(function(){
this.modulevalueag = null;
}.bind(this), function(){
this.modulevalueag = null;
}.bind(this));
}else{
this[mothed](value);
}
},
__setvalue: function(value){
this._setbusinessdata(value);
this.json[this.json.$id] = (value) ? value : [];
},
__setdata: function(data){
this._setbusinessdata(data);
this.json[this.json.$id] = data;
this.validationmode();
this.fireevent("setdata");
},
_createvueapp: function(callback){
if (!this.vm){
this._loadvue(function(){
this._mountvueapp(callback);
}.bind(this));
}else{
if (callback) callback();
}
},
// _loadvue: function(callback){
// if (!window.vue){
// var vue = (o2.session.isdebugger) ? "vue_develop" : "vue";
// o2.loadall({"css": "../o2_lib/vue/element/index.css", "js": [vue, "elementui"]}, { "sequence": true }, callback);
// }else{
// if (callback) callback();
// }
// },
_mountvueapp: function(callback){
if (!this.vueapp) this.vueapp = this._createvueextend(callback);
/**
* @summary vue对象实例
* @see https://vuejs.org/
* @member {vueinstance}
*/
this.vm = new vue(this.vueapp);
this.vm.$mount(this.node);
},
_createvueextend: function(callback){
var _self = this;
return {
data: this._createvuedata(),
mounted: function(){
_self._aftermounted(this.$el);
if (callback) callback();
},
methods: {
change: function(v){
_self.validationmode();
if (_self.validation()) {
_self._setbusinessdata(v || []);
_self.fireevent("change");
}
}
}
};
},
_createvuedata: function(){
if (this.json.$id===this.json.id) this.form.macro.environment.data.check(this.json.$id);
this.json[this.json.$id] = this._getbusinessdata();
if (!this.json[this.json.$id] || !this.json[this.json.$id].length) this.json[this.json.$id] = [];
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.textcolor) this.json.textcolor = "";
if (!this.json.fillcolor) this.json.fillcolor = "";
if (!this.json.size) this.json.size = "";
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");
},
getinputdata: function(){
return this.json[this.json.$id];
},
_loadvuecss: function(){
if (this.stylenode){
this.node.removeclass(this.stylenode.get("id"));
}
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");
}
},
getexceldata: function( type ){
var value = this.getdata();
if( type === "value" )return value;
var options = this.getoptionsobj();
return promise.resolve(options).then(function (opts) {
value = o2.typeof(value) === "array" ? value : [value];
var arr = [];
value.each( function( a, i ){
var idx = opts.valuelist.indexof( a );
var text = idx > -1 ? opts.textlist[ idx ] : "";
if( !text )text = value;
arr.push( text );
});
return arr.join(", ");
});
},
setexceldata: function(d, type){
var arr = this.stringtoarray(d);
this.exceldata = arr;
if( type === "value" ){
this.setdata(value, true);
}else{
var options = this.getoptionsobj();
this.moduleexcelag = promise.resolve(options).then(function (opts) {
arr.each( function( a, i ){
var idx = opts.textlist.indexof( a );
var v = idx > -1 ? opts.valuelist[ idx ] : null;
arr[ i ] = v || a;
});
arr.clean();
this.json[this.json.$id] = arr;
this._setbusinessdata(arr);
this.setdata(arr, true);
this.moduleexcelag = null;
}.bind(this));
}
}
});
source