1.引入脚本示例
1.1示例1:根据主表内容设置子表字段权限
示例说明:
“产品销售表”:
1、产品类型选择水果时,子表“产品明细”中的产品名称必填;
2、产品类型选择日用品时,子表“产品明细”中的产品数量隐藏;
3、产品类型选择蔬菜时,字段备注说明输入的字体颜色为红色;
添加脚本步骤如下图:
预览效果:let vm = document.getElementsByName("online-form")[0].__vue__;
vm.$watch("data.cpxs.cplx", function (newVal, oldVal, farewell) {
if (newVal !== oldVal) {
if (newVal == '水果') {
//当值等于水果时,子表“产品明细”中的产品名称必填
vm.permission.fields.cpmx.cpmc = 'b';
}else if (newVal == '日用品') {
//当值等于日用品时,子表“产品明细”中的产品数量隐藏
vm.permission.fields.cpmx.cpsl = 'n';
}else if (newVal == '蔬菜') {
//当值等于日用品时,子表“产品明细”中的产品数量显示,主表字段备注说明输入的字体颜色为红色;
vm.permission.fields.cpmx.cpsl = 'w';
document.querySelector("[model-name='data.cpxs.bzsm'] textarea").style.color = 'red';
}
}
}, { immediate: true });
1.2示例2:将子表数据汇总至主表字段
示例说明:通过js方法汇总子表项目备注到主表项目备注字段,用中文逗号拼接
let vm = document.getElementsByName("online-form")[0].__vue__;
//子表
vm.$watch('data.jzbzfzdzbzd.sub_zbzdzfz',function(newVal,oldVal){
let arraya = data.jzbzfzdzbzd.sub_zbzdzfz;
if(arraya && arraya.length>0){
let sy = "";
for(var i=0;i<arraya.length;i++){
if(""!=data.jzbzfzdzbzd.sub_zbzdzfz[i].xmbz){
if(i!=0){
sy+=",";
}
sy+=data.jzbzfzdzbzd.sub_zbzdzfz[i].xmbz;
}
}
data.jzbzfzdzbzd.xmbz = sy;
}
},{ deep:true});
预览结果:
1.3示例3:主表字段值赋值到子表字段
示例说明:通过js方法将主表中的项目名称赋值到子表的项目名称中
//将主表字段值赋值到子表字段:项目名称
let vmm = document.getElementsByName("online-form")[0].__vue__;
var index1 = 1;
vmm.$watch('data.jzbzfzdzbzd.sub_zbzdzfz',function(newVal,oldVal){
if("" != data.jzbzfzdzbzd.sub_zbzdzfz[0].xmjl){
data.jzbzfzdzbzd.xmjl = data.jzbzfzdzbzd.sub_zbzdzfz[0].xmjl+"等"
}else{
data.jzbzfzdzbzd.xmjl = "";
}
var length = data.jzbzfzdzbzd.sub_zbzdzfz.length;
if(length >= index1){
data.jzbzfzdzbzd.sub_zbzdzfz[data.jzbzfzdzbzd.sub_zbzdzfz.length-1].xmmc = data.jzbzfzdzbzd.xmm;
}
index1 = length;
});
setTimeout(function(){
var slength = data.jzbzfzdzbzd.sub_zbzdzfz.length;
if(data.jzbzfzdzbzd.xmm && slength>0 && !data.jzbzfzdzbzd.sub_zbzdzfz[0].xmmc){
data.jzbzfzdzbzd.sub_zbzdzfz[0].xmmc = data.jzbzfzdzbzd.xmm;
}
},500);
预览效果:
1.4示例4:根据数字大小判断字段是否必填
let vm = document.getElementsByName("online-form")[0].__vue__;
vm.$watch('data.ycsqys.bzxsl',function(newVal,oldVal){
if(data.ycsqys.bzxsl > 1){
//大于1时,运输货物清单必填;
vm.permission.fields.ycsqys.yshwqd = 'b';
}else{
//小于或等于1时,运输货物清单隐藏;
vm.permission.fields.ycsqys.yshwqd = 'n';
}
});
预览效果:
其他权限:
//“r”只读权限 vm.permission.fields.ycsqys.yshwqd = 'r'; // 'w'可编辑权限 vm.permission.fields.ycsqys.yshwqd = 'w';
2.扩展变量
注:扩展常用变量(该扩展说明仅供开发参考)
在FormNavigator.vue中,添加变量
在formContent.vue、 previewForm.vue中添加获取变量的方法
(formContent.vue是启动流程的,previewForm.vue是预览的)