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是预览的)