From bb837829b4a0805a1f2a4fe93a944e8257c79e32 Mon Sep 17 00:00:00 2001
From: rain <1679827795@qq.com>
Date: Sat, 19 Apr 2025 15:14:01 +0800
Subject: [PATCH] 增加按钮loading状态
---
src/views/tickets/ticket.vue | 54 ++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 42 insertions(+), 12 deletions(-)
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index 6f19245..1f1db67 100644
--- a/src/views/tickets/ticket.vue
+++ b/src/views/tickets/ticket.vue
@@ -145,8 +145,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
- <el-button type="danger" @click="submitForm">发布</el-button>
- <el-button type="infoprimary" plain @click="saveDraft">存草稿</el-button>
+ <el-button type="danger" :loading="submitLoading" @click="submitForm">发布</el-button>
+ <el-button type="infoprimary" plain :loading="draftLoading" @click="saveDraft">存草稿</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</div>
</template>
@@ -347,23 +347,23 @@
<div class="dialog-footer">
<template v-if="currentDetail.status === 2">
<!-- 待审核 -->
- <el-button v-if="hasReviewBtnPermission()" type="primary" @click="approveTicket">通过</el-button>
- <el-button v-if="hasReviewBtnPermission()" type="danger" @click="rejectTicket">不通过</el-button>
+ <el-button v-if="hasReviewBtnPermission()" type="primary" :loading="approveLoading" @click="approveTicket">通过</el-button>
+ <el-button v-if="hasReviewBtnPermission()" type="danger" :loading="rejectLoading" @click="rejectTicket">不通过</el-button>
<el-button @click="detailVisible = false">取消</el-button>
</template>
<template v-else-if="currentDetail.status === 0">
- <el-button v-if="hasProcessingBtnPermission()" type="primary" @click="approveAndDispatch">通过并派发</el-button>
- <el-button v-if="hasProcessingBtnPermission()" type="danger" @click="rejectTicket">不通过</el-button>
+ <el-button v-if="hasProcessingBtnPermission()" type="primary" :loading="dispatchLoading" @click="approveAndDispatch">通过并派发</el-button>
+ <el-button v-if="hasProcessingBtnPermission()" type="danger" :loading="rejectLoading" @click="rejectTicket">不通过</el-button>
<el-button @click="detailVisible = false">取消</el-button>
</template>
<template v-if="currentDetail.status === 3">
<!-- 处理中 -->
- <el-button v-if="hasProcessedAndOverBtnPermission()" type="primary" @click="completeTicket">完成工单</el-button>
+ <el-button v-if="hasProcessedAndOverBtnPermission()" type="primary" :loading="completeLoading" @click="completeTicket">完成工单</el-button>
<el-button @click="detailVisible = false">取消</el-button>
</template>
<template v-else-if="currentDetail.status === 4">
<!-- 已完成 -->
- <el-button v-if="hasProcessedAndOverBtnPermission()" type="primary" @click="finalizeTicket">完结工单</el-button>
+ <el-button v-if="hasProcessedAndOverBtnPermission()" type="primary" :loading="finalizeLoading" @click="finalizeTicket">完结工单</el-button>
<el-button @click="detailVisible = false">取消</el-button>
</template>
<template v-else-if="currentDetail.status === 5">
@@ -390,7 +390,7 @@
</el-form>
<template #footer>
<el-button @click="dispatchDialogVisible = false">取消</el-button>
- <el-button type="primary" @click="submitDispatch">确认派发</el-button>
+ <el-button type="primary" :loading="dispatchLoading" @click="submitDispatch">确认派发</el-button>
</template>
</el-dialog>
@@ -453,6 +453,12 @@
data() {
return {
submitLoading: false, // 新增loading状态
+ draftLoading: false,
+ approveLoading: false,
+ rejectLoading: false,
+ dispatchLoading: false,
+ completeLoading: false,
+ finalizeLoading: false,
activeTab: "all",
// tabs 只保留静态结构，不做权限判断
tabs: [
@@ -1043,8 +1049,8 @@
},
async saveDraft() {
- if (this.submitLoading) return; // 防止重复提交
- this.submitLoading = true;
+ if (this.draftLoading) return; // 防止重复提交
+ this.draftLoading = true;
try {
let handlerValue = this.form.handler;
if (!handlerValue || handlerValue === '未分配') {
@@ -1093,7 +1099,7 @@
this.$message.error(error.message || '保存草稿失败，请稍后重试');
}
finally {
- this.submitLoading = false;
+ this.draftLoading = false;
}
},
@@ -1483,6 +1489,8 @@
},
async approveTicket() {
+ if (this.approveLoading) return;
+ this.approveLoading = true;
try {
const data = {
id: this.currentDetail.id,
@@ -1507,9 +1515,13 @@
}
} catch (error) {
this.$message.error(error.message || '操作失败，请稍后重试');
+ } finally {
+ this.approveLoading = false;
}
},
async rejectTicket() {
+ if (this.rejectLoading) return;
+ this.rejectLoading = true;
try {
const data = {
id: this.currentDetail.id,
@@ -1527,6 +1539,8 @@
}
} catch (error) {
this.$message.error(error.message || '操作失败，请稍后重试');
+ } finally {
+ this.rejectLoading = false;
}
},
async submitProcessing() {
@@ -1563,6 +1577,8 @@
this.$message.success("工单已标记为完成");
},
async completeTicket() {
+ if (this.completeLoading) return;
+ this.completeLoading = true;
try {
if (!this.currentDetail.processingDetail) {
this.$message.warning('请先填写事件处理详情');
@@ -1591,9 +1607,13 @@
} catch (error) {
console.error('完成工单失败:', error);
this.$message.error(error.message || '操作失败，请稍后重试');
+ } finally {
+ this.completeLoading = false;
}
},
async approveAndDispatch() {
+ if (this.dispatchLoading) return;
+ this.dispatchLoading = true;
this.dispatchDialogVisible = true; // 打开派发对话框
},
hasProcessingBtnPermission() {
@@ -1612,6 +1632,8 @@
return this.permission && this.permission.tickets_review_btn === true;
},
async submitDispatch() {
+ if (this.dispatchLoading) return;
+ this.dispatchLoading = true;
this.$refs.dispatchForm.validate(async (valid) => {
if (valid) {
try {
@@ -1641,11 +1663,17 @@
} catch (error) {
console.error('派发失败:', error);
this.$message.error(error.message || '派发失败，请稍后重试');
+ } finally {
+ this.dispatchLoading = false;
}
+ } else {
+ this.dispatchLoading = false;
}
});
},
async finalizeTicket() {
+ if (this.finalizeLoading) return;
+ this.finalizeLoading = true;
try {
// 检查是否上传了图片
if (!this.currentDetail.photos || !this.currentDetail.photos.length) {
@@ -1673,6 +1701,8 @@
} catch (error) {
console.error('完结工单失败:', error);
this.$message.error(error.message || '操作失败，请稍后重试');
+ } finally {
+ this.finalizeLoading = false;
}
},
--
Gitblit v1.9.3