index.js 8.4 KB

12345678910
  1. /*!
  2. * FormCreate 低代码表单渲染器
  3. * @form-create/component-elm-frame 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 e=document.createElement("style");e.appendChild(document.createTextNode("._fc-frame .fc-files img{width:100%;height:100%;display:inline-block;vertical-align:top}._fc-frame .fc-upload-btn{border:1px dashed #c0ccda;cursor:pointer}._fc-frame .fc-upload-cover{opacity:0;position:absolute;inset:0;background:#0009;-webkit-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s}._fc-frame .fc-upload-cover i{color:#fff;font-size:20px;cursor:pointer;margin:0 2px}._fc-frame .fc-files:hover .fc-upload-cover{opacity:1}._fc-frame .el-upload{display:block}._fc-frame .fc-upload-btn,.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(e)}}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.FcFrame=n())})(this,function(){"use strict";var O=Object.defineProperty,L=Object.defineProperties;var S=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var E=Object.prototype.hasOwnProperty,F=Object.prototype.propertyIsEnumerable;var m=(o,n,r)=>n in o?O(o,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[n]=r,y=(o,n)=>{for(var r in n||(n={}))E.call(n,r)&&m(o,r,n[r]);if(p)for(var r of p(n))F.call(n,r)&&m(o,r,n[r]);return o},k=(o,n)=>L(o,S(n));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,s=1;s<arguments.length;s++)for(var i in t=arguments[s],t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},n.apply(this,arguments)}var r=["attrs","props","domProps"],g=["class","style","directives"],v=["on","nativeOn"],$=function(e){return e.reduce(function(t,s){for(var i in s)if(!t[i])t[i]=s[i];else if(r.indexOf(i)!==-1)t[i]=n({},t[i],s[i]);else if(g.indexOf(i)!==-1){var a=t[i]instanceof Array?t[i]:[t[i]],h=s[i]instanceof Array?s[i]:[s[i]];t[i]=[].concat(a,h)}else if(v.indexOf(i)!==-1)for(var l in s[i])if(t[i][l]){var u=t[i][l]instanceof Array?t[i][l]:[t[i][l]],B=s[i][l]instanceof Array?s[i][l]:[s[i][l]];t[i][l]=[].concat(u,B)}else t[i][l]=s[i][l];else if(i==="hook")for(var c in s[i])t[i][c]=t[i][c]?I(t[i][c],s[i][c]):s[i][c];else t[i]=s[i];return t},{})},I=function(e,t){return function(){e&&e.apply(this,arguments),t&&t.apply(this,arguments)}},w=$;const f=o(w);function d(e){return Array.isArray(e)?e:[null,void 0,""].indexOf(e)>-1?[]:[e]}return{name:"fcFrame",props:{formCreateInject:{type:Object,required:!0},type:{type:String,default:"input"},field:String,helper:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},src:{type:String,required:!0},icon:{type:String,default:"el-icon-upload2"},width:{type:String,default:"500px"},height:{type:String,default:"370px"},maxLength:{type:Number,default:0},okBtnText:{type:String,default:"确定"},closeBtnText:{type:String,default:"关闭"},modalTitle:String,handleIcon:{type:[String,Boolean],default:void 0},title:String,allowRemove:{type:Boolean,default:!0},onOpen:{type:Function,default:()=>{}},onOk:{type:Function,default:()=>{}},onCancel:{type:Function,default:()=>{}},onLoad:{type:Function,default:()=>{}},onBeforeRemove:{type:Function,default:()=>{}},onRemove:{type:Function,default:()=>{}},onHandle:{type:Function,default(e){this.previewImage=this.getSrc(e),this.previewVisible=!0}},modal:{type:Object,default:()=>({})},srcKey:{type:[String,Number]},value:[Array,String,Number,Object],previewMask:void 0,footer:{type:Boolean,default:!0},reload:{type:Boolean,default:!0},closeBtn:{type:Boolean,default:!0},okBtn:{type:Boolean,default:!0}},data(){return{fileList:d(this.value),previewVisible:!1,frameVisible:!1,previewImage:""}},watch:{value(e){this.fileList=d(e)},fileList(e){const t=this.maxLength===1?e[0]||"":e;this.$emit("input",t),this.$emit("change",t)},src(e){this.modalVm&&(this.modalVm.src=e)}},methods:{key(e){return e},closeModel(e){this.$emit(e?"$close":"$ok"),this.reload&&(this.$off("$ok"),this.$off("$close")),this.frameVisible=!1},handleCancel(){this.previewVisible=!1},showModel(){this.disabled||this.onOpen()===!1||(this.frameVisible=!0)},makeInput(){const e=this.$createElement,t={type:"text",value:this.fileList.map(s=>this.getSrc(s)).toString(),readonly:!0};return e("ElInput",f([{},{props:t},{key:this.key("input")}]),[this.fileList.length?e("i",{slot:"suffix",class:"el-input__icon el-icon-circle-close",on:{click:()=>this.fileList=[]}}):null,e("ElButton",f([{attrs:{icon:this.icon}},{on:{click:()=>this.showModel()}},{slot:"append"}]))])},makeGroup(e){const t=this.$createElement;return(!this.maxLength||this.fileList.length<this.maxLength)&&e.push(this.makeBtn()),t("div",{key:this.key("group")},[...e])},makeItem(e,t){const s=this.$createElement;return s("div",{class:"fc-files",key:this.key("file"+e)},[...t])},valid(e){const t=this.formCreateInject.field||this.field;if(t&&e!==t)throw new Error("[frame]无效的字段值")},makeIcons(e,t){const s=this.$createElement;if(this.handleIcon!==!1||this.allowRemove===!0){const i=[];return(this.type!=="file"&&this.handleIcon!==!1||this.type==="file"&&this.handleIcon)&&i.push(this.makeHandleIcon(e,t)),this.allowRemove&&i.push(this.makeRemoveIcon(e,t)),s("div",{class:"fc-upload-cover",key:this.key("uc")},[i])}},makeHandleIcon(e,t){const s=this.$createElement;return s("i",{class:this.handleIcon===!0||this.handleIcon===void 0?"el-icon-view":this.handleIcon,on:{click:()=>this.handleClick(e)},key:this.key("hi"+t)})},makeRemoveIcon(e,t){const s=this.$createElement;return s("i",{class:"el-icon-delete",on:{click:()=>this.handleRemove(e)},key:this.key("ri"+t)})},makeFiles(){const e=this.$createElement;return this.makeGroup(this.fileList.map((t,s)=>this.makeItem(s,[e("i",{class:"el-icon-tickets",on:{click:()=>this.handleClick(t)}}),this.makeIcons(t,s)])))},makeImages(){const e=this.$createElement;return this.makeGroup(this.fileList.map((t,s)=>this.makeItem(s,[e("img",{attrs:{src:this.getSrc(t)}}),this.makeIcons(t,s)])))},makeBtn(){const e=this.$createElement;return e("div",{class:"fc-upload-btn",on:{click:()=>this.showModel()},key:this.key("btn")},[e("i",{class:this.icon})])},handleClick(e){return this.onHandle(e)},handleRemove(e){this.disabled||this.onBeforeRemove(e)!==!1&&(this.fileList.splice(this.fileList.indexOf(e),1),this.onRemove(e))},getSrc(e){return this.srcKey?e[this.srcKey]:e},frameLoad(e){this.onLoad(e);try{this.helper===!0&&(e.form_create_helper={api:this.formCreateInject.api,close:t=>{this.valid(t),this.closeModel()},set:(t,s)=>{this.valid(t),this.disabled||this.$emit("input",s)},get:t=>(this.valid(t),this.value),onOk:t=>this.$on("$ok",t),onClose:t=>this.$on("$close",t)})}catch(t){console.log(t)}},makeFooter(){const e=this.$createElement,{okBtnText:t,closeBtnText:s,closeBtn:i,okBtn:a,footer:h}=this.$props;if(h)return e("div",{slot:"footer"},[i?e("ElButton",{on:{click:()=>this.onCancel()!==!1&&(this.frameVisible=!1)}},[s]):null,a?e("ElButton",{attrs:{type:"primary"},on:{click:()=>this.onOk()!==!1&&this.closeModel()}},[t]):null])}},render(){const e=arguments[0],t=this.type;let s;t==="input"?s=this.makeInput():t==="image"?s=this.makeImages():s=this.makeFiles();const{width:i="30%",height:a,src:h,title:l,modalTitle:u}=this.$props;return this.$nextTick(()=>{this.$refs.frame&&this.frameLoad(this.$refs.frame.contentWindow||{})}),e("div",{class:"_fc-frame"},[s,e("el-dialog",f([{},{props:{appendToBody:!0,modal:this.previewMask,title:u,visible:this.previewVisible}},{on:{close:this.handleCancel}}]),[e("img",{style:"width: 100%",attrs:{src:this.previewImage}})]),e("el-dialog",f([{},{props:k(y({width:i,title:l,appendToBody:!0},this.modal),{visible:this.frameVisible})},{on:{close:()=>this.closeModel(!0)}}]),[this.frameVisible||!this.reload?e("iframe",{ref:"frame",attrs:{src:h,frameBorder:"0"},style:{height:a,border:"0 none",width:"100%"}}):null,this.makeFooter()])])},mounted(){this.$on("fc.closeModal",this.closeModal)}}});