sapui5 - 如何使用Uploadset实现待处理附件？

Question

目前还没有发布好的、完整的指南来帮助用户加快如何使用最新的 UploadSet 控件实现挂起的附件。

Answer 1

***欢迎改进。

这是待上传的完整实现，具有以下附加功能:

• 加载附件，
• 用于(取消)选择所有文件的复选框，以方便用户，
• 下载，以及
• 上传/下载时出现忙碌指示器。

提示:避免使用名为 UploadCollection 的其他控件，该控件存在太多错误，并且在尝试找出替代方案时浪费了太多时间。 UploadSet 是您无缺陷、 Shiny 、最好的 friend 。

外观:*复选框的对齐和控件视觉效果的修改是通过自定义 CSS 完成的(本答案中引用)

先决条件:

• 支架sap/m/MessageBox作为MessageBox和sap/m/MessageToast作为MessageToast
• UploadSet 的命名空间:xmlns:up="sap.m.upload"
• 在全局或在每个使用 that 的函数中定义 var that = this

1. 查看:

   <up:UploadSet id="attachmentUpl" instantUpload="false" maxFileSize="2" noDataDescription="" noDataText="" selectionChanged="onSelectionChangeAttachment"
   uploadCompleted="onUploadCompleted" uploadUrl="/sap/opu/odata/sap/Z9NRS_CONFIG_SRV/Z9NRS_REQ_ATTACHSet" visible="true">
       <up:toolbar>
           <OverflowToolbar>
               <CheckBox id="checkbox" select="onSelectAllAttachments" visible="false" />
               <ToolbarSpacer/>
               <Button id="upload" enabled="true" text="Upload" press="onStartUpload" type="Transparent" visible="true" />
               <Button id="remove" enabled="false" icon="sap-icon://delete" press="onRemove" type="Transparent" visible="true" />
               <Button id="download" enabled="false" icon="sap-icon://download" press="onDownload" type="Transparent" visible="true" />
           </OverflowToolbar>
       </up:toolbar>
   </up:UploadSet>
   

2. Controller :

在onInit内:

var oAttachmentUpl= this.byId('attachmentUpl').getDefaultFileUploader();
oAttachmentUpl.setIcon("sap-icon://add").setIconOnly(true);
oAttachmentUpl.setMultiple(true); //lets user select more than 1file at a time in their FileExplorer

加载附件:

loadAttachments:function(){
      var sPath= "/Z9NRS_REQ_ATTACHSet?$filter=(ZNRS_REQUEST eq '"+sRequestId+"')";
      var oAttachmentUpl= this.byId("attachmentUpl");
      oAttachmentUpl.getList().setMode("MultiSelect");
      this.getView().getModel().read(sPath,{
        success:function(oData){
            var oAttachmentsModel= new JSONModel(oData);
            oAttachmentUpl.setModel(oAttachmentsModel).bindAggregation("items", "/results", new sap.m.upload.UploadSetItem({
                fileName: "{FILE_NAME}", mediaType: "{MIME_TYPE}", visibleEdit:false, visibleRemove:false,
                url: "/sap/opu/odata/sap/Z9NRS_CONFIG_SRV/Z9NRS_REQ_ATTACHSet(ZNRS_REQUEST='" + "{OBJECT_ID}" + "',FILE_NAME='" + "{FILE_NAME}" + "')/$value"
            }));
            if(oAttachmentUpl.getItems().length>0){
                that.byId('checkbox').setVisible(true);
            }
        },
        error:function(oError){that.parseErrorMsg()}
    });
}

其他一切:

onSelectAllAttachments: function(oEvent) {
    var aUploadedItems = this.byId("attachmentUpl").getItems(),
      bSelected = oEvent.getSource().getSelected();
    if (bSelected) { //if CheckBox is selected
      aUploadedItems.forEach(oItem => oItem.getListItem().setSelected(true));
      this.byId('download').setEnabled(true);
    } else {
      aUploadedItems.forEach(oItem => oItem.getListItem().setSelected(false));
      this.byId('remove').setEnabled(false);
      this.byId('download').setEnabled(false);
    }
  },
  onSelectionChangeAttachment: function() {
    if (this.byId("attachmentUpl").getList().getSelectedItems().length > 0) { //if user selects 1 or more uploaded item
      this.byId("remove").setEnabled(true);
      this.byId("download").setEnabled(true);
    } else {
      this.byId("remove").setEnabled(false);
      this.byId("download").setEnabled(false);
    }
  },
  onRemove: function(oEvent) {
    var oAttachmentUpl = this.byId("attachmentUpl");
    oAttachmentUpl.setBusy(true);
    oAttachmentUpl.getItems().forEach(oItem => {
      if (oItem.getListItem().getSelected()) {
        var sPath = oItem.getProperty("url").split("SRV")[1]; //eg /Z9NRS_REQ_ATTACHSet
        this.getView().getModel().remove(sPath, {
          success: function() {
            oAttachmentUpl.removeItem(oItem); //remove from displayed list
          },
          error: function(oError) {
            that.parseErrorMsg();
          }
        });
      }
    });
    oEvent.getSource().setEnabled(false);
    this.byId("download").setEnabled(false);

    if (oAttachmentUpl.getItems().length > 0) {
      this.byId('checkbox').setVisible(true);
    } else {
      this.byId('checkbox').setVisible(false);
    }
    oAttachmentUpl.setBusy(false);
  },
  onDownload: function(oEvent) {
    var oAttachmentUpl = this.byId("attachmentUpl");
    oAttachmentUpl.setBusy(true);
    oAttachmentUpl.getItems().forEach(oItem => {
      if (oItem.getListItem().getSelected()) {
        oItem.download(true);
        oItem.getListItem().setSelected(false);
      }
    });
    oAttachmentUpl.setBusy(false);
    oEvent.getSource().setEnabled(false);
  },
  onStartUpload: function() {
    var oAttachmentUpl = this.byId("attachmentUpl");
    var aIncompleteItems = oAttachmentUpl.getIncompleteItems();
    this.iIncompleteItems = aIncompleteItems.length; //used to turn off busy indicator upon completion of all pending uploads
    if (this.iIncompleteItems !== 0) {
      oAttachmentUpl.setBusy(true);
      this.i = 0; //used to turn off busy indicator when all uploads complete
      for (var i = 0; i < this.iIncompleteItems; i++) {
        var sFileName = aIncompleteItems[i].getProperty("fileName");
        var oXCSRFToken = new sap.ui.core.Item({
          key: "X-CSRF-Token",
          text: this.getOwnerComponent().getModel().getSecurityToken()
        });
        var oSlug = new sap.ui.core.Item({
          key: "SLUG",
          text: this.sRequestId + "/" + sFileName
        });
        oAttachmentUpl.addHeaderField(oXCSRFToken).addHeaderField(oSlug).uploadItem(aIncompleteItems[i]);
        oAttachmentUpl.removeAllHeaderFields(); //at least slug header field must be reset after each upload
      }
    }
  },
  onUploadCompleted: function() {
    this.i += 1;
    if (this.i === this.iIncompleteItems) { //turn off busy indicator when all attachments have completed uploading
      this.byId('attachmentUpl').setBusy(false);
    }
  },
  parseErrorMsg: function(oError) { //parses oData error messages dependent on different return values
    var oMessage, sType;
    if (oError.response) { //for update
      sType = typeof oError.response;
      if (sType === "string" || sType === "object") oMessage = JSON.parse(oError.response.body).error.message.value;
      else return MessageBox.error("Unhandled server error:\n\n" + oError.response + "\n\nReport this issue to Admin for a future fix.");
    } else if (oError.responseText) { //for create
      sType = typeof oError.responseText;
      if (sType === "string" || sType === "object") oMessage = JSON.parse(oError.responseText).error.message.value;
      else return MessageBox.error("Unhandled server error:\n\n" + oError.responseText + "\n\nReport this issue to Admin for a future fix.");
    } else if (!oError) return MessageToast.show("Error message is undefined");
    MessageBox.error(oMessage);
  }

CSS:

/*uploadSet: align toolbar checkbox with ListItems' checkboxes*/
.sapMIBar.sapMTB.sapMTBNewFlex.sapMTBInactive.sapMTBStandard.sapMTB-Transparent-CTX {
    padding-left: 2px;
}
/*uploadSet: reduce height of each uploadItem*/
.sapMLIB.sapMLIB-CTX.sapMLIBShowSeparator.sapMLIBTypeInactive.sapMLIBFocusable.sapMCLI.sapMUCItem {
    padding-top: 10px;
    padding-bottom: 5px;
}
/*uploadSet: align uploadItem checkboxes to center*/
.sapMCb.sapMLIBSelectM {
    align-self: center !important;
}
/*uploadSet: remove rename icon from pending files*/
.sapMBtnBase.sapMBtn.sapMUCEditBtn.sapMUCFirstButton {
    display: none;
}
/*uploadSet: remove pending bar and text*/
.sapMFlexBox.sapMVBox.sapMFlexBoxJustifyStart.sapMFlexBoxAlignItemsStretch.sapMFlexBoxWrapNoWrap.sapMFlexBoxAlignContentStretch.sapMFlexBoxBGTransparent.sapMUSProgressBox {
    display: none;
}
/*uploadSet: center the x button for pending files*/
.sapMUCButtonContainer {
    align-self: center;
}

只需按上传按钮(位于UploadSet工具栏中)即可上传所有待处理的附件。

为了让您的实现正常运行，需要自定义所有项目:

• sPath 用于 loadAttachments 函数中的 oData 调用以及 UploadSetItem 中的几乎所有参数
• UploadSet 控件的uploadUrl 属性
• sPath 用于 onRemove 函数中的 oData 调用
• onStartUpload 函数中的 SLUG header text 值

不包括的功能:

• 上传完成后刷新UploadSet的项目列表