o2.xdesktop.requireapp("process.xform", "$elinput", null, false);
/** @class elinput 基于element ui的颜色选择组件。
* @o2cn 颜色选择
* @example
* //可以在脚本中获取该组件
* //方法1：
* var input = this.form.get("name"); //获取组件
* //方法2
* var input = this.target; //在组件事件脚本中获取
* @extends mwf.xapplication.process.xform.$module
* @o2category formcomponents
* @o2range {process|cms|portal}
* @hideconstructor
* @see {@link https://element.eleme.cn/#/zh-cn/component/color-picker|element ui colorpicker 颜色选择器}
*/
mwf.xapplication.process.xform.elcolorpicker = mwf.appelcolorpicker = new class(
/** @lends o2.xapplication.process.xform.elcolorpicker# */
{
implements: [events],
extends: mwf.app$elinput,
options: {
"moduleevents": ["load", "queryload", "postload"],
/**
* 当绑定值变化时触发。this.event[0]为当前值
* @event mwf.xapplication.process.xform.elcolorpicker#change
* @see {@link https://element.eleme.cn/#/zh-cn/component/color-picker|颜色选择组件的events章节}
*/
/**
* 面板中当前显示的颜色发生改变时触发。this.event[0]当前显示的颜色值
* @event mwf.xapplication.process.xform.elcolorpicker#active-change
* @see {@link https://element.eleme.cn/#/zh-cn/component/color-picker|颜色选择组件的events章节}
*/
"elevents": ["change","active-change"]
},
_loadmergereadcontentnode: function( contentnode, data ){
// var d = o2.typeof( data.data ) === "array" ? data.data : [data.data];
// contentnode.set("text", d.join( this.json.rangeseparator ? " " this.json.rangeseparator " " : " 至 " ) );
var _self = this;
var json = object.clone(this.json);
json.isreadonly = true;
var id = this.json.id "_" data.key.replace(/-/g, "_");
json.id = id;
this._setbusinessdata(data.data, id);
var html = this.node.get("html");
contentnode.set("html", html);
var style = this.node.get("style");
contentnode.set("style", style);
contentnode.set("id", id);
if (this.form.all[id]) this.form.all[id] = null;
if (this.form.forms[id])this.form.forms[id] = null;
var module = this.form._loadmodule(json, contentnode, function () {
this.field = false;
if( _self.widget )this.widget = _self.widget;
});
this.form.modules.push(module);
this.form.addevent("getdata", function (data) {
if( data[id] )delete data[id];
})
},
__setreadonly: function(data){
if (this.isreadonly()) {
this.node.set("text", data);
if( this.json.elproperties ){
this.node.set(this.json.elproperties );
}
if (this.json.elstyles){
this.node.setstyles( this._parsestyles(this.json.elstyles) );
}
}
},
_loadnode: function(){
if (this.isreadonly()) this.json.disabled = true;
this._loadnodeedit();
},
_appendvuedata: function(){
if (!this.json.isreadonly && !this.form.json.isreadonly) this.json.isreadonly = false;
if (!this.json.disabled) this.json.disabled = false;
if (!this.json.showalpha) this.json.showalpha = false;
if (!this.json.colorformat) {
if( this.json.showalpha ){
this.json.colorformat = "hex";
}else{
this.json.colorformat = "rgb";
}
}
},
// appendvueextend: function(app){
// if (!app.methods) app.methods = {};
// app.methods.$loadelevent = function(ev){
// this.validationmode();
// if (ev==="change") this._setbusinessdata(this.getinputdata());
// if (this.json.events && this.json.events[ev] && this.json.events[ev].code){
// this.form.macro.fire(this.json.events[ev].code, this, event);
// }
// }.bind(this);
// },
_createelementhtml: function(){
var html = "