Browse Source

feat: 上传列表组件去掉成功态和取消态,以适配随时新增上传、上传成功后立刻更新列表的需求。

任一存 4 years ago
parent
commit
a76f789c3f
1 changed files with 5 additions and 34 deletions
  1. 5 34
      src/views/material/components/uploadList1.1.0.vue

+ 5 - 34
src/views/material/components/uploadList1.1.0.vue

@@ -1,13 +1,12 @@
 <template>
   <!-- 这是一个简单组件,只关注视图层 -->
-  <div class="upload-list-component">
+  <div v-show="taskList.length > 0" class="upload-list-component">
     <div class="head">
       <div class="left">
         <i class="iconfont iconmaterial_preview_upload"></i>
-        <span class="text">正在上传 {{successNumber}}/{{taskList.length}}</span>
+        <span class="text">正在上传 {{taskList.length}}</span>
       </div>
       <div class="right">
-        <!-- <span></span> -->
         <i
           class="iconfont icon-material_preview_upload_collect"
           :class="this.expandSwitch ? '' : 'upsideDown'"
@@ -19,17 +18,15 @@
         class="list-item" 
         v-for="(taskItem, index) in taskList"
         :key="index"
-        v-show="taskItem.status === 'LOADING' || taskItem.status === 'FAIL'"
-        >
+      >
         <div class="left">
           <img class="type-icon" :src="uploadFieIconUrl" alt=""/>
           <span class="text">{{taskItem.title}}</span>
         </div>
         <div class="right">
           <span :class="{
-            'text-success': taskItem.status === 'SUCCESS',
             'text-fail': taskItem.status === 'FAIL',
-            'text-loading': taskItem.status === 'LOADING' || taskItem.status === 'CANCELLED',
+            'text-loading': taskItem.status === 'LOADING',
           }">
             {{taskItem.statusText}}
           </span>
@@ -62,7 +59,7 @@ export default {
        *  title: String
        *  ifKnowProgress: Boolean // false则进度条效果是loading而不是具体进度
        *  progress:Number // 进度,0到1之间。
-       *  status: 'SUCCESS' | 'FAIL' | 'LOADING' | 'CANCELLED'
+       *  status: 'FAIL' | 'LOADING' // 将来可能还需要:'SUCCESS', 'CANCELLED'
        *  statusText
        * }
        */
@@ -70,13 +67,6 @@ export default {
       default: () => []
       // default: () => [
       //   {
-      //     title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
-      //     ifKnowProgress: true,
-      //     progress: '1',
-      //     status: 'SUCCESS',
-      //     statusText: '成功',
-      //   },
-      //   {
       //     title: '标题',
       //     ifKnowProgress: true,
       //     progress: '0.3',
@@ -97,13 +87,6 @@ export default {
       //     status: 'FAIL',
       //     statusText: '失败',
       //   },
-      //   {
-      //     title: '标题',
-      //     ifKnowProgress: false,
-      //     progress: '0.3',
-      //     status: 'CANCELLED',
-      //     statusText: '已取消',
-      //   },
       // ]
     },
   },
@@ -120,12 +103,6 @@ export default {
           return require('@/assets/images/icons/upload-file-type-icon-image@2x.png')
       }
     },
-    successNumber() {
-      return this.taskList.filter((item) => item.status === 'SUCCESS').length
-    },
-    totalNumber() {
-      return this.taskList.filter((item) => item.status !== 'CANCELLED').length
-    },
   },
   data() {
     return {
@@ -225,12 +202,6 @@ export default {
         justify-content: flex-end;
         align-items: center;
         width: 40%;
-        .text-success {
-          margin-right: 10px;
-          font-size: 12px;
-          font-family: MicrosoftYaHei;
-          color: #969799;
-        }
         .text-fail {
           margin-right: 10px;
           font-size: 12px;