@ -1,14 +1,14 @@
< template >
< div class = "filter-box" >
< el -form >
< el -form -item label = "精网号" >
< el -form :model ="detailY" ref = "ruleFormRef" >
< el -form -item prop = "jwcode" label = "精网号" >
< el -input
v - model = "detailY.jwcode"
placeholder = "请输入精网号"
style = "width: 220px"
/ >
< / e l - f o r m - i t e m >
< el -form -item label = "地区" >
< el -form -item prop = "area" label = "地区" >
< el -select
v - model = "detailY.area"
placeholder = "请选择所属地区"
@ -16,22 +16,35 @@
clearable
>
< el -option
v - for = "item in area"
: key = "item.value "
: label = "item.label "
: value = "item.value "
v - for = "item in areaArray "
: key = "item"
: label = "item"
: value = "item"
/ >
< / e l - s e l e c t >
< / e l - f o r m - i t e m >
< el -form -item >
< el -button type = "primary" size = "small" @click ="getInit({})"
> 查询 < / e l - b u t t o n
>
< el -button type = "primary" size = "small" @click ="reset(ruleFormRef)"
> 重置 < / e l - b u t t o n
>
< / e l - f o r m - i t e m >
< / e l - f o r m >
< / div >
< div class = "table-box" >
< p > 金豆总数 ： 充值金豆总数 ： 合计新币数 < / p >
< p >
现有金豆 : & nbsp ; & nbsp ; 付费金豆 : { { getObj . jinbiBuy } } & nbsp ; & nbsp ; 免费金豆 : { {
getObj . jinbiFree
} } & nbsp ; & nbsp ; 历史消费 : { { getObj . jinbiCostTotal } }
< / p >
< el -table
: data = "tableData"
style = "width: 100%"
: default - sort = "{ prop: 'createTime', order: 'descending' }"
: default - sort = "{ prop: 'jinbiCostTotal ', order: 'descending' }"
height = "584px"
@ sort - change = "handleSortChange"
>
< el -table -column type = "index" label = "序号" width = "100px" fixed = "left" >
< template # default = "scope" >
@ -40,67 +53,21 @@
} } < / span >
< / template >
< / e l - t a b l e - c o l u m n >
< el -table -column fixed = "left" prop = "user name" label = "姓名" width = "150" / >
< el -table -column fixed = "left" prop = "nick name" 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 >
< / e l - t a b l e - c o l u m n >
< el -table -column prop = "order" label = "订单号" width = "120" / >
< el -table -column prop = "been" label = "金豆数量" width = "120" >
< template # default = "scope" >
< span > { { scope . row . gold / 100 } } < / span >
< / template >
< / e l - t a b l e - c o l u m n >
< el -table -column prop = "paybeen" label = "付费金豆" width = "120" >
< template # default = "scope" >
< span > { { scope . row . paybeen / 100 } } < / span >
< / template >
< el -table -column prop = "ipAddress" label = "所属地区" width = "120" / >
< el -table -column prop = "jinbi" label = "金豆数量" width = "120" >
< / e l - t a b l e - c o l u m n >
< el -table -column prop = "freebeen" label = "免费金豆" width = "120" >
< template # default = "scope" >
< span > { { scope . row . freebeen / 100 } } < / span >
< / template >
< el -table -column prop = "jinbiBuy" label = "付费金豆" width = "120" >
< / e l - t a b l e - c o l u m n >
< el -table -column prop = "count" label = "金额" > < / e l - t a b l e - c o l u m n >
< 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 prop = "jinbiFree" label = "免费金豆" width = "120" >
< / e l - t a b l e - c o l u m n >
< el -table -column prop = "notes" label = "备注" width = "210" > < / e l - t a b l e - c o l u m n >
< 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 >
< / e l - t a b l e - c o l u m n >
sortable
prop = "jinbiCostTotal"
label = "历史消费"
> < / e l - t a b l e - c o l u m n >
< / e l - t a b l e >
<!-- 分页 -- >
< div class = "pagination" >
@ -114,7 +81,7 @@
< el -select
v - model = "getObj.pageSize"
class = "page-size"
@ change = "get() "
@ change = "handlePageSizeChange "
style = "width: 80px"
>
< el -option
@ -132,334 +99,114 @@
: page - size = "getObj.pageSize"
: total = "total"
: current - page = "getObj.pageNum"
@ current - change = "get "
@ current - change = "handlePageChange "
>
< div > 跳至 < / div >
< el -input
v - model = "getObj.pageNum"
style = "width: 40px"
@ change = "checkNumber"
/ >
< el -input v -model = " getObj.pageNum " style = "width: 40px" / >
< div > 页 < / div >
< / e l - p a g i n a t i o n >
< / div >
< / div >
< / template >
< script setup lang = "ts" >
import { ref , reactive } from 'vue'
<!-- 这是导出excel的弹窗 -- >
< el -dialog
v - model = "getPutEX"
title = "请选择导出条件"
width = "500"
: close - on - click - modal = "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"
/ >
< / e l - f o r m - i t e m >
< 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"
/ >
< / e l - s e l e c t >
< / e l - f o r m - i t e m >
import type { FormInstance } from 'element-plus'
< 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 >
< / e l - r a d i o - g r o u p >
< / e l - f o r m - i t e m >
< el -button
type = "primary"
size = "small"
style = "margin-left: 10px"
@ click = "areyour()"
> 确定 < / e l - b u t t o n
>
< / e l - f o r m >
< / template >
< / e l - d i a l o g >
< el -dialog
v - model = "areyouright"
title = ""
width = "500"
: close - on - click - modal = "false"
>
< el -button type = "success" @click ="exportExcel()" > 导出 < / el -button >
< / e l - d i a l o g >
< / template >
< script setup >
import { ref , onMounted , reactive , computed } from 'vue'
import { ElMessage , ElMessageBox } from 'element-plus'
import moment from 'moment'
import API from '@/util/http'
import * as XLSX from 'xlsx'
/ / 这 是 获 取 用 户 信 息 的 接 口
const adminData = ref ( { } )
/ / 充 值 明 细 表 格
const tableData = ref ( [ ] )
/ / 分 页 总 条 目
const total = ref ( 100 )
/ / 搜 索 表 单 数 据
const detailY = ref ( { } )
const detailY = reactive ( { jwcode : '' , area : '' } )
const ruleFormRef = ref < FormInstance > ( )
let areaArray = ref < string [ ] > ( [ ] )
let getObj = ref ( {
pageNum : 1 ,
pageSize : 50 ,
jinbiBuy : 0 ,
jinbiCostTotal : 0 ,
jinbiFree : 0
} )
/ / 初 始 化
const get = async function ( val ) {
const getInit = async function ( {
sortField = '' ,
sortOrder = ''
} : {
sortField ? : string
sortOrder ? : string
} ) {
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 != null ) {
if ( getTime . value . startDate != '' && getTime . value . endDate != '' ) {
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 )
/ / 发 送 P O S T 请 求
const result = await API ( {
url : '/detailY' ,
method : 'post' ,
data : { ... getObj . value , detailY : { ... detailY . value } }
url : '/dou/getYve' ,
data : {
pageNum : getObj . value . pageNum ,
pageSize : getObj . value . pageSize ,
yve : {
jwcode : detailY . jwcode ,
ipAddress : detailY . area ,
sortField : sortField ,
sortOrder : sortOrder
}
}
} )
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 search = function ( ) { }
/ / 重 置
const reset = function ( ) { }
/ / 验 证 跳 转 输 入 框 的 数 字 是 否 合 法
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 ( )
const handleSortChange = ( column ) => {
const { prop , order } = column
if ( order === 'ascending' ) {
getInit ( { sortField : prop , sortOrder : 'ASC' } )
} else if ( order === 'descending' ) {
getInit ( { sortField : prop , sortOrder : 'DESC' } )
} else {
/ / 提 示
ElMessage ( {
type : 'error' ,
message : '请检查输入内容'
} )
}
} else {
/ / 提 示
ElMessage ( {
type : 'error' ,
message : '请检查输入内容'
} )
getInit ( { } )
}
}
/ / 挂 载
onMounted ( async function ( ) {
await getAdminData ( )
await get ( )
} )
/ / 这 是 导 出 e x c e l 表 格 的 方 法
/ / 导 出 E x c e l 的 方 法
/ / 定 义 字 段 映 射
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 handlePageChange = ( val : number ) : void => {
getObj . value . pageNum = val
getInit ( { } )
}
const headers = [
'精网号' ,
'地区' ,
'平台信息' ,
'数量' ,
'更新类型' ,
'永久金币' ,
'免费金币' ,
'任务金币' ,
'提交人' ,
'更新时间' ,
'用户名' ,
'id'
]
const exportExcel = ( ) => {
/ / 先 将 j s o n _ f i e l d s 应 用 到 数 据 上
const data = excelInfo . value . map ( json_fields )
const ws = XLSX . utils . aoa_to_sheet ( data )
/ / 添 加 表 头 到 工 作 表
XLSX . utils . sheet_add_aoa ( ws , [ headers ] , { origin : 'A1' } )
const wb = XLSX . utils . book_new ( )
XLSX . utils . book_append_sheet ( wb , ws , 'Sheet1' )
XLSX . writeFile ( wb , '客户金币明细.xlsx' )
const handlePageSizeChange = ( val ) => {
getObj . value . pageSize = val
getObj . value . pageNum = 1
getInit ( { } )
}
/ / 重 置
const reset = function ( formEl : FormInstance | undefined ) {
if ( ! formEl ) return
formEl . resetFields ( )
}
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
/ / 处 理 e x c e l I n f o 中 的 数 据
if ( Array . isArray ( excelInfo . value ) ) {
excelInfo . value . forEach ( ( item ) => {
if ( item . rechargeCoin ) {
item . rechargeCoin = item . rechargeCoin / 100
}
if ( item . freeCoin ) {
item . freeCoin = item . freeCoin / 100
}
if ( item . taskCoin ) {
item . taskCoin = item . taskCoin / 100
}
const getArea = async ( ) => {
const result = await API ( {
url : '/dou/getIp'
} )
console . log ( '获取地区' , result . data )
if ( result . code == 200 ) {
areaArray . value = result . data
}
areyouright . value = true
ElMessage ( {
type : 'success' ,
message : '查询成功'
}
const getCount = async ( ) => {
const result = await API ( {
url : '/dou/getYveTotal'
} )
loading . value = false
} catch ( error ) {
console . log ( '请求失败' , error )
loading . value = false
if ( result . code == 200 ) {
const { jinbiBuy , jinbiFree , jinbiCostTotal } = result . data
getObj . value . jinbiBuy = jinbiBuy
getObj . value . jinbiFree = jinbiFree
getObj . value . jinbiCostTotal = jinbiCostTotal
}
}
const areyouright = ref ( false )
/ / 选 地 区
const area = [
{
value : '马来西亚' ,
label : '马来西亚'
} ,
{
value : '新加坡' ,
label : '新加坡'
} ,
{
value : '香港' ,
label : '香港'
} ,
{
value : '泰国' ,
label : '泰国'
} ,
{
value : '加拿大' ,
label : '加拿大'
} ,
{
value : '越南HCM' ,
label : '越南HCM'
}
]
/ / 选 消 费 平 台
const platform = [
{
value : '4' ,
label : '金币系统'
} ,
{
value : '1' ,
label : 'ERP系统'
} ,
{
value : '2' ,
label : 'Homily Chart'
} ,
{
value : '3' ,
label : 'Homily Link'
} ,
{
value : '0' ,
label : '初始化金币'
}
]
const TimeGet = ref ( '1' )
getArea ( )
getCount ( )
getInit ( { } )
< / script >
< style scoped lang = "scss" >
. filter - box {
zhaoln
1 month ago
donghaolin