作者:黄倩婧 历史版本: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、点击【下架】按钮,状态变成已下架