瀏覽代碼

feat: 给移动端周日报填写按钮加节流函数

qiny 1 年之前
父節點
當前提交
f079f6ea65
共有 3 個文件被更改,包括 49 次插入8 次删除
  1. 12 4
      client_h5/src/pages/myLogs/Daily/index.vue
  2. 12 4
      client_h5/src/pages/myLogs/Weekly/index.vue
  3. 25 0
      client_h5/src/utils/tools.ts

+ 12 - 4
client_h5/src/pages/myLogs/Daily/index.vue

@@ -25,15 +25,23 @@
     <SelectUser v-model="formData.receiveUserIds" />
     <div class="blank-line"></div>
     <div class="send-btn-group" v-if="formData.isUpdate">
-      <van-button type="primary" block @click="onSubmit(false)"
+      <van-button type="primary" block @click="throttle(onSubmit(false))"
         >更新</van-button
       >
     </div>
     <div class="send-btn-group" v-else>
-      <van-button type="success" block class="send-btn" @click="onSubmit(true)"
+      <van-button
+        type="success"
+        block
+        class="send-btn"
+        @click="throttle(onSubmit(true))"
         >暂存</van-button
       >
-      <van-button type="primary" block class="send-btn" @click="onSubmit(false)"
+      <van-button
+        type="primary"
+        block
+        class="send-btn"
+        @click="throttle(onSubmit(false))"
         >发送</van-button
       >
     </div>
@@ -48,7 +56,7 @@ import { reactive, watch } from "vue";
 import { showSuccessToast, showToast } from "vant";
 import SelectUser from "@/components/UserSelect.vue";
 import ProjectList from "../components/ProjectList.vue";
-import { getUserInfo } from "@/utils/tools";
+import { getUserInfo, throttle } from "@/utils/tools";
 import { http } from "../http";
 import { IReport } from "../interface";
 import { onSubmitCheck } from "../service";

+ 12 - 4
client_h5/src/pages/myLogs/Weekly/index.vue

@@ -31,15 +31,23 @@
     <SelectUser v-model="formData.receiveUserIds" />
     <div class="blank-line"></div>
     <div class="send-btn-group" v-if="formData.isUpdate">
-      <van-button type="primary" block @click="onSubmit(false)"
+      <van-button type="primary" block @click="throttle(onSubmit(false))"
         >更新</van-button
       >
     </div>
     <div class="send-btn-group" v-else>
-      <van-button type="success" block class="send-btn" @click="onSubmit(true)"
+      <van-button
+        type="success"
+        block
+        class="send-btn"
+        @click="throttle(onSubmit(true))"
         >暂存</van-button
       >
-      <van-button type="primary" block class="send-btn" @click="onSubmit(false)"
+      <van-button
+        type="primary"
+        block
+        class="send-btn"
+        @click="throttle(onSubmit(false))"
         >发送</van-button
       >
     </div>
@@ -54,7 +62,7 @@ import { reactive, watch } from "vue";
 import { showSuccessToast, showToast } from "vant";
 import SelectUser from "@/components/UserSelect.vue";
 import ProjectList from "../components/ProjectList.vue";
-import { getUserInfo } from "@/utils/tools";
+import { getUserInfo, throttle } from "@/utils/tools";
 import { http } from "../http";
 import { IReport } from "../interface";
 import { onSubmitCheck, setWorkDayListToWeek } from "../service";

+ 25 - 0
client_h5/src/utils/tools.ts

@@ -17,3 +17,28 @@ export const getUserInfo = () => {
   // return userInfo;
   return JSON.parse(localStorage.getItem("_userInfo") as string);
 };
+
+// 节流函数
+export const throttle = (fn: any, delay = 3000) => {
+  let preTime = Date.now();
+  return (event: any) => {
+    const context = this;
+    event.persist && event.persist(); // 保留对事件的引用
+    const doTime = Date.now();
+    if (doTime - preTime >= delay) {
+      fn.apply(context);
+      preTime = Date.now();
+    }
+  };
+};
+// 防抖函数
+export const debounce = (fn: any, wait = 3000) => {
+  let timeout: any = null;
+  return function (event: any) {
+    clearTimeout(timeout);
+    event.persist && event.persist(); // 保留对事件的引用
+    timeout = setTimeout(() => {
+      fn(event);
+    }, wait);
+  };
+};