一个表单要使用多个控件怎么实现

我有个表单,需要增加多个自定义按钮,每个按钮弹出自定义的页面,比如换货页面,比如修改地址页面等,我怎么实现?

评论区

yff 2025-11-19 17:40

@超级管理员

//初始化控件

useFun.controlInit('FormView', 'formView_85622', {

 formId: '1980889665869148161', //表单设计id

 formType: 'edit', //表单类型 add | edit | view

 handleType: '', //处理类型 default | returnData

 showType: 'dialog', //弹窗类型 dialog | drawer

 showButton: true, //是否显示底部默认操作按钮

 dataOption: { //数据配置

   tableId: '', //表单开发id

   dataId: '' //数据id

 },

 defaultData: {}, //默认表单数据

 enhanceData: {}, //传递给表单js增强内部调用配置

 popOption: { //弹窗配置

   title: 'SN码出库', //标题

   width: '', //弹窗宽度

   fullscreen: false, //是否全屏

   footerBtn: [ //底部按钮配置

     {

       params: {}, //el-button 其他参数

       name: '测试按钮', //按钮名称

       display: false, //是否显示

       loading: true, //点击时是否有loading

       icon: '', //图标

       clickFun: (loading) => {

         //点击事件

         if (loading) loading() //关闭loading

       }

     }

   ],

   headerBtn: [], //顶部按钮配置(配置同上)

   dialogParams: {} //弹窗其他配置

 },

 beforeClose: (type, done, formData, loading) => {

   // type:关闭类型  submit:提交后触发  close:直接关闭弹窗触发

   // done:关闭弹窗方法 formData:表单数据  loading:关闭loading方法

   if (type == 'submit') {

     console.log('表单数据', formData)

     useFun.requestApi('post', '/jeelowcode/snmanage/outbound', {

       data: formData

     }).then(res => {

       message.success('出库成功')

     })

     useFun.resetChange()

   }

   done()

 }

});

//控件调用

const { formView_85622 } = Vue.toRefs(rendControlData.value)

const controlData = formView_85622.value.params //FormView的配置

// componentRef.value.formView_85622 FormView的Ref控件引用

//初始化控件

useFun.controlInit('ControlView', 'controlView_97890', {

 controlName: '', //控件名称(全局注册的控件使用,例:el-transfer )

 controlPath: 'components/LowDesign/src/LowTable/components/import/importData.vue', //控件相对路径(未全局注册的控件使用,例:components/IFrame/src/IFrame.vue)

 controlParams: {}, //控件配置

 showType: 'dialog', //弹窗类型 dialog | drawer

 popOption: { //弹窗配置

   title: '导入调货数据', //标题

   width: '', //弹窗宽度

   fullscreen: false, //是否全屏

   footerBtn: [ //底部按钮配置

     {

       params: {}, //el-button 其他参数

       name: '导入调货', //按钮名称

       display: true, //是否显示

       loading: true, //点击时是否有loading

       icon: '', //图标

       clickFun: (loading) => {

         //点击事件

         if (loading) loading() //关闭loading

       }

     }

   ],

   headerBtn: [], //顶部按钮配置(配置同上)

   dialogParams: {}, //弹窗其他配置

   handleClose: (done) => { //关闭弹窗前的回调

     done()

   }

 }

})

//控件调用

const { controlView_97890 } = Vue.toRefs(rendControlData.value)

const controlData = controlView_97890.value.params //ControlView的配置

// componentRef.value.controlView_97890 ControlView的Ref控件引用


我这样实现,点击按钮,弹框就没有弹出框,但是我删除一个,另外一个可以弹出页面页面

超级管理员 2025-11-19 17:51

@yff

演示环境复现一下,这样子看不出什么

回复

扫码关注

添加客服
图片未加载,请刷新后再试
联系我们