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

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

"use strict";const o=require("vue");;/* empty css              */;/* empty css                          */;/* empty css                               */const _=require("../../../../manager/src/pluginManager.cjs"),K=require("./dynamicFormItem.vue.cjs");;/* empty css                        */require("vue-draggable-plus");const m=require("../../../../utils/src/common/data.cjs"),Y=require("../../../../utils/src/common/string.cjs");require("../../../../git/epic/epic-designer/node_modules/.pnpm/jsep@1.4.0/node_modules/jsep/dist/jsep.cjs");require("@vueuse/core");require("../../../../hooks/src/store/index.cjs");const G=require("../../../../hooks/src/designer/useBuiderDisabled.cjs"),Q=require("../../../../hooks/src/designer/useBuiderReadonly.cjs"),X=require("../../../../hooks/src/designer/useBuilderContext.cjs"),Z=require("../../../../hooks/src/designer/useFieldPathPrefix.cjs"),ee=require("../../../../hooks/src/designer/useNodeAttrs.cjs"),te=require("../../../../hooks/src/designer/usePageManager.cjs"),oe=require("../../../../hooks/src/logic/useFormItem.cjs"),ne=o.defineComponent({name:"EpNode",__name:"node",props:{componentSchema:{},isProperty:{type:Boolean,default:!1},modelValue:{default:void 0},ruleField:{default:()=>[]},showHiddenItems:{type:Boolean,default:!1}},emits:["update:modelValue","change"],setup(N,{emit:T}){const d=N,D=T,j=o.getCurrentInstance(),{formData:p}=oe.useFormItem(),{fieldStateMap:O,slots:U}=X.useBuilderContext(),$=G.injectBuilderDisabled(),H=Q.injectBuilderReadonly(),i=te.usePageManager(),C=Z.useFieldPathPrefix(),P=o.computed(()=>C?C.join("."):"default"),e=o.reactive(m.deepClone(d.componentSchema,!d.isProperty)),E=o.computed({get:w,set:B});R(),o.watch(()=>d.componentSchema,t=>{m.deepEqual(e,t,["children"])||(m.deepCompareAndModify(e,m.deepClone(t,!1)),R())},{deep:!0});function w(){return d.modelValue??m.getValueByPath(p,e.field??"")}function R(){i.isDesignMode.value&&typeof e.field=="string"&&(e.field+="-design-mode")}const I=o.useAttrs();Object.keys(I).length>0&&o.provide(ee.NODE_ATTRS_KEY,I);const v=o.shallowRef(null),F=o.ref(null),c=o.ref(null),h=o.ref(null);o.watchEffect(()=>{var f;const t=e==null?void 0:e.field,n=t&&((f=O.value)==null?void 0:f[t]);if(!n){c.value=null,h.value=null;return}const{condition:r,required:l,state:u}=n;typeof r=="function"?(c.value=r(p)?u:null,h.value=r(p)?l:null):(c.value=u,h.value=l)});const M=o.computed(()=>{var t,n;return d.showHiddenItems&&i.isDesignMode.value||c.value==="WRITE"?!0:(t=e.props)!=null&&t.hidden||c.value==="HIDE"?!1:typeof e.show=="boolean"?e.show:((n=e.show)==null?void 0:n.call(e,{values:p}))??!0}),W=o.computed(()=>{var g,y,s;let t=M.value&&((g=e.rules)==null?void 0:g.map(a=>{var S;const q={...a};return q.required!==void 0&&(q.required=h.value??((S=e.props)==null?void 0:S.required)??q.required),a.validator&&(q.validator=i.funcs.value[a.validator]),q}));const n=h.value===!0||((y=e.props)==null?void 0:y.required),r=Array.isArray(t)&&t.some(a=>a.required!==void 0);if(n&&!r){const a={message:"必填项",required:!0,trigger:["change","blur"],type:"string"};t?t.push(a):t=[a]}let l=e.field;d.ruleField&&d.ruleField.length>0?l=d.ruleField:C&&e.field&&(l=m.deepClone(C),l.push(e.field));const u=((s=e.props)==null?void 0:s.style)??{},f={...e,...I,field:l,rule:t,rules:t,style:{...u,width:void 0}};return f.children&&delete f.children,f}),x=o.computed(()=>_.pluginManager.component.getComponentConfigByType(e.type)??null),b=o.computed(()=>{var t;return e.noFormItem!==!0&&((t=x.value)==null?void 0:t.defaultSchema.input)}),V=o.computed(()=>{var u,f,g,y;const t=((u=x.value)==null?void 0:u.bindModel)??"modelValue",n={};i.isDesignMode.value||e.on&&Object.keys(e.on).forEach(s=>{n[`on${Y.capitalizeFirstLetter(s)}`]=(...a)=>i.doActions(e.on[s],P.value,...a)});const r=((f=e.props)==null?void 0:f.style)??{},l=b.value?Object.fromEntries(["height","width"].filter(s=>r[s]!==void 0&&r[s]!==null).map(s=>[s,r[s]])):r;return{...d,...I,...e.props,bindModel:t,disabled:c.value!=="WRITE"&&(c.value==="DISABLED"||$.value||((g=e.props)==null?void 0:g.disabled)),hidden:!M.value,readonly:c.value!=="WRITE"&&(c.value==="READ"||H.value||((y=e.props)==null?void 0:y.readonly)),style:l,...n}});function z(t){F.value=t}function k(t){M.value&&(t?i.mountMonitor.pop:i.mountMonitor.push)(e.id);const n=(t==null?void 0:t.component)??j;!e.id||!n||(n.exposed??(n.exposed={}),e.input&&(n.exposed.setValue=B,n.exposed.getValue=w),n.exposed.schema=e,n.exposed.setAttr=(r,l)=>(e.props??(e.props={}),e.props[r]=l),n.exposed.getAttr=r=>{var l;return(l=e.props)==null?void 0:l[r]},i.addComponentInstance(e.id,n,P.value))}function L(){var t;e.id&&(i.removeComponentInstance(e.id,P.value),(t=x.value)!=null&&t.defaultSchema.input&&e.noFormItem!==!0&&i.removeComponentInstance(`${e.id}_formItem`))}async function J(){var n,r,l;if(((n=e.props)==null?void 0:n.defaultValue)!==void 0){const u=i.isDesignMode.value?(r=e.props)==null?void 0:r.defaultValue:p[e.field]??((l=e.props)==null?void 0:l.defaultValue);B(m.deepClone(u),!0)}if(await _.pluginManager.hook.execute("nodeRender",e),e.type==="slot"){const u=e.slotName;if(!u)return;v.value=o.defineComponent({setup(){return()=>o.renderSlot(U,u,{componentSchema:e,model:p})}});return}const t=_.pluginManager.component.get(e.type);if(!t){console.error(`组件${e.type}未注册`),i.mountMonitor.pop(e.id);return}if(typeof t=="function"){const u=await t();v.value=u.default??u}else v.value=t}function B(t,n){const r=w();t!==r&&(e.field&&(m.setValueByPath(p,e.field,t),n||i.hook.execute("formChange",{field:e.field,formData:p,value:t})),D("update:modelValue",t),D("change",t))}let A=null;return o.watch(()=>e,t=>{const n=JSON.stringify({...t,children:void 0});if(n===A)return!1;A=n,J()},{deep:!0,immediate:!0}),k(),o.onBeforeUnmount(L),(t,n)=>{const r=o.resolveComponent("EpNode");return v.value&&M.value?(o.openBlock(),o.createBlock(K,{key:0,"check-payload":F.value,"has-form-item":b.value,"form-item-props":W.value},{default:o.withCtx(()=>{var l;return[(o.openBlock(),o.createBlock(o.resolveDynamicComponent(v.value),o.mergeProps(V.value,{[V.value.bindModel]:E.value,["onUpdate:"+V.value.bindModel]:n[0]||(n[0]=u=>E.value=u),model:o.unref(p),onCheck:z,class:{"ep-hidden":(l=e.props)==null?void 0:l.hidden,"ep-readonly":V.value.readonly},onVnodeMounted:k}),{node:o.withCtx(u=>[o.createVNode(r,o.normalizeProps(o.guardReactiveProps(u)),null,16)]),"edit-node":o.withCtx(()=>[o.renderSlot(t.$slots,"edit-node")]),_:3},16,["model","class"]))]}),_:3},8,["check-payload","has-form-item","form-item-props"])):o.createCommentVNode("",!0)}}});module.exports=ne;