FPhoto_wev8.js
13.2 KB
define("FPhoto_html",function(){return'<div id="NMEC_${id}" class="wev-comp-${compType}" data-form="${form}">\t{@if readonly}\t\t<div class="wev-field wev-vertical{@if required} wev-field-required{@/if}">\t\t\t<div {@if !field.label}style="display:none;"{@/if}>${field.label}</div>\t\t\t<div>\t\t\t\t<div class="wev-img-wrapper">\t\t\t\t</div>\t\t\t\t<input type="hidden" name="fieldname_${field.name}" fieldid="${field.id}"/>\t\t\t\t<input type="hidden" name="type_${field.name}" value="photo" />\t\t\t</div>\t\t</div>\t{@else}\t\t<div class="wev-field wev-vertical{@if required} wev-field-required{@/if}">\t\t\t<div {@if !field.label}style="display:none;"{@/if}>${field.label}</div>\t\t\t<div>\t\t\t\t<div class="wev-img-wrapper">\t\t\t\t\t<div class="wev-upload wev-img">\t\t\t\t\t\t{@if client == "browser"}\t\t\t\t\t\t<input type="file" name="file" accept="image/*" single="single"/>\t\t\t\t\t\t{@/if}\t\t\t\t\t\t<span>$i18n{SELECT_IMAGE}</span>\t\t\t\t\t</div>\t\t\t\t\t<div class="wev-upload-tip wev-upload-hide"></div>\t\t\t\t</div>\t\t\t\t<input type="hidden" name="fieldname_${field.name}" fieldid="${field.id}"/>\t\t\t\t<input type="hidden" name="type_${field.name}" value="photo" />\t\t\t</div>\t\t</div>\t{@/if}</div>'}),define(["mUtil","Component","i18n"],function(I,a,_){return window._p_addPhoto_uploaded=function(e,t,i){var a=function(e,t){var i=I.getInstance(e);t&&i&&i.photoProcess("data:image/jpeg;base64,"+t)};try{void 0===i?a(t,e):a(i,t)}catch(t){I.getLabel(5307,"拍照插件异常",function(e){Mobile_NS.alert(e+" >> "+t.message)})}},a.init(function(e){var f,m,g,p,v,y={},h=[],w={};a.super(this,e),this.type="FPhoto",this.tpl=this.type+"_html",this.css=this.type+"_css",this.dataload=!0;var b=this.viewModel={form:"",field:{label:"",name:"",id:"",value:""},compress:{quality:1,zoom:1},watermark:{add:!1,position:1,font:"Verdana",color:"#F8F8F8",fontsize:"18",fontweight:"normal",content:""},draw:!1,source:{browser:!0,takephoto:!0},limit:0,required:!1,readonly:!1,standalone:!0,identification:"",namerule:"移动建模图片附件-{timestamp}"};this.dbValueHasSet=!1,this.beforeMount=function(){I.checkEmpJsApi("chooseImage")||I.runtime.isEmobile()||I.isFunction(window.eb_chooseImage)||(b.client="browser"),b.required&&!b.field.label&&(b.field.label="")},this.mounted=function(){var r=this,e=this.$el,a=b.source.browser&&!b.source.takephoto,n=b.source.takephoto&&!b.source.browser;m=e.find(".wev-upload"),f=e.find(".wev-field"),g=e.find(".wev-upload > span").html(_.SELECT_IMAGE),p=e.find(".wev-img-wrapper"),v=e.children(".wev-comp-"+r.type),b.useCamera=!1;var o=function(){return 0<b.limit&&b.limit<=h.length&&(I.getLabel(5306,"照片上传超过最大限制",function(e){Mobile_NS.msg(e+"("+b.limit+")")}),!0)},l=function(e,t){Mobile_NS.footerMenu({iconPosition:"right",items:[{icon:"/mobilemode/mobile/images/plugin/camera.png",text:_.PHOTOGRAPH,callback:function(){t()}},{icon:"/mobilemode/mobile/images/plugin/photo.png",text:_.SELECT_IMAGE,callback:function(){e()}}]})},t=!1,i=I.runtime.isWechat()&&!I.runtime.isWxwork();if(I.checkEmpJsApi("chooseImage")){var d=function(e){require(["mApi/popup"]);var t=1;b.draw||(t=0<b.limit?b.limit-h.length:9),I.invokeEmApi("chooseImage",{count:t,sourceType:e,success:function(e){i&&(b.useCamera="camera"==e.sourceType);var t=e.localIds||[],n=function(e){e==t[t.length-1]&&Mobile_NS.hideLoader()};Mobile_NS.showLoader(),t.reduce(function(e,a){return(e=e||$.Deferred().resolve()).then(function(){return t=a,i=$.Deferred(),em.getLocalImgData({localId:t,success:function(e){i.resolve(),n(t),r.photoProcess("data:image/jpeg;base64,"+e.localData)},fail:function(e){i.resolve(),n(t),Mobile_NS.alert("getLocalImgData fail:"+JSON.stringify(e))}}),i;var t,i})},"")},fail:function(e){Mobile_NS.alert("chooseImage fail:"+JSON.stringify(e))}})},s=function(){b.useCamera=!1,d(["album"])},u=function(){b.useCamera=!0,d(["camera"])};m.on("click",function(e){e.stopPropagation(),o()||(a?s():n?u():i?d(["camera","album"]):l(s,u))})}else I.runtime.isEmobile6()?m.on("click",function(e){if(e.stopPropagation(),!o()){var t=function(){b.useCamera=!1,location="emobile:photochoose:_p_addPhoto_uploaded:"+b.id+":"+e.clientY+":_p_addPhoto_clear"},i=function(){b.useCamera=!0,location="emobile:photograph:_p_addPhoto_uploaded:"+b.id+":"+e.clientY+":_p_addPhoto_clear"};a?t():n?i():l(t,i)}}):I.isFunction(window.eb_chooseImage)?m.on("click",function(e){if(e.stopPropagation(),!o()){var t=0;a?t=2:n&&(b.useCamera=!0,t=1),eb_chooseImage(t,"_p_addPhoto_uploaded",b.id)}}):(t=!0,v.on("change","input[type='file']",function(e){if(!o()&&this.files&&this.files[0]){var t=new FileReader;t.onload=function(e){var t=e.target.result;I.isIOS()?require(["imgdrawing"],function(){ImageOrientationFix({image:t,imgType:"base64",onFix:function(e){r.photoProcess(e)}})}):r.photoProcess(t)},t.readAsDataURL(this.files[0])}}));if((b.draw||t)&&require(["imgdrawing"]),b.readonly||v.on("click",".wev-img-border>i",function(e){var t=$(this).parent(),i=t.index();$(".wev-progress-line",t).length&&y.uploadingCountMinusOne(),t.remove(),h[i]&&h.splice(i,1),y.setTip(),e.stopPropagation()}),b.field.value&&this.setValue(b.field.value,!0),b.identification){var c=I.getActionUrl(this.type,{action:"getNamerule",appid:I.getAppid(),identification:b.identification},this.pageid);I.getJSON(c,function(e){e.data&&(b.namerule=e.data),b.namerule=I.replaceVariables(b.namerule)})}else b.namerule=I.replaceVariables(b.namerule)},this.photoProcess=function(e){var a=function(e){var t=b.compress.quality||.5,i=b.compress.zoom||.5;if(1==t&&1==i)return b.watermark.add?y.addWaterMark(e,b.watermark):y.buildData(e);var a=function(e){return!e||isNaN(e)?1:(e=parseFloat(e))<0||1<e?1:e};t=a(t),i=a(i),y.scaleImgData(e,t,i,!0,function(e){b.watermark.add?y.addWaterMark(e,b.watermark):y.buildData(e)})};if(!b.draw)return a(e);var n=new Image;n.onload=function(){var i=require("pageEvent");require(["imgdrawing"],function(t){i.register("change",t.hide),t.draw({data:e,tip:_.IMG_DRAWING_TIP,width:n.naturalWidth,height:n.naturalHeight,callback:{done:function(e){a(e),i.destory("change",t.hide)},close:function(){i.destory("change",t.hide)}}})})},n.src=e},this.getData=function(){var e={},t=b.field.name;return e["fieldname_"+t]=y.getValue(),e["type_"+t]="photo",e["namerule_"+t]=b.namerule,e},this.getShowData=function(){var i,a,e=I.parseJSON(b.field.name+"_showvalue",(i="",a=I.UUID(),h.forEach(function(e){var t="";t=isNaN(e)?e:I.getAttachUrl(w[e]),i+='<img class="wev-img" src="'+t+'" data-groupid="'+a+'"/>'}),'<div class="wev-img-wrapper">'+i+"</div>"));return e[b.field.name]=y.getValue(),e},this.reset=function(){y.setValue(b.field.value,b.field.defHtml),f.removeClass("wev-required-remind")},this.checkRequired=function(){var e=b.required&&!h.length,t=b.field.label||I.getLabel(128156,"拍照");return f.toggleClass("wev-required-remind",e),e&&t},this.setRequired=function(e){b.required=e,f.toggleClass("wev-field-required",e),!e&&f.removeClass("wev-required-remind")},this.checkModeDocCategory=function(e){if(!e){var t=this.$el;I.getLabel(388817,"附件上传目录未设置!",function(e){m.addClass("wev-upload-hide"),t.find(".wev-upload-tip").removeClass("wev-upload-hide").html(e)})}},this.setValueByDB=function(e){~(e=String(e)).indexOf("base64")||(e=e.replaceAll(",",";;")),b.field.value=e,this.dbValueHasSet=!0,this.setValue(e,!0)},this.setValue=function(a,n,r){if(I.isFunction(n)&&(r=n),!a)return y.setValue("","",r);~(a=String(a)).indexOf("base64")||(a=a.replaceAll(",",";;"));var o=y.parseDocidsFromValue(a);if(o.length)y.convertDocidToImageId(o.join(","),function(e){w=y.getDocImgIdsMap(o,e);var t=y.convertValueToImgsrc(a),i=y.getValueHtml(t);n&&(b.field.defHtml=i),y.setValue(a,i,r)});else{var e=y.getValueHtml(a.split(";;"));n&&(b.field.defHtml=e),y.setValue(a,e,r)}},this.getValue=function(){return y.getValue()},this.isReadyForSubmit=function(){var e=t<=0;return e||I.getLabel(6194,"正在上传中,请稍后再操作",function(e){b.field.label&&(e+=" ("+b.field.label+")"),Mobile_NS.msg(e)}),e},y.getDocImgIdsMap=function(e,t){var i={};if(I.isArray(e)&&I.isArray(t))for(var a=0;a<e.length;a++)i[e[a]]=t[a];return i},y.parseDocidsFromValue=function(e){var i=[];return(e=String(e))&&e.split(";;").forEach(function(e,t){isNaN(e)||i.push(e)}),i},y.convertValueToImgsrc=function(e){var i=[];return I.isString(e)&&I.isObject(w)&&e.split(";;").forEach(function(e,t){i.push(!isNaN(e)&&w[e]?w[e]:e)}),i},y.convertDocidToImageId=function(e,t){var i=I.getActionUrl(this.type,{action:"parsePhotos",values:e},this.pageid);I.getJSON(i,function(e){t&&t(e.data)})},y.setValue=function(e,t,i){h=e&&e.split(";;")||[],b.readonly?($(".wev-img",this.$el).remove(),p.append(t)):($(".wev-img-border",this.$el).remove(),m.before(t)),y.setTip(),this.dbValueHasSet&&I.trigger("dataload",this.pageid,this.id),require(["lazyImgHelper"]),i&&i.call(this)},y.setTip=function(){if(0<b.limit){var e=h.length?h.length+"/"+b.limit:_.SELECT_IMAGE;g.html(e)}},y.getValue=function(){return h.join(";;")},y.buildData=function(r){var e=$("img[data-groupid]",v),t=0<e.length?e.attr("data-groupid"):I.UUID(),o=I.UUID(),i=$('<div class="wev-img-border" id="'+o+'"><div class="wev-progress-line"><div></div></div><img class="wev-img" src="'+r+'" data-groupid="'+t+'"></img><i></i></div>');m.before(i),"browser"==b.client&&($("input[type='file']",m).remove(),m.prepend('<input type="file" name="file" accept="image/*" single="single"/>')),h.push(r),y.setTip();var a=r.split(";")[0].substring(11);"jpeg"==a.toLowerCase()&&(a="jpg"),!b.namerule.endsWith(".jpg")&&(b.namerule=b.namerule+"."+a);var n,l=new FormData;n=-1!=b.namerule.indexOf("{t1.")||-1!=b.namerule.indexOf("{d1.")?"|:":b.namerule.replace("{timestamp}",(new Date).getTime()),l.append("file",function(e){for(var t=e.split(","),i=t[0].match(/:(.*?);/)[1],a=atob(t[1]),n=a.length,r=new Uint8Array(n);n--;)r[n]=a.charCodeAt(n);return new Blob([r],{type:i})}(r),n);var d=$("#"+b.form),s=d.find("input[name='workflowid']").val(),u=d.find("input[name='modelid']").val();l.append("workflowid",s),l.append("modelid",u),l.append("returnImgId","1");var c=$(".wev-progress-line",i);y.uploadingCountPlusOne();var f=I.getActionUrl("service.FormComponent",{action:"uploadFile"});I.ajax(f,l,function(e,t){if(c.remove(),$("#"+o).length){var i=JSON.parse(e);if("1"==i.status){var a=i.data.docid,n=i.data.imgid;y.replaceValueData(r,a),w[a]=n}y.uploadingCountMinusOne()}},{type:"POST",processData:!1,contentType:!1,xhr:function(){var e=$.ajaxSettings.xhr();return e.upload&&e.upload.addEventListener("progress",function(e){if(e.lengthComputable){var t=Math.round(100*e.loaded/e.total);c.children("div").css("width",t.toString()+"%")}},!1),e},error:function(e){c.remove(),$("#"+o).length&&y.uploadingCountMinusOne()}})},y.scaleImgData=function(e,l,d,t,s){var u="image/jpeg";if(e&&!t){var i=e.indexOf("data:"),a=e.indexOf(";");if(0===i&&i<a)try{u=e.substring("data:".length,a)}catch(e){u="image/jpeg"}}var c=new Image;c.onload=function(){var e=document.createElement("canvas"),t=c.naturalWidth,i=c.naturalHeight,a=parseInt(t*d),n=parseInt(i*d);e.width=a,e.height=n;var r=e.getContext("2d");r.clearRect(0,0,e.width,e.height),r.drawImage(c,0,0,a,n);var o=e.toDataURL(u,l);s.call(this,o)},c.src=e},y.addWaterMark=function(e,h){var w="image/jpeg",b=new Image;b.onload=function(){var o=document.createElement("canvas"),e=b.naturalWidth,t=b.naturalHeight;o.width=e,o.height=t;var l=o.getContext("2d");l.clearRect(0,0,e,t),l.drawImage(b,0,0,e,t);var d,s,i,a=h.position||1,u=h.content,c=Number(h.fontsize)||18,n=h.font||"Verdana",f=u.split("\n");1==a?(d=e-10,s=t-(c+5)*f.length,i="right"):2==a?(d=10,s=t-(c+5)*f.length,i="left"):3==a?(d=e-10,s=20,i="right"):4==a?(d=10,s=20,i="left"):5==a?(d=e/2,s=20,i="center"):6==a&&(d=e/2,s=t-(c+5)*f.length,i="center"),s=s+c-10,l.textAlign=i,l.font=h.fontweight+" "+c+"px "+n,l.fillStyle=h.color||"#F8F8F8";var r=["CURRPOSITION","CURRLNG","CURRLAT"].join("|"),m=new RegExp("("+r+")","gi"),g=u.match(m);if(g&&g.length)Mobile_NS.getCurrPosition(function(e){var t="",i="",a="";"1"==e.status&&(t=e.addr,i=e.lng,a=e.lat),u=u.replace(/{CURRPOSITION}/gi,t).replace(/{CURRLNG}/gi,i).replace(/{CURRLAT}/gi,a),f=u.split("\n");for(var n=0;n<f.length;n++)l.fillText(f[n],d,s+(c+5)*n);var r=o.toDataURL(w);y.buildData(r),t||I.getLabel(4085,"定位失败",function(e){Mobile_NS.alert(e)})});else{for(var p=0;p<f.length;p++)l.fillText(f[p],d,s+(c+5)*p);var v=o.toDataURL(w);y.buildData(v)}},b.src=e},y.getValueHtml=function(e){var n="",r=I.UUID(),t=I.getInstance(b.form),o=t?t.viewModel.empowStr:"";return I.isArray(e)&&e.length&&e.forEach(function(e,t){var i,a;i=e,a="",isNaN(i)?(a=i,b.readonly?n+='<img class="wev-img" src="'+a+'" data-groupid="'+r+'"></img>':n+='<div class="wev-img-border"><img class="wev-img" src="'+a+'" data-groupid="'+r+'"></img><i></i></div>'):(a=I.getAttachUrl(i,o),b.readonly?n+='<img class="wev-img lazyload" data-groupid="'+r+'" data-src="'+a+'"></img>':n+='<div class="wev-img-border"><img class="wev-img lazyload" data-groupid="'+r+'" data-src="'+a+'"></img><i></i></div>')}),n},y.replaceValueData=function(e,t){for(var i=-1,a=0;a<h.length;a++)if(h[a]==e){i=a;break}-1!=i&&h.splice(i,1,t)};var t=0;for(var i in y.uploadingCountPlusOne=function(){t++,$(".wev-comp-FButton[target-form='"+b.form+"'] .wev-btn-wrapper",this.$container).addClass("disabled")},y.uploadingCountMinusOne=function(){--t<=0&&$(".wev-comp-FButton[target-form='"+b.form+"'] .wev-btn-wrapper",this.$container).removeClass("disabled")},y)I.isFunction(y[i])&&(y[i]=y[i].bind(this))})});