update:上传组件优化

src/components/common/uploadList/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="comp-upload-list">
     <div ref="dragRef" class="btn" @click="openFun" @mousedown="startDragFun">
-      <el-icon :size="22"><Upload /></el-icon>
+      <el-icon :class="{ 'icon-animation': uploading }" :size="22"><Upload /></el-icon>
     </div>
     <el-drawer title="上传列表" v-model="listVisible" size="400" :modal="false" modal-penetrable>
       <div class="content">
@@ -59,6 +59,7 @@ const taskStatusObj: any = {}; // 更具uploadTaskId和businessId记录所以任
 const listVisible = ref(false);
 const listData = ref<any>([]);
 const chunkSize = 1024 * 1024 * 10; // 每片10MB
+const uploading = ref(false);
 const UPLOAD_FILE_STATUS: any = {
   // TODO
   '-1': '上传失败',
@@ -85,6 +86,9 @@ emitter.on('ADD_UPLOAD_FILE', (addData: any) => {
 
 const initFun = (data: any) => {
   listData.value.push(data);
+  if (uploading.value) {
+    return;
+  }
   listData.value.some((item: any, index: number) => {
     if (item.data.status === '0') {
       sliceFileFun(index);
@@ -95,6 +99,7 @@ const initFun = (data: any) => {
 
 // 分片并上传
 const sliceFileFun = async (fileIndex: number) => {
+  uploading.value = true;
   const fileObj = listData.value[fileIndex];
   const file = fileObj.file;
   const fileData = fileObj.data;
@@ -134,6 +139,7 @@ const sliceFileFun = async (fileIndex: number) => {
     callBackFun(fileData);
   }
   setTimeout(() => {
+    uploading.value = false;
     fileTempPath = '';
     const index = listData.value.findIndex((item: any) => item.data.status === '0');
     if (listData.value[index]) {
@@ -242,6 +248,20 @@ const stopDragFun = () => {
 </script>
 
 <style lang="scss" scoped>
+@keyframes moveUp {
+  0% {
+    transform: translateY(0);
+  }
+  49% {
+    transform: translateY(-30px);
+  }
+  50% {
+    transform: translateY(30px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
 .comp-upload-list {
   .btn {
     display: flex;
@@ -259,6 +279,10 @@ const stopDragFun = () => {
     color: var(--el-bg-color);
     cursor: pointer;
     user-select: none;
+    overflow: hidden;
+    .icon-animation {
+      animation: moveUp 1s infinite;
+    }
   }
   .content {
     height: 100%;