quick-admin-vue3-core
Version:
以快(计算机执行效率、开发效率)为核心的后台管理系统开发模板
2 lines (1 loc) • 4.08 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),k=require("./SectionForm-BRUDv-Bw.cjs"),C=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),y={class:"step-form f-sb-fs"},S=e.defineComponent({__name:"StepForm",props:{sections:{default:()=>[]},direction:{default:"vertical"},stepAttrs:{},formAttrs:{},footer:{type:Boolean,default:!0}},emits:["change","blur","focus"],setup(u,{expose:i,emit:d}){const f={},o=u,p=d,c=e.ref(null),m=e.ref(null),v=e.computed(()=>[...o.sections.filter(s=>!!s).map(s=>{const{title:l,description:t}=s;return{title:l,description:t}}),{title:"完成"}]),b=e.ref(1);function x(r,n){if(!r)return!1;const{children:s,prop:l}=r;return s!=null&&s.length?!!s.find(t=>x(t,n)):l===n}function g(r,n){const{sections:s}=o,l=s.findIndex(t=>{if(!t)return!1;const{fields:a}=t;return!!(a!=null&&a.find(h=>x(h,n)))});b.value=l+1,p("focus",r,n)}return i({stepsRef:m,formRef:c}),(r,n)=>{const s=e.resolveComponent("el-step"),l=e.resolveComponent("el-steps");return e.openBlock(),e.createElementBlock("div",y,[e.createVNode(l,e.mergeProps({class:"steps f-0",direction:r.direction,active:b.value},{...f,...r.stepAttrs},{ref_key:"stepsRef",ref:m}),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.value,(t,a)=>(e.openBlock(),e.createBlock(s,e.mergeProps({ref_for:!0},t,{key:a}),null,16))),128))]),_:1},16,["direction","active"]),e.createVNode(k.SectionForm,e.mergeProps({class:"ml-t f-1",sections:r.sections},r.formAttrs,{onBlur:n[0]||(n[0]=(...t)=>p("blur",...t)),onFocus:g,onChange:n[1]||(n[1]=(...t)=>p("change",...t)),ref_key:"sectionFormRef",ref:c}),e.createSlots({"head-right":e.withCtx(t=>[e.renderSlot(r.$slots,"head-right-"+(t.section.prop??t.index+1),e.normalizeProps(e.guardReactiveProps(t)),void 0,!0)]),body:e.withCtx(t=>[e.renderSlot(r.$slots,"body-"+t.section.prop,e.normalizeProps(e.guardReactiveProps(t)),void 0,!0)]),field:e.withCtx(t=>[e.renderSlot(r.$slots,t.field.prop,e.normalizeProps(e.guardReactiveProps(t)),void 0,!0)]),_:2},[r.footer?{name:"footer",fn:e.withCtx(()=>[e.renderSlot(r.$slots,"footer",{},void 0,!0)]),key:"0"}:void 0]),1040,["sections"])])}}}),F=C._export_sfc(S,[["__scopeId","data-v-65eaf473"]]),P=e.defineComponent({name:"DemoCenterCompsFormStepForm",__name:"index",setup(u){let i=e.reactive({id:0,nc:"这是用户昵称",zy:0,xm:"张三",partThree:{xjd:"成都"}});const d=[{title:"第一部分",prop:"partOne",fields:[{prop:"id",label:"用户ID"},{prop:"nc",label:"昵称"},{prop:"zy",label:"职业",type:"select",attrs:{options:[{label:"职业0",value:0},{label:"职业1",value:1}]}}]},{title:"第二部分",explain:"块级设置 {readonly: true}",fields:[{prop:"xm",label:"姓名",quickAttrs:{pureText:!0,explain:"字段级设置 {pureText: true}"}},{prop:"xb",label:"性别",required:!0},{prop:"nl",label:"年龄"}]},{title:"第三部分",explain:"块级设置 prop 属性",prop:"partThree",fields:[{prop:"xjd",label:"现居地",quickAttrs:{tips:"字段级的size【el-form-item】"}},{prop:"ip",label:"IP地址",quickAttrs:{tips:"控件级的size【el-input】"}}]},{title:"第四部分",explain:"块级设置 {disabled: true}",fields:[{prop:"dh",label:"电话"},{prop:"ma",label:"密码"},{prop:"sfzh",label:"身份证号",attrs:{disabled:!1},quickAttrs:{explain:"设置{disabled: false}"}},{prop:"zdy",label:"自定义",type:"slot"}]}];return(f,o)=>(e.openBlock(),e.createBlock(F,{class:"q-page-view",modelValue:e.unref(i),"onUpdate:modelValue":o[0]||(o[0]=p=>e.isRef(i)?i.value=p:i=p),sections:d},{"body-partOne":e.withCtx(()=>o[1]||(o[1]=[e.createTextVNode("这是第一部分的自定义内容")])),"head-right-partThree":e.withCtx(()=>o[2]||(o[2]=[e.createTextVNode("这是第三部分的Head的插槽,有prop属性:【head-right-partThree】")])),"head-right-4":e.withCtx(()=>o[3]||(o[3]=[e.createTextVNode("这是第四部分的Head的插槽,无prop属性:【head-right-4】")])),zdy:e.withCtx(()=>o[4]||(o[4]=[e.createTextVNode("这是自定义的表单字段")])),_:1},8,["modelValue"]))}});exports.default=P;