ecology关于流程表单设计器自定义开发及常见场景方案分享.docx

ecology关于流程表单设计器自定义开发及常见场景方案分享.docx

《ecology关于流程表单设计器自定义开发及常见场景方案分享.docx》由会员分享，可在线阅读，更多相关《ecology关于流程表单设计器自定义开发及常见场景方案分享.docx（7页珍藏版）》请在冰豆网上搜索。

ecology关于流程表单设计器自定义开发及常见场景方案分享

关于流程表单设计器自定义开发及常见场景方案分享

一、表单设计器模板如何自定义开发

表单设计器可设置自定义属性以及插入代码块，二者相辅结合、灵活运用，可实现多样化客户需求

自定义属性分为：

行自定义属性（绑定在table布局tr行标签上）、单元格自定义属性（绑定在table布局td标签子元素div上）、列自定义属性（绑定在明细table此列所有td标签上）；

代码块可填写Script代码块、Style样式块及直接对JS/CSS文件的引用；

二、常用开发场景实现

场景1：

控制日期字段选择范围，比如费用产生日期只能选择当前日期往前十天至今天，否则不允许流程提交

实现方式:

代码块插入

functioncheckCustomize（）{//流程提交校验方法

  varisconform=cus_judgeDateRange（"field11",-10,0）;//封装校验日期范围方法

    if（!

isconform）{

        window.top.Dialog.alert（"费用产生日期超出范围"）;

        returnfalse;

     }

    returntrue;

}

封装方法：

cus_judgeDateRange（fieldid,floorday,upperday）

*@param{fieldid}日期字段ID

*@param{floorday}下限天数（与当前日期比较），空值代表不限制

*@param{upperday}上限天数（与当前日期比较），空值代表不限制

*@return返回true表示在范围内，false表示超出限定范围或日期置为空

场景2：

 实时计算两个日期时间字段组合相差小时数，并赋值给另一字段

实现方式：

代码块插入

jQuery（document）.ready（function（）{

    varbindFun=function（）{

        vardiffhours=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：

 提交流程时校验结束时间必须大于开始时间，否则不允许流程提交

实现方式：

代码块插入

functioncheckCustomize（）{

    varstate=cus_CompareTime（"field31","field32"）;

    if（!

state）{

        window.top.Dialog.alert（"结束时间必须大于开始时间"）;

        returnfalse;

    }

  returntrue;

}

封装方法：

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（）{

    varselectObj=jQuery（"#field51"）;

    varcontrolDetailFun=function（vthis）{

        if（jQuery（vthis）.val（） =="1"）

            cus_HideAreaByName（"_detailarea"）;    //封装的根据name属性隐藏区域方法

        else

            cus_ShowAreaByName（"_detailarea"）;    //封装的根据name属性显示区域方法

    }

    selectObj.bindPropertyChange（controlDetailFun）;

    controlDetailFun（selectObj[0]）;

}）;

场景6：

 根据选择框值不同控制明细列的隐藏/显示

实现方式：

步骤一：

需要隐藏的列设置列自定义属性class:

_detailcolumn

步骤二：

代码块插入

jQuery（document）.ready（function（）{

    vartrifieldid="field10793";    //触发选择框字段ID

    vardynEvent=function（）{

        varfieldval=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：

 当满足某条件时，提交流程验证指定字段必填

实现方式：

代码块插入

functioncheckCustomize（）{

    if（jQuery（"#field10793"）.val（）=="1"）{

        varstate=cus_verifyExistNullField（"field13031,field13032","字段未填写"）;    //封装的校验是否存在空值字段方法

        if（state）    returnfalse;

    }

    returntrue;

}

场景8：

根据字段ID，直接获取字段对应值

封装接口：

cus_getFieldValue（fieldid）

 *@param{fieldid}字段ID

 *@return字段对应值

 *注：

支持文本、多行文本框、浏览框（ID值）、选择框、check框（选中为1未选中为0）

场景9：

 给文本类型字段赋值

封装接口：

cus_setInputFieldValue（fieldid,fieldvalue）

 *给文本字段赋值，支持只读/编辑/必填情况

 *@param{fieldid}字段ID

 *@param{fieldvalue}字段应赋的值 

以上场景参考使用方法：

一、下载附件文件customPublicFun_wev8.js文件放入应用服务器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/logo.png）!

important;background-repeat:

no-repeat;height:

100%;}

根据上述图片路径，将图片拷贝至应用服务