|
|
|
@ -1,14 +1,14 @@ |
|
|
|
<!-- 这是客户金币明细页面 --> |
|
|
|
<script setup> |
|
|
|
import { ref, onMounted, reactive, computed } from 'vue' |
|
|
|
import ElementPlus from 'element-plus' |
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus' |
|
|
|
import { ref, onMounted, computed ,nextTick} from 'vue' |
|
|
|
|
|
|
|
import { ElMessage } from 'element-plus' |
|
|
|
import axios from 'axios' |
|
|
|
import moment from 'moment' |
|
|
|
import { ta } from 'element-plus/es/locales.mjs' |
|
|
|
import API from '@/util/http' |
|
|
|
import { writeFile, utils } from 'xlsx' |
|
|
|
|
|
|
|
// 变量 |
|
|
|
//这是获取用户信息的接口 |
|
|
|
const adminData = ref({}) |
|
|
|
const getAdminData = async function () { |
|
|
|
try { |
|
|
|
@ -24,10 +24,34 @@ const getAdminData = async function () { |
|
|
|
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 tableAllData = ref([]); |
|
|
|
// 各金币总数 |
|
|
|
const rechargeCoin = ref(0) |
|
|
|
const freeCoin = ref(0) |
|
|
|
@ -39,14 +63,12 @@ const total = ref(100) |
|
|
|
const getTime = ref([]) |
|
|
|
// 搜索detailY |
|
|
|
const detailY = ref({}) |
|
|
|
// 不分页的搜索对象 |
|
|
|
const getAllObj = ref({}) |
|
|
|
// 搜索对象 |
|
|
|
const getObj = ref({ |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 50 |
|
|
|
}) |
|
|
|
//开启条件筛选导出excel |
|
|
|
// 开启条件筛选导出excel |
|
|
|
const getPutEX = ref(false) |
|
|
|
|
|
|
|
// 支付方式选项 |
|
|
|
@ -61,10 +83,6 @@ const num = [ |
|
|
|
} |
|
|
|
] |
|
|
|
|
|
|
|
// //表格高度 |
|
|
|
// const tableHeight = computed(function () { |
|
|
|
// return (getObj.value.pageSize + 2) * 38 + "px"; |
|
|
|
// }); |
|
|
|
|
|
|
|
// 方法 |
|
|
|
// 搜索=========================================================================== |
|
|
|
@ -81,12 +99,9 @@ const get = async function (val) { |
|
|
|
if (typeof val === 'number') { |
|
|
|
getObj.value.pageNum = val |
|
|
|
} |
|
|
|
// 搜索参数时间赋值 |
|
|
|
if (getTime.value != null) { |
|
|
|
if (getTime.value.startDate != '' && getTime.value.endDate != '') { |
|
|
|
if (getTime.value.length === 2) { |
|
|
|
detailY.value.startDate = getTime.value[0] |
|
|
|
detailY.value.endDate = getTime.value[1] |
|
|
|
} |
|
|
|
} else { |
|
|
|
detailY.value.startDate = '' |
|
|
|
detailY.value.endDate = '' |
|
|
|
@ -101,116 +116,62 @@ const get = async function (val) { |
|
|
|
method: 'post', |
|
|
|
data: { ...getObj.value, detailY: { ...detailY.value } } |
|
|
|
}) |
|
|
|
// const result2 = await API.post("http://54.251.137.151:10702/detailY", { |
|
|
|
// ...getAllObj.value, |
|
|
|
// detailY: { ...detailY.value }, |
|
|
|
// }); |
|
|
|
// 将响应结果存储到响应式数据中 |
|
|
|
console.log('请求成功', result) |
|
|
|
// console.log("请求成功2", result2); |
|
|
|
// 存储表格数据 |
|
|
|
tableData.value = result.data.list |
|
|
|
console.log('tableData', tableData.value) |
|
|
|
// tableAllData.value = result2.data; |
|
|
|
// console.log("tableAllData", tableAllData.value); |
|
|
|
// 存储分页总数 |
|
|
|
total.value = result.data.total |
|
|
|
console.log('total', total.value) |
|
|
|
// 计算各金币总数并除以100 |
|
|
|
// 下列各数除以100，并最多显示两位小数 |
|
|
|
// rechargeCoin.value = parseFloat((tableAllData.value.sumR / 100).toFixed(2)); |
|
|
|
// freeCoin.value = parseFloat((tableAllData.value.sumF / 100).toFixed(2)); |
|
|
|
// taskCoin.value = parseFloat((tableAllData.value.sumT / 100).toFixed(2)); |
|
|
|
// for (let i = 0; i < tableAllData.value.length; i++) { |
|
|
|
// rechargeCoin.value += tableAllData.value[i].rechargeCoin; |
|
|
|
// freeCoin.value += tableAllData.value[i].freeCoin; |
|
|
|
// taskCoin.value += tableAllData.value[i].taskCoin; |
|
|
|
// } |
|
|
|
// console.log( |
|
|
|
// "各金币总数", |
|
|
|
// rechargeCoin.value, |
|
|
|
// freeCoin.value, |
|
|
|
// taskCoin.value |
|
|
|
// ); |
|
|
|
} 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 = {} |
|
|
|
// 删除平台信息字段 |
|
|
|
getTime.value = [] |
|
|
|
delete detailY.value.consumePlatform |
|
|
|
} |
|
|
|
// 今天 |
|
|
|
const getToday = function () { |
|
|
|
const today = new Date() |
|
|
|
const startDate = new Date( |
|
|
|
today.getFullYear(), |
|
|
|
today.getMonth(), |
|
|
|
today.getDate() |
|
|
|
) |
|
|
|
const endDate = new Date( |
|
|
|
today.getFullYear(), |
|
|
|
today.getMonth(), |
|
|
|
today.getDate() + 1 |
|
|
|
) |
|
|
|
const today = moment() |
|
|
|
const startDate = today.startOf('day').toDate() |
|
|
|
const endDate = today.endOf('day').toDate() |
|
|
|
getTime.value = [startDate, endDate] |
|
|
|
console.log('getTime', getTime.value) |
|
|
|
get() |
|
|
|
search() |
|
|
|
} |
|
|
|
|
|
|
|
// 昨天 |
|
|
|
const getYesterday = function () { |
|
|
|
const yesterday = new Date() |
|
|
|
yesterday.setDate(yesterday.getDate() - 1) |
|
|
|
const startDate = new Date( |
|
|
|
yesterday.getFullYear(), |
|
|
|
yesterday.getMonth(), |
|
|
|
yesterday.getDate() |
|
|
|
) |
|
|
|
const endDate = new Date( |
|
|
|
yesterday.getFullYear(), |
|
|
|
yesterday.getMonth(), |
|
|
|
yesterday.getDate() + 1 |
|
|
|
) |
|
|
|
const yesterday = moment().subtract(1, 'day') |
|
|
|
const startDate = yesterday.startOf('day').toDate() |
|
|
|
const endDate = yesterday.endOf('day').toDate() |
|
|
|
getTime.value = [startDate, endDate] |
|
|
|
console.log('getTime', getTime.value) |
|
|
|
get() |
|
|
|
search() |
|
|
|
} |
|
|
|
|
|
|
|
// 近7天 |
|
|
|
const get7Days = function () { |
|
|
|
const today = new Date() |
|
|
|
const startDate = new Date( |
|
|
|
today.getFullYear(), |
|
|
|
today.getMonth(), |
|
|
|
today.getDate() - 6 |
|
|
|
) |
|
|
|
const endDate = new Date( |
|
|
|
today.getFullYear(), |
|
|
|
today.getMonth(), |
|
|
|
today.getDate() + 1 |
|
|
|
) |
|
|
|
const startDate = moment().subtract(6, 'day').startOf('day').toDate() |
|
|
|
const endDate = moment().endOf('day').toDate() |
|
|
|
getTime.value = [startDate, endDate] |
|
|
|
console.log('getTime', getTime.value) |
|
|
|
get() |
|
|
|
search() |
|
|
|
} |
|
|
|
|
|
|
|
// 验证跳转输入框的数字是否合法 |
|
|
|
@ -242,153 +203,226 @@ const checkNumber = function () { |
|
|
|
|
|
|
|
// 挂载 |
|
|
|
onMounted(async function () { |
|
|
|
await getArea() |
|
|
|
await getAdminData() |
|
|
|
await get() |
|
|
|
}) |
|
|
|
|
|
|
|
// 这是导出excel表格的方法 |
|
|
|
// 导出Excel的方法 |
|
|
|
// 定义字段映射 |
|
|
|
const json_fields = (row) => { |
|
|
|
return [ |
|
|
|
row.jwcode, // 姓名 |
|
|
|
row.area, // 精网号 |
|
|
|
row.platform, // 所属地区 |
|
|
|
row.consumePlatform, // 平台信息 |
|
|
|
row.gold, // 更新数量 |
|
|
|
row.rechargeCoin, // 免费金币 |
|
|
|
row.freeCoin, // 永久金币 |
|
|
|
row.taskCoin, // 任务金币 |
|
|
|
row.createAdmin, // 提交人 |
|
|
|
row.createTime, |
|
|
|
row.name, |
|
|
|
row.id |
|
|
|
] |
|
|
|
} |
|
|
|
|
|
|
|
// 定义元数据 |
|
|
|
const json_meta = [ |
|
|
|
[ |
|
|
|
{ |
|
|
|
key: 'charset', |
|
|
|
value: 'utf-8' |
|
|
|
} |
|
|
|
] |
|
|
|
] |
|
|
|
const headers = [ |
|
|
|
'序号', |
|
|
|
'姓名', |
|
|
|
'精网号', |
|
|
|
'地区', |
|
|
|
'所属地区', |
|
|
|
'平台信息', |
|
|
|
'数量', |
|
|
|
'数量更新类型', |
|
|
|
'更新数量', |
|
|
|
'更新类型', |
|
|
|
'永久金币', |
|
|
|
'免费金币', |
|
|
|
'任务金币', |
|
|
|
'提交人', |
|
|
|
'更新时间', |
|
|
|
'用户名', |
|
|
|
'id' |
|
|
|
'更新时间' |
|
|
|
] |
|
|
|
const exportExcel = () => { |
|
|
|
// 先将 json_fields 应用到数据上 |
|
|
|
const data = excelInfo.value.map(json_fields) |
|
|
|
const ws = utils.aoa_to_sheet(data) |
|
|
|
// 添加表头到工作表 |
|
|
|
utils.sheet_add_aoa(ws, [headers], { origin: 'A1' }) |
|
|
|
|
|
|
|
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') |
|
|
|
writeFile(wb, '客户金币明细.xlsx') |
|
|
|
} |
|
|
|
const today = new Date() |
|
|
|
const startDate = new Date( |
|
|
|
today.getFullYear(), |
|
|
|
today.getMonth(), |
|
|
|
today.getDate() |
|
|
|
) |
|
|
|
const endDate = new Date( |
|
|
|
today.getFullYear(), |
|
|
|
today.getMonth(), |
|
|
|
today.getDate() + 1 |
|
|
|
) |
|
|
|
const putExcel = ref({ |
|
|
|
startDate: startDate, |
|
|
|
endDate: endDate |
|
|
|
}) |
|
|
|
const excelInfo = ref({}) |
|
|
|
const loading = ref(false) |
|
|
|
const areyour = async function () { |
|
|
|
try { |
|
|
|
loading.value = true |
|
|
|
const result = await API({ |
|
|
|
url: '/detailY/searchAll', |
|
|
|
method: 'post', |
|
|
|
data: { ...putExcel.value } |
|
|
|
}) |
|
|
|
excelInfo.value = result.data |
|
|
|
|
|
|
|
// 处理 excelInfo 中的数据 |
|
|
|
if (Array.isArray(excelInfo.value)) { |
|
|
|
excelInfo.value.forEach((item) => { |
|
|
|
if (item.rechargeCoin) { |
|
|
|
item.rechargeCoin = item.rechargeCoin / 100 |
|
|
|
// 流式写入配置 |
|
|
|
const writer = { |
|
|
|
write: (d, o) => { |
|
|
|
if (!d) return |
|
|
|
utils.sheet_add_aoa(ws, d, { origin: -1 }) |
|
|
|
} |
|
|
|
if (item.freeCoin) { |
|
|
|
item.freeCoin = item.freeCoin / 100 |
|
|
|
} |
|
|
|
if (item.taskCoin) { |
|
|
|
item.taskCoin = item.taskCoin / 100 |
|
|
|
|
|
|
|
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++ |
|
|
|
} |
|
|
|
|
|
|
|
areyouright.value = true |
|
|
|
ElMessage({ |
|
|
|
type: 'success', |
|
|
|
message: '查询成功' |
|
|
|
while (totalExported < totalRecords) { |
|
|
|
const result = await API({ |
|
|
|
url: '/detailY', |
|
|
|
method: 'post', |
|
|
|
data: { |
|
|
|
pageNum: page, |
|
|
|
pageSize, |
|
|
|
detailY: { ...detailY.value } |
|
|
|
}, |
|
|
|
cancelToken: exportCancelToken.value.token |
|
|
|
}) |
|
|
|
loading.value = false |
|
|
|
|
|
|
|
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) { |
|
|
|
console.log('请求失败', error) |
|
|
|
loading.value = false |
|
|
|
if (!axios.isCancel(error)) { |
|
|
|
ElMessage.error(`导出失败: ${error.message}`) |
|
|
|
} |
|
|
|
} finally { |
|
|
|
isExporting.value = false |
|
|
|
exportCancelToken.value = null |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const areyouright = ref(false) |
|
|
|
// 新增取消导出方法 |
|
|
|
const cancelExport = () => { |
|
|
|
if (exportCancelToken.value) { |
|
|
|
exportCancelToken.value.cancel('用户取消导出') |
|
|
|
ElMessage.warning('导出已取消') |
|
|
|
isExporting.value = false |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
//选地区 |
|
|
|
const area = [ |
|
|
|
{ |
|
|
|
value: '马来西亚', |
|
|
|
label: '马来西亚' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '新加坡', |
|
|
|
label: '新加坡' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '香港', |
|
|
|
label: '香港' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '泰国', |
|
|
|
label: '泰国' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '加拿大', |
|
|
|
label: '加拿大' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '越南HCM', |
|
|
|
label: '越南HCM' |
|
|
|
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系统' |
|
|
|
@ -406,84 +440,12 @@ const platform = [ |
|
|
|
label: '初始化金币' |
|
|
|
} |
|
|
|
] |
|
|
|
const TimeGet = ref('1') |
|
|
|
|
|
|
|
// 今天 |
|
|
|
const getT = function () { |
|
|
|
const today = new Date() |
|
|
|
const startDate = new Date( |
|
|
|
today.getFullYear(), |
|
|
|
today.getMonth(), |
|
|
|
today.getDate() |
|
|
|
) |
|
|
|
const endDate = new Date( |
|
|
|
today.getFullYear(), |
|
|
|
today.getMonth(), |
|
|
|
today.getDate() + 1 |
|
|
|
) |
|
|
|
putExcel.value.startDate = startDate |
|
|
|
putExcel.value.endDate = endDate |
|
|
|
console.log('putExcel', putExcel.value) |
|
|
|
} |
|
|
|
//3天 |
|
|
|
const get3 = function () { |
|
|
|
const today = new Date() |
|
|
|
const startDate = new Date( |
|
|
|
today.getFullYear(), |
|
|
|
today.getMonth(), |
|
|
|
today.getDate() - 2 |
|
|
|
) |
|
|
|
const endDate = new Date( |
|
|
|
today.getFullYear(), |
|
|
|
today.getMonth(), |
|
|
|
today.getDate() + 1 |
|
|
|
) |
|
|
|
putExcel.value.startDate = startDate |
|
|
|
putExcel.value.endDate = endDate |
|
|
|
console.log('putExcel', putExcel.value) |
|
|
|
} |
|
|
|
// 7天 |
|
|
|
const get7 = function () { |
|
|
|
const today = new Date() |
|
|
|
const startDate = new Date( |
|
|
|
today.getFullYear(), |
|
|
|
today.getMonth(), |
|
|
|
today.getDate() - 6 |
|
|
|
) |
|
|
|
const endDate = new Date( |
|
|
|
today.getFullYear(), |
|
|
|
today.getMonth(), |
|
|
|
today.getDate() + 1 |
|
|
|
) |
|
|
|
putExcel.value.startDate = startDate |
|
|
|
putExcel.value.endDate = endDate |
|
|
|
console.log('putExcel', putExcel.value) |
|
|
|
} |
|
|
|
// 30天 |
|
|
|
const get30 = function () { |
|
|
|
const today = new Date() |
|
|
|
const startDate = new Date( |
|
|
|
today.getFullYear(), |
|
|
|
today.getMonth() - 1, |
|
|
|
today.getDate() |
|
|
|
) |
|
|
|
const endDate = new Date( |
|
|
|
today.getFullYear(), |
|
|
|
today.getMonth(), |
|
|
|
today.getDate() + 1 |
|
|
|
) |
|
|
|
putExcel.value.startDate = startDate |
|
|
|
putExcel.value.endDate = endDate |
|
|
|
console.log('putExcel', putExcel.value) |
|
|
|
} |
|
|
|
|
|
|
|
// 新增排序字段和排序方式 |
|
|
|
const sortField = ref('') |
|
|
|
const sortOrder = ref('') |
|
|
|
// 处理排序事件 |
|
|
|
const handleSortChange = (column) => { |
|
|
|
console.log('排序字段：', column.prop) |
|
|
|
console.log('排序方式：', column.order) |
|
|
|
if (column.prop === 'rechargeCoin') { |
|
|
|
sortField.value = 'recharge_coin' |
|
|
|
} else if (column.prop === 'taskCoin') { |
|
|
|
@ -497,11 +459,14 @@ const handleSortChange = (column) => { |
|
|
|
} |
|
|
|
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC' |
|
|
|
} |
|
|
|
|
|
|
|
get() |
|
|
|
|
|
|
|
const handlePageSizeChange = function (val) { |
|
|
|
getObj.value.pageSize = val |
|
|
|
get() |
|
|
|
} |
|
|
|
|
|
|
|
const handleCurrentChange = function (val) { |
|
|
|
getObj.value.pageNum = val |
|
|
|
get() |
|
|
|
@ -509,73 +474,64 @@ const handleCurrentChange = function (val) { |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
<!-- 导出excel提前展示的信息面板 --> |
|
|
|
<el-dialog |
|
|
|
v-model="areyouright" |
|
|
|
title="" |
|
|
|
width="500" |
|
|
|
v-model="showExportInfoPanel" |
|
|
|
title="导出信息确认" |
|
|
|
width="400px" |
|
|
|
:close-on-click-modal="false" |
|
|
|
> |
|
|
|
<el-button type="success" @click="exportExcel()">导出</el-button> |
|
|
|
<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> |
|
|
|
|
|
|
|
<!-- 这是导出excel的弹窗 --> |
|
|
|
<!-- 导出进度弹窗 --> |
|
|
|
<el-dialog |
|
|
|
v-model="getPutEX" |
|
|
|
title="请选择导出条件" |
|
|
|
width="500" |
|
|
|
v-model="isExporting" |
|
|
|
title="正在导出" |
|
|
|
width="400px" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:show-close="false" |
|
|
|
> |
|
|
|
<template #footer> |
|
|
|
<el-form |
|
|
|
v-loading="loading" |
|
|
|
ref="ruleFormRef" |
|
|
|
style="max-width: 600px" |
|
|
|
:model="putExcel" |
|
|
|
:rules="rules" |
|
|
|
label-width="auto" |
|
|
|
class="demo-ruleForm" |
|
|
|
:size="formSize" |
|
|
|
status-icon |
|
|
|
> |
|
|
|
<el-form-item prop="activityName" label="精网号:"> |
|
|
|
<el-input |
|
|
|
v-model="putExcel.jwcode" |
|
|
|
placeholder="请输入精网号" |
|
|
|
style="width: 220px" |
|
|
|
<el-progress |
|
|
|
:percentage="exportProgress" |
|
|
|
:stroke-width="15" |
|
|
|
striped |
|
|
|
animated |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="所属地区：" |
|
|
|
><el-select |
|
|
|
v-model="putExcel.area" |
|
|
|
placeholder="请选择所属地区" |
|
|
|
style="width: 240px" |
|
|
|
clearable |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in area" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="更新时间："> |
|
|
|
<el-radio-group v-model="TimeGet"> |
|
|
|
<el-radio value="1" @click="getT()">今天</el-radio> |
|
|
|
<el-radio value="3" @click="get3()">近三天</el-radio> |
|
|
|
<el-radio value="7" @click="get7()">近一周</el-radio> |
|
|
|
<el-radio value="30" @click="get30()">近一个月</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
size="small" |
|
|
|
style="margin-left: 10px" |
|
|
|
@click="areyour()" |
|
|
|
>确定</el-button |
|
|
|
> |
|
|
|
</el-form> |
|
|
|
<div class="export-status"> |
|
|
|
已导出 {{ Math.round((exportProgress / 100) * total) }} 条 / 共 {{ total }} 条 |
|
|
|
</div> |
|
|
|
<template #footer> |
|
|
|
<el-button type="danger" @click="cancelExport">取消导出</el-button> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
@ -636,14 +592,15 @@ const handleCurrentChange = function (val) { |
|
|
|
<el-select |
|
|
|
v-model="detailY.area" |
|
|
|
placeholder="请选择所属地区" |
|
|
|
style="width: 200px" |
|
|
|
style="width: 240px" |
|
|
|
clearable |
|
|
|
:loading="isLoadingArea" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in area" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
:key="item.value || item" |
|
|
|
:label="item.label || item" |
|
|
|
:value="item.value || item" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
@ -658,12 +615,13 @@ const handleCurrentChange = function (val) { |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="起始时间" |
|
|
|
end-placeholder="结束时间" |
|
|
|
style="margin-right: 700px" |
|
|
|
style="margin-right: 50px" |
|
|
|
/> |
|
|
|
<el-button type="success" @click="getPutEX = true" |
|
|
|
>导出Excel表格</el-button |
|
|
|
> |
|
|
|
<el-button @click="reset()">重置</el-button> |
|
|
|
<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> |
|
|
|
@ -672,12 +630,6 @@ const handleCurrentChange = function (val) { |
|
|
|
<el-row> |
|
|
|
<el-col> |
|
|
|
<el-card> |
|
|
|
<!-- <div> |
|
|
|
现有金币：永久金币：{{ Math.abs(rechargeCoin) }}，免费金币：{{ |
|
|
|
Math.abs(freeCoin) |
|
|
|
}}，任务金币：{{ Math.abs(taskCoin) }} |
|
|
|
</div> --> |
|
|
|
<!-- 设置表格容器的高度和滚动样式 --> |
|
|
|
<div style="height: 584px; overflow-y: auto"> |
|
|
|
<el-table |
|
|
|
:data="tableData" |
|
|
|
@ -728,7 +680,7 @@ const handleCurrentChange = function (val) { |
|
|
|
prop="gold" |
|
|
|
label="更新数量" |
|
|
|
width="120" |
|
|
|
sortable="“custom”" |
|
|
|
sortable="custom" |
|
|
|
> |
|
|
|
<template #default="scope"> |
|
|
|
<span>{{ scope.row.gold / 100 }}</span> |
|
|
|
@ -737,23 +689,15 @@ const handleCurrentChange = function (val) { |
|
|
|
<el-table-column prop="updateType" label="更新类型" width="110"> |
|
|
|
<!-- 模板内容 --> |
|
|
|
<template #default="scope"> |
|
|
|
<span v-if="scope.row.updateType == 1"> |
|
|
|
<span>消费</span> |
|
|
|
</span> |
|
|
|
<span v-if="scope.row.updateType == 0"> |
|
|
|
<span>充值</span> |
|
|
|
</span> |
|
|
|
<span v-if="scope.row.updateType == 2"> |
|
|
|
<span>退款</span> |
|
|
|
</span> |
|
|
|
<span v-if="scope.row.updateType == 3"> |
|
|
|
<span>其他</span> |
|
|
|
</span> |
|
|
|
<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”" |
|
|
|
sortable="custom" |
|
|
|
label="永久金币" |
|
|
|
width="110" |
|
|
|
> |
|
|
|
@ -763,7 +707,7 @@ const handleCurrentChange = function (val) { |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="freeCoin" |
|
|
|
sortable="“custom”" |
|
|
|
sortable="custom" |
|
|
|
label="免费金币" |
|
|
|
width="110" |
|
|
|
> |
|
|
|
@ -771,10 +715,9 @@ const handleCurrentChange = function (val) { |
|
|
|
<span>{{ scope.row.freeCoin / 100 }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="taskCoin" |
|
|
|
sortable="“custom”" |
|
|
|
sortable="custom" |
|
|
|
label="任务金币" |
|
|
|
width="110" |
|
|
|
> |
|
|
|
@ -785,7 +728,7 @@ const handleCurrentChange = function (val) { |
|
|
|
<el-table-column prop="name" label="提交人" width="110" /> |
|
|
|
<el-table-column |
|
|
|
prop="createTime" |
|
|
|
sortable="“custom”" |
|
|
|
sortable="custom" |
|
|
|
label="更新时间" |
|
|
|
width="210" |
|
|
|
show-overflow-tooltip |
|
|
|
@ -799,8 +742,7 @@ const handleCurrentChange = function (val) { |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 分页 --> |
|
|
|
<!-- 分页 --> |
|
|
|
<!-- 此处分页 --> |
|
|
|
<div class="pagination" style="margin-top: 20px"> |
|
|
|
<el-pagination |
|
|
|
background |
|
|
|
@ -830,11 +772,24 @@ const handleCurrentChange = function (val) { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
/* .head-card-element { |
|
|
|
margin-right: 20px; |
|
|
|
} */ |
|
|
|
.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; |
|
|
|
} |
|
|
|
|
|
|
|
/* .head-card-btn { |
|
|
|
margin-left: auto; |
|
|
|
} */ |
|
|
|
</style> |
lihuilin
zry