epic-designer-gold/dist/sign-jFmj1PM5.cjs

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

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),k=require("./pluginManager-C8aQylGX.cjs"),p=require("element-plus"),X=require("./index-DqKiZufS.cjs"),w=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"],L={class:"btn"},Z={class:"btns"},G={__name:"sign",props:{componentSchema:{type:Object,require:!0,default:()=>({})},modelValue:{type:String,default:""}},emits:["update:modelValue"],setup(T,{expose:B,emit:C}){const{t:l}=w.useLocale(),S=k.pluginManager.getComponent("button"),D=k.pluginManager.getComponent("Dialog"),E=C,o=T,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 f=e.ref(""),v=e.ref(""),q=e.ref(""),A=e.ref(""),c=e.ref([]),x=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};f.value=t.x,v.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),x.value=!0}function j(n){if(!(d.value||o.componentSchema.componentProps.readonly||o.componentSchema.componentProps.disabled)&&(n=n||event,n.preventDefault(),x.value)){let t={x:n.offsetX,y:n.offsetY};q.value=t.x,A.value=t.y,a.value.beginPath(),a.value.moveTo(f.value,v.value),a.value.lineTo(t.x,t.y),a.value.stroke(),a.value.closePath(),f.value=t.x,v.value=t.y,c.value.push(t)}}function R(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(f.value,v.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}),x.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 b(){let n=await z(s.value.toDataURL("image/png"));h.value=n,E("update:modelValue",n)}async function z(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"}),V=new FormData;V.append("file",m,Date.now()+"png");let U=await X.axios({method:"post",url:"https://ess-ds.com/prod-api/center-file/file/upload",data:V,headers:{"Content-Type":"multipart/form-data",Authorization:"Bearer "+w.api.get("Admin-Token"),lang:w.api.get("saas-locale")||"zh-CN",zone:Intl.DateTimeFormat().resolvedOptions().timeZone}});return p.ElMessage({type:"success",message:l("uploadSuccess")}),U.data.data.url}catch{p.ElMessage({type:"warning",message:l("uploadFailed")}),r.value=!1}finally{r.value=!1}}const r=e.ref(!1);function I(){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:b}),(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":I,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:j,onMouseup:R},null,40,$)],512),e.createElementVNode("div",L,[t[1]||(t[1]=e.createElementVNode("div",{class:"remark"},null,-1)),e.createElementVNode("div",Z,[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:b,onTouch:b},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(l)("confirm")),1)]),_:1})])])])]),_:1},8,["modelValue","title"])]))}},J=Y._export_sfc(G,[["__scopeId","data-v-f8f7b654"]]);exports.default=J;