增加按钮loading状态

rain

2025-04-19 bb837829b4a0805a1f2a4fe93a944e8257c79e32

增加按钮loading状态

 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;
      }
    },