提交表单防抖

mall4v/src/utils/debounce.js

@@ -0,0 +1,19 @@
+// 防抖 防止表单重复提交
+export const Debounce = (fn, t) => {
+  let delay = t || 300
+  let timer
+  return function () {
+    let args = arguments
+    if (timer) {
+      clearTimeout(timer)
+    }
+
+    let callNow = !timer
+
+    timer = setTimeout(() => {
+      timer = null
+    }, delay)
+
+    if (callNow) fn.apply(this, args)
+  }
+}

mall4v/src/views/modules/admin/indexImg-add-or-update.vue

@@ -71,6 +71,7 @@
 <script>
 import PicUpload from '@/components/pic-upload'
 import ProdsSelect from '@/components/prods-select'
+import { Debounce } from '@/utils/debounce'
 export default {
   data () {
     return {
@@ -140,7 +141,7 @@ export default {
       }
     },
     // 表单提交
-    dataFormSubmit () {
+    dataFormSubmit: Debounce(function () {
       this.$refs['dataForm'].validate((valid) => {
         if (!valid) {
           return
@@ -162,7 +163,7 @@ export default {
           })
         })
       })
-    },
+    }),
     // 删除关联数据
     deleteRelation () {
       this.dataForm.relation = null

mall4v/src/views/modules/order/order-addr.vue

@@ -22,58 +22,59 @@
   </el-dialog>
 </template>
 <script>
-  export default {
-    data () {
-      return {
-        visible: false,
-        dataForm: {
-          addrOrderId: 0,
-          receiver: '',
-          province: '',
-          mobile: ''
-        }
+import { Debounce } from '@/utils/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        addrOrderId: 0,
+        receiver: '',
+        province: '',
+        mobile: ''
       }
-    },
-    methods: {
-      init (addrOrderId) {
-        this.dataForm.addrOrderId = addrOrderId
-        this.$http({
-          url: this.$http.adornUrl(`/prod/category/listCategory/${this.dataForm.addrOrderId}`),
-          method: 'get',
-          params: this.$http.adornParams()
-        }).then(({data}) => {
-          this.dataForm = data
-        }).then(() => {
-          this.visible = true
-          this.$nextTick(() => {
-            this.$refs['dataForm'].resetFields()
-          })
+    }
+  },
+  methods: {
+    init (addrOrderId) {
+      this.dataForm.addrOrderId = addrOrderId
+      this.$http({
+        url: this.$http.adornUrl(`/prod/category/listCategory/${this.dataForm.addrOrderId}`),
+        method: 'get',
+        params: this.$http.adornParams()
+      }).then(({data}) => {
+        this.dataForm = data
+      }).then(() => {
+        this.visible = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].resetFields()
         })
-      },
+      })
+    },
       // 表单提交
-      dataFormSubmit () {
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            this.$http({
-              url: this.$http.adornUrl(`/prod/category`),
-              method: this.dataForm.currentId ? 'put' : 'post',
-              data: this.$http.adornData({
-                'categoryId': this.dataForm.currentId || undefined
-              })
-            }).then(({data}) => {
-              this.$message({
-                message: '操作成功',
-                type: 'success',
-                duration: 1500,
-                onClose: () => {
-                  this.visible = false
-                  this.$emit('refreshDataList')
-                }
-              })
+    dataFormSubmit: Debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl(`/prod/category`),
+            method: this.dataForm.currentId ? 'put' : 'post',
+            data: this.$http.adornData({
+              'categoryId': this.dataForm.currentId || undefined
             })
-          }
-        })
-      }
-    }
+          }).then(({data}) => {
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.visible = false
+                this.$emit('refreshDataList')
+              }
+            })
+          })
+        }
+      })
+    })
   }
+}
 </script>

mall4v/src/views/modules/prod/category-add-or-update.vue

@@ -60,6 +60,7 @@
 <script>
 import { treeDataTranslate, idList } from '@/utils'
 import PicUpload from '@/components/pic-upload'
+import { Debounce } from '@/utils/debounce'
 export default {
   data () {
     return {
@@ -133,7 +134,7 @@ export default {
       this.dataForm.parentId = val[val.length - 1]
     },
     // 表单提交
-    dataFormSubmit () {
+    dataFormSubmit: Debounce(function () {
       if (this.selectedCategory.length === 1) {
         this.dataForm.grade = 0
       }
@@ -175,7 +176,7 @@ export default {
           })
         }
       })
-    }
+    })
   }
 }
 </script>

mall4v/src/views/modules/prod/prodInfo.vue

@@ -91,6 +91,7 @@ import ProdTransport from './prod-transport'
 import SkuTag from './sku-tag'
 import SkuTable from './sku-table'
 import TinyMce from '@/components/tiny-mce'
+import { Debounce } from '@/utils/debounce'
 
 export default {
   data () {
@@ -186,7 +187,7 @@ export default {
       this.dataForm.categoryId = val[val.length - 1]
     },
     // 表单提交
-    dataFormSubmit () {
+    dataFormSubmit: Debounce(function () {
       this.$refs['dataForm'].validate((valid) => {
         if (!valid) {
           return
@@ -229,7 +230,7 @@ export default {
           })
         })
       })
-    },
+    }),
     paramSetPriceAndStocks (param) {
       // 获取规格属性信息
       // param.skuList = this.$refs.prodSpec.getTableSpecData()

mall4v/src/views/modules/prod/prodTag-add-or-update.vue

@@ -49,6 +49,7 @@
 </template>
 
 <script>
+import { Debounce } from '@/utils/debounce'
 export default {
   data () {
     return {
@@ -86,7 +87,7 @@ export default {
       })
     },
     // 表单提交
-    dataFormSubmit () {
+    dataFormSubmit: Debounce(function () {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
           this.$http({
@@ -106,7 +107,7 @@ export default {
           })
         }
       })
-    }
+    })
   }
 }
 </script>

mall4v/src/views/modules/prod/spec-add-or-update.vue

@@ -49,6 +49,7 @@
   </el-dialog>
 </template>
 <script>
+import { Debounce } from '@/utils/debounce'
 export default {
   data () {
     return {
@@ -78,7 +79,7 @@ export default {
       this.visible = true
     },
     // 表单提交
-    dataFormSubmit () {
+    dataFormSubmit: Debounce(function () {
       if (this.dataList[0].prodPropValues) {
         let temp = []
         for (const key in this.dataList[0].prodPropValues) {
@@ -132,7 +133,7 @@ export default {
           }
         })
       })
-    },
+    }),
     clearProdPropValues () {
       if (this.dataList[0].prodPropValues.length === 1) {
         return

mall4v/src/views/modules/shop/hotSearch-add-or-update.vue

@@ -51,6 +51,7 @@
 </template>
 
 <script>
+import { Debounce } from '@/utils/debounce'
 export default {
   data () {
     return {
@@ -101,7 +102,7 @@ export default {
       })
     },
     // 表单提交
-    dataFormSubmit () {
+    dataFormSubmit: Debounce(function () {
       this.$refs['dataForm'].validate(valid => {
         if (valid) {
           let param = this.dataForm
@@ -122,7 +123,7 @@ export default {
           })
         }
       })
-    }
+    })
   }
 }
 </script>

mall4v/src/views/modules/shop/notice-add-or-update.vue

@@ -44,8 +44,16 @@
 
 <script>
 import TinyMce from '@/components/tiny-mce'
+import { Debounce } from '@/utils/debounce'
 export default {
   data () {
+    var validateTitle = (rule, value, callback) => {
+      if (!value.trim()) {
+        this.dataForm.title = ''
+      } else {
+        callback()
+      }
+    }
     return {
       visible: false,
       roleList: [],
@@ -58,7 +66,8 @@ export default {
       },
       dataRule: {
         title: [
-          {required: true, message: '公告标题不能为空', trigger: 'blur'}
+          {required: true, message: '公告标题不能为空', trigger: 'blur'},
+          { validator: validateTitle, trigger: 'blur' }
         ]
       }
     }
@@ -84,7 +93,7 @@ export default {
       })
     },
     // 表单提交
-    dataFormSubmit () {
+    dataFormSubmit: Debounce(function () {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
           this.$http({
@@ -105,7 +114,7 @@ export default {
           })
         }
       })
-    }
+    })
   }
 }
 </script>

mall4v/src/views/modules/shop/pickAddr-add-or-update.vue

@@ -71,6 +71,7 @@
 
 <script>
 import { isMobile } from '@/utils/validate'
+import { Debounce } from '@/utils/debounce'
 
 export default {
   data () {
@@ -185,7 +186,7 @@ export default {
       })
     },
     // 表单提交
-    dataFormSubmit () {
+    dataFormSubmit: Debounce(function () {
       for (let i = 0; i < this.provinceList.length; i++) {
         if (this.provinceList[i].areaId === this.dataForm.provinceId) {
           // 将省名字保存起来
@@ -234,7 +235,7 @@ export default {
           })
         }
       })
-    }
+    })
   }
 }
 </script>

mall4v/src/views/modules/shop/transport-add-or-update.vue

@@ -204,6 +204,7 @@
 </template>
 
 <script>
+import { Debounce } from '@/utils/debounce'
 import AddOrUpdate from './transcity-add-or-update'
 export default {
   data () {
@@ -363,7 +364,7 @@ export default {
       return num < 0 ? 0 : num
     },
     // 表单提交
-    dataFormSubmit () {
+    dataFormSubmit: Debounce(function () {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
           for (let i = 1; i < this.dataForm.transfees.length; i++) {
@@ -408,7 +409,7 @@ export default {
           })
         }
       })
-    }
+    })
   }
 }
 </script>

mall4v/src/views/modules/sys/area-add-or-update.vue

@@ -36,6 +36,7 @@
 
 <script>
 import { treeDataTranslate } from '@/utils'
+import { Debounce } from '@/utils/debounce'
 export default {
   data () {
     return {
@@ -95,7 +96,7 @@ export default {
       })
     },
     // 表单提交
-    dataFormSubmit () {
+    dataFormSubmit: Debounce(function () {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
           if (!this.dataForm.areaName.trim()) {
@@ -120,7 +121,7 @@ export default {
           })
         }
       })
-    },
+    }),
     handleChange (val) {
       this.dataForm.parentId = val[val.length - 1]
     }

mall4v/src/views/modules/sys/menu-add-or-update.vue

@@ -70,6 +70,7 @@
 <script>
   import { treeDataTranslate, idList } from '@/utils'
   import Icon from '@/icons'
+  import { Debounce } from '@/utils/debounce'
   export default {
     data () {
       var validateUrl = (rule, value, callback) => {
@@ -157,7 +158,7 @@
         this.dataForm.icon = iconName
       },
       // 表单提交
-      dataFormSubmit () {
+      dataFormSubmit: Debounce(function () {
         this.$refs['dataForm'].validate((valid) => {
           if (valid) {
             this.$http({
@@ -186,7 +187,7 @@
             })
           }
         })
-      }
+      })
     }
   }
 </script>

mall4v/src/views/modules/sys/role-add-or-update.vue

@@ -29,6 +29,7 @@
 
 <script>
   import { treeDataTranslate } from '@/utils'
+  import { Debounce } from '@/utils/debounce'
   export default {
     data () {
       return {
@@ -86,7 +87,7 @@
         })
       },
       // 表单提交
-      dataFormSubmit () {
+      dataFormSubmit: Debounce(function () {
         this.$refs['dataForm'].validate((valid) => {
           if (valid) {
             this.$http({
@@ -111,7 +112,7 @@
             })
           }
         })
-      }
+      })
     }
   }
 </script>

mall4v/src/views/modules/sys/schedule-add-or-update.vue

@@ -28,84 +28,85 @@
 </template>
 
 <script>
-  export default {
-    data () {
-      return {
-        visible: false,
-        dataForm: {
-          id: 0,
-          beanName: '',
-          methodName: '',
-          params: '',
-          cronExpression: '',
-          remark: '',
-          status: 0
-        },
-        dataRule: {
-          beanName: [
+import { Debounce } from '@/utils/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        beanName: '',
+        methodName: '',
+        params: '',
+        cronExpression: '',
+        remark: '',
+        status: 0
+      },
+      dataRule: {
+        beanName: [
             { required: true, message: 'beanName不能为空', trigger: 'blur' }
-          ],
-          methodName: [
+        ],
+        methodName: [
             { required: true, message: '方法名称不能为空', trigger: 'blur' }
-          ],
-          cronExpression: [
+        ],
+        cronExpression: [
             { required: true, message: 'cron表达式不能为空', trigger: 'blur' }
-          ]
-        }
+        ]
       }
+    }
+  },
+  methods: {
+    init (id) {
+      this.dataForm.id = id || 0
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.$http({
+            url: this.$http.adornUrl(`/sys/schedule/info/${this.dataForm.id}`),
+            method: 'get',
+            params: this.$http.adornParams()
+          }).then(({data}) => {
+            this.dataForm.beanName = data.beanName
+            this.dataForm.methodName = data.methodName
+            this.dataForm.params = data.params
+            this.dataForm.cronExpression = data.cronExpression
+            this.dataForm.remark = data.remark
+            this.dataForm.status = data.status
+          })
+        }
+      })
     },
-    methods: {
-      init (id) {
-        this.dataForm.id = id || 0
-        this.visible = true
-        this.$nextTick(() => {
-          this.$refs['dataForm'].resetFields()
-          if (this.dataForm.id) {
-            this.$http({
-              url: this.$http.adornUrl(`/sys/schedule/info/${this.dataForm.id}`),
-              method: 'get',
-              params: this.$http.adornParams()
-            }).then(({data}) => {
-              this.dataForm.beanName = data.beanName
-              this.dataForm.methodName = data.methodName
-              this.dataForm.params = data.params
-              this.dataForm.cronExpression = data.cronExpression
-              this.dataForm.remark = data.remark
-              this.dataForm.status = data.status
-            })
-          }
-        })
-      },
       // 表单提交
-      dataFormSubmit () {
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            this.$http({
-              url: this.$http.adornUrl(`/sys/schedule`),
-              method: this.dataForm.id ? 'put' : 'post',
-              data: this.$http.adornData({
-                'jobId': this.dataForm.id || undefined,
-                'beanName': this.dataForm.beanName,
-                'methodName': this.dataForm.methodName,
-                'params': this.dataForm.params,
-                'cronExpression': this.dataForm.cronExpression,
-                'remark': this.dataForm.remark,
-                'status': !this.dataForm.id ? undefined : this.dataForm.status
-              })
-            }).then(({data}) => {
-              this.$message({
-                message: '操作成功',
-                type: 'success',
-                duration: 1500,
-                onClose: () => {
-                  this.visible = false
-                  this.$emit('refreshDataList')
-                }
-              })
+    dataFormSubmit: Debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl(`/sys/schedule`),
+            method: this.dataForm.id ? 'put' : 'post',
+            data: this.$http.adornData({
+              'jobId': this.dataForm.id || undefined,
+              'beanName': this.dataForm.beanName,
+              'methodName': this.dataForm.methodName,
+              'params': this.dataForm.params,
+              'cronExpression': this.dataForm.cronExpression,
+              'remark': this.dataForm.remark,
+              'status': !this.dataForm.id ? undefined : this.dataForm.status
             })
-          }
-        })
-      }
-    }
+          }).then(({data}) => {
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.visible = false
+                this.$emit('refreshDataList')
+              }
+            })
+          })
+        }
+      })
+    })
   }
+}
 </script>

mall4v/src/views/modules/sys/user-add-or-update.vue

@@ -40,6 +40,7 @@
 
 <script>
   import { isEmail, isMobile } from '@/utils/validate'
+  import { Debounce } from '@/utils/debounce'
   export default {
     data () {
       var validatePassword = (rule, value, callback) => {
@@ -137,7 +138,7 @@
         })
       },
       // 表单提交
-      dataFormSubmit () {
+      dataFormSubmit: Debounce(function () {
         this.$refs['dataForm'].validate((valid) => {
           if (valid) {
             this.$http({
@@ -165,7 +166,7 @@
             })
           }
         })
-      }
+      })
     }
   }
 </script>

mall4v/src/views/modules/user/addr-add-or-update.vue

@@ -87,6 +87,7 @@
 </template>
 
 <script>
+import { Debounce } from '@/utils/debounce'
 export default {
   data () {
     return {
@@ -179,7 +180,7 @@ export default {
     },
 
     // 表单提交
-    dataFormSubmit () {
+    dataFormSubmit: Debounce(function () {
       for (let i = 0; i < this.provinceList.length; i++) {
         if (this.provinceList[i].areaId === this.dataForm.provinceId) {
           // 将省名字保存起来
@@ -218,7 +219,7 @@ export default {
           })
         }
       })
-    }
+    })
   }
 }
 </script>

mall4v/src/views/modules/user/user-add-or-update.vue

@@ -37,6 +37,7 @@
 </template>
 
 <script>
+import { Debounce } from '@/utils/debounce'
 export default {
   data () {
     return {
@@ -78,7 +79,7 @@ export default {
       }
     },
     // 表单提交
-    dataFormSubmit () {
+    dataFormSubmit: Debounce(function () {
       this.$refs['dataForm'].validate(valid => {
         if (valid) {
           this.$http({
@@ -102,7 +103,7 @@ export default {
           })
         }
       })
-    }
+    })
   }
 }
 </script>