gepic
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 1.94 kB
JavaScript
;const o=require("vue"),x=require("ant-design-vue"),D={class:"form-main",style:{height:"100%"}},F=o.defineComponent({__name:"form",props:{componentSchema:{type:Object,require:!0,default:()=>({})}},setup(f,{expose:h}){var u,p;const a=f,v=o.inject("pageManager",{}),r=o.ref(null),c=o.inject("forms",{}),l=o.reactive({});v.addFormData(l,(p=(u=a.componentSchema)==null?void 0:u.componentProps)==null?void 0:p.name),o.provide("formData",l);function s(){return l}async function i(){var e,n;try{return await((e=r.value)==null?void 0:e.validateFields())}catch(t){throw a.scrollToFirstError&&((n=r.value)==null||n.scrollToField(t.errorFields[0].name.toString())),t}}function m(e){Object.assign(l,e)}o.onMounted(async()=>{var e,n,t,d;if(((e=a.componentSchema)==null?void 0:e.type)==="form"&&c.value&&r.value){const b=((t=(n=a.componentSchema)==null?void 0:n.componentProps)==null?void 0:t.name)??((d=a.componentSchema)==null?void 0:d.name)??"default";return r.value.validate=i,c.value[b]=r.value,r.value.getData=s,r.value.setData=m,!1}});const g=o.computed(()=>{const e=a.componentSchema.componentProps;let n=e.labelCol,t=e.wrapperCol;return e.layout==="vertical"?n=t={span:24}:e.layout==="inline"&&e.labelLayout==="fixed"?(n={},t={flex:1}):e.labelLayout==="fixed"&&(n={flex:`${typeof e.labelWidth=="number"?e.labelWidth+"px":e.labelWidth}`},t={flex:1}),{...e,labelCol:n,wrapperCol:t}});function y(e){console.log(e)}const S=o.computed(()=>a.componentSchema.children??[]);return h({form:r,getData:s,setData:m,validate:i}),(e,n)=>(o.openBlock(),o.createElementBlock("div",D,[o.createVNode(o.unref(x.Form),o.mergeProps({ref_key:"form",ref:r,model:l},g.value,{style:{height:"100%"},onFinish:y}),{default:o.withCtx(()=>[o.renderSlot(e.$slots,"edit-node",{},()=>[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(S.value,t=>o.renderSlot(e.$slots,"node",{componentSchema:t})),256))])]),_:3},16,["model"])]))}});module.exports=F;