download files can be paused

vueJs/src/icons/components/index.ts

@@ -52,6 +52,7 @@ import './money'
 import './nested'
 import './organization-unit'
 import './password'
+import './pause'
 import './pdf'
 import './people'
 import './peoples'

vueJs/src/icons/components/pause.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'pause': {
+    width: 64,
+    height: 64,
+    viewBox: '0 0 1024 1024',
+    data: '<path pid="0" _fill="#333" d="M688.64 168.96c-40.96 0-74.24 35.84-74.24 74.24v552.96c0 40.96 35.84 74.24 74.24 74.24s74.24-35.84 74.24-74.24V243.2c0-40.96-35.84-74.24-74.24-74.24zm-353.28 0c-40.96 0-74.24 35.84-74.24 74.24v552.96c0 40.96 35.84 74.24 74.24 74.24s74.24-35.84 74.24-74.24V243.2c2.56-40.96-33.28-74.24-74.24-74.24z"/>'
+  }
+})

vueJs/src/icons/svg/pause.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M688.64 168.96c-40.96 0-74.24 35.84-74.24 74.24v552.96c0 40.96 35.84 74.24 74.24 74.24s74.24-35.84 74.24-74.24V243.2c0-40.96-35.84-74.24-74.24-74.24z m-353.28 0c-40.96 0-74.24 35.84-74.24 74.24v552.96c0 40.96 35.84 74.24 74.24 74.24s74.24-35.84 74.24-74.24V243.2c2.56-40.96-33.28-74.24-74.24-74.24z" /></svg>

vueJs/src/views/file-management/components/FileDownloadForm.vue

@@ -45,18 +45,22 @@
             type="success"
             icon="el-icon-caret-right"
             :disabled="row.downloading"
-            @click="handleDownloadFile(row)"
+            @click="handleDownload(row)"
+          />
+          <el-button
+            size="mini"
+            type="info"
+            :disabled="row.pause"
+            @click="handlePause(row)"
           >
-            {{ $t('fileSystem.begin') }}
+            <svg-icon name="pause" />
           </el-button>
           <el-button
             size="mini"
             type="danger"
             icon="el-icon-delete"
-            @click="handleRemoveFile(row)"
+            @click="handleRemove(row)"
-          >
+          />
-            {{ $t('fileSystem.remove') }}
-          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -72,7 +76,7 @@ export class FileInfo {
   path!: string
   size!: number
   progress!: number
-  pause!: boolean
+  pause = true
   blobs = new Array<BlobPart>()
   type!: string
   downloading!: boolean
@@ -106,49 +110,51 @@ export default class FileDownloadForm extends Vue {
     }
   }
 
-  private handleRemoveFile(fileInfo: FileInfo) {
+  private handlePause(fileInfo: FileInfo) {
+    fileInfo.pause = true
+    fileInfo.downloading = false
+    this.$emit('onFilePaused', fileInfo)
+  }
+
+  private handleRemove(fileInfo: FileInfo) {
     fileInfo.pause = true
     fileInfo.downloading = false
     fileInfo.blobs.length = 0
     this.$emit('onFileRemoved', fileInfo)
   }
 
-  private handleDownloadFile(fileInfo: FileInfo) {
+  private handleDownload(fileInfo: FileInfo) {
-    fileInfo.pause = false
+    if (!fileInfo.downloading) {
-    fileInfo.downloading = true
+      fileInfo.pause = false
-    if (fileInfo.progress >= 100) {
+      fileInfo.downloading = true
-      this.downloadBlob(fileInfo)
+      if (this.downloadProgress(fileInfo) >= 100) {
-    } else {
+        this.downloadBlob(fileInfo)
-      this.downlodFile(fileInfo, (downloadSize: number) => {
+      } else {
-        if (downloadSize >= fileInfo.size) {
+        this.downlodFile(fileInfo)
-          this.$emit('onFileDownloaded', fileInfo)
+      }
-        }
-      })
     }
   }
 
-  private downlodFile(fileInfo: FileInfo, callback: Function) {
+  private downlodFile(fileInfo: FileInfo) {
     if (fileInfo.pause) {
       return
     }
-    FileSystemService.downlodFle(fileInfo.name, fileInfo.path, fileInfo.progress).then((res: any) => {
+    FileSystemService
-      fileInfo.type = res.headers['content-type']
+      .downlodFle(fileInfo.name, fileInfo.path, fileInfo.progress)
-      // 获取当前下载字节大小
+      .then((res: any) => {
-      const downloadByte = res.data.size
+        fileInfo.type = res.headers['content-type']
-      // 当前下载分块入栈
+        // 获取当前下载字节大小
-      fileInfo.blobs.push(res.data)
+        const downloadByte = res.data.size
-      fileInfo.progress += downloadByte
+        // 当前下载分块入栈
-      if (fileInfo.size > fileInfo.progress) {
+        fileInfo.blobs.push(res.data)
-        this.downlodFile(fileInfo, callback)
+        fileInfo.progress += downloadByte
-      } else {
+        if (fileInfo.size > fileInfo.progress) {
-        // 合并下载文件
+          this.downlodFile(fileInfo)
-        this.downloadBlob(fileInfo)
+        } else {
-        // 下载完成后的回调
+          // 合并下载文件
-        callback(fileInfo.size)
+          this.downloadBlob(fileInfo)
-      }
+        }
-    }).catch(() => {
+      })
-      callback(fileInfo.size)
-    })
   }
 
   private downloadBlob(fileInfo: FileInfo) {
@@ -160,6 +166,10 @@ export default class FileDownloadForm extends Vue {
     document.body.appendChild(link)
     link.click()
     URL.revokeObjectURL(url)
+
+    fileInfo.pause = true
+    fileInfo.downloading = false
+    this.$emit('onFileDownloaded', fileInfo)
   }
 
   private onFormClosed() {