基本信息

案例ID:203969

技术顾问:xinxin - 4年经验 - 蓝气球(北京)医学研究有限公司

联系沟通

微信扫码,建群沟通

项目名称:上传大文件

所属行业:电子商务 - B2C

->查看更多案例

案例介绍

RDMP本质上是一个项目管理工具,旨在管理项目、项目下的里程碑&任务、对各个任务进行配置;并以任务驱动的方式,使得所有任务得以流转起来。
业务:工作台(首页)某一模块为我的任务。展示形式是列表。点击任务名称弹框在进行中状态下可上传文件。产品设计需求为一个上传进度窗口,悬浮于所有页面、弹窗之上,支持展开/收起,显示当下所有正在上传的文件,允许追加;类似一个统一查看下载进度的弹框。可以支持用户关闭任务弹框后仍执行上传进度操作。任务弹窗内的A文件上传进度需与右下角上传进度窗口的该文件A进度同步变化。状态包括:正在上传中(上传过程中需展示上传进度百分比),上传失败,上传成功。上传进度窗口导航栏三种状态:正在上传中,弹窗导航栏显示:“正在上传+导入成功数量/总数量”;上传结束,但存在部分上传失败,弹窗导航栏显示:“部分上传失败+(成功数量+失败数量)”;全部上传成功,弹窗导航栏显示:“全部上传成功+(总数量)“;上传进度窗口内容区展示为上传文件进度列表,上传中的文件支持取消上传。上传失败的支持断点续传。可点击列表内的每一条文件跳转到对应的任务详情
每个任务的所有文件上传结束后,均需右上角Toast提示:文件全部上传成功:【任务名称】文件上传已完成(成功数量)点击查看详情;文件部分上传失败:【任务名称】部分文件上传失败(失败数量)点击查看详情;点击【点击查看详情】,直接弹窗至对应任务详情,当前所在路径保持不变;
实现技术方式:通过pinia状态管理工具管理所有文件数据。数据池中的数据结构为一个记录所有文件对象的数组。该文件对象为该文件所属的任务id,任务名称name,上传进度progress,上传状态status,是否删除isDelete,文件主键fileId,上传错误提示errMsg。使用oss上传api获取进度,断点续传方式。在任务弹窗内点击上传时把数据追加到pinia的数据池中。任务弹框内、右下角上传进度窗口回显数据池中的文件数据。实际上传操作在右下角上传进度窗口中执行。同时根据oss获取进度修改对应文件的进度和状态。实现任务弹框与右下角上传弹窗进度同步。右下角上传弹窗通过this.$el.parentNode.insertBefore(this.component.$el, this.$el.nextSibling)添加。所有对文件的操作都对数据池中的数据进行操作。

相似案例推荐

其他人才的相似案例推荐

发布任务

企业点击发布任务,工程师会在任务下报名,招聘专员也会在1小时内与您联系,1小时内精准确定人才

微信接收人才推送

关注猿急送微信平台,接收实时人才推送

接收人才推送
联系聘用方端客服
联系聘用方端客服