index.js 6.6 KB

12345678910
  1. /*!
  2. * FormCreate 低代码表单渲染器
  3. * @form-create/component-elm-upload v2.6.3
  4. * (c) 2018-2024 xaboy
  5. * Github https://github.com/xaboy/form-create
  6. * Site https://form-create.com/
  7. * Released under the MIT License.
  8. */
  9. (function(){"use strict";try{if(typeof document!="undefined"){var o=document.createElement("style");o.appendChild(document.createTextNode("._fc-upload .fc-files img{width:100%;height:100%;display:inline-block;vertical-align:top}._fc-upload .fc-upload-btn{border:1px dashed #c0ccda;cursor:pointer}._fc-upload .fc-upload-cover{opacity:0;position:absolute;inset:0;background:#0009;-webkit-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s}._fc-upload .fc-upload-cover i{color:#fff;font-size:20px;cursor:pointer;margin:0 2px}._fc-upload .fc-files:hover .fc-upload-cover{opacity:1}._fc-upload .el-upload{display:block}._fc-upload .fc-upload-btn,._fc-upload .fc-files{display:inline-block;width:58px;height:58px;text-align:center;line-height:58px;border:1px solid #c0ccda;border-radius:4px;overflow:hidden;background:#fff;position:relative;-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.1);box-shadow:2px 2px 5px #0000001a;margin-right:4px;-webkit-box-sizing:border-box;box-sizing:border-box}")),document.head.appendChild(o)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
  10. (function(o,n){typeof exports=="object"&&typeof module!="undefined"?module.exports=n():typeof define=="function"&&define.amd?define(n):(o=typeof globalThis!="undefined"?globalThis:o||self,o.FcUpload=n())})(this,function(){"use strict";function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t,i=1;i<arguments.length;i++)for(var s in t=arguments[i],t)Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e},n.apply(this,arguments)}var u=["attrs","props","domProps"],d=["class","style","directives"],c=["on","nativeOn"],f=function(e){return e.reduce(function(t,i){for(var s in i)if(!t[s])t[s]=i[s];else if(u.indexOf(s)!==-1)t[s]=n({},t[s],i[s]);else if(d.indexOf(s)!==-1){var v=t[s]instanceof Array?t[s]:[t[s]],I=i[s]instanceof Array?i[s]:[i[s]];t[s]=[].concat(v,I)}else if(c.indexOf(s)!==-1)for(var r in i[s])if(t[s][r]){var w=t[s][r]instanceof Array?t[s][r]:[t[s][r]],$=i[s][r]instanceof Array?i[s][r]:[i[s][r]];t[s][r]=[].concat(w,$)}else t[s][r]=i[s][r];else if(s==="hook")for(var l in i[s])t[s][l]=t[s][l]?m(t[s][l],i[s][l]):i[s][l];else t[s]=i[s];return t},{})},m=function(e,t){return function(){e&&e.apply(this,arguments),t&&t.apply(this,arguments)}},y=f;const a=o(y);function p(e){return Array.isArray(e)?e:[null,void 0,""].indexOf(e)>-1?[]:[e]}function g(e,t){return Object.keys(e).reduce((i,s)=>((!t||t.indexOf(s)===-1)&&i.push(e[s]),i),[])}function h(e,t){return{url:e,name:k(e),uid:t}}function k(e){return(""+e).split("/").pop()}return{name:"fcUpload",props:{formCreateInject:{type:Object,required:!0},onHandle:{type:Function,default(e){this.previewImage=e.url,this.previewVisible=!0}},uploadType:{type:String,default:"file"},limit:{type:Number,default:0},allowRemove:{type:Boolean,default:!0},previewMask:void 0,modalTitle:String,handleIcon:{type:[String,Boolean],default:()=>{}},value:[Array,String]},data(){return{uploadList:[],previewVisible:!1,previewImage:"",cacheFiles:[]}},created(){this.formCreateInject.prop.props.showFileList===void 0&&(this.formCreateInject.prop.props.showFileList=!1),this.formCreateInject.prop.props.fileList=p(this.value).map(h)},watch:{value(e){this.$refs.upload.uploadFiles.every(t=>!t.status||t.status==="success")&&(this.$refs.upload.uploadFiles=p(e).map(h),this.uploadList=this.$refs.upload.uploadFiles)},limit(e,t){(t===1||e===1)&&this.update()}},methods:{key(e){return e},isDisabled(){return this.formCreateInject.prop.props.disabled===!0},onRemove(e){this.isDisabled()||this.$refs.upload.handleRemove(e)},handleClick(e){this.onHandle(e)},makeItem(e,t){const i=this.$createElement;return this.uploadType==="image"?i("img",{attrs:{src:e.url},key:this.key("img"+t)}):i("i",{class:"el-icon-tickets",key:this.key("i"+t)})},makeRemoveIcon(e,t){const i=this.$createElement;return i("i",{class:"el-icon-delete",on:{click:()=>this.onRemove(e)},key:this.key("ri"+t)})},makeHandleIcon(e,t){const i=this.$createElement;return i("i",{class:this.handleIcon===!0||this.handleIcon===void 0?"el-icon-view":this.handleIcon,on:{click:()=>this.handleClick(e)},key:this.key("hi"+t)})},makeProgress(e,t){const i=this.$createElement;return i("ElProgress",a([{},{props:{percentage:e.percentage,type:"circle",width:52}},{style:"margin-top:2px;",key:this.key("pg"+t)}]))},makeIcons(e,t){const i=this.$createElement,s=[];if(this.allowRemove||this.handleIcon!==!1)return(this.uploadType!=="file"&&this.handleIcon!==!1||this.uploadType==="file"&&this.handleIcon)&&s.push(this.makeHandleIcon(e,t)),this.allowRemove&&s.push(this.makeRemoveIcon(e,t)),i("div",{class:"fc-upload-cover"},[s])},makeFiles(){const e=this.$createElement;return this.uploadList.map((t,i)=>this.$scopedSlots.fileList?this.$scopedSlots.fileList({file:t,index:i,vm:this}):e("div",{key:this.key(i),class:"fc-files"},[t.percentage!==void 0&&t.status!=="success"?this.makeProgress(t,i):[this.makeItem(t,i),this.makeIcons(t,i)]]))},makeUpload(){const e=this.$createElement,t=!this.limit||this.limit>this.uploadList.length;return e("ElUpload",a([{},this.formCreateInject.prop,{},{style:{display:"inline-block"},key:this.key("upload"),ref:"upload"}]),[t?e("template",{slot:"default"},[this.$slots.default||e("div",{class:"fc-upload-btn"},[e("i",{class:"el-icon-upload2"})])]):null,g(this.$slots,["default"])])},update(){let e=this.$refs.upload.uploadFiles.map(t=>t.url).filter(t=>t!==void 0&&t.indexOf("blob:")!==0);JSON.stringify(e)!==JSON.stringify(this.cacheFiles)&&(this.cacheFiles=[...e],this.$emit("input",this.limit===1?e[0]||"":e))},handleCancel(){this.previewVisible=!1}},render(){const e=arguments[0];return this.$refs.upload&&(this.formCreateInject.prop.props.showFileList===void 0&&(this.formCreateInject.prop.props.showFileList=this.$refs.upload.showFileList),this.formCreateInject.prop.props.fileList=this.$refs.upload.fileList),e("div",{class:"_fc-upload"},[[this.formCreateInject.prop.props.showFileList?[]:this.makeFiles(),this.makeUpload()],e("el-dialog",a([{},{props:{appendToBody:!0,modal:this.previewMask,title:this.modalTitle,visible:this.previewVisible}},{on:{close:this.handleCancel}}]),[e("img",{attrs:{alt:"example",src:this.previewImage},style:"width: 100%"})])])},mounted(){this.uploadList=this.$refs.upload.uploadFiles,this.$watch(()=>this.$refs.upload.uploadFiles,()=>{this.update()},{deep:!0}),this.$emit("fc.el",this.$refs.upload)}}});