devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【sgUploadTray_v2】自定义组件：升级版上传托盘自定义组件，可实时查看上传列表进度，可以通过选项卡切换上传中、成功、失败的队列，支持翻页，解决了列表内容太多导致卡顿的情况。

作者：Cpp五条 | 2024-03-20 15:00:57

赞

踩

【sgUploadTray_v2】自定义组件：升级版上传托盘自定义组件，可实时查看上传列表进度，可以通过选项卡切换上传中、成功、失败的队列，支持翻页，解决了列表内容太多导致卡顿的情况。

2024年3月20日 更新特性：支持任务管理设置同时上传的最大任务数，满足个性化同时上传数量需求。

特性：

  1. 可以全屏
  2. 可以还原尺寸、拖拽调整托盘尺寸
  3. 可以最小化
  4. 可以回到右下角默认位置
  5. 支持删除队列数据（支持一键清除所有上传记录）
  6. 支持清空已经上传成功的记录
  7. 上传过程在百分号右侧会有旋转加载动画
  8. 支持提示上传超大文件的title
  9. 实时加载上传进度条（逼真的已加载数据大小）
  10. 支持清除队列中失败的记录
  11. 支持显示实时上传速度、已耗时间、剩余上传时间
  12. 支持项卡切换上传中、成功、失败的队列
  13. 支持列表翻页
  14. 支持动态设置【同时上传的最大任务数】

sgUploadTray_v2源码 

  1. <template>
  2.   <!-- 
  3. 新特性：
  4. 1、支持用户自定义同时上传任务数量2024.03.19
  6.    -->
  7.   <div :class="$options.name" :show="show" :size="size" :style="style">
  8.     <div class="upload-list-tray">
  9.       <!-- 托盘头部 -->
  10.       <div class="header" ref="header" @dblclick.stop.prevent="dblclickHeader">
  11.         <div class="left">
  12.           <div class="title">
  13.             <span class="upload-count" slot="reference">上传队列</span>
  14.             <div class="upload-info" v-if="liveSpeed && liveSpeed > 0">
  15.               <el-divider :direction="`vertical`" />
  16.               <div class="info-item live-speed">
  17.                 <label>速度</label>
  18.                 <span>{{ $g.getSize(liveSpeed) }}/s</span>
  19.               </div>
  20.               <div class="info-item taken-time" v-if="takenTime && takenTime > 0">
  21.                 <label>已耗时</label>
  22.                 <span>{{
  23.                   $g.date.toHourMinuteSecondByMillisecond(takenTime * 1000, {
  24.                     zh: true, //中文单位
  25.                     hideMilliSecond: true, //隐藏毫秒
  26.                     hideZero: true, //隐藏为0的时间单位
  27.                   })
  28.                 }}</span>
  29.               </div>
  30.               <div class="info-item remain-time" v-if="remainTime && remainTime > 0">
  31.                 <label>剩余</label
  32.                 ><span>{{
  33.                   $g.date.toHourMinuteSecondByMillisecond(remainTime * 1000, {
  34.                     zh: true, //中文单位
  35.                     hideMilliSecond: true, //隐藏毫秒
  36.                     hideZero: true, //隐藏为0的时间单位
  37.                   })
  38.                 }}</span>
  39.               </div>
  40.             </div>
  41.           </div>
  42.         </div>
  43.         <div class="right" @mousedown.stop>
  44.           <!-- 控制文件的图标按钮 -->
  45.           <div class="file-btns" v-if="showDelSuccessIconBtn || showErrorIconBtn">
  46.             <div
  47.               class="icon-btn"
  48.               v-if="showDelSuccessIconBtn"
  49.               @dblclick.stop
  50.               @click.stop="clearAllSuccessFile"
  51.               title="清除所有已经成功的上传记录"
  52.             >
  53.               <i class="el-icon-delete" style="color: #67c23a"></i>
  54.             </div>
  55.             <div
  56.               class="icon-btn"
  57.               v-if="showErrorIconBtn"
  58.               @dblclick.stop
  59.               @click.stop="clearAllErrorFile"
  60.               title="清除所有失败的上传记录"
  61.             >
  62.               <i class="el-icon-delete-solid" style="color: #f56c6c"></i>
  63.             </div>
  64.             <div
  65.               class="icon-btn"
  66.               v-if="showErrorIconBtn"
  67.               @dblclick.stop
  68.               @click.stop="uploadAllErrorFile"
  69.               title="重新上传所有失败的文件"
  70.             >
  71.               <i class="el-icon-upload2" style="color: #409eff"></i>
  72.             </div>
  73.           </div>
  74.           <!-- 控制托盘的图标按钮 -->
  75.           <div class="tray-btns">
  76.             <div
  77.               class="icon-btn"
  78.               v-if="size !== 'lg' && showRightBottomBtn"
  79.               @dblclick.stop
  80.               @click.stop="toRightBottomPosition"
  81.               title="回到原来的位置"
  82.             >
  83.               <i class="el-icon-bottom-right"></i>
  84.             </div>
  85.             <div
  86.               class="icon-btn"
  87.               v-if="size !== 'mn'"
  88.               @dblclick.stop
  89.               @click.stop="size = 'mn'"
  90.               title="最小化"
  91.             >
  92.               <i class="el-icon-minus"></i>
  93.             </div>
  94.             <div
  95.               class="icon-btn"
  96.               v-if="size !== 'md'"
  97.               @dblclick.stop
  98.               @click.stop="size = 'md'"
  99.               title="还原"
  100.             >
  101.               <i :class="size === 'lg' ? 'el-icon-copy-document' : 'el-icon-d-caret'"></i>
  102.             </div>
  103.             <div
  104.               class="icon-btn"
  105.               v-if="size !== 'lg'"
  106.               @dblclick.stop
  107.               @click.stop="size = 'lg'"
  108.               title="全屏"
  109.             >
  110.               <i class="el-icon-full-screen"></i>
  111.             </div>
  112.             <div class="icon-btn" @dblclick.stop @click.stop="close">
  113.               <i class="el-icon-close"></i>
  114.             </div>
  115.           </div>
  116.         </div>
  117.       </div>
  118.       <div class="body">
  119.         <div class="left" :collapse="collapseMenu">
  120.           <el-menu
  121.             :show-timeout="0"
  122.             :default-active="defaultMenuActive"
  123.             :background-color="'white'"
  124.             :text-color="'#333'"
  125.             :active-text-color="'#409EFF'"
  126.             :collapse="collapseMenu"
  127.             :unique-opened="false"
  128.             @select="menuSelect"
  129.           >
  130.             <template v-for="(a, i) in menuList">
  131.               <!-- 有子栏目--->
  132.               <el-submenu
  133.                 :key="i"
  134.                 :index="a.path"
  135.                 v-if="a.children && a.children.length"
  136.                 :disabled="a.disabled"
  137.               >
  138.                 <template slot="title">
  139.                   <i :class="a.icon" v-if="a.icon" />
  140.                   <span>{{ a.label }}</span>
  141.                 </template>
  142.                 <el-menu-item-group>
  143.                   <el-menu-item
  144.                     v-for="(a, i) in a.children"
  145.                     :key="i"
  146.                     :index="a.path"
  147.                     :disabled="a.disabled"
  148.                   >
  149.                     <i :class="a.icon" v-if="a.icon" />
  150.                     <span>{{ a.label }}</span>
  151.                   </el-menu-item>
  152.                 </el-menu-item-group>
  153.               </el-submenu>
  154.               <!-- 没有子栏目-->
  155.               <el-tooltip
  156.                 :content="a.label"
  157.                 :placement="`left`"
  158.                 :disabled="!collapseMenu"
  159.                 v-else
  160.               >
  161.                 <el-menu-item :key="i" :index="a.path" :disabled="a.disabled">
  162.                   <i :class="a.icon" v-if="a.icon" />
  163.                   <span>{{ a.label }}</span>
  164.                 </el-menu-item>
  165.               </el-tooltip>
  166.             </template>
  167.           </el-menu>
  168.           <!-- 折叠按钮 -->
  169.           <div class="collapseBtn" @click="collapseMenu = !collapseMenu">
  170.             <i class="el-icon-caret-right" v-if="collapseMenu" />
  171.             <i class="el-icon-caret-left" v-else />
  172.           </div>
  173.         </div>
  174.  
  175.         <!-- 设置 ------------------------------------------>
  176.         <div class="right" v-if="defaultMenuActive === `set`">
  177.           <div class="set-list">
  178.             <el-collapse v-model="collapseActiveName_set" accordion>
  179.               <el-collapse-item
  180.                 :name="parseInt(index)"
  181.                 v-for="(item, index) in collapseItems_set"
  182.                 :key="index"
  183.               >
  184.                 <template slot="title">
  185.                   <h1>{{ item.title }}</h1>
  186.                 </template>
  187.                 <div class="form-body">
  188.                   <el-form @submit.native.prevent label-position="right" size="mini">
  189.                     <el-form-item :label="`同时上传的最大任务数`" label-width="">
  190.                       <el-input-number
  191.                         style="width: 100px"
  192.                         v-model.trim="setData.uploadMaxCount"
  193.                         :precision="0"
  194.                         :step="1"
  195.                         :min="0"
  196.                         :max="10"
  197.                         :controls-position="`left`"
  198.                       />
  199.                     </el-form-item>
  200.                   </el-form>
  201.                 </div>
  202.               </el-collapse-item>
  203.             </el-collapse>
  204.           </div>
  205.         </div>
  206.  
  207.         <!-- 上传中的文件列表 ------------------------------------------>
  208.         <div class="right" v-else>
  209.           <div class="upload-file-list">
  210.             <ul v-if="tableData.length">
  211.               <li
  212.                 v-for="(a, i) in tableData"
  213.                 :key="i"
  214.                 :title="
  215.                   a.size > 1024 * 1024 * 500
  216.                     ? `超大文件上传中，请耐心等待，切勿关闭或刷新浏览器！`
  217.                     : ''
  218.                 "
  219.               >
  220.                 <div class="left">
  221.                   <div class="icon-btns">
  222.                     <el-button
  223.                       title="移出上传队列"
  224.                       :show="a.status === 'error'"
  225.                       class="remove-icon-btn icon-btn"
  226.                       type="danger"
  227.                       icon="el-icon-delete-solid"
  228.                       size="mini"
  229.                       plain
  230.                       circle
  231.                       @click.stop="removeUploadFile(a)"
  232.                     ></el-button>
  233.                   </div>
  234.                   <!-- 动画加载旋转 -->
  235.                   <div
  236.                     class="fileLoading"
  237.                     v-loading="a.percent <= 100"
  238.                     v-if="a.status !== 'error' && a.status !== 'success'"
  239.                   ></div>
  240.                   <!-- 上传成功icon -->
  241.                   <div class="loadingSuccessIcon" v-if="a.status === `success`">
  242.                     <i class="el-icon-success" style="color: #67c23a"></i>
  243.                   </div>
  244.                   <!-- 上传失败icon -->
  245.                   <div class="loadingEorrorIcon" v-if="a.status === 'error'">
  246.                     <i class="el-icon-error" style="color: #f56c6c"></i>
  247.                   </div>
  248.                   <span class="name" :title="a.filePath || a.name">
  249.                     {{ a.filePath || a.name }}
  250.                     <!-- {{ a.filePath && a.filePath.includes(`/`) ? `[路径：${a.filePath}]` : "" }} -->
  251.                   </span>
  252.                   <el-tag class="size" size="mini"
  253.                     >{{ $g.getSize(a.size * (a.percent / 100)) }}/{{
  254.                       $g.getSize(a.size)
  255.                     }}</el-tag
  256.                   >
  257.                   <!-- <el-progress class="progress" :percentage="a.percent"></el-progress> -->
  258.                   <el-progress
  259.                     class="progress"
  260.                     style="width: 100%"
  261.                     type="line"
  262.                     :percentage="parseInt(a.percent)"
  263.                     :show-text="true"
  264.                     :stroke-width="10"
  265.                     :text-inside="false"
  266.                     :color="'#409EFF'"
  267.                     :define-back-color="'#eee'"
  268.                   />
  269.                 </div>
  270.                 <div class="right">
  271.                   <span class="tip" :color="a.color">{{ a.tip }}</span>
  272.                   <div class="icon-btns">
  273.                     <el-button
  274.                       v-if="a.status !== 'uploading'"
  275.                       title="重新上传"
  276.                       class="upload-icon-btn icon-btn"
  277.                       type="primary"
  278.                       icon="el-icon-upload2"
  279.                       size="mini"
  280.                       plain
  281.                       circle
  282.                       @click.stop="startUploadFile(a)"
  283.                     ></el-button>
  284.                   </div>
  285.                 </div>
  286.               </li>
  287.             </ul>
  288.             <!-- 自定义空状态 -->
  289.             <el-empty v-else>
  290.               <div slot="image"><img :src="require('@/assets/404.png')" /></div>
  291.               <div slot="description">{{ getEmptyText() }}</div>
  292.             </el-empty>
  293.           </div>
  294.           <el-pagination
  295.             style="width: 100%; text-align: center; margin-top: 10px"
  296.             background
  297.             :hidden="total <= 10"
  298.             :layout="`total, sizes, prev, pager, next, jumper`"
  299.             :page-sizes="[10, 20, 50, 100]"
  300.             :pager-count="7"
  301.             :current-page.sync="currentPage"
  302.             :page-size.sync="pageSize"
  303.             :total="total"
  304.             @size-change="initList"
  305.             @current-change="initList"
  306.           />
  307.         </div>
  308.       </div>
  309.       <div class="footer">
  310.         <div class="text" v-html="popoverContent"></div>
  311.         <div class="progress" v-if="uploadList.length > 1 && totalPercentage < 100">
  312.           <label>。总进度</label>
  313.           <el-progress
  314.             style="width: 100%"
  315.             type="line"
  316.             :percentage="parseInt(totalPercentage)"
  317.             :show-text="true"
  318.             :stroke-width="10"
  319.             :text-inside="false"
  320.             :color="'#409EFF'"
  321.             :define-back-color="'#eee'"
  322.           />
  323.         </div>
  324.       </div>
  325.     </div>
  326.  
  327.     <!-- 拖拽移动窗体 -->
  328.     <sgDragMove
  329.       :data="dragMoveDoms"
  330.       :cursor="{
  331.         grab: 'default',
  332.         grabbing: 'default',
  333.       }"
  334.       nearPadding="10"
  335.       :disabled="size === 'lg' && disabledDragMove"
  336.       @dragStart="$emit(`dragStart`, dragMoveDoms)"
  337.       @dragging="
  338.         showRightBottomBtn = true;
  339.         $emit(`dragging`, dragMoveDoms);
  340.       "
  341.       @dragEnd="$emit(`dragEnd`, dragMoveDoms)"
  342.       mousemoveNearSide
  343.     />
  344.  
  345.     <!-- 拖拽改变窗体尺寸 -->
  346.     <sgDragSize
  347.       v-if="resizeable_"
  348.       :disabled="size === 'lg'"
  349.       @dragStart="disabledDragMove = true"
  350.       @dragging="draggingSize"
  351.       @dragEnd="disabledDragMove = false"
  352.       :minWidth="minWidth"
  353.       :minHeight="minHeight"
  354.     />
  355.   </div>
  356. </template>
  357. <script>
  358. import sgDragMove from "@/vue/components/admin/sgDragMove";
  359. import sgDragSize from "@/vue/components/admin/sgDragSize";
  360. export default {
  361.   name: "sgUploadTray_v2",
  362.   components: {
  363.     sgDragMove,
  364.     sgDragSize,
  365.   },
  366.   data() {
  367.     return {
  368.       currentPage: 1,
  369.       pageSize: 10,
  370.       total: 0,
  371.       tableData: [], //当前显示队列（不代表所有的上传队列，只为不要太卡）
  372.  
  373.       // maxShowUploadFileCount: 10, //默认展示上传数量
  374.       // expandAllUploadList: false, //默认折叠
  375.  
  376.       minWidth: 950,
  377.       minHeight: 40,
  378.       style_bk: null,
  379.       style: {},
  380.       resizeable_: true,
  381.       disabledDragMove: false, //屏蔽移动
  382.       show: false,
  383.       showRightBottomBtn: false,
  384.       size: "md", //lg全屏、md普通、mn最小
  385.       uploadList: [],
  386.       uploadingFiles: [], //真正上传中的文件对象数组
  387.       dragMoveDoms: [
  388.         /* {
  389.           canDragDom: elementDOM,//可以拖拽的位置元素
  390.           moveDom: elementDOM,//拖拽同步移动的元素
  391.       } */
  392.       ], //可以拖拽移动的物体
  393.  
  394.       lastUploadedTotalSize: 0, //记录上次已经下载完成的总大小
  395.       liveSpeed: 0, //瞬时下载速度(单位B)
  396.       takenTime: 0, //已耗时
  397.       remainTime: 0, //剩余下载时长
  398.       interval: null,
  399.       second: 1, //轮训间隔秒钟
  400.  
  401.       successFileList: [], //成功文件列表
  402.       errorFileList: [], //失败文件列表
  403.       remainFileList: [], //剩余文件列表
  404.  
  405.       collapseActiveName_set: 0,
  406.       collapseItems_set: [
  407.         // { value: 1, title: "基本设置", content: "开发中" },
  408.         { value: 2, title: "任务管理", content: "开发中" },
  409.         // { value: 3, title: "上传设置", content: "开发中" },
  410.         // { value: 4, title: "提醒", content: "开发中" },
  411.         // { value: 5, title: "高级设置", content: "开发中" },
  412.       ],
  413.  
  414.       // defaultMenuActive: `uploading`, //当前激活菜单的 index
  415.       defaultMenuActive: `set`, //测试
  416.       collapseMenu: false, //是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）
  417.       menuList: [
  418.         {
  419.           label: "上传中",
  420.           path: "uploading",
  421.           icon: "el-icon-upload2",
  422.         },
  423.         {
  424.           label: "已完成",
  425.           path: "success",
  426.           icon: "el-icon-success",
  427.         },
  428.         {
  429.           label: "失败",
  430.           path: "error",
  431.           icon: "el-icon-error",
  432.         },
  433.         {
  434.           label: "设置",
  435.           path: "set",
  436.           icon: "el-icon-s-tools",
  437.         },
  438.       ],
  439.  
  440.       setData: {
  441.         uploadMaxCount: 5, //同时上传的最大任务数
  442.       }, //上传设置配置参数
  443.     };
  444.   },
  445.   props: ["data", "value", "resizeable", "position"],
  446.   watch: {
  447.     setData: {
  448.       handler(d) {
  449.         this.$store.getters._global.uploadSet = d;
  450.       },
  451.       deep: true,
  452.       immediate: true,
  453.     },
  454.     value: {
  455.       handler(d) {
  456.         this.show = d;
  457.       },
  458.       deep: true,
  459.       immediate: true,
  460.     },
  461.     show: {
  462.       handler(d) {
  463.         d && (this.defaultMenuActive = `uploading`);
  464.         this.$emit(`input`, d);
  465.       },
  466.       deep: true,
  467.       immediate: true,
  468.     },
  469.     data: {
  470.       handler(d) {
  471.         this.uploadList = d || [];
  472.       },
  473.       deep: true,
  474.       immediate: true,
  475.     },
  476.     uploadList: {
  477.       handler(newValue, oldValue) {
  478.         if (newValue && Object.keys(newValue).length) {
  479.           this.interval || this.startUploadCalcLiveSpeed();
  480.           this.successFileList = newValue.filter((v) => v.status === `success`); //成功队列
  481.           this.errorFileList = newValue.filter((v) => v.status === "error"); //失败队列
  482.           this.remainFileList = newValue.filter(
  483.             (v) => v.status !== "error" && v.status !== "success"
  484.           ); //还需要上传的队列
  485.         } else {
  486.           this.successFileList = [];
  487.           this.errorFileList = [];
  488.           this.remainFileList = [];
  489.         }
  490.         // 计算正上传中的文件对象数组----------------------------------------
  491.         this.uploadingFiles = (newValue || []).filter((v) => v.status === "uploading");
  492.         this.$emit(`changeUploadingListClose`, {
  493.           path: this.position,
  494.           close: this.close,
  495.         });
  496.         // ----------------------------------------
  497.         this.initList();
  498.       },
  499.       deep: true, //深度监听
  500.       immediate: true, //立即执行
  501.     },
  502.     resizeable: {
  503.       handler(newValue, oldValue) {
  504.         this.resizeable_ = newValue === "" || newValue;
  505.       },
  506.       deep: true, //深度监听
  507.       immediate: true, //立即执行
  508.     },
  509.     size: {
  510.       handler(newValue, oldValue) {
  511.         switch (newValue) {
  512.           case "lg":
  513.           case "mn":
  514.             this.style_bk = JSON.parse(JSON.stringify(this.style));
  515.             delete this.style.width, delete this.style.height;
  516.             break;
  517.           case "md":
  518.             this.style_bk && (this.style = JSON.parse(JSON.stringify(this.style_bk)));
  519.             break;
  520.         }
  521.       },
  522.       deep: true, //深度监听
  523.       immediate: true, //立即执行
  524.     },
  525.   },
  526.   computed: {
  527.     showDelSuccessIconBtn(d) {
  528.       return this.uploadList.some((v) => v.status === `success`);
  529.     },
  530.     showErrorIconBtn(d) {
  531.       return this.uploadList.some((v) => v.status === "error");
  532.     },
  533.     popoverContent(d) {
  534.       let r = [];
  535.       this.successFileList.length &&
  536.         r.push(
  537.           `已上传成功<span style="color: #67C23A;">${this.successFileList.length}</span>个`
  538.         );
  539.       this.errorFileList.length &&
  540.         r.push(`失败<span style="color: #F56C6C;">${this.errorFileList.length}</span>个`);
  541.       this.remainFileList.length &&
  542.         r.push(
  543.           `剩余<span style="color: #409EFF;">${this.remainFileList.length}</span>个`
  544.         );
  545.       if (this.uploadList.length) {
  546.         return `共计${this.uploadList.length}个文件，${
  547.           r.length ? `${r.join("，")}文件` : ``
  548.         }`;
  549.       } else {
  550.         return `暂无待上传文件`;
  551.       }
  552.     },
  553.     // 总体进度
  554.     totalPercentage() {
  555.       if (this.uploadList.length) {
  556.         return parseFloat(
  557.           ((this.successFileList.length / this.uploadList.length) * 100).toFixed(2)
  558.         );
  559.       } else {
  560.         return 0;
  561.       }
  562.     },
  563.   },
  564.   mounted() {
  565.     this.$el.style.setProperty("--minWidth", `${this.minWidth}px`); //js往css传递局部参数
  566.     this.$el.style.setProperty("--minHeight", `${this.minHeight}px`); //js往css传递局部参数
  567.     this.dragMoveDoms = [
  568.       {
  569.         canDragDom: this.$refs.header, //托盘的头部可以拖拽
  570.         moveDom: this.$el, //拖拽的时候，整个上传列表一起跟随移动
  571.       },
  572.     ];
  573.   },
  574.   destroyed() {
  575.     clearInterval(this.interval);
  576.   },
  577.   methods: {
  578.     saveSet(d) {},
  579.     getEmptyText() {
  580.       let label = (this.menuList.find((v) => v.path === this.defaultMenuActive) || {})
  581.         .label;
  582.       return `暂无${label ? `${label}的` : ``}文件`;
  583.     },
  584.     //菜单激活回调
  585.     menuSelect(index, path) {
  586.       this.defaultMenuActive = index;
  587.       //做其他操作
  588.       this.initList();
  589.     },
  590.  
  591.     //静态数据翻页（支持筛选搜索）
  592.     initList({ keyword = this.keyword } = {}) {
  593.       let results = this.uploadList.filter((v) =>
  594.         keyword ? v.name.includes(keyword) : true
  595.       );
  596.       switch (this.defaultMenuActive) {
  597.         case "uploading":
  598.           results = results.filter(
  599.             (v, i, ar) => v.status === `uploading` || v.status === ``
  600.           );
  601.           break;
  602.         case "success":
  603.         case "error":
  604.           results = results.filter((v, i, ar) => v.status === this.defaultMenuActive);
  605.           break;
  606.         default:
  607.       }
  608.       this.total = results.length;
  609.       this.tableData = results.slice(
  610.         (this.currentPage - 1) * this.pageSize,
  611.         this.currentPage * this.pageSize
  612.       );
  613.     },
  614.  
  615.     // 开始计算瞬时下载速度
  616.     startUploadCalcLiveSpeed() {
  617.       clearInterval(this.interval);
  618.       this.interval = setInterval(() => {
  619.         this.calcLiveSpeed();
  620.       }, 1000 * this.second);
  621.     },
  622.     // 结束计算瞬时下载速度
  623.     endUploadCalcLiveSpeed(d) {
  624.       clearInterval(this.interval);
  625.       this.interval = null;
  626.       this.liveSpeed = 0;
  627.       this.takenTime = 0;
  628.       this.remainTime = 0;
  629.     },
  630.     // 没有上传进程文件才结束计算速度
  631.     ifNoUploadingFile_EndCalcLiveSpeed(d) {
  632.       this.uploadingFiles.length || this.endUploadCalcLiveSpeed();
  633.     },
  634.     // 计算瞬时下载速度
  635.     calcLiveSpeed(d) {
  636.       this.takenTime++;
  637.       let uploadList = this.uploadList;
  638.       if (uploadList.length) {
  639.         let totalSize = uploadList.reduce(
  640.           (prevResult, current) => prevResult + current.size,
  641.           0
  642.         ); //求和需要上传的文件总大小
  643.         let uploadedTotalSize = uploadList.reduce(
  644.           (prevResult, current) => prevResult + current.size * (0.01 * current.percent),
  645.           0
  646.         ); //求和已经上传的文件总大小
  647.         let remainTotalSize = totalSize - uploadedTotalSize; //剩余需要上传的文件
  648.         if (this.lastUploadedTotalSize) {
  649.           this.liveSpeed = (uploadedTotalSize - this.lastUploadedTotalSize) / this.second; //瞬时速度
  650.           this.remainTime = remainTotalSize / this.liveSpeed; //瞬时剩余时长
  651.         } else {
  652.           this.liveSpeed = 0;
  653.         }
  654.         this.lastUploadedTotalSize = uploadedTotalSize; //记录本次已经上传的总大小
  655.       } else {
  656.         this.endUploadCalcLiveSpeed();
  657.       }
  658.     },
  659.     clearAllSuccessFile() {
  660.       let successFileList = this.uploadList.filter((v) => v.status === `success`);
  661.       if (successFileList.length === 0)
  662.         return this.$message(`暂无可以移除的成功记录，请稍后再试！`);
  663.       this.$emit(`clearAllSuccessFile`, successFileList);
  664.       // this.$nextTick(() => {
  665.       successFileList.forEach((file) => file.removeFile()); //移除原始队列&托盘队列
  666.       this.uploadList = this.uploadList.filter((v) => v.percent <= 100);
  667.       // });
  668.     },
  669.     clearAllErrorFile() {
  670.       let errorFileList = this.uploadList.filter((v) => v.status === "error");
  671.       if (errorFileList.length === 0)
  672.         return this.$message(`暂无可以移除的失败记录，请稍后再试！`);
  673.       this.$emit(`clearAllErrorFile`, errorFileList);
  674.       this.$nextTick(() => {
  675.         errorFileList.forEach((file) => file.removeFile()); //移除原始队列&托盘队列
  676.         this.uploadList = this.uploadList.filter((v) => v.status !== "error");
  677.       });
  678.     },
  679.     uploadAllErrorFile(d) {
  680.       let errorFileList = this.uploadList.filter((v) => v.status === "error");
  681.       errorFileList.forEach((fileData) => this.startUploadFile(fileData));
  682.       if (errorFileList.length === 0) return this.$message(`暂无失败记录，请稍后再试！`);
  683.       this.$emit(`uploadAllErrorFile`, errorFileList);
  684.     },
  685.     draggingSize({ style }) {
  686.       this.disabledDragMove = true;
  687.       this.style = style;
  688.     },
  689.     toRightBottomPosition(d) {
  690.       this.showRightBottomBtn = false;
  691.       let rect = this.$el.getBoundingClientRect();
  692.       this.$el.style.left = `${innerWidth - rect.width}px`;
  693.       this.$el.style.top = `${innerHeight - rect.height}px`;
  694.       // 用下面的写法会清除掉setProperty属性
  695.       /* this.$el.style = {
  696.         left: innerWidth - rect.width + "px",
  697.         top: innerHeight - rect.height + "px",
  698.       }; */
  699.     },
  700.     dblclickHeader(d) {
  701.       switch (this.size) {
  702.         case "lg":
  703.           this.size = "md";
  704.           break;
  705.         case "md":
  706.           this.size = "mn";
  707.           break;
  708.         case "mn":
  709.           this.size = "md";
  710.           break;
  711.         default:
  712.           F;
  713.       }
  714.     },
  715.     removeAllFilesFromList() {
  716.       this.uploadList &&
  717.         this.uploadList.length &&
  718.         this.uploadList.slice(-1)[0].removeAllFile(); //移除原始队列&托盘队列
  719.     },
  720.     removeFileFromList(d) {
  721.       d.removeFile(); //移除原始队列&托盘队列
  722.     },
  723.     // 重新上传失败的记录
  724.     startUploadFile(fileData) {
  725.       fileData.startUpload({ handleTrigger: true });
  726.     },
  727.     // 移出某一个队列文件
  728.     removeUploadFile(d) {
  729.       if (d.status === "uploading") {
  730.         this.$confirm(`${d.name}正在上传中，确定要取消吗？`, `提示`, {
  731.           dangerouslyUseHTMLString: true,
  732.           confirmButtonText: `确定`,
  733.           cancelButtonText: `取消`,
  734.           type: "warning",
  735.         })
  736.           .then(() => {
  737.             this.$emit(`stopUpload`, [d]);
  738.             this.$nextTick(() => {
  739.               this.removeFileFromList(d);
  740.               this.ifNoUploadingFile_EndCalcLiveSpeed();
  741.             });
  742.           })
  743.           .catch(() => {});
  744.       } else {
  745.         this.removeFileFromList(d);
  746.       }
  747.     },
  748.     // 关闭托盘
  749.     close({ cb } = {}) {
  750.       let stopUploadList = this.uploadingFiles;
  751.       if (stopUploadList.length) {
  752.         this.$confirm(`您还有正在上传中的文件，确定要取消吗？`, `提示`, {
  753.           dangerouslyUseHTMLString: true,
  754.           confirmButtonText: `确定`,
  755.           cancelButtonText: `取消`,
  756.           type: "warning",
  757.         })
  758.           .then(() => {
  759.             this.doRemove({ stopUploadList, cb });
  760.           })
  761.           .catch(() => {});
  762.       } else {
  763.         this.doRemove({ stopUploadList, cb });
  764.       }
  765.     },
  766.     doRemove({ stopUploadList, cb } = {}) {
  767.       this.show = false;
  768.       this.$emit(`stopUpload`, stopUploadList);
  769.       this.$nextTick(() => {
  770.         this.endUploadCalcLiveSpeed();
  771.         this.removeAllFilesFromList(); //清空上传列表
  772.         cb && cb(stopUploadList); //完成后回调
  773.       });
  774.     },
  775.   },
  776. };
  777. </script>
  778. <style lang="scss" scoped>
  779. .sgUploadTray_v2 {
  780.   $bodyLeftWidth: 150px; //左侧分类菜单宽度
  781.   $headerHeight: 40px; //头部高度
  782.   $footerHeight: 40px; //底部统计上传进度高度
  783.   $minWidth: var(--minWidth); //托盘最小宽度
  784.   $minHeight: var(--minHeight); //托盘最小高度
  785.   $leftIconBtnWidth: 50px; //左侧删除按钮宽度
  786.   $rightIconBtnWidth: 50px; //右侧重新上传按钮宽度
  787.   $loadingWidth: 30px; //加载动画宽度（旋转全全）
  788.   $rightWidth: 150px; //右侧宽度
  789.   $sizeWidth: 200px; //文件大小宽度宽度
  790.   $progressWidth: 100px; //进度条宽度
  791.   $tipWidth: 100px; //提示文本宽度
  792.   // ----------------------------------------
  793.   z-index: 2001; //根据情况自己拿捏(太大了会遮住element的其他弹窗组件)，v-loading默认是2000的z-index
  794.   user-select: none;
  795.   position: fixed;
  796.   right: 10px;
  797.   bottom: 10px;
  798.   width: $minWidth;
  799.   background-color: white;
  800.   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  801.   border-radius: 8px;
  802.   overflow: hidden;
  803.   border: 1px solid #eee;
  804.   font-size: 14px;
  805.   display: none;
  806.  
  807.   &[show] {
  808.     display: block;
  809.   }
  810.  
  811.   &[size="lg"] {
  812.     left: 0 !important;
  813.     top: 0 !important;
  814.     width: 100vw;
  815.     height: 100vh;
  816.     transition: none;
  817.     .upload-file-list {
  818.       max-height: calc(100vh - 60px) !important;
  819.     }
  820.   }
  821.  
  822.   &[size="md"] {
  823.     width: $minWidth;
  824.     height: revert;
  825.   }
  826.  
  827.   &[size="mn"] {
  828.     width: $minWidth;
  829.     height: $minHeight;
  830.   }
  831.  
  832.   .upload-list-tray {
  833.     display: flex;
  834.     flex-direction: column;
  835.     box-sizing: border-box;
  836.     padding-bottom: 20px;
  837.     width: 100%;
  838.     height: 100%;
  839.     position: relative;
  840.  
  841.     .header {
  842.       flex-shrink: 0;
  843.       font-size: 16px;
  844.       font-weight: bold;
  845.       width: 100%;
  846.       height: $headerHeight;
  847.       box-sizing: border-box;
  848.       padding: 10px 20px;
  849.       /*从上往下线性渐变背景*/
  850.       background: linear-gradient(#409eff11, white);
  851.       color: #409eff;
  852.       display: flex;
  853.       justify-content: space-between;
  854.       align-items: center;
  855.  
  856.       .left {
  857.         display: flex;
  858.         align-items: center;
  859.         flex-grow: 1;
  860.  
  861.         .title {
  862.           display: flex;
  863.           align-items: center;
  864.           flex-wrap: nowrap;
  865.           .upload-info {
  866.             display: flex;
  867.             align-items: center;
  868.             color: black;
  869.             flex-shrink: 0;
  870.             align-items: center;
  871.             font-weight: normal;
  872.             .info-item {
  873.               margin-right: 5px;
  874.               &:last-of-type {
  875.                 margin-right: 0;
  876.               }
  877.               span {
  878.                 font-family: DIN-Light;
  879.                 color: #409eff;
  880.               }
  881.               &.live-speed {
  882.                 span {
  883.                   font-family: DIN-Black;
  884.                 }
  885.               }
  886.             }
  887.           }
  888.         }
  889.         .icon-btns {
  890.           display: flex;
  891.           align-items: center;
  892.           flex-wrap: nowrap;
  893.           .icon-btn {
  894.             cursor: pointer;
  895.             margin-right: 5px;
  896.             &:last-of-type {
  897.               margin-right: 0;
  898.             }
  899.             i {
  900.               pointer-events: none;
  901.             }
  902.  
  903.             &:hover {
  904.               opacity: 0.618;
  905.             }
  906.           }
  907.         }
  908.       }
  909.  
  910.       .right {
  911.         display: flex;
  912.         align-items: center;
  913.         justify-content: flex-end;
  914.         flex-shrink: 0;
  915.         pointer-events: auto;
  916.  
  917.         .icon-btn {
  918.           margin-left: 10px;
  919.           cursor: pointer;
  920.  
  921.           i {
  922.             pointer-events: none;
  923.           }
  924.  
  925.           &:hover {
  926.             opacity: 0.618;
  927.           }
  928.           &:first-of-type {
  929.             margin-left: 0;
  930.           }
  931.         }
  932.  
  933.         .file-btns {
  934.           margin-left: 10px;
  935.           display: flex;
  936.           flex-wrap: nowrap;
  937.           justify-content: flex-end;
  938.           box-sizing: border-box;
  939.           padding: 0 10px;
  940.           border-right: 1px solid #eee;
  941.         }
  942.         .tray-btns {
  943.           margin-left: 10px;
  944.           display: flex;
  945.           flex-wrap: nowrap;
  946.           justify-content: flex-end;
  947.         }
  948.       }
  949.     }
  950.  
  951.     .body {
  952.       display: flex;
  953.       flex-wrap: nowrap;
  954.       width: 100%;
  955.       height: calc(100% - #{$headerHeight} - #{$footerHeight} + 20px);
  956.       max-height: calc(100vh - #{$headerHeight} - #{$footerHeight} - 40px);
  957.  
  958.       & > .left {
  959.         // transition: 0.382s;
  960.         position: relative;
  961.         flex-shrink: 0;
  962.         width: $bodyLeftWidth;
  963.         box-sizing: border-box;
  964.         padding: 0 10px 0 20px;
  965.         border-right: solid 1px #eff0f1;
  966.         >>> .el-menu {
  967.           transition: none;
  968.           .el-menu-item {
  969.             transition: none;
  970.  
  971.             margin-bottom: 5px;
  972.             border-radius: 8px;
  973.             &:last-of-type {
  974.               margin-bottom: 0;
  975.             }
  976.             &:focus,
  977.             &:hover {
  978.               background-color: #f5f6f7 !important;
  979.             }
  980.             &.is-active {
  981.               background-color: #e9effb !important;
  982.             }
  983.           }
  984.         }
  985.         .collapseBtn {
  986.           transform: translateY(50%); //防止托盘最小高度的时候还冒出一小截
  987.           width: 10px;
  988.           height: 20px;
  989.           display: flex;
  990.           justify-content: center;
  991.           align-items: center;
  992.           color: white;
  993.           background-color: #409eff;
  994.           font-size: 12px;
  995.           position: absolute;
  996.           margin: auto;
  997.           top: 0;
  998.           right: -10px;
  999.           bottom: 0;
  1000.           z-index: 1;
  1001.           border-radius: 0 4px 4px 0;
  1002.           box-sizing: border-box;
  1003.           padding: 20px 0;
  1004.           cursor: pointer;
  1005.           &:hover {
  1006.             filter: brightness(1.1);
  1007.           }
  1008.         }
  1009.         &[collapse] {
  1010.           width: 70px;
  1011.           >>> .el-menu {
  1012.             .el-menu-item {
  1013.               width: 40px;
  1014.               height: 40px;
  1015.               display: flex;
  1016.               justify-content: center;
  1017.               align-items: center;
  1018.               span {
  1019.                 display: none;
  1020.               }
  1021.             }
  1022.           }
  1023.         }
  1024.       }
  1025.       & > .right {
  1026.         width: calc(100% - #{$bodyLeftWidth});
  1027.         flex-grow: 1;
  1028.         box-sizing: border-box;
  1029.         padding: 0 20px 0 10px;
  1030.         .upload-file-list {
  1031.           width: 100%;
  1032.           flex-grow: 1;
  1033.           overflow-y: auto;
  1034.           position: relative;
  1035.           max-height: calc(100% - 42px);
  1036.           min-height: 200px;
  1037.           height: 100%;
  1038.  
  1039.           ul {
  1040.             width: 100%;
  1041.  
  1042.             & > li {
  1043.               line-height: 1.6;
  1044.               box-sizing: border-box;
  1045.               padding: 10px;
  1046.               border-radius: 8px;
  1047.               display: flex;
  1048.               justify-content: space-between;
  1049.               align-items: center;
  1050.               width: 100%;
  1051.               height: 50px;
  1052.  
  1053.               & > .left {
  1054.                 width: calc(100% - #{$rightWidth});
  1055.                 display: flex;
  1056.                 align-items: center;
  1057.                 flex-grow: 1;
  1058.                 flex-shrink: 0;
  1059.                 // 上传队列记录左侧侧操作按钮
  1060.                 .icon-btns {
  1061.                   display: flex;
  1062.                   flex-wrap: nowrap;
  1063.                   .icon-btn {
  1064.                     display: none;
  1065.                     &[show] {
  1066.                       margin-right: 15px;
  1067.                       display: block;
  1068.                     }
  1069.                   }
  1070.                 }
  1071.                 .fileLoading {
  1072.                   flex-shrink: 0;
  1073.                   width: 30px;
  1074.                   margin-right: 5px;
  1075.                   height: 0;
  1076.                   transform: scale(0.5);
  1077.                 }
  1078.                 .loadingSuccessIcon,
  1079.                 .loadingEorrorIcon {
  1080.                   margin-right: 5px;
  1081.                   width: 30px;
  1082.                   height: 30px;
  1083.                   display: flex;
  1084.                   justify-content: center;
  1085.                   align-items: center;
  1086.                   flex-shrink: 0;
  1087.                 }
  1088.                 .name {
  1089.                   text-align: left;
  1090.                   margin-right: 10px;
  1091.                   width: calc(
  1092.                     100% - #{$loadingWidth} - #{$sizeWidth} - #{$progressWidth} - #{$rightWidth} -
  1093.                       20px
  1094.                   );
  1095.                   overflow: hidden;
  1096.                   white-space: nowrap;
  1097.                   text-overflow: ellipsis;
  1098.                   flex-shrink: 0;
  1099.                   flex-grow: 1;
  1100.                 }
  1101.  
  1102.                 .size {
  1103.                   margin-right: 10px;
  1104.                   max-width: $sizeWidth;
  1105.                   /*单行省略号*/
  1106.                   overflow: hidden;
  1107.                   white-space: nowrap;
  1108.                   text-overflow: ellipsis;
  1109.                   flex-shrink: 0;
  1110.                 }
  1111.  
  1112.                 .progress {
  1113.                   max-width: $progressWidth;
  1114.                   display: flex;
  1115.                   align-items: center;
  1116.                   flex-wrap: nowrap;
  1117.                   flex-shrink: 0;
  1118.                 }
  1119.               }
  1120.  
  1121.               & > .right {
  1122.                 display: flex;
  1123.                 align-items: center;
  1124.                 justify-content: flex-end;
  1125.                 width: $rightWidth;
  1126.  
  1127.                 .tip {
  1128.                   width: $tipWidth;
  1129.                   overflow: hidden;
  1130.                   white-space: nowrap;
  1131.                   text-overflow: ellipsis;
  1132.                   flex-shrink: 0;
  1133.                   text-align: right;
  1134.  
  1135.                   &[color="red"] {
  1136.                     color: #f56c6c;
  1137.                   }
  1138.  
  1139.                   &[color="green"] {
  1140.                     color: #67c23a;
  1141.                   }
  1142.  
  1143.                   &[color="blue"] {
  1144.                     color: #409eff;
  1145.                   }
  1146.                 }
  1147.                 // 上传队列记录右侧操作按钮
  1148.                 .icon-btns {
  1149.                   display: flex;
  1150.                   flex-wrap: nowrap;
  1151.                   .icon-btn {
  1152.                     display: none;
  1153.                     &[show] {
  1154.                       margin-left: 15px;
  1155.                       display: block;
  1156.                     }
  1157.                   }
  1158.                 }
  1159.               }
  1160.  
  1161.               &:hover {
  1162.                 background-color: #409eff11;
  1163.                 color: #409eff;
  1164.                 .left {
  1165.                   // 移入上传队列记录左侧操作按钮
  1166.                   .icon-btns {
  1167.                     .icon-btn {
  1168.                       display: block;
  1169.                       &:last-of-type {
  1170.                         margin-right: 10px;
  1171.                       }
  1172.                     }
  1173.                   }
  1174.                   /* .name {
  1175.                     width: calc(
  1176.                       100% - #{$leftIconBtnWidth} - #{$loadingWidth} - #{$sizeWidth} - #{$progressWidth} -
  1177.                         #{$rightWidth} - #{$rightIconBtnWidth} - 20px
  1178.                     );
  1179.                   } */
  1180.                 }
  1181.                 .right {
  1182.                   .tip {
  1183.                     margin-right: 15px;
  1184.                   }
  1185.                   // 移入上传队列记录右侧操作按钮
  1186.                   .icon-btns {
  1187.                     .icon-btn {
  1188.                       display: block;
  1189.                       &:first-of-type {
  1190.                         margin-left: 0;
  1191.                       }
  1192.                     }
  1193.                   }
  1194.                 }
  1195.               }
  1196.             }
  1197.           }
  1198.           .el-empty {
  1199.             width: max-content;
  1200.             height: max-content;
  1201.             position: absolute;
  1202.             margin: auto;
  1203.             top: 0;
  1204.             left: 0;
  1205.             right: 0;
  1206.             bottom: 0;
  1207.           }
  1208.         }
  1209.       }
  1210.     }
  1211.     .footer {
  1212.       z-index: 1;
  1213.       font-weight: normal;
  1214.       flex-shrink: 0;
  1215.       font-size: 14px;
  1216.       font-weight: bold;
  1217.       width: 100%;
  1218.       height: $footerHeight;
  1219.       box-sizing: border-box;
  1220.       padding: 10px 20px;
  1221.       margin-bottom: -20px;
  1222.       background: linear-gradient(white, #eff2f7);
  1223.       color: #909399;
  1224.       display: flex;
  1225.       align-items: center;
  1226.       flex-wrap: nowrap;
  1227.       white-space: nowrap;
  1228.       * {
  1229.         font-weight: normal;
  1230.       }
  1231.       .text {
  1232.         white-space: nowrap;
  1233.       }
  1234.       .progress {
  1235.         max-width: 200px;
  1236.         flex-grow: 1;
  1237.         white-space: nowrap;
  1238.         display: flex;
  1239.         align-items: center;
  1240.         flex-wrap: nowrap;
  1241.         label {
  1242.           white-space: nowrap;
  1243.           flex-shrink: 0;
  1244.           margin-right: 5px;
  1245.         }
  1246.         >>> .el-progress {
  1247.           white-space: nowrap;
  1248.           .el-progress__text {
  1249.             font-weight: normal;
  1250.             font-size: 14px !important;
  1251.           }
  1252.         }
  1253.       }
  1254.     }
  1255.   }
  1256. }
  1257. </style>

应用

  1. <template>
  2.   <div :class="$options.name">
  3.     <el-button type="primary" @click="$refs.sgUpload_v2.triggerUploadFolder()"
  4.       >点击上传文件夹</el-button
  5.     >
  6.  
  7.     <!-- 上传组件 -->
  8.     <sgUpload_v2
  9.       :noCheckFile="true"
  10.       ref="sgUpload_v2"
  11.       :data="uploadData"
  12.       :sgUploadTray="sgUploadTray"
  13.       hideMessageSuccessTip
  14.     />
  15.  
  16.     <!-- 上传托盘（右下角） -->
  17.     <sgUploadTray ref="sgUploadTray" resizeable />
  18.   </div>
  19. </template>
  20.  
  21. <script>
  22. import sgUpload_v2 from "@/vue/components/admin/sgUpload_v2";
  23. import sgUploadTray from "@/vue/components/admin/sgUploadTray_v2";
  24.  
  25. export default {
  26.   name: `demoUploadTray`,
  27.   components: {
  28.     sgUpload_v2,
  29.     sgUploadTray,
  30.   },
  31.   data() {
  32.     return {
  33.       //上传相关变量----------------------------------------
  34.       sgUploadTray: null,
  35.       uploadData: {
  36.         limit: 10000, //限制上传文件个数
  37.         name: `FILE`,
  38.         accept: `*`,
  39.         actionURL: `${this.$d.API_ROOT_URL}/xxx/xxx`,
  40.         actionData: {
  41.           ZYGS: this.$g.getZYGS({
  42.             BMID: this.$global.getBMID(),
  43.             type: this.type,
  44.           }),
  45.           sgLog: `前端请求来源：${this.$options.name}资源上传`,
  46.         },
  47.       },
  48.       // ----------------------------------------
  49.     };
  50.   },
  51.   mounted(d) {
  52.     this.sgUploadTray = this.$refs.sgUploadTray;
  53.   },
  54. };
  55. </script>

基于sgUploadTray 1.0版本迭代【sgUploadTray】自定义组件：上传托盘自定义组件，可实时查看上传列表进度。-CSDN博客文章浏览阅读382次。【sgUploadTray】上传托盘自定义组件，可实时查看上传列表进度：1、可以全屏2、可以还原尺寸3、可以最小化4、可以回到右下角默认位置5、支持删除队列数据。https://blog.csdn.net/qq_37860634/article/details/131721614

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/274381
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号