mwf.xdesktop.requireapp("process.xform", "$module", null, false);
/** @class writingboard 手写板组件。
* @o2cn 手写板
* @example
* //可以在脚本中获取该组件
* //方法1：
* var writingboard = this.form.get("name"); //获取组件
* //方法2
* var writingboard = this.target; //在组件事件脚本中获取
* @extends mwf.xapplication.process.xform.$module
* @o2category formcomponents
* @o2range {process|cms}
* @hideconstructor
*/
mwf.xapplication.process.xform.writingboard = mwf.appwritingboard = new class(
/** @lends mwf.xapplication.process.xform.writingboard# */
{
implements: [events],
extends: mwf.app$module,
options: {
"moduleevents": ["load", "queryload", "postload","change"]
},
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;
},
_loaduserinterface: function () {
this.field = true;
this.node.empty();
if (!this.isreadonly()) {
var actionnode = new element("div").inject(this.node);
actionnode.set({
//"id": this.json.id,
"text": this.json.name || this.json.id,
"styles": this._parsestyles(this.json.actionstyles || {})
});
actionnode.addevent("click", function () {
this.validationmode();
var d = this._getbusinessdata();
if (layout.mobile) {
window.settimeout(function () {
this.handwriting(d);
}.bind(this), 100)
} else {
this.handwriting(d);
}
}.bind(this));
}
var data = this._getbusinessdata();
if (data) {
var img = new element("img", {
src: mwf.xdesktop.getimagesrc(data)
});
if (this.json.imagestyles) {
img.setstyles(this._parsestyles(this.json.imagestyles));
}
if( !this.json.imagestyles || !this.json.imagestyles["max-width"] ){
img.setstyles({
"max-width": "90%"
})
}
img.inject(this.node);
}
this.fieldmoduleloaded = true;
},
gettextdata: function () {
var value = this._getbusinessdata() || "";
return {"value": [value], "text": [value]};
},
/**
* @summary 判断组件值是否为空.
* @example
* if( this.form.get('fieldid').isempty() ){
* this.form.notice('请进行手写', 'warn');
* }
* @return {boolean} 值是否为空.
*/
isempty: function () {
return !this.getdata();
},
/**
* 获取手写图片的id。
* @summary 获取手写图片的id。
* @example
* var id = this.form.get('fieldid').getdata(); //获取手写图片的id
* var url = mwf.xdesktop.getimagesrc( id ); //获取图片的url
*/
getdata: function (data) {
return this._getbusinessdata() || "";
},
setdata: function (data) {
this._setbusinessdata(data);
var img = this.node.getelement("img");
if( !data ){
if(img)img.destroy();
return;
}
if (img){
img.set("src", mwf.xdesktop.getimagesrc(data))
}else{
img = new element("img", {
src: mwf.xdesktop.getimagesrc(data)
}).inject(this.node);
}
if (this.json.imagestyles) {
img.setstyles(this._parsestyles(this.json.imagestyles));
}
if( !this.json.imagestyles || !this.json.imagestyles["max-width"] ){
img.setstyles({
"max-width": "90%"
})
}
},
/**
* @summary 弹出手写板.
* @example
* this.form.get("fieldid").handwriting();
*/
handwriting: function () {
if (!this.handwritingnode) this.createhandwriting();
this.handwritingnode.show();
if (layout.mobile) {
this.handwritingnode.setstyles({
"top": "0px",
"left": "0px"
});
} else {
this.handwritingnode.position({
"relativeto": this.form.app.content || this.form.container,
"position": "center",
"edge": "center"
});
//var p = this.handwritingnode.getposition(this.form.app.content);
var p = this.handwritingnode.getposition(this.handwritingnode.getoffsetparent());
var top = p.y;
var left = p.x;
if (p.y < 0) top = 10;
if (p.x < 0) left = 10;
this.handwritingnode.setstyles({
"top": "" top "px",
"left": "" left "px"
});
}
},
createhandwriting: function () {
/**
* @summary 手写板容器.
* @member {element}
*/
this.handwritingnode = new element("div", {"styles": this.form.css.handwritingnode}).inject(this.node, "after");
var x, y;
if(layout.mobile){
var bodysize = $(document.body).getsize();
x = bodysize.x;
y = bodysize.y;
this.json.tabletwidth = 0;
this.json.tabletheight = 0;
}else{
var size = this.node.getsize();
x = math.max(this.json.tabletwidth || size.x, 600);
this.json.tabletwidth = x;
y = math.max(this.json.tabletheight ? (parseint(this.json.tabletheight) 110) : size.y, 320);
}
var zidx = this.node.getstyle("z-index").toint() || 0;
zidx = (zidx < 1000) ? 1000 : zidx;
this.handwritingnode.setstyles({
"height": "" y "px",
"width": "" x "px",
"z-index": zidx 1
});
if (layout.mobile) {
this.handwritingnode.addevent('touchmove', function (e) {
e.preventdefault();
});
this.handwritingnode.setstyles({
"top": "0px",
"left": "0px"
}).inject($(document.body));
} else {
this.handwritingnode.position({
"relativeto": this.node,
"position": "center",
"edge": "center"
});
}
this.handwritingareanode = new element("div", {"styles": this.form.css.handwritingareanode}).inject(this.handwritingnode);
if( !layout.mobile ){
this.handwritingactionnode = new element("div", {
"styles": this.form.css.handwritingactionnode,
"text": mwf.xapplication.process.work.lp.savewrite
}).inject(this.handwritingnode);
var h = this.handwritingactionnode.getsize().y this.handwritingactionnode.getstyle("margin-top").toint() this.handwritingactionnode.getstyle("margin-bottom").toint();
h = y - h;
this.handwritingareanode.setstyle("height", "" h "px");
}else{
this.handwritingareanode.setstyle("height", "" y "px");
}
this.handwritingfile = {};
mwf.require("mwf.widget.tablet", function () {
var id = this.getdata();
var opt = {
"style": "default",
"imagesrc": id ? mwf.xdesktop.getimagesrc( id ) : "",
"toolhidden": this.json.toolhidden || [],
"contentwidth": this.json.tabletwidth || 0,
"contentheight": this.json.tabletheight || 0,
"onsave": function (base64code, base64image, imagefile) {
this.handwritingnode.hide();
if( this.tablet.isblank() ){
this.setdata("");
this.validation();
this.fireevent("change");
}else{
this.upload(function (json) {
var data = json.data;
this.setdata(data ? data.id : "");
this.validation();
this.fireevent("change");
}.bind(this));
}
}.bind(this),
"oncancel": function () {
this.handwritingnode.hide();
}.bind(this)
};
if (layout.mobile) {
opt.tools = [
"save", "|",
"undo",
"redo", "|",
"reset", "|",
"cancel"
]
}
/**
* @summary 手写板组件.
* @member {o2.widget.tablet}
* @example
* var tablet = this.form.get("fieldid").tablet; //获取手写板
* tablet.cancel(); //关闭手写板
*/
this.tablet = new mwf.widget.tablet(this.handwritingareanode, opt, null);
this.tablet.load();
}.bind(this));
if(this.handwritingactionnode){
this.handwritingactionnode.addevent("click", function () {
//this.handwritingnode.hide();
if (this.tablet) this.tablet.save();
}.bind(this));
}
},
upload: function( callback ){
var img = this.tablet.getimage( null, true );
if(img)promise.resolve( img ).then(function( image ){
promise.resolve( this.tablet.getformdata(image) ).then(function (formdata) {
var filename = "handwriting" "_" new date().gettime();
if( image.type && image.type.contains("/") ) {
image.name = filename "." image.type.split("/")[1];
}
o2.xdesktop.uploadimagebyscale(
this.form.businessdata.work.job,
"processplatformjob",
0, //maxsize
formdata,
image,
function (json) {
if (callback) callback(json);
}.bind(this),
function () {
}.bind(this)
);
}.bind(this))
}.bind(this))
},
createerrornode: function (text) {
var node = new element("div");
var iconnode = new element("div", {
"styles": {
"width": "20px",
"height": "20px",
"float": "left",
"background": " center center no-repeat"
}
}).inject(node);
var textnode = new element("div", {
"styles": {
"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", "1px solid red");
this.errnode = this.createerrornode(text).inject(this.node, "after");
this.shownotvalidationmode(this.node);
if (!this.errnode.isintoview()) this.errnode.scrollintoview(false);
}
},
shownotvalidationmode: function (node) {
var p = node.getparent("div");
if (p) {
if (p.get("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.getdata();
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 (v < data.value) {
this.notvalidationmode(data.prompt);
return false;
}
break;
case "equal":
if (v == data.value) {
this.notvalidationmode(data.prompt);
return false;
}
break;
case "neq":
if (v != data.value) {
this.notvalidationmode(data.prompt);
return false;
}
break;
case "contain":
if (v.indexof(data.value) != -1) {
this.notvalidationmode(data.prompt);
return false;
}
break;
case "notcontain":
if (v.indexof(data.value) == -1) {
this.notvalidationmode(data.prompt);
return false;
}
break;
}
}
return true;
},
validationconfig: function (routename, opinion) {
if (this.json.validationconfig) {
if (this.json.validationconfig.length) {
for (var i = 0; i < this.json.validationconfig.length; i ) {
var data = this.json.validationconfig[i];
if (!this.validationconfigitem(routename, data)) return false;
}
}
return true;
}
return true;
},
validation: function (routename, opinion) {
if (!this.validationconfig(routename, opinion)) return false;
if (!this.json.validation) return true;
if (!this.json.validation.code) return true;
this.currentroutename = routename;
var flag = this.form.macro.exec(this.json.validation.code, this);
this.currentroutename = "";
if (!flag) flag = mwf.xapplication.process.xform.lp.notvalidation;
if (flag.tostring() != "true") {
this.notvalidationmode(flag);
return false;
}
return true;
},
_parsestyles: function (styles) {
object.each(styles, function (value, key) {
if ((value.indexof("x_processplatform_assemble_surface") != -1 || value.indexof("x_portal_assemble_surface") != -1 || value.indexof("x_cms_assemble_control") != -1)) {
var host1 = mwf.actions.gethost("x_processplatform_assemble_surface");
var host2 = mwf.actions.gethost("x_portal_assemble_surface");
var host3 = mwf.actions.gethost("x_cms_assemble_control");
if (value.indexof("/x_processplatform_assemble_surface") !== -1) {
value = value.replace("/x_processplatform_assemble_surface", host1 "/x_processplatform_assemble_surface");
} else if (value.indexof("x_processplatform_assemble_surface") !== -1) {
value = value.replace("x_processplatform_assemble_surface", host1 "/x_processplatform_assemble_surface");
}
if (value.indexof("/x_portal_assemble_surface") !== -1) {
value = value.replace("/x_portal_assemble_surface", host2 "/x_portal_assemble_surface");
} else if (value.indexof("x_portal_assemble_surface") !== -1) {
value = value.replace("x_portal_assemble_surface", host2 "/x_portal_assemble_surface");
}
if (value.indexof("/x_cms_assemble_control") !== -1) {
value = value.replace("/x_cms_assemble_control", host3 "/x_cms_assemble_control");
} else if (value.indexof("x_cms_assemble_control") !== -1) {
value = value.replace("x_cms_assemble_control", host3 "/x_cms_assemble_control");
}
value = o2.filter;
}
}.bind(this));
return styles;
}
});source