批量充值提交按钮防止多次点击重复提交

vue/gold-system/src/util/index.js

@@ -1,37 +0,0 @@
-// 防抖
-function _debounce(fn, delay = 500) {
-    var timer = null;
-    return function () {
-        var _this = this;
-        var args = arguments;
-        if (timer) clearTimeout(timer);
-        timer = setTimeout(function () {
-            fn.apply(_this, args);
-        }, delay);
-    };
-}
-
-// 节流
-function _throttle(fn, delay = 1000) {
-    var lastTime, timer, delay;
-    return function () {
-        var _this = this;
-        var args = arguments;
-        var nowTime = Date.now();
-        if (lastTime && nowTime - lastTime < delay) {
-            if (timer) clearTimeout(timer);
-            timer = setTimeout(function () {
-                lastTime = nowTime;
-                fn.apply(_this, args);
-            }, delay)
-        } else {
-            lastTime = nowTime;
-            fn.apply(_this, args);
-        }
-    }
-}
-
-export {
-    _debounce,
-    _throttle,
-}

vue/gold-system/src/views/consume/addConsume.vue

@@ -7,6 +7,7 @@ import axios from "axios";
 import { ElMessageBox } from "element-plus";
 import API from "../../api/index.js";
 import moment from "moment";
+import _ from 'lodash';
 
 //这是获取用户信息的接口
 const adminData = ref({});

vue/gold-system/src/views/recharge/addRecharge.vue

@@ -7,8 +7,8 @@ import { ElMessageBox } from "element-plus";
 import API from "../../api/index.js";
 import moment from "moment";
 import { range, re } from "mathjs";
-import { _debounce } from '../../util/index.js';
 import * as xlsx from 'xlsx';
+import _ from 'lodash';
 
 // 这是添加上传图片的接口
 const imageUrl = ref("");
@@ -270,8 +270,6 @@ const deleteRecharge = function () {
 // 批量充值
 // jwcode列表
 const jwcodeList = ref([]);
-// jwcode下拉框懒加载变量
-const rangeNumber = ref(10);
 // 获取jwcode列表
 const getJwcodeList = async function () {
   try {
@@ -292,30 +290,6 @@ const getJwcodeList = async function () {
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 };
-// 滚动到底部加载更多数据
-const loadMore = (n) => {
-  return () => {
-    rangeNumber.value += 5;
-  };
-};
-// 筛选方法
-const filterMethod = _debounce(function (filterVal) {
-  if (filterVal) {
-    const filterArr = jwcodeList.value.fliter((item) =>
-      item.toLowerCase().includes(filterVal.toLowerCase())
-    );
-    options.value = filterArr;
-  } else {
-    options.value = jwcodeList.value;
-  }
-}, 500);
-// 下拉框出现时调用过滤方法
-const visibleChange = function (flag) {
-  if (flag) {
-    filterMethod();
-  }
-};
-
 // 批量充值弹窗
 const batchRechargeVisible = ref(false);
 const jwcodeSelectRef = ref(null);
@@ -687,7 +661,8 @@ const batchAdd = async function () {
 
   closeBatchRechargeVisible();
 };
-
+// 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次
+const throttledBatchAdd = _.throttle(batchAdd, 5000, { trailing: false });
 // 批量设置的对象
 const batchSettingObj = ref({});
 // 批量充值弹窗
@@ -925,12 +900,6 @@ onMounted(async function () {
             <span v-else>{{ scope.row.jwcode }}</span>
           </template> -->
           <template #default="scope">
-            <!-- <el-select v-if="scope.row.showInput" ref="jwcodeSelectRef" filterable clearable v-model="scope.row.jwcode"
-              placeholder="请选择精网号" style="widows: 110px;" :filter-method="filterMethod"
-              v-jwcodeLoadmore="loadMore(rangeNumber)" @visible-change="visibleChange">
-              <el-option v-for="item in jwcodeList.slice(0, rangeNumber)" :key="item" :label="item" :value="item">
-              </el-option>
-            </el-select> -->
             <el-select-v2 v-if="scope.row.showInput" filterable clearable v-model="scope.row.jwcode"
               placeholder="请选择精网号" style="widows: 110px;" :options="jwcodeList">
             </el-select-v2>
@@ -1055,7 +1024,7 @@ onMounted(async function () {
     <el-row>
       <div class="batch-btn">
         <el-button @click="cancelBatch()"> 取消 </el-button>
-        <el-button type="primary" @click="batchAdd()"> 提交 </el-button>
+        <el-button type="primary" @click="throttledBatchAdd()"> 提交 </el-button>
       </div>
     </el-row>
   </el-dialog>

vue/gold-system/src/views/refund/addRefund.vue

@@ -7,6 +7,7 @@ import axios from "axios";
 import { ElMessageBox } from "element-plus";
 import API from "../../api/index.js";
 import moment from "moment";
+import _ from 'lodash';
 
 const addRe = ref({
   typeR: "0",