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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
| sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/m/MessageBox",
"sap/m/MessageToast",
"sap/m/Dialog",
"sap/m/Button",
"sap/ui/layout/form/SimpleForm",
"sap/m/Label",
"sap/m/Input",
], function (Controller, JSONModel, MessageBox, MessageToast, Dialog, Button, SimpleForm, Label, Input)
{
"use strict";
return Controller.extend("my.app.controller.Main", {
// 初始化
onInit: function ()
{
var oDataSource = this.getOwnerComponent().getMetadata().getManifestEntry("sap.app").dataSources.orderApi;
this._sBaseUrl = oDataSource.url;
console.log('this._sBaseUrl', this._sBaseUrl)
this.onReadData()
// 1. 準備下拉選單的資料來源
var oData = {
// Select 的資料
zones: [
{ key: "Z1", text: "台北總部" },
{ key: "Z2", text: "台中分部" },
{ key: "Z3", text: "高雄辦事處" }
],
// 預設選中台北
selectedZone: "Z1",
// ComboBox 的資料
owners: [
{ id: "EMP001", name: "王大同" },
{ id: "EMP002", name: "李小美" },
{ id: "EMP003", name: "張三豐" }
],
selectedOwner: "",
// MultiComboBox 的資料
tags: [
{ tagId: "T1", tagName: "科技" },
{ tagId: "T2", tagName: "金融" },
{ tagId: "T3", tagName: "教育" }
],
selectedTags: ["T1"] // 預設多選勾選科技與金融
};
// 2. 建立 JSON 模型並設置到 View 上
var oModel = new JSONModel(oData);
this.getView().setModel(oModel);
},
onReadData: function ()
{
jQuery.ajax({
url: this._sBaseUrl ,
method: "GET",
dataType: "json",
success: function (aData) {
console.log('aData',aData)
// 將拿到的陣列塞入 JSONModel
this._oQuizModel.setProperty("", aData);
oTable.setBusy(false);
MessageToast.show("題庫加載完畢！");
}.bind(this),
error: function (oError) {
oTable.setBusy(false);
MessageBox.error("加載失敗，原因：" + oError.responseText);
}
});
},
// 下拉選單數值改變時的事件監聽
onZoneChange: function (oEvent)
{
console.log('onZoneChange',oEvent)
var oSelectedItem = oEvent.getParameter("selectedItem");
var sSelectedKey = oSelectedItem.getKey();
var sSelectedText = oSelectedItem.getText();
console.log("使用者選擇了 Key: " + sSelectedKey + " , Text: " + sSelectedText);
},
onTagsChange: function (oEvent)
{
console.log('onTagsChange',oEvent)
var oSelectedItem = oEvent.getParameter("selectedItem");
var sSelectedKey = oSelectedItem.getKey();
var sSelectedText = oSelectedItem.getText();
console.log("使用者選擇了 Key: " + sSelectedKey + " , Text: " + sSelectedText);
},
onDateChange: function (oEvent) {
// === 方法 A：取得格式化後的字串（例如 "2026-07-13"）===
// 這是最常用的做法，可以直接拿來傳給後端 API
var sValue = oEvent.getParameter("value");
var bValid = oEvent.getParameter("valid"); // 檢查使用者輸入的日期是否合法
if (!bValid) {
MessageToast.show("請輸入正確的日期格式！");
return;
}
// === 方法 B：取得原生 JS Date 物件 ===
// 如果你需要拿這個日期去做計算（例如計算天數、判斷是否大於今天）
var oDatePicker = oEvent.getSource();
var oDateObject = oDatePicker.getDateValue(); // 得到標準的 Date 物件
// 測試輸出
console.log("字串格式 (value):", sValue);
console.log("JS 物件 (dateValue):", oDateObject);
MessageToast.show("您選擇了：" + sValue);
},
onCreatePress: function () {
MessageToast.show("表單已成功創建！");
},
onResetPress: function () {
MessageToast.show("表單已重置。");
// 在此處加入清除各控制項欄位值的邏輯
}
})
})
|