form-designer-xinyi/dist/index-DoIfXUcZ.cjs

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

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),g=require("./revoke-Bbm2vFx2.cjs"),f=require("./index-Df9Drsqp.cjs"),k=require("./icon.vue_vue_type_script_setup_true_lang-CXgVOUsT.cjs"),_=[{label:"请选择",value:"请选择"},{label:"phone",value:"phone"},{label:"idCard",value:"idCard"},{label:"string",value:"string"},{label:"number",value:"number"},{label:"boolean",value:"boolean"},{label:"method",value:"method"},{label:"regexp",value:"regexp"},{label:"integer",value:"integer"},{label:"float",value:"float"},{label:"array",value:"array"},{label:"object",value:"object"},{label:"date",value:"date"},{label:"url",value:"url"},{label:"hex",value:"hex"},{label:"email",value:"email"},{label:"any",value:"any"}],V=[{label:"change",value:"change"},{label:"blur",value:"blur"}],y=["string","number","url","array","email"],B={class:"rule-item-main bg-white m-t-2 p-2 rounded border border-solid border-gray-200 hover:border-primary transition-all relative"},w={key:0,class:"flex m-t-2 first:m-0"},E={class:"epic-attr-label",title:"校验时机1324"},x={class:"epic-attr-input"},C=e.defineComponent({__name:"ERuleItem",props:{rule:{}},emits:["change","delete","update:rule"],setup(m,{emit:v}){const s=v,c=m,l=e.computed({get(){return c.rule},set(t){s("update:rule",t)}}),h=e.inject("pageManager",{}),o=e.computed(()=>Object.entries(h.funcs.value).filter(([t,r])=>typeof r=="function").map(([t])=>({label:t,value:t}))),i=[{type:"select",label:"校验时机",model:"trigger",componentProps:{options:V,placeholder:"校验时机",multiple:!0,mode:"multiple"}},{type:"switch",label:"自定义规则",model:"isValidator"},{type:"select",label:"校验函数",model:"validator",show(){return!!l.value.isValidator},componentProps:{options:o.value,placeholder:"校验函数"}},{type:"select",label:"类型",model:"type",show(){return!l.value.isValidator},componentProps:{options:_,placeholder:"类型"}},{type:"input",label:"正则校验",model:"pattern",show(){return!l.value.isValidator},componentProps:{placeholder:"正则校验"}},{type:"number",label:"字段长度",model:"len",show(){return y.includes(l.value.type??"")},componentProps:{min:0,placeholder:"字段长度"}},{type:"number",label:"最小长度",model:"min",show(){return y.includes(l.value.type??"")},componentProps:{min:0,placeholder:"最小长度"}},{type:"number",label:"最大长度",model:"max",show(){return y.includes(l.value.type??"")},componentProps:{min:0,placeholder:"最大长度"}},{type:"input",label:"校验信息",model:"message",componentProps:{placeholder:"校验信息"}}];function b(){const t=l.value;t.isValidator?(delete t.type,delete t.pattern,delete t.len,delete t.min,delete t.max):delete t.validator,s("change",t)}function d(){s("delete")}return(t,r)=>(e.openBlock(),e.createElementBlock("div",B,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(i,(a,n)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:n},[!a.show||a.show()?(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("div",E,e.toDisplayString(a.label),1),e.createElementVNode("div",x,[e.createVNode(e.unref(f._sfc_main),{modelValue:l.value[a.model],"onUpdate:modelValue":u=>l.value[a.model]=u,componentSchema:{...a,noFormItem:!0},onChange:b},null,8,["modelValue","onUpdate:modelValue","componentSchema"])])])):e.createCommentVNode("",!0)],64))),64)),e.createElementVNode("div",{class:"rule-btn-delete absolute top-0 right-0 transition-all w-24px h-24px cursor-pointer rounded-bl-2 flex justify-center items-center color-white",onClick:d},[e.createVNode(e.unref(k._sfc_main),{name:"icon-shanchu1"})])]))}}),q={class:"rule-item-main m-t-2 p-2 rounded border border-solid transition-all relative"},N={key:0,class:"flex m-t-2 first:m-0"},P={class:"epic-attr-label"},U={class:"flex-1"},F=e.defineComponent({__name:"index",props:{ruleType:{type:String,default:"请选择"},modelValue:{type:Array,default:void 0}},emits:["update:modelValue"],setup(m,{emit:v}){const s=g.pluginManager.getComponent("button"),c=m,l=e.ref({required:!1,message:"必填项",type:"请选择",trigger:["blur"]}),h=[{type:"switch",label:"必填项",model:"required"},{type:"select",label:"校验时机",model:"trigger",show(){return!!l.value.required},componentProps:{options:V,placeholder:"校验时机",multiple:!0,mode:"multiple"}},{type:"select",label:"类型",model:"type",show(){return!!l.value.required},componentProps:{options:_,placeholder:"类型"}},{type:"input",label:"校验信息",model:"message",show(){return!!l.value.required},componentProps:{placeholder:"校验信息"}}],o=e.ref([]),i=v;e.watch(()=>c.modelValue,r=>{if(r){if(!r)return;o.value=[],r.forEach(a=>{typeof a.required<"u"?l.value=a:o.value.push(a)})}},{immediate:!0});function b(){o.value.push({message:"",type:c.ruleType,trigger:["change"]}),d()}function d(){if(l.value.required){i("update:modelValue",g.deepClone([...o.value,l.value]));return}if(o.value.length){i("update:modelValue",g.deepClone(o.value));return}i("update:modelValue",void 0)}function t(r){o.value.splice(r,1),d()}return(r,a)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",q,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(h,(n,u)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:u},[!n.show||n.show()?(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",P,e.toDisplayString(n.label),1),e.createElementVNode("div",U,[e.createVNode(e.unref(f._sfc_main),{modelValue:l.value[n.model],"onUpdate:modelValue":p=>l.value[n.model]=p,componentSchema:{...n,noFormItem:!0},onChange:d},null,8,["modelValue","onUpdate:modelValue","componentSchema"])])])):e.createCommentVNode("",!0)],64))),64))]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,(n,u)=>(e.openBlock(),e.createBlock(C,{key:u,rule:o.value[u],"onUpdate:rule":p=>o.value[u]=p,onDelete:p=>t(u),onChange:d},null,8,["rule","onUpdate:rule","onDelete"]))),128)),e.createVNode(e.unref(s),{class:"m-t-2",onClick:b},{default:e.withCtx(()=>[e.createTextVNode(" 添加规则 ")]),_:1})]))}});exports.default=F;