1 line
8.8 KiB
JavaScript
1 line
8.8 KiB
JavaScript
"use strict";(self["webpackChunkX_PHP_Admin"]=self["webpackChunkX_PHP_Admin"]||[]).push([[351],{5351:function(e,l,i){i.r(l),i.d(l,{default:function(){return $}});var t=i(6252);function s(e,l,i,s,a,o){const u=(0,t.up)("el-button"),n=(0,t.up)("x-file-select"),r=(0,t.up)("el-card"),c=(0,t.up)("el-main"),d=(0,t.up)("el-container");return(0,t.wg)(),(0,t.j4)(d,null,{default:(0,t.w5)((()=>[(0,t.Wm)(c,null,{default:(0,t.w5)((()=>[(0,t.Wm)(r,{shadow:"never",style:{height:"100%"}},{default:(0,t.w5)((()=>[(0,t.Wm)(n,{modelValue:a.file,"onUpdate:modelValue":l[0]||(l[0]=e=>a.file=e),multiple:a.multiple,hideUpload:a.hideUpload,max:99,onSubmit:o.submit},{do:(0,t.w5)((()=>[(0,t.Wm)(u,null,{default:(0,t.w5)((()=>[(0,t.Uk)("自定义插槽")])),_:1})])),_:1},8,["modelValue","multiple","hideUpload","onSubmit"])])),_:1})])),_:1})])),_:1})}var a=i(3577),o=i(9963);const u=e=>((0,t.dD)("data-v-632818a0"),e=e(),(0,t.Cn)(),e),n={class:"x-file-select"},r={class:"x-file-select__side"},c=u((()=>(0,t._)("div",{class:"x-file-select__side-menu"},null,-1))),d={key:0,class:"x-file-select__side-msg"},p={class:"x-file-select__files"},m={class:"x-file-select__top"},f={key:0,class:"upload"},g={class:"tips"},h={class:"keyword"},_={class:"x-file-select__list"},x={class:"x-file-select__item__file"},w={class:"x-file-select__item__upload"},y=["onClick"],v={class:"x-file-select__item__file"},k={key:0,class:"x-file-select__item__checkbox"},P={key:1,class:"x-file-select__item__select"},b=u((()=>(0,t._)("div",{class:"x-file-select__item__box"},null,-1))),C={key:3,class:"item-file item-file-doc"},D={key:1,class:"x-icon-file-list-fill",style:{color:"#999"}},S=["title"],z={class:"x-file-select__pagination"},U={class:"x-file-select__do"};function W(e,l,i,s,u,W){const I=(0,t.up)("el-button"),L=(0,t.up)("el-upload"),N=(0,t.up)("el-icon-warning"),q=(0,t.up)("el-icon"),j=(0,t.up)("el-input"),O=(0,t.up)("el-empty"),V=(0,t.up)("el-progress"),$=(0,t.up)("el-image"),B=(0,t.up)("el-icon-check"),E=(0,t.up)("el-scrollbar"),K=(0,t.up)("el-pagination"),F=(0,t.Q2)("loading");return(0,t.wg)(),(0,t.iD)("div",n,[(0,t.wy)(((0,t.wg)(),(0,t.iD)("div",r,[c,i.multiple?((0,t.wg)(),(0,t.iD)("div",d,[(0,t.Uk)(" 已选择 "),(0,t._)("b",null,(0,a.zw)(u.value.length),1),(0,t.Uk)(" / "),(0,t._)("b",null,(0,a.zw)(i.max),1),(0,t.Uk)(" 项 ")])):(0,t.kq)("",!0)])),[[F,u.menuLoading]]),(0,t.wy)(((0,t.wg)(),(0,t.iD)("div",p,[(0,t._)("div",m,[i.hideUpload?(0,t.kq)("",!0):((0,t.wg)(),(0,t.iD)("div",f,[(0,t.Wm)(L,{class:"x-file-select__upload",action:"",multiple:"","show-file-list":!1,accept:u.accept,"on-change":W.uploadChange,"before-upload":W.uploadBefore,"on-progress":W.uploadProcess,"on-success":W.uploadSuccess,"on-error":W.uploadError,"http-request":W.uploadRequest},{default:(0,t.w5)((()=>[(0,t.Wm)(I,{type:"primary",icon:"el-icon-upload"},{default:(0,t.w5)((()=>[(0,t.Uk)("本地上传")])),_:1})])),_:1},8,["accept","on-change","before-upload","on-progress","on-success","on-error","http-request"]),(0,t._)("span",g,[(0,t.Wm)(q,null,{default:(0,t.w5)((()=>[(0,t.Wm)(N)])),_:1}),(0,t.Uk)("大小不超过"+(0,a.zw)(i.maxSize)+"MB",1)])])),(0,t._)("div",h,[(0,t.Wm)(j,{modelValue:u.keyword,"onUpdate:modelValue":l[0]||(l[0]=e=>u.keyword=e),"prefix-icon":"el-icon-search",placeholder:"文件名搜索",clearable:"",onKeyup:(0,o.D2)(W.search,["enter"]),onClear:W.search},null,8,["modelValue","onKeyup","onClear"])])]),(0,t._)("div",_,[(0,t.Wm)(E,{ref:"scrollbar"},{default:(0,t.w5)((()=>[0==u.fileList.length&&0==u.data.length?((0,t.wg)(),(0,t.j4)(O,{key:0,description:"无数据","image-size":80})):(0,t.kq)("",!0),((0,t.wg)(!0),(0,t.iD)(t.HY,null,(0,t.Ko)(u.fileList,((e,l)=>((0,t.wg)(),(0,t.iD)("div",{key:l,class:"x-file-select__item"},[(0,t._)("div",x,[(0,t._)("div",w,[(0,t.Wm)(V,{type:"circle",percentage:e.progress,width:70},null,8,["percentage"])]),(0,t.Wm)($,{src:e.tempImg,fit:"contain"},null,8,["src"])]),(0,t._)("p",null,(0,a.zw)(e.name),1)])))),128)),((0,t.wg)(!0),(0,t.iD)(t.HY,null,(0,t.Ko)(u.data,(e=>((0,t.wg)(),(0,t.iD)("div",{key:e[u.fileProps.key],class:(0,a.C_)(["x-file-select__item",{active:u.value.includes(e[u.fileProps.url])}]),onClick:l=>W.select(e)},[(0,t._)("div",v,[i.multiple?((0,t.wg)(),(0,t.iD)("div",k,[(0,t.Wm)(q,null,{default:(0,t.w5)((()=>[(0,t.Wm)(B)])),_:1})])):((0,t.wg)(),(0,t.iD)("div",P,[(0,t.Wm)(q,null,{default:(0,t.w5)((()=>[(0,t.Wm)(B)])),_:1})])),b,W._isImg(e[u.fileProps.url])?((0,t.wg)(),(0,t.j4)($,{key:2,src:e[u.fileProps.url],fit:"contain",lazy:""},null,8,["src"])):((0,t.wg)(),(0,t.iD)("div",C,[u.files[W._getExt(e[u.fileProps.url])]?((0,t.wg)(),(0,t.iD)("i",{key:0,class:(0,a.C_)(u.files[W._getExt(e[u.fileProps.url])].icon),style:(0,a.j5)({color:u.files[W._getExt(e[u.fileProps.url])].color})},null,6)):((0,t.wg)(),(0,t.iD)("i",D))]))]),(0,t._)("p",{title:e[u.fileProps.fileName]},(0,a.zw)(e[u.fileProps.fileName]),9,S)],10,y)))),128))])),_:1},512)]),(0,t._)("div",z,[(0,t.Wm)(K,{small:"",background:"",layout:"prev, pager, next",total:u.total,"page-size":u.pageSize,currentPage:u.currentPage,"onUpdate:currentPage":l[1]||(l[1]=e=>u.currentPage=e),onCurrentChange:W.reload},null,8,["total","page-size","currentPage","onCurrentChange"])]),(0,t._)("div",U,[(0,t.WI)(e.$slots,"do",{},void 0,!0),(0,t.Wm)(I,{type:"primary",disabled:u.value.length<=0,onClick:W.submit},{default:(0,t.w5)((()=>[(0,t.Uk)("确 定")])),_:1},8,["disabled","onClick"])])])),[[F,u.listLoading]])])}i(7658),i(2062);var I={successCode:200,maxSize:30,max:99,uploadParseData:function(e){return{id:e.data.id,fileName:e.data.fileName,url:e.data.src}},listParseData:function(e){return{rows:e.data.data,total:e.data.count,msg:e.message,code:e.code}},request:{page:"page",pageSize:"pageSize",keyword:"keyword",menuKey:"groupId"},menuProps:{key:"id",label:"label",children:"children"},fileProps:{key:"id",fileName:"fileName",url:"url"},files:{doc:{icon:"x-icon-file-word-2-fill",color:"#409eff"},docx:{icon:"x-icon-file-word-2-fill",color:"#409eff"},xls:{icon:"x-icon-file-excel-2-fill",color:"#67C23A"},xlsx:{icon:"x-icon-file-excel-2-fill",color:"#67C23A"},ppt:{icon:"x-icon-file-ppt-2-fill",color:"#F56C6C"},pptx:{icon:"x-icon-file-ppt-2-fill",color:"#F56C6C"}}},L={props:{modelValue:null,hideUpload:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},max:{type:Number,default:I.max},onlyImage:{type:Boolean,default:!1},maxSize:{type:Number,default:I.maxSize}},data(){return{keyword:null,pageSize:20,total:0,currentPage:1,data:[],menu:[],menuId:"",value:this.multiple?[]:"",fileList:[],accept:this.onlyImage?"image/gif, image/jpeg, image/png":"",listLoading:!1,menuLoading:!1,treeProps:I.menuProps,fileProps:I.fileProps,files:I.files}},watch:{multiple(){this.value=this.multiple?[]:"",this.$emit("update:modelValue",JSON.parse(JSON.stringify(this.value)))}},mounted(){this.getMenu(),this.getData()},methods:{async getMenu(){this.menuLoading=!0;var e={data:[]};this.menu=e.data,this.menuLoading=!1},async getData(){this.listLoading=!0;var e={[I.request.menuKey]:this.menuId,[I.request.page]:this.currentPage,[I.request.pageSize]:this.pageSize,[I.request.keyword]:this.keyword};this.onlyImage&&(e.type="image"),this.listLoading=!1,this.$refs.scrollbar.setScrollTop(0)},groupClick(e){this.menuId=e.id,this.currentPage=1,this.keyword=null,this.getData()},reload(){this.getData()},search(){this.currentPage=1,this.getData()},select(e){const l=e[this.fileProps.url];this.multiple?this.value.includes(l)?this.value.splice(this.value.findIndex((e=>e==l)),1):this.value.push(l):this.value.includes(l)?this.value="":this.value=l},submit(){const e=JSON.parse(JSON.stringify(this.value));this.$emit("update:modelValue",e),this.$emit("submit",e)},uploadChange(e,l){e.tempImg=URL.createObjectURL(e.raw),this.fileList=l},uploadBefore(e){const l=e.size/1024/1024<this.maxSize;if(!l)return this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`),!1},uploadRequest(e){var l=I.apiObj;const i=new FormData;i.append("file",e.file),i.append([I.request.menuKey],this.menuId),l.post(i,{onUploadProgress:l=>{e.onProgress(l)}}).then((l=>{e.onSuccess(l)})).catch((l=>{e.onError(l)}))},uploadProcess(e,l){l.progress=Number((e.loaded/e.total*100).toFixed(2))},uploadSuccess(e,l){this.fileList.splice(this.fileList.findIndex((e=>e.uid==l.uid)),1);var i=I.uploadParseData(e);this.data.unshift({[this.fileProps.key]:i.id,[this.fileProps.fileName]:i.fileName,[this.fileProps.url]:i.url}),this.multiple||(this.value=i.url)},uploadError(e){this.$notify.error({title:"上传文件错误",message:e})},_isImg(e){const l=[".jpg",".jpeg",".png",".gif",".bmp"],i=e.substring(e.lastIndexOf("."));return-1!=l.indexOf(i)},_getExt(e){return e.substring(e.lastIndexOf(".")+1)}}},N=i(3744);const q=(0,N.Z)(L,[["render",W],["__scopeId","data-v-632818a0"]]);var j=q,O={name:"fileselect",components:{xFileSelect:j},data(){return{file:"",multiple:!1,hideUpload:!1,upload:"",upload2:""}},mounted(){},methods:{submit(e){console.log(e),this.$message("返回值请查看F12控制台console.log()")}}};const V=(0,N.Z)(O,[["render",s]]);var $=V}}]); |