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)">{{
-          operate.label
-        }}</el-button>
+        <el-button
+          v-if="showButton(operate)"
+          :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)">{{
-          operate.label
-        }}</el-button>
+        <el-button
+          v-if="showButton(operate)"
+          :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,28 +173,34 @@ export default {
             break;
           case "add":
           case "update": {
-            console.log("update extraParam: ", this.configs.extraParam);
-            const method = payload.name === "add" ? "POST" : "PUT";
-
-            const fields = {};
-            fields[this.configs.extraParam] = this.relatedId;
-            // [this.configs.extraParam]: this.relatedId,  // this.configs.extraParam 只能是字符串
-            if (this.configs.forceAttachCode) fields["code"] = "";
-
-            this.$http({
-              url: this.urls.subase,
-              method,
-              data: {
-                ...this.dataForm,
-                ...fields,
-              },
-            }).then(({ data: res }) => {
-              console.log("[add&update] res is: ", res);
-              if (res.code === 0) {
-                this.$message.success(payload.name === "add" ? "添加成功" : "更新成功");
-                this.$emit("refreshDataList");
-                this.handleClose();
-              } else this.$message.error(res.msg);
+            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";
+
+                const fields = {};
+                fields[this.configs.extraParam] = this.relatedId;
+                // [this.configs.extraParam]: this.relatedId,  // this.configs.extraParam 只能是字符串
+                if (this.configs.forceAttachCode) fields["code"] = "";
+
+                this.$http({
+                  url: this.urls.subase,
+                  method,
+                  data: {
+                    ...this.dataForm,
+                    ...fields,
+                  },
+                }).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");
+                    this.handleClose();
+                  } else this.$message.error(res.msg);
+                });
+              }
             });
           }
         }