refactor: backup file download. (halo-dev/console#297)

src/api/backup.js

@@ -30,6 +30,13 @@ backupApi.listWorkDirBackups = () => {
   })
 }
 
+backupApi.fetchWorkDir = filename => {
+  return service({
+    url: `${baseUrl}/work-dir/fetch?filename=${filename}`,
+    method: 'get'
+  })
+}
+
 backupApi.deleteWorkDirBackup = filename => {
   return service({
     url: `${baseUrl}/work-dir`,
@@ -55,6 +62,13 @@ backupApi.listExportedData = () => {
   })
 }
 
+backupApi.fetchData = filename => {
+  return service({
+    url: `${baseUrl}/data/fetch?filename=${filename}`,
+    method: 'get'
+  })
+}
+
 backupApi.deleteExportedData = filename => {
   return service({
     url: `${baseUrl}/data`,
@@ -83,6 +97,13 @@ backupApi.listExportedMarkdowns = () => {
   })
 }
 
+backupApi.fetchMarkdown = filename => {
+  return service({
+    url: `${baseUrl}/markdown/fetch?filename=${filename}`,
+    method: 'get'
+  })
+}
+
 backupApi.deleteExportedMarkdown = filename => {
   return service({
     url: `${baseUrl}/markdown/export`,

src/views/system/components/BackupWorkDirDrawer.vue

@@ -40,7 +40,8 @@
             <a-list-item-meta>
               <a
                 slot="title"
-                :href="backup.downloadLink"
+                href="javascript:void(0)"
+                @click="handleDownloadBackupPackage(backup)"
               >
                 <a-icon
                   type="schedule"
@@ -151,6 +152,23 @@ export default {
         this.handleListBackups()
       })
     },
+    handleDownloadBackupPackage(item) {
+      backupApi
+        .fetchWorkDir(item.filename)
+        .then((response) => {
+          var downloadElement = document.createElement('a')
+          var href = new window.URL(response.data.data.downloadLink)
+          downloadElement.href = href
+          downloadElement.download = response.data.data.filename
+          document.body.appendChild(downloadElement)
+          downloadElement.click()
+          document.body.removeChild(downloadElement)
+          window.URL.revokeObjectURL(href)
+        })
+        .catch((error) => {
+          this.$message.error(error.data.message)
+        })
+    },
     onClose() {
       this.$emit('close', false)
     },

src/views/system/components/ExportDataDrawer.vue

@@ -40,7 +40,8 @@
             <a-list-item-meta>
               <a
                 slot="title"
-                :href="file.downloadLink"
+                href="javascript:void(0)"
+                @click="handleDownloadBackupFile(file)"
               >
                 <a-icon
                   type="schedule"
@@ -89,19 +90,19 @@ export default {
       backuping: false,
       loading: false,
       backupErrored: false,
-      files: []
+      files: [],
     }
   },
   model: {
     prop: 'visible',
-    event: 'close'
+    event: 'close',
   },
   props: {
     visible: {
       type: Boolean,
       required: false,
-      default: true
-    }
+      default: true,
+    },
   },
   methods: {
     handleAfterVisibleChanged(visible) {
@@ -113,7 +114,7 @@ export default {
       this.loading = true
       backupApi
         .listExportedData()
-        .then(response => {
+        .then((response) => {
           this.files = response.data.data
         })
         .finally(() => {
@@ -151,9 +152,26 @@ export default {
         this.handleListBackups()
       })
     },
+    handleDownloadBackupFile(item) {
+      backupApi
+        .fetchData(item.filename)
+        .then((response) => {
+          var downloadElement = document.createElement('a')
+          var href = new window.URL(response.data.data.downloadLink)
+          downloadElement.href = href
+          downloadElement.download = response.data.data.filename
+          document.body.appendChild(downloadElement)
+          downloadElement.click()
+          document.body.removeChild(downloadElement)
+          window.URL.revokeObjectURL(href)
+        })
+        .catch(() => {
+          this.$message.error('下载失败！')
+        })
+    },
     onClose() {
       this.$emit('close', false)
-    }
-  }
+    },
+  },
 }
 </script>

src/views/system/components/ExportMarkdownDrawer.vue

@@ -40,7 +40,8 @@
             <a-list-item-meta>
               <a
                 slot="title"
-                :href="file.downloadLink"
+                href="javascript:void(0)"
+                @click="handleDownloadMarkdownPackage(file)"
               >
                 <a-icon
                   type="schedule"
@@ -158,6 +159,23 @@ export default {
         this.handleListBackups()
       })
     },
+    handleDownloadMarkdownPackage(item) {
+      backupApi
+        .fetchMarkdown(item.filename)
+        .then((response) => {
+          var downloadElement = document.createElement('a')
+          var href = new window.URL(response.data.data.downloadLink)
+          downloadElement.href = href
+          downloadElement.download = response.data.data.filename
+          document.body.appendChild(downloadElement)
+          downloadElement.click()
+          document.body.removeChild(downloadElement)
+          window.URL.revokeObjectURL(href)
+        })
+        .catch(() => {
+          this.$message.error('下载失败！')
+        })
+    },
     onClose() {
       this.$emit('close', false)
     },