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

1、ecology关于流程表单设计器自定义开发及常见场景方案分享关于流程表单设计器自定义开发及常见场景方案分享一、表单设计器模板如何自定义开发表单设计器可设置自定义属性以及插入代码块，二者相辅结合、灵活运用，可实现多样化客户需求自定义属性分为：行自定义属性(绑定在table布局tr行标签上)、单元格自定义属性(绑定在table布局td标签子元素div上)、列自定义属性(绑定在明细table此列所有td标签上)；代码块可填写 Script代码块、Style样式块及直接对JS/CSS文件的引用；二、常用开发场景实现场景1： 控制日期字段选择范围，比如费用产生日期只能选择当前日期往前十天至今天，否则不允

2、许流程提交实现方式: 代码块插入function checkCustomize()/流程提交校验方法var isconform = cus_judgeDateRange(field11, -10, 0);/封装校验日期范围方法if(!isconform)window.top.Dialog.alert(费用产生日期超出范围);return false;return true;封装方法： cus_judgeDateRange(fieldid, floorday, upperday)* param fieldid 日期字段ID* param floorday 下限天数(与当前日期比较)，空值代表不限

3、制* 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,

4、#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：提交流程时校验结束

5、时间必须大于开始时间，否则不允许流程提交实现方式： 代码块插入function checkCustomize()var state= cus_CompareTime(field31, field32);if(!state)window.top.Dialog.alert(结束时间必须大于开始时间);return false; return true;封装方法：cus_CompareTime(timefield1, timefield2)* param timefield1 字段1(开始时间)* param timefield2 字段2(结束时间)* return 返回true表示timefiel

6、d2较大，false表示timefield1较大或相等* 注：timefield1/timefield2结构，可为单独日期字段、单独时间字段、日期+时间组合字段(以英文逗号隔开);日期字段空值默认取今天，时间字段空值默认为00:00场景4： E8表单字段中没有单选框（Radio样式），如何实现单选框？将选择框字段转换成单选框显示/编辑实现方式：代码块插入jQuery(document).ready(function() cus_ConvertSelectToRadio(field41););封装方法：cus_ConvertSelectToRadio(fieldids)* param field

7、s字段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属性隐藏区域方法e

8、lsecus_ShowAreaByName(_detailarea);/封装的根据name属性显示区域方法selectObj.bindPropertyChange(controlDetailFun);controlDetailFun(selectObj0););场景6：根据选择框值不同控制明细列的隐藏/显示实现方式：步骤一：需要隐藏的列设置列自定义属性class:_detailcolumn步骤二：代码块插入jQuery(document).ready(function()var trifieldid = field10793;/触发选择框字段IDvar dynEvent = function(

9、)var fieldval = cus_getFieldValue(trifieldid);if(fieldval = 2)cus_ControlDetailColumnByClass(_detailcolumn, 1);elsecus_ControlDetailColumnByClass(_detailcolumn, 2);jQuery(#+trifieldid).bindPropertyChange(dynEvent);jQuery(inputname=indexnum0).bindPropertyChange(dynEvent);/添加明细行时联动，0代表明细表1dynEvent();/

10、页面加载联动);封装接口：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(s

11、tate)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字段应赋的值以上场景参考使用方法：一

12、、下载附件文件customPublicFun_wev8.js文件放入应用服务器ecology/workflow/exceldesign/js目录下；二、模板代码块中增加引用；三、参考样例，按照业务需要调整字段ID等参数；注：从E8+KB81001611版本后可免去步骤1及步骤2，标准产品涵盖引用； 样例中所有以cus_开头的方法都封装在附件文件中，内含参数详细说明；后续我们会不断完善接口方法；三、CSS块分享场景1： 主表占比为百分比时，默认为屏幕总宽95%，如何调整总占比宽度(模板根据屏幕自适应同时控制总宽度)代码块插入CSS样式.excelMainTablewidth:80% !impor

13、tant场景2： 主表浏览按钮字段默认为210px，如何自定义控制浏览按钮宽度步骤一、在需要调整的浏览按钮字段所在单元格增加自定义属性class: cusbrowwidth步骤二、代码块style标签内增加CSS内容.cusbrowwidth .e8_osmin-width:130px !important;场景3： 明细按钮固定为单元格右侧显示，如何居左显示代码块style标签内增加CSS内容.detailButtonDivfloat:left !important; text-align:left !important;场景4： 单个模板上传Logo后到服务器成为独立图片，如何设置统一图片便于后续快速替换Logo步骤一、在需要插入Logo的单元格增加自定义属性class:logocell步骤二、代码块style标签内增加CSS内容.logocellbackground-image:url(/logoimage/logo.png) !important;background-repeat:no-repeat;height:100%;根据上述图片路径，将图片拷贝至应用服务