@form-create/component-ivu-frame
Version:
@form-create/iview 内置组件
11 lines (10 loc) • 8.46 kB
JavaScript
/*!
* FormCreate 低代码表单渲染器
* @form-create/component-ivu-frame v2.6.3
* (c) 2018-2024 xaboy
* Github https://github.com/xaboy/form-create
* Site https://form-create.com/
* Released under the MIT License.
*/
(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode("._fc-frame .fc-upload-btn{border:1px dashed #c0ccda;cursor:pointer}._fc-frame .fc-upload-cover{opacity:0;position:absolute;inset:0;background:#0009;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 .ivu-upload-list{margin-top:0}._fc-frame .fc-files img{width:100%;height:100%;display:inline-block;vertical-align:top}._fc-frame .fc-upload-btn,._fc-frame .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;box-shadow:2px 2px 5px #0000001a;margin-right:4px;box-sizing:border-box}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
(function(r,n){typeof exports=="object"&&typeof module!="undefined"?module.exports=n():typeof define=="function"&&define.amd?define(n):(r=typeof globalThis!="undefined"?globalThis:r||self,r.FcFrame=n())})(this,function(){"use strict";var S=Object.defineProperty;var k=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var g=(r,n,l)=>n in r?S(r,n,{enumerable:!0,configurable:!0,writable:!0,value:l}):r[n]=l,v=(r,n)=>{for(var l in n||(n={}))F.call(n,l)&&g(r,l,n[l]);if(k)for(var l of k(n))L.call(n,l)&&g(r,l,n[l]);return r};function r(s){return s&&s.__esModule&&Object.prototype.hasOwnProperty.call(s,"default")?s.default:s}function n(){return n=Object.assign?Object.assign.bind():function(s){for(var e,i=1;i<arguments.length;i++)for(var t in e=arguments[i],e)Object.prototype.hasOwnProperty.call(e,t)&&(s[t]=e[t]);return s},n.apply(this,arguments)}var l=["attrs","props","domProps"],I=["class","style","directives"],$=["on","nativeOn"],w=function(s){return s.reduce(function(e,i){for(var t in i)if(!e[t])e[t]=i[t];else if(l.indexOf(t)!==-1)e[t]=n({},e[t],i[t]);else if(I.indexOf(t)!==-1){var a=e[t]instanceof Array?e[t]:[e[t]],u=i[t]instanceof Array?i[t]:[i[t]];e[t]=[].concat(a,u)}else if($.indexOf(t)!==-1)for(var o in i[t])if(e[t][o]){var c=e[t][o]instanceof Array?e[t][o]:[e[t][o]],d=i[t][o]instanceof Array?i[t][o]:[i[t][o]];e[t][o]=[].concat(c,d)}else e[t][o]=i[t][o];else if(t==="hook")for(var h in i[t])e[t][h]=e[t][h]?B(e[t][h],i[t][h]):i[t][h];else e[t]=i[t];return e},{})},B=function(s,e){return function(){s&&s.apply(this,arguments),e&&e.apply(this,arguments)}},O=w;const f=r(O);function p(s){return Array.isArray(s)?s:[null,void 0,""].indexOf(s)>-1?[]:[s]}const M="fcFrame";function m(s){return{name:M,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:s.fileUpIcon},width:{type:[Number,String],default:500},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:p(this.value),previewVisible:!1,frameVisible:!1,previewImage:""}},watch:{value(e){this.fileList=p(e)},fileList(e){const i=this.maxLength===1?e[0]||"":e;this.$emit("input",i),this.$emit("change",i)},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},showModel(){this.disabled||this.onOpen()===!1||(this.frameVisible=!0)},makeInput(){const e=this.$createElement,i={type:"text",value:this.fileList.map(t=>this.getSrc(t)).toString(),icon:this.icon,readonly:!0,clearable:!1};return e("Input",f([{},{props:i},{},{on:{"on-click":()=>this.showModel()}},{key:this.key("input")}]))},makeGroup(e){const i=this.$createElement;return(!this.maxLength||this.fileList.length<this.maxLength)&&e.push(this.makeBtn()),i("div",{key:this.key("group")},[...e])},makeItem(e,i){const t=this.$createElement;return t("div",{class:"fc-files",key:this.key("file"+e)},[...i])},valid(e){const i=this.formCreateInject.field||this.field;if(i&&e!==i)throw new Error("[frame]无效的字段值")},makeIcons(e,i){const t=this.$createElement;if(this.handleIcon!==!1||this.allowRemove===!0){const a=[];return(this.type!=="file"&&this.handleIcon!==!1||this.type==="file"&&this.handleIcon)&&a.push(this.makeHandleIcon(e,i)),this.allowRemove&&a.push(this.makeRemoveIcon(e,i)),t("div",{class:"fc-upload-cover",key:this.key("uc")},[a])}},makeHandleIcon(e,i){const t=this.$createElement;return t("icon",f([{},{props:{type:this.handleIcon===!0||this.handleIcon===void 0?"ios-eye-outline":this.handleIcon}},{on:{click:()=>this.handleClick(e)},key:this.key("hi"+i)}]))},makeRemoveIcon(e,i){const t=this.$createElement;return t("icon",f([{},{props:{type:"ios-trash-outline"}},{on:{click:()=>this.handleRemove(e)},key:this.key("ri"+i)}]))},makeFiles(){const e=this.$createElement;return this.makeGroup(this.fileList.map((i,t)=>this.makeItem(t,[e("icon",f([{},{props:{type:s.fileIcon,size:40}},{on:{click:()=>this.handleClick(i)}}])),this.makeIcons(i,t)])))},makeImages(){const e=this.$createElement;return this.makeGroup(this.fileList.map((i,t)=>this.makeItem(t,[e("img",{attrs:{src:this.getSrc(i)}}),this.makeIcons(i,t)])))},makeBtn(){const e=this.$createElement;return e("div",{class:"fc-upload-btn",on:{click:()=>this.showModel()},key:this.key("btn")},[e("icon",f([{},{props:{type:this.icon,size:20}}]))])},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:i=>{this.valid(i),this.closeModel()},set:(i,t)=>{this.valid(i),this.disabled||this.$emit("input",t)},get:i=>(this.valid(i),this.value),onOk:i=>this.$on("$ok",i),onClose:i=>this.$on("$close",i)})}catch(i){console.log(i)}},makeFooter(){const e=this.$createElement,{okBtnText:i,closeBtnText:t,closeBtn:a,okBtn:u,footer:o}=this.$props,c=[];return o&&(a&&c.push(e("Button",{on:{click:()=>this.onCancel()!==!1&&this.closeModel(!0)}},[t])),u&&c.push(e("Button",{attrs:{type:"primary"},on:{click:()=>this.onOk()!==!1&&this.closeModel()}},[i]))),c}},render(){const e=arguments[0],i=this.type;let t;i==="input"?t=this.makeInput():i==="image"?t=this.makeImages():t=this.makeFiles();const{width:a,height:u,src:o,title:c,modalTitle:d}=this.$props;return this.$nextTick(()=>{this.$refs.frame&&this.frameLoad(this.$refs.frame.contentWindow||{})}),e("div",{class:"_fc-frame"},[t,e("Modal",f([{},{props:{mask:this.previewMask,title:d,footerHide:!0}},{model:{value:this.previewVisible,callback:h=>{this.previewVisible=h}}}]),[e("img",{style:"width: 100%",attrs:{src:this.previewImage}})]),e("Modal",f([{},{props:v({width:a,title:c},this.modal)},{on:{"on-cancel":()=>this.closeModel(!0)},model:{value:this.frameVisible,callback:h=>{this.frameVisible=h}}}]),[this.frameVisible||!this.reload?e("iframe",{ref:"frame",attrs:{src:o,frameBorder:"0"},style:{height:u,border:"0 none",width:"100%"}}):null,e("div",{slot:"footer"},[this.makeFooter()])])])},mounted(){this.$on("fc.closeModal",this.closeModal)}}}const y=m({fileIcon:"md-document",fileUpIcon:"ios-folder-open"});return y.v2=m({fileIcon:"document-text",fileUpIcon:"folder"}),y});