@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 12.8 kB
JavaScript
(function(m,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("../designer-canvas/index.umd.js"),require("../common/index.umd.js"),require("../property-panel/index.umd.js"),require("../loading/index.umd.js"),require("../notify/index.umd.js"),require("../schema-selector/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","../designer-canvas/index.umd.js","../common/index.umd.js","../property-panel/index.umd.js","../loading/index.umd.js","../notify/index.umd.js","../schema-selector/index.umd.js"],o):(m=typeof globalThis<"u"?globalThis:m||self,o(m["external-container"]={},m.Vue,m.dynamicResolver,m.designerCanvas,m.common,m.propertyPanel,m.loading,m.notify,m.schemaSelector))})(this,function(m,o,k,I,N,V,O,q,A){"use strict";const _=new Map([["appearance",k.resolveAppearance]]);function J(i,n,e,t){const a=e.parentComponentInstance;return a&&t&&(a.schema.type===I.DgControl["list-nav"].type?n.appearance={class:"position-relative h-100"}:n.appearance={class:"position-relative",style:"height:300px;flex-shrink: 0;"}),n}const z={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/external-container.schema.json",title:"external-container",description:"A Farris Visual Component",type:"object",properties:{id:{description:"The unique identifier for a external-container",type:"string"},type:{description:"The type string of external-container",type:"string",default:"external-container"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string",default:""}},default:{}},visible:{description:"",type:"boolean",default:!0},url:{description:"The url that load the schema from",type:"string"},externalComponent:{description:"The unique identifier for component",type:"object",default:{}}},required:["id","type","externalComponent"],events:{onCommunication:"通讯事件"}},j={customClass:{type:String,default:""},customStyle:{type:String,default:""},componentType:{type:String,default:""},url:{type:String,default:""},schema:{type:Object},useIsolateJs:{type:Boolean,default:!1},externalComponent:{type:Object,default:{}}},w=k.createPropsResolver(j,z,_,J),b=o.defineComponent({name:"FExternalContainer",props:j,emits:[],setup(i,n){return()=>o.createVNode("div",{class:i.customClass,style:i.customStyle},[n.slots.default&&n.slots.default()])}}),L={convertFrom:(i,n)=>{var e;return(e=i.externalComponent)==null?void 0:e.name},convertTo:(i,n,e)=>{e&&(i.externalComponent||(i.externalComponent={}),Object.assign(i.externalComponent,{id:e.id,nameSpace:e.nameSpace,code:e.code,name:e.name,fileName:e.fileName,bizobjectID:e.bizobjectID,relativePath:e.relativePath,projectName:e.projectName}))}};class H extends V.BaseControlProperty{constructor(n,e){super(n,e)}getPropertyConfig(n,e){return this.propertyConfig.categories.basic=this.getBasicPropConfig(n),this.propertyConfig.categories.appearance=this.getAppearanceConfig(n),this.propertyConfig.categories.content=this.getContentConfig(n),this.propertyConfig.categories.eventsEditor=this.getEventPropConfig(n),this.propertyConfig}getContentConfig(n){const e=this;return{description:"外部表单",title:"内容",properties:{externalComponent:{description:"引入的外部表单",title:"引入表单",type:"string",editor:{type:"schema-selector",title:"选择表单",requiredTip:"请选择表单",modalHeight:600,modalWidth:950,editorParams:{formBasicInfo:this.formSchemaUtils.getFormMetadataBasicInfo()},viewOptions:this.formSchemaUtils.designerMode==="PC_RTC"?[{id:"total",title:"全部",type:"Card",dataSource:"Total",pagination:!0}]:[{id:"recommend",title:"推荐",type:"Card",dataSource:"Recommand",pagination:!0},{id:"total",title:"全部",type:"Card",dataSource:"Total",pagination:!0}],repositoryToken:N.FormSchemaRepositorySymbol,validateFunction:t=>{if(t.id)return e.checkFormValidtion(t)}},$converter:L}},setPropertyRelates(t){(t==null?void 0:t.propertyID)==="externalComponent"&&e.syncCommunicationAfterFormChanged(t,n)}}}checkFormValidtion(n){const e=this.designerHostService.formSchemaUtils.getFormMetadataBasicInfo(),t=this.designerHostService.formSchemaUtils.getOptions(),a=O.FLoadingService.show();return this.designerHostService.metadataService.getPickMetadata(e.relativePath,n).then(p=>{a.value.close();const f=JSON.parse(p==null?void 0:p.metadata.content).Contents,{templateId:c,name:v,id:s}=f.module;if(s===e.id)return this.designerHostService.messagerService.warning("不支持引入当前表单"),!1;if(this.designerHostService.formSchemaUtils.checkIfComposedForm(f)){const S=`表单【${v}】嵌套了外部表单,系统仅支持组合表单一层嵌套,不支持多层级引入。`;return this.designerHostService.messagerService.warning(S),!1}if((t==null?void 0:t.combineFormMode)==="custom"||["list-component","tree-component","list-view-component"].includes(c))return!0;const C=`表单【${v}】不属于组件类模板,在严格模式下无法被导入到当前表单。<br/><br/>请前往当前表单的配置页面将【表单组合模式】切换为自定义模式后,再引入表单【${v}】。`;return this.designerHostService.messagerService.warning(C),!1},p=>{var l;return a.value.close(),this.designerHostService.messagerService.error(((l=p==null?void 0:p.response)==null?void 0:l.data.Message)||`查询表单【${n.name}】失败`),!1})}getEventPropConfig(n){const e=[{label:"onCommunication",name:"通讯事件"}],t=this,a=t.eventsEditorUtils.formProperties(n,t.viewModelId,e);return{title:"事件",hideTitle:!0,properties:t.createBaseEventProperty(a),refreshPanelAfterChanged:!0,tabId:N.EVENT_PROPERTY_TAB_IDS,tabName:"交互",setPropertyRelates(l,f){const c=l.propertyValue;delete n[t.viewModelId],c&&(c.setPropertyRelates=this.setPropertyRelates,t.eventsEditorUtils.saveRelatedParameters(n,t.viewModelId,c.events,c))}}}syncCommunicationAfterFormChanged(n,e){if(!e.onCommunication)return;const t=e.onCommunication.replace(/communication:/g,"").split(";");if(!(t!=null&&t.length))return;const a=this.designerHostService.formSchemaUtils.getFormSchema(),p=a.module.communications||[];let l=!1;if(t.map(f=>{const c=p.find(v=>v.id===f);c!=null&&c.source&&c.source.formId!==e.externalComponent.id&&(c.needDelete=!0,l=!0)}),a.module.communications=a.module.communications.filter(f=>!f.needDelete),l){e.onCommunication="";const f=new q.FNotifyService;f.globalConfig={position:"top-center"},f.warning({message:"切换引入表单后,请重新配置组件通讯。"})}}}function K(i,n){const e=i.schema;function t(){return!1}function a(){return!0}function p(){return!0}function l(){return!0}function f(){return"position:relative;padding:0 !important;border:0;overflow:hidden;"}function c(s){return new H(s,n).getPropertyConfig(e,i.componentInstance.value)}function v(){n!=null&&n.formSchemaUtils&&(n.formSchemaUtils.externalFormSchema.delete(i.schema.id),n==null||n.formSchemaUtils.recordIsComposedForm())}return{canAccepts:t,checkCanDeleteComponent:a,checkCanMoveComponent:p,hideNestedPaddingInDesginerView:l,getStyles:f,getPropsConfig:c,onRemoveComponent:v}}const W=o.defineComponent({name:"FImportExteranlSchema",emits:["close","submit"],setup(i,n){const e=o.inject("designer-host-service");let t;const a=o.ref(),p=new q.FNotifyService;p.globalConfig={position:"top-center"};const l=o.inject("FLoadingService"),f=e.formSchemaUtils.getFormMetadataBasicInfo(),c=o.ref();async function v(d){var h;const{getFormMetadataBasicInfo:y,checkIfComposedForm:R,getOptions:B}=e.formSchemaUtils,r=y(),u=o.ref(((h=B())==null?void 0:h.combineFormMode)==="custom"),x=l.show();return e.metadataService.getPickMetadata(r.relativePath,d).then(g=>{var D;(D=x.value)==null||D.close();const P=JSON.parse(g==null?void 0:g.metadata.content).Contents,{templateId:G,name:U,id:Q}=P.module;if(Q===r.id)return e.messagerService.warning("不支持引入当前表单"),!1;if(R(P)){const Z=`表单【${U}】嵌套了外部表单,系统仅支持组合表单一层嵌套,不支持多层级引入。`;return e.messagerService.warning(Z),!1}if(u.value||["list-component","tree-component","list-view-component"].includes(G))return!0;const X=`表单【${U}】不属于组件类模板,在严格模式下无法被导入到当前表单。<br/><br/>请前往当前表单的配置页面将【表单组合模式】切换为自定义模式后,再引入表单【${U}】。`;return e.messagerService.warning(X),!1},g=>{var F,P;return e.messagerService.error(((F=g==null?void 0:g.response)==null?void 0:F.data.Message)||`查询表单【${d.name}】失败`),(P=x.value)==null||P.close(),!1})}async function s(){if(!a.value){p.warning("请选择表单");return}if(await v(a.value))return!0}function C(){const d={id:a.value.id,nameSpace:a.value.nameSpace,code:a.value.code,name:a.value.name,fileName:a.value.fileName,bizobjectID:a.value.bizobjectID,relativePath:a.value.relativePath,projectName:a.value.projectName};n.emit("submit",d),t!=null&&t.close&&t.close()}function S(){t!=null&&t.close&&(t==null||t.close()),n.emit("close")}function M(d){a.value=d!=null&&d.length?d[0]:null}function T(){const d={formBasicInfo:f},y=e.formSchemaUtils.designerMode==="PC_RTC"?[{id:"total",title:"全部",type:"Card",dataSource:"Total",pagination:!0}]:[{id:"recommend",title:"推荐",type:"Card",dataSource:"Recommand",pagination:!0},{id:"total",title:"全部",type:"Card",dataSource:"Total",pagination:!0}];return()=>o.createVNode(A.FSchemaSelector,{ref:c,injectSymbolToken:N.FormSchemaRepositorySymbol,"view-type":"Tabs","view-options":y,editorParams:d,designerHostService:e,"show-footer":!0,onSelectionChange:M,"validate-function":s,onSubmit:C,onCancel:S},{default:()=>[o.createTextVNode(" ")]})}function E(d){d.stopPropagation(),a.value="",t=e.modalService.open({title:"选择表单",width:950,height:600,fitContent:!1,showButtons:!1,render:T(),enableEsc:!1,draggable:!0})}return()=>o.createVNode("div",{class:"f-import-exteranl-component-button no-drag"},[o.createVNode("div",{class:"f-import-exteranl-component-button-center",onClick:E},[o.createVNode("div",{class:"f-icon f-icon-add mr-2"},null),o.createVNode("span",null,[o.createTextVNode("引入已有表单")])])])}}),$=o.defineComponent({name:"FExternalContainerDesign",props:j,emits:[],setup(i,n){const e=o.ref(),t=o.inject("designer-host-service"),a=o.inject("design-item-context"),p=K(a,t),l=I.useDesignerComponent(e,a,p),f=o.inject("FMessageBoxService"),c=o.inject("FLoadingService"),v=t.formSchemaUtils,s=o.ref(i.externalComponent),C=o.ref(),S=o.computed(()=>{var r,u;return(u=(r=C.value)==null?void 0:r.module)==null?void 0:u.components[0]}),M=o.computed(()=>!C.value);o.provide("external-container-id",l.value.schema.id);function T(r){const u={id:s.value.id,code:s.value.code,name:r,fileName:s.value.fileName,nameSpace:s.value.nameSpace,content:C.value};v.externalFormSchema.set(l.value.schema.id,u),v.recordIsComposedForm()}function E(r){var u;((u=s.value)==null?void 0:u.name)!==r&&(l.value.schema.externalComponent.name=r)}async function d(){var u;const r=t.formSchemaUtils.getFormMetadataBasicInfo();if((u=s.value)!=null&&u.id){const x=c==null?void 0:c.show({message:"数据加载中,请稍候..."});return t.metadataService.getPickMetadata(r.relativePath,s.value).then(h=>{var g;if((g=h==null?void 0:h.metadata)!=null&&g.content){const F=JSON.parse(h.metadata.content);C.value=F.Contents,T(h.metadata.name),E(h.metadata.name)}else f.error(`找不到元数据【${s.value.name}】(${s.value.id})。`);x.value.close()},h=>{var g;f.error(((g=h==null?void 0:h.response)==null?void 0:g.data.Message)||`查询表单【${s.value.name}】失败`),x.value.close()})}}o.watch(()=>i.externalComponent,async r=>{var u;!s.value||!r||JSON.stringify(s.value)!==JSON.stringify(r)?(s.value=r,await d(),(u=a==null?void 0:a.setupContext)==null||u.emit("dragEnd")):s.value=r},{deep:!0}),o.onMounted(()=>{e.value.componentInstance=l,C.value||d()}),n.expose(l.value);function y(){return o.createVNode(o.Fragment,null,[o.createVNode(I.FDesignerItem,{modelValue:S.value,"onUpdate:modelValue":r=>S.value=r,"external-form-schema":C.value},null)])}async function R(r){var u;l.value.schema.externalComponent=r,s.value=r,await d(),(u=a==null?void 0:a.setupContext)==null||u.emit("dragEnd")}function B(){return o.createVNode(W,{onSubmit:R},null)}return()=>o.createVNode("div",{ref:e,style:"height: inherit;"},[M.value?B():y()])}}),Y={install(i){i.component(b.name,b)},register(i,n,e,t){i["external-container"]=b,n["external-container"]=w},registerDesigner(i,n,e){i["external-container"]=$,n["external-container"]=w}};m.FExternalContainer=b,m.FExternalContainerDesign=$,m.default=Y,m.externalContainerProps=j,m.propsResolver=w,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});