fx-epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 3.34 kB
JavaScript
;const e=require("vue");;/* empty css */const _=require("../../../../base-ui/src/icon/icon.vue2.cjs"),d=require("../../../../../utils/src/common/data.cjs");require("@vueuse/core");require("../../../../../hooks/src/store/index.cjs");const l=require("../../../../../utils/src/manager/pluginManager.cjs"),S=require("vuedraggable"),k={class:"epic-component-view flex flex-col"},w={class:"epic-search-box px-10px py-6px"},N={class:"box-border h-full flex-1 overflow-auto py-2"},q=["onClick"],E={class:"epic-componet-label w-0 flex-1 truncate"},U={class:"pt-42px text-center text-gray-400"},I=e.defineComponent({__name:"index",setup(j){const C=l.pluginManager.getComponent("input"),s=e.inject("pageSchema"),p=e.inject("designer"),f=e.inject("revoke");e.inject("designerProps"),l.pluginManager.getComponentSchemaGroups();const i=e.ref(""),y=e.inject("externalConfig",e.ref({tablist:[]})),a=e.computed(()=>y.value.tablist);function m(o){for(const t of o){if(t.type==="tabs")return t;if(t.children){const n=m(t.children);if(n)return n}}return null}function b(o){var n,u,g;if(o.isUse===1)return!1;const t=d.generateNewSchema(o);if(o.type==="tabs"){const r=d.findSchemaInfoById(s.schemas,((n=p.state.selectedNode)==null?void 0:n.id)??"root");if(!r)return!1;let{index:v,schema:c,list:x}=r;c.children&&!((g=(u=l.pluginManager.getComponentConfingByType(c.type))==null?void 0:u.editConstraints)!=null&&g.childImmovable)&&(x=c.children,v=c.children.length-1),x.splice(v+1,0,t),f.push("插入组件")}else{const r=m(s.schemas);if(!r)return alert("请先在画布中添加一个页签容器组件"),!1;r.children||(r.children=[]),r.children.push(t),f.push("添加页签")}p.setSelectedNode(t),o.isUse=1}function V(o){return o.isUse===1}function h(o,t){for(const n of o)if(n.sourceId===t||n.children&&h(n.children,t))return!0;return!1}return e.watch(()=>s.schemas,o=>{a.value.forEach(t=>{t.isUse=t.id&&h(o,t.id)?1:0})},{deep:!0,immediate:!0}),(o,t)=>(e.openBlock(),e.createElementBlock("div",k,[e.createElementVNode("div",w,[e.createVNode(e.unref(C),{modelValue:i.value,"onUpdate:modelValue":t[0]||(t[0]=n=>i.value=n),value:i.value,"onUpdate:value":t[1]||(t[1]=n=>i.value=n),placeholder:"搜索容器组件",clearable:"","allow-clear":""},{prefix:e.withCtx(()=>[e.createVNode(e.unref(_),{class:"text-$epic-text-helper",name:"icon--epic--search-rounded"})]),_:1},8,["modelValue","value"])]),e.createElementVNode("div",N,[e.createVNode(e.unref(S),e.mergeProps({modelValue:a.value,"onUpdate:modelValue":t[2]||(t[2]=n=>a.value=n)},{group:{name:"edit-draggable",pull:"clone",put:!1},sort:!1,animation:180,ghostClass:"moving",filter:".epic-componet-item--clicked"},{clone:e.unref(d.generateNewSchema),"item-key":"id",class:"px-10px grid grid-cols-[auto_auto] gap-2"}),{item:e.withCtx(({element:n})=>[e.createElementVNode("div",{class:e.normalizeClass(["epic-componet-item flex items-center truncate",{"epic-componet-item--clicked":V(n)}]),onClick:u=>b(n)},[e.createVNode(e.unref(_),{name:e.unref(l.pluginManager).getComponentConfingByType(n.type).icon??""},null,8,["name"]),e.createElementVNode("div",E,e.toDisplayString(n.label),1)],10,q)]),_:1},16,["modelValue","clone"]),e.withDirectives(e.createElementVNode("div",U," 没有查询到的容器组件 ",512),[[e.vShow,a.value.length===0]])])]))}});module.exports=I;