SAP Fiori实现1:扫描二维码并放置在文本框中

2024-08-30

功能:

页面上显示文本框,点击文本框会打开摄像头扫描二维码,之后将二维码文本写进文本框中(获取二维码后10位文字)。
(二维码是 Abc1234567890)

4_1

XML:
1
2
3
4
5
6
7
8
9
10
11
<mvc:View controllerName="project2.controller.FirstView" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Page id="popage" title="{i18n>FirstViewTitle}">
<content>
<VBox id='vbox' class="sapUiSmallMargin">
<Text id="txtscan" width="50%" text="{i18n>txtscan}" class="sapUiSmallMarginBegin boldInpTxt" />
<Input id="inputscan" width="30%" editable="true" class="sapUiSmallMarginBegin boldInpTxt"/>
</VBox>
</content>
</Page>
</mvc:View>
Controller:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ndc/BarcodeScanner"
], function (Controller, BarcodeScanner) {
"use strict";

return Controller.extend("project2.controller.FirstView", {
/**
* Called when the worklist controller is instantiated.
* @public
*/
onInit: function () {
var oInput = this.getView().byId("inputscan");

oInput.onclick = function() {
if(oInput.getValue() == ""){
this.onBarcodeScan();
};

}.bind(this);
},

onBarcodeScan: function() {

BarcodeScanner.scan(
function (mResult) {
let prodOrderVal = mResult.text;
if(!mResult.cancelled && prodOrderVal){
this.getView().byId("inputscan").setValue(prodOrderVal.substring(prodOrderVal.length - 10).trim());
}

}.bind(this),
function (Error) {
let msg = "Scanning failed: " + Error;
sap.m.MessageBox.show(msg, {
icon: sap.m.MessageBox.Icon.ERROR,
title: "Error",
actions: [sap.m.MessageBox.Action.YES],
onClose: function (oAction) {


}.bind(this)
});
}
);
}

});

});