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