feat(sys): refactor export & import app, support app package;

labring · Dec 21, 2021 · 18a4a8a · 18a4a8a
1 parent d41dd21
commit 18a4a8a
Show file tree

Hide file tree

Showing 11 changed files with 707 additions and 94 deletions.
diff --git a/packages/system-client/src/api/application.js b/packages/system-client/src/api/application.js
@@ -185,23 +185,26 @@ export async function removeApplicationService(appid) {
 export async function exportApplication(appid) {
   const res = await request({
     url: `/apps/${appid}/export`,
-    method: 'get'
+    method: 'get',
+    responseType: 'blob'
   })
   return res
 }
 
 /**
  * 导入应用
  * @param {string} appid
+ * @param {File} file
  * @returns
  */
-export async function importApplication(appid, import_data) {
+export async function importApplication(appid, file) {
+  const form = new FormData()
+  form.append('file', file)
   const res = await request({
     url: `/apps/${appid}/import`,
     method: 'post',
-    data: {
-      import_data
-    }
+    data: form,
+    headers: { 'Content-Type': 'multipart/form-data' }
   })
   return res
 }

diff --git a/packages/system-client/src/utils/file.js b/packages/system-client/src/utils/file.js
@@ -13,6 +13,22 @@ export function exportRawText(name, data) {
   save_link.click()
 }
 
+/**
+ * export raw blob
+ * @param {string} name
+ * @param {Blob} data
+ */
+export function exportRawBlob(name, data) {
+  const reader = new FileReader()
+  reader.readAsDataURL(data)
+  reader.onload = e => {
+    const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
+    save_link.href = e.target.result
+    save_link.download = name
+    save_link.click()
+  }
+}
+
 /**
  * read text from local file
  * @param {File} file

diff --git a/packages/system-client/src/views/application/index.vue b/packages/system-client/src/views/application/index.vue
@@ -220,7 +220,7 @@
             :auto-upload="false"
             :multiple="false"
             :show-file-list="true"
-            accept=".json"
+            accept=".lapp"
             :limit="1"
             :on-change="onImportFileChanged"
           >
@@ -243,7 +243,7 @@
 <script>
 import { createApplication, getMyApplications, startApplicationService, stopApplicationService, removeApplicationService, updateApplication, removeApplication, exportApplication, importApplication } from '@/api/application'
 import { showError, showSuccess } from '@/utils/show'
-import { exportRawText, readTextFromFile } from '@/utils/file'
+import { exportRawBlob } from '@/utils/file'
 import { parseTime } from '@/utils'
 
 // 默认化创建表单的值
@@ -438,13 +438,12 @@ export default {
     },
     async exportApp(app) {
       this.loading = true
-      const res = await exportApplication(app.appid)
+      const data = await exportApplication(app.appid)
         .finally(() => { this.loading = false })
 
-      const data = JSON.stringify(res)
       const time = parseTime(Date.now(), '{y}{m}{d}{h}{i}{s}')
-      const filename = `${app.name}_${time}.json`
-      exportRawText(filename, data)
+      const filename = `${app.name}_${time}.lapp`
+      exportRawBlob(filename, data)
     },
     showImportForm(app) {
       this.importForm = { app, file: null }
@@ -460,16 +459,23 @@ export default {
     },
     async handleImportApp() {
       this.loading = true
+      if (!this.importForm.file) return
+      if (!this.importForm.app) return
+
+      const app = this.importForm.app
       try {
-        const text = await readTextFromFile(this.importForm.file)
-        const import_data = JSON.parse(text)
-        const appid = this.importForm.app?.appid
-        const res = await importApplication(appid, import_data)
+        const file = this.importForm.file
+        const appid = app?.appid
+        const res = await importApplication(appid, file)
         if (res.error) {
           return showError('导入失败:' + res.error)
         }
 
-        showSuccess('导入成功!')
+        // 重启应用
+        await stopApplicationService(app.appid)
+        await startApplicationService(app.appid)
+
+        showSuccess('导入应用成功!')
         this.importForm = { app: null, file: null }
         this.dialogImportVisible = false
       } finally {
@@ -479,11 +485,11 @@ export default {
     getRuntimeVersion(app) {
       const image = app.runtime?.image
       if (!image) {
-        return 'unknow'
+        return 'unknown'
       }
 
       const [, version] = image.split(':')
-      return version || 'unknow'
+      return version || 'unknown'
     },
     getRuntimeMemory(app) {
       const memory = app.runtime?.metrics?.memory