为了兼容老浏览器,没用Javascript的现代fetch api,用的jquery
controller.js代码如下
javascript
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/m/MessageToast"
], function (Controller, JSONModel, MessageToast) {
"use strict";
return Controller.extend("zfiori_stock.controller.StockList", {
onInit: function () {
// 初始化stock模型
var oStockModel = new JSONModel([]);
this.getView().setModel(oStockModel, "stock");
},
/**
* 重置查询条件并清空表格数据
*/
_resetQuery: function () {
this._clearInputs();
// 清空表格数据
var oStockModel = this.getView().getModel("stock");
oStockModel.setData({});
MessageToast.show("查询条件已重置");
},
/**
* 清空所有输入框
*/
_clearInputs: function () {
this.getView().byId("werksInput").setValue("");
this.getView().byId("matnrInput").setValue("");
this.getView().byId("chargInput").setValue("");
this.getView().byId("lgortInput").setValue("");
},
/**
* 获取库存数据
* 兼容Android 8平台的老浏览器
*/
_fetchStockData: function () {
// 后端API信息
var sUrl = "/api/zbakpda?ACTION=GET_STOCK";
// 从输入框获取查询条件
var oRequestData = {
"werks": this.getView().byId("werksInput").getValue(),
"matnr": this.getView().byId("matnrInput").getValue(),
"charg": this.getView().byId("chargInput").getValue(),
"lgort": this.getView().byId("lgortInput").getValue()
};
// 显示加载提示
MessageToast.show("正在查询数据...");
// 使用jQuery.ajax以兼容老浏览器
jQuery.ajax({
url: sUrl,
type: "POST",
data: JSON.stringify(oRequestData),
headers: {
"Content-Type": "application/json",
"Accept-Language": "zh"
// "Authorization": sAuthHeader
},
// 兼容老浏览器的参数设置
dataType: "json",
xhrFields: {
withCredentials: true
},
timeout: 30000,
//通过 jQuery.proxy(fn, this),强制绑定了函数执行时的 this 上下文为当前控制器。
success: jQuery.proxy(function (oData) {
// 将返回数据绑定到stock模型
var oStockModel = this.getView().getModel("stock");
if (oStockModel) {
if (oData.length != 0) {
MessageToast.show("库存数据获取成功");
} else {
MessageToast.show("返回数据为空");
}
oStockModel.setData(oData);
}
}, this),
error: jQuery.proxy(function (xhr, status, error) {
console.error("获取库存数据失败:", error);
console.error("状态码:", xhr.status);
// 友好的错误提示
var sErrorMessage = "获取库存数据失败";
if (xhr.status === 401) {
sErrorMessage = "认证失败,请检查账号密码";
} else if (xhr.status === 404) {
sErrorMessage = "服务器地址错误";
} else if (xhr.status === 500) {
sErrorMessage = "服务器内部错误";
}
MessageToast.show(sErrorMessage);
}, this)
});
}
});
});
xml视图代码
javascript
<mvc:View
controllerName="zfiori_stock.controller.StockList"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc">
<Panel class="sapUiResponsiveContentPadding">
<headerToolbar>
<Toolbar>
<Button text="查询" press="_fetchStockData" icon="sap-icon://search"
class="sapUiSmallMarginEnd" />
<Button text="重置" press="_resetQuery" icon="sap-icon://refresh" />
</Toolbar>
</headerToolbar>
<l:Grid defaultSpan="L6 M6 S6" class="sapUiResponsiveMargin" vSpacing="1">
<l:content>
<!-- 工厂 -->
<FlexBox class="sapUiTinyMarginBottom" alignItems="Center">
<Label text="工厂:" labelFor="werksInput" width="80px" />
<Input id="werksInput"
width="100%"
/>
</FlexBox>
<!-- 库存地点 -->
<FlexBox class="sapUiTinyMarginBottom" alignItems="Center">
<Label text="库存地点:" labelFor="lgortInput" width="80px" />
<Input id="lgortInput"
width="100%"
/>
</FlexBox>
<!-- 物料 -->
<FlexBox class="sapUiTinyMarginBottom" alignItems="Center">
<Label text="物料:" labelFor="matnrInput" width="80px" />
<Input id="matnrInput"
width="100%"
/>
</FlexBox>
<!-- 批次 -->
<FlexBox class="sapUiTinyMarginBottom" alignItems="Center">
<Label text="批次:" labelFor="chargInput" width="80px" />
<Input id="chargInput"
width="100%"
/>
</FlexBox>
</l:content>
</l:Grid>
<Table
id="stockList"
class="sapUiResponsiveMargin"
width="100%"
items="{
path : 'stock>/'
}"
noDataText="暂无数据">
<columns>
<Column
minScreenWidth="Phone"
demandPopin="true"
hAlign="Left">
<Text text="物料编码" />
</Column>
<Column
minScreenWidth="Phone"
demandPopin="true"
hAlign="Left">
<Text text="物料描述" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true">
<Text text="工厂" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true">
<Text text="库存地点" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true">
<Text text="库存地点名称" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true">
<Text text="批次" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true">
<Text text="库存数量" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true">
<Text text="单位" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{stock>matnr}" />
<Text text="{stock>maktx}" />
<Text text="{stock>werks}" />
<Text text="{stock>lgort}" />
<Text text="{stock>lgobe}" />
<Text text="{stock>charg}" />
<Text text="{stock>clabs}" />
<Text text="{stock>meins}" />
</cells>
</ColumnListItem>
</items>
</Table>
</Panel>
</mvc:View>
ui5.yaml配置代理,解决cors跨域
javascript
specVersion: "4.0"
metadata:
name: zfiori_stock
type: application
server:
customMiddleware:
- name: ui5-middleware-simpleproxy
afterMiddleware: compression
mountPath: /api
configuration:
baseUri: "http://后端ip:port"
preserveHostHeader: true
ignoreCertErrors: true
headers:
X-Requested-With: XMLHttpRequest