feat: 用户管理模块
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
296
chat_web_front/src/views/userManage/index.vue
Normal file
296
chat_web_front/src/views/userManage/index.vue
Normal file
@@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<div class="userManageWrap">
|
||||
<div class="userManageCard">
|
||||
<div class="headerRow">
|
||||
<h2>用户管理</h2>
|
||||
<el-button type="primary" @click="handleAdd">新增用户</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="tableData" v-loading="loading" stripe style="width: 100%">
|
||||
<el-table-column prop="id" label="ID" width="70" />
|
||||
<el-table-column prop="tel" label="手机号" width="140" />
|
||||
<el-table-column prop="name" label="姓名" width="140" />
|
||||
<el-table-column prop="nickName" label="昵称" width="140" />
|
||||
<el-table-column prop="status" label="状态" width="80">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
|
||||
{{ row.status === 1 ? '正常' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="170" />
|
||||
<el-table-column label="操作" min-width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button link type="warning" size="small" @click="handleResetPwd(row)">重置密码</el-button>
|
||||
<el-popconfirm title="确定删除该用户？" @confirm="handleDelete(row)">
|
||||
<template #reference>
|
||||
<el-button link type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="paginationRow">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="loadUsers"
|
||||
@current-change="loadUsers"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑用户弹窗 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogType === 'add' ? '新增用户' : '编辑用户'"
|
||||
width="460px"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form
|
||||
ref="userFormRef"
|
||||
:model="userForm"
|
||||
:rules="userRules"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="手机号" prop="tel">
|
||||
<el-input v-model="userForm.tel" :disabled="dialogType === 'edit'" />
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="userForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="昵称">
|
||||
<el-input v-model="userForm.nickName" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="dialogType === 'add'" label="密码" prop="password">
|
||||
<el-input v-model="userForm.password" type="password" show-password />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitting">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 重置密码弹窗 -->
|
||||
<el-dialog v-model="resetPwdVisible" title="重置密码" width="400px" destroy-on-close>
|
||||
<el-form ref="resetPwdFormRef" :model="resetPwdForm" :rules="resetPwdRules" label-width="80px">
|
||||
<el-form-item label="用户">
|
||||
<el-input :value="resetPwdForm.tel" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input v-model="resetPwdForm.newPassword" type="password" show-password />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="resetPwdVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleResetPwdSubmit" :loading="resettingPwd">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { fetchUserPage, createUser, editUser, deleteUser, resetUserPassword } from '@/api'
|
||||
|
||||
const tableData = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = ref(0)
|
||||
|
||||
// 新增/编辑
|
||||
const dialogVisible = ref(false)
|
||||
const dialogType = ref<'add' | 'edit'>('add')
|
||||
const userFormRef = ref<FormInstance>()
|
||||
const submitting = ref(false)
|
||||
const userForm = reactive({
|
||||
id: 0,
|
||||
tel: '',
|
||||
name: '',
|
||||
nickName: '',
|
||||
password: '',
|
||||
})
|
||||
|
||||
const userRules = reactive<FormRules>({
|
||||
tel: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 6, message: '密码长度至少6位', trigger: 'blur' },
|
||||
],
|
||||
})
|
||||
|
||||
// 重置密码
|
||||
const resetPwdVisible = ref(false)
|
||||
const resetPwdFormRef = ref<FormInstance>()
|
||||
const resettingPwd = ref(false)
|
||||
const resetPwdForm = reactive({
|
||||
id: 0,
|
||||
tel: '',
|
||||
newPassword: '',
|
||||
})
|
||||
|
||||
const resetPwdRules = reactive<FormRules>({
|
||||
newPassword: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{ min: 6, message: '密码长度至少6位', trigger: 'blur' },
|
||||
],
|
||||
})
|
||||
|
||||
const loadUsers = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await fetchUserPage<any>({
|
||||
current: currentPage.value,
|
||||
size: pageSize.value,
|
||||
})
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.records || []
|
||||
total.value = res.data.total || 0
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error('加载用户列表失败:', e)
|
||||
ElMessage.error('加载用户列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
dialogType.value = 'add'
|
||||
userForm.id = 0
|
||||
userForm.tel = ''
|
||||
userForm.name = ''
|
||||
userForm.nickName = ''
|
||||
userForm.password = ''
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleEdit = (row: any) => {
|
||||
dialogType.value = 'edit'
|
||||
userForm.id = row.id
|
||||
userForm.tel = row.tel
|
||||
userForm.name = row.name || ''
|
||||
userForm.nickName = row.nickName || ''
|
||||
userForm.password = ''
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const valid = await userFormRef.value?.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
let res: any
|
||||
if (dialogType.value === 'add') {
|
||||
res = await createUser<any>({
|
||||
tel: userForm.tel,
|
||||
name: userForm.name,
|
||||
nickName: userForm.nickName,
|
||||
password: userForm.password,
|
||||
})
|
||||
} else {
|
||||
res = await editUser<any>({
|
||||
id: userForm.id,
|
||||
name: userForm.name,
|
||||
nickName: userForm.nickName,
|
||||
})
|
||||
}
|
||||
if (res.code === 200) {
|
||||
ElMessage.success(dialogType.value === 'add' ? '新增成功' : '编辑成功')
|
||||
dialogVisible.value = false
|
||||
loadUsers()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '操作失败')
|
||||
}
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleResetPwd = (row: any) => {
|
||||
resetPwdForm.id = row.id
|
||||
resetPwdForm.tel = row.tel
|
||||
resetPwdForm.newPassword = ''
|
||||
resetPwdVisible.value = true
|
||||
}
|
||||
|
||||
const handleResetPwdSubmit = async () => {
|
||||
const valid = await resetPwdFormRef.value?.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
|
||||
resettingPwd.value = true
|
||||
try {
|
||||
const res = await resetUserPassword<any>({
|
||||
id: resetPwdForm.id,
|
||||
newPassword: resetPwdForm.newPassword,
|
||||
})
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('密码重置成功')
|
||||
resetPwdVisible.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg || '重置失败')
|
||||
}
|
||||
} finally {
|
||||
resettingPwd.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (row: any) => {
|
||||
const res = await deleteUser<any>(row.id)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('删除成功')
|
||||
loadUsers()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadUsers()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.userManageWrap {
|
||||
flex: 1;
|
||||
padding: 30px;
|
||||
overflow-y: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.userManageCard {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 24px 30px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.headerRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.paginationRow {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user