From 32e073f3fdfd549b3f6eb3a3e9222ea0e643439f Mon Sep 17 00:00:00 2001
From: wang-liang0615 <53748875+wang-liang0615@users.noreply.github.com>
Date: Wed, 13 Dec 2023 14:50:53 +0800
Subject: [PATCH] fix(cmdb-ui):batch upload cancel bug && download error (#306)

---
 cmdb-ui/src/modules/cmdb/api/batch.js         |  8 ++-
 .../src/modules/cmdb/views/batch/index.vue    | 56 ++++++++++++++-----
 .../cmdb/views/batch/modules/CiTypeChoice.vue |  5 +-
 .../views/batch/modules/CiUploadTable.vue     | 34 ++++++++++-
 .../views/batch/modules/UploadFileForm.vue    | 23 +++++++-
 .../cmdb/views/batch/modules/UploadResult.vue | 50 +++++++++--------
 6 files changed, 130 insertions(+), 46 deletions(-)

diff --git a/cmdb-ui/src/modules/cmdb/api/batch.js b/cmdb-ui/src/modules/cmdb/api/batch.js
index c37efc5..7959f50 100644
--- a/cmdb-ui/src/modules/cmdb/api/batch.js
+++ b/cmdb-ui/src/modules/cmdb/api/batch.js
@@ -16,12 +16,14 @@ export function processFile(fileObj) {
 }
 
 export function uploadData(ciId, data) {
-  data.ci_type = ciId
-  data.exist_policy = 'replace'
   return axios({
     url: '/v0.1/ci',
     method: 'POST',
-    data,
+    data: {
+      ...data,
+      ci_type: ciId,
+      exist_policy: 'replace'
+    },
     isShowMessage: false
   })
 }
diff --git a/cmdb-ui/src/modules/cmdb/views/batch/index.vue b/cmdb-ui/src/modules/cmdb/views/batch/index.vue
index 5ac90b5..c6c8420 100644
--- a/cmdb-ui/src/modules/cmdb/views/batch/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/batch/index.vue
@@ -1,11 +1,16 @@
 <template>
   <div class="cmdb-batch-upload" :style="{ height: `${windowHeight - 64}px` }">
     <div id="title">
-      <ci-type-choice @getCiTypeAttr="showCiType" />
+      <ci-type-choice ref="ciTypeChoice" @getCiTypeAttr="showCiType" />
     </div>
     <a-row>
       <a-col :span="12">
-        <upload-file-form :ciType="ciType" ref="uploadFileForm" @uploadDone="uploadDone"></upload-file-form>
+        <upload-file-form
+          :isUploading="isUploading"
+          :ciType="ciType"
+          ref="uploadFileForm"
+          @uploadDone="uploadDone"
+        ></upload-file-form>
       </a-col>
       <a-col :span="24" v-if="ciType && uploadData.length">
         <CiUploadTable :ciTypeAttrs="ciTypeAttrs" ref="ciUploadTable" :uploadData="uploadData"></CiUploadTable>
@@ -13,15 +18,19 @@
           <a-space size="large">
             <a-button type="primary" ghost @click="handleCancel">取消</a-button>
             <a-button @click="handleUpload" type="primary">上传</a-button>
+            <a-button v-if="hasError && !isUploading" @click="downloadError" type="primary">失败下载</a-button>
           </a-space>
         </div>
       </a-col>
-      <a-col :span="24">
+      <a-col :span="24" v-if="ciType">
         <upload-result
           ref="uploadResult"
           :upLoadData="uploadData"
           :ciType="ciType"
           :unique-field="uniqueField"
+          :isUploading="isUploading"
+          @uploadResultDone="uploadResultDone"
+          @uploadResultError="uploadResultError"
         ></upload-result>
       </a-col>
     </a-row>
@@ -52,7 +61,8 @@ export default {
       ciType: 0,
       uniqueField: '',
       uniqueId: 0,
-      displayUpload: true,
+      isUploading: false,
+      hasError: false,
     }
   },
   computed: {
@@ -60,13 +70,12 @@ export default {
       windowHeight: (state) => state.windowHeight,
     }),
   },
-  inject: ['reload'],
   methods: {
     showCiType(message) {
-      this.ciTypeAttrs = message
-      this.ciType = message.type_id
-      this.uniqueField = message.unique
-      this.uniqueId = message.unique_id
+      this.ciTypeAttrs = message ?? {}
+      this.ciType = message?.type_id ?? 0
+      this.uniqueField = message?.unique ?? ''
+      this.uniqueId = message?.unique_id ?? 0
     },
     uploadDone(dataList) {
       const _uploadData = filterNull(dataList).map((item, i) => {
@@ -77,13 +86,13 @@ export default {
               const _find = this.ciTypeAttrs.attributes.find(
                 (attr) => attr.alias === dataList[0][j] || attr.name === dataList[0][j]
               )
-              if (_find?.value_type === '4') {
+              if (_find?.value_type === '4' && typeof ele === 'number') {
                 _ele[dataList[0][j]] = moment(Math.round((ele - 25569) * 86400 * 1000 - 28800000)).format('YYYY-MM-DD')
-              } else if (_find?.value_type === '3') {
+              } else if (_find?.value_type === '3' && typeof ele === 'number') {
                 _ele[dataList[0][j]] = moment(Math.round((ele - 25569) * 86400 * 1000 - 28800000)).format(
                   'YYYY-MM-DD HH:mm:ss'
                 )
-              } else if (_find?.value_type === '5') {
+              } else if (_find?.value_type === '5' && typeof ele === 'number') {
                 _ele[dataList[0][j]] = moment(Math.round(ele * 86400 * 1000 - 28800000)).format('HH:mm:ss')
               } else {
                 _ele[dataList[0][j]] = ele
@@ -95,6 +104,9 @@ export default {
         return item
       })
       this.uploadData = _uploadData.slice(1)
+      this.hasError = false
+      this.isUploading = false
+      this.$refs.uploadResult.visible = false
     },
     handleUpload() {
       if (!this.ciType) {
@@ -102,6 +114,7 @@ export default {
         return
       }
       if (this.uploadData && this.uploadData.length > 0) {
+        this.isUploading = true
         this.$nextTick(() => {
           this.$refs.uploadResult.upload2Server()
         })
@@ -110,7 +123,24 @@ export default {
       }
     },
     handleCancel() {
-      this.reload()
+      if (!this.isUploading) {
+        this.showCiType(null)
+        this.$refs.ciTypeChoice.selectNum = null
+        this.hasError = false
+      } else {
+        this.$message.warning('批量上传已取消')
+        this.isUploading = false
+      }
+    },
+    uploadResultDone() {
+      this.isUploading = false
+    },
+    uploadResultError(index) {
+      this.hasError = true
+      this.$refs.ciUploadTable.uploadResultError(index)
+    },
+    downloadError() {
+      this.$refs.ciUploadTable.downloadError()
     },
   },
 }
diff --git a/cmdb-ui/src/modules/cmdb/views/batch/modules/CiTypeChoice.vue b/cmdb-ui/src/modules/cmdb/views/batch/modules/CiTypeChoice.vue
index 5a7dc39..54f9c21 100644
--- a/cmdb-ui/src/modules/cmdb/views/batch/modules/CiTypeChoice.vue
+++ b/cmdb-ui/src/modules/cmdb/views/batch/modules/CiTypeChoice.vue
@@ -8,6 +8,7 @@
       :style="{ width: '300px' }"
       class="ops-select"
       :filter-option="filterOption"
+      v-model="selectNum"
     >
       <a-select-option v-for="ciType in ciTypeList" :key="ciType.name" :value="ciType.id">{{
         ciType.alias
@@ -99,7 +100,7 @@ export default {
     return {
       ciTypeList: [],
       ciTypeName: '',
-      selectNum: 0,
+      selectNum: null,
       selectCiTypeAttrList: [],
       visible: false,
       checkedAttrs: [],
@@ -131,7 +132,6 @@ export default {
   methods: {
     selectCiType(el) {
       // 当选择好模板类型时的回调函数
-      this.selectNum = el
       getCITypeAttributesById(el).then((res) => {
         this.$emit('getCiTypeAttr', res)
         this.selectCiTypeAttrList = res
@@ -155,7 +155,6 @@ export default {
           })
         }
         this.parentsType = res.parents.filter((parent) => this.canEdit[parent.id])
-
         const _parentsForm = {}
         res.parents.forEach((item) => {
           const _find = item.attributes.find((attr) => attr.id === item.unique_id)
diff --git a/cmdb-ui/src/modules/cmdb/views/batch/modules/CiUploadTable.vue b/cmdb-ui/src/modules/cmdb/views/batch/modules/CiUploadTable.vue
index 53eeea7..ec97359 100644
--- a/cmdb-ui/src/modules/cmdb/views/batch/modules/CiUploadTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/batch/modules/CiUploadTable.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="cmdb-batch-upload-table">
     <vxe-table
+      ref="xTable"
       stripe
       show-header-overflow
       show-overflow=""
@@ -9,6 +10,7 @@
       :max-height="200"
       :data="dataSource"
       resizable
+      :row-style="rowStyle"
     >
       <vxe-column type="seq" width="40" />
       <vxe-column
@@ -37,7 +39,9 @@ export default {
     },
   },
   data() {
-    return {}
+    return {
+      errorIndexList: [],
+    }
   },
   computed: {
     columns() {
@@ -65,7 +69,33 @@ export default {
       return _.cloneDeep(this.uploadData)
     },
   },
-  methods: {},
+  watch: {
+    uploadData() {
+      this.errorIndexList = []
+    },
+  },
+  methods: {
+    uploadResultError(index) {
+      const _errorIndexList = _.cloneDeep(this.errorIndexList)
+      _errorIndexList.push(index)
+      this.errorIndexList = _errorIndexList
+    },
+    rowStyle({ rowIndex }) {
+      if (this.errorIndexList.includes(rowIndex)) {
+        return 'color:red;'
+      }
+    },
+    downloadError() {
+      const data = this.uploadData.filter((item, index) => this.errorIndexList.includes(index))
+      this.$refs.xTable.exportData({
+        data,
+        type: 'xlsx',
+        columnFilterMethod({ column }) {
+          return column.property
+        },
+      })
+    },
+  },
 }
 </script>
 <style lang="less" scoped>
diff --git a/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue b/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue
index 1599a3b..bac1322 100644
--- a/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadFileForm.vue
@@ -7,7 +7,7 @@
       accept=".xls,.xlsx"
       :showUploadList="false"
       :fileList="fileList"
-      :disabled="!ciType"
+      :disabled="!ciType || isUploading"
     >
       <img :style="{ width: '80px', height: '80px' }" src="@/assets/file_upload.png" />
       <p class="ant-upload-text">点击或拖拽文件至此上传！</p>
@@ -29,7 +29,11 @@ export default {
     ciType: {
       type: Number,
       default: 0,
-    }
+    },
+    isUploading: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -40,7 +44,20 @@ export default {
       percent: 0,
     }
   },
-
+  watch: {
+    ciType: {
+      handler(newValue) {
+        if (!newValue) {
+          this.ciItemNum = 0
+          this.fileList = []
+          this.dataList = []
+          this.progressStatus = 'active'
+          this.percent = 0
+          this.$emit('uploadDone', this.dataList)
+        }
+      },
+    },
+  },
   methods: {
     customRequest(data) {
       this.fileList = [data.file]
diff --git a/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadResult.vue b/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadResult.vue
index eee7409..55c3b54 100644
--- a/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadResult.vue
+++ b/cmdb-ui/src/modules/cmdb/views/batch/modules/UploadResult.vue
@@ -34,6 +34,10 @@ export default {
       required: true,
       type: String,
     },
+    isUploading: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: function() {
     return {
@@ -51,13 +55,6 @@ export default {
     },
   },
   methods: {
-    async sleep(n) {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve()
-        }, n || 5)
-      })
-    },
     async upload2Server() {
       this.visible = true
       this.success = 0
@@ -65,22 +62,31 @@ export default {
       this.errorItems = []
       const floor = Math.ceil(this.total / 6)
       for (let i = 0; i < floor; i++) {
-        const itemList = this.upLoadData.slice(6 * i, 6 * i + 6)
-        const promises = itemList.map((x) => uploadData(this.ciType, x))
-        await Promise.allSettled(promises)
-          .then((res) => {
-            res.forEach((r) => {
-              if (r.status === 'fulfilled') {
-                this.success += 1
-              } else {
-                this.errorItems.push(r?.reason?.response?.data.message ?? '请求出现错误，请稍后再试')
-                this.errorNum += 1
-              }
+        if (this.isUploading) {
+          const itemList = this.upLoadData.slice(6 * i, 6 * i + 6)
+          const promises = itemList.map((x) => uploadData(this.ciType, x))
+          await Promise.allSettled(promises)
+            .then((res) => {
+              res.forEach((r, j) => {
+                if (r.status === 'fulfilled') {
+                  this.success += 1
+                } else {
+                  this.errorItems.push(r?.reason?.response?.data.message ?? '请求出现错误，请稍后再试')
+                  this.errorNum += 1
+                  this.$emit('uploadResultError', 6 * i + j)
+                }
+              })
             })
-          })
-          .finally(() => {
-            this.complete += 6
-          })
+            .finally(() => {
+              this.complete += 6
+            })
+        } else {
+          break
+        }
+      }
+      if (this.isUploading) {
+        this.$emit('uploadResultDone')
+        this.$message.success('批量上传已完成')
       }
     },
   },