epic-designer-gold/dist/sign-0FU6gOIH.cjs

基于vue3的设计器,可视化开发页面表单

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),V=require("./pluginManager-C8aQylGX.cjs"),p=require("element-plus"),U=require("./index-DqKiZufS.cjs"),x=require("./index-BoL2PSBk.cjs"),Y=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),F={class:"sign-main"},O=["src"],H={class:"sign",style:{height:"100%",width:"100%"}},$=["id"],G={class:"btn"},L={class:"btns"},Z={__name:"sign",props:{componentSchema:{type:Object,require:!0,default:()=>({})},modelValue:{type:String,default:""}},emits:["update:modelValue"],setup(k,{expose:B,emit:C}){const{t:l}=x.useLocale(),S=V.pluginManager.getComponent("button"),D=V.pluginManager.getComponent("Dialog"),E=C,o=k,d=e.inject("disabled",{value:!1});e.watch(()=>o.componentSchema,()=>{e.nextTick(()=>{h.value=o.modelValue})},{deep:!0,immediate:!0});const s=e.ref(null),i=e.ref(null),a=e.ref(),M=e.ref("");function N(){var n,t,u,g;if(i.value&&((n=i.value)!=null&&n.clientHeight)&&((t=i.value)!=null&&t.clientWidth)){if(s.value=document.getElementById(`canvas${o.componentSchema.field}`),s.value.height=((u=i.value)==null?void 0:u.clientHeight)||600,s.value.width=(g=i.value)==null?void 0:g.clientWidth,a.value=s.value.getContext("2d"),o.modelValue){let m=new Image;m.src=o.modelValue,m.setAttribute("crossOrigin","anonymous"),m.onload=()=>{a.value.fillStyle=a.value.createPattern(m,"repeat"),a.value.fillRect(0,0,1e3,550)}}a.value.lineWidth=o.componentSchema.componentProps.lineWidth||4,o.componentSchema&&o.componentSchema.componentProps&&o.componentSchema.componentProps.style&&o.componentSchema.componentProps.style.color&&(a.value.strokeStyle=o.componentSchema.componentProps.style.color),M.value=s.value.getBoundingClientRect()}}const v=e.ref(""),f=e.ref(""),q=e.ref(""),A=e.ref(""),c=e.ref([]),b=e.ref(!1);function W(n){if(d.value||o.componentSchema.componentProps.readonly||o.componentSchema.componentProps.disabled)return;n=n||event,n.preventDefault();let t={x:n.offsetX,y:n.offsetY};v.value=t.x,f.value=t.y,a.value.beginPath(),a.value.moveTo(t.x,t.y),a.value.lineTo(t.x,t.y),a.value.stroke(),a.value.closePath(),c.value.push(t),b.value=!0}function X(n){if(!(d.value||o.componentSchema.componentProps.readonly||o.componentSchema.componentProps.disabled)&&(n=n||event,n.preventDefault(),b.value)){let t={x:n.offsetX,y:n.offsetY};q.value=t.x,A.value=t.y,a.value.beginPath(),a.value.moveTo(v.value,f.value),a.value.lineTo(t.x,t.y),a.value.stroke(),a.value.closePath(),v.value=t.x,f.value=t.y,c.value.push(t)}}function j(n){if(d.value||o.componentSchema.componentProps.readonly||o.componentSchema.componentProps.disabled)return;n=n||event,n.preventDefault();let t={x:n.offsetX,y:n.offsetY};a.value.beginPath(),a.value.moveTo(v.value,f.value),a.value.lineTo(t.x,t.y),a.value.stroke(),a.value.closePath(),c.value.push(t),c.value.push({x:-1,y:-1}),b.value=!1}function P(){p.ElMessageBox.confirm(l("rewriteWillClearCanvas"),l("warning"),{confirmButtonText:l("confirm"),cancelButtonText:l("cancel"),type:"warning"}).then(()=>{a.value.clearRect(0,0,s.value.width,s.value.height),c.value=[],p.ElMessage({type:"info",message:l("clearSuccess")})}).catch(()=>{})}const h=e.ref("");async function w(){let n=await R(s.value.toDataURL("image/png"));h.value=n,E("update:modelValue",n)}async function R(n){try{let t=atob(n.split(",")[1]),u=new ArrayBuffer(t.length),g=new Uint8Array(u);for(let y=0;y<t.length;y++)g[y]=t.charCodeAt(y);let m=new Blob([u],{type:"image/png"}),T=new FormData;T.append("file",m,Date.now()+"png");let I=await U.axios({method:"post",url:"https://ess-ds.com/prod-api/center-file/file/upload",data:T,headers:{"Content-Type":"multipart/form-data",Authorization:"Bearer "+x.api.get("Admin-Token"),"X-Tenant-Gray":x.api.get("X-Tenant-Gray"),lang:x.api.get("saas-locale")||"zh-CN",zone:Intl.DateTimeFormat().resolvedOptions().timeZone}});return p.ElMessage({type:"success",message:l("uploadSuccess")}),I.data.data.url}catch{p.ElMessage({type:"warning",message:l("uploadFailed")}),r.value=!1}finally{r.value=!1}}const r=e.ref(!1);function z(){p.ElMessageBox.confirm(l("confirmAbandonSignature"),l("warning"),{confirmButtonText:l("confirm"),cancelButtonText:l("cancel"),type:"warning"}).then(()=>{a.value.clearRect(0,0,s.value.width,s.value.height),c.value=[],r.value=!1}).catch(()=>!1)}function _(){d.value||o.componentSchema.componentProps.readonly||o.componentSchema.componentProps.disabled||(r.value=!0,a.value&&(a.value.clearRect(0,0,s.value.width,s.value.height),c.value=[]),e.nextTick(()=>{N()}))}return e.onMounted(()=>{}),e.onUnmounted(()=>{}),B({surewrite:w}),(n,t)=>(e.openBlock(),e.createElementBlock("div",F,[h.value?(e.openBlock(),e.createElementBlock("img",{key:1,class:"sign-board",src:h.value,alt:"",onClick:_},null,8,O)):(e.openBlock(),e.createElementBlock("div",{key:0,class:"sign-board",onClick:_},e.toDisplayString(e.unref(l)("signaturePad")),1)),e.createVNode(e.unref(D),{modelValue:r.value,"onUpdate:modelValue":t[0]||(t[0]=u=>r.value=u),title:e.unref(l)("signaturePad"),class:"w-860px",width:"860px",style:{height:"600px"},"before-close":z,draggable:!1,modal:""},{default:e.withCtx(()=>[e.createElementVNode("div",H,[e.createElementVNode("div",{class:"canvas",ref_key:"canvasWrap",ref:i},[e.createElementVNode("canvas",{id:`canvas${o.componentSchema.field}`,onMousedown:W,onMousemove:X,onMouseup:j},null,40,$)],512),e.createElementVNode("div",G,[t[1]||(t[1]=e.createElementVNode("div",{class:"remark"},null,-1)),e.createElementVNode("div",L,[e.createVNode(e.unref(S),{type:"info",size:"mini",onClick:P,onTouch:P},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(l)("rewrite")),1)]),_:1}),e.createVNode(e.unref(S),{type:"primary",size:"mini",onClick:w,onTouch:w},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(l)("confirm")),1)]),_:1})])])])]),_:1},8,["modelValue","title"])]))}},J=Y._export_sfc(Z,[["__scopeId","data-v-c5551478"]]);exports.default=J;