Browse Source
再试一下
再试一下
lihuilin
2 weeks ago
12 changed files with 2242 additions and 3983 deletions
-
18src/router/index.js
-
316src/views/audit/rechargeAudit.vue
-
1151src/views/audit/refundAudit.vue
-
639src/views/consume/coinConsume.vue
-
9src/views/index.vue
-
79src/views/login.vue
-
232src/views/managerecharge/rate.vue
-
702src/views/recharge/coinRecharge.vue
-
2src/views/refund/beanRefund.vue
-
797src/views/refund/coinRefund.vue
-
798src/views/usergold/index.vue
-
1482src/views/workspace/index.vue
1151
src/views/audit/refundAudit.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,61 +1,602 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<!-- 这里放置标签切换的按钮 --> |
|
||||
<el-button-group> |
|
||||
<!-- 切换后状态显示 primary 样式否则是默认样式 --> |
|
||||
<el-button |
|
||||
:type="activeTab === 'add' ? 'primary' : 'default'" |
|
||||
@click="goToAdd" |
|
||||
> |
|
||||
新增消耗 |
|
||||
</el-button> |
|
||||
<el-button |
|
||||
:type="activeTab === 'detail' ? 'primary' : 'default'" |
|
||||
@click="goToDetail" |
|
||||
> |
|
||||
金币消耗明细 |
|
||||
</el-button> |
|
||||
</el-button-group> |
|
||||
<!-- 渲染子路由组件 --> |
|
||||
<router-view></router-view> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { ref, watch } from 'vue'; |
|
||||
import { useRouter, useRoute } from 'vue-router'; |
|
||||
|
import { reactive, onMounted } from "vue"; |
||||
|
import { ref, computed, watch } from "vue"; |
||||
|
import { ElMessage, ElMessageBox } from "element-plus"; |
||||
|
import { Plus } from "@element-plus/icons-vue"; |
||||
|
import axios from "axios"; |
||||
|
import moment from "moment"; |
||||
|
import _ from "lodash"; |
||||
|
import request from "@/util/http"; |
||||
|
// 精网号去空格 |
||||
|
const trimJwCode = () => { |
||||
|
if (addConsume.value.jwcode) { |
||||
|
addConsume.value.jwcode = addConsume.value.jwcode.replace(/\s/g, ''); |
||||
|
} |
||||
|
} |
||||
|
//这是获取用户信息的接口 |
||||
|
const adminData = ref({}); |
||||
|
const getAdminData = async function () { |
||||
|
try { |
||||
|
const result = await request({ |
||||
|
url: "/admin/userinfo", |
||||
|
data: {}, |
||||
|
}); |
||||
|
adminData.value = result; |
||||
|
addConsume.value.adminId = adminData.value.adminId; |
||||
|
addConsume.value.name = adminData.value.name; |
||||
|
console.log("请求成功", result); |
||||
|
console.log("用户信息", adminData.value); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
const router = useRouter();// 获取路由实例 |
|
||||
const route = useRoute();// 获取当前路由信息 |
|
||||
// 定义响应式变量 activeTab 来跟踪当前激活的标签 |
|
||||
const activeTab = ref(route.name === 'coinConsumeDetail' ? 'detail' : 'add'); |
|
||||
//也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面 |
|
||||
//此时获取到的路由信息是coinConsume，所以默认是add |
|
||||
|
// 这是添加消费信息的表单 |
||||
|
const addConsume = ref({ |
||||
|
freeCoin: 0, |
||||
|
rechargeCoin: 0, |
||||
|
taskCoin: 0, |
||||
|
updateType: "1", |
||||
|
indexName: "", //这个是指标字段，后面绑定 |
||||
|
}); |
||||
|
// 这是添加消费信息的接口 |
||||
|
const add = async function () { |
||||
|
try { |
||||
|
// 处理数据，使用楼上接口后需要隐藏 |
||||
|
addConsume.value.rechargeCoin = Number(addConsume.value.rechargeCoin * 100); |
||||
|
addConsume.value.freeCoin = Number(addConsume.value.freeCoin * 100); |
||||
|
addConsume.value.taskCoin = Number(addConsume.value.taskCoin * 100); |
||||
|
addConsume.value.productName = indexs.value.productName; |
||||
|
// 发送POST请求 |
||||
|
const result = await request({ |
||||
|
url: "/consume/add", |
||||
|
data: addConsume.value, |
||||
|
}); |
||||
|
if (result.code === 0) { |
||||
|
ElMessage.error(result.msg); |
||||
|
return; |
||||
|
} else { |
||||
|
ElMessage.success("添加成功"); |
||||
|
} |
||||
|
//重置表单 |
||||
|
addConsume.value = {}; |
||||
|
addConsume.value.adminId = adminData.value.adminId; |
||||
|
addConsume.value.adminName = adminData.value.adminName; |
||||
|
addConsume.value.updateType = "1"; |
||||
|
addConsume.value.freeCoin = 0; |
||||
|
addConsume.value.rechargeCoin = 0; |
||||
|
addConsume.value.taskCoin = 0; |
||||
|
indexs.value = {}; |
||||
|
console.log("请求成功", result); |
||||
|
user.value = {}; |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
ElMessage.error("添加失败，请检查输入内容是否正确"); |
||||
|
|
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
const addBefore = () => { |
||||
|
Ref.value.validate(async (valid) => { |
||||
|
if (valid) { |
||||
|
ElMessageBox.confirm("确认添加？") |
||||
|
.then(() => { |
||||
|
addConsume.value.freeCoin = Number(-addConsume.value.freeCoin); |
||||
|
addConsume.value.rechargeCoin = Number( |
||||
|
-addConsume.value.rechargeCoin |
||||
|
); |
||||
|
addConsume.value.taskCoin = Number(-addConsume.value.taskCoin); |
||||
|
add(); |
||||
|
console.log("添加成功"); |
||||
|
imageUrl.value = ""; |
||||
|
addConsume.value = {}; |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
console.log("取消添加"); |
||||
|
}); |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: "error", |
||||
|
message: "请检查输入内容", |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 表单验证 |
||||
|
// 开始时间改变时，重新验证结束时间 |
||||
|
const Ref = ref(null); |
||||
|
|
||||
const goToAdd = () => { |
|
||||
// 点击按钮时更新 activeTab 为 add |
|
||||
activeTab.value = 'add'; |
|
||||
router.push({ name: 'addCoinConsume' }); |
|
||||
|
const checkFreeGoldRadio = function (rule, value, callback) { |
||||
|
if (value == "0" || value == null || value == "") { |
||||
|
callback(new Error("请输入消费金币总数")); |
||||
|
} else if (value < 0 || isNaN(value)) { |
||||
|
callback(new Error("请输入正确的格式")); |
||||
|
} else { |
||||
|
callback(); |
||||
|
} |
||||
|
}; |
||||
|
const rules = reactive({ |
||||
|
jwcode: [{ required: true, message: "请输入精网号", trigger: "blur" }], |
||||
|
productName: [{ required: true, message: "请选择消费商品", trigger: "change" }], // 修改为 change |
||||
|
taskCoin: [{ required: true, message: "请输入任务金币", trigger: "blur" }], |
||||
|
freeCoin: [{ required: true, message: "请输入免费金币", trigger: "blur" }], |
||||
|
rechargeCoin: [ |
||||
|
{ required: true, message: "请输入免费金币", trigger: "blur" }, |
||||
|
], |
||||
|
allGold: [ |
||||
|
{ required: true, message: "消费金币总数不能为空", trigger: "blur" }, |
||||
|
{ validator: checkFreeGoldRadio, trigger: "blur" }, |
||||
|
], |
||||
|
indexName: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
validator: (rule, value, callback) => { |
||||
|
if (isHC.value === 1 && !value) { |
||||
|
callback(new Error("请选择指标")); |
||||
|
} else { |
||||
|
callback(); |
||||
|
} |
||||
|
}, |
||||
|
trigger: ["change", "blur"], |
||||
|
}, |
||||
|
] |
||||
|
}); |
||||
|
//这是重置方法 |
||||
|
const delteConsume = function () { |
||||
|
addConsume.value = {}; |
||||
|
addConsume.value.adminId = adminData.value.adminId; |
||||
|
addConsume.value.adminName = adminData.value.adminName; |
||||
|
addConsume.value.updateType = "1"; |
||||
|
addConsume.value.freeCoin = 0; |
||||
|
addConsume.value.rechargeCoin = 0; |
||||
|
addConsume.value.taskCoin = 0; |
||||
|
indexs.value = {}; |
||||
|
isHC.value = 0; |
||||
}; |
}; |
||||
|
// 查找客户信息的方法 |
||||
|
const user = ref({ |
||||
|
firstRechargeTime: "", |
||||
|
}); |
||||
|
const getUser = async function (jwcode) { |
||||
|
trimJwCode(); |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await request({ |
||||
|
url: "/recharge/user", |
||||
|
data: { |
||||
|
jwcode: addConsume.value.jwcode, |
||||
|
area: adminData.value.area, |
||||
|
}, |
||||
|
}); |
||||
|
console.log("请求成功", result); |
||||
|
|
||||
const goToDetail = () => { |
|
||||
// 点击按钮时更新 activeTab 为 detail |
|
||||
activeTab.value = 'detail'; |
|
||||
router.push({ name: 'coinConsumeDetail' }); |
|
||||
|
if (result.code === 0) { |
||||
|
ElMessage.error(result.msg); |
||||
|
} else { |
||||
|
user.value = result.data; |
||||
|
user.value.A = |
||||
|
Number(user.value.pendingRechargeTimes) + |
||||
|
Number(user.value.pendingSpendTimes); |
||||
|
console.log("用户信息", user.value); |
||||
|
ElMessage.success(result.msg); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
ElMessage.error("查询失败，请检查精网号是否正确"); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
}; |
}; |
||||
|
|
||||
// 监听路由变化，更新 activeTab |
|
||||
watch(() => route.name, (newName) => { |
|
||||
if (newName === 'addCoinConsume') { |
|
||||
activeTab.value = 'add'; |
|
||||
} else if (newName === 'coinConsumeDetail') { |
|
||||
activeTab.value = 'detail'; |
|
||||
|
|
||||
|
//下面这个也是校验精网号是否存在的方法，通过脱离文本框实现，但是上面方法绑定了信息面板，在输入正确的精网号后能显示。 |
||||
|
//这是查询用户金币信息的接口 |
||||
|
const userGold = ref({}); |
||||
|
const getUserGold = async function (jwcode) { |
||||
|
trimJwCode(); |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await request({ |
||||
|
url: "/recharge/user", |
||||
|
data: { |
||||
|
jwcode: addConsume.value.jwcode, |
||||
|
area: adminData.value.area, |
||||
|
}, |
||||
|
}); |
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
if (result.code === 0) { |
||||
|
//ElMessage.error(result.msg); |
||||
|
} else { |
||||
|
// 存储表格数据 |
||||
|
userGold.value = result.data; |
||||
|
addConsume.value.username = result.data.name; |
||||
|
addConsume.value.area = result.data.area; |
||||
|
// ElMessage.success(result.msg); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
//ElMessage.error("无此精网号"); |
||||
|
addConsume.value.jwcode = ""; |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
} |
} |
||||
}); |
|
||||
|
}; |
||||
|
|
||||
// 当进入父路由时，默认跳转到新增消耗页面 |
|
||||
if (route.name === 'coinConsume') { |
|
||||
router.push({ name: 'addCoinConsume' }); |
|
||||
|
function calculateCoins() { |
||||
|
if ( |
||||
|
(userGold.value.coreJb + |
||||
|
userGold.value.free6 + |
||||
|
userGold.value.free12 + |
||||
|
userGold.value.buyJb) / |
||||
|
100 < |
||||
|
addConsume.value.allGold |
||||
|
) { |
||||
|
addConsume.value.allGold = 0; |
||||
|
addConsume.value.taskCoin = 0; |
||||
|
addConsume.value.freeCoin = 0; |
||||
|
addConsume.value.rechargeCoin = 0; |
||||
|
ElMessage.error("金币不足，请充值"); |
||||
|
return; |
||||
|
} |
||||
|
// 这是计算用户的三种金币的接口 |
||||
|
else { |
||||
|
// 保存原始的allGold值 |
||||
|
const originalAllGold = addConsume.value.allGold; |
||||
|
|
||||
|
// 确保todayTask和todayFree是有效的数字 |
||||
|
const todayTask = |
||||
|
typeof userGold.value.coreJb === "number" |
||||
|
? userGold.value.coreJb / 100 |
||||
|
: 0; |
||||
|
const todayFree = |
||||
|
typeof (userGold.value.free6 + userGold.value.free12) === "number" |
||||
|
? (userGold.value.free6 + userGold.value.free12) / 100 |
||||
|
: 0; |
||||
|
|
||||
|
// 根据用户输入的消费金币总数和已有的金币数量进行计算 |
||||
|
addConsume.value.taskCoin = Math.min(originalAllGold, todayTask); |
||||
|
let remainingGold = originalAllGold - addConsume.value.taskCoin; |
||||
|
|
||||
|
addConsume.value.freeCoin = Math.min(remainingGold, todayFree); |
||||
|
remainingGold -= addConsume.value.freeCoin; |
||||
|
|
||||
|
addConsume.value.rechargeCoin = remainingGold; // 剩余的都算作永久金币 |
||||
|
|
||||
|
// 恢复allGold的原始值 |
||||
|
addConsume.value.allGold = originalAllGold; |
||||
|
|
||||
|
// 确保taskCoin, freeCoin, rechargeCoin不是NaN，如果是，则设置为0 |
||||
|
if (isNaN(addConsume.value.taskCoin)) addConsume.value.taskCoin = 0; |
||||
|
if (isNaN(addConsume.value.freeCoin)) addConsume.value.freeCoin = 0; |
||||
|
if (isNaN(addConsume.value.rechargeCoin)) addConsume.value.rechargeCoin = 0; |
||||
|
|
||||
|
console.log("计算结果", addConsume.value); |
||||
|
} |
||||
} |
} |
||||
|
|
||||
|
// 查询商品的接口 |
||||
|
const goods = ref([]); |
||||
|
const getGoods = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await request({ |
||||
|
url: "/product", |
||||
|
data: {}, |
||||
|
}); |
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
|
||||
|
console.log("请求成功", result); |
||||
|
// 存储全部数据 |
||||
|
goods.value = result.data; |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
// 获取指标的方法 |
||||
|
const index = ref([]); |
||||
|
const getIndexs = async function (type) { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await request({ |
||||
|
url: "/product/index", |
||||
|
data: { |
||||
|
type: type, |
||||
|
}, |
||||
|
}); |
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
// 存储全部数据 |
||||
|
index.value = result.data; |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 选择商品名称是时触发的方法 |
||||
|
const isHC = ref(0); |
||||
|
// const handleProductSelect = (productName) => { |
||||
|
// // 根据商品名称获取对应的商品信息 |
||||
|
// // indexs.value.productName = productName;为什么直接绑定？？？ |
||||
|
// if (productName === "homilychart") { |
||||
|
// isHC.value = 1; |
||||
|
// addConsume.value.productName = "homilychart"; // 商品名 |
||||
|
// addConsume.value.indexName = ""; // 指标名 |
||||
|
// } else { |
||||
|
// isHC.value = 0; |
||||
|
// addConsume.value.productName = productName; |
||||
|
// addConsume.value.indexName = ""; |
||||
|
// } |
||||
|
// }; |
||||
|
const indexs = ref([]); |
||||
|
// const handleIndexSelect = () => { |
||||
|
// if (isHC.value === 1 && addConsume.value.indexName) { |
||||
|
// addConsume.value.productName = "homilychart" + addConsume.value.indexName; |
||||
|
// } |
||||
|
// }; |
||||
|
|
||||
|
// 商品搜索逻辑 |
||||
|
const queryProductSearch = (queryString, cb) => { |
||||
|
const results = queryString |
||||
|
? goods.value.filter(item => |
||||
|
item.name.toLowerCase().includes(queryString.toLowerCase()) |
||||
|
) |
||||
|
: goods.value; |
||||
|
cb(results); |
||||
|
}; |
||||
|
|
||||
|
// 指标搜索逻辑 |
||||
|
const queryIndexSearch = (queryString, cb) => { |
||||
|
const results = queryString |
||||
|
? index.value.filter(item => // 将 indexData 替换为 index |
||||
|
item.name.toLowerCase().includes(queryString.toLowerCase()) |
||||
|
) |
||||
|
: index.value; |
||||
|
cb(results); |
||||
|
}; |
||||
|
|
||||
|
// 商品选择处理（重点修改） |
||||
|
const handleProductSelect = async (selectedItem) => { |
||||
|
const productName = typeof selectedItem === 'string' |
||||
|
? selectedItem |
||||
|
: selectedItem?.name || ''; |
||||
|
|
||||
|
if (productName === "homilychart") { |
||||
|
isHC.value = 1; |
||||
|
addConsume.value.productName = "homilychart"; |
||||
|
addConsume.value.indexName = ""; |
||||
|
// 动态获取指标数据 |
||||
|
await getIndexs("homilychart"); |
||||
|
} else { |
||||
|
isHC.value = 0; |
||||
|
addConsume.value.productName = productName; |
||||
|
addConsume.value.indexName = ""; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 指标选择处理（重点修改） |
||||
|
const handleIndexSelect = (selectedItem) => { |
||||
|
if (isHC.value === 1) { |
||||
|
const indexName = typeof selectedItem === 'string' |
||||
|
? selectedItem |
||||
|
: selectedItem?.name || ''; |
||||
|
// 仅更新指标名称字段 |
||||
|
addConsume.value.indexName = indexName; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 处理自由输入指标 |
||||
|
const handleIndexBlur = (e) => { |
||||
|
if (isHC.value === 1 && e.target.value) { |
||||
|
// 仅更新指标名称字段 |
||||
|
addConsume.value.indexName = e.target.value; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
await getAdminData(); |
||||
|
await getGoods(); |
||||
|
await getIndexs(1); |
||||
|
}); |
||||
|
|
||||
|
const handleSelectBlur = (value) => { |
||||
|
// 这里可以根据需求添加额外逻辑，比如验证输入值是否有效 |
||||
|
// 目前直接将输入值同步到 v-model 绑定的值上 |
||||
|
if (value) { |
||||
|
// 若选择的是商品名称 |
||||
|
if (addConsume.value.productName === value) { |
||||
|
addConsume.value.productName = value; |
||||
|
} |
||||
|
// 若选择的是指标名称 |
||||
|
else if (indexs.value.name === value) { |
||||
|
indexs.value.name = value; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div style="margin-bottom: 20px; font-weight: bolder">新增消费</div> |
||||
|
|
||||
|
<el-form :model="addConsume" ref="Ref" :rules="rules" label-width="auto" style="max-width: 750px;" class="form-style"> |
||||
|
<el-form-item prop="jwcode" label="精网号"> |
||||
|
<el-input v-model="addConsume.jwcode" style="width: 220px" @change="getUserGold(addConsume.jwcode)" /> |
||||
|
<el-button type="primary" @click="getUser(addConsume.jwcode)" style="margin-left: 20px">查询</el-button> |
||||
|
</el-form-item> |
||||
|
<div style="display: flex; align-items: center; gap: 20px;"> |
||||
|
<el-form-item prop="productName" label="商品名称" style="flex: 1; margin-right: 0px"> |
||||
|
<el-autocomplete v-model="addConsume.productName" :fetch-suggestions="queryProductSearch" placeholder="请输入或选择商品" |
||||
|
style="width: 300px" @select="handleProductSelect" value-key="name" clearable :trigger-on-focus="true"> |
||||
|
<template #default="{ item }"> |
||||
|
<div>{{ item.name }}</div> |
||||
|
</template> |
||||
|
</el-autocomplete> |
||||
|
</el-form-item> |
||||
|
<!-- 指标选择 --> |
||||
|
<el-form-item prop="indexName" label="指标" v-if="isHC == 1" style="flex: 1;margin-left: -20px"> |
||||
|
<el-autocomplete v-model="addConsume.indexName" :fetch-suggestions="queryIndexSearch" placeholder="请输入或选择指标" |
||||
|
style="width: 140px" @select="handleIndexSelect" @blur="handleIndexBlur" value-key="name" |
||||
|
:disabled="isHC !== 1" clearable free-solo allow-create> |
||||
|
<template #default="{ item }"> |
||||
|
<div>{{ item.name }}</div> |
||||
|
</template> |
||||
|
</el-autocomplete> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="指标" v-else style="flex:1;margin-left: -5px;"> |
||||
|
<el-input disabled placeholder="无" style="width: 100px" /> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<el-form-item prop="allGold" label="消费金币总数"> |
||||
|
<el-input v-model="addConsume.allGold" style="width: 100px" @change="calculateCoins()" /> |
||||
|
</el-form-item> |
||||
|
<div style="display: flex; align-items: center"> |
||||
|
<el-form-item prop="rechargeCoin" label="永久金币" style="float: left"> |
||||
|
<el-input disabled v-model="addConsume.rechargeCoin" style="width: 100px; margin-left: -5px" /> |
||||
|
<p style="margin-right: 0px">个</p> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="freeCoin" label="免费金币" style="float: left; margin-left: -20px"> |
||||
|
<el-input disabled v-model="addConsume.freeCoin" style="width: 100px; margin-left: -5px" /> |
||||
|
<p style="margin-right: 0px">个</p> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px"> |
||||
|
<el-input disabled v-model="addConsume.taskCoin" style="width: 100px; margin-left: -5px" /> |
||||
|
<p style="margin-right: 20px">个</p> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<el-form-item prop="remark" label="备注"> |
||||
|
<el-input v-model="addConsume.remark" style="width: 300px" :rows="2" maxlength="100" show-word-limit type="textarea" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="commitName" label="提交人"> |
||||
|
<el-input style="width: 300px" :value="adminData.name" disabled placeholder="提交人姓名" /> |
||||
|
</el-form-item> |
||||
|
<el-button type="success" @click="delteConsume" style="margin-left: 280px">重置</el-button> |
||||
|
<el-button type="primary" @click="addBefore"> 提交 </el-button> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-card style="width: 850px; float: right" class="customer-info"> |
||||
|
<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"> |
||||
|
<el-form-item label="姓名:"> |
||||
|
<p>{{ user.name }}</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="14"> |
||||
|
<el-form-item label="历史金币总数"> |
||||
|
<!-- 检查 user.totalRechargeGold 是否为有效的数字 --> |
||||
|
<p v-if="!isNaN(Number(user.totalRechargeGold))"> |
||||
|
{{ Number(user.totalRechargeGold / 100) }} |
||||
|
</p> |
||||
|
<!-- 如果不是有效的数字，显示默认值 --> |
||||
|
<p v-else></p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="10"> |
||||
|
<el-form-item label="精网号"> |
||||
|
<p>{{ user.jwcode }}</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="14"> |
||||
|
<el-form-item label="当前金币总数" style="width: 500px"> |
||||
|
<span style="color: #2fa1ff; margin-right: 5px" v-if="user.buyJb !== undefined">{{ |
||||
|
(user.buyJb + user.free6 + user.free12 + user.coreJb) / 100 |
||||
|
}}</span> |
||||
|
<span style="display: inline; white-space: nowrap; color: #b1b1b1" v-if="user.buyJb !== undefined">(永久金币:{{ |
||||
|
user.buyJb / 100 }};免费金币:{{ |
||||
|
(user.free6 + user.free12) / 100 |
||||
|
}};任务金币:{{ user.coreJb / 100 }})</span> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="10"> |
||||
|
<el-form-item label="首次充值日期"> |
||||
|
<p v-if="user.firstRechargeDate"> |
||||
|
{{ moment(user.firstRechargeDate).format("YYYY-MM-DD HH:mm:ss") }} |
||||
|
</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="14"> |
||||
|
<el-form-item label="充值次数"> |
||||
|
<p style="color: #2fa1ff">{{ user.rechargeTimes }}</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="10"> |
||||
|
<el-form-item label="消费次数"> |
||||
|
<p style="color: #2fa1ff">{{ user.spendTimes }}</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="10"> |
||||
|
<el-form-item label="所属门店"> |
||||
|
<p>{{ adminData.area }}</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="14"> |
||||
|
<!-- <el-form-item label="待审核"> |
||||
|
<p style="color: #2fa1ff"> |
||||
|
{{ user.A }} |
||||
|
</p> |
||||
|
</el-form-item> --> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
p { |
||||
|
margin: 0px; |
||||
|
} |
||||
|
|
||||
|
.el-form-item { |
||||
|
margin-left: 50px; |
||||
|
} |
||||
|
|
||||
|
/* 上传图片的格式 */ |
||||
|
.avatar-uploader .avatar { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
display: block; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style> |
||||
|
.avatar-uploader .el-upload { |
||||
|
border: 1px dashed var(--el-border-color); |
||||
|
border-radius: 6px; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
transition: var(--el-transition-duration-fast); |
||||
|
} |
||||
|
|
||||
|
.avatar-uploader .el-upload:hover { |
||||
|
border-color: var(--el-color-primary); |
||||
|
} |
||||
|
|
||||
|
.el-icon.avatar-uploader-icon { |
||||
|
font-size: 28px; |
||||
|
color: #8c939d; |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.form-style { |
||||
|
margin-top: 50px; |
||||
|
max-width: 50%; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.form-style2 { |
||||
|
max-width: 60%; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
font-size: 13px; |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,798 @@ |
|||||
|
<!-- 这是客户金币明细页面 --> |
||||
|
<script setup> |
||||
|
import { ref, onMounted, computed ,nextTick} from 'vue' |
||||
|
|
||||
|
import { ElMessage } from 'element-plus' |
||||
|
import axios from 'axios' |
||||
|
import moment from 'moment' |
||||
|
import API from '@/util/http' |
||||
|
import { writeFile, utils } from 'xlsx' |
||||
|
|
||||
|
// 变量 |
||||
|
const adminData = ref({}) |
||||
|
const getAdminData = async function () { |
||||
|
try { |
||||
|
const result = await API({ |
||||
|
url: '/admin/userinfo', |
||||
|
method: 'post', |
||||
|
data: {} |
||||
|
}) |
||||
|
adminData.value = result |
||||
|
console.log('请求成功', result) |
||||
|
console.log('用户信息', adminData.value) |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 定义加载状态 |
||||
|
const isLoadingArea = ref(false); |
||||
|
const area = ref([]) |
||||
|
const getArea = async () => { |
||||
|
isLoadingArea.value = true; |
||||
|
try { |
||||
|
const result = await API({ |
||||
|
url: '/detailY/getarea' |
||||
|
}); |
||||
|
// 假设后端返回的是字符串数组，转换为 { value, label } 格式 |
||||
|
if (Array.isArray(result.data) && typeof result.data[0] === 'string') { |
||||
|
area.value = result.data.map(item => ({ value: item, label: item })); |
||||
|
} else { |
||||
|
area.value = result.data; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('获取地区数据失败:', error); |
||||
|
ElMessage.error('获取地区数据失败，请稍后重试'); |
||||
|
// 可以提供默认数据 |
||||
|
area.value = []; |
||||
|
} finally { |
||||
|
isLoadingArea.value = false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 充值明细表格 |
||||
|
const tableData = ref([]) |
||||
|
// 各金币总数 |
||||
|
const rechargeCoin = ref(0) |
||||
|
const freeCoin = ref(0) |
||||
|
const taskCoin = ref(0) |
||||
|
// 搜索=========================================== |
||||
|
//分页总条目 |
||||
|
const total = ref(100) |
||||
|
// 搜索对象时间 |
||||
|
const getTime = ref([]) |
||||
|
// 搜索detailY |
||||
|
const detailY = ref({}) |
||||
|
// 搜索对象 |
||||
|
const getObj = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 50 |
||||
|
}) |
||||
|
// 开启条件筛选导出excel |
||||
|
const getPutEX = ref(false) |
||||
|
|
||||
|
// 支付方式选项 |
||||
|
const num = [ |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: '增加' |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: '减少' |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
|
||||
|
// 方法 |
||||
|
// 搜索=========================================================================== |
||||
|
// 搜索方法 |
||||
|
const get = async function (val) { |
||||
|
try { |
||||
|
// 地区赋值 |
||||
|
if (adminData.value.area === '泰国') { |
||||
|
detailY.value.areas = ['泰国', '越南'] |
||||
|
} else if (adminData.value.area !== '总部') { |
||||
|
detailY.value.area = adminData.value.area |
||||
|
} |
||||
|
// 搜索参数页码赋值 |
||||
|
if (typeof val === 'number') { |
||||
|
getObj.value.pageNum = val |
||||
|
} |
||||
|
if (getTime.value.length === 2) { |
||||
|
detailY.value.startDate = getTime.value[0] |
||||
|
detailY.value.endDate = getTime.value[1] |
||||
|
} else { |
||||
|
detailY.value.startDate = '' |
||||
|
detailY.value.endDate = '' |
||||
|
} |
||||
|
// 添加排序字段和排序方式到请求参数 |
||||
|
detailY.value.sortField = sortField.value |
||||
|
detailY.value.sortOrder = sortOrder.value |
||||
|
console.log('搜索参数', getObj.value) |
||||
|
// 发送POST请求 |
||||
|
const result = await API({ |
||||
|
url: '/detailY', |
||||
|
method: 'post', |
||||
|
data: { ...getObj.value, detailY: { ...detailY.value } } |
||||
|
}) |
||||
|
tableData.value = result.data.list |
||||
|
total.value = result.data.total |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error) |
||||
|
} |
||||
|
} |
||||
|
// 精网号去空格，处理 detailY 中的 jwcode |
||||
|
const trimJwCode = () => { |
||||
|
if (detailY.value.jwcode) { |
||||
|
detailY.value.jwcode = detailY.value.jwcode.replace(/\s/g, ''); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 搜索 |
||||
|
const search = function () { |
||||
|
trimJwCode(); |
||||
|
getObj.value.pageNum = 1 |
||||
|
get() |
||||
|
} |
||||
|
|
||||
|
// 重置 |
||||
|
const reset = function () { |
||||
|
delete detailY.value.jwcode |
||||
|
delete detailY.value.num |
||||
|
delete detailY.value.startDate |
||||
|
delete detailY.value.endDate |
||||
|
delete detailY.value.area |
||||
|
delete sortField.value |
||||
|
delete sortOrder.value |
||||
|
getTime.value = [] |
||||
|
delete detailY.value.consumePlatform |
||||
|
} |
||||
|
// 今天 |
||||
|
const getToday = function () { |
||||
|
const today = moment() |
||||
|
const startDate = today.startOf('day').toDate() |
||||
|
const endDate = today.add(1, 'days').startOf('day').toDate() |
||||
|
getTime.value = [startDate, endDate] |
||||
|
search() |
||||
|
} |
||||
|
|
||||
|
// 昨天 |
||||
|
const getYesterday = function () { |
||||
|
const today = moment() |
||||
|
const yesterday = moment().subtract(1, 'day') |
||||
|
const startDate = yesterday.startOf('day').toDate() |
||||
|
const endDate = today.startOf('day').toDate() |
||||
|
getTime.value = [startDate, endDate] |
||||
|
search() |
||||
|
} |
||||
|
|
||||
|
// 近7天 |
||||
|
const get7Days = function () { |
||||
|
const startDate = moment().subtract(6, 'day').startOf('day').toDate() |
||||
|
const endDate = moment().add(1,'days').startOf('day').toDate() |
||||
|
getTime.value = [startDate, endDate] |
||||
|
search() |
||||
|
} |
||||
|
|
||||
|
// 验证跳转输入框的数字是否合法 |
||||
|
const checkNumber = function () { |
||||
|
if (typeof parseInt(getObj.value.pageNum) === 'number') { |
||||
|
console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize)) |
||||
|
if ( |
||||
|
getObj.value.pageNum > 0 && |
||||
|
getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize) |
||||
|
) { |
||||
|
getObj.value.pageNum = parseInt(getObj.value.pageNum) |
||||
|
console.log('输入的数字合法') |
||||
|
get() |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容' |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
await getArea() |
||||
|
await getAdminData() |
||||
|
await get() |
||||
|
}) |
||||
|
|
||||
|
// 导出Excel的方法 |
||||
|
const headers = [ |
||||
|
'序号', |
||||
|
'姓名', |
||||
|
'精网号', |
||||
|
'所属地区', |
||||
|
'平台信息', |
||||
|
'更新数量', |
||||
|
'更新类型', |
||||
|
'永久金币', |
||||
|
'免费金币', |
||||
|
'任务金币', |
||||
|
'提交人', |
||||
|
'更新时间' |
||||
|
] |
||||
|
|
||||
|
const showExportInfoPanel = ref(false) |
||||
|
|
||||
|
// 点击导出按钮直接显示信息面板 |
||||
|
const exportExcel = async () => { |
||||
|
try { |
||||
|
console.log('点击导出按钮，尝试显示信息面板'); |
||||
|
showExportInfoPanel.value = true; |
||||
|
await nextTick();//组件更新显示信息面板 |
||||
|
} catch (error) { |
||||
|
console.error('显示信息面板失败:', error); |
||||
|
ElMessage.error('显示信息面板失败，请稍后重试'); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 新增导出状态相关变量 |
||||
|
const exportProgress = ref(0) |
||||
|
const isExporting = ref(false) |
||||
|
const exportCancelToken = ref(null) |
||||
|
|
||||
|
// 优化后的导出方法 |
||||
|
const doExportExcel = async () => { |
||||
|
try { |
||||
|
isExporting.value = true |
||||
|
exportProgress.value = 0 |
||||
|
showExportInfoPanel.value = false |
||||
|
|
||||
|
// 初始化Excel |
||||
|
const wb = utils.book_new() |
||||
|
const ws = utils.aoa_to_sheet([headers]) |
||||
|
utils.book_append_sheet(wb, ws, 'Sheet1') |
||||
|
|
||||
|
// 流式写入配置 |
||||
|
const writer = { |
||||
|
write: (d, o) => { |
||||
|
if (!d) return |
||||
|
utils.sheet_add_aoa(ws, d, { origin: -1 }) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
let page = 1 |
||||
|
let totalExported = 0 |
||||
|
const pageSize = 5000 // 每次请求5000条 |
||||
|
let totalRecords = 0 |
||||
|
|
||||
|
// 首次请求获取总记录数 |
||||
|
const firstResult = await API({ |
||||
|
url: '/detailY', |
||||
|
method: 'post', |
||||
|
data: { |
||||
|
pageNum: 1, |
||||
|
pageSize, |
||||
|
detailY: { ...detailY.value } |
||||
|
} |
||||
|
}) |
||||
|
totalRecords = firstResult.data.total |
||||
|
|
||||
|
// 创建取消令牌 |
||||
|
const CancelToken = axios.CancelToken |
||||
|
exportCancelToken.value = CancelToken.source() |
||||
|
|
||||
|
// 平台信息映射 |
||||
|
const platformMap = { |
||||
|
0: '初始化金币', |
||||
|
1: 'ERP系统', |
||||
|
2: 'Homily Chart', |
||||
|
3: 'Homily Link', |
||||
|
4: '金币系统' |
||||
|
}; |
||||
|
// 更新类型映射 |
||||
|
const updateTypeMap = { |
||||
|
0: '充值', |
||||
|
1: '消费', |
||||
|
2: '退款', |
||||
|
3: '其他' |
||||
|
}; |
||||
|
|
||||
|
// 处理首次请求的数据 |
||||
|
const firstData = firstResult.data.list |
||||
|
if (firstData.length) { |
||||
|
const rows = firstData.map((row, index) => { |
||||
|
const consumePlatform = parseInt(row.consumePlatform, 10); // 转换为数字类型 |
||||
|
const platformInfo = platformMap[consumePlatform] || ''; |
||||
|
return [ |
||||
|
totalExported + index + 1, |
||||
|
row.username || '', |
||||
|
row.jwcode || '', |
||||
|
row.area || '', |
||||
|
platformInfo, |
||||
|
(row.gold / 100).toFixed(2) || '0.00', |
||||
|
updateTypeMap[row.updateType] || '', |
||||
|
(row.rechargeCoin / 100).toFixed(2) || '0.00', |
||||
|
(row.freeCoin / 100).toFixed(2) || '0.00', |
||||
|
(row.taskCoin / 100).toFixed(2) || '0.00', |
||||
|
row.name || '', |
||||
|
moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') || '' |
||||
|
] |
||||
|
}) |
||||
|
writer.write(rows) |
||||
|
totalExported += firstData.length |
||||
|
exportProgress.value = Math.round((totalExported / totalRecords) * 100) |
||||
|
page++ |
||||
|
} |
||||
|
|
||||
|
while (totalExported < totalRecords) { |
||||
|
const result = await API({ |
||||
|
url: '/detailY', |
||||
|
method: 'post', |
||||
|
data: { |
||||
|
pageNum: page, |
||||
|
pageSize, |
||||
|
detailY: { ...detailY.value } |
||||
|
}, |
||||
|
cancelToken: exportCancelToken.value.token |
||||
|
}) |
||||
|
|
||||
|
const data = result.data.list |
||||
|
if (!data.length) break |
||||
|
|
||||
|
// 转换数据 |
||||
|
const rows = data.map((row, index) => [ |
||||
|
totalExported + index + 1, |
||||
|
row.username || '', |
||||
|
row.jwcode || '', |
||||
|
row.area || '', |
||||
|
platformMap[row.consumePlatform] || '', |
||||
|
(row.gold / 100).toFixed(2) || '0.00', |
||||
|
updateTypeMap[row.updateType] || '', |
||||
|
(row.rechargeCoin / 100).toFixed(2) || '0.00', |
||||
|
(row.freeCoin / 100).toFixed(2) || '0.00', |
||||
|
(row.taskCoin / 100).toFixed(2) || '0.00', |
||||
|
row.name || '', |
||||
|
moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') || '' |
||||
|
]) |
||||
|
|
||||
|
// 流式写入 |
||||
|
writer.write(rows) |
||||
|
totalExported += data.length |
||||
|
exportProgress.value = Math.round((totalExported / totalRecords) * 100) |
||||
|
|
||||
|
// 内存控制：每500页释放内存 |
||||
|
if (page % 500 === 0) { |
||||
|
await new Promise(resolve => setTimeout(resolve, 0)) |
||||
|
} |
||||
|
|
||||
|
page++ |
||||
|
} |
||||
|
|
||||
|
// 生成最终文件 |
||||
|
writeFile(wb, '客户金币明细.xlsx') |
||||
|
ElMessage.success(`导出成功，共${totalExported}条数据`) |
||||
|
} catch (error) { |
||||
|
if (!axios.isCancel(error)) { |
||||
|
ElMessage.error(`导出失败: ${error.message}`) |
||||
|
} |
||||
|
} finally { |
||||
|
isExporting.value = false |
||||
|
exportCancelToken.value = null |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 新增取消导出方法 |
||||
|
const cancelExport = () => { |
||||
|
if (exportCancelToken.value) { |
||||
|
exportCancelToken.value.cancel('用户取消导出') |
||||
|
ElMessage.warning('导出已取消') |
||||
|
isExporting.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const putExcel = ref({ |
||||
|
startDate: new Date(), |
||||
|
endDate: new Date(new Date().setDate(new Date().getDate() + 1)) |
||||
|
}) |
||||
|
|
||||
|
// 新增校验精网号的方法 |
||||
|
const checkJwCode = async (jwcode) => { |
||||
|
try { |
||||
|
const result = await API({ |
||||
|
url: '/recharge/user', |
||||
|
method: 'post', |
||||
|
data: { |
||||
|
jwcode, |
||||
|
area: adminData.value.area |
||||
|
} |
||||
|
}) |
||||
|
// 根据后端返回的 code 判断精网号是否存在 |
||||
|
return result.code !== 0 |
||||
|
} catch (error) { |
||||
|
console.log('校验精网号失败', error) |
||||
|
return false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 选消费平台 |
||||
|
const platform = [ |
||||
|
{ |
||||
|
value: '4', |
||||
|
label: '金币系统' |
||||
|
}, |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: 'ERP系统' |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: 'Homily Chart' |
||||
|
}, |
||||
|
{ |
||||
|
value: '3', |
||||
|
label: 'Homily Link' |
||||
|
}, |
||||
|
{ |
||||
|
value: '0', |
||||
|
label: '初始化金币' |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
// 新增排序字段和排序方式 |
||||
|
const sortField = ref('') |
||||
|
const sortOrder = ref('') |
||||
|
// 处理排序事件 |
||||
|
const handleSortChange = (column) => { |
||||
|
if (column.prop === 'rechargeCoin') { |
||||
|
sortField.value = 'recharge_coin' |
||||
|
} else if (column.prop === 'taskCoin') { |
||||
|
sortField.value = 'task_coin' |
||||
|
} else if (column.prop === 'freeCoin') { |
||||
|
sortField.value = 'free_coin' |
||||
|
} else if (column.prop === 'createTime') { |
||||
|
sortField.value = 'create_time' |
||||
|
} else if (column.prop === 'gold') { |
||||
|
sortField.value = 'gold' |
||||
|
} |
||||
|
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC' |
||||
|
//get（）要写在handleSortChange方法里面，不然会导致排序失效 |
||||
|
get() |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
const handlePageSizeChange = function (val) { |
||||
|
getObj.value.pageSize = val |
||||
|
get() |
||||
|
} |
||||
|
|
||||
|
const handleCurrentChange = function (val) { |
||||
|
getObj.value.pageNum = val |
||||
|
get() |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<!-- 导出excel提前展示的信息面板 --> |
||||
|
<el-dialog |
||||
|
v-model="showExportInfoPanel" |
||||
|
title="导出信息确认" |
||||
|
width="400px" |
||||
|
:close-on-click-modal="false" |
||||
|
> |
||||
|
<div class="info-panel-header">导出信息</div> |
||||
|
<!-- 直接使用 detailY 显示信息，添加可选链操作符 --> |
||||
|
<!-- detailY是一个ref，所以在模板中应该直接使用detailY.consumePlatform， |
||||
|
而不是detailY.value.consumePlatform。 |
||||
|
因为在模板中，ref变量会自动解包，不需要.value。 |
||||
|
例如，在代码中，我们可能错误地在模板中使用了detailY.value，但实际上应该直接使用detailY。 --> |
||||
|
<div v-if="!detailY.jwcode && !detailY.consumePlatform && !detailY.num && !detailY.area && (getTime.length < 2)"> |
||||
|
你正在导出所有数据 |
||||
|
</div> |
||||
|
<div v-else> |
||||
|
你正在导出以下数据 |
||||
|
</div> |
||||
|
<div v-if="detailY.jwcode">精网号：{{ detailY.jwcode || '' }}</div> |
||||
|
<div v-if="detailY.consumePlatform">平台信息：{{ detailY.consumePlatform ? (platform.find(item => item.value === detailY.consumePlatform)?.label) : '' }}</div> |
||||
|
<div v-if="detailY.num">数量更新类型：{{ detailY.num ? (num.find(item => item.value === detailY.num)?.label || '') : '' }}</div> |
||||
|
<div v-if="detailY.area">所属地区：{{ detailY.area || '' }}</div> |
||||
|
<div v-if="Array.isArray(getTime) && getTime.length >= 2"> |
||||
|
<span>更新时间：</span> |
||||
|
<!-- 修改时间格式为精确到秒 --> |
||||
|
<span v-if="Array.isArray(getTime) && getTime.length >= 2"> |
||||
|
{{ moment(getTime[0]).format('YYYY-MM-DD HH:mm:ss') }} 至 {{ moment(getTime[1]).format('YYYY-MM-DD HH:mm:ss') }} |
||||
|
</span> |
||||
|
<span v-else></span> |
||||
|
</div> |
||||
|
<template #footer> |
||||
|
<span class="dialog-footer"> |
||||
|
<el-button @click="showExportInfoPanel = false">取消</el-button> |
||||
|
<el-button type="primary" @click="doExportExcel">导出</el-button> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 导出进度弹窗 --> |
||||
|
<el-dialog |
||||
|
v-model="isExporting" |
||||
|
title="正在导出" |
||||
|
width="400px" |
||||
|
:close-on-click-modal="false" |
||||
|
:show-close="false" |
||||
|
> |
||||
|
<el-progress |
||||
|
:percentage="exportProgress" |
||||
|
:stroke-width="15" |
||||
|
striped |
||||
|
animated |
||||
|
/> |
||||
|
<div class="export-status"> |
||||
|
已导出 {{ Math.round((exportProgress / 100) * total) }} 条 / 共 {{ total }} 条 |
||||
|
</div> |
||||
|
<template #footer> |
||||
|
<el-button type="danger" @click="cancelExport">取消导出</el-button> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card style="margin-bottom: 20px"> |
||||
|
<el-row style="margin-bottom: 10px"> |
||||
|
<el-col :span="6"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">精网号：</el-text> |
||||
|
<el-input |
||||
|
v-model="detailY.jwcode" |
||||
|
style="width: 240px" |
||||
|
placeholder="请输入精网号" |
||||
|
clearable |
||||
|
/> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">平台信息：</el-text> |
||||
|
<el-select |
||||
|
v-model="detailY.consumePlatform" |
||||
|
placeholder="请选择平台信息" |
||||
|
style="width: 200px" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in platform" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">数量更新类型：</el-text> |
||||
|
<el-select |
||||
|
v-model="detailY.num" |
||||
|
placeholder="请选择更新类型" |
||||
|
style="width: 200px" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in num" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">所属地区：</el-text> |
||||
|
<el-select |
||||
|
v-model="detailY.area" |
||||
|
placeholder="请选择所属地区" |
||||
|
style="width: 240px" |
||||
|
clearable |
||||
|
:loading="isLoadingArea" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in area" |
||||
|
:key="item.value || item" |
||||
|
:label="item.label || item" |
||||
|
:value="item.value || item" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">更新时间：</el-text> |
||||
|
<el-date-picker |
||||
|
v-model="getTime" |
||||
|
type="datetimerange" |
||||
|
range-separator="至" |
||||
|
start-placeholder="起始时间" |
||||
|
end-placeholder="结束时间" |
||||
|
style="margin-right: 50px" |
||||
|
/> |
||||
|
<el-button @click="getToday()">今</el-button> |
||||
|
<el-button @click="getYesterday()">昨</el-button> |
||||
|
<el-button @click="get7Days()">近7天</el-button> |
||||
|
<el-button type="success" @click="exportExcel">导出Excel表格</el-button> |
||||
|
<el-button type="success" @click="reset()">重置</el-button> |
||||
|
<el-button type="primary" @click="search()">查询</el-button> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<div style="height: 584px; overflow-y: auto"> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
style="width: 100%" |
||||
|
@sort-change="handleSortChange" |
||||
|
height="584px" |
||||
|
> |
||||
|
<el-table-column |
||||
|
type="index" |
||||
|
label="序号" |
||||
|
width="100px" |
||||
|
fixed="left" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ |
||||
|
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
||||
|
}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
fixed="left" |
||||
|
prop="username" |
||||
|
label="姓名" |
||||
|
width="150" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
fixed="left" |
||||
|
prop="jwcode" |
||||
|
label="精网号" |
||||
|
width="120" |
||||
|
/> |
||||
|
<el-table-column prop="area" label="所属地区" width="120" /> |
||||
|
<el-table-column |
||||
|
prop="consumePlatform" |
||||
|
label="平台信息" |
||||
|
width="140" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<!-- 使用非严格相等比较 --> |
||||
|
<span v-if="scope.row.consumePlatform == 0">初始化金币</span> |
||||
|
<span v-if="scope.row.consumePlatform == 1">ERP系统</span> |
||||
|
<span v-if="scope.row.consumePlatform == 3">Homily Link</span> |
||||
|
<span v-if="scope.row.consumePlatform == 2">Homily Chart</span> |
||||
|
<span v-if="scope.row.consumePlatform == 4">金币系统</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="gold" |
||||
|
label="更新数量" |
||||
|
width="120" |
||||
|
sortable="custom" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ scope.row.gold / 100 }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="updateType" label="更新类型" width="110"> |
||||
|
<!-- 模板内容 --> |
||||
|
<template #default="scope"> |
||||
|
<span v-if="scope.row.updateType == 1">消费</span> |
||||
|
<span v-if="scope.row.updateType == 0">充值</span> |
||||
|
<span v-if="scope.row.updateType == 2">退款</span> |
||||
|
<span v-if="scope.row.updateType == 3">其他</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="rechargeCoin" |
||||
|
sortable="custom" |
||||
|
label="永久金币" |
||||
|
width="110" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ scope.row.rechargeCoin / 100 }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="freeCoin" |
||||
|
sortable="custom" |
||||
|
label="免费金币" |
||||
|
width="110" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ scope.row.freeCoin / 100 }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="taskCoin" |
||||
|
sortable="custom" |
||||
|
label="任务金币" |
||||
|
width="110" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ scope.row.taskCoin / 100 }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="name" label="提交人" width="110" /> |
||||
|
<el-table-column |
||||
|
prop="createTime" |
||||
|
sortable="custom" |
||||
|
label="更新时间" |
||||
|
width="210" |
||||
|
show-overflow-tooltip |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ |
||||
|
moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 此处分页 --> |
||||
|
<div class="pagination" style="margin-top: 20px"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
:page-size="getObj.pageSize" |
||||
|
:page-sizes="[5, 10, 20, 50, 100]" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
:total="total" |
||||
|
@size-change="handlePageSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.pagination { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.status { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.info-panel-header { |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.dialog-footer { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
.export-status { |
||||
|
margin-top: 15px; |
||||
|
text-align: center; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.el-progress-bar__inner { |
||||
|
transition: width 0.5s ease; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
1482
src/views/workspace/index.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue