DynamicForm-883a5567.js
4.3 KB
var f=(e,n,l)=>new Promise((c,p)=>{var u=o=>{try{a(l.next(o))}catch(r){p(r)}},t=o=>{try{a(l.throw(o))}catch(r){p(r)}},a=o=>o.done?c(o.value):Promise.resolve(o.value).then(u,t);a((l=l.apply(e,n)).next())});import{d as B,a8 as d,_ as P,a9 as _,aa as s,a0 as C,f as i,E as m}from"./vue-5a35c3f5.js";import{B as F}from"./BasicForm-53100365.js";import"./componentMap-4d1c941b.js";import{u as b}from"./useForm-86d11f60.js";import"./RadioButtonGroup-72b65d2e.js";import{aW as g,_ as k}from"./index.js";import{P as W}from"./index-f532aa07.js";import"./FormItem-ffc5ecef.js";import"./helper-95474dfc.js";import"./antd-6b087f69.js";import"./BasicForm.vue_vue_type_style_index_0_lang-3479a052.js";import"./uniqBy-0cd5a663.js";import"./index-c1c2669a.js";import"./useWindowSizeFn-cc2fb57c.js";import"./useFormItem-9ea791b8.js";import"./uuid-31b8b5a4.js";import"./download-3d468407.js";import"./base64Conver-39fc0d26.js";import"./index-1ca3bd8a.js";import"./IconPicker-6bbd557c.js";import"./index-9a895eb5.js";import"./useContentViewHeight-d0a5c58e.js";import"./onMountedOrActivated-52afb7a7.js";const h=[{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}],w=[{field:"f1",component:"Input",label:"F1",colProps:{span:12},labelWidth:200,componentProps:({formModel:e})=>({placeholder:"同步f2的值为f1",onChange:n=>{e.f2=n.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:()=>f(void 0,null,function*(){const{validate:n}=e,l=yield n();console.log(l)})})}],v=B({components:{BasicForm:F,CollapseContainer:g,PageWrapper:W},setup(){const[e,{setProps:n,updateSchema:l,appendSchemaByField:c,removeSchemaByField:p}]=b({labelWidth:120,schemas:h,actionColOptions:{span:24}}),[u]=b({labelWidth:120,schemas:w,actionColOptions:{span:24}});function t(){l({field:"field3",label:"字段3 New"})}function a(){l([{field:"field3",label:"字段3 New++"},{field:"field4",label:"字段4 New++"}])}function o(){c({field:"field10",label:"字段10",component:"Input",colProps:{span:8}},"field3")}function r(){p("field11")}return{register:e,register1:u,schemas:h,setProps:n,changeLabel3:t,changeLabel34:a,appendField:o,deleteField:r}}}),y={class:"mb-4"};function D(e,n,l,c,p,u){const t=d("a-button"),a=d("BasicForm"),o=d("CollapseContainer"),r=d("PageWrapper");return P(),_(r,{title:"动态表单示例"},{default:s(()=>[C("div",y,[i(t,{onClick:e.changeLabel3,class:"mr-2"},{default:s(()=>[m(" 更改字段3label ")]),_:1},8,["onClick"]),i(t,{onClick:e.changeLabel34,class:"mr-2"},{default:s(()=>[m(" 同时更改字段3,4label ")]),_:1},8,["onClick"]),i(t,{onClick:e.appendField,class:"mr-2"},{default:s(()=>[m(" 往字段3后面插入字段10 ")]),_:1},8,["onClick"]),i(t,{onClick:e.deleteField,class:"mr-2"},{default:s(()=>[m(" 删除字段11 ")]),_:1},8,["onClick"])]),i(o,{title:"动态表单示例,动态根据表单内其他值改变"},{default:s(()=>[i(a,{onRegister:e.register},null,8,["onRegister"])]),_:1}),i(o,{class:"mt-5",title:"componentProps动态改变"},{default:s(()=>[i(a,{onRegister:e.register1},null,8,["onRegister"])]),_:1})]),_:1})}const x=k(v,[["render",D],["__file","E:/allcode/erp/test7901/order-erp-front/src/views/demo/form/DynamicForm.vue"]]);export{x as default};