"use strict";(self["webpackChunkscui"]=self["webpackChunkscui"]||[]).push([[175],{7454:function(e,l,a){a.r(l),a.d(l,{default:function(){return h}});var t=a(66252),n=a(3577);const o=(0,t.Uk)("1.远程获取表单配置参数和表单的值"),i=(0,t.Uk)("2.根据配置构建表单组件"),s=(0,t.Uk)("3.给表单赋值"),r=(0,t.Uk)("改变输入框的值"),m=(0,t.Uk)("改变指定栅格配置"),u=(0,t.Uk)("保 存"),c=(0,t.Uk)("重 置");function d(e,l,a,d,p,b){const f=(0,t.up)("el-timeline-item"),h=(0,t.up)("el-timeline"),v=(0,t.up)("el-alert"),g=(0,t.up)("el-card"),w=(0,t.up)("el-button"),k=(0,t.up)("el-col"),y=(0,t.up)("sc-form"),C=(0,t.up)("el-row"),_=(0,t.up)("el-main");return(0,t.wg)(),(0,t.j4)(_,null,{default:(0,t.w5)((()=>[(0,t.Wm)(C,{gutter:15},{default:(0,t.w5)((()=>[(0,t.Wm)(k,{lg:6},{default:(0,t.w5)((()=>[(0,t.Wm)(g,{shadow:"never",header:"处理逻辑说明"},{default:(0,t.w5)((()=>[(0,t.Wm)(h,null,{default:(0,t.w5)((()=>[(0,t.Wm)(f,{timestamp:"两者数据并无顺序要求,只是获取表单值时需要自行设置loading"},{default:(0,t.w5)((()=>[o])),_:1}),(0,t.Wm)(f,{timestamp:"构建form对象, 循环渲染对应组件, 获取远程选项数据. 完成前组件将由骨架代替"},{default:(0,t.w5)((()=>[i])),_:1}),(0,t.Wm)(f,{timestamp:"合并form对象和表单值"},{default:(0,t.w5)((()=>[s])),_:1})])),_:1}),(0,t.Wm)(v,{title:"当前版本为预览版本,并未在正式项目中实施,请谨慎使用. 更多配置以及图形化编辑器正在路上.",type:"warning","show-icon":""})])),_:1}),(0,t.Wm)(g,{shadow:"never",header:"双向绑定"},{default:(0,t.w5)((()=>[(0,t.Wm)(w,{type:"primary",onClick:b.setName},{default:(0,t.w5)((()=>[r])),_:1},8,["onClick"]),(0,t.Wm)(w,{type:"primary",onClick:b.setConfig},{default:(0,t.w5)((()=>[m])),_:1},8,["onClick"])])),_:1})])),_:1}),(0,t.Wm)(k,{lg:12},{default:(0,t.w5)((()=>[(0,t.Wm)(g,{shadow:"never",header:"动态表单渲染器"},{default:(0,t.w5)((()=>[(0,t.Wm)(y,{ref:"formref",config:p.config,modelValue:p.form,"onUpdate:modelValue":l[0]||(l[0]=e=>p.form=e),loading:p.loading},{default:(0,t.w5)((()=>[(0,t.Wm)(w,{type:"primary",onClick:b.save},{default:(0,t.w5)((()=>[u])),_:1},8,["onClick"]),(0,t.Wm)(w,{onClick:b.reset},{default:(0,t.w5)((()=>[c])),_:1},8,["onClick"])])),_:1},8,["config","modelValue","loading"])])),_:1})])),_:1}),(0,t.Wm)(k,{lg:6},{default:(0,t.w5)((()=>[(0,t.Wm)(g,{shadow:"never",header:"表单输出"},{default:(0,t.w5)((()=>[(0,t._)("pre",null,(0,n.toDisplayString)(p.form),1)])),_:1})])),_:1})])),_:1})])),_:1})}var p={name:"formRender",data(){return{loading:!1,config:{},form:{}}},mounted(){const e={labelWidth:"130px",labelPosition:"right",size:"medium",formItems:[{label:"ElementPlus",component:"title"},{label:"输入框",name:"name",value:"",component:"input",options:{maxlength:"20",placeholder:"Activity name"},rules:[{required:!0,message:"Please input Activity name",trigger:"blur"}],requiredHandle:"$.required==true"},{label:"栅格(12/24)",name:"name2",value:"",component:"input",span:12,options:{placeholder:"span: 12"}},{label:"栅格(12/24)",name:"name3",value:"",component:"input",span:12,options:{placeholder:"span: 12"}},{label:"选择器(多选)",name:"select",value:"",component:"select",span:24,options:{remote:{api:`${this.$CONFIG.API_URL}/system/dic/get`,data:{name:"a"}},multiple:!0,items:[{label:"选项1",value:"1"},{label:"选项2",value:"2"}]},rules:[{required:!0,message:"Please input Activity name",trigger:"change"}],requiredHandle:"$.required==true"},{label:"选择器(单选)",name:"select2",value:"",component:"select",span:24,options:{remote:{api:`${this.$CONFIG.API_URL}/system/dic/get`,data:{name:"b"}},items:[{label:"选项1",value:"1"},{label:"选项2",value:"2"}]}},{label:"级联选择器",name:"cascader",value:"",component:"cascader",span:24,options:{items:[{label:"Guide",value:"guide",children:[{label:"Disciplines",value:"disciplines"},{label:"Consistency",value:"consistency"}]},{label:"Resource",value:"resource",children:[{label:"Axure Components",value:"axure"},{label:"Sketch Templates",value:"sketch"},{label:"Design Documentation",value:"docs"}]},{label:"Component",value:"component"}]}},{label:"多选框",name:"checkbox",component:"checkbox",span:24,tips:"多选框配置加上 name 表示拥有嵌套关系。否则将值“平铺”在form对象",options:{items:[{label:"选项1",name:"option1",value:!1},{label:"选项2",name:"option2",value:!1}]},hideHandle:"$.required==true"},{label:"多选框组",name:"checkboxGroup",value:[],component:"checkboxGroup",span:24,options:{items:[{label:"选项1",value:"option1"},{label:"选项2",value:"option2"}]},hideHandle:"$.required==true"},{label:"单选",name:"radio",value:"1",component:"radio",options:{items:[{label:"选项1",value:"1"},{label:"选项2",value:"2"}]},hideHandle:"$.required==true"},{label:"开关",name:"required",message:"演示如何使用表达式动态显隐和必填，试试打开和关闭开关",value:!1,component:"switch"},{label:"日期/时间",name:"date",value:"",component:"date",options:{type:"datetime",valueFormat:"YYYY-MM-DD HH:mm:ss"},rules:[{required:!0,message:"Please input Data",trigger:"change"}]},{label:"滑块",name:"slider",value:0,component:"slider",options:{marks:{0:"0°C",8:"8°C",37:"37°C"}}},{label:"数值",name:"number",value:0,component:"number"},{label:"颜色",name:"color",value:"",component:"color"},{label:"评分",name:"rate",value:0,component:"rate"},{label:"SCUI扩展",component:"title"},{label:"表格选择器",name:"tableselect",value:{},component:"tableselect",span:24,options:{apiObj:"$API.demo.page",column:[{label:"ID",prop:"id",width:150},{label:"姓名",prop:"user"}],props:{label:"user",value:"id",keyword:"keyword"}}},{label:"上传",component:"upload",options:{items:[{label:"图像1",name:"img1",value:""},{label:"图像2",name:"img2",value:""}]}},{label:"富文本",name:"text",value:"",component:"editor"}]},l={name:"Activity name",checkbox:{option1:!0},checkboxGroup:["option1"],select:["1"],select2:"1",cascader:["resource","docs"],tableselect:{user:"何敏",id:"360000197302144442"},text:'Editor
\n\n\n\n| Name | \nSCUI | \n
\n\n| Describe | \nSuper color UI Admin | \n
\n\n
'};setTimeout((()=>{this.config=e}),500),this.loading=!0,setTimeout((()=>{this.form=l,this.loading=!1}),100)},methods:{setName(){this.form.name="New Title"},setConfig(){this.config.formItems[2].span=24==this.config.formItems[2].span?12:24,this.config.formItems[3].span=24==this.config.formItems[3].span?12:24},save(){this.$refs.formref.validate(((e,l)=>{if(!e)return this.$refs.formref.scrollToField(Object.keys(l)[0]),!1;console.log(this.form),alert("submit!")}))},reset(){this.$refs.formref.resetFields()}}},b=a(83744);const f=(0,b.Z)(p,[["render",d]]);var h=f}}]);