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