feat: 文件上传进度

resources/assets/js/pages/manage/file.vue

@@ -9,6 +9,10 @@
                     <h1>{{$L('文件')}}</h1>
                     <div v-if="loadIng == 0" class="file-refresh" @click="getFileList"><i class="taskfont">&#xe6ae;</i></div>
                 </div>
+                <div v-if="uploadList.length > 0" class="file-status" @click="uploadShow=true">
+                    <Loading v-if="uploadList.find(({status}) => status !== 'finished')"/>
+                    <Button v-else shape="circle" icon="md-checkmark"></Button>
+                </div>
                 <div :class="['file-search', searchKey ? 'has-value' : '']" @click="onSearchFocus" @mouseenter="onSearchFocus">
                     <Input v-model="searchKey" ref="searchInput" suffix="ios-search" @on-change="onSearchChange" :placeholder="$L('搜索名称')"/>
                 </div>
@@ -132,6 +136,24 @@
             </div>
         </div>
 
+        <div v-if="uploadShow && uploadList.length > 0" class="file-upload-list">
+            <div class="upload-wrap">
+                <div class="title">
+                    {{$L('上传列表')}}
+                    <em v-if="uploadList.find(({status}) => status === 'finished')" @click="uploadClear">{{$L('清空已完成')}}</em>
+                </div>
+                <ul class="content">
+                    <li v-for="(item, index) in uploadList">
+                        <AutoTip class="file-name">{{item.name}}</AutoTip>
+                        <AutoTip v-if="item.status === 'finished' && item.response && item.response.ret !== 1" class="file-error">{{item.response.msg}}</AutoTip>
+                        <Progress v-else :percent="uploadPercentageParse(item.percentage)" :stroke-width="5" />
+                        <Icon class="file-close" type="ios-close-circle-outline" @click="uploadList.splice(index, 1)"/>
+                    </li>
+                </ul>
+                <Icon class="close" type="md-close" @click="uploadShow=false"/>
+            </div>
+        </div>
+
         <!--上传文件-->
         <Upload
             name="files"
@@ -294,6 +316,8 @@ export default {
 
             uploadDir: false,
             uploadIng: 0,
+            uploadShow: false,
+            uploadList: [],
             uploadFormat: [
                 'docx', 'wps', 'doc', 'xls', 'xlsx', 'ppt', 'pptx',
                 'jpg', 'jpeg', 'png', 'gif', 'bmp', 'ico', 'raw',
@@ -915,14 +939,35 @@ export default {
 
         /********************文件上传部分************************/
 
-        handleProgress() {
+        uploadUpdate(fileList) {
-            //开始上传
+            fileList.forEach(file => {
-            this.uploadIng++;
+                let index = this.uploadList.findIndex(({uid}) => uid == file.uid)
+                if (index > -1) {
+                    this.uploadList.splice(index, 1, file)
+                } else {
+                    this.uploadList.unshift(file)
+                }
+            })
         },
 
-        handleSuccess(res, file) {
+        uploadClear() {
+            this.uploadList = this.uploadList.filter(({status}) => status !== 'finished')
+        },
+
+        uploadPercentageParse(val) {
+            return parseInt(val, 10);
+        },
+
+        handleProgress(event, file, fileList) {
+            //开始上传
+            this.uploadIng++;
+            this.uploadUpdate(fileList);
+        },
+
+        handleSuccess(res, file, fileList) {
             //上传完成
             this.uploadIng--;
+            this.uploadUpdate(fileList);
             if (res.ret === 1) {
                 this.$store.dispatch("saveFile", res.data);
             } else {
@@ -933,9 +978,10 @@ export default {
             }
         },
 
-        handleError() {
+        handleError(error, file, fileList) {
             //上传错误
             this.uploadIng--;
+            this.uploadUpdate(fileList);
         },
 
         handleFormatError(file) {
@@ -959,6 +1005,7 @@ export default {
 
         handleBeforeUpload() {
             //上传前判断
+            this.uploadShow = true;
             return true;
         },
     }

resources/assets/sass/pages/page-file.scss

@@ -38,6 +38,18 @@
                     }
                 }
             }
+            .file-status {
+                flex-shrink: 0;
+                margin-left: 22px;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                > button {
+                    color: #ffffff;
+                    background: #8bcf70;
+                    border-color: #8bcf70;
+                }
+            }
             .file-search {
                 flex-shrink: 0;
                 margin-left: 22px;
@@ -525,6 +537,79 @@
             position: absolute;
         }
     }
+    .file-upload-list {
+        display: flex;
+        width: 380px;
+        padding: 14px 26px 14px 13px;
+        border-radius: 8px;
+        border: 1px solid #ebeef5;
+        position: fixed;
+        right: 16px;
+        bottom: 16px;
+        background-color: #fff;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        transition: opacity .3s, transform .3s, left .3s, right .3s, top .4s, bottom .3s;
+        overflow: hidden;
+        .upload-wrap {
+            flex: 1;
+            margin-left: 13px;
+            margin-right: 8px;
+            .title {
+                font-weight: 700;
+                font-size: 16px;
+                color: #303133;
+                margin: 0;
+                > em {
+                    padding-left: 4px;
+                    font-style: normal;
+                    cursor: pointer;
+                    color: #2b85e4;
+                    font-size: 12px;
+                    font-weight: normal;
+                }
+            }
+            .content {
+                font-size: 14px;
+                line-height: 21px;
+                margin: 12px -16px 0 0;
+                color: #606266;
+                max-height: 500px;
+                overflow: auto;
+                > li {
+                    list-style: none;
+                    padding: 4px 16px 4px 0;
+                    position: relative;
+                    .file-name {
+                        line-height: 18px;
+                    }
+                    .file-error {
+                        font-size: 12px;
+                        color: #ff0000;
+                    }
+                    .file-close {
+                        position: absolute;
+                        top: 7px;
+                        right: 0;
+                        display: none;
+                        cursor: pointer;
+                    }
+                    &:hover {
+                        .file-close {
+                            display: block;
+                        }
+                    }
+                }
+            }
+            .close {
+                position: absolute;
+                top: 18px;
+                right: 15px;
+                cursor: pointer;
+                color: #909399;
+                font-size: 16px;
+            }
+        }
+    }
 }
 
 .page-file-dropdown-menu {