DynamicForm-zXcQrk8n.js 4.2 KB

1
  1. var P=(h,c,a)=>new Promise((f,p)=>{var u=l=>{try{r(a.next(l))}catch(s){p(s)}},b=l=>{try{r(a.throw(l))}catch(s){p(s)}},r=l=>l.done?f(l.value):Promise.resolve(l.value).then(u,b);r((a=a.apply(h,c)).next())});import{_}from"./BasicForm.vue_vue_type_script_setup_true_lang-ByuHmjlN.js";import"./BasicForm.vue_vue_type_style_index_0_lang-wVUE9AOT.js";import"./helper-B0yEaptj.js";import{u as g}from"./useForm-C-769eP8.js";import{bk as C}from"./entry/index-CRWhxBeP.js";import{P as W}from"./index-C0mnMlct.js";import{d as F,a6 as S,Z as y,a4 as v,a5 as n,$ as I,k as t,G as d,u as i}from"./vue-DM5HGU8Z.js";import"./FormItem.vue_vue_type_script_lang-r-ozwU0K.js";import"./antd-BfqWtMX3.js";import"./index-CD5zFmZN.js";import"./useWindowSizeFn-CEueHQop.js";import"./index-BshNMORD.js";import"./index-BGDG2Aiy.js";import"./uuid-BUBnBT7J.js";import"./useSortable-BUyXn7hO.js";import"./download-DbzL13NI.js";import"./base64Conver-DEMZeTZS.js";import"./index-BZ4uXGij.js";import"./IconPicker.vue_vue_type_script_setup_true_lang-BMkV6zCu.js";import"./copyTextToClipboard-B8vsl9wq.js";import"./index-CIEo7xez.js";import"./index-DOkdpLQv.js";import"./onMountedOrActivated-Ckq_czNf.js";import"./index-lE2idd8k.js";import"./UploadPreviewModal-BZsd-hmR.js";import"./cateApi-BE6kfD5q.js";import"./resourceApi-CKj0y817.js";import"./common-DpkSdXuu.js";import"./imageEnum-BRgYKvjO.js";import"./sysOrgApi-tY_yXKfV.js";import"./useContentViewHeight-D9So7_ch.js";const N={class:"mb-4"},re=F({__name:"DynamicForm",setup(h){const c=[{field:"field1",component:"Input",label:"字段1",colProps:{span:8},show:({values:e})=>!!e.field5},{field:"field2",component:"Input",label:"字段2",colProps:{span:8},ifShow:({values:e})=>!!e.field6},{field:"field3",component:"DatePicker",label:"字段3",colProps:{span:8},dynamicDisabled:({values:e})=>!!e.field7},{field:"field4",component:"Select",label:"字段4",colProps:{span:8},dynamicRules:({values:e})=>e.field8?[{required:!0,message:"字段4必填"}]:[],componentProps:{options:[{label:"选项1",value:"1",key:"1"},{label:"选项2",value:"2",key:"2"}]}},{field:"field11",component:"DatePicker",label:"字段11",colProps:{span:8}},{field:"field5",component:"Switch",label:"是否显示字段1(css控制)",colProps:{span:8},labelWidth:200},{field:"field6",component:"Switch",label:"是否显示字段2(dom控制)",colProps:{span:8},labelWidth:200},{field:"field7",component:"Switch",label:"是否禁用字段3",colProps:{span:8},labelWidth:200},{field:"field8",component:"Switch",label:"字段4是否必填",colProps:{span:8},labelWidth:200}],a=[{field:"f1",component:"Input",label:"F1",colProps:{span:12},labelWidth:200,componentProps:({formModel:e})=>({placeholder:"同步f2的值为f1",onChange:o=>{e.f2=o.target.value}})},{field:"f2",component:"Input",label:"F2",colProps:{span:12},labelWidth:200,componentProps:{disabled:!0}},{field:"f3",component:"Input",label:"F3",colProps:{span:12},labelWidth:200,componentProps:({formActionType:e})=>({placeholder:"值改变时执行查询,查看控制台",onChange:()=>P(this,null,function*(){const{validate:o}=e;yield o()})})}],[f,{updateSchema:p,appendSchemaByField:u,removeSchemaByField:b}]=g({labelWidth:120,schemas:c,actionColOptions:{span:24}}),[r]=g({labelWidth:120,schemas:a,actionColOptions:{span:24}});function l(){p({field:"field3",label:"字段3 New"})}function s(){p([{field:"field3",label:"字段3 New++"},{field:"field4",label:"字段4 New++"}])}function k(){u({field:"field10",label:"字段10",component:"Input",colProps:{span:8}},"field3")}function w(){b("field11")}return(e,o)=>{const m=S("a-button");return y(),v(i(W),{title:"动态表单示例"},{default:n(()=>[I("div",N,[t(m,{onClick:l,class:"mr-2"},{default:n(()=>o[0]||(o[0]=[d(" 更改字段3label ")])),_:1}),t(m,{onClick:s,class:"mr-2"},{default:n(()=>o[1]||(o[1]=[d(" 同时更改字段3,4label ")])),_:1}),t(m,{onClick:k,class:"mr-2"},{default:n(()=>o[2]||(o[2]=[d(" 往字段3后面插入字段10 ")])),_:1}),t(m,{onClick:w,class:"mr-2"},{default:n(()=>o[3]||(o[3]=[d(" 删除字段11 ")])),_:1})]),t(i(C),{title:"动态表单示例,动态根据表单内其他值改变"},{default:n(()=>[t(i(_),{onRegister:i(f)},null,8,["onRegister"])]),_:1}),t(i(C),{class:"mt-5",title:"componentProps动态改变"},{default:n(()=>[t(i(_),{onRegister:i(r)},null,8,["onRegister"])]),_:1})]),_:1})}}});export{re as default};