deotalandAi/.trae/documents/实现用户编辑和状态管理功能.md

实现用户编辑和状态管理功能

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 修改表单模板

<!-- 只保留昵称字段 -->
el-form-item :label="t('admin.users.username')" prop="nickname">
  <el-input v-model="form.nickname" />
</el-form-item>

3.2 更新验证规则

const rules = {
  nickname: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
}

3.3 修改 handleEdit 方法

const handleEdit = (row) => {
  isEditing.value = true
  // 只复制需要的字段
  Object.assign(form, { id: row.id, nickname: row.nickname })
  dialogVisible.value = true
}

3.4 修改 handleSubmit 方法

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 修改封禁/解封按钮逻辑

<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 方法

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调用失败情况

   • 确保错误提示正确显示

   • 列表不会错误更新