refactor: 重构用户列表字段结构和组件化弹窗
- 调整用户列表字段，包含ID、手机号、微信号、注册时间、备注、剩余体验次数 - 更新mock数据，匹配新的字段结构 - 将次数设置弹窗拆分为独立组件LimitSettingModal - 优化搜索功能，支持手机号和微信号搜索 - 简化主页面代码，提高可维护性
This commit is contained in:
Wei_佳
parent
85ced0bf36
commit
8b47f76965
@ -44,68 +44,68 @@ export default {
|
||||
// Mock 数据
|
||||
const mockUsers = [
|
||||
{
|
||||
id: 1,
|
||||
phone: '13800138001',
|
||||
email: 'zhang.wei@example.com',
|
||||
id: 11111111,
|
||||
phone: '15021982682',
|
||||
wechat: 'f1498480844',
|
||||
created_at: '2024-01-15T10:30:00Z',
|
||||
last_login: '2024-11-13T09:15:00Z',
|
||||
is_active: true
|
||||
notes: '测试用户1',
|
||||
remaining_count: 1
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
id: 11111112,
|
||||
phone: '13800138002',
|
||||
email: 'li.ming@example.com',
|
||||
wechat: 'wx_limming2024',
|
||||
created_at: '2024-02-20T14:20:00Z',
|
||||
last_login: '2024-11-12T16:45:00Z',
|
||||
is_active: true
|
||||
notes: '付费用户',
|
||||
remaining_count: 5
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
id: 11111113,
|
||||
phone: '13800138003',
|
||||
email: 'wang.fang@example.com',
|
||||
wechat: null,
|
||||
created_at: '2024-03-10T08:45:00Z',
|
||||
last_login: null,
|
||||
is_active: false
|
||||
notes: null,
|
||||
remaining_count: 0
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
id: 11111114,
|
||||
phone: '13800138004',
|
||||
email: 'chen.jun@example.com',
|
||||
wechat: 'chenjun_vip',
|
||||
created_at: '2024-04-05T11:30:00Z',
|
||||
last_login: '2024-11-10T13:20:00Z',
|
||||
is_active: true
|
||||
notes: 'VIP用户',
|
||||
remaining_count: 10
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
id: 11111115,
|
||||
phone: '13800138005',
|
||||
email: 'liu.xia@example.com',
|
||||
wechat: 'liuxia888',
|
||||
created_at: '2024-05-12T16:15:00Z',
|
||||
last_login: '2024-11-11T10:30:00Z',
|
||||
is_active: true
|
||||
notes: '体验用户',
|
||||
remaining_count: 3
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
id: 11111116,
|
||||
phone: '13800138006',
|
||||
email: null,
|
||||
wechat: null,
|
||||
created_at: '2024-06-18T09:00:00Z',
|
||||
last_login: null,
|
||||
is_active: false
|
||||
notes: '新注册用户',
|
||||
remaining_count: 2
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
id: 11111117,
|
||||
phone: '13800138007',
|
||||
email: 'zhao.lei@example.com',
|
||||
wechat: 'zhaolei2024',
|
||||
created_at: '2024-07-22T12:45:00Z',
|
||||
last_login: '2024-11-13T08:30:00Z',
|
||||
is_active: true
|
||||
notes: null,
|
||||
remaining_count: 0
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
id: 11111118,
|
||||
phone: '13800138008',
|
||||
email: 'sun.mei@example.com',
|
||||
wechat: 'sunmei_user',
|
||||
created_at: '2024-08-30T15:20:00Z',
|
||||
last_login: '2024-11-09T14:15:00Z',
|
||||
is_active: true
|
||||
notes: '活跃用户',
|
||||
remaining_count: 7
|
||||
}
|
||||
]
|
||||
|
||||
@ -119,10 +119,10 @@ export default {
|
||||
)
|
||||
}
|
||||
|
||||
// 邮箱搜索
|
||||
if (params.email) {
|
||||
// 微信号搜索
|
||||
if (params.wechat) {
|
||||
filteredUsers = filteredUsers.filter(user =>
|
||||
user.email && user.email.includes(params.email)
|
||||
user.wechat && user.wechat.includes(params.wechat)
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
208
web/src/components/user-management/LimitSettingModal.vue
Normal file
208
web/src/components/user-management/LimitSettingModal.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import {
|
||||
NModal,
|
||||
NButton,
|
||||
NSelect,
|
||||
NInput,
|
||||
NDivider,
|
||||
} from 'naive-ui'
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
userData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(['update:visible', 'save'])
|
||||
|
||||
// 本地状态
|
||||
const limitForm = ref({
|
||||
remainingCount: 0,
|
||||
type: '免费体验',
|
||||
experienceCount: 1,
|
||||
notes: ''
|
||||
})
|
||||
|
||||
// 类型选项
|
||||
const typeOptions = [
|
||||
{ label: '免费体验', value: '免费体验' },
|
||||
{ label: '付费用户', value: '付费用户' },
|
||||
{ label: 'VIP用户', value: 'VIP用户' }
|
||||
]
|
||||
|
||||
// 监听用户数据变化，初始化表单
|
||||
watch(() => props.userData, (newData) => {
|
||||
if (newData && Object.keys(newData).length > 0) {
|
||||
limitForm.value = {
|
||||
remainingCount: newData.remaining_count || 0,
|
||||
type: newData.user_type || '免费体验',
|
||||
experienceCount: newData.experience_count || 1,
|
||||
notes: newData.notes || ''
|
||||
}
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// 体验次数增减
|
||||
function handleExperienceCountChange(delta) {
|
||||
const newCount = limitForm.value.experienceCount + delta
|
||||
if (newCount >= 0) {
|
||||
limitForm.value.experienceCount = newCount
|
||||
}
|
||||
}
|
||||
|
||||
// 保存设置
|
||||
function handleSave() {
|
||||
const data = {
|
||||
user_id: props.userData.id,
|
||||
...limitForm.value
|
||||
}
|
||||
emit('save', data)
|
||||
}
|
||||
|
||||
// 取消操作
|
||||
function handleCancel() {
|
||||
emit('update:visible', false)
|
||||
// 重置表单
|
||||
limitForm.value = {
|
||||
remainingCount: 0,
|
||||
type: '免费体验',
|
||||
experienceCount: 1,
|
||||
notes: ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NModal
|
||||
:show="visible"
|
||||
preset="card"
|
||||
title="估值设置"
|
||||
style="width: 500px;"
|
||||
:bordered="false"
|
||||
size="huge"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
@update:show="$emit('update:visible', $event)"
|
||||
>
|
||||
<div class="limit-setting-form">
|
||||
<!-- 剩余估值次数 -->
|
||||
<div class="form-row">
|
||||
<span class="label">剩余估值次数：</span>
|
||||
<span class="value">{{ limitForm.remainingCount }}</span>
|
||||
</div>
|
||||
|
||||
<NDivider style="margin: 16px 0;" />
|
||||
|
||||
<!-- 类型选择 -->
|
||||
<div class="form-row">
|
||||
<span class="label">类型：</span>
|
||||
<NSelect
|
||||
v-model:value="limitForm.type"
|
||||
:options="typeOptions"
|
||||
style="width: 120px;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 体验次数 -->
|
||||
<div class="form-row">
|
||||
<span class="label">体验次数：</span>
|
||||
<div class="count-control">
|
||||
<NButton
|
||||
size="small"
|
||||
@click="handleExperienceCountChange(-1)"
|
||||
:disabled="limitForm.experienceCount <= 0"
|
||||
>
|
||||
-
|
||||
</NButton>
|
||||
<span class="count-value">{{ limitForm.experienceCount }}</span>
|
||||
<NButton
|
||||
size="small"
|
||||
@click="handleExperienceCountChange(1)"
|
||||
>
|
||||
+
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备注 -->
|
||||
<div class="form-row notes-row">
|
||||
<span class="label">备注：</span>
|
||||
</div>
|
||||
<NInput
|
||||
v-model:value="limitForm.notes"
|
||||
type="textarea"
|
||||
placeholder="请输入备注信息"
|
||||
:rows="4"
|
||||
style="margin-top: 8px;"
|
||||
/>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons">
|
||||
<NButton @click="handleCancel">
|
||||
取消
|
||||
</NButton>
|
||||
<NButton type="primary" @click="handleSave">
|
||||
确定
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</NModal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.limit-setting-form {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.notes-row {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
min-width: 100px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.count-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.count-value {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
@ -9,18 +9,13 @@ import {
|
||||
NSwitch,
|
||||
NTag,
|
||||
NPopconfirm,
|
||||
NModal,
|
||||
NCard,
|
||||
NSelect,
|
||||
NInputNumber,
|
||||
NText,
|
||||
NDivider,
|
||||
} from 'naive-ui'
|
||||
|
||||
import CommonPage from '@/components/page/CommonPage.vue'
|
||||
import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
|
||||
import CrudModal from '@/components/table/CrudModal.vue'
|
||||
import CrudTable from '@/components/table/CrudTable.vue'
|
||||
import LimitSettingModal from '@/components/user-management/LimitSettingModal.vue'
|
||||
|
||||
import { formatDate, renderIcon } from '@/utils'
|
||||
import { useCRUD } from '@/composables'
|
||||
@ -35,21 +30,8 @@ const vPermission = resolveDirective('permission')
|
||||
|
||||
// 次数设置弹窗相关状态
|
||||
const limitModalVisible = ref(false)
|
||||
const limitForm = ref({
|
||||
remainingCount: 0,
|
||||
type: '免费体验',
|
||||
experienceCount: 1,
|
||||
notes: ''
|
||||
})
|
||||
const currentUser = ref(null)
|
||||
|
||||
// 类型选项
|
||||
const typeOptions = [
|
||||
{ label: '免费体验', value: '免费体验' },
|
||||
{ label: '付费用户', value: '付费用户' },
|
||||
{ label: 'VIP用户', value: 'VIP用户' }
|
||||
]
|
||||
|
||||
const {
|
||||
modalVisible,
|
||||
modalTitle,
|
||||
@ -90,13 +72,13 @@ const columns = [
|
||||
ellipsis: { tooltip: true },
|
||||
},
|
||||
{
|
||||
title: '邮箱',
|
||||
key: 'email',
|
||||
title: '微信号',
|
||||
key: 'wechat',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
ellipsis: { tooltip: true },
|
||||
render(row) {
|
||||
return row.email || '-'
|
||||
return row.wechat || '-'
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -106,48 +88,26 @@ const columns = [
|
||||
width: 160,
|
||||
ellipsis: { tooltip: true },
|
||||
render(row) {
|
||||
return h(
|
||||
NButton,
|
||||
{ size: 'small', type: 'text', ghost: true },
|
||||
{
|
||||
default: () => (row.created_at ? formatDate(row.created_at) : '-'),
|
||||
icon: renderIcon('mdi:calendar', { size: 16 }),
|
||||
}
|
||||
)
|
||||
return row.created_at ? formatDate(row.created_at) : '-'
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '最后登录',
|
||||
key: 'last_login',
|
||||
title: '备注',
|
||||
key: 'notes',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
width: 120,
|
||||
ellipsis: { tooltip: true },
|
||||
render(row) {
|
||||
return h(
|
||||
NButton,
|
||||
{ size: 'small', type: 'text', ghost: true },
|
||||
{
|
||||
default: () => (row.last_login ? formatDate(row.last_login) : '未登录'),
|
||||
icon: renderIcon('mdi:login', { size: 16 }),
|
||||
}
|
||||
)
|
||||
return row.notes || '-'
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'is_active',
|
||||
width: 80,
|
||||
title: '剩余体验次数',
|
||||
key: 'remaining_count',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
render(row) {
|
||||
return h(NSwitch, {
|
||||
size: 'small',
|
||||
rubberBand: false,
|
||||
value: row.is_active,
|
||||
loading: !!row.publishing,
|
||||
checkedValue: true,
|
||||
uncheckedValue: false,
|
||||
onUpdateValue: () => handleUpdateStatus(row),
|
||||
})
|
||||
return row.remaining_count || 0
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -204,24 +164,13 @@ function handleViewDetail(row) {
|
||||
// 次数设置
|
||||
function handleSetLimit(row) {
|
||||
currentUser.value = row
|
||||
// 初始化表单数据，这里可以从后端获取用户当前的次数设置
|
||||
limitForm.value = {
|
||||
remainingCount: row.remaining_count || 0,
|
||||
type: row.user_type || '免费体验',
|
||||
experienceCount: row.experience_count || 1,
|
||||
notes: row.notes || ''
|
||||
}
|
||||
limitModalVisible.value = true
|
||||
}
|
||||
|
||||
// 保存次数设置
|
||||
async function handleSaveLimitSetting() {
|
||||
async function handleSaveLimitSetting(data) {
|
||||
try {
|
||||
// 这里调用API保存次数设置
|
||||
const data = {
|
||||
user_id: currentUser.value.id,
|
||||
...limitForm.value
|
||||
}
|
||||
// await api.setUserLimit(data)
|
||||
$message.success('次数设置保存成功')
|
||||
limitModalVisible.value = false
|
||||
@ -231,26 +180,6 @@ async function handleSaveLimitSetting() {
|
||||
}
|
||||
}
|
||||
|
||||
// 取消次数设置
|
||||
function handleCancelLimitSetting() {
|
||||
limitModalVisible.value = false
|
||||
limitForm.value = {
|
||||
remainingCount: 0,
|
||||
type: '免费体验',
|
||||
experienceCount: 1,
|
||||
notes: ''
|
||||
}
|
||||
currentUser.value = null
|
||||
}
|
||||
|
||||
// 体验次数增减
|
||||
function handleExperienceCountChange(delta) {
|
||||
const newCount = limitForm.value.experienceCount + delta
|
||||
if (newCount >= 0) {
|
||||
limitForm.value.experienceCount = newCount
|
||||
}
|
||||
}
|
||||
|
||||
const validateForm = {
|
||||
phone: [
|
||||
{
|
||||
@ -298,12 +227,12 @@ const validateForm = {
|
||||
@keypress.enter="$table?.handleSearch()"
|
||||
/>
|
||||
</QueryBarItem>
|
||||
<QueryBarItem label="邮箱" :label-width="50">
|
||||
<QueryBarItem label="微信号" :label-width="50">
|
||||
<NInput
|
||||
v-model:value="queryItems.email"
|
||||
v-model:value="queryItems.wechat"
|
||||
clearable
|
||||
type="text"
|
||||
placeholder="请输入邮箱"
|
||||
placeholder="请输入微信号"
|
||||
@keypress.enter="$table?.handleSearch()"
|
||||
/>
|
||||
</QueryBarItem>
|
||||
@ -337,128 +266,11 @@ const validateForm = {
|
||||
</CrudModal>
|
||||
|
||||
<!-- 次数设置弹窗 -->
|
||||
<NModal
|
||||
v-model:show="limitModalVisible"
|
||||
preset="card"
|
||||
title="估值设置"
|
||||
style="width: 500px;"
|
||||
:bordered="false"
|
||||
size="huge"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<div class="limit-setting-form">
|
||||
<!-- 剩余估值次数 -->
|
||||
<div class="form-row">
|
||||
<span class="label">剩余估值次数：</span>
|
||||
<span class="value">{{ limitForm.remainingCount }}</span>
|
||||
</div>
|
||||
|
||||
<NDivider style="margin: 16px 0;" />
|
||||
|
||||
<!-- 类型选择 -->
|
||||
<div class="form-row">
|
||||
<span class="label">类型：</span>
|
||||
<NSelect
|
||||
v-model:value="limitForm.type"
|
||||
:options="typeOptions"
|
||||
style="width: 120px;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 体验次数 -->
|
||||
<div class="form-row">
|
||||
<span class="label">体验次数：</span>
|
||||
<div class="count-control">
|
||||
<NButton
|
||||
size="small"
|
||||
@click="handleExperienceCountChange(-1)"
|
||||
:disabled="limitForm.experienceCount <= 0"
|
||||
>
|
||||
-
|
||||
</NButton>
|
||||
<span class="count-value">{{ limitForm.experienceCount }}</span>
|
||||
<NButton
|
||||
size="small"
|
||||
@click="handleExperienceCountChange(1)"
|
||||
>
|
||||
+
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备注 -->
|
||||
<div class="form-row notes-row">
|
||||
<span class="label">备注：</span>
|
||||
</div>
|
||||
<NInput
|
||||
v-model:value="limitForm.notes"
|
||||
type="textarea"
|
||||
placeholder="请输入备注信息"
|
||||
:rows="4"
|
||||
style="margin-top: 8px;"
|
||||
/>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons">
|
||||
<NButton @click="handleCancelLimitSetting">
|
||||
取消
|
||||
</NButton>
|
||||
<NButton type="primary" @click="handleSaveLimitSetting">
|
||||
确定
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</NModal>
|
||||
<LimitSettingModal
|
||||
v-model:visible="limitModalVisible"
|
||||
:user-data="currentUser"
|
||||
@save="handleSaveLimitSetting"
|
||||
/>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.limit-setting-form {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.notes-row {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
min-width: 100px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.count-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.count-value {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user