epic-designer-gold/dist/form-Ck3d3ITP.cjs

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

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),v=require("element-plus"),w=require("./pluginManager-C8aQylGX.cjs"),H=require("./index-DqKiZufS.cjs"),q=require("./index-BoL2PSBk.cjs"),L=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),J={key:0,class:"form-main",style:{height:"100%"}},K={class:"save-modal-content"},Q={class:"save-modal-item"},Z={class:"save-modal-item"},ee={class:"signature-container"},te={class:"signature-controls"},ne={key:0,class:"signature-preview"},oe=["src"],ae=e.defineComponent({__name:"form",props:{componentSchema:{type:Object,require:!0,default:()=>({})}},setup(X,{expose:j}){var N,R;const s=X,A=e.inject("pageManager",{}),u=e.ref(null),x=e.inject("forms",{}),F=e.ref(!0),c=e.reactive({});A.addFormData(c,(R=(N=s.componentSchema)==null?void 0:N.componentProps)==null?void 0:R.name),e.provide("formData",c);const O=w.pluginManager.getComponent("modal"),W=w.pluginManager.getComponent("input"),b=w.pluginManager.getComponent("button"),g=e.ref(!1),d=e.ref(""),i=e.ref("");let m=null,f=null;const r=e.ref(null),a=e.ref(null),h=e.ref(!1),y=e.ref(0),C=e.ref(0);function Y(){if(!r.value)return;const t=r.value,n=t.parentElement;if(!n)return;const l=n.getBoundingClientRect().width-20,p=400;t.width=l,t.height=p,a.value=t.getContext("2d"),a.value&&(a.value.lineWidth=4,a.value.lineCap="round",a.value.lineJoin="round",a.value.strokeStyle="#000000",a.value.fillStyle="#ffffff",a.value.fillRect(0,0,t.width,t.height))}function V(t){if(h.value=!0,!r.value)return;const n=r.value.getBoundingClientRect(),o=t.type.includes("mouse")?t.offsetX:t.touches[0].clientX-n.left,l=t.type.includes("mouse")?t.offsetY:t.touches[0].clientY-n.top;y.value=o,C.value=l}function B(t){if(!h.value||!a.value||!r.value)return;const n=r.value.getBoundingClientRect(),o=t.type.includes("mouse")?t.offsetX:t.touches[0].clientX-n.left,l=t.type.includes("mouse")?t.offsetY:t.touches[0].clientY-n.top;a.value.beginPath(),a.value.moveTo(y.value,C.value),a.value.lineTo(o,l),a.value.stroke(),y.value=o,C.value=l}function S(){h.value=!1}function D(){!a.value||!r.value||(a.value.fillStyle="#ffffff",a.value.fillRect(0,0,r.value.width,r.value.height),i.value="")}async function U(){if(r.value)try{const t=r.value,n=await new Promise(p=>{t.toBlob(G=>{p(G||new Blob)},"image/png")});if(!n){v.ElMessage.error("签字转换失败");return}const o=new FormData;o.append("file",n,"signature.png");const l=await H.axios.post("https://ess-ds.com/prod-api/center-file/file/upload",o,{headers:{Authorization:"Bearer "+q.api.get("Admin-Token"),"X-Tenant-Gray":q.api.get("X-Tenant-Gray"),"Content-Type":"multipart/form-data"}});l.data&&l.data.code===200&&l.data.data?(i.value=l.data.data.url,v.ElMessage.success("签字保存成功")):v.ElMessage.error("签字上传失败，请重试")}catch(t){console.error("上传签字失败:",t),v.ElMessage.error("网络错误，签字上传失败")}}function E(){g.value=!1,d.value="",i.value="",D()}function M(){f&&(f(new Error("用户取消了保存确认")),m=null,f=null),setTimeout(()=>{E()},300)}function $(){if(d.value.trim()!=="我确认提交电费单与站点用电地址不一致"){alert("请输入准确的确认文字");return}if(!i.value){alert("请签字确认");return}c.saveDescription=d.value,c.signatureData=i.value,m&&(m(c),m=null,f=null);const n=(s.componentSchema?k(s.componentSchema):[]).find(o=>(o==null?void 0:o.type)==="ocr-upload");n&&n.componentProps&&(n.componentProps.hasAlreadyOcr=!1),E()}function k(t){const n=[t];if(t.children&&Array.isArray(t.children))for(const o of t.children)n.push(...k(o));return n}async function _(){await T();const n=(s.componentSchema?k(s.componentSchema):[]).find(o=>(o==null?void 0:o.type)==="ocr-upload");return n&&c[n.field+"-orcWarningInfo"]&&n.componentProps.hasAlreadyOcr?new Promise((o,l)=>{g.value=!0,m=o,f=l,e.nextTick(()=>{Y()})}):c}function P(t){Object.assign(c,t)}function T(){var t;return(t=u.value)==null?void 0:t.validate()}e.onMounted(async()=>{var t,n,o,l;if(((t=s.componentSchema)==null?void 0:t.type)==="form"&&x.value&&u.value){const p=((o=(n=s.componentSchema)==null?void 0:n.componentProps)==null?void 0:o.name)??((l=s.componentSchema)==null?void 0:l.name)??"default";return x.value[p]=u.value,u.value.getData=_,u.value.setData=P,!1}});const z=e.computed(()=>{const t=s.componentSchema.componentProps;let n=t.labelCol,o=t.wrapperCol;return t.labelLayout==="fixed"&&(n={style:`width:${typeof t.labelWidth=="number"?t.labelWidth+"px":t.labelWidth}`},o={style:"width:auto;flex:1"}),{...t,labelCol:n,wrapperCol:o}}),I=e.computed(()=>s.componentSchema.children??[]);return j({form:u,getData:_,setData:P,validate:T}),(t,n)=>F.value?(e.openBlock(),e.createElementBlock("div",J,[e.createVNode(e.unref(v.ElForm),e.mergeProps({ref_key:"form",ref:u,model:c},z.value,{style:{height:"100%"}}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"edit-node",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(I.value,o=>e.renderSlot(t.$slots,"node",{componentSchema:o},void 0,!0)),256))],!0)]),_:3},16,["model"]),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(O)),{style:{height:"calc(100vh - 240px)"},modelValue:g.value,"onUpdate:modelValue":n[1]||(n[1]=o=>g.value=o),title:"保存确认",onClose:M,onCancel:M,onOk:$,okText:"确认保存",cancelText:"取消"},{default:e.withCtx(()=>[e.createElementVNode("div",K,[e.createElementVNode("div",Q,[n[2]||(n[2]=e.createElementVNode("label",{class:"save-modal-label"},"请输入以下文字确认：",-1)),n[3]||(n[3]=e.createElementVNode("div",{class:"confirm-text"},"我确认提交电费单与站点用电地址不一致",-1)),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(W)),{modelValue:d.value,"onUpdate:modelValue":n[0]||(n[0]=o=>d.value=o),placeholder:"请输入上方文字确认",type:"text",style:{"margin-top":"8px"}},null,8,["modelValue"]))]),e.createElementVNode("div",Z,[n[6]||(n[6]=e.createElementVNode("label",{class:"save-modal-label"},"请签字确认：",-1)),e.createElementVNode("div",ee,[e.createElementVNode("canvas",{ref_key:"signatureCanvas",ref:r,onMousedown:V,onMousemove:B,onMouseup:S,onMouseleave:S,onTouchstart:V,onTouchmove:B,onTouchend:S,class:"signature-canvas"},null,544),e.createElementVNode("div",te,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(b)),{type:"primary",size:"small",onClick:D},{default:e.withCtx(()=>[...n[4]||(n[4]=[e.createTextVNode("清空",-1)])]),_:1})),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(b)),{type:"primary",size:"small",onClick:U},{default:e.withCtx(()=>[...n[5]||(n[5]=[e.createTextVNode("确认签字",-1)])]),_:1}))]),i.value?(e.openBlock(),e.createElementBlock("div",ne,[e.createElementVNode("img",{src:i.value,alt:"签字预览",class:"signature-img"},null,8,oe)])):e.createCommentVNode("",!0)])])])]),_:1},40,["modelValue"]))])):e.createCommentVNode("",!0)}}),le=L._export_sfc(ae,[["__scopeId","data-v-3ea17dec"]]);exports.default=le;