epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 3.19 kB
JavaScript
;const e=require("vue");;/* empty css */const v=require("../../../../base-ui/src/icon/icon.vue2.cjs"),b=require("../../../../base-ui/src/node/node.vue.cjs");require("@vueuse/core");require("../../../../../hooks/src/store/index.cjs");require("vuedraggable");const r=require("./data.cjs"),g={class:"rule-item-main m-t-2 hover:border-primary relative rounded border border-solid border-gray-200 bg-white p-2 transition-all"},f={key:0,class:"m-t-2 flex first:m-0"},V={class:"epic-attr-label",title:"校验时机"},k={class:"epic-attr-input"},w=e.defineComponent({__name:"ERuleItem",props:{rule:{}},emits:["change","delete","update:rule"],setup(s,{emit:i}){const p=s,n=i,l=e.computed({get(){return p.rule},set(t){n("update:rule",t)}}),u=e.inject("pageManager",{}),d=e.computed(()=>Object.entries(u.funcs.value).filter(([t,a])=>typeof a=="function").map(([t])=>({label:t,value:t}))),c=[{componentProps:{mode:"multiple",multiple:!0,options:r.triggerOptions,placeholder:"校验时机"},label:"校验时机",model:"trigger",type:"select"},{label:"自定义规则",model:"isValidator",type:"switch"},{componentProps:{options:d.value,placeholder:"校验函数"},label:"校验函数",model:"validator",show(){return!!l.value.isValidator},type:"select"},{componentProps:{options:r.typeOptions,placeholder:"类型"},label:"类型",model:"type",show(){return!l.value.isValidator},type:"select"},{componentProps:{placeholder:"正则校验"},label:"正则校验",model:"pattern",show(){return!l.value.isValidator},type:"input"},{componentProps:{min:0,placeholder:"字段长度"},label:"字段长度",model:"len",show(){return r.lenTypeOptions.includes(l.value.type??"")},type:"number"},{componentProps:{min:0,placeholder:"最小长度"},label:"最小长度",model:"min",show(){return r.lenTypeOptions.includes(l.value.type??"")},type:"number"},{componentProps:{min:0,placeholder:"最大长度"},label:"最大长度",model:"max",show(){return r.lenTypeOptions.includes(l.value.type??"")},type:"number"},{componentProps:{placeholder:"校验信息"},label:"校验信息",model:"message",type:"input"}];function m(){const t=l.value;t.isValidator?(delete t.type,delete t.pattern,delete t.len,delete t.min,delete t.max):delete t.validator,n("change",t)}function h(){n("delete")}return(t,a)=>(e.openBlock(),e.createElementBlock("div",g,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(c,(o,_)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:_},[!o.show||o.show()?(e.openBlock(),e.createElementBlock("div",f,[e.createElementVNode("div",V,e.toDisplayString(o.label),1),e.createElementVNode("div",k,[e.createVNode(e.unref(b),{modelValue:l.value[o.model],"onUpdate:modelValue":y=>l.value[o.model]=y,"component-schema":{...o,noFormItem:!0},onChange:m},null,8,["modelValue","onUpdate:modelValue","component-schema"])])])):e.createCommentVNode("",!0)],64))),64)),e.createElementVNode("div",{class:"rule-btn-delete text-md w-24px h-24px rounded-bl-2 color-white absolute right-0 top-0 flex cursor-pointer items-center justify-center transition-all",onClick:h},[e.createVNode(e.unref(v),{name:"icon--epic--delete-outline-rounded"})])]))}});module.exports=w;