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