作者:黄倩婧  历史版本:1  最后编辑:黄倩婧  更新时间:2025-08-14 15:48

适用版本:v3.6.0+;

业务场景描述:

1、有1个表:产品信息,产品状态有:未上线、使用中、已下架,状态值分别为:1、2、3;
2、产品编辑页面操作逻辑:
2.1、如果状态为未上线或已下架时,显示【上架】按钮;
2.2、如果状态为使用中时,显示【下架】按钮;
2.3、当操作【上架】按钮时,状态变成使用中;
2.4、当操作【下架】按钮时,状态变成已下架。

数据模板配置步骤:

登录系统,选择【表单管理】-【数据模板管理】,进入设计页面,添加显示字段,编辑页添加自定义按钮:上架(sj)、下架(xj)


表单管理配置步骤:

1、选择【表单管理】-【表单管理】,点击“添加/编辑”按钮,进入表单设计页面,产品信息的字段及表单设计如下图所示

2、设置表单脚本


完整脚本如下:

Object.assign(JForm,{
  //加载事件
  onLoad:function(form){   
  },
  onLoadActions:function(form,action,button,type){
   let zhuangTai = form.formData['zhuangTai']
   console.log(zhuangTai)
   if(zhuangTai==='2'){
     if(action === 'sj' && type==='hidden'){
       return true
       }else{
           return false
       }
     }
    else{
     if(action === 'xj' && type==='hidden'){
       return true
       }else{
           return false
       }
     }
  },
 //表单按钮前置事件
  beforeSubmit:function(form,action,postValue,callback){
  if(action==='sj'){
    form.setData('zhuangTai','2')
    form.$parent.saveData('saveAndContinue')
    callback(true)
    }
  if(action==='xj'){
    form.setData('zhuangTai','3')
    form.$parent.saveData('saveAndContinue')
    callback(true)
    }
  else{
    callback(true)
    }
  } 
});

查看配置效果

1、进入【表单管理】-【数据模板管理】页面,点击【预览】

2、查看未上线、已下架状态的编辑页面,显示【上架】按钮,不显示【下架】按钮

3、查看使用中状态的编辑页面,显示【下架】按钮,不显示【上架】按钮

4、点击【上架】按钮,状态变成使用中

5、点击【下架】按钮,状态变成已下架