Browse Source

差退款审核、柱状图

milestone-20250623-金币前端
lihuilin 22 hours ago
parent
commit
79b2b39b5d
  1. 5
      .env.development
  2. 1
      src/router/index.js
  3. 46
      src/views/audit/rechargeAudit.vue
  4. 477
      src/views/audit/refundAudit.vue
  5. 6
      src/views/home.vue
  6. 21
      src/views/managerecharge/rate.vue
  7. 909
      src/views/permissions/index.vue
  8. 541
      src/views/permissions/permission.vue
  9. 439
      src/views/workspace/index.vue

5
.env.development

@ -1,8 +1,11 @@
# VITE_API_BASE='http://54.251.137.151:10704/'
# VITE_API_BASE='http://192.168.8.94:8080/'
# VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_dev'
# VITE_API_BASE='http://54.251.137.151:10704/'
<<<<<<< HEAD
# VITE_API_BASE='http://192.168.8.225:8080/'
# VITE_API_BASE='http://192.168.8.94:8080/'
VITE_API_BASE='http://18.143.76.3:10704/'
=======
VITE_API_BASE='http://192.168.8.94:8081/'
>>>>>>> lihuilin/feature-20250623164044-金币前端

1
src/router/index.js

@ -10,7 +10,6 @@ const router = createRouter({
meta: { requireAuth: true },
path: '/', component: () => import("../views/home.vue"),
children: [
// 工作台
{ path: '/workspace/:area?', name: "workspace", component: () => import("../views/workspace/index.vue") },
// 充值审核

46
src/views/audit/rechargeAudit.vue

@ -52,7 +52,6 @@ const getObj = ref({
const total = ref(50)
//
const getTime = ref([])
//
const activity = ref([])
//
const market = ref([])
@ -82,22 +81,8 @@ const payModel = [
{
value: '微信',
label: '微信'
},
{
value: '支付宝',
label: '支付宝'
},
{
value: '银联',
label: '银联'
},
{
value: '信用卡',
label: '信用卡'
},
{
value: '借记卡',
label: '借记卡'
},{
value:'.....................................'//
}
]
// ref
@ -451,11 +436,11 @@ const passConfirm = async function () {
}
//
const openRejectVisible = function () {
const openRej = function () {
rejectVisible.value = true
}
//
const closeRejectVisible = function () {
const closeRej = function () {
rejectVisible.value = false
}
//
@ -509,18 +494,8 @@ const rejectConfirm = async function () {
const handleSortChange = (column) => {
console.log('排序字段:', column.prop)
console.log('排序方式:', column.order)
if (column.prop === 'rechargeGold') {
sortField.value = 'recharge_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 === 'paidGold') {
sortField.value = 'paid_gold'
} else if (column.prop === 'auditTime') {
sortField.value = 'audit_time'
if (column.prop === '待补充') {
sortField.value = ''
}
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
getRecharge()
@ -629,7 +604,7 @@ onMounted(async function () {
<el-col :span="8">
<el-button @click="reset()" type="success">重置</el-button>
<el-button type="primary" @click="search()">查询</el-button>
<el-button type="primary" @click="get()">查询</el-button>
</el-col>
</el-row>
</el-card>
@ -745,7 +720,7 @@ onMounted(async function () {
</el-col>
</el-row>
<el-dialog v-model="rejectVisible" title="驳回理由" width="500" :before-close="closeRejectVisible">
<el-dialog v-model="rejectVisible" title="驳回理由" width="500" :before-close="closeRej">
<template #footer>
<el-form :model="rejectObj" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px">
<el-form-item prop="rejectReason" label="驳回理由:">
@ -756,8 +731,13 @@ onMounted(async function () {
</el-form>
<div class="dialog-footer">
<<<<<<< HEAD
<el-button @click="closeRejectVisible()">取消</el-button>
<el-button type="primary" @click="rejectConfirm()"> 确定</el-button>
=======
<el-button @click="closeRej()">取消</el-button>
<el-button type="primary" @click="rejectConfirm()"> 确定 </el-button>
>>>>>>> lihuilin/feature-20250623164044-金币前端
</div>
</template>
</el-dialog>

477
src/views/audit/refundAudit.vue

@ -9,23 +9,22 @@
<el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width: 240px" clearable/>
</el-col>
<el-col :span="6">
<el-text size="large">活动名称</el-text>
<el-select v-model="searchForm.activity" placeholder="请选择活动名称" style="width: 240px" clearable>
<el-option v-for="item in activityOptions" :key="item.activityId" :label="item.activityName"
:value="item.activityId"/>
<el-text size="large">商品名</el-text>
<el-select v-model="searchForm.refundGoods" placeholder="请输入商品名" style="width: 240px" clearable>
<el-option v-for="item in refundGoodsOptions" :key="item" :label="item" :value="item"> </el-option>
</el-select>
</el-col>
<el-col :span="6">
<el-text size="large">退款商品</el-text>
<el-select v-model="searchForm.refundGoods" placeholder="请选择退款商品" style="width: 240px" clearable>
<el-option v-for="item in productOptions" :key="item.productId" :label="item.productName"
:value="item.productId"/>
<el-text size="large">退款方式</el-text>
<el-select v-model="searchForm.refundModel" placeholder="请选择" style="width: 240px" clearable>
<el-option label="全部退款" value="全部退款" />
<el-option label="部分退款" value="部分退款" />
</el-select>
</el-col>
<el-col :span="6">
<el-text size="large">所属地区</el-text>
<el-select v-model="searchForm.area" placeholder="请选择所属地区" style="width: 240px" clearable>
<el-option v-for="item in areaOptions" :key="item" :label="item" :value="item"/>
<el-select v-model="searchForm.market" placeholder="请选择" style="width: 240px" clearable>
<el-option v-for="item in marketOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-col>
</el-row>
@ -68,89 +67,59 @@
任务金币{{ stats.taskCoins }}金币
</div>
<div style="height: 540px; overflow-y: auto">
<el-table :data="tableData" style="width: 100%" height="540px" @sort-change="handleSortChange"
:row-style="{ height: '50px' }">
<el-table-column type="index" label="序号" width="100px" fixed="left">
<template #default="scope">
<span>{{ scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize }}</span>
<el-table :data="tableData" height="540px" @sort-change="handleSortChange">
<el-table-column type="index" label="序号" width="60" />
<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="refundType" label="退款类型" width="120" />
<el-table-column prop="refundModel" label="退款方式" width="120" />
<el-table-column prop="goodsName" label="退款商品" width="120" />
<el-table-column prop="sumGold" label="退款金额" width="120" sortable="custom">
<template #default="{ row }">
{{ row.rechargeCoin + row.freeCoin + row.taskCoin }}
</template>
</el-table-column>
<el-table-column fixed="left" prop="name" label="姓名" width="150px"/>
<el-table-column fixed="left" prop="jwcode" label="精网号" width="110px"/>
<el-table-column prop="market" label="所属地区" width="100px"/>
<el-table-column prop="refundType" label="退款类型" width="100px">
<template #default="scope">商品退款</template>
</el-table-column>
<el-table-column prop="refundModel" label="退款方式" width="100px"/>
<el-table-column prop="goodsName" label="退款商品" width="100px"/>
<el-table-column prop="money" label="退款金额" width="110px" sortable="custom">
<template #default="scope">{{ scope.row.money }}</template>
</el-table-column>
<el-table-column prop="permanentGold" label="永久金币" width="110px" sortable="custom">
<template #default="scope">{{ scope.row.permanentGold }}</template>
</el-table-column>
<el-table-column prop="freeGold" label="免费金币" sortable="custom" width="110px">
<template #default="scope">{{ scope.row.freeGold }}</template>
</el-table-column>
<el-table-column prop="taskGold" label="任务金币" sortable="custom" width="110px">
<template #default="scope">{{ scope.row.taskGold }}</template>
</el-table-column>
<el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip/>
<el-table-column prop="adminName" label="提交人" width="100px"/>
<el-table-column v-if="activeName!== 'wait'" prop="auditName" label="审核人" width="100px"/>
<el-table-column v-if="activeName === 'reject'" prop="reason" label="驳回理由" width="200px"
show-overflow-tooltip/>
<el-table-column prop="createTime" sortable="custom" label="提交时间" width="200px">
<template #default="scope">
{{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
<el-table-column prop="permanentGold" label="永久金币" width="120" sortable="custom" />
<el-table-column prop="freeGold" label="免费金币" width="120" sortable="custom" />
<el-table-column prop="taskGold" label="任务金币" width="120" sortable="custom" />
<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip /><!-- 当内容过长被隐藏时显示 tooltip -->
<el-table-column prop="adminName" label="提交人" width="120" />
<el-table-column v-if="checkTab === 'rejected'" prop="rejectReason" label="驳回理由" width="150" show-overflow-tooltip />
<el-table-column v-if="checkTab !== 'pending'" prop="auditName" label="审核人" width="120" />
<el-table-column prop="createTime" label="提交时间" width="180" sortable="custom">
<template #default="{ row }">
{{ moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column v-if="activeName!== 'wait'" sortable="custom" prop="auditTime" label="审核时间" width="200px" default-sort="descending">
<template #default="scope">
{{ scope.row.auditTime ? moment(scope.row.auditTime).format('YYYY-MM-DD HH:mm:ss') : '--' }}
<el-table-column v-if="checkTab !== 'pending'" prop="auditTime" label="审核时间" width="180" sortable="custom">
<template #default="{ row }">
{{ row.auditTime ? moment(row.auditTime).format('YYYY-MM-DD HH:mm:ss') : '--' }}
</template>
</el-table-column>
<el-table-column v-if="activeName === 'wait'"
fixed="right" prop="operation" label="操作" width="150px">
<template #default="scope">
<div class="operation">
<el-popconfirm title="确定要通过此条记录吗?" @confirm="passConfirm(scope.row)">
<template #reference>
<el-button :disabled="scope.row.auditStatus === 1 || scope.row.auditStatus === 2
? true
: false
" type="primary" text>
通过
</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>
<el-button :disabled="scope.row.auditStatus === 1 || scope.row.auditStatus === 2
? true
: false
" type="primary" text @click="reject(scope.row)">
驳回
</el-button>
</div>
<el-table-column label="操作" width="150" fixed="right" v-if="checkTab === 'pending'">
<template #default="{ row }">
<el-button type="success" size="small" @click="Approval('approve', row)">通过</el-button>
<el-button type="danger" size="small" @click="Approval('reject', row)">驳回</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination">
<el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
:total="pagination.total" :page-sizes="[5, 10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
@size-change="handlePagination('size', $event)" @current-change="handlePagination('page', $event)"
class="pagination"/>
</div>
class="pagination" />
</el-card>
<el-dialog v-model="rejectVisible" title="驳回理由" width="500" :before-close="closeRejectVisible">
<!-- 驳回弹出框 -->
<el-dialog v-model="rejectDialog" title="驳回理由" width="500px">
<el-form :model="rejectForm">
<el-form-item label="驳回理由">
<el-input v-model="rejectForm.reason" type="textmarket" :rows="4" placeholder="请输入驳回理由" maxlength="200"
show-word-limit />
</el-form-item>
</el-form>
<template #footer>
<el-form :model="rejectObj" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px">
<el-form-item prop="reason" label="驳回理由:">
@ -186,102 +155,27 @@ const STATUS = {
//
const searchForm = ref({
jwcode: null, //
activity: "", //
refundGoods: "", // 退
market: "", //
startTime: "", //
endTime: "" //
jwcode: '',
refundModel: '',
refundGoods: '',
market: '',
startDate: '',
endDate: '',
auditStatus: '0',
})
//
const checkTab = ref('pending') // STATUS123statusInteger
const dateRange = ref([])
const pagination = ref({
pageNum: 1,
pageSize: 50,
total: 0
})
//
const dateRange = ref([])
// // todo
const tableData = ref([
{
name: '张三',
jwcode: 1001,
market: '北京市',
refundType: '商品退款',
refundModel: '部分退款',
goodsName: '手机',
money: 250,
permanentGold: 200,
freeGold: 30,
taskGold: 20,
remark: '用户反馈商品有瑕疵,申请部分退款',
adminName: '李管理员',
auditName: '',
createTime: '2025-06-28 10:30:00',
auditTime: '',
auditStatus: 0, //
refundId: 1001,
detailId: 10001,
auditId: 100001
},
{
name: '李四',
jwcode: 1002,
market: '上海市',
refundType: '商品退款',
refundModel: '全额退款',
goodsName: '耳机',
money: 120,
permanentGold: 100,
freeGold: 20,
taskGold: 0,
remark: '用户改变主意,不想要了',
adminName: '王管理员',
auditName: '赵审核员',
createTime: '2025-06-27 15:45:00',
auditTime: '2025-06-28 09:15:00',
auditStatus: 1, //
refundId: 1002,
detailId: 10002,
auditId: 100002
},
{
name: '王五',
jwcode: 1003,
market: '广州市',
refundType: '商品退款',
refundModel: '部分退款',
goodsName: '充电器',
money: 80,
permanentGold: 60,
freeGold: 20,
taskGold: 0,
remark: '商品包装损坏',
reason: '包装损坏属于物流问题,建议用户联系物流公司索赔',
adminName: '孙管理员',
auditName: '钱审核员',
createTime: '2025-06-26 09:20:00',
auditTime: '2025-06-27 11:30:00',
auditStatus: 2, //
refundId: 1003,
detailId: 10003,
auditId: 100003
}
])
//
const activityOptions = ref([])
//
const productOptions = ref([])
//
const areaOptions = ref([])
//
const tableData = ref([])
const marketOptions = ref([])
const refundGoodsOptions = ref([])
const adminInfo = ref({})
//
@ -334,58 +228,37 @@ const rules = reactive({
*/
//
const getAdminData = async function () {
try {
const result = await request({
url: '/admin/userinfo',
data: {}
})
adminInfo.value = result
console.log('用户信息', adminInfo.value)
} catch (error) {
console.log('请求失败', error)
}
}
// const getAdminInfo = async () => {
// try {
// const res = await request({ url: '' })
// adminInfo.value = res
// if (res.market !== '') {
// searchForm.value.market = res.market
// }
// } catch (error) {
// console.error('', error)
// }
// }
//
const getActivity = async function () {
//
const getmarkets = async () => {
try {
const result = await request({
url: '/recharge/activity/select',
data: {}
})
activityOptions.value = result.data
console.log('activity', activityOptions.value)
const result = await request({ url: 'general/market' })
marketOptions.value = result.data || []
} catch (error) {
console.log('请求失败', error)
console.error('获取地区列表失败', error)
}
}
//
const getProducts = async () => {
try {
const res = await request({
url: '/product' // todo
})
productOptions.value = res.data || []
} catch (error) {
//
const getRefundGoods = async () => {
try{
const res = await request({ url: '/general/goods' })
refundGoodsOptions.value = res.data || []
}catch (error) {
console.error('获取商品列表失败', error)
}
}
//
const getMarket = async () => {
try {
const result = await request({
url: 'http://18.143.76.3:10704/general/market' // todo
})
areaOptions.value = result.data || []
} catch (error) {
console.error('获取地区列表失败', error)
}
}
//
const get = async function (val) {
try {
@ -411,26 +284,29 @@ const get = async function (val) {
const params = {
pageNum: pagination.value.pageNum,
pageSize: pagination.value.pageSize,
detail: {
...searchForm.value,
status: getCurrentStatus()
refundAudit: {
...searchForm.value
}
}
const result = await request({
url: '/audit/audit/refund', // todo
const res = await request({
url: '/audit/selectRefund',
data: params
})
//
// searchForm.value
const searchForm1 = {...searchForm.value}
delete searchForm1.sortField
delete searchForm1.sortOrder
delete searchForm1.status
const result2 = await request({
url: '/refund/RefundA', // todo
data: searchForm1
tableData.value = res.list || []
pagination.value.total = res.total || 0
} catch (error) {
console.error('获取数据失败', error)
}
}
const getStats = async () => {
try {
const params = { ...searchForm.value, status: getCurrentStatus() }
const res = await request({
url: '/audit/refund',
data: params
})
//
if (result2.data) {
@ -482,12 +358,12 @@ const handleSearch = function () {
//
const resetSearch = function () {
searchForm.value = {
jwcode: null,
activity: "",
refundGoods: "",
market: "",
startTime: "",
endTime: ""
jwcode: '',
refundType: '',
refundGoods: '',
market: adminInfo.value.market === '总部' ? '' : adminInfo.value.market,
startDate: '',
endDate: ''
}
dateRange.value = []
handleSearch()
@ -607,35 +483,29 @@ const handlePagination = (type, val) => {
get()
}
//
const pass = function (row) {
//
passObj.value = row
passObj.value.adminId = adminInfo.value.adminId
passObj.value.auditId = row.auditId
passObj.value.auditStatus = 1
passObj.value.refundId = row.refundId
passObj.value.detailId = row.detailId
passObj.value.jwcode = row.jwcode
passObj.value.paidGold = row.paidGold
passObj.value.freeGold = row.freeGold
passObj.value.adminName = adminInfo.value.adminName
console.log('通过对象', passObj.value)
const Approval = (type, row) => {
currentRecord.value = row
if (type === 'reject') {
rejectForm.value.reason = ''
rejectDialog.value = true
} else if (type === 'approve') {
approveRefund()
}
}
//
const passConfirm = async function (row) {
try {
pass(row)
//
passObj.value.auditStatus = 1
console.log('通过对象', passObj.value)
// POST
// passObj.value.flag = 0;
const result = await request({
url: '/audit/audit/goldedit', // todo
data: passObj.value
const params = {
adminId: adminInfo.value.adminId,
auditId: currentRecord.value.auditId,
status: STATUS.APPROVED,
refundId: currentRecord.value.refundId
}
await request({
url: '/audit/audit',
data: params
})
console.log('请求成功', result)
get()
@ -653,88 +523,39 @@ const passConfirm = async function (row) {
}
}
//
const openRejectVisible = function () {
rejectVisible.value = true
}
//
const closeRejectVisible = function () {
rejectVisible.value = false
}
//
const reject = function (row) {
//
rejectObj.value.adminId = adminInfo.value.adminId
rejectObj.value.auditId = row.auditId
rejectObj.value.auditStatus = 2
rejectObj.value.reason = ''
rejectObj.value.refundId = row.refundId
rejectObj.value.detailId = row.detailId
console.log('驳回对象', rejectObj.value)
openRejectVisible()
}
const rejectRefund = async () => {
if (!rejectForm.value.reason) {
ElMessage.warning('请输入驳回理由')
return
}
//
const rejectConfirm = async function () {
Ref.value.validate(async (valid) => {
if (valid) {
try {
console.log('驳回对象', rejectObj.value)
// POST
const result = await request({
url: '/audit/audit/goldedit',// todo
data: rejectObj.value
const params = {
adminId: adminInfo.value.adminId,
auditId: currentRecord.value.auditId,
status: STATUS.REJECTED,
refundId: currentRecord.value.refundId,
reason: rejectForm.value.reason
}
await request({
url: '/audit/audit',
data: params
})
console.log('请求成功', result)
ElMessage.success('退款已驳回')
rejectDialog.value = false
get()
closeRejectVisible()//
ElMessage({
type: 'success',
message: '驳回成功!'
})
} catch (error) {
console.log('请求失败', error)
console.error('驳回失败', error)
ElMessage.error('操作失败')
}
} else {
ElMessage({
type: 'error',
message: '请检查输入内容'
})
}
})
}
//
const handleSortChange = (column) => {
console.log('排序字段:', column.prop)
console.log('排序方式:', column.order)
if (column.prop === 'money') {
sortField.value = 'recharge_coin'
} else if (column.prop === 'freeGold') {
sortField.value = 'free_gold'
} else if (column.prop === 'createTime') {
sortField.value = 'create_time'
} else if (column.prop === 'auditTime') {
sortField.value = 'audit_time'
} else if (column.prop === 'permanentGold') {
sortField.value = 'permanent_gold'
} else if (column.prop === 'taskGold') {
sortField.value = 'task_gold'
}
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
get()
}
/*
======================挂载=========================
*/
//
onMounted(async function () {
await getAdminData()
await getActivity()
await getProducts()
await getMarket()
onMounted(async () => {
//await getAdminInfo()//
await getRefundGoods()
await getmarkets()
await get()
})
</script>

6
src/views/home.vue

@ -70,9 +70,9 @@ const message = function () {
//
onMounted(async function () {
//
getAdminData()
//getAdminData()
//
getAreas()
//getAreas()
})
//
const changeDataByArea = (item) => {
@ -199,7 +199,7 @@ const handleClose = (key, keyPath) => {
<span style="margin-left: 10px">{{ adminData.name }}</span>
</template>
<el-menu-item @click="message()">查看个人信息</el-menu-item>
<el-menu-item index="1-2" @click="logout">退出登录</el-menu-item>
<el-menu-item index="1-2" >退出登录</el-menu-item>
</el-sub-menu>
</el-menu>
</el-header>

21
src/views/managerecharge/rate.vue

@ -431,20 +431,9 @@ onMounted(async function () {
<style scoped>
p {
margin: 0px;
}
.el-form-item {
margin-left: 70px;
}
.ad {
margin-left: 10px;
}
.pagination {
margin-top: 20px;
display: flex;
}
.box-card {
@ -459,14 +448,6 @@ p {
margin-bottom: 10px;
}
el-table-column {
text-align: center;
}
p {
color: rgb(150, 150, 150);
}
.unit {
margin-left: 10px;
}

909
src/views/permissions/index.vue

@ -1,909 +0,0 @@
<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 area = ref([])
//
const store = ref([])
//
const permissionAddObj = ref({})
//
const addAdmin = ref({})
//
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.jwcode) {
admin.value.jwcode = admin.value.jwcode.replace(/\s/g, '');
}
}
//
const search = function () {
trimJwCode();
getObj.value.pageNum = 1
get()
}
//
const reset = function () {
admin.value = {}
}
//
const getArea = async function () {
try {
const result = await request({
url: '/admin/area',
data: {}
})
area.value = result.data
} catch (error) {
console.log('请求失败', error)
//
}
}
//
const getStore = async function () {
try {
const result = await request({
url: '/admin/store',
data: {}
})
store.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 () {
permissionAddVisible.value = false
}
//
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.jwcode == "" ||
// permissionAddObj.value.jwcode == 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({
jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
store: [{ required: true, message: '请输入职称', trigger: 'blur' }],
machineId: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
area: [{ 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('地区', area.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.jwcode = row.jwcode
permissionEditObj.value.name = row.name
permissionEditObj.value.area = row.area
permissionEditObj.value.store = row.store
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.jwcode = row.jwcode
}
//
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.jwcode = row.jwcode
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">精网号</el-text>
<el-input
v-model="admin.jwcode"
style="width: 240px"
placeholder="请输入精网号"
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.area"
placeholder="请选择所属地区"
style="width: 240px"
clearable
>
<el-option
v-for="item in area"
: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.store"
placeholder="请选择职位名称"
style="width: 240px"
clearable
>
<el-option
v-for="item in store"
: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="jwcode" label="精网号" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="area" label="所属地区" />
<el-table-column prop="store" 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="jwcode" label="精网号:">
<el-input
v-model="addAdmin.jwcode"
placeholder="请输入精网号"
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="area" label="所属地区:">
<el-select
v-model="addAdmin.area"
placeholder="请选择所属地区"
style="width: 220px"
@change="() => Ref.value.validateField('area')"
>
<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="store" label="职位:">
<el-input
v-model="addAdmin.store"
placeholder="请输入职称"
style="width: 220px"
/>
</el-form-item>
<el-form-item prop="machineId" label="机器码:">
<el-input
v-model="addAdmin.machineId"
placeholder="请输入机器码"
style="width: 220px"
/>
</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.jwcode"
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.jwcode }}
</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.area }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="permissionVisible">
<el-icon>
<OfficeBuilding />
</el-icon>
部门
</div>
</template>
{{ permissionAddObj.store }}
</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.jwcode }}
</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.area }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="permissionVisible">
<el-icon>
<OfficeBuilding />
</el-icon>
部门
</div>
</template>
{{ permissionEditObj.store }}
</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>

541
src/views/permissions/permission.vue

@ -4,18 +4,21 @@ 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 admin = ref({
account: '',
market: '',
postiton: ''
})
//
const getObj = ref({
pageNum: 1,
@ -36,13 +39,13 @@ const addAdmin = ref({
account: '',
name: '',
market: '',
permission: '',
permission: [],
postiton: '',
machineId: '', //
machineIds: [], //
remark: ''
})
const addMachineIdInput = function () {
const addMachineIdInput = function () { // >=1
if (addAdmin.value.machineIds.length >= 1) {
ElMessage.warning('设备数量已达上限')
return
@ -62,13 +65,15 @@ const get = async function (val) {
if (typeof val === 'number') {
getObj.value.pageNum = val
}
console.log('搜索参数', getObj.value)
console.log('搜索参数', getObj.value,admin.value)
// POST
const result = await request({
url: '/admin/search',
url: '/permission/getPermission',
data: {
...getObj.value,
admin: { ...admin.value }
permission: {
...admin.value
}
}
})
tableData.value = result.data.list
@ -93,14 +98,14 @@ const search = function () {
//
const reset = function () {
admin.value = {}
// addAdmin.value = {}//Ref.value.resetFields()reset
// addAdmin.value = {}//Ref.value.resetFields()reset
}
//
const getArea = async function () {
try {
const result = await request({
url: '/admin/market',
url: '/permission/getmarket',
data: {}
})
market.value = result.data
@ -113,7 +118,7 @@ const getArea = async function () {
const getStore = async function () {
try {
const result = await request({
url: '/admin/postiton',
url: '/permission/getposition',
data: {}
})
postiton.value = result.data
@ -123,32 +128,6 @@ const getStore = async 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()
} else {
//
ElMessage({
type: 'error',
message: '请检查输入内容'
})
}
} else {
//
ElMessage({
type: 'error',
message: '请检查输入内容'
})
}
}
//
const openPermissionAddVisible = function () {
@ -178,68 +157,7 @@ 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)
@ -248,7 +166,7 @@ const permissionAdd = async function () {
addAdmin.value.adminFlag = 1
addAdmin.value.status1 = 1
const result = await request({
url: '/admin/add',
url: '/permission/addPermission',
data: addAdmin.value
})
@ -278,16 +196,6 @@ const permissionAdd = async function () {
}
})
}
//
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
@ -297,44 +205,31 @@ const throttledPermissionAdd = _.throttle(permissionAdd, 5000, {
//
const permissionList = [
{
label: '总部',
label: '管理员',
value: '1'
},
{
label: '地区经理',
value: '5'
label: '总部财务',
value: '2'
},
{
label: '财务',
label: '总部客服',
value: '3'
},
{
label: '客服',
value: '2'
label: '地区负责人',
value: '4'
},
{
label: '地区财务',
value: '5'
},
{
label: '客服专员',
value: '6'
}
]
//
//
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
@ -346,11 +241,13 @@ const closePermissionEditVisible = function () {
//
const permissionEditInit = function (row) {
permissionEditObj.value = {}
permissionEditObj.value.id = row.id
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
permissionEditObj.value.roleId = row.roleId
console.log('编辑用户权限', permissionEditObj.value)
openPermissionEditVisible()
}
@ -358,23 +255,18 @@ const permissionEditInit = function (row) {
const permissionEdit = async function () {
try {
const result = await request({
url: '/admin/update',
url: '/permission/updateAdminRole',
data: permissionEditObj.value
})
//
console.log('请求成功', result)
console.log('请求成功3', result)
ElMessage.success('编辑用户权限成功')
get()
closePermissionEditVisible()
} catch (error) {
console.log('编辑用户权限失败', error)
//
ElMessage.error('编辑用户权限失败')
closePermissionEditVisible()
}
}
@ -386,20 +278,17 @@ const del = function (row) {
delObj.value = {}
console.log(row, '删除初始化')
delObj.value.account = row.account
delObj.value.id = row.id
}
//
const delConfirm = async function () {
try {
delObj.value.permission = '4'
console.log(delObj.value)
const result = await request({
url: '/admin/update',
url: '/permission/deleteAdmin',
data: delObj.value
})
//
console.log('请求成功', result)
console.log('看看删除对象', delObj.value)
console.log('请求成功1', result)
ElMessage.success('删除权限成功')
delObj.value = {}
@ -416,21 +305,21 @@ const editStatus = async function (row) {
console.log(row)
permissionEditObj.value = {}
permissionEditObj.value.id = row.id
permissionEditObj.value.account = row.account
permissionEditObj.value.status1 = row.status1
permissionEditObj.value.adminStatus = row.adminStatus
console.log('修改用户权限状态', permissionEditObj.value)
const result = await request({
url: '/admin/update',
url: '/permission/upadatePermission',
data: permissionEditObj.value
})
//
console.log('请求成功', result)
console.log('请求成功2', result)
ElMessage.success(
permissionEditObj.value.status1 == 1 ? '启用成功' : '禁用成功'
permissionEditObj.value.adminStatus == 1 ? '启用成功' : '禁用成功'
)
permissionEditObj.value = {}
get()
@ -463,44 +352,18 @@ const handleCurrentChange = function (val) {
<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
/>
<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 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 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>
@ -512,26 +375,18 @@ const handleCurrentChange = function (val) {
</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
>
<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"
>
<el-table-column type="index" label="序号" width="100px" fixed="left">
<template #default="scope">
<span>{{
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
@ -543,36 +398,18 @@ const handleCurrentChange = function (val) {
<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 prop="roleName" label="部门权限">
</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 type="warning" text @click="permissionEditInit(scope.row)"
:disabled="scope.row.adminStatus === 0">
修改权限
</el-button>
<el-popconfirm
title="确定将此用户删除吗?"
@confirm="delConfirm"
>
<el-popconfirm title="确定将此用户删除吗?" @confirm="delConfirm">
<template #reference>
<el-button
type="danger"
text
@click="del(scope.row)"
:disabled="scope.row.status1 === 0"
>
<el-button type="danger" text @click="del(scope.row)" :disabled="scope.row.adminStatus === 0">
删除
</el-button>
</template>
@ -585,22 +422,13 @@ const handleCurrentChange = function (val) {
</el-popconfirm>
</template>
</el-table-column>
<el-table-column prop="status1" label="状态">
<el-table-column prop="adminStatus" 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 v-model="scope.row.adminStatus" :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
/>
" active-text="启用" inactive-text="禁用" inline-prompt />
</template>
</el-table-column>
</el-table>
@ -608,116 +436,57 @@ const handleCurrentChange = function (val) {
<!-- 分页 -->
<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>
<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"
>
<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 ref="Ref" :model="addAdmin" label-width="auto" style="max-width: 600px; align-items: center">
<el-form-item prop="account" label="OA号:" required>
<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 prop="name" label="用户名:" required>
<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-form-item prop="market" label="所属地区:" required>
<el-select v-model="addAdmin.market" placeholder="请选择所属地区" style="width: 220px"
@change="() => Ref.value.validateField('market')">
<el-option v-for="item in market" :key="item" :label="item" :value="item" />
</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-form-item prop="permission" label="权限类别:" required>
<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 prop="postiton" label="职位:" required>
<el-input v-model="addAdmin.postiton" placeholder="请输入职称" style="width: 220px" />
</el-form-item>
<el-form-item prop="machineId" label="机器码:">
<el-form-item prop="machineId" label="机器码:" required>
<div style="display: flex; align-items: center; flex-wrap: wrap;">
<el-input
v-model="addAdmin.machineId"
placeholder="请输入机器码"
style="width: 220px; margin-right: 10px;"
/>
<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;"
/>
<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-input v-model="addAdmin.remark" style="width: 300px" :rows="2" maxlength="100" show-word-limit
type="textarea" />
</el-form-item>
</el-form>
@ -729,117 +498,10 @@ const handleCurrentChange = function (val) {
</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-dialog v-model="permissionEditVisible" title="编辑用户权限" width="800px" :close-on-click-modal="false">
<el-descriptions class="margin-top" :column="2" border label-width="200px">
<el-descriptions-item>
<template #label>
<div class="permissionVisible">
@ -865,7 +527,7 @@ const handleCurrentChange = function (val) {
<el-descriptions-item>
<template #label>
<div class="permissionVisible">
<el-icon :style="iconStyle">
<el-icon>
<location />
</el-icon>
所属地区
@ -890,20 +552,20 @@ const handleCurrentChange = function (val) {
<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>
<span class="permissionVisible" style="margin-right: 20px">权限设置:</span>
<el-radio-group v-model="permissionEditObj.roleId">
<el-radio value="1" border>管理员</el-radio>
<el-radio value="2" border>总部财务</el-radio>
<el-radio value="3" border>总部客服</el-radio>
<el-radio value="4" border>地区负责人</el-radio>
<el-radio value="5" border>地区财务</el-radio>
<el-radio value="6" border>客服专员</el-radio>
</el-radio-group>
</div>
<template #footer>
<div>
<el-button @click="closePermissionEditVisible()">取消</el-button>
<el-button type="primary" @click="throttledPermissionEdit()">
<el-button type="primary" @click="throttledPermissionEdit">
提交
</el-button>
</div>
@ -912,7 +574,6 @@ const handleCurrentChange = function (val) {
</template>
<style scoped>
.permissionVisible {
font-size: 16px;
font-weight: bold;

439
src/views/workspace/index.vue

@ -2,60 +2,70 @@
<el-col :span="4">
<el-card class="center-card margin-bottom">数据总览</el-card>
</el-col>
<el-row :span="24">
<el-row :gutter="10">
<!-- 第一个卡片 -->
<el-col :span="6">
<el-card class="card-item">
<template #header>
<div class="card-header">
<div class="card-title">当前金币余量</div>
<div>100&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;较前一日 -100</div>
<div>{{ currentGold }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;较前一日 {{ dailyChange }}</div>
</div>
</template>
<div>
<div class="margin-bottom">永久金币100</div>
<div class="margin-bottom">免费金币100</div>
<div class="margin-bottom">[六月到期|100]&nbsp;&nbsp;&nbsp;&nbsp;[12月到期|100]</div>
<div>任务金币100</div>
<div class="margin-bottom">永久金币{{ currentPermanent }}</div>
<div class="margin-bottom">免费金币{{ currentFree }}</div>
<div class="margin-bottom">[六月到期|{{ currentFreeJune }}]&nbsp;&nbsp;&nbsp;&nbsp;[12月到期|{{ currentFreeDecember }}]</div>
<div>任务金币{{ currentTask }}</div>
</div>
</el-card>
</el-col>
<!-- 第二个卡片 -->
<el-col :span="6">
<el-card class="card-item">
<div class="card-title">全年累计充值金币数</div>
<div class="card-title">100</div>
<div class="card-title">{{ yearlyRecharge }}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div class="center-card">折合新币累计金额:100</div>
<div class="center-card">折合新币累计金额:{{ yearlyMoney }}</div>
<template #footer >
<el-col class="margin-bottom center-card">昨日新增100</el-col>
<el-col class="margin-bottom center-card">其中充值100</el-col>
<el-col class="margin-bottom center-card">昨日新增{{ recharge }}</el-col>
<el-col class="margin-bottom center-card">其中充值{{ money }}</el-col>
</template>
</el-card>
</el-col>
<!-- 第三个卡片 -->
<el-col :span="6">
<el-card class="card-item">
<div class="card-title">全年累计消耗金币数</div>
<div class="card-title">100</div>
<div class="center-card">消费100</div>
<div class="center-card">退款100</div>
<div class="card-title">{{ yearlyReduce }}</div>
<div class="center-card">消费{{ yearlyConsume }}</div>
<div class="center-card">退款{{ yearlyRefund }}</div>
<template #footer>
<div></div>
<div class="margin-bottom center-card">昨日新增消耗100</div>
<div class="margin-bottom center-card">昨日新增消费100</div>
<div class="margin-bottom center-card">昨日新增退款100</div>
<div class="margin-bottom center-card">昨日新增消耗{{ dailyReduce }}</div>
<div class="margin-bottom center-card">昨日新增消费{{ dailyConsume }}</div>
<div class="margin-bottom center-card">昨日新增退款{{ dailyRefund }}</div>
</template>
</el-card>
</el-col>
<!-- 第四个卡片 -->
<el-col :span="6">
<el-card class="card-item">
<el-col class="card-title">全年累计充值人头数</el-col>
<el-col class="card-title">100</el-col>
<el-col class="center-card">周同比:</el-col>
<el-col class="center-card">日环比</el-col>
<el-col class="card-title">{{ yearlyRechargeNum }}</el-col>
<el-col class="center-card">周同比:{{ wow }}</el-col>
<el-col class="center-card">日环比:{{ daily }}</el-col>
<template #footer>
<el-col class="margin-bottom center-card">昨日充值人数100</el-col>
<el-col class="margin-bottom center-card">其中首充100</el-col>
<el-col class="margin-bottom center-card">昨日充值人数{{ rechargeNum }}</el-col>
<el-col class="margin-bottom center-card">其中首充{{ firstRecharge }}</el-col>
</template>
</el-card>
</el-col>
</el-row>
<el-row :gutter="10" style="margin-top: 20px">
<el-col :span="24">
<el-card style="width: 100%">
@ -82,15 +92,15 @@
style="width: 200px"
@change="handleDateRangeChange"
/>
<el-button style="margin-left: 5px" @click="loadChart">查询</el-button>
<el-button type="primary" style="margin-left: 5px" @click="loadChart">查询</el-button>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="18">
<div class="bar">
<div v-show="activeTab === 'recharge'" id="recharge" style="width: 100%; height: 400px"></div>
<div v-show="activeTab === 'consume'" id="consume" style="width: 100%; height: 400px"></div>
<div v-show="activeTab === 'recharge'" id="rechargeChartRef" style="width: 100%; height: 400px"></div>
<div v-show="activeTab === 'consume'" id="consumeChartRef" style="width: 100%; height: 400px"></div>
</div>
</el-col>
<el-col :span="6">
@ -121,272 +131,141 @@
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import API from '@/util/http'
const histogramData = ref([])
const middleCategory = ref([])
const middleRecharge = ref([])
const middleFree = ref([])
const middleTask = ref([])
const tableData = ref([])
const area = ref([])
//
const activeTab = ref('consume')
const updateType = ref(1)
//
const activeTab = ref('recharge')
const timeRange = ref('day')
const dateRange = ref([])
const selectedType = ref('all')
const tableData = ref([])
// ECharts
let rechargeBar = null
let consumeBar = null
const formatDate = (date) => {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
}
//
const getWeekStart = (date) => {
const day = date.getDay()
const diff = date.getDate() - day + (day === 0 ? -6 : 1) //
return new Date(date.setDate(diff))
}
//
const getWeekEnd = (date) => {
const start = getWeekStart(new Date(date))
const end = new Date(start)
end.setDate(start.getDate() + 6)
return end
}
//
const getMonthStart = (date) => {
return new Date(date.getFullYear(), date.getMonth(), 1)
}
//
const getMonthEnd = (date) => {
return new Date(date.getFullYear(), date.getMonth() + 1, 0)
}
//
const getYearStart = (date) => {
return new Date(date.getFullYear(), 0, 1)
}
//
const getYearEnd = (date) => {
return new Date(date.getFullYear(), 11, 31)
}
const handleTimeRangeChange = (value) => {
const now = new Date()
let start, end
switch (value) {
case 'day': //
start = new Date(now)
end = new Date(now)
break
case 'week': //
start = getWeekStart(new Date(now))
end = getWeekEnd(new Date(now))
break
case 'month': //
start = getMonthStart(now)
end = getMonthEnd(now)
break
case 'year': //
start = getYearStart(now)
end = getYearEnd(now)
break
default:
start = new Date()
end = new Date()
}
dateRange.value = [start, end]
loadChart()
}
const handleDateRangeChange = () => {
timeRange.value = ''
}
//
const getAreas = async () => {
try {
const result = await API({
url: 'http://18.143.76.3:10704/general/market',
data: {}
})
middleCategory.value = result.data.map(item => item.name)
//
tableData.value = result.data.slice(0, 11).map((item, index) => ({
rank: index + 1,
region: item.name,
coinAmount: Math.floor(Math.random() * 1000000) + 500000
}))// D
} catch (error) {
console.error('获取地区数据失败:', error)
const rechargeChartRef = ref(null)
const consumeChartRef = ref(null)
//
const currentGold = ref(0)
const dailyChange = ref(0)
const currentPermanent = ref(0)
const currentFree = ref(0)
const currentFreeJune = ref(0)
const currentFreeDecember = ref(0)
const currentTask = ref(0)
const yearlyRecharge = ref(0)
const yearlyMoney = ref(0)
const recharge = ref(0)
const money = ref(0)
const yearlyReduce = ref(0)
const yearlyConsume = ref(0)
const yearlyRefund = ref(0)
const dailyReduce = ref(0)
const dailyConsume = ref(0)
const dailyRefund = ref(0)
const yearlyRechargeNum = ref(0)
const wow = ref(0)
const daily = ref(0)
const rechargeNum = ref(0)
const firstRecharge = ref(0)
// ( = + 6 + 12 + + )
const processData = (data) => {
const summary = {
currentGold: 0,
dailyChange: 0,
currentPermanent: 0,
currentFreeJune: 0,
currentFreeDecember: 0,
currentTask: 0,
currentFree: 0,
recharge: 0,
money: 0,
yearlyRecharge: 0,
yearlyMoney: 0,
consumePermanent: 0,
consumeFreeJune: 0,
consumeFreeDecember: 0,
consumeTask: 0,
refundPermanent: 0,
refundFreeJune: 0,
refundFreeDecember: 0,
refundTask: 0,
dailyReduce: 0,
yearlyConsume: 0,
yearlyRefund: 0,
yearlyReduce: 0,
rechargeNum: 0,
firstRecharge: 0,
wow: 0,
daily: 0,
yearlyRechargeNum: 0
}
}
const getChartData = async () => {
try {
const params = {
updateType: updateType.value
//
data.marketCards.forEach(market => {
for (const key in summary) {
if (market[key] !== undefined && market[key] !== null) { // number
summary[key] += market[key]
}
if (dateRange.value && dateRange.value.length === 2) {
params.searchStartTime = formatDate(dateRange.value[0])
params.searchEndTime = formatDate(dateRange.value[1])
}
const result = await API({
url: '/statistics/getCoinTime',
data: params
})
histogramData.value = result.data || []
middleRecharge.value = histogramData.value.map(item =>
Math.abs(item.rechargeSumCoin || 0)
)
middleFree.value = histogramData.value.map(item =>
Math.abs(item.freeSumCoin || 0)
)
middleTask.value = histogramData.value.map(item =>
Math.abs(item.taskSumCoin || 0)
)
updateChart()
} catch (error) {
console.error('请求图表数据失败:', error)
}
// 退
const yesterdayConsume = summary.consumePermanent + summary.consumeFreeJune + summary.consumeFreeDecember + summary.consumeTask
const yesterdayRefund = summary.refundPermanent + summary.refundFreeJune + summary.refundFreeDecember + summary.refundTask
//
currentGold.value = summary.currentGold
dailyChange.value = summary.dailyChange
currentPermanent.value = summary.currentPermanent
currentFree.value = summary.currentFree
currentFreeJune.value = summary.currentFreeJune
currentFreeDecember.value = summary.currentFreeDecember
currentTask.value = summary.currentTask
yearlyRecharge.value = summary.yearlyRecharge
yearlyMoney.value = summary.yearlyMoney
recharge.value = summary.recharge
money.value = summary.money
yearlyReduce.value = summary.yearlyReduce
yearlyConsume.value = summary.yearlyConsume
yearlyRefund.value = summary.yearlyRefund
dailyReduce.value = summary.dailyReduce
dailyConsume.value = yesterdayConsume
dailyRefund.value = yesterdayRefund
yearlyRechargeNum.value = summary.yearlyRechargeNum
wow.value = summary.wow
daily.value = summary.daily
rechargeNum.value = summary.rechargeNum
firstRecharge.value = summary.firstRecharge
}
const updateChart = () => {
const option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: function (params) {
let total = 0
let content = `${params[0].name}<br/>`
params.forEach((param) => {
content += `${param.seriesName}: ${param.value.toLocaleString()}<br/>`
total += param.value
})
content += `总和: ${total.toLocaleString()}`
return content
}
},
legend: {
right: '2%',
orient: 'vertical',
itemGap: 10
},
grid: {
left: '3%',
right: '10%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: middleCategory.value,
axisLabel: {
interval: 0,
rotate: 30
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: (value) => value.toLocaleString()
}
},
series: [
{
name: '永久金币',
color: '#35e383',
type: 'bar',
stack: 'total',
data: middleRecharge.value
},
{
name: '免费金币',
color: '#5f8ff5',
type: 'bar',
stack: 'total',
data: middleFree.value
},
{
name: '任务金币',
color: '#ffe733',
type: 'bar',
stack: 'total',
data: middleTask.value
}
]
}
if (activeTab.value === 'recharge' && rechargeBar) {
rechargeBar.setOption(option)
rechargeBar.resize()
} else if (consumeBar) {
consumeBar.setOption(option)
consumeBar.resize()
}
}
const initCharts = () => {
const rechargeDom = document.getElementById('recharge')
const consumeDom = document.getElementById('consume')
if (rechargeDom) {
rechargeBar = echarts.init(rechargeDom)
const getCardData = async () => {
try {
const response = await API({ url: '/workbench/getCard', data: {} })
// D
// API
if (response && response.data) {
// API { data: { ... } }
processData(response.data)
} else if (Array.isArray(response?.marketCards)) {
//
processData(response)
} else {
console.error('无效的API响应结构:', response)
}
if (consumeDom) {
consumeBar = echarts.init(consumeDom)
} catch (error) {
console.error('获取卡片数据失败:', error)
}
}
const loadChart = async () => {
await getAreas()
await getChartData()
}
//
const handleTabChange = (tab) => {
updateType.value = tab === 'recharge' ? 0 : 1
loadChart()
}
const handleResize = () => {
if (rechargeBar) rechargeBar.resize()
if (consumeBar) consumeBar.resize()
}
onMounted(() => {
initCharts()
loadChart()
window.addEventListener('resize', handleResize)
})
onBeforeUnmount(() => {
if (rechargeBar) rechargeBar.dispose()
if (consumeBar) consumeBar.dispose()
window.removeEventListener('resize', handleResize)
onMounted(async function () {
getCardData()
})
</script>
@ -402,9 +281,7 @@ onBeforeUnmount(() => {
}
.card-item {
width: 24%;
height: 260px;
margin-right: 10px;
display: flex;
flex-direction: column;
justify-content: center;
@ -418,7 +295,15 @@ onBeforeUnmount(() => {
align-items: center;
}
.margin-top{
margin-top: 5px;
.rank-card {
height: 500px;
}
.card-large {
font-weight: bold;
font-size: 16px;
text-align: center;
margin-bottom: 15px;
}
</style>
Loading…
Cancel
Save