fiex:新增学时审核按钮防抖逻辑

src/views/education/classManageMent/classHoursReview/studyTimes.vue

@@ -258,6 +258,7 @@
                     :disabled="scope.row.status !== 2"
                     class="btnstyles"
                     size="mini"
+                    :loading="disabledBtn"
                     @click="changeStatus(scope.row, 1, scope.$index)"
                     >通过</el-button
                   >
@@ -381,6 +382,7 @@
                           :disabled="scope2.row.status !== 2"
                           class="btnstyles"
                           size="mini"
+                          :loading="disabledBtn"
                           @click="
                             changeStatusCharpter(
                               scope2.row,
@@ -499,6 +501,7 @@
                                 :disabled="scope3.row.status !== 2"
                                 class="btnstyles"
                                 size="mini"
+                                :loading="disabledBtn"
                                 @click="
                                   changeStatusModule(
                                     scope3.row,
@@ -767,6 +770,7 @@
       </el-checkbox-group>
     </div>
     <el-dialog
+      @closed="loadingClose"
       :visible.sync="vidBoxHours"
       v-if="vidBoxHours"
       width="560px"
@@ -812,11 +816,16 @@
         </el-form>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="vidBoxHours = false">取 消</el-button>
-        <el-button @click="submitForm('formData')">确 定</el-button>
+        <el-button :loading="disabledBtn" @click="vidBoxHours = false"
+          >取 消</el-button
+        >
+        <el-button :loading="disabledBtn" @click="submitForm('formData')"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
+      @closed="loadingClose"
       :visible.sync="through"
       width="560px"
       :show-close="false"
@@ -837,11 +846,14 @@
         确认后，初审不可再修改，请检查清楚再操作！
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="through = false">取 消</el-button>
-        <el-button @click="submitOK(1)">确 定</el-button>
+        <el-button :loading="disabledBtn" @click="through = false"
+          >取 消</el-button
+        >
+        <el-button :loading="disabledBtn" @click="submitOK(1)">确 定</el-button>
       </span>
     </el-dialog>
     <el-dialog
+      @closed="loadingClose"
       :visible.sync="popback"
       width="560px"
       :show-close="false"
@@ -872,11 +884,14 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="popback = false">取 消</el-button>
-        <el-button @click="uploadForm">确 定</el-button>
+        <el-button :loading="disabledBtn" @click="popback = false"
+          >取 消</el-button
+        >
+        <el-button :loading="disabledBtn" @click="uploadForm">确 定</el-button>
       </span>
     </el-dialog>
     <el-dialog
+      @closed="loadingClose"
       :visible.sync="approvedOK"
       width="560px"
       :show-close="false"
@@ -909,8 +924,12 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="approvedOK = false">取 消</el-button>
-        <el-button @click="approvedOKFunc">确 定</el-button>
+        <el-button :loading="disabledBtn" @click="approvedOK = false"
+          >取 消</el-button
+        >
+        <el-button :loading="disabledBtn" @click="approvedOKFunc"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
   </div>
@@ -920,6 +939,7 @@
 export default {
   data() {
     return {
+      disabledBtn: false,
       msgTitle: [
         { label: "学习拍照异常", value: 1 },
         {
@@ -1163,7 +1183,7 @@ export default {
             this.$store
               .dispatch("tagsView/delView", this.$route)
               .then((results) => {
-                this.$router.go(-1)
+                this.$router.go(-1);
               });
           });
         } else {
@@ -1180,6 +1200,9 @@ export default {
     this.search();
   },
   methods: {
+    loadingClose() {
+      this.disabledBtn = false;
+    },
     /**
      * 每10秒调用一次 锁定页面
      */
@@ -1196,37 +1219,49 @@ export default {
      * 确认审核通过结果
      */
     approvedOKFunc() {
+      this.disabledBtn = true;
       let data = {
         gradeId: Number(this.$route.query.id),
         userId: Number(this.$route.query.userId),
         goodsId: Number(this.$route.query.goodsId),
       };
-      this.$api.editGradeUsereditrollconfirmPeriod(data).then(async (res) => {
-        await this.getUserInfo();
-        this.search();
-        this.$message.success("审核通过");
-        this.approvedOK = false;
-      });
+      this.$api
+        .editGradeUsereditrollconfirmPeriod(data)
+        .then(async (res) => {
+          await this.getUserInfo();
+          this.search();
+          this.$message.success("审核通过");
+          this.approvedOK = false;
+        })
+        .catch(() => {
+          this.disabledBtn = false;
+        });
     },
     /**
      * 打回待审核状态
      */
     uploadForm() {
+      this.disabledBtn = true;
       let data = {
         gradeId: Number(this.$route.query.id),
         userId: Number(this.$route.query.userId),
         goodsId: Number(this.$route.query.goodsId),
         ids: this.checkList,
       };
-      this.$api.editGradeUsereditrollbackPeriod(data).then(async (res) => {
-        this.checkList = []; //勾选列表
-        this.isIndeterminate = false; //待审半选
-        this.checkAll = false; //全选状态
-        await this.getUserInfo();
-        this.search();
-        this.$message.success("已打回待审核状态");
-        this.popback = false;
-      });
+      this.$api
+        .editGradeUsereditrollbackPeriod(data)
+        .then(async (res) => {
+          this.checkList = []; //勾选列表
+          this.isIndeterminate = false; //待审半选
+          this.checkAll = false; //全选状态
+          await this.getUserInfo();
+          this.search();
+          this.$message.success("已打回待审核状态");
+          this.popback = false;
+        })
+        .catch(() => {
+          this.disabledBtn = false;
+        });
     },
     /**
      *
@@ -1295,6 +1330,7 @@ export default {
      * 提交表单
      */
     formSubmits() {
+      this.disabledBtn = true;
       var self = this;
       switch (this.copyDatas.type) {
         case 1:
@@ -1327,6 +1363,7 @@ export default {
 
         default:
           this.$message.warning("提交失败,请联系管理人员检查问题");
+          this.disabledBtn = false;
           break;
       }
     },
@@ -1342,6 +1379,7 @@ export default {
         id: item.periodStatusId,
       };
       if (int === 1) {
+        this.disabledBtn = true;
         data.status = 1;
       }
       if (int === 2) {
@@ -1361,12 +1399,17 @@ export default {
           return;
         }
       }
-      this.$api.editGradeUsereditPeriode(data).then((res) => {
-        this.$message.success("修改成功");
-        this.vidBoxHours = false;
-        this.getNewList(index1, item.numIndex, item);
-        this.checkUpload(item.periodStatusId);
-      });
+      this.$api
+        .editGradeUsereditPeriode(data)
+        .then((res) => {
+          this.$message.success("修改成功");
+          this.vidBoxHours = false;
+          this.getNewList(index1, item.numIndex, item);
+          this.checkUpload(item.periodStatusId);
+        })
+        .finally(() => {
+          this.disabledBtn = false;
+        });
     },
     /**
      *
@@ -1381,6 +1424,7 @@ export default {
         id: item.periodStatusId,
       };
       if (int === 1) {
+        this.disabledBtn = true;
         data.status = 1;
       }
       if (int === 2) {
@@ -1401,12 +1445,17 @@ export default {
           return;
         }
       }
-      this.$api.editGradeUsereditPeriode(data).then((res) => {
-        this.$message.success("修改成功");
-        this.vidBoxHours = false;
-        this.getNewListchapt(index1, index2, item.numIndex, item);
-        this.checkUpload(item.periodStatusId);
-      });
+      this.$api
+        .editGradeUsereditPeriode(data)
+        .then((res) => {
+          this.$message.success("修改成功");
+          this.vidBoxHours = false;
+          this.getNewListchapt(index1, index2, item.numIndex, item);
+          this.checkUpload(item.periodStatusId);
+        })
+        .finally(() => {
+          this.disabledBtn = false;
+        });
     },
     /**
      *
@@ -1422,6 +1471,7 @@ export default {
         id: item.periodStatusId,
       };
       if (int === 1) {
+        this.disabledBtn = true;
         data.status = 1;
       }
       if (int === 2) {
@@ -1451,12 +1501,17 @@ export default {
           index3: index3,
         };
       }
-      this.$api.editGradeUsereditPeriode(data).then((res) => {
-        this.$message.success("修改成功");
-        this.vidBoxHours = false;
-        this.getNewListMores(index1, index2, index3, item.numIndex, item);
-        this.checkUpload(item.periodStatusId);
-      });
+      this.$api
+        .editGradeUsereditPeriode(data)
+        .then((res) => {
+          this.$message.success("修改成功");
+          this.vidBoxHours = false;
+          this.getNewListMores(index1, index2, index3, item.numIndex, item);
+          this.checkUpload(item.periodStatusId);
+        })
+        .finally(() => {
+          this.disabledBtn = false;
+        });
     },
     /**
      *
@@ -1491,6 +1546,7 @@ export default {
      * @remards 批量操作
      */
     submitOK(int, msg) {
+      this.disabledBtn = true;
       var data = {
         gradeId: Number(this.$route.query.id),
         userId: Number(this.$route.query.userId),
@@ -1504,21 +1560,26 @@ export default {
         data.auditReason = msg;
         data.status = 0;
       }
-      this.$api.editGradeUsereditPeriodeAll(data).then(async (res) => {
-        if (int === 1) {
-          this.$message.success("状态全部通过修改成功");
-          this.through = false;
-        }
-        if (int === 2) {
-          this.$message.success("状态全部作弊修改成功");
-          this.vidBoxHours = false;
-        }
-        this.checkList = []; //勾选列表
-        this.isIndeterminate = false; //待审半选
-        this.checkAll = false; //全选状态
-        await this.getUserInfo();
-        this.search();
-      });
+      this.$api
+        .editGradeUsereditPeriodeAll(data)
+        .then(async (res) => {
+          if (int === 1) {
+            this.$message.success("状态全部通过修改成功");
+            this.through = false;
+          }
+          if (int === 2) {
+            this.$message.success("状态全部作弊修改成功");
+            this.vidBoxHours = false;
+          }
+          this.checkList = []; //勾选列表
+          this.isIndeterminate = false; //待审半选
+          this.checkAll = false; //全选状态
+          await this.getUserInfo();
+          this.search();
+        })
+        .catch(() => {
+          this.disabledBtn = false;
+        });
     },
     /**
      *

src/views/education/classManageMent/learningHoursRecordList/studyTimesRecord.vue

@@ -280,6 +280,7 @@
                     :disabled="scope.row.status !== 2"
                     class="btnstyles"
                     size="mini"
+                    :loading="disabledBtn"
                     @click="changeStatus(scope.row, 1, scope.$index)"
                     >通过</el-button
                   >
@@ -403,6 +404,7 @@
                           :disabled="scope2.row.status !== 2"
                           class="btnstyles"
                           size="mini"
+                          :loading="disabledBtn"
                           @click="
                             changeStatusCharpter(
                               scope2.row,
@@ -521,6 +523,7 @@
                                 :disabled="scope3.row.status !== 2"
                                 class="btnstyles"
                                 size="mini"
+                                :loading="disabledBtn"
                                 @click="
                                   changeStatusModule(
                                     scope3.row,
@@ -789,6 +792,7 @@
       </el-checkbox-group>
     </div>
     <el-dialog
+      @closed="loadingClose"
       append-to-body
       :visible.sync="vidBoxHours"
       v-if="vidBoxHours"
@@ -835,11 +839,16 @@
         </el-form>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="vidBoxHours = false">取 消</el-button>
-        <el-button @click="submitForm('formData')">确 定</el-button>
+        <el-button :loading="disabledBtn" @click="vidBoxHours = false"
+          >取 消</el-button
+        >
+        <el-button :loading="disabledBtn" @click="submitForm('formData')"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
+      @closed="loadingClose"
       append-to-body
       :visible.sync="through"
       width="560px"
@@ -861,11 +870,14 @@
         确认后，初审不可再修改，请检查清楚再操作！
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="through = false">取 消</el-button>
-        <el-button @click="submitOK(1)">确 定</el-button>
+        <el-button :loading="disabledBtn" @click="through = false"
+          >取 消</el-button
+        >
+        <el-button :loading="disabledBtn" @click="submitOK(1)">确 定</el-button>
       </span>
     </el-dialog>
     <el-dialog
+      @closed="loadingClose"
       append-to-body
       :visible.sync="popback"
       width="560px"
@@ -897,11 +909,14 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="popback = false">取 消</el-button>
-        <el-button @click="uploadForm">确 定</el-button>
+        <el-button :loading="disabledBtn" @click="popback = false"
+          >取 消</el-button
+        >
+        <el-button :loading="disabledBtn" @click="uploadForm">确 定</el-button>
       </span>
     </el-dialog>
     <el-dialog
+      @closed="loadingClose"
       append-to-body
       :visible.sync="approvedOK"
       width="560px"
@@ -935,8 +950,12 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="approvedOK = false">取 消</el-button>
-        <el-button @click="approvedOKFunc">确 定</el-button>
+        <el-button :loading="disabledBtn" @click="approvedOK = false"
+          >取 消</el-button
+        >
+        <el-button :loading="disabledBtn" @click="approvedOKFunc"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
   </div>
@@ -952,6 +971,7 @@ export default {
   },
   data() {
     return {
+      disabledBtn: false,
       msgTitle: [
         { label: "学习拍照异常", value: 1 },
         {
@@ -1212,6 +1232,9 @@ export default {
     this.search();
   },
   methods: {
+    loadingClose() {
+      this.disabledBtn = false;
+    },
     /**
      * 每10秒调用一次 锁定页面
      */
@@ -1228,37 +1251,49 @@ export default {
      * 确认审核通过结果
      */
     approvedOKFunc() {
+      this.disabledBtn = true;
       let data = {
         gradeId: Number(this.objs.id),
         userId: Number(this.objs.userId),
         goodsId: Number(this.objs.goodsId),
       };
-      this.$api.editGradeUsereditrollconfirmPeriod(data).then(async (res) => {
-        await this.getUserInfo();
-        this.search();
-        this.$message.success("审核通过");
-        this.approvedOK = false;
-      });
+      this.$api
+        .editGradeUsereditrollconfirmPeriod(data)
+        .then(async (res) => {
+          await this.getUserInfo();
+          this.search();
+          this.$message.success("审核通过");
+          this.approvedOK = false;
+        })
+        .catch(() => {
+          this.disabledBtn = false;
+        });
     },
     /**
      * 打回待审核状态
      */
     uploadForm() {
+      this.disabledBtn = true;
       let data = {
         gradeId: Number(this.objs.id),
         userId: Number(this.objs.userId),
         goodsId: Number(this.objs.goodsId),
         ids: this.checkList,
       };
-      this.$api.editGradeUsereditrollbackPeriod(data).then(async (res) => {
-        this.checkList = []; //勾选列表
-        this.isIndeterminate = false; //待审半选
-        this.checkAll = false; //全选状态
-        await this.getUserInfo();
-        this.search();
-        this.$message.success("已打回待审核状态");
-        this.popback = false;
-      });
+      this.$api
+        .editGradeUsereditrollbackPeriod(data)
+        .then(async (res) => {
+          this.checkList = []; //勾选列表
+          this.isIndeterminate = false; //待审半选
+          this.checkAll = false; //全选状态
+          await this.getUserInfo();
+          this.search();
+          this.$message.success("已打回待审核状态");
+          this.popback = false;
+        })
+        .catch(() => {
+          this.disabledBtn = false;
+        });
     },
     /**
      *
@@ -1327,6 +1362,7 @@ export default {
      * 提交表单
      */
     formSubmits() {
+      this.disabledBtn = true;
       var self = this;
       switch (this.copyDatas.type) {
         case 1:
@@ -1359,6 +1395,7 @@ export default {
 
         default:
           this.$message.warning("提交失败,请联系管理人员检查问题");
+          this.disabledBtn = false;
           break;
       }
     },
@@ -1374,6 +1411,7 @@ export default {
         id: item.periodStatusId,
       };
       if (int === 1) {
+        this.disabledBtn = true;
         data.status = 1;
       }
       if (int === 2) {
@@ -1393,12 +1431,17 @@ export default {
           return;
         }
       }
-      this.$api.editGradeUsereditPeriode(data).then((res) => {
-        this.$message.success("修改成功");
-        this.vidBoxHours = false;
-        this.getNewList(index1, item.numIndex, item);
-        this.checkUpload(item.periodStatusId);
-      });
+      this.$api
+        .editGradeUsereditPeriode(data)
+        .then((res) => {
+          this.$message.success("修改成功");
+          this.vidBoxHours = false;
+          this.getNewList(index1, item.numIndex, item);
+          this.checkUpload(item.periodStatusId);
+        })
+        .finally(() => {
+          this.disabledBtn = false;
+        });
     },
     /**
      *
@@ -1413,6 +1456,7 @@ export default {
         id: item.periodStatusId,
       };
       if (int === 1) {
+        this.disabledBtn = true;
         data.status = 1;
       }
       if (int === 2) {
@@ -1433,12 +1477,17 @@ export default {
           return;
         }
       }
-      this.$api.editGradeUsereditPeriode(data).then((res) => {
-        this.$message.success("修改成功");
-        this.vidBoxHours = false;
-        this.getNewListchapt(index1, index2, item.numIndex, item);
-        this.checkUpload(item.periodStatusId);
-      });
+      this.$api
+        .editGradeUsereditPeriode(data)
+        .then((res) => {
+          this.$message.success("修改成功");
+          this.vidBoxHours = false;
+          this.getNewListchapt(index1, index2, item.numIndex, item);
+          this.checkUpload(item.periodStatusId);
+        })
+        .finally(() => {
+          this.disabledBtn = false;
+        });
     },
     /**
      *
@@ -1454,6 +1503,7 @@ export default {
         id: item.periodStatusId,
       };
       if (int === 1) {
+        this.disabledBtn = true;
         data.status = 1;
       }
       if (int === 2) {
@@ -1483,12 +1533,17 @@ export default {
           index3: index3,
         };
       }
-      this.$api.editGradeUsereditPeriode(data).then((res) => {
-        this.$message.success("修改成功");
-        this.vidBoxHours = false;
-        this.getNewListMores(index1, index2, index3, item.numIndex, item);
-        this.checkUpload(item.periodStatusId);
-      });
+      this.$api
+        .editGradeUsereditPeriode(data)
+        .then((res) => {
+          this.$message.success("修改成功");
+          this.vidBoxHours = false;
+          this.getNewListMores(index1, index2, index3, item.numIndex, item);
+          this.checkUpload(item.periodStatusId);
+        })
+        .finally(() => {
+          this.disabledBtn = false;
+        });
     },
     /**
      *
@@ -1523,6 +1578,7 @@ export default {
      * @remards 批量操作
      */
     submitOK(int, msg) {
+      this.disabledBtn = true;
       var data = {
         gradeId: Number(this.objs.id),
         userId: Number(this.objs.userId),
@@ -1536,21 +1592,26 @@ export default {
         data.auditReason = msg;
         data.status = 0;
       }
-      this.$api.editGradeUsereditPeriodeAll(data).then(async (res) => {
-        if (int === 1) {
-          this.$message.success("状态全部通过修改成功");
-          this.through = false;
-        }
-        if (int === 2) {
-          this.$message.success("状态全部作弊修改成功");
-          this.vidBoxHours = false;
-        }
-        this.checkList = []; //勾选列表
-        this.isIndeterminate = false; //待审半选
-        this.checkAll = false; //全选状态
-        await this.getUserInfo();
-        this.search();
-      });
+      this.$api
+        .editGradeUsereditPeriodeAll(data)
+        .then(async (res) => {
+          if (int === 1) {
+            this.$message.success("状态全部通过修改成功");
+            this.through = false;
+          }
+          if (int === 2) {
+            this.$message.success("状态全部作弊修改成功");
+            this.vidBoxHours = false;
+          }
+          this.checkList = []; //勾选列表
+          this.isIndeterminate = false; //待审半选
+          this.checkAll = false; //全选状态
+          await this.getUserInfo();
+          this.search();
+        })
+        .catch(() => {
+          this.disabledBtn = false;
+        });
     },
     /**
      *