8 Commits
03be57ca36
...
49807ae9e3
| Author | SHA1 | Message | Date |
|---|---|---|---|
lihui
|
49807ae9e3 |
feat: 新增消耗（提交，数据正常提交，后端返回提示错误） 消耗明细（缺总计金币数） 汇率页面（完成）
|
4 days ago |
zry
|
e64b4a325c |
合并完成20250627
|
5 days ago |
|
zry
|
3ebc5d3483 |
充值、退款都换成了路由切换，权限改了一些，客户账户明细、余额基本无误
|
5 days ago |
|
lihui
|
64ee464b6e |
feat: 新增消耗 消耗明细80% 汇率页面（缺接口）
|
5 days ago |
|
lihui
|
fa25cb17df |
Merge branch 'refs/heads/lihui/feature-20250623144029-金币前端lihui' into milestone-20250623-金币前端
|
6 days ago |
|
zry
|
066e41fb05 |
客户账户金币管理完成，剩余导出后续在做
|
6 days ago |
|
zry
|
abfa33f730 |
搜索接口search erge branch 'zhangrenyuan/feature-20250623164058-金币前端' into milestone-20250623-金币前端
|
1 week ago |
|
zry
|
f78d583343 |
搜索接口->搜索接口search
|
1 week ago |
16 changed files with 5975 additions and 5177 deletions
-
5.env.development
-
24src/router/index.js
-
4src/util/request.js
-
742src/views/consume/addCoinConsume.vue
-
549src/views/consume/coinConsumeDetail.vue
-
610src/views/managerecharge/rate.vue
-
6src/views/permissions/index.vue
-
954src/views/permissions/permission.vue
-
1604src/views/recharge/addCoinRecharge.vue
-
2248src/views/recharge/coinRecharge.vue
-
770src/views/recharge/coinRechargeDetail.vue
-
546src/views/refund/addCoinRefund.vue
-
1345src/views/refund/coinRefund.vue
-
600src/views/refund/coinRefundDetail.vue
-
467src/views/usergold/clientCountBalance.vue
-
678src/views/usergold/clientCountDetail.vue
@ -0,0 +1,954 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed } from 'vue' |
|||
import ElementPlus from 'element-plus' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
import axios from 'axios' |
|||
import moment from 'moment' |
|||
import { ta } from 'element-plus/es/locales.mjs' |
|||
import { UserFilled } from '@element-plus/icons-vue' |
|||
import _ from 'lodash' |
|||
import request from '@/util/http' |
|||
|
|||
// 客户明细表格 |
|||
const tableData = ref([]) |
|||
// 搜索=========================================== |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
// 搜索admin |
|||
const admin = ref({}) |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10 |
|||
}) |
|||
// 新增用户权限弹窗 |
|||
const permissionAddVisible = ref(false) |
|||
// 编辑用户权限弹窗 |
|||
const permissionEditVisible = ref(false) |
|||
//选地区 |
|||
const market = ref([]) |
|||
// 选部门 |
|||
const postiton = ref([]) |
|||
// 新增用户权限对象 |
|||
const permissionAddObj = ref({}) |
|||
// 新增用户权限对象，机器码要实现存储多个，addMachineIdInput方法实现 |
|||
const addAdmin = ref({ |
|||
account: '', |
|||
name: '', |
|||
market: '', |
|||
permission: '', |
|||
postiton: '', |
|||
machineId: '', // 初始机器码输入框 |
|||
machineIds: [], // 动态添加的机器码输入框 |
|||
remark: '' |
|||
}) |
|||
const addMachineIdInput = function () { |
|||
if (addAdmin.value.machineIds.length >= 1) { |
|||
ElMessage.warning('设备数量已达上限') |
|||
return |
|||
} |
|||
addAdmin.value.machineIds.push('') |
|||
} |
|||
|
|||
// 编辑用户权限对象 |
|||
const permissionEditObj = ref({}) |
|||
// 删除权限对象 |
|||
const delObj = ref({}) |
|||
|
|||
// 搜索接口search |
|||
const get = async function (val) { |
|||
try { |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val |
|||
} |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/admin/search', |
|||
data: { |
|||
...getObj.value, |
|||
admin: { ...admin.value } |
|||
} |
|||
}) |
|||
tableData.value = result.data.list |
|||
console.log('tableData', tableData.value) |
|||
total.value = result.data.total |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 精网号去空格 |
|||
const trimJwCode = () => { |
|||
if (admin.value.account) { |
|||
admin.value.account = admin.value.account.replace(/\s/g, ''); |
|||
} |
|||
} |
|||
// 搜索 |
|||
const search = function () { |
|||
trimJwCode(); |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
// 重置 |
|||
const reset = function () { |
|||
admin.value = {} |
|||
// addAdmin.value = {}//用在新增表单的重置方法，但现在采用Ref.value.resetFields()方法，不需要reset |
|||
} |
|||
|
|||
// 获取地区 |
|||
const getArea = async function () { |
|||
try { |
|||
const result = await request({ |
|||
url: '/admin/market', |
|||
data: {} |
|||
}) |
|||
market.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// 获取部门 |
|||
const getStore = async function () { |
|||
try { |
|||
const result = await request({ |
|||
url: '/admin/postiton', |
|||
data: {} |
|||
}) |
|||
postiton.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
// 验证跳转输入框的数字是否合法 |
|||
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: '请检查输入内容' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// 打开新增用户权限弹窗 |
|||
const openPermissionAddVisible = function () { |
|||
permissionAddVisible.value = true |
|||
} |
|||
// 关闭新增用户权限弹窗，并刷新表单 |
|||
const closePermissionAddVisible = function () { |
|||
// reset() ，下面这个方法还可以重置表单验证（请输入...），reset只能重置输入，修改reset方法 |
|||
// 重置表单数据 |
|||
addAdmin.value = { |
|||
account: '', |
|||
name: '', |
|||
market: '', |
|||
permission: '', |
|||
postiton: '', |
|||
machineId: '', |
|||
machineIds: [], |
|||
remark: '' |
|||
}; |
|||
permissionAddVisible.value = false; |
|||
// 清除表单验证状态 |
|||
|
|||
Ref.value.resetFields(); |
|||
|
|||
} |
|||
// 新增用户权限初始化 |
|||
const permissionAddInit = function () { |
|||
permissionAddObj.value = {} |
|||
openPermissionAddVisible() |
|||
} |
|||
// 通过精网号查询没有权限的用户 |
|||
const getAdminByJwcodeWithoutPermission = async function () { |
|||
try { |
|||
const result = await request({ |
|||
url: '/admin/selectNo', |
|||
data: permissionAddObj.value |
|||
}) |
|||
if (result.code == 200) { |
|||
permissionAddObj.value = result.data[0] |
|||
ElMessage.success('精网号查询成功') |
|||
} else { |
|||
ElMessage.error(result.msg) |
|||
} |
|||
console.log('精网号查询没有权限的用户', permissionAddObj.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// 新增用户权限提交 |
|||
// const permissionAdd = async function () { |
|||
// try { |
|||
// if ( |
|||
// permissionAddObj.value.account == "" || |
|||
// permissionAddObj.value.account == null || |
|||
// permissionAddObj.value.name == "" || |
|||
// permissionAddObj.value.name == null |
|||
// ) { |
|||
// ElMessage.error("请选择要添加权限的用户"); |
|||
// return; |
|||
// } |
|||
// if ( |
|||
// permissionAddObj.value.permisson == "" || |
|||
// permissionAddObj.value.permission == null |
|||
// ) { |
|||
// ElMessage.error("请选择权限"); |
|||
// return; |
|||
// } |
|||
// console.log("新增用户权限提交", permissionAddObj.value); |
|||
|
|||
// const result = await request( |
|||
// { |
|||
// url: "/admin/update", |
|||
// data: permissionAddObj.value} |
|||
// ); |
|||
|
|||
// // 将响应结果存储到响应式数据中 |
|||
// console.log("请求成功", result); |
|||
|
|||
// ElMessage.success("添加成功"); |
|||
|
|||
// get(); |
|||
|
|||
// closePermissionAddVisible(); |
|||
// } catch (error) { |
|||
// console.log("新增用户权限失败", error); |
|||
// // 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
|
|||
// ElMessage.error("新增用户权限失败"); |
|||
// closePermissionAddVisible(); |
|||
// } |
|||
// }; |
|||
const permissionAdd = async function () { |
|||
Ref.value.validate(async (valid) => { |
|||
console.log('valid', valid) |
|||
if (valid) { |
|||
try { |
|||
addAdmin.value.adminFlag = 1 |
|||
addAdmin.value.status1 = 1 |
|||
const result = await request({ |
|||
url: '/admin/add', |
|||
data: addAdmin.value |
|||
}) |
|||
|
|||
if (result.code == 200) { |
|||
ElMessage.success('添加成功') |
|||
} else { |
|||
ElMessage.error(result.msg) |
|||
} |
|||
|
|||
addAdmin.value = {} |
|||
get() |
|||
|
|||
closePermissionAddVisible() |
|||
} catch (error) { |
|||
console.log('新增用户权限失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
|
|||
ElMessage.error('新增用户权限失败') |
|||
closePermissionAddVisible() |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
// 表格添加的条件 |
|||
const rules = reactive({ |
|||
account: [{ required: true, message: '请输入OA号', trigger: 'blur' }], |
|||
name: [{ required: true, message: '请输入用户名', trigger: 'blur' }], |
|||
postiton: [{ required: true, message: '请输入职称', trigger: 'blur' }], |
|||
machineId: [{ required: true, message: '请输入机器码', trigger: 'blur' }], |
|||
market: [{ required: true, message: '请选择所属地区', trigger: 'blur' }], |
|||
permission: [{ required: true, message: '请选择权限', trigger: 'blur' }] |
|||
}) |
|||
// 验证表单 |
|||
// 表单验证ref |
|||
const Ref = ref(null) |
|||
// 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次 |
|||
const throttledPermissionAdd = _.throttle(permissionAdd, 5000, { |
|||
trailing: false |
|||
}) |
|||
// 权限类别 |
|||
const permissionList = [ |
|||
{ |
|||
label: '总部', |
|||
value: '1' |
|||
}, |
|||
{ |
|||
label: '地区经理', |
|||
value: '5' |
|||
}, |
|||
{ |
|||
label: '财务', |
|||
value: '3' |
|||
}, |
|||
{ |
|||
label: '客服', |
|||
value: '2' |
|||
} |
|||
] |
|||
// 获取地区 |
|||
// 获取地区 |
|||
const areaList = ref([]) |
|||
const getAreas = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/recharge/user/search', |
|||
data: {} |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储地区信息 |
|||
areaList.value = result.data |
|||
console.log('地区', market.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
getAreas() |
|||
// 打开编辑用户权限弹窗 |
|||
const openPermissionEditVisible = function () { |
|||
permissionEditVisible.value = true |
|||
} |
|||
// 关闭编辑用户权限弹窗 |
|||
const closePermissionEditVisible = function () { |
|||
permissionEditVisible.value = false |
|||
} |
|||
// 编辑用户权限初始化 |
|||
const permissionEditInit = function (row) { |
|||
permissionEditObj.value = {} |
|||
permissionEditObj.value.account = row.account |
|||
permissionEditObj.value.name = row.name |
|||
permissionEditObj.value.market = row.market |
|||
permissionEditObj.value.postiton = row.postiton |
|||
permissionEditObj.value.permission = row.permission |
|||
console.log('编辑用户权限', permissionEditObj.value) |
|||
openPermissionEditVisible() |
|||
} |
|||
// 编辑用户权限提交 |
|||
const permissionEdit = async function () { |
|||
try { |
|||
const result = await request({ |
|||
url: '/admin/update', |
|||
data: permissionEditObj.value |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
|
|||
ElMessage.success('编辑用户权限成功') |
|||
|
|||
get() |
|||
|
|||
closePermissionEditVisible() |
|||
} catch (error) { |
|||
console.log('编辑用户权限失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
ElMessage.error('编辑用户权限失败') |
|||
|
|||
closePermissionEditVisible() |
|||
} |
|||
} |
|||
const throttledPermissionEdit = _.throttle(permissionEdit, 5000, { |
|||
trailing: false |
|||
}) |
|||
// 删除初始化 |
|||
const del = function (row) { |
|||
delObj.value = {} |
|||
console.log(row, '删除初始化') |
|||
delObj.value.account = row.account |
|||
} |
|||
// 删除权限 |
|||
const delConfirm = async function () { |
|||
try { |
|||
delObj.value.permission = '4' |
|||
console.log(delObj.value) |
|||
|
|||
const result = await request({ |
|||
url: '/admin/update', |
|||
data: delObj.value |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
|
|||
ElMessage.success('删除权限成功') |
|||
delObj.value = {} |
|||
get() |
|||
} catch (error) { |
|||
console.log('删除权限失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
ElMessage.error('删除权限失败') |
|||
} |
|||
} |
|||
// 禁用启用用户权限 |
|||
const editStatus = async function (row) { |
|||
try { |
|||
console.log(row) |
|||
|
|||
permissionEditObj.value = {} |
|||
permissionEditObj.value.account = row.account |
|||
permissionEditObj.value.status1 = row.status1 |
|||
|
|||
console.log('修改用户权限状态', permissionEditObj.value) |
|||
|
|||
const result = await request({ |
|||
url: '/admin/update', |
|||
data: permissionEditObj.value |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
|
|||
ElMessage.success( |
|||
permissionEditObj.value.status1 == 1 ? '启用成功' : '禁用成功' |
|||
) |
|||
permissionEditObj.value = {} |
|||
get() |
|||
} catch (error) { |
|||
console.log('修改用户权限失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await get() |
|||
await getArea() |
|||
await getStore() |
|||
}) |
|||
const handlePageSizeChange = function (val) { |
|||
getObj.value.pageSize = val |
|||
get() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
get() |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<div class="head-card"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">OA号：</el-text> |
|||
<el-input |
|||
v-model="admin.account" |
|||
style="width: 240px" |
|||
placeholder="请输入OA号" |
|||
clearable |
|||
/> |
|||
</div> |
|||
<div class="head-card-element" style="margin-left: 50px"> |
|||
<el-text class="mx-1" size="large">所属地区：</el-text> |
|||
<el-select |
|||
v-model="admin.market" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in market" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="head-card-element" style="margin-left: 50px"> |
|||
<el-text class="mx-1" size="large">职位名称：</el-text> |
|||
<el-select |
|||
v-model="admin.postiton" |
|||
placeholder="请选择职位名称" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in postiton" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="head-card-btn"> |
|||
<el-button type="success" @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="search()">查询</el-button> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<!-- 添加 --> |
|||
<div class="add-item"> |
|||
<el-button |
|||
style="color: #048efb; border: 1px solid #048efb" |
|||
@click="permissionAddInit()" |
|||
>新增用户</el-button |
|||
> |
|||
</div> |
|||
|
|||
<div> |
|||
<el-table :data="tableData" style="width: 100%"> |
|||
<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 prop="account" label="OA号" /> |
|||
<el-table-column prop="name" label="姓名" /> |
|||
<el-table-column prop="market" label="所属地区" /> |
|||
<el-table-column prop="postiton" label="职位" /> |
|||
<el-table-column prop="permission" label="部门权限"> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.permission === '1'"> 总部管理员 </span> |
|||
<span v-if="scope.row.permission === '2'"> 分部财务 </span> |
|||
<span v-if="scope.row.permission === '3'"> 分部客服 </span> |
|||
<span v-if="scope.row.permission === '5'"> 分部经理 </span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="remark" label="备注" /> |
|||
<el-table-column prop="operation" label="操作" width="200px"> |
|||
<template #default="scope"> |
|||
<el-button |
|||
type="warning" |
|||
text |
|||
@click="permissionEditInit(scope.row)" |
|||
:disabled="scope.row.status1 === 0" |
|||
> |
|||
修改权限 |
|||
</el-button> |
|||
<el-popconfirm |
|||
title="确定将此用户删除吗？" |
|||
@confirm="delConfirm" |
|||
> |
|||
<template #reference> |
|||
<el-button |
|||
type="danger" |
|||
text |
|||
@click="del(scope.row)" |
|||
:disabled="scope.row.status1 === 0" |
|||
> |
|||
删除 |
|||
</el-button> |
|||
</template> |
|||
<template #actions="{ confirm, cancel }"> |
|||
<el-button size="small" @click="cancel">取消</el-button> |
|||
<el-button type="primary" size="small" @click="confirm"> |
|||
确定 |
|||
</el-button> |
|||
</template> |
|||
</el-popconfirm> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="status1" label="状态"> |
|||
<template #default="scope"> |
|||
<el-switch |
|||
v-model="scope.row.status1" |
|||
:active-value="1" |
|||
:inactive-value="0" |
|||
size="large" |
|||
@change="editStatus(scope.row)" |
|||
style=" |
|||
--el-switch-on-color: #13ce66; |
|||
--el-switch-off-color: #ff4949; |
|||
" |
|||
active-text="启用" |
|||
inactive-text="禁用" |
|||
inline-prompt |
|||
/> |
|||
</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> |
|||
<!-- 新增用户权限 --> |
|||
<el-dialog |
|||
v-model="permissionAddVisible" |
|||
title="新增用户权限" |
|||
width="800px" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<template #footer> |
|||
<!-- 居中显示 --> |
|||
|
|||
<el-form |
|||
ref="Ref" |
|||
:rules="rules" |
|||
:model="addAdmin" |
|||
label-width="auto" |
|||
style="max-width: 600px; align-items: center" |
|||
> |
|||
<el-form-item prop="account" label="OA号:"> |
|||
<el-input |
|||
v-model="addAdmin.account" |
|||
placeholder="请输入OA号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="name" label="用户名:"> |
|||
<el-input |
|||
v-model="addAdmin.name" |
|||
placeholder="请输入用户名" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="market" label="所属地区:"> |
|||
<el-select |
|||
v-model="addAdmin.market" |
|||
placeholder="请选择所属地区" |
|||
style="width: 220px" |
|||
@change="() => Ref.value.validateField('market')" |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="permission" label="权限类别:"> |
|||
<el-select |
|||
v-model="addAdmin.permission" |
|||
placeholder="请选择权限" |
|||
style="width: 220px" |
|||
@change="() => Ref.value.validateField('permission')" |
|||
> |
|||
<el-option |
|||
v-for="item in permissionList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="postiton" label="职位:"> |
|||
<el-input |
|||
v-model="addAdmin.postiton" |
|||
placeholder="请输入职称" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="machineId" label="机器码:"> |
|||
<div style="display: flex; align-items: center; flex-wrap: wrap;"> |
|||
<el-input |
|||
v-model="addAdmin.machineId" |
|||
placeholder="请输入机器码" |
|||
style="width: 220px; margin-right: 10px;" |
|||
/> |
|||
<el-button type="primary" @click="addMachineIdInput">添加</el-button> |
|||
<!-- 动态添加的机器码输入框 --> |
|||
<div v-for="(item, index) in addAdmin.machineIds" :key="index" style="margin-left: 10px;"> |
|||
<el-input |
|||
v-model="addAdmin.machineIds[index]" |
|||
placeholder="请输入机器码" |
|||
style="width: 180px; margin-right: 10px;" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item prop="remark" label="备注"> |
|||
<el-input |
|||
v-model="addAdmin.remark" |
|||
style="width: 300px" |
|||
:rows="2" |
|||
maxlength="100" |
|||
show-word-limit |
|||
type="textarea" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<div> |
|||
<el-button @click="closePermissionAddVisible()">取消</el-button> |
|||
<el-button type="primary" @click="throttledPermissionAdd()"> |
|||
提交 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
<!-- 这是新增用户权限弹窗 |
|||
<el-dialog |
|||
v-model="permissionAddVisible" |
|||
title="新增用户权限" |
|||
width="800px" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<div style="display: flex; margin: 20px 0px 20px 0px"> |
|||
<span class="permissionVisible" style="margin-right: 10px">精网号:</span> |
|||
<el-input |
|||
placeholder="请输入精网号" |
|||
v-model="permissionAddObj.account" |
|||
style="width: 240px; margin-right: 10px" |
|||
clearable |
|||
></el-input> |
|||
<el-button type="primary" @click="getAdminByJwcodeWithoutPermission()" |
|||
>查询</el-button |
|||
> |
|||
</div> |
|||
|
|||
<el-descriptions |
|||
class="margin-top" |
|||
:column="2" |
|||
:size="size" |
|||
border |
|||
label-width="200px" |
|||
> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<UserFilled /> |
|||
</el-icon> |
|||
员工精网号 |
|||
</div> |
|||
</template> |
|||
{{ permissionAddObj.account }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<User /> |
|||
</el-icon> |
|||
员工姓名 |
|||
</div> |
|||
</template> |
|||
{{ permissionAddObj.name }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon :style="iconStyle"> |
|||
<location /> |
|||
</el-icon> |
|||
所属地区 |
|||
</div> |
|||
</template> |
|||
{{ permissionAddObj.market }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<OfficeBuilding /> |
|||
</el-icon> |
|||
部门 |
|||
</div> |
|||
</template> |
|||
{{ permissionAddObj.postiton }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
|
|||
<el-divider> |
|||
<el-icon><star-filled /></el-icon> |
|||
</el-divider> |
|||
<div> |
|||
<span class="permissionVisible" style="margin-right: 20px" |
|||
>权限设置:</span |
|||
> |
|||
<el-radio-group v-model="permissionAddObj.permission"> |
|||
<el-radio value="1" border>总部管理员</el-radio> |
|||
<el-radio value="5" border>分部经理</el-radio> |
|||
<el-radio value="2" border>分部财务</el-radio> |
|||
<el-radio value="3" border>分部客服</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<template #footer> |
|||
<div> |
|||
<el-button @click="closePermissionAddVisible()">取消</el-button> |
|||
<el-button type="primary" @click="throttledPermissionAdd()"> |
|||
提交 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> --> |
|||
|
|||
<!-- 这是编辑用户权限弹窗 --> |
|||
<el-dialog |
|||
v-model="permissionEditVisible" |
|||
title="编辑用户权限" |
|||
width="800px" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<el-descriptions |
|||
class="margin-top" |
|||
:column="2" |
|||
:size="size" |
|||
border |
|||
label-width="200px" |
|||
> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<UserFilled /> |
|||
</el-icon> |
|||
员工精网号 |
|||
</div> |
|||
</template> |
|||
{{ permissionEditObj.account }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<User /> |
|||
</el-icon> |
|||
员工姓名 |
|||
</div> |
|||
</template> |
|||
{{ permissionEditObj.name }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon :style="iconStyle"> |
|||
<location /> |
|||
</el-icon> |
|||
所属地区 |
|||
</div> |
|||
</template> |
|||
{{ permissionEditObj.market }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<OfficeBuilding /> |
|||
</el-icon> |
|||
部门 |
|||
</div> |
|||
</template> |
|||
{{ permissionEditObj.postiton }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
|
|||
<el-divider> |
|||
<el-icon><star-filled /></el-icon> |
|||
</el-divider> |
|||
<div> |
|||
<span class="permissionVisible" style="margin-right: 20px" |
|||
>权限设置:</span |
|||
> |
|||
<el-radio-group v-model="permissionEditObj.permission"> |
|||
<el-radio value="1" border>总部管理员</el-radio> |
|||
<el-radio value="5" border>分部经理</el-radio> |
|||
<el-radio value="2" border>分部财务</el-radio> |
|||
<el-radio value="3" border>分部客服</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<template #footer> |
|||
<div> |
|||
<el-button @click="closePermissionEditVisible()">取消</el-button> |
|||
<el-button type="primary" @click="throttledPermissionEdit()"> |
|||
提交 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
|
|||
.permissionVisible { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
|
|||
/* 新增样式让弹窗内容居中 */ |
|||
.el-dialog__body { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
.el-dialog__footer { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
1604
src/views/recharge/addCoinRecharge.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2248
src/views/recharge/coinRecharge.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,770 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed } from 'vue' |
|||
import ElementPlus from 'element-plus' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
import { AiFillRead } from 'vue-icons-plus/ai' |
|||
import axios from 'axios' |
|||
import moment from 'moment' |
|||
import API from '@/util/http' |
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}) |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API({ url: '/admin/userinfo', data: {} }) |
|||
adminData.value = result |
|||
rechargeVo.value.adminId = adminData.value.adminId |
|||
console.log('请求成功', result) |
|||
console.log('用户信息', adminData.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 变量 |
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
// 搜索=========================================== |
|||
// 搜索recharge |
|||
const rechargeVo = ref({ |
|||
adminId: adminData.value.adminId |
|||
}) |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
// 搜索对象时间 |
|||
const getTime = ref([]) |
|||
// 搜索活动列表 |
|||
const activity = ref([]) |
|||
// 所有信息 |
|||
const allData = ref([]) |
|||
// 搜索地区列表 |
|||
const area = ref([]) |
|||
//标签页默认高亮选项 |
|||
const activeName = ref('all') |
|||
// 支付方式选项 |
|||
const payWay = [ |
|||
{ |
|||
value: '微信', |
|||
label: '微信' |
|||
}, |
|||
{ |
|||
value: '支付宝', |
|||
label: '支付宝' |
|||
}, |
|||
{ |
|||
value: '银联', |
|||
label: '银联' |
|||
}, |
|||
{ |
|||
value: '信用卡', |
|||
label: '信用卡' |
|||
}, |
|||
{ |
|||
value: '借记卡', |
|||
label: '借记卡' |
|||
}, |
|||
{ |
|||
value: '现金充值', |
|||
label: '现金充值' |
|||
} |
|||
] |
|||
// 删除========================================================== |
|||
// 删除对象 |
|||
const delObj = ref({}) |
|||
|
|||
// //表格高度 |
|||
// const tableHeight = computed(function () { |
|||
// return (getObj.value.pageSize + 2) * 60 + "px"; |
|||
// }); |
|||
|
|||
// 方法 |
|||
// 合计数存储 |
|||
const trueGold = ref(0) |
|||
const trueRGold = ref(0) |
|||
const trueFGold = ref(0) |
|||
//全部 |
|||
const totalmoney = ref(0) |
|||
const totalRcoin = ref(0) |
|||
const totalFcoin = ref(0) |
|||
//待审核 |
|||
const pendingGold = ref(0) |
|||
const pendingRGold = ref(0) |
|||
const pendingFGold = ref(0) |
|||
// 已通过金币数 |
|||
const approvedGold = ref(0) |
|||
const approvedRGold = ref(0) |
|||
const approvedFGold = ref(0) |
|||
// 已驳回金币数 |
|||
const rejectedGold = ref(0) |
|||
const rejectedRGold = ref(0) |
|||
const rejectedFGold = ref(0) |
|||
// 搜索=========================================================================== |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 地区赋值 |
|||
if (adminData.value.area === '泰国') { |
|||
rechargeVo.value.areas = ['泰国', '越南'] |
|||
} else if (adminData.value.area !== '总部') { |
|||
rechargeVo.value.area = adminData.value.area |
|||
} |
|||
|
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val |
|||
} |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value != null) { |
|||
if (getTime.value.startDate != '' && getTime.value.endDate != '') { |
|||
rechargeVo.value.startDate = getTime.value[0] |
|||
rechargeVo.value.endDate = getTime.value[1] |
|||
} |
|||
} else { |
|||
rechargeVo.value.startDate = '' |
|||
rechargeVo.value.endDate = '' |
|||
} |
|||
// 搜索参数赋值 |
|||
rechargeVo.value.sortField = sortField.value |
|||
rechargeVo.value.sortOrder = sortOrder.value |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/recharge/recharge', |
|||
data: { ...getObj.value, rechargeVo: { ...rechargeVo.value } } |
|||
}) |
|||
// 复制一份 rechargeVo.value 并移除排序字段和排序方式 |
|||
const detailWithoutSort = ref({ |
|||
area: rechargeVo.value.area, |
|||
adminId: rechargeVo.value.adminId, |
|||
startDate: rechargeVo.value.startDate, |
|||
endDate: rechargeVo.value.endDate |
|||
}) |
|||
const result2 = await API({ |
|||
url: '/recharge/recharge/RechargeA', |
|||
data: { |
|||
...detailWithoutSort.value |
|||
} |
|||
}) |
|||
// 检查 result2 是否为空 |
|||
if (!result2 || !result2.data || result2.data.length === 0) { |
|||
totalmoney.value = 0 |
|||
totalRcoin.value = 0 |
|||
totalFcoin.value = 0 |
|||
} |
|||
if (result2.data) { |
|||
result2.data.forEach((item) => { |
|||
switch (item.auditStatus) { |
|||
case '待审核': |
|||
// 若 item.raudit 为空则赋值为 0 |
|||
// 若 item.sumRaudit 为空则赋值为 0 |
|||
pendingGold.value = item.sumRaudit || 0 |
|||
pendingRGold.value = item.sumRaudit1 || 0 |
|||
pendingFGold.value = item.sumRaudit2 || 0 |
|||
break |
|||
case '已通过': |
|||
approvedGold.value = item.sumRaudit || 0 |
|||
approvedRGold.value = item.sumRaudit1 || 0 |
|||
approvedFGold.value = item.sumRaudit2 || 0 |
|||
break |
|||
case '已驳回': |
|||
rejectedGold.value = item.sumRaudit || 0 |
|||
rejectedRGold.value = item.sumRaudit1 || 0 |
|||
rejectedFGold.value = item.sumRaudit2 || 0 |
|||
break |
|||
} |
|||
}) |
|||
} |
|||
trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value |
|||
trueRGold.value = |
|||
pendingRGold.value + approvedRGold.value + rejectedRGold.value |
|||
trueFGold.value = |
|||
pendingFGold.value + approvedFGold.value + rejectedFGold.value |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储表格数据 |
|||
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 () { |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
// 重置 |
|||
const reset = function () { |
|||
delete rechargeVo.value.activityId |
|||
delete rechargeVo.value.payWay |
|||
delete rechargeVo.value.area |
|||
delete rechargeVo.value.startDate |
|||
delete rechargeVo.value.endDate |
|||
delete sortField.value |
|||
delete sortOrder.value |
|||
getTime.value = {} |
|||
} |
|||
// 今天 |
|||
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 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
const handlePageSizeChange = function (val) { |
|||
getObj.value.pageSize = val |
|||
get() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
get() |
|||
} |
|||
// 昨天 |
|||
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 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 近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 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
//全部充值明细 |
|||
const adminAll = function () { |
|||
console.log('adminAll') |
|||
rechargeVo.value.status = '' |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
//待审核充值明细 |
|||
const adminWait = async function () { |
|||
rechargeVo.value.status = 0 |
|||
getObj.value.pageNum = 1 |
|||
await get() |
|||
console.log('adminWait') |
|||
|
|||
trueGold.value = pendingGold.value |
|||
trueRGold.value = pendingRGold.value |
|||
trueFGold.value = pendingFGold.value |
|||
} |
|||
//已通过充值明细 |
|||
const adminPass = async function () { |
|||
rechargeVo.value.status = 1 |
|||
getObj.value.pageNum = 1 |
|||
await get() |
|||
trueGold.value = approvedGold.value |
|||
trueRGold.value = approvedRGold.value |
|||
trueFGold.value = approvedFGold.value |
|||
console.log('adminPass') |
|||
} |
|||
//已驳回充值明细 |
|||
const adminReject = async function () { |
|||
rechargeVo.value.status = 2 |
|||
getObj.value.pageNum = 1 |
|||
await get() |
|||
console.log('adminReject') |
|||
trueGold.value = rejectedGold.value |
|||
trueRGold.value = rejectedRGold.value |
|||
trueFGold.value = rejectedFGold.value |
|||
} |
|||
//点击标签页 |
|||
const handleClick = function (tab, event) { |
|||
if (tab.props.name === 'all') { |
|||
adminAll() |
|||
} else if (tab.props.name === 'wait') { |
|||
adminWait() |
|||
} else if (tab.props.name === 'pass') { |
|||
adminPass() |
|||
} else if (tab.props.name === 'reject') { |
|||
adminReject() |
|||
} |
|||
} |
|||
// 获取活动名称 |
|||
const getActivity = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ url: '/recharge/activity/select', data: {} }) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储表格数据 |
|||
activity.value = result.data |
|||
console.log('activity', activity.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// 获取地区 |
|||
// 获取地区 |
|||
const getArea = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ url: 'recharge/user/search', data: {} }) |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储地区信息 |
|||
area.value = result.data |
|||
console.log('地区', area.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// 删除================================= |
|||
// 点击删除按钮 |
|||
const del = function (row) { |
|||
delObj.value.rechargeId = row.rechargeId |
|||
console.log('delObj1', delObj.value) |
|||
} |
|||
// 确认删除按钮 |
|||
const delConfirm = async function () { |
|||
try { |
|||
console.log('delObj2', delObj.value) |
|||
const result = await API({ |
|||
url: '/recharge/recharge/edit', |
|||
data: delObj.value |
|||
}) |
|||
console.log('删除成功', result) |
|||
// 刷新表格数据 |
|||
get() |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
// 验证跳转输入框的数字是否合法 |
|||
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 getAdminData() |
|||
await get() |
|||
await getActivity() |
|||
await getArea() |
|||
}) |
|||
// 新增排序字段和排序方式 |
|||
const sortField = ref('') |
|||
const sortOrder = ref('') |
|||
// 处理排序事件 |
|||
const handleSortChange = (column) => { |
|||
|
|||
console.log('排序字段：', column.prop) |
|||
console.log('排序方式：', column.order) |
|||
if (column.prop === 'paidGold') { |
|||
sortField.value = 'paid_gold' |
|||
} else if (column.prop === 'freeGold') { |
|||
sortField.value = 'free_gold' |
|||
} else if (column.prop === 'rechargeTime') { |
|||
sortField.value = 'recharge_time' |
|||
} else if (column.prop === 'createTime') { |
|||
sortField.value = 'create_time' |
|||
} else if(column.prop === 'rechargeGold'){ |
|||
sortField.value = 'recharge_gold' |
|||
} |
|||
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC' |
|||
console.log('传递给后端的排序字段：', sortField.value) |
|||
console.log('传递给后端的排序方式：', sortOrder.value) |
|||
get() |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px;margin-top: 10px"> |
|||
<el-row style="margin-bottom: 10px"> |
|||
<el-col :span="5"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">精网号：</el-text> |
|||
<el-input v-model="rechargeVo.jwcode" placeholder="请输入精网号" style="width: 150px" 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="rechargeVo.activityId" placeholder="请选择活动名称" style="width: 180px" |
|||
clearable> |
|||
<el-option v-for="item in activity" :key="item.activityId" :label="item.activityName" |
|||
:value="item.activityId" /> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<el-col :span="6"> |
|||
<div class="head-card-element" v-if="adminData.area == '总部'"> |
|||
<el-text class="mx-1" size="large">所属地区：</el-text> |
|||
<el-select v-model="rechargeVo.area" placeholder="请选择所属地区" style="width: 180px" clearable> |
|||
<el-option v-for="item in area" :key="item" :label="item" :value="item" /> |
|||
</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="rechargeVo.rechargeWay" placeholder="请选择支付方式" style="width: 180px" clearable> |
|||
<el-option v-for="item in rechargeWay" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="21"> |
|||
<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="结束时间" |
|||
/> |
|||
<el-button style="margin-left: 10px" @click="getToday()" |
|||
>今</el-button |
|||
> |
|||
<el-button @click="getYesterday()">昨</el-button> |
|||
<el-button @click="get7Days()">近7天</el-button> |
|||
<!-- </div> |
|||
</el-col> |
|||
<el-col :span="3"> |
|||
<div class="head-card-btn"> --> |
|||
<el-button type="success" @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="search()">查询</el-button> |
|||
<el-button type="primary" @click="exportExcel()">导出Excel</el-button> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<div> |
|||
充值金额：{{ trueRGold.toFixed(2) }}新币，永久金币：{{ |
|||
trueRGold.toFixed(2) |
|||
}}金币，免费金币：{{ trueFGold }}金币 |
|||
</div> |
|||
<!-- 设置表格容器的高度和滚动样式 --> |
|||
<div style="height: 520px; overflow-y: auto;margin-top: 10px;"> |
|||
<el-table |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
height="520px" |
|||
@sort-change="handleSortChange" |
|||
> |
|||
<el-table-column |
|||
type="index" |
|||
label="序号" |
|||
width="80px" |
|||
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="80px" |
|||
/> |
|||
<el-table-column |
|||
fixed="left" |
|||
prop="jwcode" |
|||
label="精网号" |
|||
width="80px" |
|||
/> |
|||
<el-table-column prop="area" label="所属地区" width="100px" /> |
|||
<el-table-column |
|||
prop="activityName" |
|||
label="活动名称" |
|||
width="100px" |
|||
/> |
|||
<el-table-column prop="" label="货币名称" width="110px" /> |
|||
<el-table-column |
|||
prop="paidGold" |
|||
sortable="custom" |
|||
label="充值金额" |
|||
width="110px" |
|||
/> |
|||
<el-table-column |
|||
prop="paidGold" |
|||
label="永久金币" |
|||
sortable="custom" |
|||
width="110px" |
|||
/> |
|||
<el-table-column |
|||
prop="freeGold" |
|||
label="免费金币" |
|||
sortable="custom" |
|||
width="110px" |
|||
/> |
|||
<el-table-column |
|||
prop="rechargeWay" |
|||
label="充值方式" |
|||
width="100px" |
|||
/> |
|||
<el-table-column prop="payWay" label="支付方式" width="100px" /> |
|||
<el-table-column |
|||
prop="remark" |
|||
label="备注" |
|||
width="150px" |
|||
show-overflow-tooltip |
|||
/> |
|||
|
|||
<!-- <el-table-column |
|||
prop="rechargeVoucher" |
|||
label="支付凭证" |
|||
width="150px" |
|||
> |
|||
<template #default="scope"> |
|||
<el-image |
|||
:preview-src-list="[scope.row.rechargeVoucher]" |
|||
preview-teleported="true" |
|||
:src="scope.row.rechargeVoucher" |
|||
alt="凭证" |
|||
style="width: 50px; height: 50px" |
|||
/> |
|||
</template> |
|||
</el-table-column> --> |
|||
<el-table-column prop="name" label="提交人" width="100px" /> |
|||
<!-- <el-table-column prop="status" label="状态" width="100px"> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.status === 1"> |
|||
<div class="status"> |
|||
<span class="green-dot"></span> |
|||
<span>已通过</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 0"> |
|||
<div class="status"> |
|||
<span class="grey-dot"></span> |
|||
<span>待审核</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 2"> |
|||
<div class="status"> |
|||
<span class="red-dot"></span> |
|||
<span>已驳回</span> |
|||
</div> |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="reson" |
|||
label="驳回理由" |
|||
width="200px" |
|||
show-overflow-tooltip |
|||
/> --> |
|||
<el-table-column |
|||
prop="rechargeTime" |
|||
sortable |
|||
label="充值时间" |
|||
width="200px" |
|||
> |
|||
<template #default="scope"> |
|||
{{ |
|||
moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') |
|||
}} |
|||
</template> |
|||
</el-table-column> |
|||
<!-- <el-table-column |
|||
prop="createTime" |
|||
sortable="custom" |
|||
label="提交时间" |
|||
width="200px" |
|||
/> |
|||
<el-table-column |
|||
fixed="right" |
|||
prop="operation" |
|||
label="操作" |
|||
width="150px" |
|||
> |
|||
<template #default="scope"> |
|||
<el-popconfirm |
|||
title="确定将此条活动删除吗？" |
|||
@confirm="delConfirm" |
|||
> |
|||
<template #reference> |
|||
<el-button type="primary" text @click="del(scope.row)"> |
|||
删除 |
|||
</el-button> |
|||
</template> |
|||
<template #actions="{ confirm, cancel }"> |
|||
<el-button size="small" @click="cancel">取消</el-button> |
|||
<el-button type="primary" size="small" @click="confirm"> |
|||
确定 |
|||
</el-button> |
|||
</template> |
|||
</el-popconfirm> |
|||
</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> |
|||
|
|||
<!-- 编辑弹窗 --> |
|||
<el-dialog |
|||
v-model="editRechargeVisible" |
|||
title="新增活动" |
|||
width="500" |
|||
:before-close="closeEditRechargeVisible" |
|||
> |
|||
<template #footer> |
|||
<el-form :model="editObj" label-width="auto" style="max-width: 600px"> |
|||
<el-form-item label="活动名称:"> |
|||
<el-input |
|||
v-model="addObj.activityName" |
|||
placeholder="请输入活动名称" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="免费金币:"> |
|||
<el-radio-group v-model="addObj.freeGold"> |
|||
<el-radio value="0">无赠送</el-radio> |
|||
<el-radio value="1">有赠送</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="免费金币兑换比:"> |
|||
<el-input |
|||
v-model="addObj.rechargeRatio" |
|||
placeholder="请输入" |
|||
style="width: 80px" |
|||
/>：1 |
|||
<div style="color: grey">(提示：当前规则每10新币可兑换1免费金币)</div> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="开始时间:"> |
|||
<el-time-picker v-model="addObj.startTime" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="结束时间:"> |
|||
<el-time-picker v-model="addObj.endTime" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="添加人:"> |
|||
<el-input v-model="addObj.adminName" disabled style="width: 220px" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<div class="dialog-footer"> |
|||
<el-button @click="closeAddActivityVisible">取消</el-button> |
|||
<el-button type="primary" @click="closeAddActivityVisible"> |
|||
提交 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,546 @@ |
|||
<script setup> |
|||
import { onMounted, reactive } from 'vue' |
|||
import { ref, computed, watch } from 'vue' |
|||
import { ElMessage } from 'element-plus' |
|||
import { Plus } from '@element-plus/icons-vue' |
|||
import axios from 'axios' |
|||
import { ElMessageBox } from 'element-plus' |
|||
import API from '@/util/http' |
|||
import moment from 'moment' |
|||
// import _ from 'lodash' |
|||
|
|||
const addRe = ref({ |
|||
typeR: '0' |
|||
}) |
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}) |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API({ url: '/admin/userinfo', data: {} }) |
|||
adminData.value = result |
|||
addRefund.value.adminId = adminData.value.adminId |
|||
console.log('请求成功', result) |
|||
console.log('用户信息', user.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 精网号去空格 |
|||
const trimJwCode = () => { |
|||
if (addRefund.value.jwcode) { |
|||
addRefund.value.jwcode = addRefund.value.jwcode.replace(/\s/g, ''); |
|||
} |
|||
} |
|||
// 这是添加退款信息的表单 |
|||
const addRefund = ref({ |
|||
updateType: '3', |
|||
allCoin: 0, |
|||
orderCode: '', |
|||
refundGoods: '', |
|||
freeCoin: 0, |
|||
rechargeCoin: 0, |
|||
taskCoin: 0 |
|||
}) |
|||
// 取消按钮 |
|||
const cancel = function () { |
|||
addRefund.value = {} |
|||
addRefund.value.updateType = '3' |
|||
addRefund.value.rechargeCoin = 0 |
|||
addRefund.value.freeCoin = 0 |
|||
addRefund.value.taskCoin = 0 |
|||
addRefund.value.allCoin = 0 |
|||
addRe.value.typeR = 0 |
|||
addRefund.value.adminId = adminData.value.adminId |
|||
} |
|||
// 这是添加退款信息的接口 |
|||
const add = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ url: '/refund/add', data: addRefund.value }) |
|||
if (result.code === 0) { |
|||
ElMessage.error(result.msg) |
|||
return |
|||
} |
|||
console.log('请求成功', result) |
|||
ElMessage.success('添加成功') |
|||
// 重置表单 |
|||
addRefund.value = {} |
|||
addRefund.value.adminId = adminData.value.adminId |
|||
addRefund.value.updateType = '3' |
|||
addRefund.value.allCoin = 0 |
|||
addRefund.value.orderCode = '' |
|||
addRefund.value.refundGoods = '' |
|||
addRefund.value.freeCoin = 0 |
|||
addRefund.value.rechargeCoin = 0 |
|||
addRefund.value.taskCoin = 0 |
|||
addRefund.value.typeR = 0 |
|||
user.value = {} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
const addBefore = () => { |
|||
Ref.value.validate(async (valid) => { |
|||
if (valid) { |
|||
ElMessageBox.confirm('确认添加？') |
|||
.then(() => { |
|||
add() |
|||
console.log('添加成功') |
|||
addRefund.value.allCoin = 0 |
|||
;(addRefund.value.freeCoin = 0), |
|||
(addRefund.value.rechargeCoin = 0), |
|||
(addRefund.value.taskCoin = 0), |
|||
(addRefund.value = {}) |
|||
}) |
|||
.catch(() => { |
|||
console.log('取消添加') |
|||
}) |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 表单验证 |
|||
// 开始时间改变时，重新验证结束时间 |
|||
const Ref = ref(null) |
|||
const startChange = (val) => {} |
|||
|
|||
const rules = reactive({ |
|||
jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }], |
|||
refundType: [{ required: true, message: '请选择退款类型', trigger: 'blur' }], |
|||
orderCode: [{ required: true, message: '请选择退款商品', trigger: 'blur' }], |
|||
taskCoin: [{ required: true, message: '请输入任务金币', trigger: 'blur' }], |
|||
freeCoin: [{ required: true, message: '请输入免费金币', trigger: 'blur' }], |
|||
rechargeCoin: [ |
|||
{ required: true, message: '请输入永久金币', trigger: 'blur' } |
|||
], |
|||
allCoin: [ |
|||
{ required: true, message: '请选择付款方式', trigger: 'blur' }, |
|||
{ |
|||
validator: (rule, value) => { |
|||
if (value === 0) { |
|||
return Promise.reject(new Error('总金币不能为0')) |
|||
} |
|||
return Promise.resolve() |
|||
}, |
|||
trigger: 'blur' |
|||
} |
|||
] |
|||
}) |
|||
|
|||
// 查找客户信息的方法 |
|||
const user = ref({ |
|||
firstRechargeTime: '' |
|||
}) |
|||
const getUser = async function (jwcode) { |
|||
trimJwCode(); |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: 'http://192.168.8.247:8081/user/selectUser', |
|||
data: { |
|||
jwcode: addRefund.value.jwcode, |
|||
area: adminData.value.area |
|||
} |
|||
}) |
|||
console.log('请求成功', result) |
|||
|
|||
//在此处错误逻辑的提示做了注释，在后续商品查询接口返回错误时，提示信息会显示在弹窗中 |
|||
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('查询失败，请检查精网号是否正确') |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
const calculatedAllGold = computed(() => { |
|||
const sum = |
|||
Number(addRefund.value.freeCoin) + |
|||
Number(addRefund.value.rechargeCoin) + |
|||
Number(addRefund.value.taskCoin) |
|||
return !isNaN(sum) ? sum : 0 |
|||
}) |
|||
|
|||
watch(calculatedAllGold, (newVal) => { |
|||
addRefund.value.allCoin = newVal |
|||
}) |
|||
|
|||
const AAA = computed(() => { |
|||
return addRefund.value.jwcode |
|||
}) |
|||
|
|||
watch(AAA, (newVal) => {}) |
|||
|
|||
// 退款类型选项 |
|||
const refundType = [ |
|||
{ |
|||
value: '退款商品', |
|||
label: '退款商品' |
|||
} |
|||
] |
|||
|
|||
// 根据精网号查询商品 |
|||
// 查什么？？？？？ |
|||
const goods = ref([]) |
|||
const getGoods = async function (jwcode) { |
|||
trimJwCode(); |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/consume/getDeatil', |
|||
data: { |
|||
jwcode: addRefund.value.jwcode, |
|||
area: adminData.value.area |
|||
} |
|||
}) |
|||
console.log('请求成功', result) |
|||
|
|||
if (result.code === 0) { |
|||
ElMessage.error(result.msg) |
|||
} else { |
|||
// 存储表格数据 |
|||
goods.value = result.data |
|||
console.log('用户信息', goods.value) |
|||
ElMessage.success(result.msg) |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
ElMessage.error('查询失败，请检查精网号是否正确') |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
const calculatedRechargeGoods = computed(() => { |
|||
return ( |
|||
+addRefund.value.freeCoin + |
|||
+addRefund.value.rechargeCoin + |
|||
+addRefund.value.taskCoin |
|||
) |
|||
}) |
|||
watch(calculatedRechargeGoods, (newVal) => { |
|||
addRefund.value.allCoin = newVal |
|||
}) |
|||
watch(calculatedRechargeGoods, (newVal) => { |
|||
addRefund.value.allCoin = newVal |
|||
console.log('计算的总金币', newVal) |
|||
}) |
|||
|
|||
// 绑定两个数据 |
|||
|
|||
// 这是根据订单号查询消费信息的方法 |
|||
const getProductByOrderCode = async function (item) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/refund/searchByOrderCode?orderCode=' + item, |
|||
data: {} |
|||
}) |
|||
addRefund.value.contactId = result.data.detailyId |
|||
addRefund.value.refundGoods = result.data.productName |
|||
addRefund.value.orderCode = result.data.orderCode |
|||
addRefund.value.taskCoin = (result.data.taskCoin * -1) / 100 |
|||
addRefund.value.freeCoin = (result.data.freeCoin * -1) / 100 |
|||
addRefund.value.rechargeCoin = (result.data.rechargeCoin * -1) / 100 |
|||
addRefund.value.allCoin = |
|||
(result.data.taskCoin * -1 + |
|||
result.data.freeCoin * -1 + |
|||
result.data.rechargeCoin * -1) / |
|||
100 |
|||
console.log('请求成功', addRefund.value) |
|||
if (result.data.code === 0) { |
|||
ElMessage.error(result.data.msg) |
|||
} else { |
|||
ElMessage.success('选择成功') |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
ElMessage.error('查询失败，请检查精网号是否正确') |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
const handleSelectionChange = (value) => { |
|||
getProductByOrderCode(value) |
|||
console.log('选择的订单号', value) |
|||
const selectedItem = goods.value.find((item) => item.detailId === value) |
|||
} |
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await getAdminData() |
|||
}) |
|||
</script> |
|||
|
|||
<template> |
|||
<div > |
|||
|
|||
<el-form |
|||
:model="addRefund" |
|||
ref="Ref" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
style="max-width: 750px" |
|||
class="form-style" |
|||
> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input |
|||
v-model="addRefund.jwcode" |
|||
style="width: 220px" |
|||
@change="getGoods(addRefund.jwcode)" |
|||
/> |
|||
<el-button |
|||
type="primary" |
|||
@click="getUser(addRefund.jwcode)" |
|||
style="margin-left: 20px" |
|||
>查询</el-button |
|||
> |
|||
</el-form-item> |
|||
<el-form-item prop="refundType" label="退款类型"> |
|||
<el-select |
|||
v-model="addRefund.refundType" |
|||
placeholder="请选择" |
|||
style="width: 300px" |
|||
> |
|||
<el-option |
|||
v-for="item in refundType" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="orderCode" label="商品名"> |
|||
<el-select |
|||
v-model="addRefund.orderCode" |
|||
placeholder="请选择" |
|||
style="width: 300px" |
|||
@change="handleSelectionChange" |
|||
> |
|||
<el-option |
|||
v-for="item in goods" |
|||
:key="item.value" |
|||
:label="item.productName + item.orderCode" |
|||
:value="item.orderCode" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="typeR" label="退款方式:"> |
|||
<el-radio-group v-model="addRe.typeR"> |
|||
<el-radio value="0" @change="addRe.typeR = '0'">全部退款</el-radio> |
|||
<el-radio value="1">部分退款</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<div style="display: flex; align-items: center"> |
|||
<el-form-item prop="rechargeCoin" label="永久金币" style="float: left"> |
|||
<el-input |
|||
v-model="addRefund.rechargeCoin" |
|||
style="width: 100px" |
|||
:disabled="addRe.typeR === '0' ? true : false" |
|||
> |
|||
</el-input> |
|||
<p>个</p> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="freeCoin" |
|||
label="免费金币" |
|||
style="margin-left: -20px; float: left" |
|||
> |
|||
<el-input |
|||
v-model="addRefund.freeCoin" |
|||
style="float: left; width: 100px" |
|||
:disabled="addRe.typeR === '0' ? true : false" |
|||
/> |
|||
<p>个</p> |
|||
</el-form-item> |
|||
<el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px"> |
|||
<el-input |
|||
v-model="addRefund.taskCoin" |
|||
style="float: left; width: 100px" |
|||
:disabled="addRe.typeR === '0' ? true : false" |
|||
/> |
|||
<p>个</p> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item prop="allCoin" label="退款金币总数"> |
|||
<el-input disabled v-model="addRefund.allCoin" style="width: 100px"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="remark" label="备注"> |
|||
<el-input |
|||
v-model="addRefund.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="cancel()" 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: 1000px" |
|||
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>{{ adminData.name }}</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> |
|||
</div> |
|||
</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> |
|||
1345
src/views/refund/coinRefund.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,600 @@ |
|||
<script setup> |
|||
// 这是退款明细页面 |
|||
import {ref, onMounted, reactive, computed} from 'vue' |
|||
import ElementPlus from 'element-plus' |
|||
import {AiFillRead} from 'vue-icons-plus/ai' |
|||
import {ElMessage, ElMessageBox} from 'element-plus' |
|||
import axios from 'axios' |
|||
import moment from 'moment' |
|||
import API from '@/util/http' |
|||
import request from '@/util/http' |
|||
|
|||
// 精网号去空格 |
|||
const trimJwCode = () => { |
|||
if (refundUser.value.jwcode) { |
|||
// 去除所有空格，并尝试转换为整数 |
|||
const trimmed = refundUser.value.jwcode.toString().replace(/\s/g, ''); |
|||
const numeric = Number(trimmed); |
|||
|
|||
// 如果转换为数字成功，保存为数字，否则提示错误 |
|||
if (!isNaN(numeric)) { |
|||
refundUser.value.jwcode = numeric; |
|||
} else { |
|||
ElMessage.error("精网号格式不正确，请输入数字"); |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 变量 |
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}) |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API({url: '/admin/userinfo', data: {}}) |
|||
|
|||
adminData.value = result |
|||
console.log('请求成功', result) |
|||
console.log('用户信息', adminData.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
// 搜索====================================== |
|||
// 搜索（筛选）明细 表单 |
|||
const refundUser = ref({ |
|||
jwcode: null, |
|||
refundModel: "", |
|||
market: "", |
|||
startTime: "", |
|||
endTime: "", |
|||
goodsName: "" |
|||
}) |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
// 搜索对象时间 |
|||
const getTime = ref([]) |
|||
// 搜索地区列表 |
|||
const market = ref([]) |
|||
|
|||
// 退款类型 |
|||
const consumeType = [ |
|||
{ |
|||
value: '退款商品', |
|||
label: '退款商品' |
|||
} |
|||
] |
|||
|
|||
|
|||
// 方法 |
|||
// 统计合计数 |
|||
|
|||
// 待审核各种类金币数 |
|||
|
|||
// 待审核金币数 |
|||
// 已通过各种类金币数 |
|||
|
|||
// 已通过金币数 |
|||
|
|||
// 已驳回各种类金币数 |
|||
|
|||
// 已驳回金币数 |
|||
|
|||
// 搜索============================================================== |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
|
|||
try { |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val |
|||
} |
|||
|
|||
// todo 时间格式化 |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value != null) { |
|||
if (getTime.value.startDate != '' && getTime.value.endDate != '') { |
|||
refundUser.value.startDate = getTime.value[0] |
|||
refundUser.value.endDate = getTime.value[1] |
|||
} |
|||
} else { |
|||
refundUser.value.startDate = '' |
|||
refundUser.value.endDate = '' |
|||
} |
|||
|
|||
// todo 排序后端还没有弄 |
|||
// 添加排序字段和排序方式到请求参数 |
|||
refundUser.value.sortField = sortField.value |
|||
refundUser.value.sortOrder = sortOrder.value |
|||
|
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: 'http://192.168.8.247:8081/refund/selectBy', |
|||
data: { |
|||
pageNum: getObj.value.pageNum, |
|||
pageSize: getObj.value.pageSize, |
|||
refundUser: refundUser.value |
|||
} |
|||
}) |
|||
// 复制一份 refundUser.value 并移除排序字段和排序方式 |
|||
const detailWithoutSort = {...refundUser.value} |
|||
delete detailWithoutSort.sortField |
|||
delete detailWithoutSort.sortOrder |
|||
|
|||
const result2 = await API({ |
|||
url: 'http://192.168.8.247:8081/refund/statsGold', |
|||
data: { |
|||
...detailWithoutSort |
|||
} |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
|
|||
console.log("") |
|||
// 存储表格数据 |
|||
tableData.value = result.data.list |
|||
console.log('tableData', tableData.value) |
|||
// 存储分页总数 |
|||
total.value = result.data.total |
|||
console.log('total', total.value) |
|||
// 调用分类的方法 |
|||
handleClick() |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// 搜索 |
|||
const search = function () { |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
// 重置 |
|||
const reset = function () { |
|||
refundUser.value = {} |
|||
sortField.value = '' |
|||
sortOrder.value = '' |
|||
getTime.value = {} |
|||
} |
|||
// 今天 |
|||
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 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 昨天 |
|||
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 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 近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 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
|
|||
|
|||
|
|||
//点击标签页 |
|||
// 设置tab.props.name默认为all |
|||
const tabName = ref('all') |
|||
const handleClick = function (tab, event) { |
|||
if (tab.props.name === 'all') { |
|||
adminAll() |
|||
} else if (tab.props.name === 'wait') { |
|||
adminWait() |
|||
} else if (tab.props.name === 'pass') { |
|||
adminPass() |
|||
} else if (tab.props.name === 'reject') { |
|||
adminReject() |
|||
} |
|||
} |
|||
|
|||
// 获取地区列表的方法 |
|||
const getMarket = async function () { |
|||
try { |
|||
// 发送请求获取地区列表 |
|||
const result = await request({ |
|||
// todo 接口不对 |
|||
// url: '/general/market', |
|||
url: 'http://192.168.8.247:8081/general/market', // todo 换成实际接口地址 |
|||
data: {} |
|||
}) |
|||
console.log('请求地区列表成功', result) |
|||
// 存储地区数据 |
|||
market.value = result.data |
|||
console.log('地区数据', market.value) |
|||
} catch (error) { |
|||
console.log('请求地区列表失败', error) |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '获取地区列表失败，请稍后重试' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
|
|||
// 查询商品的接口 |
|||
const goods = ref([]) |
|||
const getGoods = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: 'http://192.168.8.247:8081/general/goods', |
|||
data: {} |
|||
}) |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功product', result) |
|||
// 存储全部数据 |
|||
goods.value = result.data |
|||
console.log('goods 数据', goods.value) // 修改日志输出 |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
|
|||
// 验证跳转输入框的数字是否合法 |
|||
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 getAdminData() |
|||
await get() |
|||
await getMarket() |
|||
await getGoods() |
|||
}) |
|||
// 新增排序字段和排序方式 |
|||
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') { |
|||
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 === 'auditTime') { |
|||
sortField.value = 'audit_time' |
|||
} |
|||
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() |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px;margin-top:10px"> |
|||
<el-row style="margin-bottom: 10px"> |
|||
<el-col :span="5"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">精网号：</el-text> |
|||
|
|||
<el-input |
|||
v-model="refundUser.jwcode" |
|||
placeholder="请输入精网号" |
|||
size="large" |
|||
style="width: 150px" |
|||
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="refundUser.refundType" |
|||
placeholder="请选择退款类型" |
|||
size="large" |
|||
style="width: 180px" |
|||
clearable |
|||
> |
|||
<!-- todo 这需要改--> |
|||
<el-option |
|||
v-for="item in consumeType" |
|||
: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="refundUser.refundGoods" |
|||
placeholder="请选择退款商品" |
|||
size="large" |
|||
style="width: 180px" |
|||
clearable |
|||
|
|||
> |
|||
<el-option |
|||
v-for="item in goods" |
|||
:key="item.value" |
|||
:label="item.name" |
|||
:value="item.name" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="head-card-element" v-if="adminData.area == '总部'"> |
|||
<el-text class="mx-1" size="large">所属地区：</el-text> |
|||
<el-select |
|||
v-model="refundUser.market" |
|||
placeholder="请选择所属地区" |
|||
size="large" |
|||
style="width: 180px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in market" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="21"> |
|||
<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="结束时间" |
|||
/> |
|||
<el-button style="margin-left: 10px" @click="getToday()" |
|||
>今 |
|||
</el-button |
|||
> |
|||
<el-button @click="getYesterday()">昨</el-button> |
|||
<el-button @click="get7Days()">近7天</el-button> |
|||
|
|||
<el-button type="success" @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="search()">查询</el-button> |
|||
<el-button type="primary" @click="exportExcel">导出Excel</el-button> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<!-- <el-tabs |
|||
v-model="activeName" |
|||
type="card" |
|||
class="demo-tabs" |
|||
@tab-click="handleClick" |
|||
> |
|||
<el-tab-pane label="全部" name="all"></el-tab-pane> |
|||
<el-tab-pane label="待审核" name="wait"></el-tab-pane> |
|||
<el-tab-pane label="已通过" name="pass"></el-tab-pane> |
|||
<el-tab-pane label="已驳回" name="reject"></el-tab-pane> |
|||
</el-tabs> --> |
|||
|
|||
<div> |
|||
退款金币总数：{{ Math.abs(trueGold) }}，永久金币：{{ |
|||
Math.abs(truePgold) |
|||
}}，免费金币：{{ Math.abs(trueFgold) }}，任务金币：{{ |
|||
Math.abs(trueTgold) |
|||
}} |
|||
</div> |
|||
<!-- 设置表格容器的高度和滚动样式 --> |
|||
<div style="height: 520px; overflow-y: auto;margin-top:10px"> |
|||
<el-table |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
@sort-change="handleSortChange" |
|||
height="520px" |
|||
> |
|||
<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 |
|||
prop="name" |
|||
label="姓名" |
|||
fixed="left" |
|||
width="100px" |
|||
/> |
|||
<el-table-column |
|||
prop="jwcode" |
|||
label="精网号" |
|||
fixed="left" |
|||
width="110px" |
|||
/> |
|||
<el-table-column prop="market" label="所属地区" width="110px"/> |
|||
<el-table-column prop="refundGoods" label="商品名称" width="100px"/> |
|||
<el-table-column prop="refundType" label="退款类型" width="100px"/> |
|||
|
|||
<el-table-column label="退款金币总数" width="110px"> |
|||
<template #default="scope"> |
|||
{{ |
|||
scope.row.rechargeCoin + |
|||
scope.row.freeCoin + |
|||
scope.row.taskCoin |
|||
}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="typeR" label="退款方式" width="110px"/> |
|||
<el-table-column |
|||
prop="rechargeCoin" |
|||
label="永久金币" |
|||
width="110px" |
|||
sortable="“custom”" |
|||
/> |
|||
<el-table-column |
|||
prop="freeCoin" |
|||
sortable="“custom”" |
|||
label="免费金币" |
|||
width="110px" |
|||
/> |
|||
<el-table-column |
|||
prop="taskCoin" |
|||
sortable="“custom”" |
|||
label="任务金币" |
|||
width="110px" |
|||
/> |
|||
<!-- 修改prop为taskGold --> |
|||
<el-table-column |
|||
prop="remark" |
|||
label="退款原因" |
|||
width="160px" |
|||
show-overflow-tooltip |
|||
/> |
|||
<el-table-column prop="adminName" label="提交人" width="100px"/> |
|||
|
|||
<el-table-column |
|||
prop="createTime" |
|||
sortable="“custom”" |
|||
label="提交时间" |
|||
width="180px" |
|||
> |
|||
<template #default="scope"> |
|||
{{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }} |
|||
</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" |
|||
@jump="checkPageNumber" |
|||
></el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
|
|||
.pagination { |
|||
display: flex; |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
|||
@ -1,3 +1,466 @@ |
|||
<script setup> |
|||
// 这是客户金币余额页面 |
|||
import { ref, onMounted, reactive, computed } from 'vue' |
|||
import ElementPlus from 'element-plus' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
import axios from 'axios' |
|||
import moment from 'moment' |
|||
import { ta } from 'element-plus/es/locales.mjs' |
|||
import API from '@/util/http' |
|||
|
|||
// 变量 |
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}) |
|||
const dialogVisible = ref(false) |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API({ url: '/admin/userinfo', data: {} }) |
|||
adminData.value = result |
|||
// console.log('请求成功', result) |
|||
console.log('管理员用户信息', adminData.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
|
|||
// 定义加载状态，获取地区数据 |
|||
const isLoadingmarket = ref(false); |
|||
const market = ref([]) |
|||
const getmarket = async () => { |
|||
isLoadingmarket.value = true; |
|||
try { |
|||
const result = await API({ |
|||
url: 'http://192.168.8.220:8081/general/market' |
|||
}); |
|||
console.log('获取地区数据成功',result) |
|||
// 假设后端返回的是字符串数组，转换为 { value, label } 格式 |
|||
if (Array.isArray(result.data) && typeof result.data[0] === 'string') { |
|||
market.value = result.data.map(item => ({ value: item, label: item })); |
|||
} else { |
|||
market.value = result.data; |
|||
} |
|||
} catch (error) { |
|||
console.error('获取地区数据失败:', error); |
|||
ElMessage.error('获取地区数据失败，请稍后重试'); |
|||
// 可以提供默认数据 |
|||
market.value = []; |
|||
} finally { |
|||
isLoadingmarket.value = false; |
|||
} |
|||
}; |
|||
|
|||
|
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
|
|||
// 新增金币总数变量 |
|||
const goldtotal = ref(0) |
|||
|
|||
// 计算用户各金币总数的不分页对象 |
|||
const tableAllData = ref([]) |
|||
// 各金币字段 |
|||
const permanentGold = ref(0) // 修改为 currentPermanentGold 对应字段 |
|||
const freeJuneGold = ref(0) // 修改为 currentFreeJune 对应字段 |
|||
const freeDecemberGold = ref(0) // 修改为 currentFreeDecember 对应字段 |
|||
const taskGold = ref(0) // 修改为 currentTaskGold 对应字段 |
|||
const freeGold = ref(0) // 计算免费金币总数 |
|||
|
|||
|
|||
|
|||
//客户消费记录 |
|||
const tableCountData = ref([]) |
|||
const userInfo = ref({}) |
|||
|
|||
|
|||
|
|||
// 搜索=========================================== |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
// 搜索对象时间 |
|||
const getTime = ref([]) |
|||
// 搜索User |
|||
const user = ref({}) |
|||
// 不分页的搜索对象 |
|||
const getAllObj = ref({}) |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
// 新增排序字段和排序方式 |
|||
const sortField = ref('') |
|||
const sortOrder = ref('') |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
// 方法 |
|||
// 搜索=========================================================================== |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val |
|||
} |
|||
|
|||
// 添加排序字段和排序方式到请求参数 |
|||
user.value.sortField = sortField.value |
|||
user.value.sortOrder = sortOrder.value |
|||
console.log('搜索参数', getObj.value) |
|||
|
|||
// 发送POST请求 |
|||
|
|||
const requestData = { ...getObj.value, user: { ...user.value } };//控制台打印请求的参数 |
|||
console.log('最终请求参数', JSON.stringify(requestData, null, 2)); // 打印格式化后的请求参数 |
|||
|
|||
//console.log('请求参数', requestData); |
|||
|
|||
const result = await API({ |
|||
url: 'http://192.168.8.220:8081/goldDetail/getGold', |
|||
method: 'post', |
|||
data: { ...getObj.value, user: { ...user.value } } |
|||
}) |
|||
console.log('响应数据', result) |
|||
tableData.value = result.data.list |
|||
total.value = result.data.total |
|||
|
|||
|
|||
// 获取合计数 |
|||
const resultGoldTotal = await API({ |
|||
url: 'http://192.168.8.220:8081/goldDetail/goldTotal', |
|||
data: { |
|||
...getAllObj.value, |
|||
user: { ...user.value } |
|||
} |
|||
}) |
|||
// 判断精网号是否存在，假设精网号不存在时 result.data.list 为空数组 |
|||
if (result.data.list.length === 0) { |
|||
// 将表格数据设置为空数组 |
|||
tableData.value = [] |
|||
// 将合计数设置为 0 |
|||
permanentGold.value = 0 |
|||
freeJuneGold.value = 0 |
|||
freeDecemberGold.value = 0 |
|||
taskGold.value = 0 |
|||
goldtotal.value = 0 |
|||
|
|||
// // 新增金币总数变量 |
|||
// const goldtotal = ref(0) |
|||
|
|||
// 分页总数设置为 0 |
|||
total.value = 0 |
|||
// ElMessage.warning('精网号不存在，请检查输入') |
|||
} else { |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('总数据请求成功', result) |
|||
// 存储表格数据 |
|||
tableData.value = result.data.list |
|||
console.log('tableData', tableData.value) |
|||
|
|||
// 从接口返回数据中获取各金币数值 |
|||
if (resultGoldTotal.data) { |
|||
permanentGold.value = parseFloat(resultGoldTotal.data.permanentGold.toFixed(2)) |
|||
freeGold.value = parseFloat(resultGoldTotal.data.freeGold.toFixed(2)) |
|||
taskGold.value = parseFloat(resultGoldTotal.data.taskGold.toFixed(2)) |
|||
goldtotal.value = parseFloat(resultGoldTotal.data.goldtotal.toFixed(2)) |
|||
} else { |
|||
console.error('合计数数据格式错误', resultGoldTotal) |
|||
ElMessage.error('获取合计数失败，请稍后重试') |
|||
} |
|||
// 存储分页总数 |
|||
total.value = result.data.total |
|||
console.log('total', total.value) |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// 精网号去空格，同时处理 user 和 putExcel 中的 jwcode |
|||
const trimJwCode = () => { |
|||
if (user.value.jwcode) { |
|||
user.value.jwcode = user.value.jwcode.replace(/\s/g, ''); |
|||
} |
|||
|
|||
} |
|||
// 搜索 |
|||
const search = function () { |
|||
trimJwCode(); |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
// 重置 |
|||
const reset = function () { |
|||
user.value = {} |
|||
sortField.value = '' |
|||
sortOrder.value = '' |
|||
get() |
|||
} |
|||
const cellClick = function (row, column) { |
|||
console.log('cellClick', column.label) |
|||
if (column.label === '姓名') { |
|||
dialogVisible.value = true |
|||
|
|||
userInfo.value = row |
|||
} |
|||
} |
|||
// 验证跳转输入框的数字是否合法 |
|||
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: '请检查输入内容' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
|
|||
// 处理排序事件 |
|||
const handleSortChange = (column) => { |
|||
console.log('排序字段：', column.prop) |
|||
console.log('排序方式：', column.order) |
|||
if (column.prop === 'currentPermanentGold') { |
|||
sortField.value = 'current_permanent_gold' |
|||
} else if (column.prop === 'currentTaskGold') { |
|||
sortField.value = 'current_task_gold' |
|||
} else if (column.prop === 'currentFreeJune') { |
|||
sortField.value = 'current_free_june' |
|||
} else if (column.prop === 'currentFreeDecember') { |
|||
sortField.value = 'current_free_december' |
|||
} |
|||
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC' |
|||
get() |
|||
} |
|||
|
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await getAdminData() |
|||
await get() |
|||
await getmarket() |
|||
}) |
|||
const handlePageSizeChange = function (val) { |
|||
getObj.value.pageSize = val |
|||
get() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
get() |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<p>1111</p> |
|||
</template> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px;margin-top: 10px"> |
|||
<div class="head-card"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">精网号：</el-text> |
|||
<el-input |
|||
v-model="user.jwcode" |
|||
style="width: 160px" |
|||
placeholder="请输入精网号" |
|||
clearable |
|||
/> |
|||
</div> |
|||
<div |
|||
class="head-card-element" |
|||
> |
|||
<el-text class="mx-1" size="large">所属地区：</el-text> |
|||
<el-select |
|||
v-model="user.market" |
|||
placeholder="请选择所属地区" |
|||
style="width: 180px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in market" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
<el-button type="primary" @click="search()">查询</el-button> |
|||
<el-button type="primary" @click="exportExcel()">导出Excel</el-button> |
|||
</div> |
|||
<!-- </div> --> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<div> |
|||
金币总数：{{ Math.abs(goldtotal) }} |
|||
永久金币：{{ Math.abs(permanentGold) }} |
|||
免费金币：{{ Math.abs(freeGold) }} |
|||
任务金币：{{ Math.abs(taskGold) }} |
|||
</div> |
|||
<!-- 设置表格容器的高度和滚动样式 --> |
|||
<div style="height: 626px; overflow-y: auto"> |
|||
<el-table |
|||
:data="tableData" |
|||
@cellClick="cellClick" |
|||
style="width: 100%" |
|||
height="626px" |
|||
@sort-change="handleSortChange" |
|||
> |
|||
<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 prop="name" label="姓名" width="120" /> |
|||
<el-table-column prop="jwcode" label="精网号" width="120" /> |
|||
<el-table-column prop="market" label="所属地区" width="120" /> |
|||
<el-table-column |
|||
prop="allJb" |
|||
label="金币总数" |
|||
width="120" |
|||
aligh="center" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
(scope.row.currentPermanentGold + |
|||
scope.row.currentFreeJune + |
|||
scope.row.currentFreeDecember + |
|||
scope.row.currentTaskGold) |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="currentPermanentGold" |
|||
label="永久金币" |
|||
sortable="custom" |
|||
width="110" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ Math.abs(scope.row.currentPermanentGold) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="currentFreeJune" |
|||
label="6月份到期免费金币" |
|||
sortable="custom" |
|||
width="110" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.currentFreeJune }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="currentFreeDecember" |
|||
label="12月份到期免费金币" |
|||
sortable="custom" |
|||
width="110" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.currentFreeDecember }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="currentTaskGold" |
|||
label="任务金币" |
|||
sortable="custom" |
|||
width="130" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ Math.abs(scope.row.currentTaskGold) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="rcoin" label="历史金币" width="150"> |
|||
<template #default="scope"> |
|||
<!-- 计算四个字段的和并显示 --> |
|||
<span>{{ |
|||
(scope.row.sumPermanentGold || 0) + |
|||
(scope.row.sumFreeJune || 0) + |
|||
(scope.row.sumFreeDecember || 0) + |
|||
(scope.row.sumTaskGold || 0) |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="sumConsume" label="历史消费" width="150"> |
|||
<template #default="scope"> |
|||
<span>{{ Math.abs(scope.row.sumConsume) }}</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 lang="scss"> |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
.custom-box { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 5px; |
|||
div:nth-child(1) { |
|||
flex: 1 0 100%; |
|||
} |
|||
div { |
|||
margin-right: 20px; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue