|
|
|
@ -66,24 +66,27 @@ |
|
|
|
type="daterange" |
|
|
|
start-placeholder="开始日期" |
|
|
|
end-placeholder="结束日期" |
|
|
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
|
|
style="width: 240px" |
|
|
|
format="YYYY-MM-DD" |
|
|
|
value-format="YYYY-MM-DD" |
|
|
|
:unlinkPanels="true" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="primary" @click="search">查询</el-button> |
|
|
|
<el-button type="success" @click="reset(ruleFormRef)">重置</el-button> |
|
|
|
<el-button type="primary">导出excel</el-button> |
|
|
|
<el-button type="primary" @click="exportExcel">导出excel</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<div class="table-box"> |
|
|
|
<p>金豆总数：充值金豆总数：合计新币数</p> |
|
|
|
<p>金豆总数：充值金豆总数：合计金额数</p> |
|
|
|
<el-table |
|
|
|
:data="tableData" |
|
|
|
style="width: 100%" |
|
|
|
:default-sort="{ prop: 'createTime', order: 'descending' }" |
|
|
|
height="584px" |
|
|
|
@sort-change="handleSortChange" |
|
|
|
> |
|
|
|
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|
|
|
<template #default="scope"> |
|
|
|
@ -94,24 +97,7 @@ |
|
|
|
</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="type" 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> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="area" label="地区" width="120" /> |
|
|
|
<el-table-column prop="order" label="订单号" width="120" /> |
|
|
|
<el-table-column prop="been" label="金豆数量" width="120"> |
|
|
|
</el-table-column> |
|
|
|
@ -150,52 +136,106 @@ |
|
|
|
<el-pagination |
|
|
|
background |
|
|
|
:page-size="getObj.pageSize" |
|
|
|
layout="slot" |
|
|
|
:page-sizes="[5, 10, 20, 50, 100]" |
|
|
|
layout="total, sizes, prev, pager, next, jumper" |
|
|
|
:total="total" |
|
|
|
@size-change="handlePageSizeChange" |
|
|
|
@current-change="handleCurrentChange" |
|
|
|
> |
|
|
|
<div>共{{ total }}条,每页</div> |
|
|
|
<el-select |
|
|
|
v-model="getObj.pageSize" |
|
|
|
class="page-size" |
|
|
|
@change="getInit({})" |
|
|
|
style="width: 80px" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in [5, 10, 20, 50, 100]" |
|
|
|
:key="item" |
|
|
|
:label="item" |
|
|
|
:value="item" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
<div>条</div> |
|
|
|
</el-pagination> |
|
|
|
<el-pagination |
|
|
|
background |
|
|
|
layout="prev, pager, next,slot" |
|
|
|
:page-size="getObj.pageSize" |
|
|
|
:total="total" |
|
|
|
:current-page="getObj.pageNum" |
|
|
|
@current-change="getInit({})" |
|
|
|
> |
|
|
|
<div>跳至</div> |
|
|
|
<el-input v-model="getObj.pageNum" style="width: 40px" /> |
|
|
|
<div>页</div> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 这是导出excel的弹窗 --> |
|
|
|
<el-dialog |
|
|
|
v-model="dialogVisible" |
|
|
|
title="请选择导出条件" |
|
|
|
width="500" |
|
|
|
:close-on-click-modal="false" |
|
|
|
> |
|
|
|
<template #footer> |
|
|
|
<el-form |
|
|
|
ref="ruleFormRef" |
|
|
|
style="max-width: 600px" |
|
|
|
:model="excelData" |
|
|
|
:rules="rules" |
|
|
|
label-width="auto" |
|
|
|
class="demo-ruleForm" |
|
|
|
status-icon |
|
|
|
> |
|
|
|
<el-form-item prop="activityName" label="精网号:"> |
|
|
|
<el-input |
|
|
|
v-model="excelData.jwcode" |
|
|
|
placeholder="请输入精网号" |
|
|
|
style="width: 220px" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="所属地区：" |
|
|
|
><el-select |
|
|
|
v-model="excelData.area" |
|
|
|
placeholder="请选择所属地区" |
|
|
|
style="width: 240px" |
|
|
|
clearable |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in areaList" |
|
|
|
:key="item" |
|
|
|
:label="item" |
|
|
|
:value="item" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="更新时间："> |
|
|
|
<el-radio-group v-model="excelData.timegap"> |
|
|
|
<el-radio value="1">今天</el-radio> |
|
|
|
<el-radio value="3">近三天</el-radio> |
|
|
|
<el-radio value="7">近一周</el-radio> |
|
|
|
<el-radio value="30">近一个月</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
size="small" |
|
|
|
style="margin-left: 10px" |
|
|
|
@click="exportConfirm()" |
|
|
|
>确定</el-button |
|
|
|
> |
|
|
|
</el-form> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
</template> |
|
|
|
<script setup lang="ts"> |
|
|
|
import { ref } from 'vue' |
|
|
|
import { reactive, ref } from 'vue' |
|
|
|
import { FormInstance } from 'element-plus' |
|
|
|
import { ElMessage } from 'element-plus' |
|
|
|
import moment from 'moment' |
|
|
|
import API from '@/util/http' |
|
|
|
|
|
|
|
import { utils, write } from 'xlsx' |
|
|
|
import { saveAs } from 'file-saver' |
|
|
|
// 充值明细表格 |
|
|
|
const tableData = ref([]) |
|
|
|
//分页总条目 |
|
|
|
const total = ref(100) |
|
|
|
const dialogVisible = ref(false) |
|
|
|
const excelData = reactive({ |
|
|
|
jwcode: '', |
|
|
|
area: '', |
|
|
|
timegap: '' |
|
|
|
}) |
|
|
|
const areaList = ref<string[]>([]) |
|
|
|
const rules = ref({ |
|
|
|
jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }], |
|
|
|
area: [{ required: true, message: '请选择所属地区', trigger: 'change' }] |
|
|
|
}) |
|
|
|
const handlePageSizeChange = (val) => { |
|
|
|
getObj.value.pageSize = val |
|
|
|
getObj.value.pageNum = 1 |
|
|
|
getInit({}) |
|
|
|
} |
|
|
|
const handleCurrentChange = function (val) { |
|
|
|
getObj.value.pageNum = val |
|
|
|
getInit({}) |
|
|
|
} |
|
|
|
const platformList = ref<string[]>([ |
|
|
|
'stripe', |
|
|
|
'ios', |
|
|
|
@ -224,6 +264,35 @@ const getObj = ref({ |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 50 |
|
|
|
}) |
|
|
|
const exportExcel = function () { |
|
|
|
dialogVisible.value = true |
|
|
|
// console.log('导出excel', excelData) |
|
|
|
// API({ |
|
|
|
// url: '/dou/getYve', |
|
|
|
// method: 'post', |
|
|
|
// data: { |
|
|
|
// ...excelData |
|
|
|
// } |
|
|
|
// }) |
|
|
|
// ElMessage.success('导出成功') |
|
|
|
} |
|
|
|
const exportConfirm = function () { |
|
|
|
const data = [ |
|
|
|
{ 姓名: '张三', 年龄: 28, 城市: '北京' }, |
|
|
|
{ 姓名: '李四', 年龄: 32, 城市: '上海' }, |
|
|
|
{ 姓名: '王五', 年龄: 25, 城市: '广州' } |
|
|
|
] |
|
|
|
|
|
|
|
const worksheet = utils.json_to_sheet(data) |
|
|
|
const workbook = utils.book_new() |
|
|
|
utils.book_append_sheet(workbook, worksheet, 'Sheet1') |
|
|
|
|
|
|
|
const wbout = write(workbook, { bookType: 'xlsx', type: 'array' }) |
|
|
|
saveAs( |
|
|
|
new Blob([wbout], { type: 'application/octet-stream' }), |
|
|
|
'数据导出.xlsx' |
|
|
|
) |
|
|
|
} |
|
|
|
const ruleFormRef = ref<FormInstance>() |
|
|
|
//初始化 |
|
|
|
const getInit = async function ({ |
|
|
|
@ -247,16 +316,27 @@ const getInit = async function ({ |
|
|
|
} |
|
|
|
}) |
|
|
|
tableData.value = result.data.list |
|
|
|
console.log('tableData', tableData.value) |
|
|
|
total.value = result.data.total |
|
|
|
console.log('total', total.value) |
|
|
|
} catch (error) { |
|
|
|
console.log('请求失败', error) |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
} |
|
|
|
const handleSortChange = (column) => { |
|
|
|
const { prop, order } = column |
|
|
|
if (order === 'ascending') { |
|
|
|
getInit({ sortField: prop, sortOrder: 'ASC' }) |
|
|
|
} else if (order === 'descending') { |
|
|
|
getInit({ sortField: prop, sortOrder: 'DESC' }) |
|
|
|
} |
|
|
|
} |
|
|
|
// 搜索 |
|
|
|
const search = function () {} |
|
|
|
const search = function () { |
|
|
|
const [startTime, endTime] = detailY.value.createTime |
|
|
|
console.log(startTime, endTime) |
|
|
|
getObj.value.pageNum = 1 |
|
|
|
getInit({}) |
|
|
|
} |
|
|
|
// 重置 |
|
|
|
const reset = function (formEl) { |
|
|
|
formEl.resetFields() |
|
|
|
|
zhaoln
1 month ago