@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 11.8 kB
JavaScript
(function(d,a){typeof exports=="object"&&typeof module<"u"?a(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"],a):(d=typeof globalThis<"u"?globalThis:d||self,a(d["external-container"]={},d.Vue,d.dynamicResolver,d.designerCanvas,d.common,d.propertyPanel,d.loading,d.notify,d.schemaSelector))})(this,function(d,a,E,b,B,k,D,q,V){"use strict";const $=new Map([["appearance",E.resolveAppearance]]);function A(i,n,e,t){const o=e.parentComponentInstance;return o&&t&&(o.schema.type===b.DgControl["list-nav"].type?n.appearance={class:"position-relative h-100"}:n.appearance={class:"position-relative",style:"height:300px;flex-shrink: 0;"}),n}const O={$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:"通讯事件"}},F={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=E.createPropsResolver(F,O,$,A),P=a.defineComponent({name:"FExternalContainer",props:F,emits:[],setup(i,n){return()=>a.createVNode("div",{class:i.customClass,style:i.customStyle},[n.slots.default&&n.slots.default()])}}),J={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 z extends k.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:B.FormSchemaRepositorySymbol,validateFunction:t=>{if(t.id)return e.checkFormValidtion(t)}},$converter:J}},setPropertyRelates(t){(t==null?void 0:t.propertyID)==="externalComponent"&&e.syncCommunicationAfterFormChanged(t,n)}}}checkFormValidtion(n){const e=this.designerHostService.formSchemaUtils.getFormMetadataBasicInfo(),t=D.FLoadingService.show();return this.designerHostService.metadataService.getPickMetadata(e.relativePath,n).then(o=>{t.value.close();const u=JSON.parse(o==null?void 0:o.metadata.content).Contents,{templateId:p,name:l}=u.module;if(["list-component","tree-component","list-view-component"].includes(p))return!0;const v=`表单【${l}】不属于组件类模板,无法被引入到当前表单。`;return this.designerHostService.messagerService.warning(v),!1},o=>{var f;return t.value.close(),this.designerHostService.messagerService.error(((f=o==null?void 0:o.response)==null?void 0:f.data.Message)||`查询表单【${n.name}】失败`),!1})}getEventPropConfig(n){const e=[{label:"onCommunication",name:"通讯事件"}],t=this,o=t.eventsEditorUtils.formProperties(n,t.viewModelId,e);return{title:"事件",hideTitle:!0,properties:t.createBaseEventProperty(o),refreshPanelAfterChanged:!0,tabId:"commands",tabName:"交互",setPropertyRelates(u,p){const l=u.propertyValue;delete n[t.viewModelId],l&&(l.setPropertyRelates=this.setPropertyRelates,t.eventsEditorUtils.saveRelatedParameters(n,t.viewModelId,l.events,l))}}}syncCommunicationAfterFormChanged(n,e){if(!e.onCommunication)return;const t=e.onCommunication.replace(/communication:/g,"").split(";");if(!(t!=null&&t.length))return;const o=this.designerHostService.formSchemaUtils.getFormSchema(),f=o.module.communications||[];let u=!1;if(t.map(p=>{const l=f.find(v=>v.id===p);l!=null&&l.source&&l.source.formId!==e.externalComponent.id&&(l.needDelete=!0,u=!0)}),o.module.communications=o.module.communications.filter(p=>!p.needDelete),u){e.onCommunication="";const p=new q.FNotifyService;p.globalConfig={position:"top-center"},p.warning({message:"切换引入表单后,请重新配置组件通讯。"})}}}function _(i,n){const e=i.schema;function t(){return!1}function o(){return!0}function f(){return!0}function u(){return!0}function p(){return"position:relative;padding:0 !important;border:0;overflow:hidden;"}function l(m){return new z(m,n).getPropertyConfig(e,i.componentInstance.value)}function v(){n!=null&&n.formSchemaUtils&&n.formSchemaUtils.externalFormSchema.delete(i.schema.id)}return{canAccepts:t,checkCanDeleteComponent:o,checkCanMoveComponent:f,hideNestedPaddingInDesginerView:u,getStyles:p,getPropsConfig:l,onRemoveComponent:v}}const H=a.defineComponent({name:"FImportExteranlSchema",emits:["close","submit"],setup(i,n){const e=a.inject("designer-host-service");let t;const o=a.ref(),f=new q.FNotifyService;f.globalConfig={position:"top-center"};const u=a.inject("FLoadingService"),p=e.formSchemaUtils.getFormMetadataBasicInfo(),l=a.ref();async function v(s){const g=e.formSchemaUtils.getFormMetadataBasicInfo(),y=u.show();return e.metadataService.getPickMetadata(g.relativePath,s).then(S=>{var I;(I=y.value)==null||I.close();const c=JSON.parse(S==null?void 0:S.metadata.content).Contents,{templateId:N,name:h}=c.module;if(["list-component","tree-component","list-view-component"].includes(N))return!0;const x=`表单【${h}】不属于组件类模板,无法被引入到当前表单。`;return e.messagerService.warning(x),!1},S=>{var r,c;return e.messagerService.error(((r=S==null?void 0:S.response)==null?void 0:r.data.Message)||`查询表单【${s.name}】失败`),(c=y.value)==null||c.close(),!1})}async function m(){if(!o.value){f.warning("请选择表单");return}if(await v(o.value))return!0}function C(){var g,y;const s={id:o.value.id,nameSpace:o.value.nameSpace,code:o.value.code,name:o.value.name,fileName:o.value.fileName,bizobjectID:o.value.bizobjectID,relativePath:o.value.relativePath,projectName:o.value.projectName};n.emit("submit",s),(g=t==null?void 0:t.modalRef)!=null&&g.value.close&&((y=t==null?void 0:t.modalRef)==null||y.value.close())}function j(){var s,g;(s=t==null?void 0:t.modalRef)!=null&&s.value.close&&((g=t==null?void 0:t.modalRef)==null||g.value.close()),n.emit("close")}function M(s){o.value=s!=null&&s.length?s[0]:null}function T(){const s={formBasicInfo:p},g=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()=>a.createVNode(V.FSchemaSelector,{ref:l,injectSymbolToken:B.FormSchemaRepositorySymbol,"view-type":"Tabs","view-options":g,editorParams:s,designerHostService:e,"show-footer":!0,onSelectionChange:M,"validate-function":m,onSubmit:C,onCancel:j},{default:()=>[a.createTextVNode(" ")]})}function R(s){s.stopPropagation(),o.value="",t=e.modalService.open({title:"选择表单",width:950,height:600,fitContent:!1,showButtons:!1,render:T(),enableEsc:!1,draggable:!0})}return()=>a.createVNode("div",{class:"f-import-exteranl-component-button no-drag"},[a.createVNode("div",{class:"f-import-exteranl-component-button-center",onClick:R},[a.createVNode("div",{class:"f-icon f-icon-add mr-2"},null),a.createVNode("span",null,[a.createTextVNode("引入已有表单")])])])}}),U=a.defineComponent({name:"FExternalContainerDesign",props:F,emits:[],setup(i,n){const e=a.ref(),t=a.inject("designer-host-service"),o=a.inject("design-item-context"),f=_(o,t),u=b.useDesignerComponent(e,o,f),p=a.inject("FMessageBoxService"),l=a.inject("FLoadingService"),v=t.formSchemaUtils,m=a.ref(i.externalComponent),C=a.ref(),j=a.computed(()=>{var r,c;return(c=(r=C.value)==null?void 0:r.module)==null?void 0:c.components[0]}),M=a.computed(()=>!C.value);a.provide("external-container-id",u.value.schema.id);function T(r){const c={id:m.value.id,code:m.value.code,name:r,fileName:m.value.fileName,nameSpace:m.value.nameSpace,content:C.value};v.externalFormSchema.set(u.value.schema.id,c)}function R(r){var c;((c=m.value)==null?void 0:c.name)!==r&&(u.value.schema.externalComponent.name=r)}async function s(){var c;const r=t.formSchemaUtils.getFormMetadataBasicInfo();if((c=m.value)!=null&&c.id){const N=l==null?void 0:l.show({message:"数据加载中,请稍候..."});return t.metadataService.getPickMetadata(r.relativePath,m.value).then(h=>{var x;if((x=h==null?void 0:h.metadata)!=null&&x.content){const I=JSON.parse(h.metadata.content);C.value=I.Contents,T(h.metadata.name),R(h.metadata.name)}else p.error(`找不到元数据【${m.value.name}】(${m.value.id})。`);N.value.close()},h=>{var x;p.error(((x=h==null?void 0:h.response)==null?void 0:x.data.Message)||`查询表单【${m.value.name}】失败`),N.value.close()})}}a.watch(()=>i.externalComponent,async r=>{var c;!m.value||!r||JSON.stringify(m.value)!==JSON.stringify(r)?(m.value=r,await s(),(c=o==null?void 0:o.setupContext)==null||c.emit("dragEnd")):m.value=r},{deep:!0}),a.onMounted(()=>{e.value.componentInstance=u,C.value||s()}),n.expose(u.value);function g(){return a.createVNode(a.Fragment,null,[a.createVNode(b.FDesignerItem,{modelValue:j.value,"onUpdate:modelValue":r=>j.value=r,"external-form-schema":C.value},null)])}async function y(r){var c;u.value.schema.externalComponent=r,m.value=r,await s(),(c=o==null?void 0:o.setupContext)==null||c.emit("dragEnd")}function S(){return a.createVNode(H,{onSubmit:y},null)}return()=>a.createVNode("div",{ref:e,style:"height: inherit;"},[M.value?S():g()])}}),L={install(i){i.component(P.name,P)},register(i,n,e,t){i["external-container"]=P,n["external-container"]=w},registerDesigner(i,n,e){i["external-container"]=U,n["external-container"]=w}};d.FExternalContainer=P,d.FExternalContainerDesign=U,d.default=L,d.externalContainerProps=F,d.propsResolver=w,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});