我正在尝试使用sap.m.planningcalendar控件开发Fiori应用。我的默认模型是我从SAP后端提供的ODataModel.V2。在我决定实现ui5版本1.56附带的DnD功能之前，一切似乎都很正常。
sample的示例代码如下；
handleAppointmentDropBetweenRows = function () {
var aPath = oAppBindingContext.getPath().split("/"),
iIndex = aPath.pop(),
sRowAppointmentsPath = aPath.join("/");
oRowBindingContext.getObject().appointments.push(
oModel.getProperty(oAppBindingContext.getPath())
);
oModel.getProperty(sRowAppointmentsPath).splice(iIndex, 1);
};
这对我来说不起作用。因此，我要添加新约会；
oCalendarRow.addAppointment（oAppointment）;
尽管，如果我创建一个新的JSON模型并设置数据，则可以正常工作，但是如果我使用来自后端的OData.v2模型作为默认模型，则会引发如下错误；
错误：添加重复ID为'__appointment0 -__ row0 -__ xmlview0--PC1-0-96'*的元素
我找不到带拖放功能的后端方案的sap.m.planningcalendar示例。
有什么建议吗？
P.S：我还尝试过在如下视图中为PlanningCalendarRows添加 templateShareable：'false'；
appointments="{path : 'to_MaintOrderOper', templateShareable: 'false'}"
也没有用。
最诚挚的问候
我的观点；
<mvc:View controllerName="ZPM.ZPM_CAPACITY_PLAN.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core" xmlns:unified="sap.ui.unified" xmlns:modeltype="sap.ui.model.type" xmlns="sap.m">
<App id="idAppControl">
<pages>
<Page title="{i18n>title}">
<content>
<VBox class="sapUiSmallMargin">
<PlanningCalendar id="PC1" rows="{path: '/ZPM_C_CAPACITY_PLAN2', parameters:{expand:'to_MaintOrderOper'}, templateShareable: 'false'}" appointmentsVisualization="Filled"
appointmentSelect="handleAppointmentSelect">
<toolbarContent>
<Title text="{i18n>toolbarTitle}" titleStyle="H4"/>
<ToolbarSpacer/>
<Button
id="saveButton"
text="{i18n>save}"
type="Emphasized"
icon="sap-icon://save"
press="handleSaveChanges"
tooltip="{i18n>submit}"/>
<Label text="Logged in as"/>
<Select
id="userRole"
change="handleRoleChange"
selectedKey="admin"
width="230px">
<items>
<core:Item key="admin" text="Admin"/>
<core:Item key="manager" text="Manager"/>
<core:Item key="donna" text="Donna Moore"/>
</items>
</Select>
</toolbarContent>
<rows>
<PlanningCalendarRow
title="{EmployeeFullName}"
text="{Skill}"
icon="{EmployeePic}"
enableAppointmentsDragAndDrop="{path:'EmployeeFullName', formatter:'.canModifyAppointments'}"
enableAppointmentsResize="{path:'EmployeeFullName', formatter:'.canModifyAppointments'}"
appointmentDrop="handleAppointmentDrop"
appointmentDragEnter="handleAppointmentDragEnter"
appointmentResize="handleAppointmentResize"
appointmentCreate="handleAppointmentCreate"
appointments="{path : 'to_MaintOrderOper', templateShareable: 'false'}">
<appointments>
<unified:CalendarAppointment
startDate="{path: 'StartDateTime2', type: 'sap.ui.model.type.DateTimeOffset'}"
endDate="{path: 'EndDateTime2', type: 'sap.ui.model.type.DateTimeOffset'}"
icon="{PlanningIcon}"
title="{Title}"
text="{Info}">
</unified:CalendarAppointment>
</appointments>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
</VBox>
</content>
</Page>
</pages>
</App>
也是我的控制器；
/*eslint-disable*/
sap.ui.define（['jquery.sap.global'， 'sap / m / MessageBox'， 'sap / m / Button'， 'sap / m / Dialog'， 'sap / m / Label'， 'sap / m / Popover'， 'sap / m / List'， 'sap / m / StandardListItem'， 'sap / ui / core / Fragment'， 'sap / ui / core / mvc / Controller'， 'sap / ui / model / json / JSONModel'， 'sap / m / MessageToast' ]
function (jQuery, MessageBox, Button, Dialog, Label, Popover, List, StandardListItem, Fragment, Controller, JSONModel, MessageToast) {
"use strict";
return Controller.extend("ZPM.ZPM_CAPACITY_PLAN.controller.Main", {
onInit: function () {
},
toDateObject: function (sDateString) {
var oAppointmentDate = new Date(sDateString);
return oAppointmentDate;
},
roles: {
donna: "Donna Moore",
manager: "manager",
admin: "admin"
},
handleRoleChange: function () {
this.getView().getModel().refresh(true);
},
getUserRole: function () {
return this.roles[this.byId("userRole").getSelectedKey()];
},
canModifyAppointments: function (sRole) {
var sUserRole = this.getUserRole();
if (sUserRole === this.roles.manager || sUserRole === this.roles.admin || sUserRole === sRole) {
return true;
}
},
// New functionality to show detailed popover for Jobs
handleAppointmentSelect: function (oEvent) {
debugger;
var oJobDetails = new sap.ui.model.json.JSONModel();
var oAppointment = oEvent.getParameter("appointment");
var oTitle = oAppointment.getTitle();
var oIcon = oAppointment.getIcon();
var oStartDateText = this._oResourceBundle().getText("startDate");
var oStartDate = oAppointment.getStartDate();
var oEndDateText = this._oResourceBundle().getText("endDate");
var oEndDate = oAppointment.getEndDate();
var oJobInfoText = this._oResourceBundle().getText("jobInfo");
var oJobInfo = oAppointment.getText();
var mJobDetails = {
pages: [{
pageId: "jobDetailsPageId",
title: oTitle,
icon: oIcon,
groups: [{
elements: [{
label: oStartDateText,
value: oStartDate
}, {
label: oEndDateText,
value: oEndDate
}, {
label: oJobInfoText,
value: oJobInfo
}]
}]
}]
};
// set the data for the model
oJobDetails.setData(mJobDetails);
// Now open QuickView
this.openQuickView(oAppointment, oJobDetails);
},
openQuickView: function (oAppointment, oJobDetails) {
this.createPopover();
this._oQuickView.setModel(oJobDetails, "oJobDetailsModel");
this._oQuickView.openBy(oAppointment);
},
createPopover: function () {
if (this._oQuickView) {
this._oQuickView.destroy();
}
this._oQuickView = sap.ui.xmlfragment("ZPM.ZPM_CAPACITY_PLAN.view.JobDetails", this);
this.getView().addDependent(this._oQuickView);
},
handleAppointmentDragEnter: function (oEvent) {
if (this.isAppointmentOverlap(oEvent, oEvent.getParameter("calendarRow"))) {
oEvent.preventDefault();
}
},
onQuickviewClose: function (oEvent) {
if (this._oQuickView) {
this._oQuickView.destroy();
}
//oEvent.getParameters().openBy.setSelected(false);
},
handleAppointmentDrop: function (oEvent) {
debugger;
var oAppointment = oEvent.getParameter("appointment"),
oStartDate = oEvent.getParameter("startDate"),
oEndDate = oEvent.getParameter("endDate"),
oCalendarRow = oEvent.getParameter("calendarRow"),
bCopy = oEvent.getParameter("copy"),
oModel = this.getView().getModel(),
oAppBindingContext = oAppointment.getBindingContext(),
oRowBindingContext = oCalendarRow.getBindingContext();
/* handleAppointmentDropBetweenRows = function () {
var aPath = oAppBindingContext.getPath().split("/"),
iIndex = aPath.pop(),
sRowAppointmentsPath = aPath.join("/");
oCalendarRow.addAppointment(oAppointment)
oRowBindingContext.getObject().appointments.push(
oModel.getProperty(oAppBindingContext.getPath())
);
oModel.getProperty(sRowAppointmentsPath).splice(iIndex, 1);
};*/
if (bCopy) { // "copy" appointment
var oProps = jQuery.extend({}, oModel.getProperty(oAppointment.getBindingContext().getPath()));
oProps.start = oStartDate;
oProps.end = oEndDate;
oRowBindingContext.getObject().appointments.push(oProps);
} else { // "move" appointment
//oModel.setProperty("start", oStartDate, oAppBindingContext);
//oModel.setProperty("end", oEndDate, oAppBindingContext);
oAppointment.setStartDate(oStartDate);
oAppointment.setEndDate(oEndDate);
oAppointment.setType("Type03");
if (oAppointment.getParent() !== oCalendarRow) {
debugger;
oCalendarRow.addAppointment(oAppointment);
//handleAppointmentDropBetweenRows();
}
}
MessageToast.show(oCalendarRow.getTitle() + "'s '" + "Appointment '" + oAppointment.getTitle() + "' now starts at \n" + oStartDate +
"\n and end at \n" + oEndDate + ".");
},
handleAppointmentResize: function (oEvent) {
var oModel = this.getView().getModel();
var oAppointment = oEvent.getParameter("appointment"),
oStartDate = oEvent.getParameter("startDate"),
oEndDate = oEvent.getParameter("endDate");
var dateFormat = sap.ui.core.format.DateFormat.getDateInstance({pattern : "yyyy-MM-ddTHH:mm:ss" });
if (!this.isAppointmentOverlap(oEvent, oAppointment.getParent())) {
MessageToast.show("Appointment '" + oAppointment.getTitle() + "' now starts at \n" + oStartDate + "\n and end at \n" + oEndDate +
".");
// oModel.setProperty("StartDateTime2", dateFormat.format(oStartDate) , oAppointment.getBindingContext());
// oModel.setProperty("EndDateTime2", dateFormat.format(oEndDate) , oAppointment.getBindingContext());
oAppointment.setStartDate(oStartDate);
oAppointment.setEndDate(oEndDate);
oAppointment.setType("Type03");
} else {
MessageToast.show("As a manager you can not resize events if they overlap with another events");
}
},
// Our App should not support Appointment Creation
/*handleAppointmentCreate: function (oEvent) {
var oStartDate = oEvent.getParameter("startDate"),
oEndDate = oEvent.getParameter("endDate"),
oPlanningCalendarRow = oEvent.getParameter("calendarRow"),
oModel = this.getView().getModel(),
sPath = oPlanningCalendarRow.getBindingContext().getPath();
oModel.getProperty(sPath).appointments.push({
title: "New Appointment",
start: oStartDate,
end: oEndDate
});
MessageToast.show("New Appointment is created at \n" + oStartDate + "\n and end at \n" + oEndDate + ".");
oModel.refresh(true);
},*/
isAppointmentOverlap: function (oEvent, oCalendarRow) {
var oAppointment = oEvent.getParameter("appointment"),
oStartDate = oEvent.getParameter("startDate"),
oEndDate = oEvent.getParameter("endDate"),
bAppointmentOverlapped;
if (this.getUserRole() === this.roles.manager) {
bAppointmentOverlapped = oCalendarRow.getAppointments().some(function (oCurrentAppointment) {
if (oCurrentAppointment === oAppointment) {
return;
}
var oAppStartTime = oCurrentAppointment.getStartDate().getTime(),
oAppEndTime = oCurrentAppointment.getEndDate().getTime();
if (oAppStartTime <= oStartDate.getTime() && oStartDate.getTime() < oAppEndTime) {
return true;
}
if (oAppStartTime < oEndDate.getTime() && oEndDate.getTime() <= oAppEndTime) {
return true;
}
if (oStartDate.getTime() <= oAppStartTime && oAppStartTime < oEndDate.getTime()) {
return true;
}
});
}
return bAppointmentOverlapped;
},
handleSaveChanges: function (oEvent) {
var oModel = this.getView().getModel(),
bError = false;
// abort if the model has not been changed
if (!oModel.hasPendingChanges()) {
var bCompact = !!this.getView().$().closest(".sapUiSizeCompact").length;
MessageBox.information(
this._oResourceBundle().getText("noChangesMessage"), {
styleClass: bCompact ? "sapUiSizeCompact" : ""
}
);
return;
}
oModel.submitChanges();
},
_checkIfBatchRequestSucceeded: function (oEvent) {
var oParams = oEvent.getParameters();
var aRequests = oEvent.getParameters().requests;
var oRequest;
if (oParams.success) {
if (aRequests) {
for (var i = 0; i < aRequests.length; i++) {
oRequest = oEvent.getParameters().requests[i];
if (!oRequest.success) {
return false;
}
}
}
return true;
} else {
return false;
}
},
_fnUpdateSuccess: function () {
this.getView().setBusy(false);
this.getView().unbindObject();
this.getRouter().getTargets().display("object");
},
_oResourceBundle: function() {
var oBundle = this.getView().getModel("i18n").getResourceBundle();
return oBundle;
}
});
});