历史版本2 :[App]JS实现移动端连续读卡 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

报表服务器版本
App 版本
11.0.2V11.0.64

1.2 应用场景

填报时如果需要需要连续读卡录入数据,那么每扫完一次提交后,又要去点击控件的扫码按钮重新打开扫码界面,非常影响录入数据的效率。

针对上述问题,新增一个连续扫码的 JS 方法nfcCode(),在填报事件中添加该方法即可在读卡完一次提交后,自动进入下一个扫描,效果如下图所示:


1.3 方法介绍

新增的nfcCode()方法使用的场景和事件写法如下表所示:

触发方式模板场景
事件写法
获取控件触发决策报表内文本控件

var self=_g().options.form.getWidgetByName("name")

self.nfcCode();

var self=this.options.form.getWidgetByName("name")

self.nfcCode();

决策报表参数面板文本控件var self=_g().options.form.getWidgetByName("name")

self.nfcCode();

var self=this.options.form.getWidgetByName("name")

self.nfcCode();

var self=_g().parameterEI.getWidgetByName("name")

self.nfcCode();

填报单元格文本控件

var self = contentPane.getWidgetByCell("name"); 

self.nfcCode();

填报参数面板文本控件

var self=contentPane.parameterEI.getWidgetByName("name")

self.nfcCode();

单个控件直接触发所有场景this.nfcCode();

1.4 注意事项

1)实现 NFC读卡,需要满足以下要求项:

序号要求项
详情
1版本适配
  • 详情见本文 1.1 节

  • 只有 App 支持 NFC 读卡

2使用范围填报模板、参数面板、表单body
3控件类型文本控件
4移动设备支持 NFC 且开放 NFC 功能的移动端设备
5NFC
  • NFC 支持  NDEF 格式的 NFC标签

  • 配置好 NFC 卡片信息

6开启NFC读卡输入在「文本控件>控件设置>移动端」中,必选项为「NFC读卡输入」


2)如果要显示读卡按钮,需要在填报页面设置处勾选「直接显示控件」,如下图所示:

1603856855567652.png

2. 示例编辑

下面给出一个多控件连续 NFC 读卡填报录入数据的例子,介绍下实现连续扫码的操作步骤。

2.1 设计表格

新建普通报表,设计填报表格,B1 和 B2 单元格添加文本控件,如下图所示:

Snag_275d7a59.png

2.2 设置填报属性

设计器菜单栏点击「模板>报表填报属性」,新增内置 SQL 提交,具体设置如下图所示:

2022-05-17_14-48-33.jpg

2.3 添加事件

1)选择 B1 单元格,给文本控件添加一个「编辑后」事件,如下图所示:

2022-05-17_14-50-53.jpg

该代码的作用是在 B1 单元格扫码后,自动打开 B2 单元格的扫码界面,JavaScript 代码如下:

var a = contentPane.getWidgetByCell("B2"); //B1单元格读卡后获取B2单元格a.nfcCode();//B2单元格自动打开读卡界面

2)设计器菜单栏点击「模板>模板Web属性」,在「填报页面设置」中添加一个「填报成功」事件,如下图所示:

操作要点:需要「勾选直接显示控件」,这样可以看到扫码按钮。

2022-05-17_14-54-42.jpg

该代码的作用是在提交成功后,自动打开 B1 单元格的扫码界面,JavaScript 代码如下:

var b = contentPane.getWidgetByCell("B1"); //填报提交成功后,获取B1单元格b.nfcCode();//B1单元格自动打开读卡界面

2.4 效果预览

移动端预览模板,连续扫码效果如下图所示:

2022-05-17_15-00-15.gif

最终录入的数据如下图所示:

1603854827464341.png

3. 模板下载编辑

已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\form\移动端连续扫码-phone.cpt

点击下载模板:移动端连续读卡-phone.cpt