fix:将填写弹窗修改为选择弹窗
This commit is contained in:
@@ -173,15 +173,116 @@
|
||||
</div>
|
||||
<el-empty v-else description="暂无操作记录" :image-size="100" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="订单列表" name="3">
|
||||
<el-table :data="userOrderList" v-loading="orderListLoading" stripe style="width: 100%">
|
||||
<el-table-column prop="order_id" label="订单ID" width="100" />
|
||||
<el-table-column prop="good_name" label="商品名称" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="price" label="金额" width="100">
|
||||
<template #default="{row}">¥{{ (row.price / 100).toFixed(2) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{row}">
|
||||
<el-tag :type="getOrderStatusType(row.status)" size="small">{{ getOrderStatusText(row.status) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" width="160">
|
||||
<template #default="{row}">{{ formatDate(row.created_at) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link size="small" @click="handleViewOrder(scope.row)">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-wrapper" v-if="orderListTotal > 0">
|
||||
<el-pagination
|
||||
v-model:current-page="orderListPage"
|
||||
v-model:page-size="orderListPageSize"
|
||||
:total="orderListTotal"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
layout="total, prev, pager, next"
|
||||
@size-change="handleOrderListSizeChange"
|
||||
@current-change="handleOrderListPageChange"
|
||||
/>
|
||||
</div>
|
||||
<el-empty v-else description="暂无订单记录" :image-size="100" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="工单列表" name="4">
|
||||
<el-table :data="userTicketList" v-loading="ticketListLoading" stripe style="width: 100%">
|
||||
<el-table-column prop="work_id" label="工单ID" width="100" />
|
||||
<el-table-column prop="title" label="标题" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{row}">
|
||||
<el-tag :type="getTicketStatusType(row.status)" size="small">{{ getTicketStatusText(row.status) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" width="160">
|
||||
<template #default="{row}">{{ formatDate(row.created_at) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link size="small" @click="handleViewTicket(scope.row)">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-wrapper" v-if="ticketListTotal > 0">
|
||||
<el-pagination
|
||||
v-model:current-page="ticketListPage"
|
||||
v-model:page-size="ticketListPageSize"
|
||||
:total="ticketListTotal"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
layout="total, prev, pager, next"
|
||||
@size-change="handleTicketListSizeChange"
|
||||
@current-change="handleTicketListPageChange"
|
||||
/>
|
||||
</div>
|
||||
<el-empty v-else description="暂无工单记录" :image-size="100" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 余额管理区域 -->
|
||||
<el-card class="balance-card" shadow="never" style="margin-top: 24px;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="title"><el-icon><Wallet /></el-icon> 余额管理</span>
|
||||
<el-button type="primary" size="small" @click="handleBalanceManage">前往余额管理</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<div class="balance-content">
|
||||
<div class="balance-overview">
|
||||
<div class="balance-item">
|
||||
<div class="balance-label">账户余额</div>
|
||||
<div class="balance-value primary">¥{{ (userBalance.balance / 100).toFixed(2) }}</div>
|
||||
</div>
|
||||
<div class="balance-item">
|
||||
<div class="balance-label">冻结余额</div>
|
||||
<div class="balance-value warning">¥{{ (userBalance.frozen_balance / 100).toFixed(2) }}</div>
|
||||
</div>
|
||||
<div class="balance-item">
|
||||
<div class="balance-label">累计充值</div>
|
||||
<div class="balance-value success">¥{{ (userBalance.total_recharge / 100).toFixed(2) }}</div>
|
||||
</div>
|
||||
<div class="balance-item">
|
||||
<div class="balance-label">累计消费</div>
|
||||
<div class="balance-value danger">¥{{ (userBalance.total_consume / 100).toFixed(2) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider />
|
||||
<div class="balance-actions">
|
||||
<el-button type="success" plain @click="handleRecharge">充值</el-button>
|
||||
<el-button type="warning" plain @click="handleDeduct">扣款</el-button>
|
||||
<el-button type="info" plain @click="handleViewBalanceHistory">余额记录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑用户对话框 -->
|
||||
<el-dialog v-model="editDialogVisible" title="编辑用户信息" width="500px" append-to-body destroy-on-close>
|
||||
<el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="80px">
|
||||
<el-dialog v-model="editDialogVisible" title="编辑用户信息" width="600px" append-to-body destroy-on-close>
|
||||
<el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="100px">
|
||||
<el-form-item label="用户名" prop="UserName">
|
||||
<el-input v-model="editForm.UserName" placeholder="请输入用户名" />
|
||||
</el-form-item>
|
||||
@@ -200,8 +301,20 @@
|
||||
<el-option label="女" value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="推荐人ID">
|
||||
<el-input-number v-model="editForm.RecommendUserId" :min="0" style="width: 100%" />
|
||||
<el-form-item label="推荐人">
|
||||
<div class="recommend-user-selector">
|
||||
<div class="selected-user" v-if="recommendUserInfo.UserId">
|
||||
<el-avatar :size="32" :src="recommendUserInfo.Avatar" />
|
||||
<span class="user-name">{{ recommendUserInfo.UserName }}</span>
|
||||
<span class="user-id">(ID: {{ recommendUserInfo.UserId }})</span>
|
||||
<el-button type="danger" link size="small" @click="clearRecommendUser">
|
||||
<el-icon><Close /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button v-else type="primary" plain @click="showUserSelectorDialog = true">
|
||||
<el-icon><User /></el-icon> 选择推荐人
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
@@ -212,6 +325,13 @@
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 用户选择器(推荐人选择) -->
|
||||
<UserListSelector
|
||||
v-model="showUserSelectorDialog"
|
||||
:current-user-id="editForm.RecommendUserId"
|
||||
@confirm="handleRecommendUserSelect"
|
||||
/>
|
||||
|
||||
<!-- 头像选择对话框 -->
|
||||
<AvatarSelector
|
||||
v-model="showAvatarSelector"
|
||||
@@ -375,19 +495,22 @@ import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { baseURL } from '@/utils/request'
|
||||
import AvatarSelector from '@/components/admin/AvatarSelector.vue'
|
||||
import UserListSelector from '@/components/admin/UserListSelector.vue'
|
||||
import {
|
||||
ArrowLeft, Refresh, Edit as EditIcon, Delete, Wallet, Avatar, Lock,
|
||||
UserFilled, Document, Clock, List, Switch, User, Camera, Upload,
|
||||
UploadFilled, Key, Monitor, Setting
|
||||
UploadFilled, Key, Monitor, Setting, Close
|
||||
} from '@element-plus/icons-vue'
|
||||
import { getUserGroupList } from '@/api/admin/user'
|
||||
import { getFileDetail, getFileList, getFile, uploadFile } from '@/api/admin/file'
|
||||
import { getUserGroupList, getUserBalanceCount } from '@/api/admin/user'
|
||||
import { getFileDetail } from '@/api/admin/file'
|
||||
import {
|
||||
getUserInfo, updateUserInfo, updateUserAvatar, updateUserPassword,
|
||||
updateUserGroup, updateUserRealName, getUserLoginRecord,
|
||||
getUserOperationRecord, mockUserLogin, deleteUser, updateUserAdmin
|
||||
} from '@/api/admin/user'
|
||||
import { getAdminGroupList } from '@/api/admin/group'
|
||||
import { getOrderList } from '@/api/admin/order'
|
||||
import { getTickerList } from '@/api/ticket'
|
||||
|
||||
const Edit = EditIcon
|
||||
const route = useRoute()
|
||||
@@ -418,6 +541,28 @@ const operationHistoryTotal = ref(0)
|
||||
const operationHistoryPage = ref(1)
|
||||
const operationHistoryPageSize = ref(10)
|
||||
|
||||
// 订单列表相关
|
||||
const userOrderList = ref([])
|
||||
const orderListLoading = ref(false)
|
||||
const orderListTotal = ref(0)
|
||||
const orderListPage = ref(1)
|
||||
const orderListPageSize = ref(10)
|
||||
|
||||
// 工单列表相关
|
||||
const userTicketList = ref([])
|
||||
const ticketListLoading = ref(false)
|
||||
const ticketListTotal = ref(0)
|
||||
const ticketListPage = ref(1)
|
||||
const ticketListPageSize = ref(10)
|
||||
|
||||
// 用户余额相关
|
||||
const userBalance = ref({
|
||||
balance: 0,
|
||||
frozen_balance: 0,
|
||||
total_recharge: 0,
|
||||
total_consume: 0
|
||||
})
|
||||
|
||||
// 编辑用户相关
|
||||
const editDialogVisible = ref(false)
|
||||
const editForm = reactive({
|
||||
@@ -455,6 +600,15 @@ const showAvatarSelector = ref(false)
|
||||
const selectedAvatarId = ref('')
|
||||
const currentAvatarUrl = ref('')
|
||||
|
||||
// 推荐人选择相关
|
||||
const showUserSelectorDialog = ref(false)
|
||||
const recommendUserInfo = ref({
|
||||
UserId: '',
|
||||
UserName: '',
|
||||
Avatar: ''
|
||||
})
|
||||
|
||||
|
||||
// 密码管理相关
|
||||
const passwordDialogVisible = ref(false)
|
||||
const passwordForm = reactive({
|
||||
@@ -509,6 +663,10 @@ const handleTabClick = (tab) => {
|
||||
fetchLoginHistory()
|
||||
} else if (tab.props.name === '2') {
|
||||
fetchOperationHistory()
|
||||
} else if (tab.props.name === '3') {
|
||||
fetchUserOrderList()
|
||||
} else if (tab.props.name === '4') {
|
||||
fetchUserTicketList()
|
||||
}
|
||||
};
|
||||
|
||||
@@ -567,9 +725,51 @@ const handleEditUser = async () => {
|
||||
editForm.RecommendUserId = userInfo.value.RecommendUserId || ''
|
||||
editForm.CoverID = userInfo.value.CoverID || ''
|
||||
|
||||
// 初始化推荐人信息
|
||||
if (userInfo.value.RecommendUserId) {
|
||||
await fetchRecommendUserInfo(userInfo.value.RecommendUserId)
|
||||
} else {
|
||||
recommendUserInfo.value = { UserId: '', UserName: '', Avatar: '' }
|
||||
}
|
||||
|
||||
editDialogVisible.value = true
|
||||
}
|
||||
|
||||
// 获取推荐人信息
|
||||
const fetchRecommendUserInfo = async (userId) => {
|
||||
try {
|
||||
const res = await getUserInfo({ user_id: userId })
|
||||
if (res.data.code === 200) {
|
||||
const user = res.data.data
|
||||
recommendUserInfo.value = {
|
||||
UserId: user.UserId || user.user_id,
|
||||
UserName: user.UserName || user.user_name,
|
||||
Avatar: user.Avatar || user.cover || ''
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取推荐人信息失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 推荐人选择处理
|
||||
const handleRecommendUserSelect = (user) => {
|
||||
recommendUserInfo.value = {
|
||||
UserId: user.user_id || user.UserId,
|
||||
UserName: user.user_name || user.UserName,
|
||||
Avatar: user.cover || user.Avatar || ''
|
||||
}
|
||||
editForm.RecommendUserId = user.user_id || user.UserId
|
||||
}
|
||||
|
||||
// 清除推荐人
|
||||
const clearRecommendUser = () => {
|
||||
recommendUserInfo.value = { UserId: '', UserName: '', Avatar: '' }
|
||||
editForm.RecommendUserId = ''
|
||||
}
|
||||
|
||||
|
||||
// 提交编辑表单
|
||||
const submitEditForm = async () => {
|
||||
try {
|
||||
@@ -729,6 +929,144 @@ const handleDeleteOperationRecord = async (record) => {
|
||||
ElMessage.info('功能开发中')
|
||||
}
|
||||
|
||||
// 获取用户订单列表
|
||||
const fetchUserOrderList = async () => {
|
||||
if (!route.query.user_id) return
|
||||
orderListLoading.value = true
|
||||
try {
|
||||
const res = await getOrderList({
|
||||
user_id: route.query.user_id,
|
||||
page: orderListPage.value,
|
||||
count: orderListPageSize.value
|
||||
})
|
||||
if (res.data.code === 200) {
|
||||
userOrderList.value = res.data.data.data || []
|
||||
orderListTotal.value = res.data.data.all_count || 0
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('获取订单列表失败')
|
||||
} finally {
|
||||
orderListLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleOrderListSizeChange = (size) => {
|
||||
orderListPageSize.value = size
|
||||
orderListPage.value = 1
|
||||
fetchUserOrderList()
|
||||
}
|
||||
|
||||
const handleOrderListPageChange = (page) => {
|
||||
orderListPage.value = page
|
||||
fetchUserOrderList()
|
||||
}
|
||||
|
||||
// 获取用户工单列表
|
||||
const fetchUserTicketList = async () => {
|
||||
if (!route.query.user_id) return
|
||||
ticketListLoading.value = true
|
||||
try {
|
||||
const res = await getTickerList(ticketListPageSize.value, ticketListPage.value, undefined, undefined, undefined, route.query.user_id)
|
||||
if (res.code === 200) {
|
||||
userTicketList.value = res.data.data || []
|
||||
ticketListTotal.value = res.data.all_count || 0
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('获取工单列表失败')
|
||||
} finally {
|
||||
ticketListLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleTicketListSizeChange = (size) => {
|
||||
ticketListPageSize.value = size
|
||||
ticketListPage.value = 1
|
||||
fetchUserTicketList()
|
||||
}
|
||||
|
||||
const handleTicketListPageChange = (page) => {
|
||||
ticketListPage.value = page
|
||||
fetchUserTicketList()
|
||||
}
|
||||
|
||||
// 获取用户余额信息
|
||||
const fetchUserBalance = async () => {
|
||||
if (!route.query.user_id) return
|
||||
try {
|
||||
const res = await getUserBalanceCount({ user_id: route.query.user_id })
|
||||
if (res.data.code === 200) {
|
||||
userBalance.value = {
|
||||
balance: res.data.data.balance || 0,
|
||||
frozen_balance: res.data.data.frozen_balance || 0,
|
||||
total_recharge: res.data.data.total_recharge || 0,
|
||||
total_consume: res.data.data.total_consume || 0
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户余额失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 订单状态
|
||||
const getOrderStatusText = (status) => {
|
||||
const map = { 0: '待支付', 1: '已支付', 2: '已取消', 3: '已退款', 4: '已完成' }
|
||||
return map[status] || '未知'
|
||||
}
|
||||
|
||||
const getOrderStatusType = (status) => {
|
||||
const map = { 0: 'warning', 1: 'success', 2: 'info', 3: 'danger', 4: 'success' }
|
||||
return map[status] || 'info'
|
||||
}
|
||||
|
||||
// 工单状态
|
||||
const getTicketStatusText = (status) => {
|
||||
const map = { 0: '待处理', 1: '处理中', 2: '已回复', 3: '已关闭' }
|
||||
return map[status] || '未知'
|
||||
}
|
||||
|
||||
const getTicketStatusType = (status) => {
|
||||
const map = { 0: 'warning', 1: 'primary', 2: 'success', 3: 'info' }
|
||||
return map[status] || 'info'
|
||||
}
|
||||
|
||||
// 查看订单详情
|
||||
const handleViewOrder = (row) => {
|
||||
router.push({
|
||||
path: '/order/list',
|
||||
query: { order_id: row.order_id }
|
||||
})
|
||||
}
|
||||
|
||||
// 查看工单详情
|
||||
const handleViewTicket = (row) => {
|
||||
router.push({
|
||||
path: '/ticket/detail',
|
||||
query: { work_id: row.work_id }
|
||||
})
|
||||
}
|
||||
|
||||
// 余额操作
|
||||
const handleRecharge = () => {
|
||||
router.push({
|
||||
path: '/user/balance',
|
||||
query: { user_id: userInfo.value.UserId, action: 'recharge' }
|
||||
})
|
||||
}
|
||||
|
||||
const handleDeduct = () => {
|
||||
router.push({
|
||||
path: '/user/balance',
|
||||
query: { user_id: userInfo.value.UserId, action: 'deduct' }
|
||||
})
|
||||
}
|
||||
|
||||
const handleViewBalanceHistory = () => {
|
||||
router.push({
|
||||
path: '/user/balance',
|
||||
query: { user_id: userInfo.value.UserId }
|
||||
})
|
||||
}
|
||||
|
||||
// 删除用户
|
||||
const handleDeleteUser = async () => {
|
||||
try {
|
||||
@@ -958,8 +1296,11 @@ const loadUserData = async () => {
|
||||
return;
|
||||
}
|
||||
await fetchUserInfo();
|
||||
await fetchUserBalance();
|
||||
await fetchLoginHistory();
|
||||
await fetchOperationHistory();
|
||||
await fetchUserOrderList();
|
||||
await fetchUserTicketList();
|
||||
}
|
||||
|
||||
// 初始化
|
||||
@@ -1201,6 +1542,32 @@ onActivated(() => {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 推荐人选择器 */
|
||||
.recommend-user-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
/* Token Dialog */
|
||||
.token-container {
|
||||
padding: 20px 0;
|
||||
@@ -1223,6 +1590,78 @@ onActivated(() => {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* Balance Card */
|
||||
.balance-card {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.balance-card .card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.balance-card .card-header .title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.balance-content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.balance-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.balance-item {
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
background: #f9fafc;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.balance-label {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.balance-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.balance-value.primary {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.balance-value.warning {
|
||||
color: #e6a23c;
|
||||
}
|
||||
|
||||
.balance-value.success {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.balance-value.danger {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.balance-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.detail-grid {
|
||||
@@ -1242,5 +1681,15 @@ onActivated(() => {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.balance-overview {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.balance-overview {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -141,13 +141,29 @@
|
||||
<el-input v-model="groupForm.auth" type="textarea" :rows="4" placeholder="请输入权限配置(JSON格式)" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下一级用户组ID">
|
||||
<el-input-number
|
||||
v-model="groupForm.higher_level_id"
|
||||
:min="0"
|
||||
placeholder="请输入下一级用户组ID"
|
||||
style="width: 100%"
|
||||
/>
|
||||
<div class="selector-field">
|
||||
<div class="selector-info" v-if="selectedHigherGroupInfo">
|
||||
<el-tag type="primary" effect="plain">
|
||||
ID: {{ groupForm.higher_level_id }} - {{ selectedHigherGroupInfo.group_name || selectedHigherGroupInfo.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="selector-actions">
|
||||
<el-button type="primary" @click="groupSelectorVisible = true">
|
||||
<el-icon><Connection /></el-icon>
|
||||
{{ groupForm.higher_level_id ? '更换用户组' : '选择用户组' }}
|
||||
</el-button>
|
||||
<el-button v-if="groupForm.higher_level_id" @click="clearHigherGroup">清除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 用户组选择器 -->
|
||||
<UserGroupSelector
|
||||
v-model="groupSelectorVisible"
|
||||
:current-group-id="groupForm.higher_level_id"
|
||||
:exclude-group-id="groupForm.group_id"
|
||||
@confirm="handleHigherGroupSelect"
|
||||
/>
|
||||
<el-form-item label="升级所需消费金额">
|
||||
<el-input-number
|
||||
v-model="groupForm.floor_price"
|
||||
@@ -258,7 +274,7 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Refresh, Edit, User, Delete } from '@element-plus/icons-vue'
|
||||
import { Plus, Refresh, Edit, User, Delete, Connection } from '@element-plus/icons-vue'
|
||||
import {
|
||||
getUserGroupList,
|
||||
getUserGroupMemberList,
|
||||
@@ -268,6 +284,7 @@ import {
|
||||
addUserGroupMember
|
||||
} from '@/api/admin/user'
|
||||
import { formatTime } from '@/utils/tool'
|
||||
import UserGroupSelector from '@/components/admin/UserGroupSelector.vue'
|
||||
|
||||
// 查询参数
|
||||
const queryParams = reactive({
|
||||
@@ -327,6 +344,10 @@ const dialogType = ref('add')
|
||||
const groupFormRef = ref(null)
|
||||
const memberFormRef = ref(null)
|
||||
|
||||
// 用户组选择器相关
|
||||
const groupSelectorVisible = ref(false)
|
||||
const selectedHigherGroupInfo = ref(null)
|
||||
|
||||
// 获取用户组列表
|
||||
const fetchGroupList = async () => {
|
||||
loading.value = true
|
||||
@@ -418,6 +439,7 @@ const handleMemberCurrentChange = (page) => {
|
||||
const handleAdd = () => {
|
||||
dialogType.value = 'add'
|
||||
dialogVisible.value = true
|
||||
selectedHigherGroupInfo.value = null
|
||||
Object.assign(groupForm, {
|
||||
group_id: undefined,
|
||||
name: '',
|
||||
@@ -433,6 +455,7 @@ const handleAdd = () => {
|
||||
const handleEdit = (row) => {
|
||||
dialogType.value = 'edit'
|
||||
dialogVisible.value = true
|
||||
selectedHigherGroupInfo.value = null
|
||||
|
||||
const groupId = row.group_id || row.GroupId || row.id || row.Id
|
||||
const groupName = row.group_name || row.name || row.Name
|
||||
@@ -449,6 +472,20 @@ const handleEdit = (row) => {
|
||||
floor_price: floorPrice,
|
||||
fixed: fixed
|
||||
})
|
||||
|
||||
// 查找下一级用户组信息用于显示
|
||||
if (higherLevelId) {
|
||||
const higherGroup = groupList.value.find(item => {
|
||||
const itemId = item.group_id || item.GroupId || item.id || item.Id
|
||||
return itemId === higherLevelId
|
||||
})
|
||||
if (higherGroup) {
|
||||
selectedHigherGroupInfo.value = higherGroup
|
||||
} else {
|
||||
// 如果在列表中找不到,创建一个简单的对象用于显示
|
||||
selectedHigherGroupInfo.value = { group_id: higherLevelId, name: `用户组${higherLevelId}` }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 查看成员
|
||||
@@ -555,6 +592,18 @@ const submitAddMember = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// 下一级用户组选择处理
|
||||
const handleHigherGroupSelect = (group) => {
|
||||
const groupId = group.group_id || group.GroupId || group.id || group.Id
|
||||
groupForm.higher_level_id = groupId
|
||||
selectedHigherGroupInfo.value = group
|
||||
}
|
||||
|
||||
const clearHigherGroup = () => {
|
||||
groupForm.higher_level_id = undefined
|
||||
selectedHigherGroupInfo.value = null
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
fetchGroupList()
|
||||
@@ -697,4 +746,23 @@ onMounted(() => {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* 选择器字段样式 */
|
||||
.selector-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selector-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.selector-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,6 +18,20 @@
|
||||
<el-icon><Refresh /></el-icon>刷新
|
||||
</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-icon><Position /></el-icon>跳转
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
@@ -384,7 +398,7 @@
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Delete, Search, ArrowDown, View, User, Edit, Refresh } from '@element-plus/icons-vue'
|
||||
import { Plus, Delete, Search, ArrowDown, View, User, Edit, Refresh, Position } from '@element-plus/icons-vue'
|
||||
import AvatarSelector from '@/components/admin/AvatarSelector.vue'
|
||||
import {
|
||||
getUserList,
|
||||
@@ -404,6 +418,9 @@ import { closeAllMessage } from '../../utils/message'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 跳转用户ID
|
||||
const jumpUserId = ref('')
|
||||
|
||||
// 查询参数
|
||||
const queryParams = reactive({
|
||||
key: '',
|
||||
@@ -552,6 +569,18 @@ const resetQuery = () => {
|
||||
fetchUserList()
|
||||
}
|
||||
|
||||
// 跳转到指定用户详情
|
||||
const handleJumpToUser = () => {
|
||||
if (!jumpUserId.value || !jumpUserId.value.trim()) {
|
||||
ElMessage.warning('请输入用户ID')
|
||||
return
|
||||
}
|
||||
router.push({
|
||||
path: '/user/detail',
|
||||
query: { user_id: jumpUserId.value.trim() }
|
||||
})
|
||||
}
|
||||
|
||||
// 选择项变化
|
||||
const handleSelectionChange = (selection) => {
|
||||
selectedRows.value = selection
|
||||
|
||||
Reference in New Issue
Block a user