批量充值

vue/gold-system/README.md

@@ -22,4 +22,6 @@ npm install echarts  安装echarts组件
 
 npm install moment  安装moment组件
 
-npm install mathjs  安装mathjs组件,解决数据计算问题
+npm install mathjs  安装mathjs组件,解决数据计算问题
+
+npm install xlsx  安装xlsx组件,解决excel文件读取问题

vue/gold-system/package-lock.json

@@ -16,7 +16,8 @@
         "moment": "^2.30.1",
         "vue": "^3.5.12",
         "vue-icons-plus": "^0.1.7",
-        "vue-router": "^4.5.0"
+        "vue-router": "^4.5.0",
+        "xlsx": "^0.18.5"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.1.4",
@@ -1087,6 +1088,15 @@
         }
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/alien-signals": {
       "version": "0.2.2",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/alien-signals/-/alien-signals-0.2.2.tgz",
@@ -1134,6 +1144,28 @@
         "balanced-match": "^1.0.0"
       }
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1159,6 +1191,18 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/csstype/-/csstype-3.1.3.tgz",
@@ -1332,6 +1376,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "5.2.1",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/fraction.js/-/fraction.js-5.2.1.tgz",
@@ -1633,6 +1686,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tiny-emitter": {
       "version": "2.1.0",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
@@ -1798,6 +1863,45 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/zrender": {
       "version": "5.6.0",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/zrender/-/zrender-5.6.0.tgz",

vue/gold-system/package.json

@@ -18,7 +18,8 @@
     "moment": "^2.30.1",
     "vue": "^3.5.12",
     "vue-icons-plus": "^0.1.7",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",

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

@@ -0,0 +1,37 @@
+// 防抖
+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/recharge/addRecharge.vue

@@ -1,15 +1,18 @@
 <script setup>
-import { reactive } from "vue";
-import { ref, computed, watch } from "vue";
+import { ref, onMounted, reactive, computed, watch, nextTick, h } from "vue";
 import { ElMessage } from "element-plus";
 import { Plus } from "@element-plus/icons-vue";
 import axios from "axios";
 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';
 
 // 这是添加上传图片的接口
 const imageUrl = ref("");
+const rechargeVoucher = ref("");
 const Rate = ref();
 const adminData = ref({});
 const getAdminData = async function () {
@@ -297,8 +300,57 @@ const deleteRecharge = function () {
 };
 
 // 批量充值
+// jwcode列表
+const jwcodeList = ref([]);
+// jwcode下拉框懒加载变量
+const rangeNumber = ref(10);
+// 获取jwcode列表
+const getJwcodeList = async function () {
+  try {
+    // 发送POST请求
+    const result = await API.post(
+      "http://192.168.8.93:10010/recharge/user/jwcode",
+      {}
+    );
+
+    // 将响应结果存储到响应式数据中
+    console.log("请求成功", result);
+    // 存储表格数据
+    jwcodeList.value = result.data;
+    jwcodeList.value = jwcodeList.value.map(item => ({ value: item, label: item }))
+    console.log("精网号", jwcodeList.value);
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+// 滚动到底部加载更多数据
+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);
 const i = ref(1);
 const delObj = ref({});
 const batchDelObj = ref([]);
@@ -323,20 +375,109 @@ const closeBatchRechargeVisible = function () {
 const batchInit = function () {
   openBatchRechargeVisible();
 };
-//
+
+// 提取添加滚动监听的逻辑到单独函数
+const addScrollListener = () => {
+  const SELECTWRAP_DOM = document.querySelector(".el-select-dropdown .el-select-dropdown__wrap");
+  if (SELECTWRAP_DOM) {
+    SELECTWRAP_DOM.addEventListener("scroll", function () {
+      const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
+      if (condition) binding.value();
+    });
+  }
+};
+// 局部注册指令
+const vJwcodeLoadmore = {
+  mounted(el, binding) {
+    nextTick(() => {
+      console.log("el===", el, "binding===", binding);
+      const SELECTWRAP_DOM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");
+      console.log("SELECTWRAP_DOM===", SELECTWRAP_DOM);
+      if (SELECTWRAP_DOM) {
+        SELECTWRAP_DOM.addEventListener("scroll", function () {
+          /**
+           * scrollHeight 获取元素内容高度(只读)
+           * scrollTop 获取或者设置元素的偏移值,
+           *  常用于:计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
+           * clientHeight 读取元素的可见高度(只读)
+           * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
+           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
+           */
+          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
+          if (condition) binding.value();
+        });
+      }
+    })
+  }
+};
+// 下拉框打开时调用添加滚动监听函数
+// const jwcodeSelectScrollerListener = () => {
+//   console.log(jwcodeSelectRef.value, 'jwcodeSelectRef.value')
+//   if (jwcodeSelectRef.value) {
+//     directives.loadmore(jwcodeSelectRef.value, loadMore(rangeNumber.value));
+//   }
+// };
+// 添加行数对象
+const addLineObj = ref(0);
+//添加一行
 const addLine = function () {
   batchData.value.unshift({
     line: ++i.value,
     showInput: true,
   });
 };
-//
+// 添加多行
+const addLines = function () {
+  try {
+    for (let i = 0; i < addLineObj.value; i++) {
+      addLine();
+    }
+    ElMessage.success("添加成功");
+  } catch (error) {
+    console.log("添加失败", error);
+    ElMessage.error("添加失败");
+  }
+}
+// 导入excel按钮的ref
+const uploadRefMap = ref({});
+// 获取excel数据
+const excelList = ref([]);
+// 动态设置upload Ref
+const handleSetUploadRefMap = (el) => {
+  if (el) {
+    uploadRefMap.value[`Upload_Ref`] = el
+  }
+}
+// 文件上传自定义
+const httpExcelRequest = async (op) => {
+  // 获取除文件之外的参数，具体根据实际业务需求来
+  console.log(op.data)
+  // 获取上传的excel  并解析数据
+  let file = op.file
+  let dataBinary = await readFile(file);
+  let workBook = xlsx.read(dataBinary, { type: "binary", cellDates: true })
+  let workSheet = workBook.Sheets[workBook.SheetNames[0]]
+  const excelData = xlsx.utils.sheet_to_json(workSheet, { header: 1 })
+  excelList.value = excelData
+  console.log(excelData)
+}
+
+const readFile = (file) => {
+  return new Promise((resolve) => {
+    let reader = new FileReader()
+    reader.readAsBinaryString(file)
+    reader.onload = (ev) => {
+      resolve(ev.target?.result)
+    }
+  })
+}
+
+//获取批量删除的数组
 const handleSelectionChangebatch = function (val) {
   console.log("val===", val);
   batchDelObj.value = val;
-  console.log("大傻春");
 };
-//
+//批量删除
 const batchDel = function () {
   ElMessageBox.confirm("确认批量删除吗？", "批量删除", {
     confirmButtonText: "确定",
@@ -361,21 +502,23 @@ const batchDel = function () {
       });
     });
 };
-//
+//单行删除初始化
 const del = function (row) {
   console.log("row===", row);
   delObj.value.line = row.line;
 };
+// 单行删除
 const delConfirm = function () {
   batchData.value = batchData.value.filter(
     (item) => item.line != delObj.value.line
   );
   console.log("batchData===", batchData.value);
 };
-//
+//单行重置初始化
 const reset = function (row) {
   resetObj.value.line = row.line;
 };
+// 单行重置
 const resetConfirm = function () {
   for (let i = 0; i < batchData.value.length; i++) {
     if (batchData.value[i].line == resetObj.value.line) {
@@ -386,7 +529,7 @@ const resetConfirm = function () {
     }
   }
 };
-//
+//取消批量充值
 const cancelBatch = function () {
   ElMessageBox.confirm("确认取消吗？此操作将不会保存任何数据。", "确认取消", {
     confirmButtonText: "确定",
@@ -408,7 +551,7 @@ const cancelBatch = function () {
       });
     });
 };
-//
+//监听改变活动时的操作
 const changeActivity = function (row) {
   console.log("row===", row);
   let ratio = 0;
@@ -429,7 +572,7 @@ const changeActivity = function (row) {
     }
   }
 };
-//
+//监听改变充值金币时的操作
 const changePaidGold = function (row) {
   console.log("row===", row);
   let ratio = 0;
@@ -448,48 +591,53 @@ const changePaidGold = function (row) {
       row.freeGold = Math.ceil(Number(row.paidGold) / ratio);
     }
   }
+  let rate = row.rate;
+  if (rate == null || rate == "") {
+    row.rechargeGold = 0;
+  } else {
+    if (row.paidGold == null || row.paidGold == "") {
+      row.rechargeGold = 0;
+    } else {
+      row.rechargeGold = Math.ceil(Number(row.paidGold) * rate);
+    }
+  }
 };
-//
-const calculatedRowFreeGold = function (row) {
+// 监听改变币种时的操作
+const changeRate = function (row) {
   console.log("row===", row);
-  let ratio = 0;
-  for (let i = 0; i < activity.value.length; i++) {
-    if (activity.value[i].activityId == row.activityId) {
-      ratio = activity.value[i].ratio;
-      break;
+  let rate = row.rate;
+  if (rate == null || rate == "") {
+    row.rechargeGold = 0;
+  } else {
+    if (row.paidGold == null || row.paidGold == "") {
+      row.rechargeGold = 0;
+    } else {
+      row.rechargeGold = Math.ceil(Number(row.paidGold) * rate);
     }
   }
 
-  for (let i = 0; i < batchData.value.length; i++) {
-    if (batchData.value[i].line == row.line) {
-      if (ratio == 0) {
-        batchData.value[i].freeGold = 0;
-      } else {
-        const paidGold = Number(batchData.value[i].paidGold) || 0;
-        batchData.value[i].freeGold = Math.ceil(paidGold / ratio);
-      }
-      break;
-    }
-  }
 };
-
-const calculatedRowRechargeGold = computed(() => {
-  if (Rate.value != 0) {
-    const paidGold = Number(addRecharge.value.paidGold) || 0;
-    const rate = Number(Rate.value) || 1; // 避免乘以0
-    return Number(Math.ceil(paidGold * rate));
+//监听改变凭证时的操作
+const changeVoucher = function (row) {
+  if ((imageUrl.value != "" && rechargeVoucher.value != "") || (imageUrl.value != null && rechargeVoucher.value != null)) {
+    console.log("row===", row);
+    row.imageUrl = imageUrl.value;
+    row.rechargeVoucher = rechargeVoucher.value;
+    console.log("row===", row);
+    imageUrl.value = "";
+    rechargeVoucher.value = "";
   }
-});
-
-// watch(calculatedRowFreeGold, (newVal) => {
-//   addRecharge.value.freeGold = Number(newVal);
-// });
+}
+// 上传图片成功的回调函数
+const handleBatchAvatarSuccess = (response, uploadFile) => {
 
-watch(calculatedRowRechargeGold, (newVal) => {
-  addRecharge.value.rechargeGold = Number(newVal);
-});
-//
-const batchAdd = function () {
+  imageUrl.value = URL.createObjectURL(uploadFile.raw);
+  console.log("图片上传成功", response, uploadFile);
+  rechargeVoucher.value = `http://192.168.8.93:10010/upload/${response.data}`;
+  console.log("图片名称", rechargeVoucher.value);
+};
+//批量充值确认按钮
+const batchAdd = async function () {
   console.log("batchData===", batchData.value);
   if (batchData.value.length == 0) {
     ElMessage({
@@ -525,6 +673,13 @@ const batchAdd = function () {
   }
   console.log("batchData===", batchData.value);
 
+  const result = await API.post("http://192.168.8.93:10010/recharge/recharge/addmore", { ...batchData.value });
+
+  if (result.code === 0) {
+    ElMessage.error("添加失败");
+    return;
+  }
+
   ElMessage({
     type: "success",
     message: "添加成功！",
@@ -532,6 +687,81 @@ const batchAdd = function () {
 
   closeBatchRechargeVisible();
 };
+
+// 批量设置的对象
+const batchSettingObj = ref({});
+// 批量充值弹窗
+const batchSettingVisible = ref(false);
+// 打开批量充值弹窗
+const openBatchSettingVisible = function () {
+  batchSettingVisible.value = true;
+};
+// 关闭批量充值弹窗
+const closeBatchSettingVisible = function () {
+  batchSettingVisible.value = false;
+};
+// 批量设置初始化
+const batchSettingInit = function () {
+  openBatchSettingVisible();
+}
+// 上传图片成功的回调函数
+const batchSettingHandleAvatarSuccess = (response, uploadFile) => {
+  batchSettingObj.value.imageUrl = URL.createObjectURL(uploadFile.raw);
+  console.log("图片上传成功", response, uploadFile);
+  batchSettingObj.value.rechargeVoucher = `http://192.168.8.93:10010/upload/${response.data}`;
+  console.log("图片名称", batchSettingObj.value.rechargeVoucher);
+};
+// 批量设置取消按钮
+const cancelBatchSetting = function () {
+  batchSettingObj.value = {};
+  closeBatchSettingVisible();
+}
+// 批量设置确认按钮
+const batchSettingConfirm = function () {
+  for (let i = 0; i < batchData.value.length; i++) {
+    if (batchSettingObj.value.jwcode != "" && batchSettingObj.value.jwcode != null) {
+      batchData.value[i].jwcode = batchSettingObj.value.jwcode;
+    }
+    if (batchSettingObj.value.activityId != "" && batchSettingObj.value.activityId != null) {
+      batchData.value[i].activityId = batchSettingObj.value.activityId;
+    }
+    if (batchSettingObj.value.paidGold != "" && batchSettingObj.value.paidGold != null) {
+      batchData.value[i].paidGold = batchSettingObj.value.paidGold;
+    }
+    if (batchSettingObj.value.freeGold != "" && batchSettingObj.value.freeGold != null) {
+      batchData.value[i].freeGold = batchSettingObj.value.freeGold;
+    }
+    if (batchSettingObj.value.rate != "" && batchSettingObj.value.rate != null) {
+      batchData.value[i].rate = batchSettingObj.value.rate;
+    }
+    if (batchSettingObj.value.rechargeGold != "" && batchSettingObj.value.rechargeGold != null) {
+      batchData.value[i].rechargeGold = batchSettingObj.value.rechargeGold;
+    }
+    if (batchSettingObj.value.payWay != "" && batchSettingObj.value.payWay != null) {
+      batchData.value[i].payWay = batchSettingObj.value.payWay;
+    }
+    if (batchSettingObj.value.rechargeTime != "" && batchSettingObj.value.rechargeTime != null) {
+      batchData.value[i].rechargeTime = batchSettingObj.value.rechargeTime;
+    }
+    if (batchSettingObj.value.imageUrl != "" && batchSettingObj.value.imageUrl != null) {
+      batchData.value[i].imageUrl = batchSettingObj.value.imageUrl;
+    }
+    if (batchSettingObj.value.rechargeVoucher != "" && batchSettingObj.value.rechargeVoucher != null) {
+      batchData.value[i].rechargeVoucher = batchSettingObj.value.rechargeVoucher;
+    }
+    if (batchSettingObj.value.remark != "" && batchSettingObj.value.remark != null) {
+      batchData.value[i].remark = batchSettingObj.value.remark;
+    }
+  }
+  batchSettingObj.value = {};
+  closeBatchSettingVisible();
+}
+
+
+// 挂载
+onMounted(async function () {
+  await getJwcodeList();
+});
 </script>
 
 <template>
@@ -540,36 +770,14 @@ const batchAdd = function () {
     <el-button type="primary" plain @click="batchInit()">批量充值</el-button>
   </div>
 
-  <el-form
-    :model="addRecharge"
-    ref="Ref"
-    :rules="rules"
-    label-width="auto"
-    style="max-width: 600px"
-    class="add-form"
-  >
+  <el-form :model="addRecharge" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px" class="add-form">
     <el-form-item prop="jwcode" label="精网号">
       <el-input v-model="addRecharge.jwcode" style="width: 220px" />
-      <el-button
-        type="primary"
-        @click="getUser(addRecharge.jwcode)"
-        style="margin-left: 20px"
-        >查询</el-button
-      >
+      <el-button type="primary" @click="getUser(addRecharge.jwcode)" style="margin-left: 20px">查询</el-button>
     </el-form-item>
     <el-form-item prop="activityId" label="活动名称">
-      <el-select
-        v-model="addRecharge.activityId"
-        placeholder="请选择"
-        style="width: 300px"
-        @change="handleActivityChange"
-      >
-        <el-option
-          v-for="item in activity"
-          :key="item.value"
-          :label="item.activityName"
-          :value="item.activityId"
-        />
+      <el-select v-model="addRecharge.activityId" placeholder="请选择" style="width: 300px" @change="handleActivityChange">
+        <el-option v-for="item in activity" :key="item.value" :label="item.activityName" :value="item.activityId" />
       </el-select>
     </el-form-item>
     <el-form-item prop="paidGold" label="充值金币">
@@ -580,66 +788,24 @@ const batchAdd = function () {
       <p>个</p>
     </el-form-item>
     <el-form-item prop="rechargeGold" label="充值金额">
-      <el-select
-        prop="rechargeGold"
-        v-model="Rate"
-        placeholder="货币名称"
-        style="width: 95px; margin-right: 5px"
-      >
-        <el-option
-          v-for="item in currency"
-          :key="item.value"
-          :label="item.currency"
-          :value="item.exchangeRate"
-        />
+      <el-select prop="rechargeGold" v-model="Rate" placeholder="货币名称" style="width: 95px; margin-right: 5px">
+        <el-option v-for="item in currency" :key="item.value" :label="item.currency" :value="item.exchangeRate" />
       </el-select>
       <el-input v-model="addRecharge.rechargeGold" style="width: 200px" />
     </el-form-item>
     <el-form-item prop="payWay" label="收款方式">
-      <el-select
-        v-model="addRecharge.payWay"
-        placeholder="请选择"
-        style="width: 300px"
-      >
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
+      <el-select v-model="addRecharge.payWay" placeholder="请选择" style="width: 300px">
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
     </el-form-item>
     <el-form-item prop="rechargeTime" label="交款时间">
-      <el-date-picker
-        v-model="addRecharge.rechargeTime"
-        type="date"
-        style="width: 300px"
-      />
+      <el-date-picker v-model="addRecharge.rechargeTime" type="date" style="width: 300px" />
     </el-form-item>
-    <el-form-item
-      prop="rechargeVoucher"
-      label="交款凭证"
-      style="margin-bottom: 5px"
-    >
-      <el-upload
-        action="http://192.168.8.93:10010/upload"
-        class="avatar-uploader"
-        :show-file-list="false"
-        :on-success="handleAvatarSuccess"
-        :before-upload="beforeAvatarUpload"
-        style="width: 100px; height: 115px"
-      >
-        <img
-          v-if="imageUrl"
-          :src="imageUrl"
-          class="avatar"
-          style="width: 100px; height: 115px"
-        />
-        <el-icon
-          v-else
-          class="avatar-uploader-icon"
-          style="width: 100px; height: 100px"
-        >
+    <el-form-item prop="rechargeVoucher" label="交款凭证" style="margin-bottom: 5px">
+      <el-upload action="http://192.168.8.93:10010/upload" class="avatar-uploader" :show-file-list="false"
+        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" style="width: 100px; height: 115px">
+        <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 100px; height: 115px" />
+        <el-icon v-else class="avatar-uploader-icon" style="width: 100px; height: 100px">
           <Plus />
         </el-icon>
       </el-upload>
@@ -648,41 +814,19 @@ const batchAdd = function () {
       </p>
     </el-form-item>
     <el-form-item prop="remark" label="备注">
-      <el-input
-        v-model="addRecharge.remark"
-        style="width: 300px"
-        :rows="2"
-        maxlength="100"
-        show-word-limit
-        type="textarea"
-      />
+      <el-input v-model="addRecharge.remark" style="width: 300px" :rows="2" maxlength="100" show-word-limit
+        type="textarea" />
     </el-form-item>
     <el-form-item prop="submitter" label="提交人">
-      <el-input
-        style="width: 300px"
-        :value="adminData.name"
-        disabled
-        placeholder="提交人姓名"
-      />
+      <el-input style="width: 300px" :value="adminData.name" disabled placeholder="提交人姓名" />
     </el-form-item>
-    <el-button @click="deleteRecharge" style="margin-left: 280px"
-      >重置</el-button
-    >
+    <el-button @click="deleteRecharge" style="margin-left: 280px">重置</el-button>
     <el-button type="primary" @click="addBefore"> 提交 </el-button>
   </el-form>
 
   <!-- 客户信息栏 -->
-  <el-card
-    style="width: 1200px; float: right"
-    class="customer-info"
-    width="3000px"
-  >
-    <el-form
-      :model="user"
-      label-width="auto"
-      style="max-width: 1200px"
-      label-position="left"
-    >
+  <el-card style="width: 1200px; float: right" class="customer-info" width="3000px">
+    <el-form :model="user" label-width="auto" style="max-width: 1200px" label-position="left">
       <el-text size="large" style="margin-left: 20px">客户信息</el-text>
       <el-row style="margin-top: 20px">
         <el-col :span="10">
@@ -705,13 +849,10 @@ const batchAdd = function () {
             <span style="color: #2fa1ff; margin-right: 5px" v-if="user.buyJb">{{
               user.buyJb + user.free6 + user.free12 + user.coreJb
             }}</span>
-            <span
-              style="display: inline; white-space: nowrap; color: #b1b1b1"
-              v-if="user.buyJb"
-              >(充值金币:{{ user.buyJb }};免费金币:{{
+            <span style="display: inline; white-space: nowrap; color: #b1b1b1" v-if="user.buyJb">(充值金币:{{ user.buyJb
+              }};免费金币:{{
                 user.free6 + user.free12
-              }};任务金币:{{ user.coreJb }})</span
-            >
+              }};任务金币:{{ user.coreJb }})</span>
           </el-form-item>
         </el-col>
         <el-col :span="10">
@@ -752,33 +893,26 @@ const batchAdd = function () {
     </el-form>
   </el-card>
 
-  <el-dialog
-    v-model="batchRechargeVisible"
-    title="批量充值"
-    width="1800px"
-    style="height: 700px"
-    :close-on-click-modal="false"
-  >
+  <el-dialog v-model="batchRechargeVisible" title="批量充值" width="1800px" style="height: 700px"
+    :close-on-click-modal="false">
     <el-row style="margin-bottom: 10px">
-      <el-button type="primary" @click="addLine()" style="margin-right: auto"
-        >新增一行</el-button
-      >
-      <el-button
-        type="danger"
-        plain
-        @click="batchDel()"
-        style="margin-right: 10px; width: 130px"
-        >批量删除</el-button
-      >
+      <!-- <el-button type="primary" @click="addLine()" style="margin-right: 10px">新增一行</el-button> -->
+      <div style="font-weight: bold; font-size: 20px;">
+        <span>添加</span>
+        <el-input style="width: 40px;" v-model="addLineObj"></el-input>
+        <span>行</span>
+        <el-button type="primary" @click="addLines()" style="margin-right: 10px;">添加</el-button>
+      </div>
+      <el-button type="warning" @click="batchSettingInit()" style="margin-right: 10px;">批量设置</el-button>
+      <!-- <el-upload :ref="(el) => handleSetUploadRefMap(el)" action="" :http-request="httpExcelRequest" :limit="1" :show-file-list="false"
+        class="uploadExcelContent" :data={} style="margin-right: auto">
+        <el-button type="success" >导入jwcode</el-button>
+      </el-upload> -->
+      <el-button type="danger" plain @click="batchDel()" style="margin-right: 10px; width: 130px">批量删除</el-button>
     </el-row>
     <el-row>
-      <el-table
-        :data="batchData"
-        border
-        max-height="540px"
-        style="height: 540px"
-        @selection-change="handleSelectionChangebatch"
-      >
+      <el-table :data="batchData" border max-height="540px" style="height: 540px"
+        @selection-change="handleSelectionChangebatch">
         <el-table-column type="selection" width="50px" />
         <el-table-column property="index" label="序号" width="55px">
           <template #default="scope">
@@ -786,31 +920,29 @@ const batchAdd = function () {
           </template>
         </el-table-column>
         <el-table-column property="jwcode" label="精网号" width="150px">
+          <!-- <template #default="scope">
+            <el-input v-if="scope.row.showInput" v-model="scope.row.jwcode" style="width: 110px" />
+            <span v-else>{{ scope.row.jwcode }}</span>
+          </template> -->
           <template #default="scope">
-            <el-input
-              v-if="scope.row.showInput"
-              v-model="scope.row.jwcode"
-              style="width: 110px"
-            />
+            <!-- <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>
             <span v-else>{{ scope.row.jwcode }}</span>
           </template>
         </el-table-column>
         <el-table-column property="activityName" label="活动名称" width="150px">
           <template #default="scope">
-            <el-select
-              v-if="scope.row.showInput"
-              filterable
-              clearable
-              v-model="scope.row.activityId"
-              placeholder="请选择活动名称"
-              @change="changeActivity(scope.row)"
-            >
-              <el-option
-                v-for="item in activity"
-                :key="item.activityId"
-                :label="item.activityName"
-                :value="item.activityId"
-              >
+            <el-select v-if="scope.row.showInput" filterable clearable v-model="scope.row.activityId"
+              placeholder="请选择活动名称" @change="changeActivity(scope.row)">
+              <el-option v-for="item in activity" :key="item.activityId" :label="item.activityName"
+                :value="item.activityId">
               </el-option>
             </el-select>
             <span v-else>{{ scope.row.activityName }}</span>
@@ -818,40 +950,23 @@ const batchAdd = function () {
         </el-table-column>
         <el-table-column property="paidGold" label="充值金币" width="110px">
           <template #default="scope">
-            <el-input
-              v-if="scope.row.showInput"
-              v-model="scope.row.paidGold"
-              style="width: 70px"
-              @change="changePaidGold(scope.row)"
-            />
+            <el-input v-if="scope.row.showInput" v-model="scope.row.paidGold" style="width: 70px"
+              @change="changePaidGold(scope.row)" />
             <span v-else>{{ scope.row.paidGold }}</span>
           </template>
         </el-table-column>
         <el-table-column property="freeGold" label="免费金币" width="110px">
           <template #default="scope">
-            <el-input
-              v-if="scope.row.showInput"
-              v-model="scope.row.freeGold"
-              style="width: 70px"
-            />
+            <el-input v-if="scope.row.showInput" v-model="scope.row.freeGold" style="width: 70px" />
             <span v-else>{{ scope.row.paidGold }}</span>
           </template>
         </el-table-column>
         <el-table-column property="rate" label="货币名称">
           <template #default="scope">
-            <el-select
-              v-if="scope.row.showInput"
-              filterable
-              clearable
-              v-model="scope.row.rate"
-              placeholder="请选择币种"
-            >
-              <el-option
-                v-for="item in currency"
-                :key="item.exchangeRate"
-                :label="item.currency"
-                :value="item.exchangeRate"
-              >
+            <el-select v-if="scope.row.showInput" filterable clearable v-model="scope.row.rate" placeholder="请选择币种"
+              @change="changeRate(scope.row)">
+              <el-option v-for="item in currency" :key="item.exchangeRate" :label="item.currency"
+                :value="item.exchangeRate">
               </el-option>
             </el-select>
             <span v-else>{{ scope.row.rate }}</span>
@@ -864,19 +979,8 @@ const batchAdd = function () {
         </el-table-column>
         <el-table-column property="payWay" label="收款方式" width="130px">
           <template #default="scope">
-            <el-select
-              v-if="scope.row.showInput"
-              filterable
-              clearable
-              v-model="scope.row.payWay"
-              placeholder="请选择收款方式"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
+            <el-select v-if="scope.row.showInput" filterable clearable v-model="scope.row.payWay" placeholder="请选择收款方式">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
               </el-option>
             </el-select>
             <span v-else>{{ scope.row.payWay }}</span>
@@ -884,13 +988,8 @@ const batchAdd = function () {
         </el-table-column>
         <el-table-column property="rechargeTime" label="交款时间" width="150px">
           <template #default="scope">
-            <el-date-picker
-              v-if="scope.row.showInput"
-              type="date"
-              v-model="scope.row.rechargeTime"
-              style="width: 120px"
-              placeholder="请选择交款时间"
-            >
+            <el-date-picker v-if="scope.row.showInput" type="date" v-model="scope.row.rechargeTime" style="width: 120px"
+              placeholder="请选择交款时间">
             </el-date-picker>
             <span v-else>{{
               moment(scope.row.rechargeTime).format("YYYY-MM-DD HH:mm:ss")
@@ -899,51 +998,30 @@ const batchAdd = function () {
         </el-table-column>
         <el-table-column property="rechargeVoucher" label="充值凭证">
           <template #default="scope">
-            <el-upload
-              class="avatar-uploader"
-              :show-file-list="true"
-              :on-success="handleAvatarSuccess"
-              :before-upload="beforeAvatarUpload"
-              v-if="scope.row.showInput"
-            >
-              <img
-                v-if="scope.row.imageUrl"
-                :src="scope.row.imageUrl"
-                class="avatar"
-              />
-              <el-icon v-else class="avatar-uploader-icon"></el-icon>
+            <el-upload action="http://192.168.8.93:10010/upload" class="avatar-uploader" :show-file-list="false"
+              :on-success="handleBatchAvatarSuccess" v-if="scope.row.showInput" @change="changeVoucher(scope.row)">
+              <img v-if="scope.row.imageUrl" :src="scope.row.imageUrl" class="avatar" />
+              <el-icon v-else class="avatar-uploader-icon">
+                <Plus />
+              </el-icon>
             </el-upload>
             <span v-else>{{ scope.row.rechargeVoucher }}</span>
           </template>
         </el-table-column>
         <el-table-column property="remark" label="备注" width="130px">
           <template #default="scope">
-            <el-input
-              type="textarea"
-              v-if="scope.row.showInput"
-              v-model="scope.row.remark"
-              style="max-width: 90px"
-              rows="1"
-              cols="12"
-            ></el-input>
+            <el-input type="textarea" v-if="scope.row.showInput" v-model="scope.row.remark" style="max-width: 90px"
+              rows="1" cols="12"></el-input>
             <span v-else>{{ scope.row.remark }}</span>
           </template>
         </el-table-column>
         <el-table-column property="submitter" label="提交人">
           <el-input :value="adminData.name" disabled />
         </el-table-column>
-        <el-table-column
-          fixed="right"
-          prop="operation"
-          label="操作"
-          width="150px"
-        >
+        <el-table-column fixed="right" prop="operation" label="操作" width="150px">
           <template #default="scope">
             <div style="display: flex">
-              <el-popconfirm
-                title="确定将此条信息删除吗？"
-                @confirm="delConfirm"
-              >
+              <el-popconfirm title="确定将此条信息删除吗？" @confirm="delConfirm">
                 <template #reference>
                   <el-button type="danger" text @click="del(scope.row)">
                     删除
@@ -956,10 +1034,7 @@ const batchAdd = function () {
                   </el-button>
                 </template>
               </el-popconfirm>
-              <el-popconfirm
-                title="确定将此条信息重置吗？"
-                @confirm="resetConfirm"
-              >
+              <el-popconfirm title="确定将此条信息重置吗？" @confirm="resetConfirm">
                 <template #reference>
                   <el-button type="primary" text @click="reset(scope.row)">
                     重置
@@ -984,6 +1059,59 @@ const batchAdd = function () {
       </div>
     </el-row>
   </el-dialog>
+
+  <el-dialog v-model="batchSettingVisible" title="批量设置" :close-on-click-modal="false" style="width: 550px;">
+    <el-form label-position="left" label-width="auto">
+      <el-form-item label="活动名称">
+        <el-select v-model="batchSettingObj.activityId" placeholder="请选择活动名称" clearable>
+          <el-option v-for="item in activity" :key="item.activityId" :label="item.activityName"
+            :value="item.activityId">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="充值金币">
+        <el-input v-model="batchSettingObj.paidGold" placeholder="请输入充值金币"></el-input>
+      </el-form-item>
+      <el-form-item label="免费金币">
+        <el-input v-model="batchSettingObj.freeGold"></el-input>
+      </el-form-item>
+      <el-form-item label="充值金额">
+        <div style="display: flex;">
+          <el-select v-model="batchSettingObj.rate" placeholder="请选择币种" style="width: 120px; margin-right: 10px;"
+            clearable>
+            <el-option v-for="item in currency" :key="item.exchangeRate" :label="item.currency"
+              :value="item.exchangeRate"></el-option>
+          </el-select>
+          <el-input v-model="batchSettingObj.rechargeGold" placeholder="请输入充值金额"></el-input>
+        </div>
+      </el-form-item>
+      <el-form-item prop="payWay" label="收款方式">
+        <el-select v-model="batchSettingObj.payWay" placeholder="请选择收款方式" clearable>
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="rechargeTime" label="交款时间">
+        <el-date-picker v-model="batchSettingObj.rechargeTime" type="date" placeholder="请选择交款时间"></el-date-picker>
+      </el-form-item>
+      <el-form-item prop="rechargeVoucher" label="交款凭证">
+        <el-upload action="http://192.168.8.93:10010/upload" class="avatar-uploader" :show-file-list="false"
+          :on-success="batchSettingHandleAvatarSuccess" :before-upload="beforeAvatarUpload"
+          style="width: 100px; height: 115px;">
+          <img v-if="batchSettingObj.imageUrl" :src="batchSettingObj.imageUrl" class="avatar"
+            style="width: 100px; height: 115px;" />
+          <el-icon v-else class="avatar-uploader-icon" style="width: 100px; height: 100px;">
+            <Plus />
+          </el-icon>
+        </el-upload>
+      </el-form-item>
+      <el-form-item prop="remark" label="备注">
+        <el-input type="textarea" v-model="batchSettingObj.remark" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <el-button @click="cancelBatchSetting()" style="margin-left: 370px">取消</el-button>
+    <el-button type="primary" @click="batchSettingConfirm()"> 确认 </el-button>
+  </el-dialog>
+
 </template>
 
 <style scoped>

vue/gold-system/src/views/workspace/index.vue

@@ -1128,7 +1128,7 @@ onMounted(async function () {
               免费{{ formatNum(getSumCoin.todayFree) }}
               任务{{ formatNum(getSumCoin.todayTask) }}
             </span>
-            <p style="font-size: 12px;">免费金币：6月到期 | {{ formatNum(statistics.free6SumCoin) }} ; 12月到期 |{{ formatNum(statistics.free12SumCoin) }}</p>
+            <p style="font-size: 12px;">免费金币：6月到期 | {{ formatNum(statistics.free6SumCoin) }} ; 12月到期 | {{ formatNum(statistics.free12SumCoin) }}</p>
           </template>
         </el-card>
       </el-col>