update btnLoading

src/components/DialogWithMenu.vue

@@ -140,7 +140,6 @@
               class=""
               style="text-align: left"
               background
-              hide-on-single-page
               @size-change="handleSizeChange"
               @current-change="handlePageChange"
               :current-page.sync="attrPage"
@@ -198,9 +197,14 @@
     <!-- footer  -->
     <div slot="footer">
       <template v-for="(operate, index) in configs.form.operations">
-        <el-button v-if="showButton(operate)" :key="'operation_' + index" :type="operate.type" @click="handleBtnClick(operate)">{{
+        <el-button
-          operate.label
+          v-if="showButton(operate)"
-        }}</el-button>
+          :key="'operation_' + index"
+          :type="operate.type"
+          @click="handleBtnClick(operate)"
+          :loading="(operate.name === 'add' || operate.name === 'update') && btnLoading"
+          >{{ operate.label }}</el-button
+        >
       </template>
       <el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
     </div>
@@ -324,6 +328,7 @@ export default {
 
     return {
       // configs,
+      btnLoading: false,
       loadingStatus: false,
       activeMenu: this.configs.menu[0].name,
       dataForm,
@@ -366,6 +371,14 @@ export default {
       currentImgUrl: "",
     };
   },
+  watch: {
+    dialogVisible: function (val) {
+      if (!!val) {
+        this.attrPage = 1
+        this.attrSize = 5
+      }
+    },
+  },
   computed: {
     actualMenus() {
       return this.configs.menu.filter((m) => {
@@ -502,7 +515,7 @@ export default {
           });
         } else {
           // 如果不是编辑
-          this.updateOptions()
+          this.updateOptions();
         }
       });
     },
@@ -683,6 +696,7 @@ export default {
             this.$refs.dataForm[0].validate((passed, result) => {
               if (passed) {
                 // 如果通过验证
+                this.btnLoading = true
                 this.loadingStatus = true;
                 const method = payload.name === "add" ? "POST" : "PUT";
 
@@ -712,11 +726,12 @@ export default {
                   },
                 })
                   .then(({ data: res }) => {
+                    this.btnLoading = true
+                    this.loadingStatus = false;
                     console.log("[add&update] res is: ", res);
                     if (res.code === 0) {
                       this.$message.success(payload.name === "add" ? "添加成功" : "更新成功");
                       this.$emit("refreshDataList");
-                      this.loadingStatus = false;
 
                       // 如果 watingToRefreshQueue 队列里有数据
                       // if (this.watingToRefreshQueue.length) {
@@ -746,7 +761,6 @@ export default {
                         type: "error",
                         duration: 2000,
                       });
-                      this.loadingStatus = false;
                     }
                   })
                   .catch((errMsg) => {
@@ -774,6 +788,7 @@ export default {
     },
     handleSizeChange(val) {
       this.attrPage = 1;
+      this.attrSize = val
       this.getSubList(1, val);
     },
 

src/components/SmallDialog.vue

@@ -48,9 +48,14 @@
     <!-- footer  -->
     <div slot="footer">
       <template v-for="(operate, index) in configs.operations">
-        <el-button v-if="showButton(operate)" :key="'operation_' + index" :type="operate.type" @click="handleBtnClick(operate)">{{
+        <el-button
-          operate.label
+          v-if="showButton(operate)"
-        }}</el-button>
+          :key="'operation_' + index"
+          :type="operate.type"
+          @click="handleBtnClick(operate)"
+          :loading="(operate.name === 'add' || operate.name === 'update') && btnLoading"
+          >{{ operate.label }}</el-button
+        >
       </template>
       <el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
     </div>
@@ -100,6 +105,7 @@ export default {
     });
 
     return {
+      btnLoading: false,
       visible: false,
       detailMode: false,
       dataForm,
@@ -167,6 +173,9 @@ export default {
             break;
           case "add":
           case "update": {
+            this.$refs.dataForm.validate((passed, result) => {
+              if (passed) {
+                this.btnLoading = true;
                 console.log("update extraParam: ", this.configs.extraParam);
                 const method = payload.name === "add" ? "POST" : "PUT";
 
@@ -184,6 +193,7 @@ export default {
                   },
                 }).then(({ data: res }) => {
                   console.log("[add&update] res is: ", res);
+                  this.btnLoading = false;
                   if (res.code === 0) {
                     this.$message.success(payload.name === "add" ? "添加成功" : "更新成功");
                     this.$emit("refreshDataList");
@@ -191,6 +201,8 @@ export default {
                   } else this.$message.error(res.msg);
                 });
               }
+            });
+          }
         }
       } else {
         console.log("[x] 不是这么用的! 缺少name属性");