关于流程表单设计器自定义开发及常见场景方案分享
一、表单设计器模板如何自定义开发
表单设计器可设置自定义属性以及插入代码块，二者相辅结合、灵活运用，可实现多样化客户需求
自定义属性分为：行自定义属性(绑定在table布局tr行标签上)、单元格自定义属性(绑定在table布局td标签子元素div上)、列自定义属性(绑定在明细table此列所有td标签上)；
代码块可填写 Script代码块、Style样式块及直接对JS/CSS文件的引用；
二、常用开发场景实现
场景1： 控制日期字段选择范围，比如费用产生日期只能选择当前日期往前十天至今天，否则不允许流程提交
实现方式: 代码块插入
<script type="text/javascript">
function checkCustomize(){//流程提交校验方法
  var isconform = cus_judgeDateRange("field11", -10, 0);//封装校验日期范围方法
    if(!isconform){
        p.Dialog.alert("费用产生日期超出范围");
        return false;
表单设计器怎么做     }
    return true;
}
</script>
封装方法： 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){
        p.Dialog.alert("结束时间必须大于开始时间");
        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属性显示区域方法
    }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。