1. 描述
1.1 问题描述
大部分填报模板都是cpt格式,其设置和功能要优于frm。如果对页面布局有较高的自由度需求,可以考虑使用frm来做。然而,frm不支持 cpt 里的填报预览,那么要如何实现填报功能呢?
1.2 解决思路
1)用户可以通过添加按钮控件的提交入库事件来实现决策报表填报功能。
2)用户可以通过添加网页框控件插入报表来实现决策报表填报功能。
2. 示例一
通过添加按钮控件的提交入库事件来实现决策报表填报功能
2.1 模板设计
2.1.1 报表内容设计
新建决策报表,报表设计如下图所示:
左侧一列为标签控件,右侧一列控件的设置如下:
描述 | 控件类型 | 控件名称 | 控件值 | 数据字典 |
---|---|---|---|---|
姓名 | 文本控件 | name | if(len($fine_username)=0,"admin",$fine_username) | 无 |
请假类型 | 下拉框 | type | 无 | 事假,年假,病假 |
开始时间 | 日期控件 | startday | now() | 无 |
结束时间 | 日期控件 | endday | now() | 无 |
请假天数 | 文本控件 | day | DATEDIF($startday,$endday,"D")+1 | 无 |
请假理由 | 文本域控件 | reason | 无 | 无 |
提交 | 按钮控件 | submit | 无 | 无 |
2.1.2 移动端样式调整
调整决策报表的宽度高度,同时取消手机端重布局,如下图所示:
2.2 添加提交入库事件
选中 submit 按钮控件,点击控件设置>事件,添加点击事件
新增提交入库事件,提交入库的表为qingjia,对应值如下图所示:
注:值前面有 $ 符号,代表引用对应参数控件的值。
2.3 设置回调函数
使用按钮设置提交入库操作时,默认是没有成功和失败提示的。需要设置一下回调函数,来提示用户填报成功与否。如下图所示:
JavaScript 代码如下:
if (fr_submitinfo.success) {
FR.Msg.toast('提交成功');
} else {
FR.Msg.toast('提交失败,错误信息为:' + fr_submitinfo.failinfo);
}
注:success 只表示后台程序执行没有异常,最终入库结果会受到设置的影响,可能和预期的不一致。
2.4 效果预览
2.4.1 PC 端
保存模板,点击预览,效果如下图所示:
2.4.2 移动端
1)App
2)HTML5
3. 示例二
通过添加网页框控件插入报表来实现决策报表填报功能。
注:移动端不支持网页框控件
3.1 安装插件
安装网页框控件插件,具体操作步骤请参考:网页框控件
3.2 添加网页框控件
选择控件>网页框控件,拖拽到决策报表body框,新添网页框控件 rHIframe0 ,如下图所示:
3.3 设置地址和参数
选中网页框控件,点击控件设置>属性>地址和参数,设置对应的模板(模板路径或网络模板),如下图所示
注:模板 URL 尾部必须添加参数 &op=write(以填报预览)。
3.4 效果预览
保存模板,选择PC端预览,效果如下图所示: