泛微OA开发技巧流程表单HTML扩展开发.docx
《泛微OA开发技巧流程表单HTML扩展开发.docx》由会员分享，可在线阅读，更多相关《泛微OA开发技巧流程表单HTML扩展开发.docx（17页珍藏版）》请在冰豆网上搜索。
泛微OA开发技巧流程表单HTML扩展开发
泛微OA【开发技巧】流程表单HTML扩展开发（总13页）
仅限阅读请勿传播
当您阅读本方案时，即表示您同意不传播本方案的所有内容
流程表单HTML设计器
实现自定义控制表单元素的长度
及其他常见需求实现案例
版本v0.2
文档主题（Title）
【开发技巧】流程表单HTML扩展开发（推荐：
设计器实现设置表单元素的长度）
作者（Author）
胡顺
审批者（ToBeApprovedBy）
说明（Comments）
文件名称（FileName）
【开发技巧】流程表单HTML扩展开发（推荐：
设计器实现设置表单元素的长度）.doc
序号
日期
版本
变更说明
修改人
注释
2017-12-19
0.1
创建目录功能点
刘泰宏
2018-2-1
0.2
完善各模块内容
胡顺
1.说明
难度：
★★★☆☆
预计时间：
1小时
涉及代码开发：
有
目标需求：
此案例适用项目人员通过流程表单HTML设计器实现自定义控制表单元素的长度。
当不得不这么做的时候，请参考该方案进行适当调整。
●可以按照客户要求对时间流程表单进行适当改造。
流程表单上面布局、校验、样式等功能
可以jQuery的方式进行适当改造。
知识点：
基本信息：
背景知识：
1、在阅读本教程之前,需具备html和JavaScript基本知识。
2、在阅读本教程之前,需具备jsp页面读写的基本能力。
最终效果：
●通过流程表单HTML设计器实现自定义控制表单元素的长度
●实现隐藏表单原始边框
●实现表单元素未输入内容时悬浮提醒的效果
●html签字节点格式调整（内容在左，署名在右）
●html签字节点按时间排序并调整格式
2.准备工作
1、准备一台和正式环境一致操作系统的服务器。
3.（推荐）实现自主设置表单元素的长度
将附件提供的width.css上传到服务器的/css/width/目录下面。
3.1.支持PC端及手机端HMTL模式流程表单（单个流程）
1.在代码块中单个流程引入css样式文件
如（如图1）。
（图1）
2.在需要自主设置长度单元格式设置class例如图2里面的classw50表示设置这个框子里面的input长度为50px。
如果设置为w100则限制长度为100px，具体效果如图3
（图2）
（图3）
3.2.HMTL模式流程引入样式文件（一劳永逸）
1.新建流程界面流程引入css样式文件
需要修改ecology/workflow/request/AddRequestIframe.jsp文件。
如（如图4）。
（图4）
2.查看及处理流程界面流程引入css样式文件需要修改ecology/workflow/request/ManageRequestNoFormIframe.jsp。
如（如图4）。
（图5）
3.手机端流程界面流程引入css样式文件需要修改ecology/mobile/plugin/1/client.jsp。
如（如图6）。
（图6）
4.实现隐藏表单元素表单边框的需求
4.1.代码块
4.2.实现效果
例：
原生页面
（图7）
开发修改后：
5.实现表单未输入内容时悬浮提醒的效果
此方法只适用于输入框提示。
5.1.代码块
1.在代码块中插入代码
$（document）.ready（function（）{
inputTipText（）;
}）;
functioninputTipText（）{
$（"div[class*=holder]input"）
.each（function（）{
if（$（this）.val（）==""）{
varoldVal=$（this）.parent（".holder"）.attr（"data-holder"）;
if（$（this）.val（）==""）{$（this）.attr（"value",oldVal）.css（{"color":
"#888"}）;}
$（this）
.css（{"color":
"#888"}）
.focus（function（）{
if（$（this）.val（）!
=oldVal）{$（this）.css（{"color":
"#000"}）}else{$（this）.val（""）.css（{"color":
"#888"}）}
}）
.blur（function（）{
if（$（this）.val（）==""）{$（this）.val（oldVal）.css（{"color":
"#888"}）}
}）
.keydown（function（）{$（this）.css（{"color":
"#000"}）}）;
}
}）;
}
2.在需要自主设置提示内容的单元格设置class名为holder（如果属性名称class已经存在，需在原有名称后空格后添加holder），以及设置自定义属性为提示内容data-holder的值，例如图8里面的classw50表示设置这个输入框的提示内容为“请输入标题”，如图8。
注：
class名为holder，自定义属性名为data-holder，不可更改。
具体效果如图9
（图8）
5.2.实现效果
例：
原生界面
开发修改后：
（图9）
6.实现提交时校验身份证号码的需求
6.1.代码块
jQuery（document）.ready（function（）{
checkCustomize=function（）{
varissubmit=false;
varcard=jQuery（"#field11365"）.val（）;
issubmit=IdentityCodeValid（card）;
returnissubmit;
};
}）;
functionIdentityCodeValid（code）{
varcity={11:
"北京",12:
"天津",13:
"河北",14:
"山西",15:
"内蒙古",21:
"辽宁",22:
"吉林",23:
"黑龙江",31:
"上海",32:
"江苏",33:
"浙江",34:
"安徽",35:
"福建",36:
"江西",37:
"山东",41:
"河南",42:
"湖北",43:
"湖南",44:
"广东",45:
"广西",46:
"海南",50:
"重庆",51:
"四川",52:
"贵州",53:
"云南",54:
"西藏",61:
"陕西",62:
"甘肃",63:
"青海",64:
"宁夏",65:
"新疆",71:
"台湾",81:
"香港",82:
"澳门",91:
"国外"};
vartip="";
varpass=true;
if（!
code||!
/^\d{6}（18|19|20）\d{2}（0[1-9]|1[12]）（0[1-9]|[12]\d|3[01]）\d{3}（\d|X）$/i.test（code））{
tip="身份证号格式错误";
pass=false;
}
elseif（!
city[code.substr（0,2）]）{
tip="地址编码错误";
pass=false;
}
else{
//18位身份证需要验证最后一位校验位
if（code.length==18）{
code=code.split（''）;
//∑（ai×Wi）（mod11）
//加权因子
varfactor=[7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
//校验位
varparity=[1,0,'X',9,8,7,6,5,4,3,2];
varsum=0;
varai=0;
varwi=0;
for（vari=0;i<17;i++）
{
ai=code[i];
wi=factor[i];
sum+=ai*wi;
}
varlast=parity[sum%11];
if（parity[sum%11]!
=code[17]）{
tip="身份证号码校验位错误";
pass=false;
}
}
}
if（!
pass）window.top.Dialog.alert（"提醒：
"+tip+"!
"）;
returnpass;
}
6.2.实现效果
7.实现某个check框设置为必填的需求
7.1.代码块
jQuery（document）.ready（function（）{
checkCustomize=function（）{
varissubmit=false;
if（jQuery（"#field11359"）.attr（"checked"））{
window.top.Dialog.alert（"提醒：
选择框已经选中!
"）;
issubmit=true;
}else{
window.top.Dialog.alert（"提醒：
选择框未选择!
"）;
}
returnissubmit;
}
}）;
8.html打印时解决签字意见多个空格问题
8.1.代码块
将以下代码块放在ecology\workflow\request\PrintRequest.jsp文件中，如下图：
jQuery（document）.ready（function（）{
jQuery（".span_mc"）.each（function（）{
vara=jQuery.trim（jQuery（this）.html（））;
//console.log（"====>"+a）;
if（""==a）{
$（this）.remove（）;
//删除全部br
jQuery（".span_mc"）.next（"br"）.remove（）;
//删除空签字意见的下一个br
//jQuery（".span_mc"）.parent（）.find（"br"）.remove（）;
}
}）;
}）;
8.2.实现效果
例：
原生界面
删除空的签字意见和一个换行符
删除空的签字意见和全部换行符
9.（推荐）多内容区域多节点签字意见排序
9.1.多个签字节点按时间先后正序排序
1.将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp（已办）和ecology\workflow\request\WorkflowManageRequestHtml.jsp（待办），文件中，如下图：
2.在需要自主设置排序的单元格设置class名为remark（如果属性名称class已经存在，需在原有名称后空格后添加remark）。
注：
class名为remark，不可更改。
具体效果如下图：
9.2.多个签字节点按时间先后倒序排序
1.将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp（已办）和ecology\workflow\request\WorkflowManageRequestHtml.jsp（待办）文件中，如下图：
（图2）
2在需要自主设置排序的单元格设置class名为remark（如果属性名称class已经存在，需在原有名称后空格后添加remark）。
注：
class名为remark，不可更改。
具体效果如下图：
9.3.实现效果
按时间先后顺序排序，如下图
10.（推荐）html表单签字节点格式调整
10.1.html签字节点格式调整为“内容居左，署名居右”
以下调整的格式为：
内容在居左，署名居右：
将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp（已办）和ecology\workflow\request\WorkflowManageRequestHtml.jsp（待办）、ecology\workflow\request\PrintRequest.jsp（打印），文件中（可根据需求只添加其中某一文件代码）
如下图：
10.2.实现效果
原生界面:
修改后：
内容居左，署名居右；
11.多内容区域签字签字意见按时间排序
11.1.按时间先后顺序排序并调整格式
将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp（已办）和ecology\workflow\request\WorkflowManageRequestHtml.jsp（待办），文件中
效果如下：
11.2.按时间先后倒序排序并调整格式
将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp（已办）和ecology\workflow\request\WorkflowManageRequestHtml.jsp（待办），文件中