gepic
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 4.43 kB
JavaScript
;const t=require("vue"),_=require("../../../../utils/manager/pluginManager.cjs");require("@vueuse/core");require("../../../../hooks/store/index.cjs");const c=require("../../../../utils/common/data.cjs"),B=require("../../../../utils/common/string.cjs"),U=require("./dynamicFormItem.vue.cjs"),R=t.defineComponent({name:"ENode",__name:"node",props:{componentSchema:{},modelValue:{},ruleField:{},resetFormData:{type:Boolean},name:{}},emits:["update:modelValue","change"],setup(D,{emit:b}){const{proxy:j}=t.getCurrentInstance(),u=D,s=t.ref(null);let i=t.inject("formData",t.reactive({}));const S=t.inject("slots",{}),d=t.inject("pageManager",{}),g=t.inject("disabled",{value:!1}),y=t.inject("ruleFieldPrefix",null),k=t.inject("resetFormData",!1);let e=t.reactive(c.deepClone(u.componentSchema));I(),t.watch(()=>u.componentSchema,n=>{c.deepEqual(e,n,["children"])||(c.deepCompareAndModify(e,c.deepClone(n)),I())},{deep:!0});function I(){d.isDesignMode.value&&typeof e.field=="string"&&(e.field+="-design-mode")}(u.resetFormData||k)&&(i={});const P=b,h=t.ref(),C=t.ref(),q=n=>{C.value=n},V=t.useAttrs();Object.keys(V).length&&t.provide("nodeAttrs",V);const m=t.shallowRef(null),F=t.computed(()=>{var n,o;return(n=e.componentProps)!=null&&n.hidden?!1:typeof e.show=="boolean"?e.show:((o=e.show)==null?void 0:o.call(e,{values:i}))??!0}),x=t.computed(()=>{var l;const n=F.value&&((l=e.rules)==null?void 0:l.map(r=>({...r,validator:r.validator&&d.funcs.value[r.validator]})));let o=e.field;u.ruleField?o=u.ruleField:y&&e.field&&(o=c.deepClone(y),o.push(e.field));const a={...e,rules:n,rule:n,field:o};return a.children&&delete a.children,a}),p=t.computed(()=>{var a,l;const n=((a=f.value)==null?void 0:a.bindModel)??"modelValue",o={};return e.on&&Object.keys(e.on).forEach(r=>{o[`on${B.capitalizeFirstLetter(r)}`]=(...E)=>d.doActions(e.on[r],...E)}),{...u,...e.componentProps,disabled:(g==null?void 0:g.value)||((l=e.componentProps)==null?void 0:l.disabled),bindModel:n,...o}}),f=t.computed(()=>_.pluginManager.getComponentConfingByType(e.type)??null);t.watchEffect(()=>{s.value=u.modelValue??i[e.field??""]}),t.watch(()=>s.value,()=>{s.value!==(u.modelValue??i[e.field??""])&&v(s.value)}),t.watch(()=>h.value,()=>{w()},{immediate:!0});function w(){var o;const n=h.value||j;e.id&&n&&(e.input&&(n.setValue=v,n.getValue=()=>i[e.field]||u.modelValue),n.setAttr=(a,l)=>(e.componentProps||(e.componentProps={}),e.componentProps[a]=l),n.getAttr=a=>e.componentProps[a],d.addComponentInstance(e.id,n),(o=f.value)!=null&&o.defaultSchema.input&&e.noFormItem!==!0&&C.value&&d.addComponentInstance(e.id+"formItem",C.value))}function N(){var n;e.id&&(d.removeComponentInstance(e.id),(n=f.value)!=null&&n.defaultSchema.input&&e.noFormItem!==!0&&d.removeComponentInstance(e.id+"formItem"))}async function A(){var o,a,l;if(typeof((o=e.componentProps)==null?void 0:o.defaultValue)<"u"){const r=d.isDesignMode.value?(a=e.componentProps)==null?void 0:a.defaultValue:i[e.field]??((l=e.componentProps)==null?void 0:l.defaultValue);v(c.deepClone(r))}if(e.type==="slot"){const r=e.slotName;if(!r)return;m.value=t.defineComponent({setup(){return()=>t.renderSlot(S,r,{componentSchema:e,model:i})}});return}const n=_.pluginManager.getComponent(e.type);if(!n){console.error(`组件${e.type}未注册`);return}if(typeof n=="function"){const r=await n();m.value=r.default??r}else m.value=n}function v(n){P("update:modelValue",n),P("change",n),e.field&&(i[e.field]=n)}let M=null;return t.watch(()=>e,n=>{const o=JSON.stringify({...n,children:void 0});if(o===M)return!1;M=o,A()},{immediate:!0,deep:!0}),t.onUnmounted(N),(n,o)=>{var l;const a=t.resolveComponent("ENode");return m.value&&F.value?(t.openBlock(),t.createBlock(U,{key:0,"has-form-item":t.unref(e).noFormItem!==!0&&((l=f.value)==null?void 0:l.defaultSchema.input),"form-item-props":x.value,onUpdateFormItemRef:q},{default:t.withCtx(()=>[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(m.value),t.mergeProps({ref_key:"componentInstance",ref:h},{...p.value},{[p.value.bindModel]:s.value,["onUpdate:"+p.value.bindModel]:o[0]||(o[0]=r=>s.value=r),model:t.unref(i),[`onUpdate:${p.value.bindModel}`||""]:v,onVnodeMounted:w}),{node:t.withCtx(r=>[t.createVNode(a,t.normalizeProps(t.guardReactiveProps(r)),null,16)]),"edit-node":t.withCtx(()=>[t.renderSlot(n.$slots,"edit-node")]),_:3},16,["model"]))]),_:3},8,["has-form-item","form-item-props"])):t.createCommentVNode("",!0)}}});module.exports=R;