作者:管理员  历史版本:1  最后编辑:Eddy  更新时间:2024-10-24 16:08

适用版本:v3.3.5+;

1、进入表单设计器

登录系统,选择【表单管理】-【表单管理】,点击“添加/编辑”按钮,进入表单设计器,如下图:

2、设置操作按钮

在表单设计器,在操作按钮处添加按钮,如下图:

3、设置表单脚本

Object.assign(JForm, {
  //加载事件
  onLoad:function(form){
      // 先注入数据模版组件
     const templateList = this.$import('/platform/data/dataTemplate/template-list.vue')
      this.$vue.component('template-list', templateList)
  },
  //表单子表按钮前置事件
  beforeSubButton: function (tableForm, action, position, params, callback) {
    if ('test' === action) {
      this.$dialog({
        data() {
          return {
            templateId: '855020297235988480' //数据模版id
          }
        },
        template: '<template-list  :template-id="templateId" />'
      }, {
        dialog: {
          appendToBody: true,
          width: '70%',
          center: true,
          title: 'xxx列表',
        }
      }, (tpl) => {
        tableForm.dialogTemplate = tpl
      }).catch((_this) => {
        _this.visible = false
        tableForm.dialogTemplate = null
      })
    }
    callback(true)
  }

});

如果需要传动态参数 v3.4.5+可能会支持,目前版本不支持
dynamicParams 是动态传参的数据

Object.assign(JForm, {
  //加载事件
  onLoad:function(form){
      // 先注入数据模版组件
     const templateList = this.$import('/platform/data/dataTemplate/template-list.vue')
      this.$vue.component('template-list', templateList)
  },
  //表单子表按钮前置事件
  beforeSubButton: function (tableForm, action, position, params, callback) {
    if ('test' === action) {
      this.$dialog({
        data() {
          return {
            templateId: '855020297235988480', //数据模版id
            dynamicParams:{
              'xxx':'xxxx'
            }
          }
        },
        template: '<template-list  :template-id="templateId" :dynamic-params="dynamicParams" />'
      }, {
        dialog: {
          appendToBody: true,
          width: '70%',
          center: true,
          title: 'xxx列表',
        }
      }, (tpl) => {
        tableForm.dialogTemplate = tpl
      }).catch((_this) => {
        _this.visible = false
        tableForm.dialogTemplate = null
      })
    }
    callback(true)
  }

});

4.页面打开效果