epic-designer-gold/dist/form-D2qj0Dvr.cjs

基于vue3的设计器,可视化开发页面表单

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),D=require("ant-design-vue"),_={class:"form-main",style:{height:"100%"}},x=t.defineComponent({__name:"form",props:{componentSchema:{type:Object,require:!0,default:()=>({})}},setup(f,{expose:h}){var i,p;const r=f,v=t.inject("pageManager",{}),n=t.ref(null),c=t.inject("forms",{}),l=t.reactive({});v.addFormData(l,(p=(i=r.componentSchema)==null?void 0:i.componentProps)==null?void 0:p.name),t.provide("formData",l);function s(){return l}function m(){var e;return(e=n.value)==null?void 0:e.validateFields()}function u(e){Object.assign(l,e)}t.onMounted(async()=>{var e,a,o,d;if(((e=r.componentSchema)==null?void 0:e.type)==="form"&&c.value&&n.value){const S=((o=(a=r.componentSchema)==null?void 0:a.componentProps)==null?void 0:o.name)??((d=r.componentSchema)==null?void 0:d.name)??"default";return n.value.validate=m,c.value[S]=n.value,n.value.getData=s,n.value.setData=u,!1}});const g=t.computed(()=>{const e=r.componentSchema.componentProps;let a=e.labelCol,o=e.wrapperCol;return e.layout==="vertical"?a=o={span:24}:e.layout==="inline"&&e.labelLayout==="fixed"?(a={},o={flex:1}):e.labelLayout==="fixed"&&(a={flex:`${typeof e.labelWidth=="number"?e.labelWidth+"px":e.labelWidth}`},o={flex:1}),{...e,labelCol:a,wrapperCol:o}});function y(e){console.log(e)}const b=t.computed(()=>r.componentSchema.children??[]);return h({form:n,getData:s,setData:u,validate:m}),(e,a)=>(t.openBlock(),t.createElementBlock("div",_,[t.createVNode(t.unref(D.Form),t.mergeProps({ref_key:"form",ref:n,model:l},g.value,{style:{height:"100%"},onFinish:y}),{default:t.withCtx(()=>[t.renderSlot(e.$slots,"edit-node",{},()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(b.value,o=>t.renderSlot(e.$slots,"node",{componentSchema:o})),256))])]),_:3},16,["model"])]))}});exports.default=x;