优化打包流程

project/oms/apps/AppDeploy/AppDeploy.vue

@@ -14,13 +14,19 @@
         </ai-search-bar>
         <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                   @getList="getTableData" :col-configs="colConfigs" :dict="dict">
-          <el-table-column slot="options" label="操作" fixed="right" align="center">
+          <el-table-column slot="process" label="打包进度">
+            <template slot-scope="{row}">
+              <span v-if="row.count==0" v-text="row.download?`最近打包时间:${row.download}`:`暂无打包`"/>
+              <el-progress v-else :percentage="row.count"/>
+            </template>
+          </el-table-column>
+          <el-table-column slot="options" label="操作" fixed="right" align="center" width="300">
             <template slot-scope="{row}">
               <el-button type="text" @click="handleEdit(row)">编辑</el-button>
               <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
               <el-button type="text" @click="handleZip(row)">打包</el-button>
               <el-button type="text" v-if="row.download" @click="handleDownload(row)">下载</el-button>
-              <el-button v-if="row.target" type="text" @click="handleDownload(row)">部署</el-button>
+              <el-button v-if="row.target" type="text" @click="handleUpdateSystem(row)">更新部署</el-button>
             </template>
           </el-table-column>
         </ai-table>
@@ -37,7 +43,7 @@
         <el-form-item label="git分支" prop="branch">
           <el-input v-model="form.branch" clearable placeholder="请输入"/>
         </el-form-item>
-        <el-form-item label="生产环境" prop="target">
+        <el-form-item label="开发环境nginx" prop="target">
           <el-input v-model="form.target" clearable placeholder="请输入"/>
         </el-form-item>
       </el-form>
@@ -65,10 +71,11 @@ export default {
       page: {current: 1, size: 10, total: 0},
       tableData: [],
       colConfigs: [
-        {label: "项目/系统名称", prop: "name"},
-        {label: "git", prop: "git"},
-        {label: "git分支", prop: "branch"},
-        {label: "生产服务器", prop: "target", width: 100},
+        {label: "项目/系统名称", prop: "name", width: 200},
+        {label: "git", render: (h, {row}) => h('p', {class: "textRight"}, row.git)},
+        {label: "git分支", prop: "branch", width: 140},
+        {label: "开发环境nginx", prop: "target"},
+        {slot: "process"},
         {slot: "options"}
       ],
       dialog: false,
@@ -86,41 +93,62 @@ export default {
         params: {...this.page, ...this.search}
       }).then(res => {
         if (res?.data) {
-          this.tableData = res.data?.records
+          this.tableData = res.data?.records.map(e => ({...e, count: 0}))
           this.page.total = res.data.total
         }
       })
     },
     handleDownload(row) {
-
+      let {id} = row
+      this.instance.post("/node/autodeploy/download", null, {
+        params: {id},
+        responseType: "blob"
+      }).then(res => {
+        if (res?.code == 1) {
+          this.$message.error(res.err)
+        } else {
+          const link = document.createElement('a')
+          let blob = new Blob([res], {type: 'application/zip'})
+          link.style.display = 'none'
+          link.href = URL.createObjectURL(blob)
+          link.setAttribute('download', row.name + '.zip')
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link)
+        }
+      })
     },
     handleZip(row) {
-      let loading = this.$loading({
-        lock: true, text: "正在打包文件...",
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      }), {id} = row
+      let {id} = row
       this.instance.post("/node/autodeploy/getZip", null, {
         params: {id}
       }).then(res => {
         if (res?.code == 0) {
-          let count = 0, timer = setInterval(() => {
-            if (count == 30) {
+          row.count = 1
+          let timer = setInterval(() => {
+            if (row.count >= 100) {
               clearInterval(timer)
-              loading.close()
               this.$message.error("打包失败!")
-            } else this.instance.post("/node/autodeploy/confirmZip", null, {
-              params: {id}
-            }).then(res => {
-              if (res?.code == 0) {
+            } else this.handleConfirmZip(row).then(v => {
+              if (v) {
                 clearInterval(timer)
-                loading.close()
-                this.getTableData()
-              } else count++
-            }, 10000)
-          })
+                row.count = 100
+                row.download = true
+              } else row.count++
+            })
+          }, 3000)
         }
-      }).catch(() => loading.close())
+      })
+    },
+    handleUpdateSystem(row) {
+      let {id} = row
+      return this.instance.post("/node/autodeploy/updateSystem", null, {
+        params: {id}
+      }).then(res => {
+        if (res?.code == 0) {
+
+        }
+      })
     },
     handleEdit(row) {
       this.form = JSON.parse(JSON.stringify(row))
@@ -150,6 +178,15 @@ export default {
           }
         })
       }).catch(() => 0)
+    },
+    handleConfirmZip(row) {
+      let {id} = row
+      return this.instance.post("/node/autodeploy/confirmZip", null, {
+        params: {id}
+      }).then(res => {
+        if (res?.code == 0) return res.data
+        else return false
+      })
     }
   },
   created() {
@@ -161,5 +198,12 @@ export default {
 <style lang="scss" scoped>
 .AppDeploy {
   height: 100%;
+
+  ::v-deep.textRight {
+    direction: rtl;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 </style>