2023年6月21日发(作者：)
关于流程表单设计器自定义开发及常见场景方案分享
一、表单设计器模板如何自定义开发
表单设计器可设置自定义属性以及插入代码块，二者相辅结合、灵活运用，可实现多样化客户需求
自定义属性分为：行自定义属性(绑定在table布局tr行标签上)、单元格自定义属性(绑定在table布局td标签子元素div上)、列自定义属性(绑定在明细table此列所有td标签上)；
代码块可填写 Script代码块、Style样式块及直接对JS/CSS文件的引用；
二、常用开发场景实现
场景1： 控制日期字段选择范围，比如费用产生日期只能选择当前日期往前十天至今天，否则不允许流程提交
实现方式: 代码块插入
封装方法： cus_judgeDateRange(fieldid, floorday, upperday)
* @param {fieldid} 日期字段ID
* @param {floorday} 下限天数(与当前日期比较)，空值代表不限制
* @param {upperday} 上限天数(与当前日期比较)，空值代表不限制
* @return 返回true表示在范围内，false表示超出限定范围或日期置为空
场景2： 实时计算两个日期时间字段组合相差小时数，并赋值给另一字段
实现方式：代码块插入
jQuery(document).ready(function(){
var bindFun = function(){
var diffhours = cus_CalTimeDiff("field31,field32", "field35,field36", 2);
jQuery("[name=field39]").val(diffhours);
}
jQuery("#field31,#field32,#field35,#field36").bindPropertyChange(bindFun);
bindFun();
}); 封装方法：cus_CalTimeDiff(begfields, endfields, unit, digit)
* @param {begfields} 开始时间
* @param {endfields} 结束时间
* @param {unit} 计量结果单位1(天)、2(小时)、3(分钟)、4(秒)，默认为天
* @param {digit} 计算结果保留小数位数，默认2位小数
* @return 以endfields字段值减去beginfields字段值得到时间差值
场景3： 提交流程时校验结束时间必须大于开始时间，否则不允许流程提交
实现方式： 代码块插入
function checkCustomize(){
var state= cus_CompareTime("field31", "field32");
if(!state){
("结束时间必须大于开始时间");
return false;
}
return true;
} 封装方法：cus_CompareTime(timefield1, timefield2)
* @param {timefield1} 字段1(开始时间)
* @param {timefield2} 字段2(结束时间)
* @return 返回true表示timefield2较大，false表示timefield1较大或相等
* 注：timefield1/timefield2结构，可为单独日期字段、单独时间字段、日期+时间组合字段(以英文逗号隔开);日期字段空值默认取今天，时间字段空值默认为00:00
场景4： E8表单字段中没有单选框（Radio样式），如何实现单选框？将选择框字段转换成单选框显示/编辑
实现方式：代码块插入
jQuery(document).ready(function(){
cus_ConvertSelectToRadio("field41");
});
封装方法：cus_ConvertSelectToRadio(fieldids)
* @param {fields}字段id集合，以逗号隔开
* 注:转换后可能不支持联动功能，只是转换样式显示/编辑 场景5： 根据选择框值不同控制明细区域的显示及隐藏
实现方式：
步骤一：设计器明细所在单元格/行设置自定义属性name:_detailarea
步骤二：代码块插入
jQuery(document).ready(function(){
var selectObj = jQuery("#field51");
var controlDetailFun = function(vthis){
if(jQuery(vthis).val() == "1")
cus_HideAreaByName("_detailarea"); //封装的根据name属性隐藏区域方法
else
cus_ShowAreaByName("_detailarea"); //封装的根据name属性显示区域方法
}
opertyChange(controlDetailFun);
controlDetailFun(selectObj[0]);
}); 场景6： 根据选择框值不同控制明细列的隐藏/显示
实现方式：
步骤一：需要隐藏的列设置列自定义属性class:_detailcolumn
步骤二：代码块插入
jQuery(document).ready(function(){
var trifieldid = "field10793"; //触发选择框字段ID
var dynEvent = function(){
var fieldval = cus_getFieldValue(trifieldid);
if(fieldval === "2")
cus_ControlDetailColumnByClass("_detailcolumn", 1);
else
cus_ControlDetailColumnByClass("_detailcolumn", 2);
}
jQuery("#"+trifieldid).bindPropertyChange(dynEvent); jQuery("input[name=indexnum0]").bindPropertyChange(dynEvent);//添加明细行时联动，0代表明细表1
dynEvent();//页面加载联动
});
封装接口：cus_ControlDetailColumnByClass(cusclassname, status)
* @param {cusclassname} 列自定义class属性
* @param {status} 1为显示，2为隐藏
场景7： 当满足某条件时，提交流程验证指定字段必填
实现方式：代码块插入
function checkCustomize(){
if(jQuery("#field10793").val() == "1"){ var state = cus_verifyExistNullField("field13031,field13032", "字段未填写"); //封装的校验是否存在空值字段方法
if(state) return false;
}
return true;
}
场景8： 根据字段ID，直接获取字段对应值
封装接口：cus_getFieldValue(fieldid)
* @param {fieldid} 字段ID
* @return 字段对应值
* 注：支持文本、多行文本框、浏览框(ID值)、选择框、check框(选中为1未选中为0)
场景9： 给文本类型字段赋值
封装接口：cus_setInputFieldValue(fieldid, fieldvalue)
* 给文本字段赋值，支持只读/编辑/必填情况
* @param {fieldid} 字段ID
* @param {fieldvalue}字段应赋的值
以上场景参考使用方法：
一、下载附件文件customPublicFun_文件放入应用服务器ecology/workflow/exceldesign/js目录下；
二、模板代码块中增加引用； 三、参考样例，按照业务需要调整字段ID等参数；
注：从E8+KB81001611版本后可免去步骤1及步骤2，标准产品涵盖引用；
样例中所有以cus_开头的方法都封装在附件文件中，内含参数详细说明；后续我们会不断完善接口方法；
三、CSS块分享
场景1： 主表占比为百分比时，默认为屏幕总宽95%，如何调整总占比宽度(模板根据屏幕自适应同时控制总宽度)
代码块插入CSS样式
场景2： 主表浏览按钮字段默认为210px，如何自定义控制浏览按钮宽度
步骤一、在需要调整的浏览按钮字段所在单元格增加自定义属性class: cusbrowwidth
步骤二、代码块style标签内增加CSS内容
.cusbrowwidth .e8_os{min-width:130px !important;}
场景3： 明细按钮固定为单元格右侧显示，如何居左显示
代码块style标签内增加CSS内容
.detailButtonDiv{float:left !important; text-align:left !important;} 场景4： 单个模板上传Logo后到服务器成为独立图片，如何设置统一图片便于后续快速替换Logo
步骤一、在需要插入Logo的单元格增加自定义属性class:logocell
步骤二、代码块style标签内增加CSS内容
.logocell{background-image:url(/logoimage/) !important;background-repeat:no-repeat;height:100%;}
根据上述图片路径，将图片拷贝至应用服务器目录中；后续切换Logo替换此图片即可
四、联系方式
您在使用表单设计器对表单进行二次开发遇到困难时可以直接联系我们；
也欢迎大家能够将您在项目上遇到的场景反馈给我们，以便于我们完善接口方法库。
联系人：柳直阳 王成才
联系方式：内部留言、EMessage、电话等
2023年6月21日发(作者：)
关于流程表单设计器自定义开发及常见场景方案分享
一、表单设计器模板如何自定义开发
表单设计器可设置自定义属性以及插入代码块，二者相辅结合、灵活运用，可实现多样化客户需求
自定义属性分为：行自定义属性(绑定在table布局tr行标签上)、单元格自定义属性(绑定在table布局td标签子元素div上)、列自定义属性(绑定在明细table此列所有td标签上)；
代码块可填写 Script代码块、Style样式块及直接对JS/CSS文件的引用；
二、常用开发场景实现
场景1： 控制日期字段选择范围，比如费用产生日期只能选择当前日期往前十天至今天，否则不允许流程提交
实现方式: 代码块插入
封装方法： cus_judgeDateRange(fieldid, floorday, upperday)
* @param {fieldid} 日期字段ID
* @param {floorday} 下限天数(与当前日期比较)，空值代表不限制
* @param {upperday} 上限天数(与当前日期比较)，空值代表不限制
* @return 返回true表示在范围内，false表示超出限定范围或日期置为空
场景2： 实时计算两个日期时间字段组合相差小时数，并赋值给另一字段
实现方式：代码块插入
jQuery(document).ready(function(){
var bindFun = function(){
var diffhours = cus_CalTimeDiff("field31,field32", "field35,field36", 2);
jQuery("[name=field39]").val(diffhours);
}
jQuery("#field31,#field32,#field35,#field36").bindPropertyChange(bindFun);
bindFun();
}); 封装方法：cus_CalTimeDiff(begfields, endfields, unit, digit)
* @param {begfields} 开始时间
* @param {endfields} 结束时间
* @param {unit} 计量结果单位1(天)、2(小时)、3(分钟)、4(秒)，默认为天
* @param {digit} 计算结果保留小数位数，默认2位小数
* @return 以endfields字段值减去beginfields字段值得到时间差值
场景3： 提交流程时校验结束时间必须大于开始时间，否则不允许流程提交
实现方式： 代码块插入
function checkCustomize(){
var state= cus_CompareTime("field31", "field32");
if(!state){
("结束时间必须大于开始时间");
return false;
}
return true;
} 封装方法：cus_CompareTime(timefield1, timefield2)
* @param {timefield1} 字段1(开始时间)
* @param {timefield2} 字段2(结束时间)
* @return 返回true表示timefield2较大，false表示timefield1较大或相等
* 注：timefield1/timefield2结构，可为单独日期字段、单独时间字段、日期+时间组合字段(以英文逗号隔开);日期字段空值默认取今天，时间字段空值默认为00:00
场景4： E8表单字段中没有单选框（Radio样式），如何实现单选框？将选择框字段转换成单选框显示/编辑
实现方式：代码块插入
jQuery(document).ready(function(){
cus_ConvertSelectToRadio("field41");
});
封装方法：cus_ConvertSelectToRadio(fieldids)
* @param {fields}字段id集合，以逗号隔开
* 注:转换后可能不支持联动功能，只是转换样式显示/编辑 场景5： 根据选择框值不同控制明细区域的显示及隐藏
实现方式：
步骤一：设计器明细所在单元格/行设置自定义属性name:_detailarea
步骤二：代码块插入
jQuery(document).ready(function(){
var selectObj = jQuery("#field51");
var controlDetailFun = function(vthis){
if(jQuery(vthis).val() == "1")
cus_HideAreaByName("_detailarea"); //封装的根据name属性隐藏区域方法
else
cus_ShowAreaByName("_detailarea"); //封装的根据name属性显示区域方法
}
opertyChange(controlDetailFun);
controlDetailFun(selectObj[0]);
}); 场景6： 根据选择框值不同控制明细列的隐藏/显示
实现方式：
步骤一：需要隐藏的列设置列自定义属性class:_detailcolumn
步骤二：代码块插入
jQuery(document).ready(function(){
var trifieldid = "field10793"; //触发选择框字段ID
var dynEvent = function(){
var fieldval = cus_getFieldValue(trifieldid);
if(fieldval === "2")
cus_ControlDetailColumnByClass("_detailcolumn", 1);
else
cus_ControlDetailColumnByClass("_detailcolumn", 2);
}
jQuery("#"+trifieldid).bindPropertyChange(dynEvent); jQuery("input[name=indexnum0]").bindPropertyChange(dynEvent);//添加明细行时联动，0代表明细表1
dynEvent();//页面加载联动
});
封装接口：cus_ControlDetailColumnByClass(cusclassname, status)
* @param {cusclassname} 列自定义class属性
* @param {status} 1为显示，2为隐藏
场景7： 当满足某条件时，提交流程验证指定字段必填
实现方式：代码块插入
function checkCustomize(){
if(jQuery("#field10793").val() == "1"){ var state = cus_verifyExistNullField("field13031,field13032", "字段未填写"); //封装的校验是否存在空值字段方法
if(state) return false;
}
return true;
}
场景8： 根据字段ID，直接获取字段对应值
封装接口：cus_getFieldValue(fieldid)
* @param {fieldid} 字段ID
* @return 字段对应值
* 注：支持文本、多行文本框、浏览框(ID值)、选择框、check框(选中为1未选中为0)
场景9： 给文本类型字段赋值
封装接口：cus_setInputFieldValue(fieldid, fieldvalue)
* 给文本字段赋值，支持只读/编辑/必填情况
* @param {fieldid} 字段ID
* @param {fieldvalue}字段应赋的值
以上场景参考使用方法：
一、下载附件文件customPublicFun_文件放入应用服务器ecology/workflow/exceldesign/js目录下；
二、模板代码块中增加引用； 三、参考样例，按照业务需要调整字段ID等参数；
注：从E8+KB81001611版本后可免去步骤1及步骤2，标准产品涵盖引用；
样例中所有以cus_开头的方法都封装在附件文件中，内含参数详细说明；后续我们会不断完善接口方法；
三、CSS块分享
场景1： 主表占比为百分比时，默认为屏幕总宽95%，如何调整总占比宽度(模板根据屏幕自适应同时控制总宽度)
代码块插入CSS样式
场景2： 主表浏览按钮字段默认为210px，如何自定义控制浏览按钮宽度
步骤一、在需要调整的浏览按钮字段所在单元格增加自定义属性class: cusbrowwidth
步骤二、代码块style标签内增加CSS内容
.cusbrowwidth .e8_os{min-width:130px !important;}
场景3： 明细按钮固定为单元格右侧显示，如何居左显示
代码块style标签内增加CSS内容
.detailButtonDiv{float:left !important; text-align:left !important;} 场景4： 单个模板上传Logo后到服务器成为独立图片，如何设置统一图片便于后续快速替换Logo
步骤一、在需要插入Logo的单元格增加自定义属性class:logocell
步骤二、代码块style标签内增加CSS内容
.logocell{background-image:url(/logoimage/) !important;background-repeat:no-repeat;height:100%;}
根据上述图片路径，将图片拷贝至应用服务器目录中；后续切换Logo替换此图片即可
四、联系方式
您在使用表单设计器对表单进行二次开发遇到困难时可以直接联系我们；
也欢迎大家能够将您在项目上遇到的场景反馈给我们，以便于我们完善接口方法库。
联系人：柳直阳 王成才
联系方式：内部留言、EMessage、电话等
发布评论