231 lines
4.6 KiB
Markdown
231 lines
4.6 KiB
Markdown
# 实现用户编辑和状态管理功能
|
||
|
||
## 1. 修改编辑弹窗功能
|
||
|
||
### 1.1 调整表单字段
|
||
|
||
* 保留用户昵称（nickname）字段，移除其他不必要的字段
|
||
|
||
* 确保表单回显用户当前昵称
|
||
|
||
### 1.2 更新验证规则
|
||
|
||
* 只保留昵称字段的验证规则
|
||
|
||
* 确保昵称字段必填
|
||
|
||
### 1.3 修改提交逻辑
|
||
|
||
* 调用 `updateUserName` 方法（index.js#L43）修改用户昵称
|
||
|
||
* 成功后刷新用户列表
|
||
|
||
* 添加错误处理
|
||
|
||
## 2. 实现封禁/解封功能
|
||
|
||
### 2.1 修改封禁/解封按钮逻辑
|
||
|
||
* 根据用户状态（active/disable）展示不同的按钮
|
||
|
||
* 封禁按钮：当用户状态为 active 时显示
|
||
|
||
* 解封按钮：当用户状态为 disable 时显示
|
||
|
||
### 2.2 更新按钮事件
|
||
|
||
* 调用 `updateUserStatus` 方法（index.js#L31）修改用户状态
|
||
|
||
* 封禁时：将状态从 active 改为 disable
|
||
|
||
* 解封时：将状态从 disable 改为 active
|
||
|
||
* 成功后刷新用户列表
|
||
|
||
* 添加错误处理
|
||
|
||
## 3. 代码修改点
|
||
|
||
### 3.1 修改表单模板
|
||
|
||
```vue
|
||
<!-- 只保留昵称字段 -->
|
||
el-form-item :label="t('admin.users.username')" prop="nickname">
|
||
<el-input v-model="form.nickname" />
|
||
</el-form-item>
|
||
```
|
||
|
||
### 3.2 更新验证规则
|
||
|
||
```javascript
|
||
const rules = {
|
||
nickname: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
|
||
}
|
||
```
|
||
|
||
### 3.3 修改 handleEdit 方法
|
||
|
||
```javascript
|
||
const handleEdit = (row) => {
|
||
isEditing.value = true
|
||
// 只复制需要的字段
|
||
Object.assign(form, { id: row.id, nickname: row.nickname })
|
||
dialogVisible.value = true
|
||
}
|
||
```
|
||
|
||
### 3.4 修改 handleSubmit 方法
|
||
|
||
```javascript
|
||
const handleSubmit = async () => {
|
||
if (!formRef.value) return
|
||
|
||
formRef.value.validate(async (valid) => {
|
||
if (valid) {
|
||
if (isEditing.value) {
|
||
// 编辑用户 - 调用API
|
||
try {
|
||
await adminOrders.updateUserName({
|
||
id: form.id,
|
||
nickname: form.nickname
|
||
})
|
||
ElMessage.success('用户昵称更新成功')
|
||
// 刷新列表
|
||
refresh()
|
||
} catch (error) {
|
||
ElMessage.error('用户昵称更新失败')
|
||
console.error('更新用户昵称失败:', error)
|
||
}
|
||
}
|
||
dialogVisible.value = false
|
||
}
|
||
})
|
||
}
|
||
```
|
||
|
||
### 3.5 修改封禁/解封按钮逻辑
|
||
|
||
```vue
|
||
<el-button
|
||
v-if="row.status === 'active'"
|
||
size="small"
|
||
type="danger"
|
||
@click="handleBan(row)"
|
||
>
|
||
{{ t('admin.users.ban') }}
|
||
</el-button>
|
||
<el-button
|
||
v-else-if="row.status === 'disable'"
|
||
size="small"
|
||
type="success"
|
||
@click="handleUnban(row)"
|
||
>
|
||
{{ t('admin.users.unban') }}
|
||
</el-button>
|
||
<el-button
|
||
v-else
|
||
size="small"
|
||
type="success"
|
||
@click="handleUnban(row)"
|
||
>
|
||
{{ t('admin.users.unban') }}
|
||
</el-button>
|
||
```
|
||
|
||
### 3.6 更新 handleBan 和 handleUnban 方法
|
||
|
||
```javascript
|
||
const handleBan = async (row) => {
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
`确定要封禁用户 "${row.nickname}" 吗？`,
|
||
'封禁用户',
|
||
{
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}
|
||
)
|
||
|
||
// 调用API修改状态
|
||
await adminOrders.updateUserStatus({
|
||
id: row.id,
|
||
status: 'disable'
|
||
})
|
||
|
||
ElMessage.success('用户封禁成功')
|
||
// 刷新列表
|
||
refresh()
|
||
} catch (error) {
|
||
if (error !== 'cancel') {
|
||
ElMessage.error('用户封禁失败')
|
||
console.error('封禁用户失败:', error)
|
||
}
|
||
}
|
||
}
|
||
|
||
const handleUnban = async (row) => {
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
`确定要解封用户 "${row.nickname}" 吗？`,
|
||
'解封用户',
|
||
{
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'success'
|
||
}
|
||
)
|
||
|
||
// 调用API修改状态
|
||
await adminOrders.updateUserStatus({
|
||
id: row.id,
|
||
status: 'active'
|
||
})
|
||
|
||
ElMessage.success('用户解封成功')
|
||
// 刷新列表
|
||
refresh()
|
||
} catch (error) {
|
||
if (error !== 'cancel') {
|
||
ElMessage.error('用户解封失败')
|
||
console.error('解封用户失败:', error)
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 4. 测试要点
|
||
|
||
1. 编辑用户昵称：
|
||
|
||
* 点击编辑按钮，弹窗显示当前昵称
|
||
|
||
* 修改昵称，点击保存
|
||
|
||
* 调用API成功后，列表刷新，显示新昵称
|
||
|
||
2. 封禁用户：
|
||
|
||
* 对 active 状态的用户点击封禁
|
||
|
||
* 调用API成功后，用户状态变为 disable
|
||
|
||
* 按钮变为解封
|
||
|
||
3. 解封用户：
|
||
|
||
* 对 disable 状态的用户点击解封
|
||
|
||
* 调用API成功后，用户状态变为 active
|
||
|
||
* 按钮变为封禁
|
||
|
||
4. 错误处理：
|
||
|
||
* 测试API调用失败情况
|
||
|
||
* 确保错误提示正确显示
|
||
|
||
* 列表不会错误更新
|
||
|