［通用］JS實現行動端連續掃碼

1.1 版本

1.2 應用場景

填報時如果需要需要連續掃碼錄入資料，那麼每掃完一次提交後，又要去點選元件的掃碼按鈕重新開啟掃碼介面，非常影響錄入資料的效率。

針對上述問題，新增一個連續掃碼的 JS 方法scanCode()，在填報事件中新增該方法即可在掃完一次提交後，自動進入下一個掃描，效果如下圖所示：

1.3 方法介紹

新增的scanCode()方法使用的場景和事件寫法如下表所示：

注1：目前只有正文元件支援設定連續掃碼。

注2：目前只支援 App 端和 H5 整合環境下連續掃碼，不支援其他 H5 場景。

注3：必須開啟正文元件的掃碼功能，即行動端進階屬性中必須設定為支援手動和掃碼輸入或者僅支援掃碼輸入。

注4：如果要顯示掃碼按鈕，需要在填報頁面設定處勾選直接顯示元件，如下圖所示：

下面給出一個多元件連續掃碼填報錄入資料的例子，介紹下實現連續掃碼的操作步驟。

2.1 設計表格

建立普通報表，設計填報表格，B1 和 B2 儲存格新增正文元件，如下圖所示：

2.2 設定填報屬性

設計器菜單欄點選範本>報表填報屬性，新增內建 SQL 提交，具體設定如下圖所示：

2.3 新增事件

1）選擇 B1 儲存格，給正文元件新增一個編輯後事件，如下圖所示：

該程式碼的作用是在 B1 儲存格掃碼後，自動開啟 B2 儲存格的掃碼介面，JavaScript 程式碼如下：

var a = contentPane.getWidgetByCell("B2"); //B1儲存格掃碼後獲取B2儲存格
a.scanCode();//B2儲存格自動開啟掃碼介面

2）設計器菜單欄點選範本>範本Web屬性，在填報頁面設定中新增一個填報成功事件，如下圖所示：

注：需要勾選直接顯示元件，這樣可以看到掃碼按鈕。

該程式碼的作用是在提交成功後，自動開啟 B1 儲存格的掃碼介面，JavaScript 程式碼如下：

var b = contentPane.getWidgetByCell("B1"); //填報提交成功後，獲取B1儲存格
b.scanCode();//B1儲存格自動開啟掃碼介面

2.4 效果預覽

行動端預覽範本，連續掃碼效果如下圖所示：

最終錄入的資料如下圖所示：

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\form\行動端連續掃碼-phone.cpt

點選下載範本：行動端連續掃碼-phone.cpt

點選下載QRCODE資源包：二維碼.zip