fix:将侧边栏兼容移动端
This commit is contained in:
@@ -8,3 +8,13 @@ export const userLogin = (username,password) => {
|
|||||||
export const getUserInfo = () => {
|
export const getUserInfo = () => {
|
||||||
return request.get("/api/v1/users/info/info")
|
return request.get("/api/v1/users/info/info")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取交换token（用于无感刷新）
|
||||||
|
export const getRefreshToken = (domain) => {
|
||||||
|
return request.get("/api/v1/users/info/refresh_token", { domain })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用交换token获取新的access token
|
||||||
|
export const refreshAccessToken = (refresh_token) => {
|
||||||
|
return request.post("/api/v1/user/refresh_token", { refresh_token })
|
||||||
|
}
|
||||||
@@ -1,9 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="admin-layout">
|
<div class="admin-layout" :class="{ 'sidebar-collapsed': isCollapsed, 'mobile-open': isMobileMenuOpen }">
|
||||||
|
<!-- 移动端遮罩层 -->
|
||||||
|
<div class="mobile-overlay" v-if="isMobileMenuOpen" @click="closeMobileMenu"></div>
|
||||||
|
|
||||||
<!-- 侧边栏 -->
|
<!-- 侧边栏 -->
|
||||||
<div class="sidebar">
|
<div class="sidebar" :class="{ 'collapsed': isCollapsed }">
|
||||||
<div class="logo-container">
|
<div class="logo-container">
|
||||||
<img src="@/assets/logo.png" alt="Logo" class="logo-img" />
|
<img src="@/assets/logo.png" alt="Logo" class="logo-img" v-show="!isCollapsed" />
|
||||||
|
<img src="@/assets/logo.svg" alt="Logo" class="logo-img-mini" v-show="isCollapsed" />
|
||||||
</div>
|
</div>
|
||||||
<el-scrollbar class="sidebar-scrollbar">
|
<el-scrollbar class="sidebar-scrollbar">
|
||||||
<el-menu
|
<el-menu
|
||||||
@@ -13,11 +17,20 @@
|
|||||||
text-color="#34495e"
|
text-color="#34495e"
|
||||||
active-text-color="#2c3e50"
|
active-text-color="#2c3e50"
|
||||||
:unique-opened="true"
|
:unique-opened="true"
|
||||||
|
:collapse="isCollapsed"
|
||||||
|
:collapse-transition="false"
|
||||||
router
|
router
|
||||||
>
|
>
|
||||||
<sidebar-menu-item v-for="menu in menus" :key="menu.path" :menu="menu" />
|
<sidebar-menu-item v-for="menu in menus" :key="menu.path" :menu="menu" />
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
|
<!-- 收缩按钮 -->
|
||||||
|
<div class="collapse-btn" @click="toggleCollapse">
|
||||||
|
<el-icon :size="18">
|
||||||
|
<Fold v-if="!isCollapsed" />
|
||||||
|
<Expand v-else />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 主区域 -->
|
<!-- 主区域 -->
|
||||||
@@ -25,10 +38,14 @@
|
|||||||
<!-- 顶部导航 -->
|
<!-- 顶部导航 -->
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-left">
|
<div class="navbar-left">
|
||||||
|
<!-- 移动端菜单按钮 -->
|
||||||
|
<el-button type="text" class="mobile-menu-btn" @click="toggleMobileMenu">
|
||||||
|
<el-icon :size="22"><Menu /></el-icon>
|
||||||
|
</el-button>
|
||||||
<breadcrumb />
|
<breadcrumb />
|
||||||
</div>
|
</div>
|
||||||
<div class="navbar-right">
|
<div class="navbar-right">
|
||||||
<div class="navbar-item">
|
<div class="navbar-item hidden-mobile">
|
||||||
<el-tooltip content="全屏" placement="bottom">
|
<el-tooltip content="全屏" placement="bottom">
|
||||||
<el-button type="text" class="header-btn" @click="toggleFullScreen">
|
<el-button type="text" class="header-btn" @click="toggleFullScreen">
|
||||||
<el-icon :size="18"><full-screen /></el-icon>
|
<el-icon :size="18"><full-screen /></el-icon>
|
||||||
@@ -39,9 +56,9 @@
|
|||||||
<div class="navbar-item">
|
<div class="navbar-item">
|
||||||
<el-dropdown trigger="click">
|
<el-dropdown trigger="click">
|
||||||
<div class="avatar-container">
|
<div class="avatar-container">
|
||||||
<el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
|
<el-avatar :size="32" :src="userStore.getUserAvatar() || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" />
|
||||||
<span class="username">{{ userStore.userInfo.user_name }}</span>
|
<span class="username hidden-mobile">{{ userStore.userInfo.user_name }}</span>
|
||||||
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
<el-icon class="el-icon--right hidden-mobile"><arrow-down /></el-icon>
|
||||||
</div>
|
</div>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
@@ -81,7 +98,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
import SidebarMenuItem from './SidebarMenuItem.vue'
|
import SidebarMenuItem from './SidebarMenuItem.vue'
|
||||||
import Breadcrumb from './Breadcrumb.vue'
|
import Breadcrumb from './Breadcrumb.vue'
|
||||||
@@ -92,7 +109,10 @@ import {
|
|||||||
ArrowDown,
|
ArrowDown,
|
||||||
User,
|
User,
|
||||||
Key,
|
Key,
|
||||||
SwitchButton
|
SwitchButton,
|
||||||
|
Fold,
|
||||||
|
Expand,
|
||||||
|
Menu
|
||||||
} from '@element-plus/icons-vue'
|
} from '@element-plus/icons-vue'
|
||||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||||
import { ElMessageBox } from 'element-plus'
|
import { ElMessageBox } from 'element-plus'
|
||||||
@@ -105,11 +125,46 @@ const router = useRouter()
|
|||||||
// 侧边栏菜单数据
|
// 侧边栏菜单数据
|
||||||
const menus = ref(menuConfig)
|
const menus = ref(menuConfig)
|
||||||
|
|
||||||
|
// 侧边栏收缩状态
|
||||||
|
const isCollapsed = ref(false)
|
||||||
|
|
||||||
|
// 移动端菜单状态
|
||||||
|
const isMobileMenuOpen = ref(false)
|
||||||
|
|
||||||
|
// 检测是否是移动端
|
||||||
|
const isMobile = ref(false)
|
||||||
|
|
||||||
|
const checkMobile = () => {
|
||||||
|
isMobile.value = window.innerWidth <= 768
|
||||||
|
// 移动端默认收起侧边栏
|
||||||
|
if (isMobile.value) {
|
||||||
|
isCollapsed.value = false
|
||||||
|
isMobileMenuOpen.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 获取当前激活的菜单项
|
// 获取当前激活的菜单项
|
||||||
const activeMenu = computed(() => {
|
const activeMenu = computed(() => {
|
||||||
return route.path
|
return route.path
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 切换侧边栏收缩
|
||||||
|
const toggleCollapse = () => {
|
||||||
|
isCollapsed.value = !isCollapsed.value
|
||||||
|
// 保存状态到localStorage
|
||||||
|
localStorage.setItem('sidebarCollapsed', isCollapsed.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换移动端菜单
|
||||||
|
const toggleMobileMenu = () => {
|
||||||
|
isMobileMenuOpen.value = !isMobileMenuOpen.value
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭移动端菜单
|
||||||
|
const closeMobileMenu = () => {
|
||||||
|
isMobileMenuOpen.value = false
|
||||||
|
}
|
||||||
|
|
||||||
// 切换全屏
|
// 切换全屏
|
||||||
const toggleFullScreen = () => {
|
const toggleFullScreen = () => {
|
||||||
if (!document.fullscreenElement) {
|
if (!document.fullscreenElement) {
|
||||||
@@ -129,9 +184,35 @@ const handleLogout = () => {
|
|||||||
type: 'warning'
|
type: 'warning'
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
localStorage.removeItem('token')
|
localStorage.removeItem('token')
|
||||||
|
localStorage.removeItem('tokenExpire')
|
||||||
|
localStorage.removeItem('userInfo')
|
||||||
|
userStore.clearUserInfo()
|
||||||
router.push('/login')
|
router.push('/login')
|
||||||
}).catch(() => {})
|
}).catch(() => {})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 监听路由变化，移动端自动关闭菜单
|
||||||
|
router.afterEach(() => {
|
||||||
|
if (isMobile.value) {
|
||||||
|
closeMobileMenu()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 恢复侧边栏状态
|
||||||
|
const savedState = localStorage.getItem('sidebarCollapsed')
|
||||||
|
if (savedState !== null) {
|
||||||
|
isCollapsed.value = savedState === 'true'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检测设备类型
|
||||||
|
checkMobile()
|
||||||
|
window.addEventListener('resize', checkMobile)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', checkMobile)
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -141,6 +222,18 @@ const handleLogout = () => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 移动端遮罩层 */
|
||||||
|
.mobile-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 998;
|
||||||
|
}
|
||||||
|
|
||||||
/* 侧边栏样式 */
|
/* 侧边栏样式 */
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: 260px;
|
width: 260px;
|
||||||
@@ -148,7 +241,15 @@ const handleLogout = () => {
|
|||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-right: 1px solid #e1e8ed;
|
border-right: 1px solid #e1e8ed;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 20;
|
z-index: 999;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.collapsed {
|
||||||
|
width: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-container {
|
.logo-container {
|
||||||
@@ -159,6 +260,7 @@ const handleLogout = () => {
|
|||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-bottom: 1px solid #e1e8ed;
|
border-bottom: 1px solid #e1e8ed;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-img {
|
.logo-img {
|
||||||
@@ -167,8 +269,15 @@ const handleLogout = () => {
|
|||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.logo-img-mini {
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-scrollbar {
|
.sidebar-scrollbar {
|
||||||
height: calc(100vh - 70px);
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-menu {
|
.sidebar-menu {
|
||||||
@@ -178,6 +287,32 @@ const handleLogout = () => {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 收缩按钮 */
|
||||||
|
.collapse-btn {
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-top: 1px solid #e1e8ed;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #7f8c8d;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-btn:hover {
|
||||||
|
color: #2c3e50;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端菜单按钮 */
|
||||||
|
.mobile-menu-btn {
|
||||||
|
display: none;
|
||||||
|
margin-right: 12px;
|
||||||
|
padding: 8px;
|
||||||
|
color: #34495e;
|
||||||
|
}
|
||||||
|
|
||||||
/* 主容器样式 */
|
/* 主容器样式 */
|
||||||
.main-container {
|
.main-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -185,6 +320,7 @@ const handleLogout = () => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: #f0f2f5;
|
background-color: #f0f2f5;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 顶部导航栏样式 */
|
/* 顶部导航栏样式 */
|
||||||
@@ -197,18 +333,21 @@ const handleLogout = () => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-left {
|
.navbar-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-right {
|
.navbar-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-item {
|
.navbar-item {
|
||||||
@@ -286,6 +425,63 @@ const handleLogout = () => {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 移动端隐藏元素 */
|
||||||
|
.hidden-mobile {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端响应式 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.mobile-overlay {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
position: fixed;
|
||||||
|
left: -260px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
transition: left 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.collapsed {
|
||||||
|
width: 260px;
|
||||||
|
left: -260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-layout.mobile-open .sidebar {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-layout.mobile-open .sidebar.collapsed {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-btn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-btn {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden-mobile {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
:deep(.el-dropdown-menu) {
|
:deep(.el-dropdown-menu) {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: 1px solid #e1e8ed;
|
border: 1px solid #e1e8ed;
|
||||||
|
|||||||
+5
-11
@@ -85,12 +85,10 @@ export const menus = [
|
|||||||
{
|
{
|
||||||
path: '/activity/signin',
|
path: '/activity/signin',
|
||||||
title: '签到活动'
|
title: '签到活动'
|
||||||
},{
|
},
|
||||||
path:'/activity/groupbuy',
|
{
|
||||||
title:'拼团活动',
|
path: '/activity/groupbuy',
|
||||||
},{
|
title: '拼团管理'
|
||||||
path:'/activity/groupbuy-type',
|
|
||||||
title:'拼团类型'
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -166,11 +164,7 @@ export const menus = [
|
|||||||
title: '域名白名单'
|
title: '域名白名单'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/system/setting-group',
|
path: '/system/setting-manage',
|
||||||
title: '配置组管理'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/system/setting-list',
|
|
||||||
title: '配置管理'
|
title: '配置管理'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
+6
-20
@@ -332,18 +332,10 @@ const routes = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/activity/groupbuy',
|
path: '/activity/groupbuy',
|
||||||
name: 'GroupBuyActivity',
|
name: 'GroupBuyManage',
|
||||||
component: () => import('../views/activity/GroupBuyActivity.vue'),
|
component: () => import('../views/activity/GroupBuyManage.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '拼团活动'
|
title: '拼团管理'
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/activity/groupbuy-type',
|
|
||||||
name: 'GroupBuyType',
|
|
||||||
component: () => import('../views/activity/GroupBuyType.vue'),
|
|
||||||
meta: {
|
|
||||||
title: '拼团类型'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@@ -390,15 +382,9 @@ const routes = [
|
|||||||
meta: { title: '域名白名单' }
|
meta: { title: '域名白名单' }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'setting-group',
|
path: 'setting-manage',
|
||||||
name: 'SettingGroup',
|
name: 'SettingManage',
|
||||||
component: () => import('../views/system/SettingGroup.vue'),
|
component: () => import('../views/system/SettingManage.vue'),
|
||||||
meta: { title: '配置组管理' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'setting-list',
|
|
||||||
name: 'SettingList',
|
|
||||||
component: () => import('../views/system/Setting.vue'),
|
|
||||||
meta: { title: '配置管理' }
|
meta: { title: '配置管理' }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
+19
-2
@@ -4,11 +4,28 @@ import {ref} from "vue";
|
|||||||
|
|
||||||
export const useUserStore = defineStore('userStore',() => {
|
export const useUserStore = defineStore('userStore',() => {
|
||||||
|
|
||||||
let userInfo = ref({})
|
// 初始化时从localStorage读取用户信息
|
||||||
|
const savedUserInfo = localStorage.getItem('userInfo')
|
||||||
|
let userInfo = ref(savedUserInfo ? JSON.parse(savedUserInfo) : {})
|
||||||
|
|
||||||
function setUserInfo(u){
|
function setUserInfo(u){
|
||||||
userInfo.value = u
|
userInfo.value = u
|
||||||
|
// 同步保存到localStorage
|
||||||
|
if (u && Object.keys(u).length > 0) {
|
||||||
|
localStorage.setItem('userInfo', JSON.stringify(u))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return {userInfo,setUserInfo}
|
// 清除用户信息
|
||||||
|
function clearUserInfo() {
|
||||||
|
userInfo.value = {}
|
||||||
|
localStorage.removeItem('userInfo')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取用户头像
|
||||||
|
function getUserAvatar() {
|
||||||
|
return userInfo.value?.cover || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
return {userInfo, setUserInfo, clearUserInfo, getUserAvatar}
|
||||||
})
|
})
|
||||||
+140
-13
@@ -1,6 +1,7 @@
|
|||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import router from '@/router'
|
import router from '@/router'
|
||||||
|
import {getRefreshToken,refreshAccessToken} from "@/api/login.js";
|
||||||
|
|
||||||
// 基础URL
|
// 基础URL
|
||||||
const baseUrl = 'https://apiservertest.s1f.ren' // SSL证书有问题
|
const baseUrl = 'https://apiservertest.s1f.ren' // SSL证书有问题
|
||||||
@@ -10,18 +11,100 @@ const baseUrl = 'https://apiservertest.s1f.ren' // SSL证书有问题
|
|||||||
// 检查URL是否需要认证
|
// 检查URL是否需要认证
|
||||||
const urlNeedAuth = (url) => {
|
const urlNeedAuth = (url) => {
|
||||||
// 这里可以添加不需要认证的URL列表
|
// 这里可以添加不需要认证的URL列表
|
||||||
const noAuthUrls = ['/v1/user/login', '/v1/user/check/get_code_img', '/v1/user/register']
|
const noAuthUrls = ['/v1/user/login', '/v1/user/check/get_code_img', '/v1/user/register', '/v1/user/refresh_token']
|
||||||
return !noAuthUrls.some(noAuthUrl => url.includes(noAuthUrl))
|
return !noAuthUrls.some(noAuthUrl => url.includes(noAuthUrl))
|
||||||
}
|
}
|
||||||
|
|
||||||
// 检查token是否过期
|
// 检查token是否过期
|
||||||
const isTokenExpired = () => {
|
const isTokenExpired = () => {
|
||||||
const token = localStorage.getItem('token')
|
const token = localStorage.getItem('token')
|
||||||
|
const expire = localStorage.getItem('tokenExpire')
|
||||||
if (!token) return true
|
if (!token) return true
|
||||||
|
|
||||||
// 这里可以添加token过期检查逻辑，如果有JWT可以解析它
|
// 检查过期时间
|
||||||
// 简单实现，仅检查token是否存在
|
if (expire) {
|
||||||
return false
|
const expireTime = parseInt(expire) * 1000 // 转换为毫秒
|
||||||
|
const now = Date.now()
|
||||||
|
return now >= expireTime
|
||||||
|
}
|
||||||
|
|
||||||
|
// 没有过期时间时，默认认为Token已过期（因为无法验证有效性）
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查token是否即将过期（5分钟内）
|
||||||
|
const isTokenExpiringSoon = () => {
|
||||||
|
const expire = localStorage.getItem('tokenExpire')
|
||||||
|
if (!expire) return false
|
||||||
|
|
||||||
|
const expireTime = parseInt(expire) * 1000 // 转换为毫秒
|
||||||
|
const now = Date.now()
|
||||||
|
const fiveMinutes = 5 * 60 * 1000 // 5分钟
|
||||||
|
|
||||||
|
// 如果已过期，返回false（由isTokenExpired处理）
|
||||||
|
if (now >= expireTime) return false
|
||||||
|
|
||||||
|
// 如果在5分钟内过期，返回true
|
||||||
|
return (expireTime - now) <= fiveMinutes
|
||||||
|
}
|
||||||
|
|
||||||
|
// 正在刷新token的标志
|
||||||
|
let isRefreshing = false
|
||||||
|
// 等待刷新token的请求队列
|
||||||
|
let refreshSubscribers = []
|
||||||
|
|
||||||
|
// 添加请求到队列
|
||||||
|
const subscribeTokenRefresh = (callback) => {
|
||||||
|
refreshSubscribers.push(callback)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 刷新token后执行队列中的请求
|
||||||
|
const onTokenRefreshed = (newToken) => {
|
||||||
|
refreshSubscribers.forEach(callback => callback(newToken))
|
||||||
|
refreshSubscribers = []
|
||||||
|
}
|
||||||
|
|
||||||
|
// 执行token刷新
|
||||||
|
const doRefreshToken = async () => {
|
||||||
|
try {
|
||||||
|
const domain = window.location.hostname
|
||||||
|
// 获取交换token
|
||||||
|
const refreshTokenRes = await getRefreshToken(domain,{
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${localStorage.getItem('token')}`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (refreshTokenRes.data?.code === 200 && refreshTokenRes.data?.data?.refresh_token) {
|
||||||
|
// 使用交换token获取新的access token
|
||||||
|
const newTokenRes = await refreshAccessToken(refreshTokenRes.data.data.refresh_token)
|
||||||
|
|
||||||
|
if (newTokenRes.data?.code === 200 && newTokenRes.data?.data?.token) {
|
||||||
|
const { token, expire } = newTokenRes.data.data
|
||||||
|
localStorage.setItem('token', token)
|
||||||
|
if (expire) {
|
||||||
|
localStorage.setItem('tokenExpire', expire.toString())
|
||||||
|
}
|
||||||
|
return token
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 刷新失败，触发登出逻辑
|
||||||
|
localStorage.removeItem('token')
|
||||||
|
localStorage.removeItem('tokenExpire')
|
||||||
|
localStorage.removeItem('userInfo')
|
||||||
|
ElMessage.warning('登录过期，请重新登录')
|
||||||
|
router.push('/login')
|
||||||
|
return null
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Token刷新失败:', error)
|
||||||
|
// 刷新失败，触发登出逻辑
|
||||||
|
localStorage.removeItem('token')
|
||||||
|
localStorage.removeItem('tokenExpire')
|
||||||
|
localStorage.removeItem('userInfo')
|
||||||
|
ElMessage.warning('登录过期，请重新登录')
|
||||||
|
router.push('/login')
|
||||||
|
return null
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class Request {
|
class Request {
|
||||||
@@ -122,19 +205,63 @@ export const http2 = axios.create({
|
|||||||
headers: {},
|
headers: {},
|
||||||
});
|
});
|
||||||
|
|
||||||
http2.interceptors.request.use(config => {
|
http2.interceptors.request.use(async config => {
|
||||||
const token = localStorage.getItem('token'); // 假设 token 存储在 localStorage
|
const token = localStorage.getItem('token')
|
||||||
if(urlNeedAuth(config.url) && isTokenExpired()){
|
|
||||||
if (token){
|
// 检查是否需要认证
|
||||||
localStorage.removeItem('token');
|
if (urlNeedAuth(config.url)) {
|
||||||
ElMessage.warning('登陆过期，请重新登陆')
|
// 检查token是否已过期
|
||||||
|
if (isTokenExpired()) {
|
||||||
|
if (token) {
|
||||||
|
localStorage.removeItem('token')
|
||||||
|
localStorage.removeItem('tokenExpire')
|
||||||
|
localStorage.removeItem('userInfo')
|
||||||
|
ElMessage.warning('登录过期，请重新登录')
|
||||||
}
|
}
|
||||||
router.push('/login')
|
router.push('/login')
|
||||||
return Promise.reject();
|
return Promise.reject(new Error('Token已过期'))
|
||||||
}
|
}
|
||||||
config.headers.Authorization = `Bearer ${token}`;
|
|
||||||
|
|
||||||
config.url = config.url
|
// 检查token是否即将过期，进行无感刷新
|
||||||
|
if (isTokenExpiringSoon() && !isRefreshing) {
|
||||||
|
isRefreshing = true
|
||||||
|
try {
|
||||||
|
const newToken = await doRefreshToken()
|
||||||
|
if (newToken) {
|
||||||
|
console.log('Token已无感刷新')
|
||||||
|
onTokenRefreshed(newToken)
|
||||||
|
config.headers.Authorization = `Bearer ${newToken}`
|
||||||
|
} else {
|
||||||
|
// 刷新失败，doRefreshToken已处理登出逻辑，直接拒绝请求
|
||||||
|
return Promise.reject(new Error('Token刷新失败'))
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Token刷新异常:', error)
|
||||||
|
// 刷新异常，doRefreshToken已处理登出逻辑，直接拒绝请求
|
||||||
|
return Promise.reject(error)
|
||||||
|
} finally {
|
||||||
|
isRefreshing = false
|
||||||
|
}
|
||||||
|
} else if (isRefreshing) {
|
||||||
|
// 正在刷新，等待刷新完成
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
subscribeTokenRefresh((newToken) => {
|
||||||
|
if (newToken) {
|
||||||
|
config.headers.Authorization = `Bearer ${newToken}`
|
||||||
|
// 重新发送原始请求
|
||||||
|
resolve(config)
|
||||||
|
} else {
|
||||||
|
reject(new Error('Token刷新失败'))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 正常情况，直接使用token
|
||||||
|
config.headers.Authorization = `Bearer ${token}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 不需要认证的请求，不添加token
|
||||||
|
|
||||||
return config
|
return config
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
+54
-2
@@ -18,7 +18,7 @@ export const formatDate = (dateStr) => {
|
|||||||
return `${year}-${month}-${day} ${hours}:${minutes}`
|
return `${year}-${month}-${day} ${hours}:${minutes}`
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 时间格式转 Unix 时间戳（毫秒级）
|
* 时间格式转 Unix 时间戳（秒级）
|
||||||
* @param {string|Date} time - 输入时间（支持 '2025-10-28 00:00:00'、'2025/10/28'、Date 对象等）
|
* @param {string|Date} time - 输入时间（支持 '2025-10-28 00:00:00'、'2025/10/28'、Date 对象等）
|
||||||
* @returns {number|null} 转换后的毫秒级时间戳（失败返回 null）
|
* @returns {number|null} 转换后的毫秒级时间戳（失败返回 null）
|
||||||
*/
|
*/
|
||||||
@@ -50,10 +50,62 @@ export function timeToTimestamp(time) {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
return Math.floor(timestamp / 1000); // 返回毫秒级时间戳（如 1751107200000）
|
return Math.floor(timestamp / 1000); // 返回秒级时间戳（如 1751107200000）
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export function reducenum(num){
|
export function reducenum(num){
|
||||||
return num / 100
|
return num / 100
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将 ISO 格式时间字符串转换为毫秒级时间戳（用于时间选择器）
|
||||||
|
* @param {string|Date|number} time - 输入时间（支持 ISO 格式字符串如 '2023-11-08T01:10:00+08:00'、Date 对象、时间戳等）
|
||||||
|
* @returns {number|null} 转换后的毫秒级时间戳（失败或无效时间返回 null）
|
||||||
|
*/
|
||||||
|
export function isoToMilliseconds(time) {
|
||||||
|
// 处理空值
|
||||||
|
if (!time || time === null || time === undefined) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理特殊的无效时间标识
|
||||||
|
if (typeof time === 'string' && (time === '0001-01-01T00:00:00Z' || time === '0001-01-01T00:00:00+00:00')) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果已经是数字（时间戳），直接返回
|
||||||
|
if (typeof time === 'number') {
|
||||||
|
// 如果是秒级时间戳（小于 13 位），转换为毫秒
|
||||||
|
if (time < 1000000000000) {
|
||||||
|
return time * 1000
|
||||||
|
}
|
||||||
|
return time
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理 Date 对象
|
||||||
|
if (time instanceof Date) {
|
||||||
|
const timestamp = time.getTime()
|
||||||
|
return isNaN(timestamp) ? null : timestamp
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理字符串格式
|
||||||
|
if (typeof time === 'string') {
|
||||||
|
try {
|
||||||
|
const date = new Date(time)
|
||||||
|
const timestamp = date.getTime()
|
||||||
|
|
||||||
|
// 检查是否为有效时间
|
||||||
|
if (isNaN(timestamp)) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return timestamp
|
||||||
|
} catch (error) {
|
||||||
|
console.error('时间转换失败:', error)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null
|
||||||
|
}
|
||||||
+9
-1
@@ -105,16 +105,24 @@ const forgetPassword = () => {
|
|||||||
const handleLogin = () => {
|
const handleLogin = () => {
|
||||||
loginFormRef.value?.validate(async valid =>{
|
loginFormRef.value?.validate(async valid =>{
|
||||||
window.localStorage.removeItem('token')
|
window.localStorage.removeItem('token')
|
||||||
|
window.localStorage.removeItem('tokenExpire')
|
||||||
|
window.localStorage.removeItem('userInfo')
|
||||||
if (valid) {
|
if (valid) {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
let resp = await userLogin(loginForm.username, loginForm.password)
|
let resp = await userLogin(loginForm.username, loginForm.password)
|
||||||
console.log("login:",resp)
|
console.log("login:",resp)
|
||||||
loading.value = false
|
loading.value = false
|
||||||
if(resp.code === 200){
|
if(resp.code === 200){
|
||||||
|
// 保存token和过期时间
|
||||||
|
window.localStorage.setItem('token', resp.data.token)
|
||||||
|
if (resp.data.expire) {
|
||||||
|
window.localStorage.setItem('tokenExpire', resp.data.expire.toString())
|
||||||
|
}
|
||||||
|
|
||||||
window.localStorage.setItem('token',resp.data.token)
|
|
||||||
let userInfo = await getUserInfo()
|
let userInfo = await getUserInfo()
|
||||||
if(userInfo.data.is_admin){
|
if(userInfo.data.is_admin){
|
||||||
|
// 保存用户信息到localStorage
|
||||||
|
window.localStorage.setItem('userInfo', JSON.stringify(userInfo.data))
|
||||||
await router.push('/dashboard')
|
await router.push('/dashboard')
|
||||||
} else {
|
} else {
|
||||||
ElMessage.warning('你不是管理员，不能登陆到后台控制面板')
|
ElMessage.warning('你不是管理员，不能登陆到后台控制面板')
|
||||||
|
|||||||
@@ -0,0 +1,906 @@
|
|||||||
|
<template>
|
||||||
|
<div class="group-buy-manage-container">
|
||||||
|
<el-card class="main-container" shadow="never">
|
||||||
|
<el-tabs v-model="activeTab" class="group-buy-tabs">
|
||||||
|
<!-- 拼团活动标签页 -->
|
||||||
|
<el-tab-pane label="拼团活动" name="activity">
|
||||||
|
<div class="header-actions">
|
||||||
|
<el-button type="primary" icon="Plus" @click="openCreateDialog">
|
||||||
|
创建随机队伍
|
||||||
|
</el-button>
|
||||||
|
<el-button type="success" icon="Download" @click="handleExport" :loading="exportLoading">
|
||||||
|
导出成功队伍
|
||||||
|
</el-button>
|
||||||
|
<el-button type="info" icon="Refresh" @click="fetchGroupList" :loading="activityLoading">
|
||||||
|
刷新列表
|
||||||
|
</el-button>
|
||||||
|
<el-button type="danger" @click="handleClearAll">
|
||||||
|
清除所有队伍
|
||||||
|
</el-button>
|
||||||
|
<el-button type="warning" @click="showClearUserDialog = true">
|
||||||
|
清除用户队伍
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-section">
|
||||||
|
<el-table :data="groupList" v-loading="activityLoading" stripe border>
|
||||||
|
<el-table-column prop="id" label="队伍ID" />
|
||||||
|
<el-table-column prop="name" label="队伍名称" min-width="150" />
|
||||||
|
<el-table-column prop="currentMembers" label="当前人数" width="100" align="center" />
|
||||||
|
<el-table-column prop="maxMembers" label="需要人数" width="100" align="center" />
|
||||||
|
<el-table-column label="状态" width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="getStatusType(row.status)">
|
||||||
|
{{ getStatusText(row.status) }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="280" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button
|
||||||
|
v-if="row.status === 'pending'"
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
@click="handleAddRandomUser(row)"
|
||||||
|
:loading="row.addingUser"
|
||||||
|
>
|
||||||
|
添加伪人
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="row.status === 'success'"
|
||||||
|
type="success"
|
||||||
|
size="small"
|
||||||
|
@click="handleSetOrder(row)"
|
||||||
|
:loading="row.settingOrder"
|
||||||
|
>
|
||||||
|
下发订单
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="info"
|
||||||
|
size="small"
|
||||||
|
@click="handleViewMembers(row)"
|
||||||
|
>
|
||||||
|
查看详情
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
size="small"
|
||||||
|
@click="handleRemoveGroup(row)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<!-- 拼团类型标签页 -->
|
||||||
|
<el-tab-pane label="拼团类型" name="type">
|
||||||
|
<div class="header-actions">
|
||||||
|
<el-button type="primary" icon="Plus" @click="handleAddType">新增类型</el-button>
|
||||||
|
<el-select v-model="searchTag" placeholder="请选择标签" style="width: 180px; margin-left: 12px" @change="handleTagChange">
|
||||||
|
<el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag" />
|
||||||
|
</el-select>
|
||||||
|
<el-input v-model="searchKey" placeholder="关键词搜索" style="width: 200px; margin-left: 12px" clearable :disabled="!searchTag" @keyup.enter="fetchTypeList" />
|
||||||
|
<el-button type="info" icon="Refresh" @click="fetchTypeList" :loading="typeLoading" :disabled="!searchTag" style="margin-left: 12px">刷新</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-section">
|
||||||
|
<el-empty v-if="!searchTag" description="请先选择标签" />
|
||||||
|
<template v-else>
|
||||||
|
<el-table :data="typeTableData" v-loading="typeLoading" stripe border>
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="name" label="名称" min-width="120" />
|
||||||
|
<el-table-column label="价格" width="120">
|
||||||
|
<template #default="{ row }">¥{{ (row.price / 100).toFixed(2) }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="续费价格" width="120">
|
||||||
|
<template #default="{ row }">¥{{ (row.renewPrice / 100).toFixed(2) }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="maxPerson" label="拼团人数" width="100" align="center" />
|
||||||
|
<el-table-column prop="tag" label="标签" width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag v-if="row.tag" type="info">{{ row.tag }}</el-tag>
|
||||||
|
<span v-else>-</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="过期时间" width="180">
|
||||||
|
<template #default="{ row }">{{ row.expireTime ? formatTime(row.expireTime) : '永久' }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="note" label="备注" min-width="150" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="160" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" size="small" @click="handleEditType(row)">编辑</el-button>
|
||||||
|
<el-button type="danger" size="small" @click="handleDeleteType(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pagination-wrapper">
|
||||||
|
<el-pagination v-model:current-page="typePage" v-model:page-size="typePageSize" :total="typeTotal" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next" @size-change="fetchTypeList" @current-change="fetchTypeList" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 创建随机队伍对话框 -->
|
||||||
|
<el-dialog
|
||||||
|
v-model="showCreateDialog"
|
||||||
|
title="创建随机伪人队伍"
|
||||||
|
width="500px"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
>
|
||||||
|
<el-form :model="createForm" :rules="createRules" ref="createFormRef" label-width="100px">
|
||||||
|
<el-form-item label="队伍名称" prop="name">
|
||||||
|
<el-input v-model="createForm.name" placeholder="请输入队伍名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="标签" prop="tag">
|
||||||
|
<el-select v-model="createForm.tag" placeholder="请选择标签" style="width: 100%" @change="handleCreateTagChange">
|
||||||
|
<el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="拼团类型" prop="groupBuyTypeId">
|
||||||
|
<el-select v-model="createForm.groupBuyTypeId" placeholder="请先选择标签" :disabled="!createForm.tag" style="width: 100%">
|
||||||
|
<el-option v-for="item in createTypeList" :key="item.id" :label="`${item.name} (${item.maxPerson}人)`" :value="item.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="showCreateDialog = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="handleCreate" :loading="createLoading">
|
||||||
|
创建
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 查看成员对话框 -->
|
||||||
|
<el-dialog
|
||||||
|
v-model="showMembersDialog"
|
||||||
|
title="队伍成员列表"
|
||||||
|
width="700px"
|
||||||
|
>
|
||||||
|
<el-table :data="currentMembers" border stripe>
|
||||||
|
<el-table-column label="头像" width="80" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-avatar :size="50" :src="row.cover" v-if="row.cover">
|
||||||
|
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
|
||||||
|
</el-avatar>
|
||||||
|
<el-avatar :size="50" v-else>
|
||||||
|
{{ row.username?.charAt(0) || '?' }}
|
||||||
|
</el-avatar>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="userId" label="用户ID" width="100" />
|
||||||
|
<el-table-column prop="username" label="用户名" min-width="120" />
|
||||||
|
<el-table-column label="队长" width="80" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag v-if="row.teamLeader" type="warning" size="small">队长</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="120" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="danger" size="small" @click="handleClearUserGroups(row.userId)">清除队伍</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 清除用户队伍对话框 -->
|
||||||
|
<el-dialog
|
||||||
|
v-model="showClearUserDialog"
|
||||||
|
title="清除指定用户的所有队伍"
|
||||||
|
width="400px"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
>
|
||||||
|
<el-form :model="clearUserForm" label-width="80px">
|
||||||
|
<el-form-item label="用户ID">
|
||||||
|
<el-input v-model="clearUserForm.userId" placeholder="请输入用户ID" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="showClearUserDialog = false">取消</el-button>
|
||||||
|
<el-button type="danger" @click="handleClearUserSubmit" :loading="clearUserLoading">确认清除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 拼团类型表单对话框 -->
|
||||||
|
<el-dialog v-model="typeDialogVisible" :title="isEditType ? '编辑拼团类型' : '新增拼团类型'" width="500px" :close-on-click-modal="false">
|
||||||
|
<el-form :model="typeForm" :rules="typeRules" ref="typeFormRef" label-width="100px">
|
||||||
|
<el-form-item label="名称" prop="name">
|
||||||
|
<el-input v-model="typeForm.name" placeholder="请输入名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="价格(分)" prop="price">
|
||||||
|
<el-input-number v-model="typeForm.price" :min="0" style="width: 100%" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="续费价格(分)" prop="renewPrice">
|
||||||
|
<el-input-number v-model="typeForm.renewPrice" :min="0" style="width: 100%" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="拼团人数" prop="maxPerson">
|
||||||
|
<el-input-number v-model="typeForm.maxPerson" :min="2" :max="100" style="width: 100%" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="标签" prop="tag">
|
||||||
|
<el-select v-model="typeForm.tag" placeholder="选择标签" filterable allow-create style="width: 100%">
|
||||||
|
<el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="过期时间" prop="expireTime">
|
||||||
|
<el-date-picker v-model="typeForm.expireTime" type="datetime" placeholder="选择过期时间" style="width: 100%" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注字段">
|
||||||
|
<div class="note-fields-container">
|
||||||
|
<el-button type="primary" size="small" @click="addNoteField" style="margin-bottom: 10px">+ 添加字段</el-button>
|
||||||
|
<el-table :data="typeForm.noteFields" border size="small" v-if="typeForm.noteFields.length">
|
||||||
|
<el-table-column label="名称" min-width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-input v-model="row.label" placeholder="如：内存" size="small" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="默认值" min-width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-input v-model="row.defaultValue" placeholder="如：20GB" size="small" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="60" align="center">
|
||||||
|
<template #default="{ $index }">
|
||||||
|
<el-button type="danger" size="small" link @click="removeNoteField($index)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="typeDialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="handleTypeSubmit" :loading="typeSubmitLoading">确定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted, watch } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import {
|
||||||
|
getGroupBuyList,
|
||||||
|
getGroupBuyDetail,
|
||||||
|
addRandomUser,
|
||||||
|
addRandomGroup,
|
||||||
|
exportIdcInfo,
|
||||||
|
setOrder
|
||||||
|
} from '@/api/admin/activity'
|
||||||
|
import {
|
||||||
|
getGroupBuyTypeList,
|
||||||
|
getGroupBuyTypeTags,
|
||||||
|
removeGroupBuy,
|
||||||
|
clearAllGroupBuy,
|
||||||
|
clearUserGroupBuy,
|
||||||
|
addGroupBuyType,
|
||||||
|
updateGroupBuyType,
|
||||||
|
deleteGroupBuyType
|
||||||
|
} from '@/api/groupBuy'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
// 当前激活的标签页
|
||||||
|
const activeTab = ref('activity')
|
||||||
|
|
||||||
|
// ==================== 拼团活动相关 ====================
|
||||||
|
const activityLoading = ref(false)
|
||||||
|
const exportLoading = ref(false)
|
||||||
|
const createLoading = ref(false)
|
||||||
|
const groupList = ref([])
|
||||||
|
|
||||||
|
const showCreateDialog = ref(false)
|
||||||
|
const showMembersDialog = ref(false)
|
||||||
|
const showClearUserDialog = ref(false)
|
||||||
|
const currentMembers = ref([])
|
||||||
|
const clearUserLoading = ref(false)
|
||||||
|
const clearUserForm = reactive({ userId: '' })
|
||||||
|
|
||||||
|
const createFormRef = ref(null)
|
||||||
|
const createForm = reactive({
|
||||||
|
name: '',
|
||||||
|
tag: '',
|
||||||
|
groupBuyTypeId: ''
|
||||||
|
})
|
||||||
|
const createTypeList = ref([])
|
||||||
|
const tagList = ref([])
|
||||||
|
|
||||||
|
const createRules = {
|
||||||
|
name: [
|
||||||
|
{ required: true, message: '请输入队伍名称', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
tag: [
|
||||||
|
{ required: true, message: '请选择标签', trigger: 'change' }
|
||||||
|
],
|
||||||
|
groupBuyTypeId: [
|
||||||
|
{ required: true, message: '请选择拼团类型', trigger: 'change' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 拼团类型相关 ====================
|
||||||
|
const typeLoading = ref(false)
|
||||||
|
const typeTableData = ref([])
|
||||||
|
const typeTotal = ref(0)
|
||||||
|
const typePage = ref(1)
|
||||||
|
const typePageSize = ref(10)
|
||||||
|
const searchKey = ref('')
|
||||||
|
const searchTag = ref('')
|
||||||
|
const typeDialogVisible = ref(false)
|
||||||
|
const isEditType = ref(false)
|
||||||
|
const typeSubmitLoading = ref(false)
|
||||||
|
const typeFormRef = ref(null)
|
||||||
|
|
||||||
|
const typeForm = reactive({
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
price: 0,
|
||||||
|
renewPrice: 0,
|
||||||
|
maxPerson: 5,
|
||||||
|
tag: '',
|
||||||
|
expireTime: null,
|
||||||
|
noteFields: []
|
||||||
|
})
|
||||||
|
|
||||||
|
const typeRules = {
|
||||||
|
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||||
|
price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
|
||||||
|
renewPrice: [{ required: true, message: '请输入续费价格', trigger: 'blur' }],
|
||||||
|
maxPerson: [{ required: true, message: '请输入拼团人数', trigger: 'blur' }],
|
||||||
|
tag: [{ required: true, message: '请选择标签', trigger: 'change' }],
|
||||||
|
expireTime: [{ required: true, message: '请选择过期时间', trigger: 'change' }]
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 通用方法 ====================
|
||||||
|
const formatTime = (timeStr) => {
|
||||||
|
if (!timeStr) return '-'
|
||||||
|
return new Date(timeStr).toLocaleString('zh-CN')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取标签列表
|
||||||
|
const fetchTags = async () => {
|
||||||
|
try {
|
||||||
|
const res = await getGroupBuyTypeTags()
|
||||||
|
if (res.code === 200) {
|
||||||
|
tagList.value = res.data || []
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取标签失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 拼团活动方法 ====================
|
||||||
|
// 根据 tag 获取拼团类型列表（用于创建对话框）
|
||||||
|
const fetchCreateTypeListByTag = async (tag) => {
|
||||||
|
try {
|
||||||
|
const res = await getGroupBuyTypeList({ page: 1, count: 100, tag })
|
||||||
|
if (res.code === 200) {
|
||||||
|
createTypeList.value = res.data?.data || []
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取拼团类型失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// tag 变化时获取对应的拼团类型（创建对话框）
|
||||||
|
const handleCreateTagChange = (tag) => {
|
||||||
|
createForm.groupBuyTypeId = ''
|
||||||
|
createTypeList.value = []
|
||||||
|
if (tag) {
|
||||||
|
fetchCreateTypeListByTag(tag)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开创建对话框
|
||||||
|
const openCreateDialog = () => {
|
||||||
|
createForm.name = ''
|
||||||
|
createForm.tag = ''
|
||||||
|
createForm.groupBuyTypeId = ''
|
||||||
|
createTypeList.value = []
|
||||||
|
fetchTags()
|
||||||
|
showCreateDialog.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取队伍列表
|
||||||
|
const fetchGroupList = async () => {
|
||||||
|
activityLoading.value = true
|
||||||
|
try {
|
||||||
|
const res = await getGroupBuyList()
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
const allGroups = res.data.data.group_buy_list || []
|
||||||
|
const lackGroups = res.data.data.lack_group_buy_list || []
|
||||||
|
const successGroups = res.data.data.success_group_buy_list || []
|
||||||
|
|
||||||
|
const successIds = successGroups.map(g => g.group_buy_id)
|
||||||
|
const lackIds = lackGroups.map(g => g.group_buy_id)
|
||||||
|
|
||||||
|
groupList.value = allGroups.map(group => {
|
||||||
|
let status = 'empty'
|
||||||
|
if (successIds.includes(group.group_buy_id)) {
|
||||||
|
status = 'success'
|
||||||
|
} else if (lackIds.includes(group.group_buy_id)) {
|
||||||
|
status = 'pending'
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: group.group_buy_id,
|
||||||
|
name: group.name,
|
||||||
|
type: group.maxPerson === 5 ? 0 : 1,
|
||||||
|
currentMembers: group.users?.length || 0,
|
||||||
|
maxMembers: group.maxPerson,
|
||||||
|
status: status,
|
||||||
|
createTime: group.createTime || '-',
|
||||||
|
members: group.users || [],
|
||||||
|
addingUser: false,
|
||||||
|
settingOrder: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
ElMessage.success(`加载成功，共 ${allGroups.length} 个队伍`)
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.message || '获取队伍列表失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取队伍列表出错:', error)
|
||||||
|
ElMessage.error('网络错误，请稍后重试')
|
||||||
|
} finally {
|
||||||
|
activityLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStatusText = (status) => {
|
||||||
|
const statusMap = {
|
||||||
|
'empty': '空队伍',
|
||||||
|
'pending': '进行中',
|
||||||
|
'success': '已满员'
|
||||||
|
}
|
||||||
|
return statusMap[status] || status
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStatusType = (status) => {
|
||||||
|
const typeMap = {
|
||||||
|
'empty': 'info',
|
||||||
|
'pending': 'warning',
|
||||||
|
'success': 'success'
|
||||||
|
}
|
||||||
|
return typeMap[status] || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCreate = async () => {
|
||||||
|
if (!createFormRef.value) return
|
||||||
|
|
||||||
|
await createFormRef.value.validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
createLoading.value = true
|
||||||
|
try {
|
||||||
|
const res = await addRandomGroup({ name: createForm.name, group_buy_type_id: String(createForm.groupBuyTypeId) })
|
||||||
|
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
ElMessage.success(`创建成功！队伍ID: ${res.data.group_buy_id}`)
|
||||||
|
showCreateDialog.value = false
|
||||||
|
createForm.name = ''
|
||||||
|
createForm.groupBuyTypeId = ''
|
||||||
|
fetchGroupList()
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.message || '创建失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('创建队伍出错:', error)
|
||||||
|
ElMessage.error('网络错误，请稍后重试')
|
||||||
|
} finally {
|
||||||
|
createLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAddRandomUser = async (row) => {
|
||||||
|
row.addingUser = true
|
||||||
|
try {
|
||||||
|
const res = await addRandomUser(row.id)
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
ElMessage.success('添加伪人成功')
|
||||||
|
fetchGroupList()
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.message || '添加伪人失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('添加伪人出错:', error)
|
||||||
|
ElMessage.error('网络错误，请稍后重试')
|
||||||
|
} finally {
|
||||||
|
row.addingUser = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSetOrder = async (row) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm(
|
||||||
|
'确定要为该队伍下发订单吗？',
|
||||||
|
'确认操作',
|
||||||
|
{
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
row.settingOrder = true
|
||||||
|
try {
|
||||||
|
const res = await setOrder(row.id)
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
ElMessage.success('订单下发成功')
|
||||||
|
fetchGroupList()
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.message || '订单下发失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('下发订单出错:', error)
|
||||||
|
ElMessage.error('网络错误，请稍后重试')
|
||||||
|
} finally {
|
||||||
|
row.settingOrder = false
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// 用户取消操作
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleViewMembers = async (row) => {
|
||||||
|
try {
|
||||||
|
const res = await getGroupBuyDetail(row.id)
|
||||||
|
if (res && res.data && res.data.code === 200) {
|
||||||
|
const detail = res.data.data
|
||||||
|
currentMembers.value = (detail.users || []).map(member => ({
|
||||||
|
userId: member.user_id,
|
||||||
|
username: member.user_name || `用户${member.user_id}`,
|
||||||
|
cover: member.cover || '',
|
||||||
|
teamLeader: member.team_leader || false,
|
||||||
|
idcUid: member.idc_uid || '-',
|
||||||
|
idcPhone: member.idc_phone || '-'
|
||||||
|
}))
|
||||||
|
|
||||||
|
row.name = detail.name
|
||||||
|
row.currentMembers = detail.users?.length || 0
|
||||||
|
row.maxMembers = detail.maxPerson
|
||||||
|
row.members = detail.users || []
|
||||||
|
} else {
|
||||||
|
currentMembers.value = row.members.map(member => ({
|
||||||
|
userId: member.user_id,
|
||||||
|
username: member.user_name || `用户${member.user_id}`,
|
||||||
|
cover: member.cover || '',
|
||||||
|
teamLeader: member.team_leader || false,
|
||||||
|
idcUid: member.idc_uid || '-',
|
||||||
|
idcPhone: member.idc_phone || '-'
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
showMembersDialog.value = true
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取成员信息失败:', error)
|
||||||
|
currentMembers.value = row.members.map(member => ({
|
||||||
|
userId: member.user_id,
|
||||||
|
username: member.user_name || `用户${member.user_id}`,
|
||||||
|
cover: member.cover || '',
|
||||||
|
teamLeader: member.team_leader || false,
|
||||||
|
idcUid: member.idc_uid || '-',
|
||||||
|
idcPhone: member.idc_phone || '-'
|
||||||
|
}))
|
||||||
|
showMembersDialog.value = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExport = async () => {
|
||||||
|
exportLoading.value = true
|
||||||
|
try {
|
||||||
|
const res = await exportIdcInfo()
|
||||||
|
|
||||||
|
if (res.data && res.data.code === 200) {
|
||||||
|
const jsonStr = JSON.stringify(res.data.data, null, 2)
|
||||||
|
const blob = new Blob([jsonStr], { type: 'application/json' })
|
||||||
|
const url = window.URL.createObjectURL(blob)
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = url
|
||||||
|
link.download = `拼团成功队伍_${new Date().getTime()}.json`
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
window.URL.revokeObjectURL(url)
|
||||||
|
|
||||||
|
ElMessage.success('导出成功')
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.data?.message || '导出失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('导出出错:', error)
|
||||||
|
ElMessage.error('导出失败，请稍后重试')
|
||||||
|
} finally {
|
||||||
|
exportLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRemoveGroup = async (row) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('确定要删除该队伍吗？', '确认删除', { type: 'warning' })
|
||||||
|
const res = await removeGroupBuy(row.id)
|
||||||
|
if (res.code === 200) {
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
fetchGroupList()
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.message || '删除失败')
|
||||||
|
}
|
||||||
|
} catch { /* 取消 */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClearAll = async () => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('确定要清除所有队伍吗？此操作不可恢复！', '危险操作', { type: 'error', confirmButtonText: '确定清除' })
|
||||||
|
const res = await clearAllGroupBuy()
|
||||||
|
if (res.code === 200) {
|
||||||
|
ElMessage.success('已清除所有队伍')
|
||||||
|
fetchGroupList()
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.message || '清除失败')
|
||||||
|
}
|
||||||
|
} catch { /* 取消 */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClearUserGroups = async (userId) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm(`确定要清除用户 ${userId} 的所有队伍吗？`, '确认操作', { type: 'warning' })
|
||||||
|
const res = await clearUserGroupBuy(userId)
|
||||||
|
if (res.code === 200) {
|
||||||
|
ElMessage.success('清除成功')
|
||||||
|
showMembersDialog.value = false
|
||||||
|
fetchGroupList()
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.message || '清除失败')
|
||||||
|
}
|
||||||
|
} catch { /* 取消 */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClearUserSubmit = async () => {
|
||||||
|
if (!clearUserForm.userId) {
|
||||||
|
ElMessage.warning('请输入用户ID')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
clearUserLoading.value = true
|
||||||
|
try {
|
||||||
|
const res = await clearUserGroupBuy(clearUserForm.userId)
|
||||||
|
if (res.code === 200) {
|
||||||
|
ElMessage.success('清除成功')
|
||||||
|
showClearUserDialog.value = false
|
||||||
|
clearUserForm.userId = ''
|
||||||
|
fetchGroupList()
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.message || '清除失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('清除用户队伍失败:', error)
|
||||||
|
ElMessage.error('网络错误')
|
||||||
|
} finally {
|
||||||
|
clearUserLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 拼团类型方法 ====================
|
||||||
|
const fetchTypeList = async () => {
|
||||||
|
typeLoading.value = true
|
||||||
|
try {
|
||||||
|
const res = await getGroupBuyTypeList({ page: typePage.value, count: typePageSize.value, key: searchKey.value || undefined, tag: searchTag.value || undefined })
|
||||||
|
if (res.code === 200) {
|
||||||
|
typeTableData.value = res.data?.data || []
|
||||||
|
typeTotal.value = res.data?.all_count || 0
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.data.message || '获取列表失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取列表失败:', error)
|
||||||
|
ElMessage.error('网络错误')
|
||||||
|
} finally {
|
||||||
|
typeLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTagChange = (tag) => {
|
||||||
|
typePage.value = 1
|
||||||
|
searchKey.value = ''
|
||||||
|
typeTableData.value = []
|
||||||
|
typeTotal.value = 0
|
||||||
|
if (tag) {
|
||||||
|
fetchTypeList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAddType = () => {
|
||||||
|
isEditType.value = false
|
||||||
|
Object.assign(typeForm, { id: '', name: '', price: 0, renewPrice: 0, maxPerson: 5, tag: '', expireTime: null, noteFields: [] })
|
||||||
|
typeDialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEditType = (row) => {
|
||||||
|
isEditType.value = true
|
||||||
|
let noteFields = []
|
||||||
|
try {
|
||||||
|
noteFields = row.note ? JSON.parse(row.note) : []
|
||||||
|
} catch { noteFields = [] }
|
||||||
|
Object.assign(typeForm, { id: row.id, name: row.name, price: row.price, renewPrice: row.renewPrice, maxPerson: row.maxPerson, tag: row.tag || '', expireTime: row.expireTime || null, noteFields })
|
||||||
|
typeDialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const addNoteField = () => {
|
||||||
|
typeForm.noteFields.push({ label: '', defaultValue: '' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const removeNoteField = (index) => {
|
||||||
|
typeForm.noteFields.splice(index, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTypeSubmit = async () => {
|
||||||
|
if (!typeFormRef.value) return
|
||||||
|
await typeFormRef.value.validate(async (valid) => {
|
||||||
|
if (!valid) return
|
||||||
|
typeSubmitLoading.value = true
|
||||||
|
try {
|
||||||
|
const noteJson = JSON.stringify(typeForm.noteFields.filter(f => f.label))
|
||||||
|
const data = {
|
||||||
|
name: typeForm.name,
|
||||||
|
price: String(typeForm.price),
|
||||||
|
renew_price: String(typeForm.renewPrice),
|
||||||
|
max_person: String(typeForm.maxPerson),
|
||||||
|
tag: typeForm.tag,
|
||||||
|
expire_time: typeForm.expireTime ? Math.floor(new Date(typeForm.expireTime).getTime() / 1000) : 0,
|
||||||
|
note: noteJson
|
||||||
|
}
|
||||||
|
if (isEditType.value) data.id = String(typeForm.id)
|
||||||
|
const res = isEditType.value ? await updateGroupBuyType(data) : await addGroupBuyType(data)
|
||||||
|
if (res.code === 200) {
|
||||||
|
ElMessage.success(isEditType.value ? '修改成功' : '新增成功')
|
||||||
|
typeDialogVisible.value = false
|
||||||
|
fetchTypeList()
|
||||||
|
fetchTags()
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.message || '操作失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('提交失败:', error)
|
||||||
|
ElMessage.error('网络错误')
|
||||||
|
} finally {
|
||||||
|
typeSubmitLoading.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDeleteType = async (row) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('确定要删除该拼团类型吗？', '确认删除', { type: 'warning' })
|
||||||
|
const res = await deleteGroupBuyType(row.id)
|
||||||
|
if (res.code === 200) {
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
fetchTypeList()
|
||||||
|
fetchTags()
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.data.message || '删除失败')
|
||||||
|
}
|
||||||
|
} catch { /* 取消 */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听标签页切换
|
||||||
|
watch(activeTab, (newVal) => {
|
||||||
|
if (newVal === 'activity') {
|
||||||
|
fetchGroupList()
|
||||||
|
} else if (newVal === 'type') {
|
||||||
|
fetchTags()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
onMounted(() => {
|
||||||
|
fetchGroupList()
|
||||||
|
fetchTags()
|
||||||
|
|
||||||
|
// 检查路由参数决定初始标签页
|
||||||
|
if (route.query.tab === 'type') {
|
||||||
|
activeTab.value = 'type'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.group-buy-manage-container {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
border: 1px solid #e1e8ed;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-buy-tabs {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 16px 0;
|
||||||
|
border-bottom: 1px solid #e1e8ed;
|
||||||
|
background: #fafbfc;
|
||||||
|
margin: 0 -20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-section {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-wrapper {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-fields-container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格样式优化 */
|
||||||
|
:deep(.el-table) {
|
||||||
|
border: none;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table__header) {
|
||||||
|
background: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table th) {
|
||||||
|
background: #f8f9fa !important;
|
||||||
|
border-bottom: 2px solid #e1e8ed;
|
||||||
|
color: #2c3e50;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table td) {
|
||||||
|
border-bottom: 1px solid #f0f2f5;
|
||||||
|
color: #34495e;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table tr:hover > td) {
|
||||||
|
background-color: #f8f9fa !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-card__body) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__header) {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 0 0 0;
|
||||||
|
border-bottom: 1px solid #e1e8ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__nav-wrap::after) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__item) {
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__item.is-active) {
|
||||||
|
color: #2c3e50;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__active-bar) {
|
||||||
|
background-color: #2c3e50;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+151
-77
@@ -186,36 +186,64 @@
|
|||||||
<el-input v-model="orderForm.table" placeholder="请输入所属表" />
|
<el-input v-model="orderForm.table" placeholder="请输入所属表" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="用户ID" prop="user_id">
|
<el-form-item label="用户ID" prop="user_id">
|
||||||
<div class="selector-field">
|
<el-input
|
||||||
<div class="selector-info" v-if="selectedUserInfo">
|
v-if="selectedUserInfo"
|
||||||
<el-tag type="primary" effect="plain">
|
:model-value="`${selectedUserInfo.user_name} (ID: ${orderForm.user_id})`"
|
||||||
ID: {{ orderForm.user_id }} - {{ selectedUserInfo.user_name }}
|
readonly
|
||||||
</el-tag>
|
style="width: 100%"
|
||||||
</div>
|
>
|
||||||
<div class="selector-actions">
|
<template #suffix>
|
||||||
<el-button type="primary" @click="userSelectorVisible = true">
|
<el-icon class="clear-icon" @click="clearUser"><Close /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="userSelectorVisible = true">
|
||||||
<el-icon><User /></el-icon>
|
<el-icon><User /></el-icon>
|
||||||
{{ orderForm.user_id ? '更换用户' : '选择用户' }}
|
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button v-if="orderForm.user_id" @click="clearUser">清除</el-button>
|
</template>
|
||||||
</div>
|
</el-input>
|
||||||
</div>
|
<el-input
|
||||||
|
v-else
|
||||||
|
placeholder="请选择用户"
|
||||||
|
readonly
|
||||||
|
style="width: 100%"
|
||||||
|
@click="userSelectorVisible = true"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="userSelectorVisible = true">
|
||||||
|
<el-icon><User /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="商品ID" prop="commodity_id">
|
<el-form-item label="商品ID" prop="commodity_id">
|
||||||
<div class="selector-field">
|
<el-input
|
||||||
<div class="selector-info" v-if="selectedProductInfo">
|
v-if="selectedProductInfo"
|
||||||
<el-tag type="success" effect="plain">
|
:model-value="`${selectedProductInfo.name} (ID: ${orderForm.commodity_id})`"
|
||||||
ID: {{ orderForm.commodity_id }} - {{ selectedProductInfo.name }}
|
readonly
|
||||||
</el-tag>
|
style="width: 100%"
|
||||||
</div>
|
>
|
||||||
<div class="selector-actions">
|
<template #suffix>
|
||||||
<el-button type="success" @click="productSelectorVisible = true">
|
<el-icon class="clear-icon" @click="clearProduct"><Close /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="productSelectorVisible = true">
|
||||||
<el-icon><ShoppingCart /></el-icon>
|
<el-icon><ShoppingCart /></el-icon>
|
||||||
{{ orderForm.commodity_id ? '更换商品' : '选择商品' }}
|
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button v-if="orderForm.commodity_id" @click="clearProduct">清除</el-button>
|
</template>
|
||||||
</div>
|
</el-input>
|
||||||
</div>
|
<el-input
|
||||||
|
v-else
|
||||||
|
placeholder="请选择商品"
|
||||||
|
readonly
|
||||||
|
style="width: 100%"
|
||||||
|
@click="productSelectorVisible = true"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="productSelectorVisible = true">
|
||||||
|
<el-icon><ShoppingCart /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="购买数量" prop="pay_num">
|
<el-form-item label="购买数量" prop="pay_num">
|
||||||
<el-input-number v-model="orderForm.pay_num" :min="1" placeholder="请输入数量" style="width: 100%" />
|
<el-input-number v-model="orderForm.pay_num" :min="1" placeholder="请输入数量" style="width: 100%" />
|
||||||
@@ -227,39 +255,74 @@
|
|||||||
<el-input-number v-model="orderForm.renew_price" :min="0" placeholder="请输入续费价格(分)" style="width: 100%" />
|
<el-input-number v-model="orderForm.renew_price" :min="0" placeholder="请输入续费价格(分)" style="width: 100%" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="过期时间" prop="expire_time">
|
<el-form-item label="过期时间" prop="expire_time">
|
||||||
<el-input-number v-model="orderForm.expire_time" :min="0" placeholder="请输入过期时间(时间戳)" style="width: 100%" />
|
<el-date-picker
|
||||||
|
v-model="orderForm.expire_time"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="请选择过期时间"
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
value-format="x"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="优惠码ID" prop="discount_code_id">
|
<el-form-item label="优惠码ID" prop="discount_code_id">
|
||||||
<div class="selector-field">
|
<el-input
|
||||||
<div class="selector-info" v-if="selectedDiscountCodeInfo">
|
v-if="selectedDiscountCodeInfo"
|
||||||
<el-tag type="warning" effect="plain">
|
:model-value="`${selectedDiscountCodeInfo.name || selectedDiscountCodeInfo.code} (ID: ${orderForm.discount_code_id})`"
|
||||||
ID: {{ orderForm.discount_code_id }} - {{ selectedDiscountCodeInfo.name || selectedDiscountCodeInfo.code }}
|
readonly
|
||||||
</el-tag>
|
style="width: 100%"
|
||||||
</div>
|
>
|
||||||
<div class="selector-actions">
|
<template #suffix>
|
||||||
<el-button type="warning" @click="discountCodeSelectorVisible = true">
|
<el-icon class="clear-icon" @click="clearDiscountCode"><Close /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="discountCodeSelectorVisible = true">
|
||||||
<el-icon><Ticket /></el-icon>
|
<el-icon><Ticket /></el-icon>
|
||||||
{{ orderForm.discount_code_id ? '更换优惠码' : '选择优惠码' }}
|
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button v-if="orderForm.discount_code_id" @click="clearDiscountCode">清除</el-button>
|
</template>
|
||||||
</div>
|
</el-input>
|
||||||
</div>
|
<el-input
|
||||||
|
v-else
|
||||||
|
placeholder="请选择优惠码（可选）"
|
||||||
|
readonly
|
||||||
|
style="width: 100%"
|
||||||
|
@click="discountCodeSelectorVisible = true"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="discountCodeSelectorVisible = true">
|
||||||
|
<el-icon><Ticket /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="代金券ID" prop="coupon_id">
|
<el-form-item label="代金券ID" prop="coupon_id">
|
||||||
<div class="selector-field">
|
<el-input
|
||||||
<div class="selector-info" v-if="selectedVoucherInfo">
|
v-if="selectedVoucherInfo"
|
||||||
<el-tag type="danger" effect="plain">
|
:model-value="`${selectedVoucherInfo.name || selectedVoucherInfo.code} (ID: ${orderForm.coupon_id})`"
|
||||||
ID: {{ orderForm.coupon_id }} - {{ selectedVoucherInfo.name || selectedVoucherInfo.code }}
|
readonly
|
||||||
</el-tag>
|
style="width: 100%"
|
||||||
</div>
|
>
|
||||||
<div class="selector-actions">
|
<template #suffix>
|
||||||
<el-button type="danger" @click="voucherSelectorVisible = true">
|
<el-icon class="clear-icon" @click="clearVoucher"><Close /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="voucherSelectorVisible = true">
|
||||||
<el-icon><Money /></el-icon>
|
<el-icon><Money /></el-icon>
|
||||||
{{ orderForm.coupon_id ? '更换代金券' : '选择代金券' }}
|
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button v-if="orderForm.coupon_id" @click="clearVoucher">清除</el-button>
|
</template>
|
||||||
</div>
|
</el-input>
|
||||||
</div>
|
<el-input
|
||||||
|
v-else
|
||||||
|
placeholder="请选择代金券（可选）"
|
||||||
|
readonly
|
||||||
|
style="width: 100%"
|
||||||
|
@click="voucherSelectorVisible = true"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="voucherSelectorVisible = true">
|
||||||
|
<el-icon><Money /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="订单状态" prop="state">
|
<el-form-item label="订单状态" prop="state">
|
||||||
<el-radio-group v-model="orderForm.state">
|
<el-radio-group v-model="orderForm.state">
|
||||||
@@ -319,12 +382,13 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from 'vue'
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { Plus, Delete, Search, Download, Refresh, User, ShoppingCart, Ticket, Money } from '@element-plus/icons-vue'
|
import { Plus, Delete, Search, Download, Refresh, User, ShoppingCart, Ticket, Money, Close } from '@element-plus/icons-vue'
|
||||||
import { getOrderList, getOrderDetail, createOrder, updateOrder, deleteOrder } from '@/api/admin/order'
|
import { getOrderList, getOrderDetail, createOrder, updateOrder, deleteOrder } from '@/api/admin/order'
|
||||||
import UserListSelector from '@/components/admin/UserListSelector.vue'
|
import UserListSelector from '@/components/admin/UserListSelector.vue'
|
||||||
import ProductSelector from '@/components/admin/ProductSelector.vue'
|
import ProductSelector from '@/components/admin/ProductSelector.vue'
|
||||||
import DiscountCodeSelector from '@/components/admin/DiscountCodeSelector.vue'
|
import DiscountCodeSelector from '@/components/admin/DiscountCodeSelector.vue'
|
||||||
import VoucherSelector from '@/components/admin/VoucherSelector.vue'
|
import VoucherSelector from '@/components/admin/VoucherSelector.vue'
|
||||||
|
import { isoToMilliseconds, timeToTimestamp, formatDate as formatDateTool } from '@/utils/tool'
|
||||||
|
|
||||||
// 查询参数
|
// 查询参数
|
||||||
const queryParams = reactive({
|
const queryParams = reactive({
|
||||||
@@ -415,7 +479,17 @@ const fetchOrderList = async () => {
|
|||||||
const res = await getOrderList(params)
|
const res = await getOrderList(params)
|
||||||
console.log('订单列表数据:', res.data)
|
console.log('订单列表数据:', res.data)
|
||||||
if (res.data.code === 200) {
|
if (res.data.code === 200) {
|
||||||
orderList.value = res.data.data.list || []
|
// 处理时间数据：将ISO格式转换为毫秒级时间戳（用于时间选择器）
|
||||||
|
const list = (res.data.data.list || []).map(item => {
|
||||||
|
if (item.expireTime) {
|
||||||
|
// 保存原始时间用于显示
|
||||||
|
item._originalExpireTime = item.expireTime
|
||||||
|
// 转换为毫秒级时间戳用于时间选择器
|
||||||
|
item._expireTimeMs = isoToMilliseconds(item.expireTime)
|
||||||
|
}
|
||||||
|
return item
|
||||||
|
})
|
||||||
|
orderList.value = list
|
||||||
total.value = res.data.data.all_count || 0
|
total.value = res.data.data.all_count || 0
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -426,16 +500,9 @@ const fetchOrderList = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 格式化日期
|
// 格式化日期 - 使用工具函数
|
||||||
const formatDate = (dateStr) => {
|
const formatDate = (dateStr) => {
|
||||||
if (!dateStr) return '-'
|
return formatDateTool(dateStr)
|
||||||
const date = new Date(dateStr)
|
|
||||||
const year = date.getFullYear()
|
|
||||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
||||||
const day = String(date.getDate()).padStart(2, '0')
|
|
||||||
const hours = String(date.getHours()).padStart(2, '0')
|
|
||||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|
||||||
return `${year}-${month}-${day} ${hours}:${minutes}`
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取订单状态类型
|
// 获取订单状态类型
|
||||||
@@ -536,6 +603,14 @@ const handleEdit = (row) => {
|
|||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
clearAllSelections()
|
clearAllSelections()
|
||||||
|
|
||||||
|
// 处理过期时间：优先使用已转换的时间戳，否则转换ISO格式
|
||||||
|
let expireTimeMs = null
|
||||||
|
if (row._expireTimeMs !== undefined) {
|
||||||
|
expireTimeMs = row._expireTimeMs
|
||||||
|
} else if (row.expireTime) {
|
||||||
|
expireTimeMs = isoToMilliseconds(row.expireTime)
|
||||||
|
}
|
||||||
|
|
||||||
Object.assign(orderForm, {
|
Object.assign(orderForm, {
|
||||||
order_id: row.id,
|
order_id: row.id,
|
||||||
name: row.name,
|
name: row.name,
|
||||||
@@ -545,7 +620,7 @@ const handleEdit = (row) => {
|
|||||||
pay_num: row.payNum,
|
pay_num: row.payNum,
|
||||||
price: row.price,
|
price: row.price,
|
||||||
renew_price: row.renewPrice,
|
renew_price: row.renewPrice,
|
||||||
expire_time: row.expireTime ? new Date(row.expireTime).getTime() / 1000 : 0,
|
expire_time: expireTimeMs,
|
||||||
discount_code_id: 0, // 从详情接口获取
|
discount_code_id: 0, // 从详情接口获取
|
||||||
coupon_id: 0, // 从详情接口获取
|
coupon_id: 0, // 从详情接口获取
|
||||||
state: row.state,
|
state: row.state,
|
||||||
@@ -604,6 +679,13 @@ const submitForm = () => {
|
|||||||
orderFormRef.value?.validate(async (valid) => {
|
orderFormRef.value?.validate(async (valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
try {
|
try {
|
||||||
|
// 处理过期时间：将毫秒级时间戳转换为秒级时间戳
|
||||||
|
let expireTimeSeconds = 0
|
||||||
|
if (orderForm.expire_time) {
|
||||||
|
const timestamp = timeToTimestamp(new Date(orderForm.expire_time))
|
||||||
|
expireTimeSeconds = timestamp || 0
|
||||||
|
}
|
||||||
|
|
||||||
// 准备提交的数据
|
// 准备提交的数据
|
||||||
const submitData = {
|
const submitData = {
|
||||||
name: orderForm.name,
|
name: orderForm.name,
|
||||||
@@ -613,7 +695,7 @@ const submitForm = () => {
|
|||||||
pay_num: Number(orderForm.pay_num),
|
pay_num: Number(orderForm.pay_num),
|
||||||
price: Number(orderForm.price),
|
price: Number(orderForm.price),
|
||||||
renew_price: Number(orderForm.renew_price),
|
renew_price: Number(orderForm.renew_price),
|
||||||
expire_time: Number(orderForm.expire_time),
|
expire_time: expireTimeSeconds,
|
||||||
discount_code_id: Number(orderForm.discount_code_id),
|
discount_code_id: Number(orderForm.discount_code_id),
|
||||||
coupon_id: Number(orderForm.coupon_id),
|
coupon_id: Number(orderForm.coupon_id),
|
||||||
state: Number(orderForm.state),
|
state: Number(orderForm.state),
|
||||||
@@ -865,22 +947,14 @@ onMounted(() => {
|
|||||||
100% { background-position: -200% 0; }
|
100% { background-position: -200% 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 选择器字段样式 */
|
/* 选择器清除图标样式 */
|
||||||
.selector-field {
|
.clear-icon {
|
||||||
display: flex;
|
cursor: pointer;
|
||||||
flex-direction: column;
|
color: #909399;
|
||||||
gap: 8px;
|
transition: color 0.2s;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.selector-info {
|
.clear-icon:hover {
|
||||||
display: flex;
|
color: #f56c6c;
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selector-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -500,12 +500,26 @@ const fetchProductList = async () => {
|
|||||||
// 计算未删除数据的总数（API返回的all_count包含已删除的，需要减去已删除的数量）
|
// 计算未删除数据的总数（API返回的all_count包含已删除的，需要减去已删除的数量）
|
||||||
const deletedCount = allData.filter(item => item.delete == true).length
|
const deletedCount = allData.filter(item => item.delete == true).length
|
||||||
total.value = (res.data.data.data.length || 0) - deletedCount
|
total.value = (res.data.data.data.length || 0) - deletedCount
|
||||||
productList.value = productList.value.map(item => {
|
|
||||||
item.image = item.coverId ? getFileDetail({ file_id: item.coverId }).then(res => res.data.data.url) : ''
|
// 异步获取所有商品的封面图片
|
||||||
|
const imagePromises = productList.value.map(async (item) => {
|
||||||
|
if (item.coverId) {
|
||||||
|
try {
|
||||||
|
const fileRes = await getFileDetail({ file_id: item.coverId })
|
||||||
|
item.image = fileRes.data?.data?.url || ''
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取商品图片失败:', error)
|
||||||
|
item.image = ''
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
item.image = ''
|
||||||
|
}
|
||||||
return item
|
return item
|
||||||
})
|
})
|
||||||
console.log('productList', productList.value)
|
|
||||||
|
|
||||||
|
// 等待所有图片加载完成
|
||||||
|
await Promise.all(imagePromises)
|
||||||
|
console.log('productList', productList.value)
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
ElMessage.error('获取商品列表失败')
|
ElMessage.error('获取商品列表失败')
|
||||||
|
|||||||
@@ -184,25 +184,57 @@ import {
|
|||||||
User, Edit, Document, Timer, EditPen, Message,
|
User, Edit, Document, Timer, EditPen, Message,
|
||||||
Phone, OfficeBuilding, UploadFilled
|
Phone, OfficeBuilding, UploadFilled
|
||||||
} from '@element-plus/icons-vue'
|
} from '@element-plus/icons-vue'
|
||||||
|
import { useUserStore } from '@/store/userStore.js'
|
||||||
|
|
||||||
// 是否处于编辑模式
|
// 是否处于编辑模式
|
||||||
const isEditing = ref(false)
|
const isEditing = ref(false)
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const userStore = useUserStore()
|
||||||
|
|
||||||
|
// 从localStorage或store获取用户信息
|
||||||
|
const getSavedUserInfo = () => {
|
||||||
|
const savedInfo = userStore.userInfo
|
||||||
|
if (savedInfo && Object.keys(savedInfo).length > 0) {
|
||||||
|
return {
|
||||||
|
username: savedInfo.user_name || '',
|
||||||
|
realName: savedInfo.real_name?.Name || savedInfo.user_name || '',
|
||||||
|
email: savedInfo.email || '',
|
||||||
|
phone: savedInfo.phone || '',
|
||||||
|
department: savedInfo.admin_group?.name || '',
|
||||||
|
position: savedInfo.is_admin ? '管理员' : '普通用户',
|
||||||
|
role: savedInfo.admin_group?.name || '普通用户',
|
||||||
|
createTime: savedInfo.created_at || '',
|
||||||
|
lastLogin: savedInfo.created_at || '',
|
||||||
|
bio: savedInfo.admin_group?.note || '',
|
||||||
|
avatar: savedInfo.cover || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
||||||
|
sex: savedInfo.sex || '',
|
||||||
|
age: savedInfo.age || '',
|
||||||
|
userId: savedInfo.user_id || '',
|
||||||
|
userGroup: savedInfo.user_group?.Name || ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
username: '',
|
||||||
|
realName: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
department: '',
|
||||||
|
position: '',
|
||||||
|
role: '',
|
||||||
|
createTime: '',
|
||||||
|
lastLogin: '',
|
||||||
|
bio: '',
|
||||||
|
avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
||||||
|
sex: '',
|
||||||
|
age: '',
|
||||||
|
userId: '',
|
||||||
|
userGroup: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 用户信息数据
|
// 用户信息数据
|
||||||
const userInfo = reactive({
|
const userInfo = reactive(getSavedUserInfo())
|
||||||
username: 'admin',
|
|
||||||
realName: '管理员',
|
|
||||||
email: 'admin@example.com',
|
|
||||||
phone: '13800138000',
|
|
||||||
department: '技术部',
|
|
||||||
position: '系统管理员',
|
|
||||||
role: '超级管理员',
|
|
||||||
createTime: '2023-01-01 00:00:00',
|
|
||||||
lastLogin: '2023-06-15 10:30:45',
|
|
||||||
bio: '系统管理员，负责系统的日常维护和管理工作。拥有丰富的系统管理经验，精通Linux服务器配置和维护，熟悉网络安全，对系统性能优化有独到见解。',
|
|
||||||
avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
|
|
||||||
})
|
|
||||||
|
|
||||||
// 表单数据
|
// 表单数据
|
||||||
const userForm = reactive({...userInfo})
|
const userForm = reactive({...userInfo})
|
||||||
@@ -296,9 +328,9 @@ const handleAvatarSuccess = (res) => {
|
|||||||
// 获取用户信息
|
// 获取用户信息
|
||||||
const fetchUserInfo = async () => {
|
const fetchUserInfo = async () => {
|
||||||
try {
|
try {
|
||||||
// 模拟API调用
|
// 从store获取最新用户信息
|
||||||
await new Promise(resolve => setTimeout(resolve, 500))
|
const savedInfo = getSavedUserInfo()
|
||||||
// 实际项目中，应该从后端获取用户信息并更新userInfo
|
Object.assign(userInfo, savedInfo)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
ElMessage.error('获取用户信息失败')
|
ElMessage.error('获取用户信息失败')
|
||||||
console.error(error)
|
console.error(error)
|
||||||
|
|||||||
@@ -0,0 +1,918 @@
|
|||||||
|
<template>
|
||||||
|
<div class="setting-manage-container">
|
||||||
|
<el-card class="main-container" shadow="never">
|
||||||
|
<el-tabs v-model="activeTab" class="setting-tabs">
|
||||||
|
<!-- 配置组管理标签页 -->
|
||||||
|
<el-tab-pane label="配置组管理" name="group">
|
||||||
|
<!-- 搜索和操作栏 -->
|
||||||
|
<div class="filter-section">
|
||||||
|
<div class="filter-content">
|
||||||
|
<el-form :inline="true" :model="groupQueryParams" class="search-form">
|
||||||
|
<el-form-item label="关键词筛选">
|
||||||
|
<el-input v-model="groupQueryParams.key" placeholder="请输入关键词" clearable style="width: 200px" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleGroupQuery">
|
||||||
|
<el-icon><Search /></el-icon>查询
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="resetGroupQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div class="action-bar">
|
||||||
|
<el-button type="primary" @click="handleAddGroup">
|
||||||
|
<el-icon><Plus /></el-icon>新增配置组
|
||||||
|
</el-button>
|
||||||
|
<el-button type="danger" :disabled="!selectedGroupRows.length" @click="handleBatchDeleteGroup">
|
||||||
|
<el-icon><Delete /></el-icon>批量删除
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 配置组列表 -->
|
||||||
|
<div class="table-section">
|
||||||
|
<el-table
|
||||||
|
v-loading="groupLoading"
|
||||||
|
:data="groupList"
|
||||||
|
@selection-change="handleGroupSelectionChange"
|
||||||
|
style="width: 100%"
|
||||||
|
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="name" label="名称" min-width="200" />
|
||||||
|
<el-table-column prop="note" label="备注" min-width="250" show-overflow-tooltip />
|
||||||
|
<el-table-column label="创建时间" width="180">
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ formatDate(row.CreatedAt) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="更新时间" width="180">
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ formatDate(row.UpdatedAt) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="200" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" link @click="handleEditGroup(row)">编辑</el-button>
|
||||||
|
<el-button type="success" link @click="viewGroupSettings(row)">查看配置</el-button>
|
||||||
|
<el-button type="danger" link @click="handleDeleteGroup(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="groupQueryParams.page"
|
||||||
|
v-model:page-size="groupQueryParams.count"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="groupTotal"
|
||||||
|
@size-change="handleGroupSizeChange"
|
||||||
|
@current-change="handleGroupCurrentChange"
|
||||||
|
background
|
||||||
|
class="pagination"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<!-- 配置管理标签页 -->
|
||||||
|
<el-tab-pane label="配置管理" name="setting">
|
||||||
|
<!-- 搜索和操作栏 -->
|
||||||
|
<div class="filter-section">
|
||||||
|
<div class="filter-content">
|
||||||
|
<el-form :inline="true" :model="settingQueryParams" class="search-form">
|
||||||
|
<el-form-item label="配置组">
|
||||||
|
<el-select v-model="settingQueryParams.group_id" placeholder="请选择配置组" clearable style="width: 200px" @change="handleSettingQuery">
|
||||||
|
<el-option
|
||||||
|
v-for="group in allGroupList"
|
||||||
|
:key="group.id"
|
||||||
|
:label="group.name"
|
||||||
|
:value="group.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="关键词筛选">
|
||||||
|
<el-input v-model="settingQueryParams.key" placeholder="请输入关键词" clearable style="width: 200px" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleSettingQuery">
|
||||||
|
<el-icon><Search /></el-icon>查询
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="resetSettingQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div class="action-bar">
|
||||||
|
<el-button type="primary" @click="handleAddSetting">
|
||||||
|
<el-icon><Plus /></el-icon>新增配置
|
||||||
|
</el-button>
|
||||||
|
<el-button type="danger" :disabled="!selectedSettingRows.length" @click="handleBatchDeleteSetting">
|
||||||
|
<el-icon><Delete /></el-icon>批量删除
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 配置列表 -->
|
||||||
|
<div class="table-section">
|
||||||
|
<el-table
|
||||||
|
v-loading="settingLoading"
|
||||||
|
:data="settingList"
|
||||||
|
@selection-change="handleSettingSelectionChange"
|
||||||
|
style="width: 100%"
|
||||||
|
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="name" label="名称" min-width="150" />
|
||||||
|
<el-table-column prop="value" label="值" min-width="200" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<span v-if="row.type === 'bool'">{{ row.value ? '是' : '否' }}</span>
|
||||||
|
<span v-else>{{ row.value }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="type" label="类型" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="getTypeColor(row.type)">
|
||||||
|
{{ row.type || '未知' }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="settingGroupID" label="配置组" width="150" />
|
||||||
|
<el-table-column label="是否开放" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-switch
|
||||||
|
v-model="row.open"
|
||||||
|
@change="handleToggleOpen(row)"
|
||||||
|
:disabled="toggleLoading === row.id"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="note" label="备注" min-width="200" show-overflow-tooltip />
|
||||||
|
<el-table-column label="创建时间" width="180">
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ formatDate(row.CreatedAt) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="150" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" link @click="handleEditSetting(row)">编辑</el-button>
|
||||||
|
<el-button type="danger" link @click="handleDeleteSetting(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="settingQueryParams.page"
|
||||||
|
v-model:page-size="settingQueryParams.count"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="settingTotal"
|
||||||
|
@size-change="handleSettingSizeChange"
|
||||||
|
@current-change="handleSettingCurrentChange"
|
||||||
|
background
|
||||||
|
class="pagination"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 配置组表单对话框 -->
|
||||||
|
<el-dialog
|
||||||
|
v-model="groupDialogVisible"
|
||||||
|
:title="groupDialogTitle"
|
||||||
|
width="500px"
|
||||||
|
destroy-on-close
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="groupFormRef"
|
||||||
|
:model="groupForm"
|
||||||
|
:rules="groupRules"
|
||||||
|
label-width="100px"
|
||||||
|
>
|
||||||
|
<el-form-item label="名称" prop="name">
|
||||||
|
<el-input v-model="groupForm.name" placeholder="请输入配置组名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="note">
|
||||||
|
<el-input
|
||||||
|
v-model="groupForm.note"
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入备注信息"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="groupDialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submitGroupForm">确定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 配置表单对话框 -->
|
||||||
|
<el-dialog
|
||||||
|
v-model="settingDialogVisible"
|
||||||
|
:title="settingDialogTitle"
|
||||||
|
width="600px"
|
||||||
|
destroy-on-close
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="settingFormRef"
|
||||||
|
:model="settingForm"
|
||||||
|
:rules="settingRules"
|
||||||
|
label-width="120px"
|
||||||
|
>
|
||||||
|
<el-form-item label="配置组" prop="settingGroupID">
|
||||||
|
<el-select v-model="settingForm.settingGroupID" placeholder="请选择配置组" style="width: 100%">
|
||||||
|
<el-option
|
||||||
|
v-for="group in allGroupList"
|
||||||
|
:key="group.id"
|
||||||
|
:label="group.name"
|
||||||
|
:value="group.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="名称" prop="name">
|
||||||
|
<el-input v-model="settingForm.name" placeholder="请输入配置名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="类型" prop="type">
|
||||||
|
<el-select v-model="settingForm.type" placeholder="请选择类型" style="width: 100%" @change="handleTypeChange">
|
||||||
|
<el-option label="字符串 (string)" value="string" />
|
||||||
|
<el-option label="整数 (int)" value="int" />
|
||||||
|
<el-option label="浮点数 (float)" value="float" />
|
||||||
|
<el-option label="布尔值 (bool)" value="bool" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="值" prop="value">
|
||||||
|
<el-input
|
||||||
|
v-if="settingForm.type === 'string'"
|
||||||
|
v-model="settingForm.value"
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入配置值"
|
||||||
|
/>
|
||||||
|
<el-input-number
|
||||||
|
v-else-if="settingForm.type === 'int'"
|
||||||
|
v-model="settingForm.value"
|
||||||
|
:controls="false"
|
||||||
|
placeholder="请输入整数"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
<el-input-number
|
||||||
|
v-else-if="settingForm.type === 'float'"
|
||||||
|
v-model="settingForm.value"
|
||||||
|
:controls="false"
|
||||||
|
:precision="2"
|
||||||
|
placeholder="请输入浮点数"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
<el-switch
|
||||||
|
v-else-if="settingForm.type === 'bool'"
|
||||||
|
v-model="settingForm.value"
|
||||||
|
/>
|
||||||
|
<el-input
|
||||||
|
v-else
|
||||||
|
v-model="settingForm.value"
|
||||||
|
placeholder="请输入配置值"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否开放访问">
|
||||||
|
<el-switch v-model="settingForm.open" />
|
||||||
|
<span style="margin-left: 10px; color: #909399; font-size: 12px;">
|
||||||
|
开启后允许公开访问
|
||||||
|
</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="note">
|
||||||
|
<el-input
|
||||||
|
v-model="settingForm.note"
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入备注信息"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="settingDialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submitSettingForm">确定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted, watch } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import { Search, Plus, Delete } from '@element-plus/icons-vue'
|
||||||
|
import {
|
||||||
|
getSettingGroupList,
|
||||||
|
getSettingGroupInfo,
|
||||||
|
createSettingGroup,
|
||||||
|
updateSettingGroup,
|
||||||
|
deleteSettingGroup,
|
||||||
|
getSettingList,
|
||||||
|
getSettingInfo,
|
||||||
|
createSetting,
|
||||||
|
updateSetting,
|
||||||
|
setSettingOpen,
|
||||||
|
deleteSetting
|
||||||
|
} from '@/api/admin/setting'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
// 当前激活的标签页
|
||||||
|
const activeTab = ref('group')
|
||||||
|
|
||||||
|
// ==================== 配置组相关 ====================
|
||||||
|
const groupQueryParams = reactive({
|
||||||
|
key: '',
|
||||||
|
page: 1,
|
||||||
|
count: 10
|
||||||
|
})
|
||||||
|
|
||||||
|
const groupForm = reactive({
|
||||||
|
id: undefined,
|
||||||
|
name: '',
|
||||||
|
note: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const groupRules = {
|
||||||
|
name: [
|
||||||
|
{ required: true, message: '请输入配置组名称', trigger: 'blur' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const groupLoading = ref(false)
|
||||||
|
const groupList = ref([])
|
||||||
|
const allGroupList = ref([]) // 用于下拉选择的完整列表
|
||||||
|
const groupTotal = ref(0)
|
||||||
|
const selectedGroupRows = ref([])
|
||||||
|
const groupDialogVisible = ref(false)
|
||||||
|
const groupDialogTitle = ref('新增配置组')
|
||||||
|
const groupFormRef = ref(null)
|
||||||
|
|
||||||
|
// ==================== 配置相关 ====================
|
||||||
|
const settingQueryParams = reactive({
|
||||||
|
group_id: undefined,
|
||||||
|
key: '',
|
||||||
|
page: 1,
|
||||||
|
count: 10
|
||||||
|
})
|
||||||
|
|
||||||
|
const settingForm = reactive({
|
||||||
|
id: undefined,
|
||||||
|
name: '',
|
||||||
|
value: '',
|
||||||
|
type: 'string',
|
||||||
|
settingGroupID: undefined,
|
||||||
|
open: false,
|
||||||
|
note: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const settingRules = {
|
||||||
|
name: [
|
||||||
|
{ required: true, message: '请输入配置名称', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
value: [
|
||||||
|
{ required: true, message: '请输入配置值', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
type: [
|
||||||
|
{ required: true, message: '请选择配置类型', trigger: 'change' }
|
||||||
|
],
|
||||||
|
settingGroupID: [
|
||||||
|
{ required: true, message: '请选择配置组', trigger: 'change' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const settingLoading = ref(false)
|
||||||
|
const settingList = ref([])
|
||||||
|
const settingTotal = ref(0)
|
||||||
|
const selectedSettingRows = ref([])
|
||||||
|
const settingDialogVisible = ref(false)
|
||||||
|
const settingDialogTitle = ref('新增配置')
|
||||||
|
const settingFormRef = ref(null)
|
||||||
|
const toggleLoading = ref(null)
|
||||||
|
|
||||||
|
// 格式化日期时间
|
||||||
|
const formatDate = (dateString) => {
|
||||||
|
if (!dateString) return '-'
|
||||||
|
const date = new Date(dateString)
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0')
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||||
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取类型颜色
|
||||||
|
const getTypeColor = (type) => {
|
||||||
|
const colorMap = {
|
||||||
|
'string': 'primary',
|
||||||
|
'int': 'success',
|
||||||
|
'float': 'warning',
|
||||||
|
'bool': 'info'
|
||||||
|
}
|
||||||
|
return colorMap[type] || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 配置组方法 ====================
|
||||||
|
const fetchGroupList = async () => {
|
||||||
|
groupLoading.value = true
|
||||||
|
try {
|
||||||
|
const res = await getSettingGroupList(groupQueryParams)
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
groupList.value = res.data.data.data || []
|
||||||
|
groupTotal.value = res.data.data.all_count || 0
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取配置组列表失败:', error)
|
||||||
|
ElMessage.error('获取配置组列表失败')
|
||||||
|
} finally {
|
||||||
|
groupLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchAllGroupList = async () => {
|
||||||
|
try {
|
||||||
|
const res = await getSettingGroupList({ page: 1, count: 1000 })
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
allGroupList.value = res.data.data.data || []
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取配置组列表失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleGroupQuery = () => {
|
||||||
|
groupQueryParams.page = 1
|
||||||
|
fetchGroupList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetGroupQuery = () => {
|
||||||
|
groupQueryParams.key = ''
|
||||||
|
groupQueryParams.page = 1
|
||||||
|
fetchGroupList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleGroupSelectionChange = (selection) => {
|
||||||
|
selectedGroupRows.value = selection
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleGroupSizeChange = (size) => {
|
||||||
|
groupQueryParams.count = size
|
||||||
|
fetchGroupList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleGroupCurrentChange = (page) => {
|
||||||
|
groupQueryParams.page = page
|
||||||
|
fetchGroupList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAddGroup = () => {
|
||||||
|
groupDialogTitle.value = '新增配置组'
|
||||||
|
Object.assign(groupForm, {
|
||||||
|
id: undefined,
|
||||||
|
name: '',
|
||||||
|
note: ''
|
||||||
|
})
|
||||||
|
groupDialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEditGroup = async (row) => {
|
||||||
|
groupDialogTitle.value = '编辑配置组'
|
||||||
|
try {
|
||||||
|
const res = await getSettingGroupInfo({ setting_group_id: row.id })
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
Object.assign(groupForm, {
|
||||||
|
id: res.data.data.id,
|
||||||
|
name: res.data.data.name || '',
|
||||||
|
note: res.data.data.note || ''
|
||||||
|
})
|
||||||
|
groupDialogVisible.value = true
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取配置组详情失败:', error)
|
||||||
|
ElMessage.error('获取配置组详情失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const viewGroupSettings = (row) => {
|
||||||
|
activeTab.value = 'setting'
|
||||||
|
settingQueryParams.group_id = row.id
|
||||||
|
fetchSettingList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDeleteGroup = (row) => {
|
||||||
|
ElMessageBox.confirm(`确认删除配置组 "${row.name}" 吗？`, '警告', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(async () => {
|
||||||
|
try {
|
||||||
|
const res = await deleteSettingGroup({ setting_group_id: row.id })
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
fetchGroupList()
|
||||||
|
fetchAllGroupList()
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('删除失败:', error)
|
||||||
|
ElMessage.error(error.response?.data?.message || '删除失败')
|
||||||
|
}
|
||||||
|
}).catch(() => {})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleBatchDeleteGroup = () => {
|
||||||
|
if (selectedGroupRows.value.length === 0) {
|
||||||
|
ElMessage.warning('请至少选择一条记录')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
ElMessageBox.confirm(`确认删除选中的 ${selectedGroupRows.value.length} 条记录吗？`, '警告', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(async () => {
|
||||||
|
try {
|
||||||
|
const deletePromises = selectedGroupRows.value.map(row =>
|
||||||
|
deleteSettingGroup({ setting_group_id: row.id })
|
||||||
|
)
|
||||||
|
await Promise.all(deletePromises)
|
||||||
|
ElMessage.success('批量删除成功')
|
||||||
|
fetchGroupList()
|
||||||
|
fetchAllGroupList()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('批量删除失败:', error)
|
||||||
|
ElMessage.error('批量删除失败')
|
||||||
|
}
|
||||||
|
}).catch(() => {})
|
||||||
|
}
|
||||||
|
|
||||||
|
const submitGroupForm = () => {
|
||||||
|
groupFormRef.value?.validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
const submitData = {
|
||||||
|
name: groupForm.name,
|
||||||
|
note: groupForm.note
|
||||||
|
}
|
||||||
|
if (groupForm.id) {
|
||||||
|
submitData.id = groupForm.id
|
||||||
|
}
|
||||||
|
const res = groupForm.id
|
||||||
|
? await updateSettingGroup(submitData)
|
||||||
|
: await createSettingGroup(submitData)
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
ElMessage.success(groupForm.id ? '修改成功' : '创建成功')
|
||||||
|
groupDialogVisible.value = false
|
||||||
|
fetchGroupList()
|
||||||
|
fetchAllGroupList()
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('提交失败:', error)
|
||||||
|
ElMessage.error(error.response?.data?.message || '提交失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 配置方法 ====================
|
||||||
|
const fetchSettingList = async () => {
|
||||||
|
settingLoading.value = true
|
||||||
|
try {
|
||||||
|
const params = { ...settingQueryParams }
|
||||||
|
if (!params.group_id) {
|
||||||
|
delete params.group_id
|
||||||
|
}
|
||||||
|
const res = await getSettingList(params)
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
settingList.value = res.data.data.data || []
|
||||||
|
settingTotal.value = res.data.data.all_count || 0
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取配置列表失败:', error)
|
||||||
|
ElMessage.error('获取配置列表失败')
|
||||||
|
} finally {
|
||||||
|
settingLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSettingQuery = () => {
|
||||||
|
settingQueryParams.page = 1
|
||||||
|
fetchSettingList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetSettingQuery = () => {
|
||||||
|
settingQueryParams.group_id = undefined
|
||||||
|
settingQueryParams.key = ''
|
||||||
|
settingQueryParams.page = 1
|
||||||
|
fetchSettingList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSettingSelectionChange = (selection) => {
|
||||||
|
selectedSettingRows.value = selection
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSettingSizeChange = (size) => {
|
||||||
|
settingQueryParams.count = size
|
||||||
|
fetchSettingList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSettingCurrentChange = (page) => {
|
||||||
|
settingQueryParams.page = page
|
||||||
|
fetchSettingList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTypeChange = (type) => {
|
||||||
|
if (type === 'bool') {
|
||||||
|
settingForm.value = false
|
||||||
|
} else if (type === 'int' || type === 'float') {
|
||||||
|
settingForm.value = 0
|
||||||
|
} else {
|
||||||
|
settingForm.value = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAddSetting = () => {
|
||||||
|
settingDialogTitle.value = '新增配置'
|
||||||
|
Object.assign(settingForm, {
|
||||||
|
id: undefined,
|
||||||
|
name: '',
|
||||||
|
value: '',
|
||||||
|
type: 'string',
|
||||||
|
settingGroupID: settingQueryParams.group_id || undefined,
|
||||||
|
open: false,
|
||||||
|
note: ''
|
||||||
|
})
|
||||||
|
settingDialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEditSetting = async (row) => {
|
||||||
|
settingDialogTitle.value = '编辑配置'
|
||||||
|
try {
|
||||||
|
const res = await getSettingInfo({ id: row.id })
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
const data = res.data.data
|
||||||
|
Object.assign(settingForm, {
|
||||||
|
id: data.id,
|
||||||
|
name: data.name || '',
|
||||||
|
value: data.value,
|
||||||
|
type: data.type || 'string',
|
||||||
|
settingGroupID: data.settingGroupID,
|
||||||
|
open: data.open || false,
|
||||||
|
note: data.note || ''
|
||||||
|
})
|
||||||
|
if (data.type === 'bool') {
|
||||||
|
settingForm.value = data.value === true || data.value === 'true' || data.value === 1
|
||||||
|
} else if (data.type === 'int') {
|
||||||
|
settingForm.value = parseInt(data.value) || 0
|
||||||
|
} else if (data.type === 'float') {
|
||||||
|
settingForm.value = parseFloat(data.value) || 0
|
||||||
|
}
|
||||||
|
settingDialogVisible.value = true
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取配置详情失败:', error)
|
||||||
|
ElMessage.error('获取配置详情失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleToggleOpen = async (row) => {
|
||||||
|
toggleLoading.value = row.id
|
||||||
|
try {
|
||||||
|
const res = await setSettingOpen({
|
||||||
|
id: row.id,
|
||||||
|
open: row.open
|
||||||
|
})
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
ElMessage.success('修改成功')
|
||||||
|
} else {
|
||||||
|
row.open = !row.open
|
||||||
|
ElMessage.error(res.data.message || '修改失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
row.open = !row.open
|
||||||
|
console.error('修改失败:', error)
|
||||||
|
ElMessage.error(error.response?.data?.message || '修改失败')
|
||||||
|
} finally {
|
||||||
|
toggleLoading.value = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDeleteSetting = (row) => {
|
||||||
|
ElMessageBox.confirm(`确认删除配置 "${row.name}" 吗？`, '警告', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(async () => {
|
||||||
|
try {
|
||||||
|
const res = await deleteSetting({ id: row.id })
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
fetchSettingList()
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('删除失败:', error)
|
||||||
|
ElMessage.error(error.response?.data?.message || '删除失败')
|
||||||
|
}
|
||||||
|
}).catch(() => {})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleBatchDeleteSetting = () => {
|
||||||
|
if (selectedSettingRows.value.length === 0) {
|
||||||
|
ElMessage.warning('请至少选择一条记录')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
ElMessageBox.confirm(`确认删除选中的 ${selectedSettingRows.value.length} 条记录吗？`, '警告', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(async () => {
|
||||||
|
try {
|
||||||
|
const deletePromises = selectedSettingRows.value.map(row =>
|
||||||
|
deleteSetting({ id: row.id })
|
||||||
|
)
|
||||||
|
await Promise.all(deletePromises)
|
||||||
|
ElMessage.success('批量删除成功')
|
||||||
|
fetchSettingList()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('批量删除失败:', error)
|
||||||
|
ElMessage.error('批量删除失败')
|
||||||
|
}
|
||||||
|
}).catch(() => {})
|
||||||
|
}
|
||||||
|
|
||||||
|
const submitSettingForm = () => {
|
||||||
|
settingFormRef.value?.validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
const submitData = {
|
||||||
|
name: settingForm.name,
|
||||||
|
value: String(settingForm.value),
|
||||||
|
type: settingForm.type,
|
||||||
|
setting_group_id: settingForm.settingGroupID,
|
||||||
|
open: settingForm.open,
|
||||||
|
note: settingForm.note
|
||||||
|
}
|
||||||
|
if (settingForm.id) {
|
||||||
|
submitData.id = settingForm.id
|
||||||
|
}
|
||||||
|
const res = settingForm.id
|
||||||
|
? await updateSetting(submitData)
|
||||||
|
: await createSetting(submitData)
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
ElMessage.success(settingForm.id ? '修改成功' : '创建成功')
|
||||||
|
settingDialogVisible.value = false
|
||||||
|
fetchSettingList()
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('提交失败:', error)
|
||||||
|
ElMessage.error(error.response?.data?.message || '提交失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听标签页切换
|
||||||
|
watch(activeTab, (newVal) => {
|
||||||
|
if (newVal === 'group') {
|
||||||
|
fetchGroupList()
|
||||||
|
} else if (newVal === 'setting') {
|
||||||
|
fetchSettingList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
onMounted(() => {
|
||||||
|
fetchGroupList()
|
||||||
|
fetchAllGroupList()
|
||||||
|
|
||||||
|
// 检查路由参数决定初始标签页
|
||||||
|
if (route.query.tab === 'setting') {
|
||||||
|
activeTab.value = 'setting'
|
||||||
|
fetchSettingList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.setting-manage-container {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
border: 1px solid #e1e8ed;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-tabs {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-section {
|
||||||
|
padding: 0;
|
||||||
|
border-bottom: 1px solid #e1e8ed;
|
||||||
|
background: #fafbfc;
|
||||||
|
margin: 0 -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px 20px;
|
||||||
|
gap: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form {
|
||||||
|
margin: 0;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form :deep(.el-form-item) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-section {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 16px 0;
|
||||||
|
border-top: 1px solid #e1e8ed;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格样式优化 */
|
||||||
|
:deep(.el-table) {
|
||||||
|
border: none;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table__header) {
|
||||||
|
background: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table th) {
|
||||||
|
background: #f8f9fa !important;
|
||||||
|
border-bottom: 2px solid #e1e8ed;
|
||||||
|
color: #2c3e50;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table td) {
|
||||||
|
border-bottom: 1px solid #f0f2f5;
|
||||||
|
color: #34495e;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table tr:hover > td) {
|
||||||
|
background-color: #f8f9fa !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-card__body) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__header) {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 0 0 0;
|
||||||
|
border-bottom: 1px solid #e1e8ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__nav-wrap::after) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__item) {
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__item.is-active) {
|
||||||
|
color: #2c3e50;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__active-bar) {
|
||||||
|
background-color: #2c3e50;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -56,7 +56,7 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="type" label="文件类型" width="120">
|
<el-table-column prop="type" label="文件类型" width="120">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-tag :type="getFileTypeColor(row.type)">
|
<el-tag :type="getFileTypeColor(row.type, row.url, row.realName)">
|
||||||
{{ row.type || '未知' }}
|
{{ row.type || '未知' }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</template>
|
</template>
|
||||||
@@ -112,7 +112,7 @@
|
|||||||
<div class="preview-label">文件预览</div>
|
<div class="preview-label">文件预览</div>
|
||||||
<div class="preview-content">
|
<div class="preview-content">
|
||||||
<el-image
|
<el-image
|
||||||
v-if="isImageFile(fileDetail.type) && fileDetail.url"
|
v-if="isImageFile(fileDetail.type, fileDetail.url, fileDetail.realName) && fileDetail.url"
|
||||||
:src="fileDetail.url"
|
:src="fileDetail.url"
|
||||||
fit="contain"
|
fit="contain"
|
||||||
style="max-width: 100%; max-height: 400px; border-radius: 8px;"
|
style="max-width: 100%; max-height: 400px; border-radius: 8px;"
|
||||||
@@ -140,7 +140,7 @@
|
|||||||
<el-descriptions-item label="真实文件名" label-align="right" :span="2">{{ fileDetail.realName }}</el-descriptions-item>
|
<el-descriptions-item label="真实文件名" label-align="right" :span="2">{{ fileDetail.realName }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="保存名称" label-align="right">{{ fileDetail.saveName }}</el-descriptions-item>
|
<el-descriptions-item label="保存名称" label-align="right">{{ fileDetail.saveName }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="文件类型" label-align="right">
|
<el-descriptions-item label="文件类型" label-align="right">
|
||||||
<el-tag :type="getFileTypeColor(fileDetail.type)">{{ fileDetail.type || '未知' }}</el-tag>
|
<el-tag :type="getFileTypeColor(fileDetail.type, fileDetail.url, fileDetail.realName)">{{ fileDetail.type || '未知' }}</el-tag>
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
<el-descriptions-item label="文件大小" label-align="right">{{ formatFileSize(fileDetail.size) }}</el-descriptions-item>
|
<el-descriptions-item label="文件大小" label-align="right">{{ formatFileSize(fileDetail.size) }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="是否公开" label-align="right">
|
<el-descriptions-item label="是否公开" label-align="right">
|
||||||
@@ -302,14 +302,37 @@ const uploadForm = reactive({
|
|||||||
const uploadFileList = ref([])
|
const uploadFileList = ref([])
|
||||||
|
|
||||||
// 判断是否为图片文件
|
// 判断是否为图片文件
|
||||||
const isImageFile = (type) => {
|
const isImageFile = (type, url, realName) => {
|
||||||
const imageTypes = ['cover', 'image', 'avatar', 'photo', 'picture']
|
// 检查type字段
|
||||||
return imageTypes.includes(type?.toLowerCase())
|
const imageTypes = ['cover', 'image', 'avatar', 'photo', 'picture', 'work_order']
|
||||||
|
if (type && imageTypes.includes(type?.toLowerCase())) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查文件扩展名
|
||||||
|
if (realName) {
|
||||||
|
const extension = realName.split('.').pop()?.toLowerCase()
|
||||||
|
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico']
|
||||||
|
if (extension && imageExtensions.includes(extension)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查URL中的文件扩展名
|
||||||
|
if (url) {
|
||||||
|
const urlExtension = url.split('.').pop()?.toLowerCase().split('?')[0]
|
||||||
|
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico']
|
||||||
|
if (urlExtension && imageExtensions.includes(urlExtension)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取文件类型颜色
|
// 获取文件类型颜色
|
||||||
const getFileTypeColor = (type) => {
|
const getFileTypeColor = (type, url, realName) => {
|
||||||
if (isImageFile(type)) return 'success'
|
if (isImageFile(type, url, realName)) return 'success'
|
||||||
const colorMap = {
|
const colorMap = {
|
||||||
'document': 'primary',
|
'document': 'primary',
|
||||||
'video': 'warning',
|
'video': 'warning',
|
||||||
@@ -394,8 +417,12 @@ const handleView = async (row) => {
|
|||||||
const res = await getFileDetail({ file_id: row.id })
|
const res = await getFileDetail({ file_id: row.id })
|
||||||
console.log('文件详情数据:', res.data)
|
console.log('文件详情数据:', res.data)
|
||||||
if (res.data.code === 200) {
|
if (res.data.code === 200) {
|
||||||
fileDetail.value = res.data.data.data
|
// 确保正确设置文件详情和URL
|
||||||
fileDetail.value.url = res.data.data.url
|
const fileData = res.data.data.data || res.data.data
|
||||||
|
fileDetail.value = {
|
||||||
|
...fileData,
|
||||||
|
url: fileData.url || res.data.data.url || ''
|
||||||
|
}
|
||||||
detailDialogVisible.value = true
|
detailDialogVisible.value = true
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -597,7 +624,7 @@ const handleCustomUpload = async (options) => {
|
|||||||
|
|
||||||
// 根据返回码严格区分成功和失败
|
// 根据返回码严格区分成功和失败
|
||||||
if (res && res.data && res.data.code === 200) {
|
if (res && res.data && res.data.code === 200) {
|
||||||
onSuccess(res.data.data, file)
|
console.log("上传成功")
|
||||||
} else {
|
} else {
|
||||||
const errorMsg = res?.data?.message || res?.data?.msg || '上传失败'
|
const errorMsg = res?.data?.message || res?.data?.msg || '上传失败'
|
||||||
const error = new Error(errorMsg)
|
const error = new Error(errorMsg)
|
||||||
@@ -612,13 +639,9 @@ const handleCustomUpload = async (options) => {
|
|||||||
|
|
||||||
// 上传成功
|
// 上传成功
|
||||||
const handleUploadSuccess = (response, file, fileList) => {
|
const handleUploadSuccess = (response, file, fileList) => {
|
||||||
console.log('上传成功文件:', file)
|
|
||||||
console.log('上传成功文件列表：',fileList)
|
|
||||||
|
|
||||||
|
|
||||||
// 成功回调只会在 code === 200 时触发
|
|
||||||
// ElMessage.success(`文件 ${file.name} 上传成功`)
|
|
||||||
// 更新文件列表状态
|
|
||||||
uploadFileList.value = fileList
|
uploadFileList.value = fileList
|
||||||
// 如果所有文件都上传成功，关闭对话框并刷新列表
|
// 如果所有文件都上传成功，关闭对话框并刷新列表
|
||||||
const allSuccess = fileList.every(f => f.status === 'success')
|
const allSuccess = fileList.every(f => f.status === 'success')
|
||||||
|
|||||||
+113
-42
@@ -44,8 +44,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 统一的用户数据概览区域 -->
|
||||||
<div class="profile-stats">
|
<div class="profile-stats-unified">
|
||||||
|
<!-- 余额数据 -->
|
||||||
|
<div class="stat-item" v-for="balance in userBalanceList" :key="balance.id">
|
||||||
|
<div class="stat-label">{{ balance.typeName }}</div>
|
||||||
|
<div class="stat-value" :style="{ color: balance.typeColor }">{{ formatBalance(balance.price) }}</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分隔线 -->
|
||||||
|
<el-divider direction="vertical" v-if="userBalanceList.length > 0" class="stats-divider" />
|
||||||
|
<!-- 其他状态数据 -->
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
<div class="stat-label">实名状态</div>
|
<div class="stat-label">实名状态</div>
|
||||||
<div class="stat-value">
|
<div class="stat-value">
|
||||||
@@ -298,19 +306,34 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="推荐人">
|
<el-form-item label="推荐人">
|
||||||
<div class="recommend-user-selector">
|
<el-input
|
||||||
<div class="selected-user" v-if="recommendUserInfo.UserId">
|
v-if="recommendUserInfo.UserId"
|
||||||
<el-avatar :size="32" :src="recommendUserInfo.Avatar" />
|
:model-value="`${recommendUserInfo.UserName} (ID: ${recommendUserInfo.UserId})`"
|
||||||
<span class="user-name">{{ recommendUserInfo.UserName }}</span>
|
readonly
|
||||||
<span class="user-id">(ID: {{ recommendUserInfo.UserId }})</span>
|
style="width: 100%"
|
||||||
<el-button type="danger" link size="small" @click="clearRecommendUser">
|
>
|
||||||
<el-icon><Close /></el-icon>
|
<template #suffix>
|
||||||
|
<el-icon class="clear-icon" @click="clearRecommendUser"><Close /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="showUserSelectorDialog = true">
|
||||||
|
<el-icon><User /></el-icon>
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</template>
|
||||||
<el-button v-else type="primary" plain @click="showUserSelectorDialog = true">
|
</el-input>
|
||||||
<el-icon><User /></el-icon> 选择推荐人
|
<el-input
|
||||||
|
v-else
|
||||||
|
placeholder="请选择推荐人"
|
||||||
|
readonly
|
||||||
|
style="width: 100%"
|
||||||
|
@click="showUserSelectorDialog = true"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="showUserSelectorDialog = true">
|
||||||
|
<el-icon><User /></el-icon>
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</template>
|
||||||
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
@@ -559,6 +582,16 @@ const userBalance = ref({
|
|||||||
total_consume: 0
|
total_consume: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 用户余额列表（用于概览卡片展示）
|
||||||
|
const userBalanceList = ref([])
|
||||||
|
|
||||||
|
// 余额类型映射
|
||||||
|
const balanceTypeMap = {
|
||||||
|
entity: { name: '云钻', type: 'cloud_diamond', color: '#409EFF' },
|
||||||
|
general: { name: '云币', type: 'cloud_coin', color: '#67C23A' },
|
||||||
|
withdraw: { name: '云点', type: 'cloud_points', color: '#E6A23C' }
|
||||||
|
}
|
||||||
|
|
||||||
// 编辑用户相关
|
// 编辑用户相关
|
||||||
const editDialogVisible = ref(false)
|
const editDialogVisible = ref(false)
|
||||||
const editForm = reactive({
|
const editForm = reactive({
|
||||||
@@ -684,6 +717,8 @@ const fetchUserInfo = async () => {
|
|||||||
if (userInfo.value.CoverID) {
|
if (userInfo.value.CoverID) {
|
||||||
fetchCurrentAvatar(userInfo.value.CoverID)
|
fetchCurrentAvatar(userInfo.value.CoverID)
|
||||||
}
|
}
|
||||||
|
// 获取用户余额列表
|
||||||
|
fetchUserBalanceList(userId)
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
ElMessage.error('获取用户信息失败')
|
ElMessage.error('获取用户信息失败')
|
||||||
@@ -692,6 +727,25 @@ const fetchUserInfo = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取用户余额列表（用于概览卡片展示）
|
||||||
|
const fetchUserBalanceList = async (userId) => {
|
||||||
|
try {
|
||||||
|
const res = await getUserBalanceCount({ user_id: userId })
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
// 只保留映射类型中存在的余额
|
||||||
|
userBalanceList.value = (res.data.data || []).filter(item => {
|
||||||
|
return balanceTypeMap[item.type]
|
||||||
|
}).map(item => ({
|
||||||
|
...item,
|
||||||
|
typeName: balanceTypeMap[item.type]?.name || item.type,
|
||||||
|
typeColor: '#000000'
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取用户余额失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 刷新数据
|
// 刷新数据
|
||||||
const refreshData = () => {
|
const refreshData = () => {
|
||||||
fetchUserInfo()
|
fetchUserInfo()
|
||||||
@@ -1038,7 +1092,7 @@ const handleViewOrder = (row) => {
|
|||||||
const handleViewTicket = (row) => {
|
const handleViewTicket = (row) => {
|
||||||
router.push({
|
router.push({
|
||||||
path: '/ticket/detail',
|
path: '/ticket/detail',
|
||||||
query: { work_id: row.work_id }
|
query: { id: row.work_id }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1286,6 +1340,12 @@ const formatDate = (dateString) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 余额格式化（分转元，保留2位小数）
|
||||||
|
const formatBalance = (price) => {
|
||||||
|
if (price === undefined || price === null) return '0.00'
|
||||||
|
return (price / 100).toFixed(2)
|
||||||
|
}
|
||||||
|
|
||||||
const loadUserData = async () => {
|
const loadUserData = async () => {
|
||||||
if(!route.query.user_id){
|
if(!route.query.user_id){
|
||||||
ElMessage.error('缺少用户ID参数');
|
ElMessage.error('缺少用户ID参数');
|
||||||
@@ -1375,6 +1435,7 @@ onActivated(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-wrapper {
|
.avatar-wrapper {
|
||||||
@@ -1435,27 +1496,37 @@ onActivated(() => {
|
|||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-stats {
|
/* 统一的用户数据概览区域 */
|
||||||
|
.profile-stats-unified {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 32px;
|
align-items: center;
|
||||||
|
gap: 24px;
|
||||||
|
margin-left: auto;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-item {
|
.profile-stats-unified .stat-item {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
min-width: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.profile-stats-unified .stat-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #909399;
|
color: #909399;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-value {
|
.profile-stats-unified .stat-value {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #303133;
|
color: #303133;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.stats-divider {
|
||||||
|
height: 40px;
|
||||||
|
margin: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.action-divider {
|
.action-divider {
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 20px 0;
|
||||||
}
|
}
|
||||||
@@ -1540,28 +1611,15 @@ onActivated(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 推荐人选择器 */
|
/* 推荐人选择器 */
|
||||||
.recommend-user-selector {
|
/* 推荐人选择器样式 */
|
||||||
width: 100%;
|
.clear-icon {
|
||||||
}
|
cursor: pointer;
|
||||||
|
|
||||||
.selected-user {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
background: #f5f7fa;
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 1px solid #e4e7ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected-user .user-name {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #303133;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected-user .user-id {
|
|
||||||
color: #909399;
|
color: #909399;
|
||||||
font-size: 12px;
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-icon:hover {
|
||||||
|
color: #f56c6c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -1671,12 +1729,17 @@ onActivated(() => {
|
|||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-stats {
|
.profile-stats-unified {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: space-around;
|
justify-content: flex-start;
|
||||||
background: #f9fafc;
|
background: #f9fafc;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-divider {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance-overview {
|
.balance-overview {
|
||||||
@@ -1688,5 +1751,13 @@ onActivated(() => {
|
|||||||
.balance-overview {
|
.balance-overview {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.profile-stats-unified {
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-stats-unified .stat-item {
|
||||||
|
min-width: 60px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -141,20 +141,34 @@
|
|||||||
<el-input v-model="groupForm.auth" type="textarea" :rows="4" placeholder="请输入权限配置（JSON格式）" />
|
<el-input v-model="groupForm.auth" type="textarea" :rows="4" placeholder="请输入权限配置（JSON格式）" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="下一级用户组ID">
|
<el-form-item label="下一级用户组ID">
|
||||||
<div class="selector-field">
|
<el-input
|
||||||
<div class="selector-info" v-if="selectedHigherGroupInfo">
|
v-if="selectedHigherGroupInfo"
|
||||||
<el-tag type="primary" effect="plain">
|
:model-value="`${selectedHigherGroupInfo.Name || selectedHigherGroupInfo.name} (ID: ${groupForm.higher_level_id})`"
|
||||||
ID: {{ groupForm.higher_level_id }} - {{ selectedHigherGroupInfo.group_name || selectedHigherGroupInfo.name }}
|
readonly
|
||||||
</el-tag>
|
style="width: 100%"
|
||||||
</div>
|
>
|
||||||
<div class="selector-actions">
|
<template #suffix>
|
||||||
<el-button type="primary" @click="groupSelectorVisible = true">
|
<el-icon class="clear-icon" @click="clearHigherGroup"><Close /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="groupSelectorVisible = true">
|
||||||
<el-icon><Connection /></el-icon>
|
<el-icon><Connection /></el-icon>
|
||||||
{{ groupForm.higher_level_id ? '更换用户组' : '选择用户组' }}
|
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button v-if="groupForm.higher_level_id" @click="clearHigherGroup">清除</el-button>
|
</template>
|
||||||
</div>
|
</el-input>
|
||||||
</div>
|
<el-input
|
||||||
|
v-else
|
||||||
|
placeholder="请选择下一级用户组（可选）"
|
||||||
|
readonly
|
||||||
|
style="width: 100%"
|
||||||
|
@click="groupSelectorVisible = true"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="groupSelectorVisible = true">
|
||||||
|
<el-icon><Connection /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<!-- 用户组选择器 -->
|
<!-- 用户组选择器 -->
|
||||||
@@ -274,7 +288,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from 'vue'
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { Plus, Refresh, Edit, User, Delete, Connection } from '@element-plus/icons-vue'
|
import { Plus, Refresh, Edit, User, Delete, Connection, Close } from '@element-plus/icons-vue'
|
||||||
import {
|
import {
|
||||||
getUserGroupList,
|
getUserGroupList,
|
||||||
getUserGroupMemberList,
|
getUserGroupMemberList,
|
||||||
@@ -747,22 +761,14 @@ onMounted(() => {
|
|||||||
100% { background-position: -200% 0; }
|
100% { background-position: -200% 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 选择器字段样式 */
|
/* 选择器清除图标样式 */
|
||||||
.selector-field {
|
.clear-icon {
|
||||||
display: flex;
|
cursor: pointer;
|
||||||
flex-direction: column;
|
color: #909399;
|
||||||
gap: 8px;
|
transition: color 0.2s;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.selector-info {
|
.clear-icon:hover {
|
||||||
display: flex;
|
color: #f56c6c;
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selector-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+333
-45
@@ -4,35 +4,42 @@
|
|||||||
<el-card class="main-container" shadow="never">
|
<el-card class="main-container" shadow="never">
|
||||||
<!-- 搜索和操作栏 -->
|
<!-- 搜索和操作栏 -->
|
||||||
<div class="filter-section">
|
<div class="filter-section">
|
||||||
<div class="filter-content">
|
<!-- 第一行：搜索区域 -->
|
||||||
<el-form :inline="true" :model="queryParams" class="search-form">
|
<div class="filter-row search-row">
|
||||||
<el-form-item label="关键字">
|
<div class="search-group">
|
||||||
<el-input v-model="queryParams.key" placeholder="请输入用户名/邮箱" clearable style="width: 200px" />
|
<span class="search-label">关键字</span>
|
||||||
</el-form-item>
|
<el-input
|
||||||
<el-form-item>
|
v-model="queryParams.key"
|
||||||
|
placeholder="请输入用户名/邮箱"
|
||||||
|
clearable
|
||||||
|
class="search-input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="search-group">
|
||||||
|
<span class="search-label">用户ID</span>
|
||||||
|
<el-input
|
||||||
|
v-model="jumpUserId"
|
||||||
|
placeholder="输入ID跳转"
|
||||||
|
clearable
|
||||||
|
class="search-input-small"
|
||||||
|
@keyup.enter="handleJumpToUser"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="search-buttons">
|
||||||
<el-button type="primary" @click="handleQuery">
|
<el-button type="primary" @click="handleQuery">
|
||||||
<el-icon><Search /></el-icon>查询
|
<el-icon><Search /></el-icon><span class="btn-text">查询</span>
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button @click="resetQuery">重置</el-button>
|
<el-button @click="resetQuery">重置</el-button>
|
||||||
<el-button type="success" @click="fetchUserList">
|
<el-button type="success" @click="fetchUserList">
|
||||||
<el-icon><Refresh /></el-icon>刷新
|
<el-icon><Refresh /></el-icon><span class="btn-text">刷新</span>
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="用户ID">
|
|
||||||
<el-input
|
|
||||||
v-model="jumpUserId"
|
|
||||||
placeholder="输入用户ID跳转"
|
|
||||||
clearable
|
|
||||||
style="width: 150px"
|
|
||||||
@keyup.enter="handleJumpToUser"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="warning" @click="handleJumpToUser">
|
<el-button type="warning" @click="handleJumpToUser">
|
||||||
<el-icon><Position /></el-icon>跳转
|
<el-icon><Position /></el-icon><span class="btn-text">跳转</span>
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-form-item>
|
</div>
|
||||||
</el-form>
|
</div>
|
||||||
|
<!-- 第二行：操作栏 -->
|
||||||
|
<div class="filter-row action-row">
|
||||||
<div class="action-bar">
|
<div class="action-bar">
|
||||||
<el-button type="primary" @click="handleAdd">
|
<el-button type="primary" @click="handleAdd">
|
||||||
<el-icon><Plus /></el-icon>新增用户
|
<el-icon><Plus /></el-icon>新增用户
|
||||||
@@ -70,12 +77,69 @@
|
|||||||
<div class="skeleton-cell skeleton-action"></div>
|
<div class="skeleton-cell skeleton-action"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 数据表格 -->
|
|
||||||
|
<!-- 移动端卡片列表 -->
|
||||||
|
<div v-else class="mobile-card-list">
|
||||||
|
<div v-for="row in userList" :key="row.UserId" class="user-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<el-checkbox v-model="row.selected" @change="handleCardSelect(row)" />
|
||||||
|
<el-avatar :size="48" :src="row.avatarUrl || ''" class="card-avatar" />
|
||||||
|
<div class="card-user-info">
|
||||||
|
<div class="card-username">{{ row.UserName }}</div>
|
||||||
|
<div class="card-email">{{ row.Email || '未设置邮箱' }}</div>
|
||||||
|
</div>
|
||||||
|
<el-tag :type="row.IsDeleted ? 'danger' : 'success'" size="small">
|
||||||
|
{{ row.IsDeleted ? '已删除' : '正常' }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="card-info-row">
|
||||||
|
<span class="card-label">用户ID:</span>
|
||||||
|
<span class="card-value">{{ row.UserId }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info-row">
|
||||||
|
<span class="card-label">手机号:</span>
|
||||||
|
<span class="card-value">{{ row.Phone || '未设置' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info-row">
|
||||||
|
<span class="card-label">用户组:</span>
|
||||||
|
<span class="card-value">{{ row.UserGroup?.Name || '默认用户组' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info-row">
|
||||||
|
<span class="card-label">实名:</span>
|
||||||
|
<span class="card-value">{{ row.RealName?.Name || '未实名' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info-row">
|
||||||
|
<span class="card-label">注册时间:</span>
|
||||||
|
<span class="card-value">{{ formatDate(row.CreatedAt) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<el-button type="primary" size="small" @click="handleUserDetail(row)">详情</el-button>
|
||||||
|
<el-dropdown trigger="click" @command="(command) => handleCommand(command, row)">
|
||||||
|
<el-button size="small">更多<el-icon><ArrowDown /></el-icon></el-button>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item command="edit">编辑用户</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="avatar">修改头像</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="password">修改密码</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="group">修改用户组</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="realname">实名信息</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="balance">余额管理</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="delete" divided>删除用户</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 数据表格（PC端） -->
|
||||||
<el-table
|
<el-table
|
||||||
v-else
|
v-if="!loading"
|
||||||
:data="userList"
|
:data="userList"
|
||||||
@selection-change="handleSelectionChange"
|
@selection-change="handleSelectionChange"
|
||||||
style="width: 100%"
|
class="desktop-table"
|
||||||
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
|
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
|
||||||
>
|
>
|
||||||
<el-table-column type="selection" width="55" />
|
<el-table-column type="selection" width="55" />
|
||||||
@@ -969,52 +1033,276 @@ onMounted(() => {
|
|||||||
background: #fafbfc;
|
background: #fafbfc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-content {
|
.filter-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 16px 20px;
|
padding: 12px 20px;
|
||||||
gap: 20px;
|
gap: 16px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-form {
|
.filter-row:not(:last-child) {
|
||||||
margin: 0;
|
border-bottom: 1px solid #ebeef5;
|
||||||
flex: 1;
|
}
|
||||||
|
|
||||||
|
.search-row {
|
||||||
|
padding: 16px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-row {
|
||||||
|
padding: 12px 20px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 8px;
|
||||||
min-width: 400px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-form :deep(.el-form-item) {
|
.search-label {
|
||||||
margin-bottom: 0;
|
font-size: 14px;
|
||||||
}
|
color: #606266;
|
||||||
|
|
||||||
.search-form :deep(.el-form-item__label) {
|
|
||||||
margin-right: 8px;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input-small {
|
||||||
|
width: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-buttons {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-text {
|
||||||
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-bar {
|
.action-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端卡片列表样式 */
|
||||||
|
.mobile-card-list {
|
||||||
|
display: none;
|
||||||
|
padding: 16px;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-card {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e1e8ed;
|
||||||
|
padding: 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 1px solid #f0f2f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-avatar {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
.card-user-info {
|
||||||
.filter-content {
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-username {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2c3e50;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-email {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-info-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 6px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-label {
|
||||||
|
color: #909399;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-value {
|
||||||
|
color: #2c3e50;
|
||||||
|
text-align: right;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 8px;
|
||||||
|
padding-top: 12px;
|
||||||
|
border-top: 1px solid #f0f2f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PC端表格显示 */
|
||||||
|
.desktop-table {
|
||||||
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 平板适配 */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.search-row {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-form {
|
.search-group {
|
||||||
min-width: 100%;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input,
|
||||||
|
.search-input-small {
|
||||||
|
flex: 1;
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-buttons {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端适配 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.filter-row {
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-row {
|
||||||
|
padding: 12px 16px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-row {
|
||||||
|
padding: 10px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-group {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-label {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input,
|
||||||
|
.search-input-small {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-buttons {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 8px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-buttons .el-button {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-text {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-bar {
|
.action-bar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: flex-end;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-bar .el-button {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端显示卡片，隐藏表格 */
|
||||||
|
.mobile-card-list {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-table {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分页移动端样式 */
|
||||||
|
.pagination {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination :deep(.el-pagination__sizes),
|
||||||
|
.pagination :deep(.el-pagination__jump) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 超小屏幕适配 */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.filter-row {
|
||||||
|
padding: 10px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-buttons {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-buttons .el-button {
|
||||||
|
padding: 8px 0;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-bar {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-bar .el-button {
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 8px 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,27 @@
|
|||||||
✅已完成、⚠️部分完成、❌未完成这样显示
|
✅已完成、⚠️部分完成、❌未完成这样显示
|
||||||
-----------------------------------------------------------------------------------------------需要解决
|
-----------------------------------------------------------------------------------------------需要解决
|
||||||
统计现在的项目结构，接口，页面，css，全局主题
|
|
||||||
|
|
||||||
|
1.http://localhost:5173/user/list对于用户列表的样式在窗口拖动宽度变小的时候会造成样式错位，需要将其兼容移动端样式
|
||||||
|
|
||||||
|
2.侧边栏添加推出和收回样式，需要兼容移动端展示，AdminLayout 组件需要进行兼容修改
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
-----------------------------------------------------------------------------------------------需要解决
|
||||||
|
|
||||||
|
规则限制：
|
||||||
|
1.在-------需要解决的中间进行写是否解决问题的判断也可以列todolist便于查看是否完成
|
||||||
|
2.不要将我原本的问题进行删除了，只需要在范围的最后面添加todolist判断对应问题是否完成就可以了
|
||||||
|
3.在以后只要有添加时间选择器就要遵循以下规则
|
||||||
|
时间选择器接受的是毫秒级时间戳，获取时的时间转换，将ISO格式转换为毫秒级时间戳
|
||||||
|
- 列表展示使用formatDate函数
|
||||||
|
- 时间选择器正确显示毫秒级时间戳
|
||||||
|
- 提交时转换为秒级时间戳
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 一、项目结构 ✅
|
## 一、项目结构 ✅
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user