问题：当我单击员工图标时，每个快速查看都有相同的数据。
需要：如果我单击一个雇员图标，则应该有单击的雇员图标的数据。它不应在每个员工图标上显示相同的数据。
请你帮我一下：）
View1.controller.js：
sap.ui.define([
"jquery.sap.global",
"sap/ui/core/Fragment",
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/m/MessageToast",
"sap/m/Popover",
"sap/m/Dialog",
"sap/m/MessageBox",
"sap/m/List",
"sap/m/StandardListItem",
"sap/m/Button"
], function (jQuery, Fragment, Controller, JSONModel, MessageToast, Popover, Dialog, MessageBox, List, StandardListItem, Button) {
"use strict";
var PageController = Controller.extend(".........controller.View1", {
oEmployeeModel: new JSONModel(),
oEmployeeData: new JSONModel(),
onInit: function () {
var mEmployeeData = {
width: "320px",
pages: [{
pageId: "employeePageId",
header: "Mitarbeiter Info",
icon: "sap-icon://employee",
title: "......",
description: "Teamleiter",
groups: [{
heading: "Kontakt Details",
elements: [{
label: "Handy",
value: "........"
// elementType: sap.m.QuickViewGroupElementType.mobile
}, {
label: "Festnetz",
value: "............."
// elementType: sap.m.QuickViewGroupElementType.phone
}, {
label: "Email",
value: "........",
emailSubject: "Subject",
elementType: sap.m.QuickViewGroupElementType.email
}, {
label: "Projekt",
value: "........."
// elementType: sap.m.QuickViewGroupElementType.pageLink,
// pageLinkId: "page"
}]
}, {
heading: "Unternehmen",
elements: [{
label: "Name",
value: "...........",
// url: ".............",
elementType: sap.m.QuickViewGroupElementType.link
}, {
label: "Adresse",
value: "..............."
}]
}]
}]
};
// create model
var oModel = new JSONModel();
oModel.setData({
startDate: new Date(2019, 7, 5, 7, 0),
minDate: new Date(2019, 0, 1, 0, 0, 0),
maxDate: new Date(2050, 11, 31, 23, 59, 59),
people: [{
pageId: "page",
pic: "sap-icon://employee",
name: "...............",
role: "Teamleiter",
appointments: [{
start: new Date(2019, 7, 5, 9, 0),
end: new Date(2019, 7, 9, 9, 30),
title: "Meeting",
type: "Type07",
icon: "sap-icon://activate",
tentative: false
},{
start: new Date(2019, 5, 26, 5, 11),
end: new Date(2019, 5, 14, 5, 11),
title: "Meeting",
type: "Type07",
icon: "sap-icon://activate",
tentative: false
}]
}, {
pic: "sap-icon://employee",
name: ".............",
role: "Teammitglied",
appointments: [{
start: new Date(2019, 7, 5, 8, 0),
end: new Date(2019, 7, 9, 8, 0),
title: "Urlaub",
type: "Type01",
icon: "sap-icon://activate",
tentative: false
},{
start: new Date(2019, 5, 17, 5, 11),
end: new Date(2019, 5, 18, 5, 11),
title: "Meeting",
type: "Type07",
icon: "sap-icon://activate",
tentative: false
}]
}, {
pic: "sap-icon://employee",
name: ".............",
role: "Teammitglied",
appointments: [{
start: new Date(2019, 7, 9, 11, 0),
end: new Date(2019, 7, 9, 11, 30),
title: "Besprechungstermin",
type: "Type01",
icon: "sap-icon://activate",
tentative: false
},
{
start: new Date(2019, 5, 19, 5, 11),
end: new Date(2019, 5, 20, 5, 11),
title: "Schulung",
type: "Type01",
icon: "sap-icon://activate",
tentative: false
}
]
}]
});
this.oEmployeeModel.setData(mEmployeeData);
this.getView().setModel(oModel);
},
openHarveyBallMicroChart: function(oEvent) {
var oAppointment = oEvent.getParameter("appointment");
if (oAppointment) {
this._handleSingleAppointment(oAppointment);
} else {
this._handleGroupAppointments(oEvent);
}
if (!this._oPopover) {
this._oPopover = sap.ui.xmlfragment("......view.Popover", this);// create popover
this.getView().addDependent(this._oPopover);
}
},
onAfterRendering: function () {
var oButton = this.byId('showQuickView');
oButton.$().attr('aria-haspopup', true);
oButton = this.byId("employeeQuickView");
oButton.$().attr("aria-haspopup", true);
oButton = this.byId("genericQuickView");
oButton.$().attr("aria-haspopup", true);
},
openQuickView: function (oEvent, oModel) {
this.createPopover();
this._oQuickView.setModel(oModel);
var oButton = oEvent.getSource();
jQuery.sap.delayedCall(0, this, function () {
this._oQuickView.openBy(oButton);
});
},
handleRowHeaderClick: function (oEvent) {
this.openQuickView(oEvent, this.oEmployeeModel);
this._oQuickView.setPlacement(sap.m.PlacementType.PreferredLeftOrFlip);
},
handleOkButton: function (oEvent) {
var oFrag = sap.ui.core.Fragment,
oStartValue = oFrag.byId("myPopoverFrag", "startDate").getDateValue(),
oEndValue = oFrag.byId("myPopoverFrag", "endDate").getDateValue(),
sInfoValue = oFrag.byId("myPopoverFrag", "moreInfo").getValue(),
sAppointmentPath = this._oDetailsPopover.getBindingContext().sPath;
this._oDetailsPopover.getModel().setProperty(sAppointmentPath + "/start", oStartValue);
this._oDetailsPopover.getModel().setProperty(sAppointmentPath + "/end", oEndValue);
this._oDetailsPopover.getModel().setProperty(sAppointmentPath + "/info", sInfoValue);
this._oDetailsPopover.close();
},
handleCancelButton: function (oEvent) {
this._oDetailsPopover.close();
},
createPopover: function () {
if (this._oQuickView) {
this._oQuickView.destroy();
}
this._oQuickView = sap.ui.xmlfragment("........view.QuickView", this);
this.getView().addDependent(this._oQuickView);
},
handleAppointmentCreate: function (oEvent) {
var oFrag = sap.ui.core.Fragment,
oDateTimePickerStart, oDateTimePickerEnd, oBeginButton;
this._createDialog();
oFrag.byId("myFrag", "selectPerson").setSelectedItem(oFrag.byId("myFrag", "selectPerson").getItems()[0]);
oDateTimePickerStart = oFrag.byId("myFrag", "startDate");
oDateTimePickerEnd = oFrag.byId("myFrag", "endDate");
oBeginButton = this.oNewAppointmentDialog.getBeginButton();
oDateTimePickerStart.setValue("");
oDateTimePickerEnd.setValue("");
oDateTimePickerStart.setValueState("None");
oDateTimePickerEnd.setValueState("None");
this.updateButtonEnabledState(oDateTimePickerStart, oDateTimePickerEnd, oBeginButton);
this.oNewAppointmentDialog.open();
},
handleAppointmentAddWithContext: function (oEvent) {
var oFrag = sap.ui.core.Fragment,
currentRow, sPersonName, oSelect, oSelectedItem, oSelectedIntervalStart, oStartDate, oSelectedIntervalEnd, oEndDate,
oDateTimePickerStart, oDateTimePickerEnd, oBeginButton;
this._createDialog();
currentRow = oEvent.getParameter("row");
sPersonName = currentRow.getTitle();
oSelect = this.oNewAppointmentDialog.getContent()[0].getContent()[1];
oSelectedItem = oSelect.getItems().filter(function (oItem) {
return oItem.getText() === sPersonName;
})[0];
oSelect.setSelectedItem(oSelectedItem);
oSelectedIntervalStart = oEvent.getParameter("startDate");
oStartDate = oFrag.byId("myFrag", "startDate");
oStartDate.setDateValue(oSelectedIntervalStart);
oSelectedIntervalEnd = oEvent.getParameter("endDate");
oEndDate = oFrag.byId("myFrag", "endDate");
oEndDate.setDateValue(oSelectedIntervalEnd);
oDateTimePickerStart = oFrag.byId("myFrag", "startDate");
oDateTimePickerEnd = oFrag.byId("myFrag", "endDate");
oBeginButton = this.oNewAppointmentDialog.getBeginButton();
oDateTimePickerStart.setValueState("None");
oDateTimePickerEnd.setValueState("None");
this.updateButtonEnabledState(oDateTimePickerStart, oDateTimePickerEnd, oBeginButton);
this.oNewAppointmentDialog.open();
},
_validateDateTimePicker: function (oDateTimePickerStart, oDateTimePickerEnd) {
var oStartDate = oDateTimePickerStart.getDateValue(),
oEndDate = oDateTimePickerEnd.getDateValue(),
sValueStateText = "Start date should be before End date";
if (oStartDate && oEndDate && oEndDate.getTime() <= oStartDate.getTime()) {
oDateTimePickerStart.setValueState("Error");
oDateTimePickerEnd.setValueState("Error");
oDateTimePickerStart.setValueStateText(sValueStateText);
oDateTimePickerEnd.setValueStateText(sValueStateText);
} else {
oDateTimePickerStart.setValueState("None");
oDateTimePickerEnd.setValueState("None");
}
},
updateButtonEnabledState: function (oDateTimePickerStart, oDateTimePickerEnd, oButton) {
var bEnabled = oDateTimePickerStart.getValueState() !== "Error" && oDateTimePickerStart.getValue() !== "" && oDateTimePickerEnd.getValue() !==
"" && oDateTimePickerEnd.getValueState() !== "Error";
oButton.setEnabled(bEnabled);
},
handleDetailsChange: function (oEvent) {
var oFrag = sap.ui.core.Fragment,
oDTPStart = oFrag.byId("myPopoverFrag", "startDate"),
oDTPEnd = oFrag.byId("myPopoverFrag", "endDate"),
oOKButton = oFrag.byId("myPopoverFrag", "OKButton");
if (oEvent.getParameter("valid")) {
this._validateDateTimePicker(oDTPStart, oDTPEnd);
} else {
oEvent.getSource().setValueState("Error");
}
this.updateButtonEnabledState(oDTPStart, oDTPEnd, oOKButton);
},
handleCreateChange: function (oEvent) {
var oFrag = sap.ui.core.Fragment,
oDateTimePickerStart = oFrag.byId("myFrag", "startDate"),
oDateTimePickerEnd = oFrag.byId("myFrag", "endDate"),
oBeginButton = this.oNewAppointmentDialog.getBeginButton();
if (oEvent.getParameter("valid")) {
this._validateDateTimePicker(oDateTimePickerStart, oDateTimePickerEnd);
} else {
oEvent.getSource().setValueState("Error");
}
this.updateButtonEnabledState(oDateTimePickerStart, oDateTimePickerEnd, oBeginButton);
},
_createDialog: function () {
var oFrag = sap.ui.core.Fragment,
that = this,
oStartDate, oEndDate, sTitle, sInfoResponse, oNewAppointment, oModel, sPath, oPersonAppointments;
if (!that.oNewAppointmentDialog) {
that.oNewAppointmentDialog = new Dialog({
title: "Add a new appointment",
content: [sap.ui.xmlfragment("myFrag", ".............view.Create", this)],
beginButton: new Button({
text: "Create",
enabled: false,
press: function () {
oStartDate = oFrag.byId("myFrag", "startDate").getDateValue();
oEndDate = oFrag.byId("myFrag", "endDate").getDateValue();
sTitle = oFrag.byId("myFrag", "inputTitle").getValue();
sInfoResponse = oFrag.byId("myFrag", "moreInfo").getValue();
if (oFrag.byId("myFrag", "startDate").getValueState() !== "Error" && oFrag.byId("myFrag", "endDate").getValueState() !==
"Error") {
oNewAppointment = {
start: oStartDate,
end: oEndDate,
title: sTitle,
info: sInfoResponse
};
oModel = that.getView().getModel();
sPath = "/people/" + oFrag.byId("myFrag", "selectPerson").getSelectedIndex() + "/appointments";
oPersonAppointments = oModel.getProperty(sPath);
oPersonAppointments.push(oNewAppointment);
oModel.setProperty(sPath, oPersonAppointments);
that.oNewAppointmentDialog.close();
}
}
}),
endButton: new Button({
text: "Close",
press: function () {
that.oNewAppointmentDialog.close();
}
})
});
that.oNewAppointmentDialog.addStyleClass("sapUiContentPadding");
this.getView().addDependent(that.oNewAppointmentDialog);
}
},
_handleSingleAppointment: function (oAppointment) {
var oFrag = sap.ui.core.Fragment,
oAppBC, oDateTimePickerStart, oDateTimePickerEnd, oInfoInput, oOKButton;
if (!this._oDetailsPopover) {
this._oDetailsPopover = sap.ui.xmlfragment("myPopoverFrag", "..........view.Popover", this);
this.getView().addDependent(this._oDetailsPopover);
}
// the binding context is needed, because later when the OK button is clicked, the information must be updated
oAppBC = oAppointment.getBindingContext();
this._oDetailsPopover.setBindingContext(oAppBC);
oDateTimePickerStart = oFrag.byId("myPopoverFrag", "startDate");
oDateTimePickerEnd = oFrag.byId("myPopoverFrag", "endDate");
oInfoInput = oFrag.byId("myPopoverFrag", "moreInfo");
oOKButton = oFrag.byId("myPopoverFrag", "OKButton");
oDateTimePickerStart.setDateValue(oAppointment.getStartDate());
oDateTimePickerEnd.setDateValue(oAppointment.getEndDate());
oInfoInput.setValue(oAppointment.getText());
oDateTimePickerStart.setValueState("None");
oDateTimePickerEnd.setValueState("None");
this.updateButtonEnabledState(oDateTimePickerStart, oDateTimePickerEnd, oOKButton);
this._oDetailsPopover.openBy(oAppointment);
},
_handleGroupAppointments: function (oEvent) {
var aAppointments, sGroupAppointmentType, sGroupPopoverValue, sGroupAppDomRefId, bTypeDiffer;
aAppointments = oEvent.getParameter("appointments");
sGroupAppointmentType = aAppointments[0].getType();
sGroupAppDomRefId = oEvent.getParameter("domRefId");
bTypeDiffer = aAppointments.some(function (oAppointment) {
return sGroupAppointmentType !== oAppointment.getType();
});
if (bTypeDiffer) {
sGroupPopoverValue = aAppointments.length + " Appointments of different types selected";
} else {
sGroupPopoverValue = aAppointments.length + " Appointments of the same " + sGroupAppointmentType + " selected";
}
if (!this._oGroupPopover) {
this._oGroupPopover = new Popover({
title: "Group Appointments",
content: new Label({
text: sGroupPopoverValue
})
});
} else {
this._oGroupPopover.getContent()[0].setText(sGroupPopoverValue);
}
this._oGroupPopover.addStyleClass("sapUiPopupWithPadding");
this._oGroupPopover.openBy(document.getElementById(sGroupAppDomRefId));
},
onPress: function (oEvent) {
//This code was generated by the layout editor.
}
});
return PageController;
});
QuickView.fragment.xml：
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<QuickView id="quickView" pages="{ path : '/pages', templateShareable : 'true'}" navigate=".onNavigate">
<QuickViewPage
pageId="{pageId}"
header="{header}"
icon="{icon}"
title="{title}"
titleUrl="{titleUrl}"
description="{description}"
groups="{ path : 'groups', templateShareable : 'true'}">
<QuickViewGroup heading="{heading}" elements="{ path : 'elements', templateShareable : 'true'}">
<QuickViewGroupElement
label="{label}"
value="{value}"
url="{url}"
type="{elementType}"
pageLinkId="{pageLinkId}"
emailSubject="{emailSubject}"
target="{target}">
</QuickViewGroupElement>
</QuickViewGroup>
</QuickViewPage>
</QuickView>
</core:FragmentDefinition>
View1.view.xml：
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:unified="sap.ui.unified" xmlns:l="sap.ui.layout" xmlns="sap.m"
controllerName=".......controller.View1">
<VBox class="sapUiSmallMargin">
<PlanningCalendar rowHeaderClick="handleRowHeaderClick" id="PC1" showIntervalHeaders="false" startDate="{path: '/startDate'}"
minDate="{path: '/minDate'}" maxDate="{path: '/maxDate'}" rows="{path: '/people'}" appointmentsVisualization="Filled"
appointmentSelect="openHarveyBallMicroChart">
<toolbarContent>
<Title xmlns:action="http://......." text="Teamkalender" titleStyle="H4"
validateFieldGroup="action"
action:wiring="\{'validateFieldGroup':\{'navigation':\{'routeName':'EmployeeDetails_binded','keys':[\{'name':'EmployeeID','type':'Edm.Int32'\}]\}\}\}"/>
<ToolbarSpacer/>
<Button id="addButton" icon="sap-icon://add" press="handleAppointmentCreate" tooltip="Add"/>
</toolbarContent>
<rows>
<PlanningCalendarRow title="{name}" icon="{pic}" text="{role}" appointments="{path : 'appointments', templateShareable: 'false'}"
intervalHeaders="{path: 'headers', templateShareable: 'true'}">
<appointments>
<unified:CalendarAppointment class="size" startDate="{start}" endDate="{end}" icon="{pic}" tooltip="{tooltip}" title="{title}" text="{info}"
type="{type}" tentative="{tentative}"/>
</appointments>
<intervalHeaders>
<unified:CalendarAppointment startDate="{start}" endDate="{end}" icon="{pic}" title="{title}" type="{type}"/>
</intervalHeaders>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
</VBox>
</mvc:View>
这是我的快速查看[link]（https://imgur.com/a/vws6srn）