| 1 |
- import{O as L,R as $,K as A}from"./index.59c4c6ab.js";import"./elementPlus.8e650391.js";import{d as G,r as d,w as M,ai as I,o as l,c as p,a as m,M as w,O as B,F as Z,a8 as J,Q as N,K as X,U as g,R as h,I as O,Z as Y,i as ee}from"./vue.86c1cb21.js";const ae=G({name:"FsCropperUploader",props:{disabled:{},modelValue:{type:[String,Object,Array]},img:{},type:{type:String},uploadTip:{type:String},title:String,cropperHeight:{type:[String,Number]},dialogWidth:{type:[String,Number],default:"50%"},maxSize:{type:Number,default:5},limit:{type:Number,default:1},accept:{type:String,default:".jpg, .jpeg, .png, .gif, .webp"},cropper:{type:Object},uploader:{type:Object},compressQuality:{type:Number,default:.8},buildUrl:{type:Function,default:async function(e){return typeof e=="object"?e.url:e}},valueType:{type:String,default:"url"}},emits:["update:modelValue","change","ready"],setup(e,n){const{ui:b}=$(),f=d(),V=d(),C=d(),r=d([]),u=b.formItem.injectFormItemContext();let y=e.modelValue;t(e.modelValue);async function t(a){const o=[];if(a==null||a===""){r.value=o;return}if(typeof a=="string")o.push({url:await e.buildUrl(a),value:a,status:"done"});else if(typeof a=="object")o.push({url:await e.buildUrl(a),value:a,status:"done"});else for(const i of a)o.push({url:await e.buildUrl(i),value:i,status:"done"});r.value=o}function v(){e.disabled||(C.value=void 0,f.value.clear(),f.value.open())}function U(a){r.value.splice(a,1),x()}function P(){const a=r.value;if(a&&a.length>0){for(const o of a)if(o.status==="uploading")return!0}return!1}async function D(a){const o=a.blob,i=a.dataUrl,T=a.file.name,H=new File([o],T,{type:o.type}),c=Y({url:void 0,dataUrl:i,status:"uploading",progress:0}),W=s=>{c.progress=s.percent},z=s=>{c.status="error",c.message="文件上传出错:"+s.message,console.error(s)},K={file:H,onProgress:W,onError:z,fileName:T};r.value.push(c);try{const s=await j(K);let S=s;e.valueType!=="object"&&(S=s[e.valueType]),c.url=await e.buildUrl(S),c.value=S,c.status="done",x()}catch(s){z(s)}}async function j(a){a.options=e.uploader||{};const{getUploaderImpl:o}=A();let i=await o(a.options.type);if(i==null)throw new Error("Sorry，The component is not ready yet");return await(i==null?void 0:i.upload(a))}async function x(){const a=[];for(const i of r.value)typeof i=="string"?a.push(i):a.push(i.value);let o=a;e.limit===1&&(o=a&&a.length>0?a[0]:void 0),y=o,n.emit("update:modelValue",o),await u.onChange(),await u.onBlur()}function F(a){return a.dataUrl?a.dataUrl:a.url}const k=d(!1),R=d();function Q(a){k.value=!0,R.value=F(a)}function _(){k.value=!1,R.value=null}M(()=>e.modelValue,async a=>{n.emit("change",a),a!==y&&await t(a)});const q=ee();function E(a){n.emit("ready",{uploaderRef:q,...a})}return{ui:b,cropperRef:f,uploaderImplRef:V,indexRef:C,listRef:r,addNewImage:v,hasUploading:P,cropComplete:D,doUpload:j,removeImage:U,getImageSrc:F,previewUrl:R,previewVisible:k,preview:Q,closePreview:_,doReady:E}}}),oe={class:"image-list"},te={class:"image-slot"},ie={class:"delete"},le={key:0,class:"status-uploading"},re={key:1,class:"status-done"},se={class:"fs-cropper-preview-content"},ne=["src"];function ue(e,n,b,f,V,C){const r=I("fs-loading"),u=I("fs-icon"),y=I("fs-cropper");return l(),p("div",{class:O(["fs-cropper-uploader",{"is-disabled":e.disabled}])},[m("div",oe,[(l(),w(N(e.ui.imageGroup.name),null,{default:B(()=>[(l(!0),p(Z,null,J(e.listRef,(t,v)=>(l(),p("div",{key:v,class:"image-item"},[(l(),w(N(e.ui.image.name),X({class:"image",src:e.getImageSrc(t),ref_for:!0},e.img),{placeholder:B(()=>[m("div",te,[g(r,{loading:!0})])]),_:2},1040,["src"])),m("div",ie,[e.disabled?h("",!0):(l(),w(u,{key:0,icon:e.ui.icons.remove,onClick:U=>e.removeImage(v)},null,8,["icon","onClick"])),g(u,{icon:e.ui.icons.search,onClick:U=>e.preview(t)},null,8,["icon","onClick"])]),t.status==="uploading"?(l(),p("div",le,[(l(),w(N(e.ui.progress.name),{type:"circle",percentage:t.progress,width:70},null,8,["percentage"]))])):t.status==="done"?(l(),p("div",re,[g(u,{icon:e.ui.icons.check,class:"status-down-icon"},null,8,["icon"])])):h("",!0)]))),128)),e.limit<=0||e.limit>e.listRef.length?(l(),p("div",{key:0,class:"image-item image-plus",onClick:n[0]||(n[0]=(...t)=>e.addNewImage&&e.addNewImage(...t))},[g(u,{icon:e.ui.icons.plus,class:"cropper-uploader-icon"},null,8,["icon"])])):h("",!0)]),_:1}))]),g(y,{ref:"cropperRef",title:e.title,"cropper-height":e.cropperHeight,"dialog-width":e.dialogWidth,accept:e.accept,"upload-tip":e.uploadTip,"max-size":e.maxSize,cropper:e.cropper,"compress-quality":e.compressQuality,output:"all",onDone:e.cropComplete,onReady:e.doReady},null,8,["title","cropper-height","dialog-width","accept","upload-tip","max-size","cropper","compress-quality","onDone","onReady"]),m("div",{class:O(["fs-cropper-preview",{open:e.previewVisible}]),onClick:n[1]||(n[1]=(...t)=>e.closePreview&&e.closePreview(...t))},[m("div",se,[e.previewUrl?(l(),p("img",{key:0,src:e.previewUrl,class:"preview-image"},null,8,ne)):h("",!0)])],2)],2)}const me=L(ae,[["render",ue]]);export{me as default};
|
