"use strict";(self["webpackChunklin_cms_vue"]=self["webpackChunklin_cms_vue"]||[]).push([[2097],{82097:function(t,e,i){i.r(e),i.d(e,{default:function(){return j}});var n=i(20641),s=i(90033),l=i(53751);const a=t=>((0,n.Qi)("data-v-50ea34df"),t=t(),(0,n.jt)(),t),r={class:"upload-imgs-container"},o={key:0},h={class:"info"},u=["onClick"],d={class:"control"},c=["onClick"],m=["onClick"],p=a((()=>(0,n.Lk)("i",{class:"el-icon-edit"},null,-1))),f=[p],g={key:2,class:"control-bottom"},w=["onClick"],y=["onClick"],b=["onClick"],v={key:1},$=["onClick","onKeydown"],k=a((()=>(0,n.Lk)("i",{class:"el-icon-plus",style:{"font-size":"3em"}},null,-1))),L=["innerHTML"],I=["accept","multiple"];function C(t,e,i,a,p,C){const x=(0,n.g2)("el-image"),S=(0,n.gN)("loading");return(0,n.bo)(((0,n.uX)(),(0,n.CE)("div",r,[((0,n.uX)(!0),(0,n.CE)(n.FK,null,(0,n.pI)(p.itemList,((t,e)=>((0,n.uX)(),(0,n.CE)("div",{key:t.id},[t.display?((0,n.uX)(),(0,n.CE)("div",o,[(0,n.bo)(((0,n.uX)(),(0,n.CE)("div",{class:"thumb-item demo-image__preview",style:(0,s.Tr)(C.boxStyle)},[(0,n.bF)(x,{fit:i.fit,ref_for:!0,ref:C.setImageRef,src:t.display,class:"thumb-item-img",previewSrcList:p.srcList,style:{width:"100%",height:"100%"}},null,8,["fit","src","previewSrcList"]),(0,n.Lk)("div",h,[t.file?((0,n.uX)(),(0,n.CE)("i",{key:0,class:"el-icon-upload wait-upload",onClick:(0,l.D$)((e=>C.delItem(t.id)),["prevent","stop"]),title:"等待上传"},null,8,u)):(0,n.Q3)("",!0)]),(0,n.Lk)("div",d,[i.disabled?(0,n.Q3)("",!0):((0,n.uX)(),(0,n.CE)("i",{key:0,class:"el-icon-close del",onClick:(0,l.D$)((e=>C.delItem(t.id)),["prevent","stop"]),title:"删除"},null,8,c)),i.disabled?(0,n.Q3)("",!0):((0,n.uX)(),(0,n.CE)("div",{key:1,class:"preview",title:"更换图片",onClick:(0,l.D$)((e=>C.handleClick(t.id)),["prevent","stop"])},f,8,m)),i.sortable||i.preview?((0,n.uX)(),(0,n.CE)("div",g,[i.sortable&&!i.disabled?((0,n.uX)(),(0,n.CE)("i",{key:0,title:"前移",class:(0,s.C4)(["control-bottom-btn el-icon-back",{disabled:0===e}]),onClick:(0,l.D$)((e=>C.move(t.id,-1)),["stop"])},null,10,w)):(0,n.Q3)("",!0),i.preview?((0,n.uX)(),(0,n.CE)("i",{key:1,class:"control-bottom-btn el-icon-view",title:"预览",style:{cursor:"pointer"},onClick:(0,l.D$)((i=>C.previewImg(t,e)),["stop"])},null,8,y)):(0,n.Q3)("",!0),i.sortable&&!i.disabled?((0,n.uX)(),(0,n.CE)("i",{key:2,title:"后移",class:(0,s.C4)(["control-bottom-btn el-icon-right",{disabled:e===p.itemList.length-1}]),onClick:(0,l.D$)((e=>C.move(t.id,1)),["stop"])},null,10,b)):(0,n.Q3)("",!0)])):(0,n.Q3)("",!0)])],4)),[[S,t.loading]])])):((0,n.uX)(),(0,n.CE)("div",v,[(0,n.Lk)("div",{class:(0,s.C4)(["upload-item",{disabled:i.disabled}]),style:(0,s.Tr)(C.boxStyle),onClick:e=>C.handleClick(t.id),onKeydown:e=>C.handleKeydown(e,t.id)},[k,(0,n.Lk)("div",{innerHTML:C.rulesTip.join("<br>"),style:{"margin-top":"1em"}},null,8,L)],46,$)]))])))),128)),(0,n.Lk)("input",{ref:"input",type:"file",accept:i.accept,multiple:i.multiple,onChange:e[0]||(e[0]=(...t)=>C.handleChange&&C.handleChange(...t)),class:"upload-imgs__input","aria-labelledby":"Upload images"},null,40,I)])),[[S,p.loading]])}i(44114),i(14603),i(47566),i(98721);var x=i(96557),S=i(46262);const E=1024,A=1024*E;function U(t=null,e={}){let i={loading:!1,id:(0,S.createId)(),status:"input",src:"",display:"",imgId:""};return t?t.file&&!t.id?((0,S.isEmptyObj)(e)?i.status="new":("input"!==e.status&&"new"!==e.status||(i.status="new"),"init"!==e.status&&"edit"!==e.status||(i.status="edit")),i.id=e.id||i.id,i.src="",i.imgId="",i.display=t.localSrc||i.display,i={...t,...i},i):(i.id=t.id||(0,S.createId)(),i.imgId=t.imgId||i.imgId,i.src=t.src||i.src,i.display=t.display||i.display,i.status=t.status||"init",i={...t,...i},i):i}function z(t,e,i,n=""){let s=t;return s+=e&&i?` ${e}${n}~${i}${n}`:e?` ≥ ${e}${n}`:i?` ≤ ${i}${n}`:"无限制",s}const R=10;let T,F=[];var H={name:"UploadImgs",data(){return{srcList:[],itemList:[],imageRefs:[],loading:!1,currentId:"",imageInitialIndex:0}},props:{width:{type:[Number,String],default:160},height:{type:[Number,String],default:160},autoUpload:{type:Boolean,default:!0},value:{type:Array,default:()=>[]},accept:{type:String,default:"image/*"},minNum:{type:Number,default:0},maxNum:{type:Number,default:0},sortable:{type:Boolean,default:!1},preview:{type:Boolean,default:!0},multiple:{type:Boolean,default:!1},rules:{type:[Object,Function],default:()=>({maxSize:2})},disabled:{type:Boolean,default:!1},beforeUpload:{type:Function,default:null},remoteFuc:{type:Function,default:null},fit:{type:String,default:"contain"},animatedCheck:{type:Boolean,default:!1}},computed:{boxStyle(){const{width:t,height:e,disabled:i}=this,n={};"number"===typeof t?n.width=`${t}px`:"string"===typeof t&&(n.width=t),"number"===typeof e?n.height=`${e}px`:"string"===typeof e&&(n.height=e),n.cursor=i?"not-allowed":"pointer";let s=12;const l=8;return"number"===typeof t&&t/l<s&&(s=(t/l).toFixed(2)),n.fontSize=`${s}px`,n.textAlign="center",n.position="relative",n.display="flex",n.alignItems="center",n.justifyContent="center",n.overflow="hidden",n.lineHeight="1.3",n.flexDirection="column",n},min(){const{minNum:t}=this;return t<0?0:parseInt(t,10)},max(){const{min:t,maxNum:e}=this;return e<t?t:parseInt(e,10)},isStable(){const{min:t,max:e}=this;return 0!==e&&t===e},rulesTip(){const{rules:t}=this,e=[];let i;if("function"===typeof t)try{i=t()}catch(n){i={}}else i=t||{};return i.width&&i.height?e.push(`宽高 ${i.width}x${i.height}`):i.width?(e.push(`宽度 ${i.width}`),e.push(`${z("高度",i.minHeight,i.maxHeight)}`)):i.height?(e.push(`高度 ${i.height}`),e.push(`${z("宽度",i.minWidth,i.maxWidth)}`)):(e.push(`${z("宽度",i.minWidth,i.maxWidth)}`),e.push(`${z("高度",i.minHeight,i.maxHeight)}`)),i.ratio&&(Array.isArray(i.ratio)?e.push(`宽高比 ${i.ratio.join(":")}`):e.push(`宽高比 ${i.ratio}`)),(i.minSize||i.maxSize)&&e.push(z("文件大小",i.minSize,i.maxSize,"Mb")),i.allowAnimated&&i.allowAnimated>0&&(1===i.allowAnimated?e.push("不允许上传动图"):2===i.allowAnimated&&e.push("只允许上传动图")),e}},watch:{value(t){this.initItemList(t)}},mounted(){this.initItemList(this.value)},methods:{uploadCatch(t){const e={};return t.forEach(((t,i)=>{e[`file_${i}`]=t.img.file})),(0,x.post)("cms/file",e).then((e=>{if(!Array.isArray(e)||0===e.length)throw new Error("图像上传失败");const i=e.reduce(((t,e)=>(t[e.key]=e,t)),{});t.forEach(((t,e)=>{const n=i[`file_${e}`];t.cb(n)}))})).catch((e=>{t.forEach((t=>{t.cb(!1)}));let i="图像上传失败, 请重试";e.message&&(i=e.message),console.error(e),this.$message.error(i)}))},originUpload(t,e){if(F.push({img:t,cb:e}),F.length===R){const t=[...F];return F=[],clearTimeout(T),T=null,this.uploadCatch(t)}T&&F.length<R&&clearTimeout(T),T=setTimeout((()=>{this.uploadCatch([...F]),F=[],T=null}),50)},async uploadImg(t){const e=(t,e)=>{t.loading=!1,e&&(t.display=e.url,t.src=e.path,t.imgId=e.id,t.file=null,window.URL.revokeObjectURL(t.display))};if("input"!==t.status&&t.file){if(t.loading=!0,this.beforeUpload&&"function"===typeof this.beforeUpload&&"function"===typeof this.beforeUpload){const i=await new Promise((e=>{let i;try{i=this.beforeUpload(t,(t=>{e(!!t)}))}catch(n){e(!1)}null!=i&&"function"===typeof i.then&&i.then((t=>{e(!!t)})).catch((()=>{e(!1)}))}));if(!i)return e(t,!1),!1}if(this.remoteFuc&&"function"===typeof this.remoteFuc){const i=await new Promise((e=>{let i;try{i=this.remoteFuc(t.file,(t=>{e(t||!1)}))}catch(n){this.$message.error("执行自定义上传出错"),e(!1)}null!=i&&"function"===typeof i.then&&i.then((t=>{e(t||!1)})).catch((()=>{e(!1)}))}));return e(t,i),!!i&&t}return new Promise((i=>{this.originUpload(t,(n=>{e(t,n),i(!!n&&t)}))}))}},async getValue(){const{itemList:t,isStable:e,min:i}=this,n=e?t.length:t.length-1;for(let r=0;r<n;r+=1)if("input"===t[r].status)return this.$message.error("当前存在未选择图片, 请全部选择"),!1;if(n<i)return this.$message.error(`至少选择${i}张图片`),!1;const s=[];for(let r=0;r<t.length;r+=1)"input"!==t[r].status&&(t[r].file?s.push(this.uploadImg(t[r])):s.push(Promise.resolve(t[r])));const l=await Promise.all(s);if(l.some((t=>!t)))return!1;const a=l.map((t=>{const e={id:"new"===t.status?"":t.id,imgId:t.imgId||null,src:t.src||null,display:t.display,width:t.width||null,height:t.height||null,fileSize:t.size||null,fileName:t.name||null,fileType:t.type||null,isAnimated:t.isAnimated||null};return e}));return this.$emit("upload",a),a},delItem(t){const{itemList:e,isStable:i}=this,n=e.findIndex((e=>e.id===t)),s=e[n].display;i?(e[n]=U(),this.itemList=[...e]):e.splice(n,1),window.URL.revokeObjectURL(s),this.initItemList(this.itemList)},previewImg(t,e){const i=this.itemList.filter((t=>"input"!==t.status));this.srcList=i.map((t=>t.display)),this.imageRefs[e].showViewer=!0,this.imageRefs[e].$el.children[0].click()},setImageRef(t){t&&this.imageRefs.push(t)},move(t,e){const{itemList:i,isStable:n}=this,s=i.findIndex((e=>e.id===t));if(s+e<0||s+e>=i.length)return;if(!n&&s+e===i.length-1&&"input"===i[i.length-1].status)return;const l=i[s],a=i[s+e];i[s]=a,i[s+e]=l,this.itemList=[...i]},async validateImg(t){const{rules:e}=this;let i;if("function"===typeof e)try{i=e(t)}catch(n){i={}}else i=e;if(i.allowAnimated&&i.allowAnimated>0)if(null===t.isAnimated)this.$message.error('要进行是否动图验证需要配置 "animated-check" 属性为 true');else{if(1===i.allowAnimated&&t.isAnimated)throw new Error(`"${t.name}"为动态图, 不允许上传`);if(2===i.allowAnimated&&!t.isAnimated)throw new Error(`"${t.name}"为静态图, 只允许上传动态图`)}if(i.width){if(t.width!==i.width)throw new Error(`"${t.name}"图像宽不符合要求, 需为${i.width}`)}else{if(i.minWidth&&t.width<i.minWidth)throw new Error(`"${t.name}"图像宽不符合要求, 至少为${i.minWidth}`);if(i.maxWidth&&t.width>i.maxWidth)throw new Error(`"${t.name}"图像宽不符合要求, 至多为${i.maxWidth}`)}if(i.height){if(t.height!==i.height)throw new Error(`"${t.name}"图像高不符合要求, 需为${i.height}`)}else{if(i.minHeight&&t.height<i.minHeight)throw new Error(`"${t.name}"图像高不符合要求, 至少为${i.minHeight}`);if(i.maxHeight&&t.height>i.maxHeight)throw new Error(`"${t.name}"图像高不符合要求, 至多为${i.maxHeight}`)}if(i.ratio){let e;if(e=Array.isArray(i.ratio)?i.ratio[0]/i.ratio[1]:i.ratio,e=e.toFixed(2),(t.width/t.height).toFixed(2)!==e)throw new Error(`"${t.name}"图像宽高比不符合要求, 需为${e}`)}if(i.minSize&&t.size<i.minSize*A)throw new Error(`"${t.name}"图像文件大小比不符合要求, 至少为${i.minSize}Mb`);if(i.maxSize&&t.size>i.maxSize*A)throw new Error(`"${t.name}"图像文件大小比不符合要求, 至多为${i.maxSize}Mb`);return!0},async handleChange(t){const{currentId:e,autoUpload:i}=this,{files:n}=t.target;let s;if(!n)return;let l=[];const a=async t=>{const e=await this.getImgInfo(t);return l.push(e),await this.validateImg(e),e},r=[];for(let h=0;h<n.length;h+=1)r.push(a(n[h]));try{s=await Promise.all(r),this.setImgInfo(e,s),i&&this.itemList.forEach((t=>{this.uploadImg(t)}))}catch(o){for(let t=0;t<l.length;t+=1)window.URL.revokeObjectURL(l[t].localSrc);l=null,console.error(o),this.$message.error(o.message)}},setImgInfo(t,e=[]){const{max:i,itemList:n}=this,s=this.itemList.findIndex((e=>e.id===t));if(window.URL.revokeObjectURL(this.itemList[s].display),this.itemList[s]=U(e[0],this.itemList[s]),e.length>1){let t=e.length;if(this.isStable)for(let s=0,l=1;s<i&&l<t;s+=1)"input"===n[s].status&&(this.itemList[s]=U(e[l]),l+=1);else{const s=i-n.length;i&&t>s&&(t=s),"input"===n[n.length-1].status&&this.itemList.pop();for(let i=1;i<=t;i+=1)this.itemList.push(U(e[i]))}}this.initItemList(this.itemList)},handleKeydown(t,e){t.target===t.currentTarget&&(13!==t.keyCode&&32!==t.keyCode||this.handleClick(e))},handleClick(t){this.disabled||(this.currentId=t||"",this.$refs.input.value=null,this.$refs.input.click())},initItemList(t){const{max:e,isStable:i,disabled:n}=this,s=[];if(!t||!Array.isArray(t)||0===t.length){if(i){for(let t=0;t<e;t+=1)s.push(U());return void(this.itemList=s)}return s.push(U()),void(this.itemList=s)}for(let l=0;l<t.length;l+=1)s.push(U(t[l]));(0===e||t.length<e)&&!n&&"input"!==t[t.length-1].status&&s.push(U()),this.itemList=s},async getImgInfo(t){const{animatedCheck:e}=this,i=window.URL.createObjectURL(t),n=await(0,S.getFileType)(t);let s=null;return e&&(s=await(0,S.checkIsAnimated)({file:t,fileType:n,fileUrl:i})),new Promise(((e,l)=>{let a=new Image;a.src=i,a.onload=()=>{const l={localSrc:i,file:t,width:a.width,height:a.height,name:t.name,size:t.size,type:"unknow"===n?t.type:n,lastModified:t.lastModified,isAnimated:s};e(l),a=null},a.onerror=()=>{l(new Error("图像加载失败")),a=null}}))},clear(){this.initItemList([]),this.getValue()},reset(){this.initItemList(this.value)}}},X=i(66262);const _=(0,X.A)(H,[["render",C],["__scopeId","data-v-50ea34df"]]);var j=_},655:function(t,e,i){var n=i(36955),s=String;t.exports=function(t){if("Symbol"===n(t))throw new TypeError("Cannot convert a Symbol value to a string");return s(t)}},22812:function(t){var e=TypeError;t.exports=function(t,i){if(t<i)throw new e("Not enough arguments");return t}},14603:function(t,e,i){var n=i(36840),s=i(79504),l=i(655),a=i(22812),r=URLSearchParams,o=r.prototype,h=s(o.append),u=s(o["delete"]),d=s(o.forEach),c=s([].push),m=new r("a=1&a=2&b=3");m["delete"]("a",1),m["delete"]("b",void 0),m+""!=="a=2"&&n(o,"delete",(function(t){var e=arguments.length,i=e<2?void 0:arguments[1];if(e&&void 0===i)return u(this,t);var n=[];d(this,(function(t,e){c(n,{key:e,value:t})})),a(e,1);var s,r=l(t),o=l(i),m=0,p=0,f=!1,g=n.length;while(m<g)s=n[m++],f||s.key===r?(f=!0,u(this,s.key)):p++;while(p<g)s=n[p++],s.key===r&&s.value===o||h(this,s.key,s.value)}),{enumerable:!0,unsafe:!0})},47566:function(t,e,i){var n=i(36840),s=i(79504),l=i(655),a=i(22812),r=URLSearchParams,o=r.prototype,h=s(o.getAll),u=s(o.has),d=new r("a=1");!d.has("a",2)&&d.has("a",void 0)||n(o,"has",(function(t){var e=arguments.length,i=e<2?void 0:arguments[1];if(e&&void 0===i)return u(this,t);var n=h(this,t);a(e,1);var s=l(i),r=0;while(r<n.length)if(n[r++]===s)return!0;return!1}),{enumerable:!0,unsafe:!0})},98721:function(t,e,i){var n=i(43724),s=i(79504),l=i(62106),a=URLSearchParams.prototype,r=s(a.forEach);n&&!("size"in a)&&l(a,"size",{get:function(){var t=0;return r(this,(function(){t++})),t},configurable:!0,enumerable:!0})}}]);
|
