gepic/dist/core/extensions/ERuleEditor/ERuleItem.vue.cjs

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

"use strict";const e=require("vue"),v=require("../../components/node/src/node.vue.cjs"),b=require("../../components/icon/src/icon.vue.cjs"),n=require("./data.cjs"),g={class:"rule-item-main bg-white m-t-2 p-2 rounded border border-solid border-gray-200 hover:border-primary transition-all relative"},f={key:0,class:"flex m-t-2 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:p}){const r=p,i=s,l=e.computed({get(){return i.rule},set(t){r("update:rule",t)}}),d=e.inject("pageManager",{}),u=e.computed(()=>Object.entries(d.funcs.value).filter(([t,a])=>typeof a=="function").map(([t])=>({label:t,value:t}))),c=[{type:"select",label:"校验时机",model:"trigger",componentProps:{options:n.triggerOptions,placeholder:"校验时机",multiple:!0,mode:"multiple"}},{type:"switch",label:"自定义规则",model:"isValidator"},{type:"select",label:"校验函数",model:"validator",show(){return!!l.value.isValidator},componentProps:{options:u.value,placeholder:"校验函数"}},{type:"select",label:"类型",model:"type",show(){return!l.value.isValidator},componentProps:{options:n.typeOptions,placeholder:"类型"}},{type:"input",label:"正则校验",model:"pattern",show(){return!l.value.isValidator},componentProps:{placeholder:"正则校验"}},{type:"number",label:"字段长度",model:"len",show(){return n.lenTypeOptions.includes(l.value.type??"")},componentProps:{min:0,placeholder:"字段长度"}},{type:"number",label:"最小长度",model:"min",show(){return n.lenTypeOptions.includes(l.value.type??"")},componentProps:{min:0,placeholder:"最小长度"}},{type:"number",label:"最大长度",model:"max",show(){return n.lenTypeOptions.includes(l.value.type??"")},componentProps:{min:0,placeholder:"最大长度"}},{type:"input",label:"校验信息",model:"message",componentProps:{placeholder:"校验信息"}}];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,r("change",t)}function h(){r("delete")}return(t,a)=>(e.openBlock(),e.createElementBlock("div",g,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(c,(o,y)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:y},[!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(v),{modelValue:l.value[o.model],"onUpdate:modelValue":_=>l.value[o.model]=_,"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 absolute top-0 text-md right-0 transition-all w-24px h-24px cursor-pointer rounded-bl-2 flex justify-center items-center color-white",onClick:h},[e.createVNode(e.unref(b),{name:"icon--epic--delete-outline-rounded"})])]))}});module.exports=w;