You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
392 lines
10 KiB
392 lines
10 KiB
<script setup>
|
|
// 导航栏在这
|
|
import {onMounted, ref} from 'vue'
|
|
import {useRoute, useRouter} from 'vue-router'
|
|
import {ElMessage} from 'element-plus'
|
|
import API from '@/util/http'
|
|
import dmmn from '../assets/link.png'
|
|
import moment from 'moment'
|
|
import ChangePassword from '@/components/changePassword.vue'
|
|
|
|
// 获取当前路由实例
|
|
const route = useRoute()
|
|
|
|
// 存储接口返回的菜单数据
|
|
const menuList = ref([])
|
|
|
|
|
|
|
|
/**
|
|
* 调用 /menu/tree 接口获取菜单数据
|
|
*/
|
|
const fetchMenuTree = async function() {
|
|
try {
|
|
const result = await API({ url: '/menu/tree', data: {id: adminData.value.roleId} })
|
|
|
|
return result.data // 直接返回接口响应数据
|
|
} catch (error) {
|
|
console.error('菜单数据请求失败：', error)
|
|
return { code: 500, msg: '获取菜单失败' }
|
|
}
|
|
}
|
|
|
|
|
|
function filterMenu(menuList) {
|
|
return menuList
|
|
.filter(menu => menu.menuType !== 4)
|
|
.map(menu => ({
|
|
...menu,
|
|
children: menu.children ? filterMenu(menu.children) : []
|
|
}))
|
|
.sort((a, b) => a.priority - b.priority); // 按 id 升序
|
|
}
|
|
|
|
/**
|
|
* 映射菜单名称到路由路径
|
|
*/
|
|
const getRoutePath = (menu) => {
|
|
// 路由映射表：key为接口menuName，value为对应路由路径
|
|
const routeMap = {
|
|
'工作台': '/workspace',
|
|
|
|
'财务审核': '/rechargeAudit',
|
|
'充值审核': '/rechargeAudit',
|
|
'退款审核': '/refundAudit',
|
|
|
|
'汇率管理': '/rate',
|
|
|
|
'消耗管理': '/coinConsume',
|
|
'消耗页面': '/coinConsume',
|
|
|
|
'权限管理': '/permissions',
|
|
|
|
'充值管理': '/coinRecharge',
|
|
'充值页面': '/coinRecharge',
|
|
|
|
'退款管理': '/coinRefund',
|
|
'退款页面': '/coinRefund',
|
|
|
|
'客户账户明细': '/usergold',
|
|
};
|
|
// 未匹配的菜单默认使用id作为路由（可根据实际需求调整）
|
|
return routeMap[menu.menuName] || '/workspace'
|
|
}
|
|
|
|
const router = useRouter()
|
|
const imgrule1 = dmmn
|
|
const messageVisible = ref(false)
|
|
|
|
// 这是获取用户信息的接口
|
|
const adminData = ref({
|
|
name: ''
|
|
})
|
|
|
|
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 areas = ref([])
|
|
|
|
const currentArea = ref('全部')
|
|
|
|
const getAreas = async function () {
|
|
try {
|
|
const result = await API({ url: '/general/adminMarkets', data: {
|
|
account: adminData.value.account,
|
|
} })
|
|
areas.value = result.data
|
|
console.log('请求成功', result)
|
|
} catch (error) {
|
|
console.log('请求失败', error)
|
|
}
|
|
}
|
|
// 查看个人信息弹出框
|
|
const openMessage = function () {
|
|
messageVisible.value = true
|
|
}
|
|
const closeMessage = function () {
|
|
messageVisible.value = false
|
|
}
|
|
const message = function () {
|
|
openMessage()
|
|
}
|
|
|
|
// 导出列表数据
|
|
const exportList = ref([])
|
|
// 导出列表加载状态
|
|
const exportListLoading = ref(false)
|
|
|
|
//根据状态返回对应的标签类型
|
|
const getTagType = (state) => {
|
|
switch (state) {
|
|
case 0:
|
|
return 'info';
|
|
case 1:
|
|
return 'primary';
|
|
case 2:
|
|
return'success';
|
|
case 3:
|
|
return 'danger';
|
|
default:
|
|
return 'info';
|
|
}
|
|
}
|
|
//根据状态返回对应的标签文案
|
|
const getTagText = (state) => {
|
|
switch (state) {
|
|
case 0:
|
|
return '待执行';
|
|
case 1:
|
|
return '执行中';
|
|
case 2:
|
|
return'执行完成';
|
|
case 3:
|
|
return '执行出错';
|
|
default:
|
|
return '未知状态';
|
|
}
|
|
}
|
|
|
|
// 下载导出文件
|
|
const downloadExportFile = (item) => {
|
|
if (item.state === 2) {
|
|
const link = document.createElement('a')
|
|
link.href = item.url
|
|
link.download = item.fileName
|
|
link.click()
|
|
} else {
|
|
ElMessage.warning('文件还在导出中，请稍后再试')
|
|
}
|
|
}
|
|
|
|
function logout() {
|
|
const machineId = localStorage.getItem('machineId')
|
|
localStorage.removeItem('token')
|
|
router.push('/login?machineId=' + machineId)
|
|
ElMessage.success('退出成功')
|
|
}
|
|
|
|
// 挂载
|
|
onMounted(async function () {
|
|
// 获取用户信息
|
|
|
|
await getAdminData()
|
|
|
|
const menus = await fetchMenuTree()
|
|
menuList.value = filterMenu(menus)
|
|
})
|
|
// 处理地区点击事件，直接在组件内更新当前地区，包老师改的，直接传参
|
|
const changeDataByArea = (item) => {
|
|
currentArea.value = item
|
|
}
|
|
|
|
// 控制导出列表弹窗显示状态
|
|
const exportListVisible = ref(false)
|
|
// 显示修改密码弹窗
|
|
const showPasswordDialog = ref(false)
|
|
// 打开导出列表弹窗
|
|
const openExportList = () => {
|
|
getExportList()
|
|
exportListVisible.value = true
|
|
}
|
|
//打开修改密码弹窗
|
|
const openChangePassword = () => {
|
|
showPasswordDialog.value = true
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div class="common-layout">
|
|
<el-container>
|
|
<el-aside style="
|
|
width: 15%;
|
|
min-width: 180px;
|
|
position: fixed; /* 固定位置 */
|
|
top: 0;
|
|
left: 0;
|
|
height: 100vh; /* 高度占满视口 */
|
|
z-index: 100; /* 确保侧边栏在其他元素之上 */
|
|
">
|
|
<div class="logo">
|
|
<img src="../assets/新logo.png" alt="logo" style="width: 80px; height: 80px" />
|
|
<!-- <div style="font-size: 16px; font-weight: bold; color: black; text-align: center;" ><h1>海外金币管理系统</h1></div> -->
|
|
</div>
|
|
<el-card style="min-height: 90%;">
|
|
|
|
<el-menu
|
|
:router="true"
|
|
class="el-menu-vertical-demo"
|
|
:default-active="$route.path"
|
|
>
|
|
<!-- 递归渲染菜单层级 -->
|
|
<template v-for="menu in menuList" :key="menu.id">
|
|
<!-- 有子菜单的父级菜单（menuType=2 且存在children） -->
|
|
<el-sub-menu
|
|
v-if="menu.children && menu.children.length > 0"
|
|
:index="menu.id.toString()"
|
|
>
|
|
<template #title>
|
|
<el-icon><Folder /></el-icon>
|
|
<span>{{ menu.menuName }}</span>
|
|
</template>
|
|
<!-- 子菜单 -->
|
|
<template v-for="child in menu.children" :key="child.id">
|
|
<!-- 子菜单为叶子节点（无children） -->
|
|
<el-menu-item
|
|
v-if="!child.children || child.children.length === 0"
|
|
:index="getRoutePath(child)"
|
|
>
|
|
<span>{{ child.menuName }}</span>
|
|
</el-menu-item>
|
|
|
|
<!-- 子菜单有下级 -->
|
|
<el-sub-menu
|
|
v-else
|
|
:index="child.id.toString()"
|
|
>
|
|
<template #title>
|
|
<span>{{ child.menuName }}</span>
|
|
</template>
|
|
<!-- 嵌归 下一级-->
|
|
<template v-for="grandChild in child.children" :key="grandChild.id">
|
|
<el-menu-item :index="getRoutePath(grandChild)">
|
|
<span>{{ grandChild.menuName }}</span>
|
|
</el-menu-item>
|
|
</template>
|
|
</el-sub-menu>
|
|
</template>
|
|
</el-sub-menu>
|
|
|
|
<!-- 无子菜单的一级菜单 -->
|
|
<el-menu-item
|
|
v-else
|
|
:index="getRoutePath(menu)"
|
|
>
|
|
<el-icon><Folder /></el-icon>
|
|
<span>{{ menu.menuName }}</span>
|
|
</el-menu-item>
|
|
</template>
|
|
</el-menu>
|
|
|
|
</el-card>
|
|
</el-aside>
|
|
<el-container style="margin-left: 15%; min-width: 180px">
|
|
<!-- 修改 el-header 样式 -->
|
|
<el-header style="
|
|
position: fixed;
|
|
top: 0;
|
|
left: 15%;
|
|
right: 0;
|
|
z-index: 80;
|
|
background: white;
|
|
">
|
|
|
|
|
|
<el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
|
|
|
|
<el-sub-menu index="1" class="admin">
|
|
<template #title>
|
|
<el-image :src="imgrule1" alt="错误" style="width: 50px; height: 50px" />
|
|
<span style="margin-left: 10px">{{ adminData.name }}</span>
|
|
</template>
|
|
<el-menu-item @click="message()">查看个人信息</el-menu-item>
|
|
<el-menu-item @click="openChangePassword">修改密码</el-menu-item>
|
|
<el-menu-item @click="logout">退出登录</el-menu-item>
|
|
|
|
</el-sub-menu>
|
|
|
|
</el-menu>
|
|
</el-header>
|
|
<el-main style="margin-top: 60px">
|
|
<!-- 60px 是 el-header 的大致高度，可根据实际情况调整 -->
|
|
<router-view></router-view>
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
|
|
<!-- 查看个人信息 -->
|
|
<el-dialog v-model="messageVisible" title="查看个人信息" width="500px">
|
|
<el-form :model="adminData">
|
|
<el-form-item label="用户姓名" label-width="100px" label-position="left">
|
|
<span class="message-font">{{ adminData.adminName }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="精网号" label-width="100px" label-position="left">
|
|
<span class="message-font">{{ adminData.account }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="地区" label-width="100px" label-position="left">
|
|
<span class="message-font">{{ adminData.markets }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="注册时间" label-width="100px" label-position="left">
|
|
<span class="message-font">{{ adminData.createTime }}</span>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button text @click="closeMessage()">关闭</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<!-- 自定义密码修改弹窗组件 -->
|
|
<el-dialog
|
|
v-model="showPasswordDialog"
|
|
:center="true"
|
|
width="470px"
|
|
>
|
|
<ChangePassword @confirm="showPasswordDialog = false"/>
|
|
</el-dialog>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.message-font {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.item {
|
|
margin-top: 20px;
|
|
margin-right: 40px;
|
|
}
|
|
|
|
.admin {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.el-aside {
|
|
min-height: 100vh;
|
|
width: 200px;
|
|
}
|
|
|
|
/* background-color: #BFD8D2; */
|
|
.logo {
|
|
margin: 20px 0px 20px 20px;
|
|
display: flex;
|
|
}
|
|
|
|
.el-menu-demo {
|
|
border: none;
|
|
/* 去除边框 */
|
|
padding: 0;
|
|
/* 去除内边距 */
|
|
float: right;
|
|
/* 将菜单向右浮动 */
|
|
}
|
|
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
width: 240px;
|
|
min-height: 400px;
|
|
border: none;
|
|
/* 去除边框 */
|
|
}
|
|
</style>
|