epic-designer-dev/dist/ui-kit/base-ui/src/node/node.vue.cjs

基于vue3的设计器,可视化开发页面表单。在epic-designer的基础上新增了字典选择器

"use strict";const t=require("vue");;/* empty css              */const E=require("./dynamicFormItem.vue.cjs");require("vuedraggable");const s=require("../../../../utils/src/common/data.cjs"),S=require("../../../../utils/src/common/string.cjs");require("@vueuse/core");require("../../../../hooks/src/store/index.cjs");const x=require("../../../../utils/src/manager/pluginManager.cjs"),N=t.defineComponent({name:"EpicNode",__name:"node",props:{componentSchema:{},modelValue:{},name:{},resetFormData:{type:Boolean},ruleField:{}},emits:["update:modelValue","change"],setup(I,{emit:w}){const i=I,h=w,D=t.getCurrentInstance();let u=t.inject("formData",t.reactive({}));const q=t.inject("slots",{}),d=t.inject("pageManager",{}),p=t.inject("disabled",{value:!1}),C=t.inject("ruleFieldPrefix",null),B=t.inject("resetFormData",!1),e=t.reactive(s.deepClone(i.componentSchema)),y=t.computed({get(){return m()},set:v});V(),t.watch(()=>i.componentSchema,n=>{s.deepEqual(e,n,["children"])||(s.deepCompareAndModify(e,s.deepClone(n)),V())},{deep:!0});function m(){return i.modelValue??s.getValueByPath(u,e.field??"")}function V(){d.isDesignMode.value&&typeof e.field=="string"&&(e.field+="-design-mode")}(i.resetFormData||B)&&(u={});const P=t.useAttrs();Object.keys(P).length>0&&t.provide("nodeAttrs",P);const c=t.shallowRef(null),_=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:u}))??!0}),b=t.computed(()=>{var l;const n=_.value&&((l=e.rules)==null?void 0:l.map(r=>({...r,validator:r.validator&&d.funcs.value[r.validator]})));let o=e.field;i.ruleField?o=i.ruleField:C&&e.field&&(o=s.deepClone(C),o.push(e.field));const a={...e,field:o,rule:n,rules:n};return a.children&&delete a.children,a}),f=t.computed(()=>x.pluginManager.getComponentConfingByType(e.type)??null),g=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${S.capitalizeFirstLetter(r)}`]=(...A)=>d.doActions(e.on[r],...A)}),{...i,...e.componentProps,bindModel:n,disabled:(p==null?void 0:p.value)||((l=e.componentProps)==null?void 0:l.disabled),...o}});function F(n){const o=(n==null?void 0:n.component)??D;!e.id||!o||(o.exposed??(o.exposed={}),e.input&&(o.exposed.setValue=v,o.exposed.getValue=m),o.exposed.schema=e,o.exposed.setAttr=(a,l)=>(e.componentProps??(e.componentProps={}),e.componentProps[a]=l),o.exposed.getAttr=a=>{var l;return(l=e.componentProps)==null?void 0:l[a]},d.addComponentInstance(e.id,o))}function j(){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 k(){var o,a,l;if(((o=e.componentProps)==null?void 0:o.defaultValue)!==void 0){const r=d.isDesignMode.value?(a=e.componentProps)==null?void 0:a.defaultValue:u[e.field]??((l=e.componentProps)==null?void 0:l.defaultValue);v(s.deepClone(r))}if(e.type==="slot"){const r=e.slotName;if(!r)return;c.value=t.defineComponent({setup(){return()=>t.renderSlot(q,r,{componentSchema:e,model:u})}});return}const n=x.pluginManager.getComponent(e.type);if(!n){console.error(`组件${e.type}未注册`);return}if(typeof n=="function"){const r=await n();c.value=r.default??r}else c.value=n}function v(n){const o=m();n!==o&&(e.field&&s.setValueByPath(u,e.field,n),h("update:modelValue",n),h("change",n))}let M=null;return t.watch(()=>e,n=>{const o=JSON.stringify({...n,children:void 0});if(o===M)return!1;M=o,k()},{deep:!0,immediate:!0}),F(),t.onBeforeUnmount(j),(n,o)=>{var l;const a=t.resolveComponent("EpicNode");return c.value&&_.value?(t.openBlock(),t.createBlock(E,{key:0,"has-form-item":e.noFormItem!==!0&&((l=f.value)==null?void 0:l.defaultSchema.input),"form-item-props":b.value},{default:t.withCtx(()=>[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(c.value),t.mergeProps({...g.value},{[g.value.bindModel]:y.value,["onUpdate:"+g.value.bindModel]:o[0]||(o[0]=r=>y.value=r),model:t.unref(u),onVnodeMounted:F}),{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=N;