Merge pull request #142 from veops/dev_ui

ci 批量更新和删除的异步处理

cmdb-ui/src/modules/cmdb/api/ci.js

@@ -25,18 +25,20 @@ export function addCI(params) {
   })
 }
 
-export function updateCI(id, params) {
+export function updateCI(id, params, isShowMessage = true) {
   return axios({
     url: urlPrefix + `/ci/${id}`,
     method: 'PUT',
-    data: params
+    data: params,
+    isShowMessage
   })
 }
 
-export function deleteCI(ciId) {
+export function deleteCI(ciId, isShowMessage = true) {
   return axios({
     url: urlPrefix + `/ci/${ciId}`,
-    method: 'DELETE'
+    method: 'DELETE',
+    isShowMessage
   })
 }
 

cmdb-ui/src/modules/cmdb/views/ci/index.vue

@@ -522,10 +522,17 @@ export default {
       const that = this
       this.$confirm({
         title: '警告',
-        content: '确认要批量修改吗 ?',
-        onOk() {
-          that.loading = true
-          that.loadTip = '正在批量修改 ...'
+        content: '确认要批量修改吗？',
+        async onOk() {
+          that.batchUpdateAsync(values)
+        },
+      })
+    },
+    async batchUpdateAsync(values) {
+      let successNum = 0
+      let errorNum = 0
+      this.loading = true
+      this.loadTip = `正在批量修改...`
       const payload = {}
       Object.keys(values).forEach((key) => {
         if (values[key] || values[key] === 0) {
@@ -537,29 +544,25 @@ export default {
           payload[key] = null
         }
       })
-          const promises = that.selectedRowKeys.map((ciId) => {
-            return updateCI(ciId, payload).then((res) => {
-              return 'ok'
+      this.$refs.create.visible = false
+      for (let i = 0; i < this.selectedRowKeys.length; i++) {
+        await updateCI(this.selectedRowKeys[i], payload, false)
+          .then(() => {
+            successNum += 1
           })
-          })
-          Promise.all(promises)
-            .then((res) => {
-              that.$message.success('批量修改成功')
-              that.$refs.create.visible = false
-            })
-            .catch((e) => {
-              console.log(e)
+          .catch((err) => {
+            errorNum += 1
           })
           .finally(() => {
-              that.loading = false
-              that.loadTip = ''
-              that.selectedRowKeys = []
-              that.$refs.xTable.getVxetableRef().clearCheckboxRow()
-              that.$refs.xTable.getVxetableRef().clearCheckboxReserve()
-              that.reloadData()
-            })
-        },
+            this.loadTip = `正在批量修改，共${this.selectedRowKeys.length}个，成功${successNum}个，失败${errorNum}个`
           })
+      }
+      this.loading = false
+      this.loadTip = ''
+      this.selectedRowKeys = []
+      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+      this.reloadData()
     },
     batchDelete() {
       const that = this
@@ -567,29 +570,38 @@ export default {
         title: '警告',
         content: '确认删除？',
         onOk() {
-          that.loading = true
-          that.loadTip = '正在删除 ...'
-          const promises = that.selectedRowKeys.map((ciId) => {
-            return deleteCI(ciId).then((res) => {
-              return 'ok'
-            })
-          })
-          Promise.all(promises)
-            .then((res) => {
-              that.$message.success('删除成功')
-            })
-            .catch((e) => {
-              console.log(e)
-            })
-            .finally(() => {
-              that.loading = false
-              that.loadTip = ''
-              that.selectedRowKeys = []
-              that.$refs.xTable.getVxetableRef().clearCheckboxRow()
-              that.$refs.xTable.getVxetableRef().clearCheckboxReserve()
-              that.reloadData()
+          that.batchDeleteAsync()
+        },
       })
     },
+    async batchDeleteAsync() {
+      let successNum = 0
+      let errorNum = 0
+      this.loading = true
+      this.loadTip = `正在删除...`
+      for (let i = 0; i < this.selectedRowKeys.length; i++) {
+        await deleteCI(this.selectedRowKeys[i], false)
+          .then(() => {
+            successNum += 1
+          })
+          .catch((err) => {
+            errorNum += 1
+          })
+          .finally(() => {
+            this.loadTip = `正在删除，共${this.selectedRowKeys.length}个，成功${successNum}个，失败${errorNum}个`
+          })
+      }
+      this.loading = false
+      this.loadTip = ''
+      this.selectedRowKeys = []
+      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+      this.$nextTick(() => {
+        if (this.currentPage === 1) {
+          this.loadTableData()
+        } else {
+          this.currentPage = 1
+        }
       })
     },
     deleteCI(record) {

cmdb-ui/src/modules/cmdb/views/tree_views/index.vue

@@ -18,11 +18,7 @@
             属性说明
           </span>
         </span>
-        <a-button
-          size="small"
-          icon="plus"
-          type="primary"
-          @click="$refs.create.handleOpen(true, 'create')"
+        <a-button size="small" icon="plus" type="primary" @click="$refs.create.handleOpen(true, 'create')"
           >新建</a-button
         >
       </div>
@@ -284,6 +280,9 @@
                   <div>暂无数据</div>
                 </div>
               </template>
+              <template #loading>
+                <div style="height: 200px; line-height: 200px">{{ loadTip || '加载中...' }}</div>
+              </template>
             </ops-table>
             <div :style="{ textAlign: 'right', marginTop: '4px' }">
               <a-pagination
@@ -389,6 +388,7 @@ export default {
       instanceList: [],
       columns: [],
       loading: false,
+      loadTip: '',
       pageSizeOptions: ['50', '100', '200', '100000'],
       pageSize: 50,
       currentPage: 1,
@@ -970,26 +970,31 @@ export default {
         title: '警告',
         content: '确认删除？',
         onOk() {
-          that.loading = true
-          const promises = that.selectedRowKeys.map((ciId) => {
-            return deleteCI(ciId).then((res) => {
-              return 'ok'
-            })
-          })
-          Promise.all(promises)
-            .then((res) => {
-              that.$message.success('删除成功！')
-            })
-            .catch((e) => {
-              console.log(e)
-            })
-            .finally(() => {
-              that.loading = false
-              that.reload()
-            })
+          that.batchDeleteAsync()
         },
       })
     },
+    async batchDeleteAsync() {
+      let successNum = 0
+      let errorNum = 0
+      this.loading = true
+      this.loadTip = `正在删除...`
+      for (let i = 0; i < this.selectedRowKeys.length; i++) {
+        await deleteCI(this.selectedRowKeys[i], false)
+          .then(() => {
+            successNum += 1
+          })
+          .catch(() => {
+            errorNum += 1
+          })
+          .finally(() => {
+            this.loadTip = `正在删除，共${this.selectedRowKeys.length}个，成功${successNum}个，失败${errorNum}个`
+          })
+      }
+      this.loading = false
+      this.loadTip = ''
+      this.reload()
+    },
     sumbitFromCreateInstance({ ci_id }) {
       this.reload()
     },
@@ -999,7 +1004,15 @@ export default {
         title: '警告',
         content: '确认要批量修改吗 ?',
         onOk() {
-          that.loading = true
+          that.batchUpdateAsync(values)
+        },
+      })
+    },
+    async batchUpdateAsync(values) {
+      let successNum = 0
+      let errorNum = 0
+      this.loading = true
+      this.loadTip = `正在批量修改...`
       const payload = {}
       Object.keys(values).forEach((key) => {
         if (values[key] || values[key] === 0) {
@@ -1011,39 +1024,34 @@ export default {
           payload[key] = null
         }
       })
-          const promises = that.selectedRowKeys.map((ciId) => {
-            return updateCI(ciId, payload).then((res) => {
-              return 'ok'
+      this.$refs.create.visible = false
+      for (let i = 0; i < this.selectedRowKeys.length; i++) {
+        await updateCI(this.selectedRowKeys[i], payload, false)
+          .then(() => {
+            successNum += 1
           })
-          })
-          Promise.all(promises)
-            .then((res) => {
-              that.$message.success('批量修改成功')
-            })
-            .catch((e) => {
-              console.log(e)
+          .catch(() => {
+            errorNum += 1
           })
           .finally(() => {
-              that.loading = false
-              that.$refs.create.visible = false
-              const arr1 = that.treeViewsLevels.map((item) => item.name)
+            this.loadTip = `正在批量修改，共${this.selectedRowKeys.length}个，成功${successNum}个，失败${errorNum}个`
+          })
+      }
+      this.loading = false
+      this.loadTip = ''
+      const arr1 = this.treeViewsLevels.map((item) => item.name)
       const arr2 = Object.keys(values)
       const arr3 = arr1.filter((item) => {
         return arr2.includes(item)
       })
       if (arr3.length) {
-                that.reload()
+        this.reload()
         return
       }
-              setTimeout(() => {
-                that.handleLoadInstance()
-              }, 1000)
-              that.selectedRowKeys = []
-              that.$refs.xTable.getVxetableRef().clearCheckboxRow()
-              that.$refs.xTable.getVxetableRef().clearCheckboxReserve()
-            })
-        },
-      })
+      this.selectedRowKeys = []
+      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+      this.handleLoadInstance()
     },
     onShowSizeChange(current, pageSize) {
       this.pageSize = pageSize