反馈已提交

网络繁忙

[通用]JS实现移动端连续扫码

  • 文档创建者:Leo.Tsai
  • 历史版本:9
  • 最近更新:RosieY 于 2023-01-06
  • 1. 概述

    1.1 版本

    报表服务器版本
    App 版本HTML5 移动端展现插件版本
    11.0V11.0V11.0

    1.2 应用场景

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

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

    1603850101251752.gif

    1.3 方法介绍

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

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

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

    self.scanCode();

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

    self.scanCode();

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

    self.scanCode();

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

    self.scanCode();

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

    self.scanCode();

    填报单元格文本控件

    var self = _g().getWidgetByCell("A1"); 

    self.scanCode();

    填报参数面板文本控件

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

    self.scanCode();

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

    注1:目前只有文本控件支持设置连续扫码。

    注2:目前只支持 App 端和 H5 集成环境下连续扫码,不支持其他 H5 场景。

    注3:必须开启文本控件的扫码功能,即移动端高级属性中必须设置为支持手动和扫码输入或者仅支持扫码输入

    2022-01-24_14-43-44.png

    注4:如果要显示扫码按钮,需要在填报页面设置处勾选「直接显示控件」,如下图所示:

    1603856855567652.png

    2. 示例

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

    2.1 设计表格

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

    Snag_275d7a59.png

    2.2 设置填报属性

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

    1603852982582260.png

    2.3 添加事件

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

    1603853613594298.png

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

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

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

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

    1603856694725685.png

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

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

    2.4 效果预览

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

    1603854755200919.gif

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

    1603854827464341.png

    3. 模板下载

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

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

    点击下载二维码资源包:二维码.rar

    附件列表


    主题: 移动端应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持