UNPKG

epic-designer-gold

Version:

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

2 lines (1 loc) 9.05 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),c=require("element-plus"),E=require("./index-BoL2PSBk.cjs"),{t:P}=E.useLocale(),N=n.defineComponent({props:{modelValue:{type:Array,default:()=>[]}},emits:["update:modelValue","update:ocrData"],setup(W,{emit:z,attrs:e}){const a=n.ref([]),v=n.ref(""),M=n.ref(!1),w=n.ref(!1),y=o=>{M.value=o};n.watch(a,o=>{z("update:modelValue",o)});const p=n.inject("disabled",{value:!1});n.watch(()=>W.modelValue,o=>{if(o!=null&&o.length>0&&a.value!=null){if(a.value===o)return;a.value.length=0,a.value.push(...o)}},{deep:!0,immediate:!0});const F=(o,l)=>{n.nextTick(()=>{C?(a.value=l.filter(i=>{var d,t;return((d=i==null?void 0:i.response)==null?void 0:d.code)===200||((t=i==null?void 0:i.response)==null?void 0:t.code)===201}),C=!1):a.value=l})},j=o=>{var u,g,f;let l=o.url||((g=(u=o==null?void 0:o.response)==null?void 0:u.data)==null?void 0:g.url);if(!l)return;const i=[".jpg",".jpeg",".png",".gif",".svg",".bmp",".webp"],d=((f=o.name)==null?void 0:f.toLowerCase())||"",t=i.some(h=>d.endsWith(h)),m=d.endsWith(".pdf");t?(v.value=l,w.value=!1,y(!0)):m?(v.value=l,w.value=!0,y(!0)):window.open(l)},R=o=>{var t,m,u,g,f;const l=(m=(t=e.componentSchema)==null?void 0:t.componentProps)==null?void 0:m.accept;if(l){const h=l.split(",").map(r=>r.trim().toLowerCase()).filter(r=>r),x=(((u=o.name)==null?void 0:u.toLowerCase())||"").split("."),b=x.length>1?"."+x.pop():"",s=o.type||"";if(!h.some(r=>{if(r==="*/*")return!0;if(r.startsWith("."))return b===r;if(r.endsWith("/*")){const A=r.split("/")[0];return s.startsWith(A+"/")}else return r.includes("/")?s===r||s.startsWith(r+"/"):b==="."+r}))return c.ElMessage.error(`只能上传${l}类型的文件!`),!1}const i=+(((f=(g=e.componentSchema)==null?void 0:g.componentProps)==null?void 0:f.maxSize)??10);return o.size/1024/1024<i?!0:(c.ElMessage.error(`文件大小不能超过 ${i}MB!`),!1)};let C=!1;const U=(o,l,i)=>{o.code!==200&&o.code!==201&&(c.ElMessage.error(o.msg||P("uploadFailed")),C=!0),console.log(i)},L=(o,l,i)=>{c.ElMessage.error(P("uploadFailed")),console.error(o)},I=o=>{var l,i;return((i=(l=o.response)==null?void 0:l.data)==null?void 0:i.url)||""},D=o=>{var i;const l=(i=o.response)==null?void 0:i.code;return o.status==="fail"||l&&l!==200&&l!==201?!1:o.status==="success"||!!I(o)},B=n.computed(()=>a.value.some(o=>o.status==="ready"||o.status==="uploading")),V=(o,l)=>{let{limit:i}=e;c.ElMessage.warning(`最多只能上传 ${i} 个文件`)},T=()=>{var i,d;if(a.value.length===0){c.ElMessage.warning("请先上传文件");return}if(!(e!=null&&e.callBackUrl)){c.ElMessage.warning("请先配置回填接口地址");return}if(B.value){c.ElMessage.warning("文件上传中,请稍后再试");return}if(a.value.filter(t=>!D(t)).length>0){c.ElMessage.warning("存在上传失败的文件,请删除后重新上传");return}const l=a.value.map(I).filter(t=>t.trim());if(l.length!==a.value.length){c.ElMessage.warning("存在未获取到上传地址的文件,请重新上传");return}z("update:ocrData",{url:l,field:(i=e.componentSchema)==null?void 0:i.field,label:(d=e.componentSchema)==null?void 0:d.label,callBackUrl:e==null?void 0:e.callBackUrl,callBackMethod:e==null?void 0:e.callBackMethod,callBackField:e==null?void 0:e.callBackField,callBackDataPath:e==null?void 0:e.callBackDataPath,validate:e==null?void 0:e.validate,validateParams:e==null?void 0:e.validateParams}),e.componentSchema.componentProps={...e.componentSchema.componentProps,hasAlreadyOcr:!0}},_=n.computed(()=>({...e,"file-list":a.value,beforeUpload:R,onChange:F,onSuccess:U,onError:L,onPreview:j,onExceed:V}));return()=>n.h("div",{class:"epic-ocr-upload",style:{padding:"20px",backgroundColor:"#ffffff",borderRadius:"8px",boxShadow:"0 2px 12px 0 rgba(0, 0, 0, 0.08)",transition:"all 0.3s ease"}},{default:()=>{var o,l,i,d;return[e.disabled||p.value?null:n.h("div",{style:{padding:"16px 20px",backgroundColor:"#f0f9ff",borderRadius:"6px",marginBottom:"20px",border:"1px solid #e0f2fe",color:"#334155",fontSize:"14px",lineHeight:"1.5",display:"flex",alignItems:"flex-start",gap:"8px"}},[n.h("span",{class:"icon--epic icon--epic--error-outline-rounded",style:{color:"#3b82f6",fontSize:"16px",marginTop:"2px"}}),"操作步骤:① 上传文件 → ② 点击「OCR识别」 → 自动识别并回填信息"]),n.h(c.ElUpload,{..._.value,headers:{Authorization:`Bearer ${E.api.get("Admin-Token")}`,"X-Tenant-Gray":E.api.get("X-Tenant-Gray")},listType:"picture-card",style:{marginBottom:e.disabled||p.value?"0":"20px"}},{default:()=>[n.h("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",width:"100%",height:"100%",cursor:e.disabled||p.value?"not-allowed":"pointer",opacity:e.disabled||p.value?.6:1,transition:"all 0.3s ease",borderRadius:"6px",backgroundColor:"#fafafa"}},[n.h("span",{class:"icon--epic icon--epic--cloud-upload-outlined",style:{marginBottom:"8px",color:"#9ca3af",fontSize:"28px",transition:"all 0.3s ease"}}),n.h("span",{style:{fontSize:"14px",color:"#6b7280",fontWeight:500,marginBottom:"4px"}},P("fileUpload")),n.h("span",{style:{fontSize:"12px",color:"#9ca3af"}},"支持图片和PDF文件")])],file:({file:t})=>{var k,x,b;const m=[".jpg",".jpeg",".png",".gif",".svg",".bmp",".webp"],u=((k=t.name)==null?void 0:k.toLowerCase())||"",g=m.some(s=>u.endsWith(s)),f=u.endsWith(".pdf"),h=t.url||((b=(x=t==null?void 0:t.response)==null?void 0:x.data)==null?void 0:b.url);return n.h("div",{class:"el-upload-list__item",style:{backgroundColor:"transparent",border:"none",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",position:"relative",cursor:"pointer"},onClick:()=>j(t)},[e.disabled||p.value?null:n.h("button",{type:"button",class:"el-upload-list__item-delete",style:{position:"absolute",top:"4px",right:"4px",width:"20px",height:"20px",border:"none",borderRadius:"50%",backgroundColor:"rgba(0, 0, 0, 0.6)",color:"white",fontSize:"12px",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.3s ease",zIndex:10},onClick:s=>{s.stopPropagation();const S=a.value.findIndex(r=>r.uid===t.uid);S!==-1&&a.value.splice(S,1)},onMouseenter:s=>{s.target&&(s.target.style.backgroundColor="#ff4d4f",s.target.style.transform="scale(1.1)")},onMouseleave:s=>{s.target&&(s.target.style.backgroundColor="rgba(0, 0, 0, 0.6)",s.target.style.transform="scale(1)")}},"×"),n.h("div",{style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"4px",overflow:"hidden"}},[g&&h?n.h("img",{src:h,style:{width:"100%",height:"100%",objectFit:"contain"}}):f&&h?n.h("div",{style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"white"}},[n.h("img",{src:"https://ess-ds.com/statics/gd-data/images/pdf.png",style:{width:"60%",height:"60%",objectFit:"contain"},alt:t.name})]):n.h("div",{style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"white"}},[n.h("img",{src:"https://ess-ds.com/statics/gd-data/images/unknown-file.png",style:{width:"60%",height:"60%",objectFit:"contain"},alt:t.name})])])])}}),e.disabled||p.value?null:n.h(c.ElButton,{disabled:e.disabled||p.value||B.value,onClick:T,style:{marginTop:"0",width:"100%",padding:"10px 24px",fontSize:"14px",fontWeight:500,borderRadius:"6px",backgroundColor:"#3b82f6",borderColor:"#3b82f6",color:"white",transition:"all 0.3s ease"}},{default:()=>[n.h("span",{class:"icon--epic icon--epic--radio-button-checked-outline",style:{marginRight:"8px",fontSize:"16px"}}),"OCR识别"]}),n.h("div",{style:{marginTop:"8px",padding:"12px 16px",backgroundColor:"#ff4d4f",color:"white",borderRadius:"6px",fontSize:"14px",fontWeight:500,textAlign:"left",boxShadow:"0 2px 8px rgba(255, 77, 79, 0.3)",display:(l=e.model)!=null&&l[((o=e.componentSchema)==null?void 0:o.field)+"-orcWarningInfo"]?"block":"none"}},((d=e.model)==null?void 0:d[((i=e.componentSchema)==null?void 0:i.field)+"-orcWarningInfo"])||""),(()=>{if(M.value)return w.value?n.h("div",{class:"el-image-viewer__wrapper",style:{position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:2e3,backgroundColor:"rgba(0, 0, 0, 0.8)",display:"flex",alignItems:"center",justifyContent:"center"}},[n.h("button",{style:{position:"absolute",top:"24px",right:"24px",width:"36px",height:"36px",border:"none",borderRadius:"50%",backgroundColor:"rgba(255, 255, 255, 0.15)",color:"white",fontSize:"20px",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.3s ease",backdropFilter:"blur(8px)"},onClick:()=>y(!1)},"×"),n.h("div",{style:{width:"90%",height:"90%",backgroundColor:"white",borderRadius:"8px",overflow:"hidden",position:"relative",boxShadow:"0 20px 60px rgba(0, 0, 0, 0.5)",maxWidth:"1400px",maxHeight:"900px",minWidth:"980px",minHeight:"600px"}},[n.h("iframe",{src:v.value,style:{width:"100%",height:"100%",border:"none"},title:"PDF Preview"})])]):n.h(c.ElImageViewer,{urlList:[v.value],onClose:()=>{y(!1)}})})()]}})}});exports.default=N;