fix: ticket duplicate submission

jumpserver · Nov 26, 2024 · d26f988 · d26f988
1 parent 42f27eb
commit d26f988
Showing 1 changed file with 56 additions and 12 deletions.
diff --git a/src/views/tickets/components/Comments.vue b/src/views/tickets/components/Comments.vue
@@ -27,15 +27,15 @@
       <el-form-item style="float: right">
         <template v-if="hasActionPerm">
           <el-button
-            :disabled="object.status.value === 'closed'"
+            :disabled="isDisabled || object.status.value === 'closed'"
             size="small"
             type="primary"
             @click="handleApprove"
           >
             <i class="fa fa-check" /> {{ $t('tickets.Accept') }}
           </el-button>
           <el-button
-            :disabled="object.status.value === 'closed'"
+            :disabled="isDisabled || object.status.value === 'closed'"
             size="small"
             type="warning"
             @click="handleReject"
@@ -45,7 +45,7 @@
         </template>
         <el-button
           v-if="isSelfTicket"
-          :disabled="object.status.value === 'closed'"
+          :disabled="isDisabled || object.status.value === 'closed'"
           size="small"
           type="danger"
           @click="handleClose"
@@ -94,6 +94,7 @@ export default {
   },
   data() {
     return {
+      isDisabled: false,
       comments: '',
       type_api: '',
       imageUrl: require('@/assets/img/avatar.png'),
@@ -156,17 +157,35 @@ export default {
       this.createComment(function() {
       })
       const url = `/api/v1/tickets/${this.type_api}/${this.object.id}/approve/`
-      this.$axios.put(url).then(res => this.reloadPage()).catch(err => this.$message.error(err))
+      this.$axios.put(url).then(res => {
+        this.reloadPage()
+      }).catch(err => {
+        this.$message.error(err)
+      }).finally(() => {
+        this.isDisabled = false
+      })
     },
     defaultReject() {
       this.createComment(function() {
       })
       const url = `/api/v1/tickets/${this.type_api}/${this.object.id}/reject/`
-      this.$axios.put(url).then(res => this.reloadPage()).catch(err => this.$message.error(err))
+      this.$axios.put(url).then(res => {
+        this.reloadPage()
+      }).catch(err => {
+        this.$message.error(err)
+      }).finally(() => {
+        this.isDisabled = false
+      })
     },
     defaultClose() {
       const url = `/api/v1/tickets/${this.type_api}/${this.object.id}/close/`
-      this.$axios.put(url).then(res => this.reloadPage()).catch(err => this.$message.error(err))
+      this.$axios.put(url).then(res => {
+        this.reloadPage()
+      }).catch(err => {
+        this.$message.error(err)
+      }).finally(() => {
+        this.isDisabled = false
+      })
     },
     createComment(successCallback) {
       const commentText = this.form.comments
@@ -187,17 +206,42 @@ export default {
         }
       })
     },
+    handleAction(actionType) {
+      if (this.isDisabled) {
+        return
+      }
+
+      this.isDisabled = true
+      let handler
+      switch (actionType) {
+        case 'approve':
+          handler = this.approve || this.defaultApprove
+          break
+        case 'reject':
+          handler = this.reject || this.defaultReject
+          break
+        case 'close':
+          handler = this.close || this.defaultClose
+          break
+        default:
+          handler = null
+          break
+      }
+
+      if (handler) {
+        handler()
+      } else {
+        this.$message.error('No handler for action')
+      }
+    },
     handleApprove() {
-      const handler = this.approve || this.defaultApprove
-      handler()
+      this.handleAction('approve')
     },
     handleReject() {
-      const handler = this.reject || this.defaultReject
-      handler()
+      this.handleAction('reject')
     },
     handleClose() {
-      const handler = this.close || this.defaultClose
-      handler()
+      this.handleAction('close')
     },
     handleComment() {
       this.createComment(