refactor: UserManagement component with API services and role assignment

novalon-manage-web/src/views/system/UserManagement.vue

@@ -48,6 +48,11 @@
           label="用户名"
           sortable="custom"
         />
+        <el-table-column
+          prop="nickname"
+          label="昵称"
+          sortable="custom"
+        />
         <el-table-column
           prop="email"
           label="邮箱"
@@ -63,8 +68,8 @@
           width="100"
         >
           <template #default="{ row }">
-            <el-tag :type="row.status === '0' ? 'success' : 'danger'">
+            <el-tag :type="row.status === 'ACTIVE' ? 'success' : 'danger'">
-              {{ row.status === '0' ? '正常' : '禁用' }}
+              {{ row.status === 'ACTIVE' ? '正常' : '禁用' }}
             </el-tag>
           </template>
         </el-table-column>
@@ -75,7 +80,7 @@
         />
         <el-table-column
           label="操作"
-          width="200"
+          width="250"
         >
           <template #default="{ row }">
             <el-button
@@ -85,6 +90,13 @@
             >
               编辑
             </el-button>
+            <el-button
+              type="warning"
+              link
+              @click="handleAssignRoles(row)"
+            >
+              分配角色
+            </el-button>
             <el-button
               type="danger"
               link
@@ -116,8 +128,27 @@
         :model="formState"
         label-width="80px"
       >
-        <el-form-item label="用户名">
+        <el-form-item
-          <el-input v-model="formState.username" />
+          label="用户名"
+          required
+        >
+          <el-input
+            v-model="formState.username"
+            :disabled="!!formState.id"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="!formState.id"
+          label="密码"
+          required
+        >
+          <el-input
+            v-model="formState.password"
+            type="password"
+          />
+        </el-form-item>
+        <el-form-item label="昵称">
+          <el-input v-model="formState.nickname" />
         </el-form-item>
         <el-form-item label="邮箱">
           <el-input v-model="formState.email" />
@@ -128,11 +159,11 @@
         <el-form-item label="状态">
           <el-select v-model="formState.status">
             <el-option
-              value="0"
+              value="ACTIVE"
               label="正常"
             />
             <el-option
-              value="1"
+              value="INACTIVE"
               label="禁用"
             />
           </el-select>
@@ -150,6 +181,29 @@
         </el-button>
       </template>
     </el-dialog>
+
+    <el-dialog
+      v-model="roleDialogVisible"
+      title="分配角色"
+      width="500px"
+    >
+      <el-transfer
+        v-model="selectedRoles"
+        :data="allRoles"
+        :titles="['可选角色', '已分配角色']"
+      />
+      <template #footer>
+        <el-button @click="roleDialogVisible = false">
+          取消
+        </el-button>
+        <el-button
+          type="primary"
+          @click="handleAssignRolesOk"
+        >
+          确定
+        </el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -157,10 +211,12 @@
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Search } from '@element-plus/icons-vue'
-import request from '@/utils/request'
+import { userApi, type User, type CreateUserRequest, type UpdateUserRequest } from '@/api/user.api'
+import { roleApi, type Role } from '@/api/role.api'
+import { handleApiError } from '@/utils/errorHandler'
 
 const loading = ref(false)
-const dataSource = ref([])
+const dataSource = ref<User[]>([])
 const searchKeyword = ref('')
 const pagination = reactive({
   current: 1,
@@ -169,34 +225,41 @@ const pagination = reactive({
 })
 
 const sortInfo = reactive({
-  sort: 'id',
+  sortBy: 'id',
-  order: 'asc'
+  sortOrder: 'asc' as 'asc' | 'desc'
 })
 
 const modalVisible = ref(false)
 const modalTitle = ref('')
-const formState = reactive({
+const formState = reactive<CreateUserRequest & { id?: number }>({
-  id: null as number | null,
   username: '',
+  password: '',
+  nickname: '',
   email: '',
   phone: '',
-  status: '0'
+  roles: [],
+  status: 'ACTIVE'
 })
 
+const roleDialogVisible = ref(false)
+const selectedRoles = ref<number[]>([])
+const allRoles = ref<{ key: number; label: string }[]>([])
+const currentUserId = ref<number | null>(null)
+
 const fetchData = async () => {
   loading.value = true
   try {
-    const res: any = await request.get('/users/page', {
+    const res = await userApi.getPage({
-      params: {
+      page: pagination.current - 1,
-        page: pagination.current - 1,
+      size: pagination.pageSize,
-        size: pagination.pageSize,
+      sortBy: sortInfo.sortBy,
-        sort: sortInfo.sort,
+      sortOrder: sortInfo.sortOrder,
-        order: sortInfo.order,
+      username: searchKeyword.value || undefined
-        keyword: searchKeyword.value || undefined
-      }
     })
     dataSource.value = res.content
     pagination.total = res.totalElements
+  } catch (error) {
+    handleApiError(error)
   } finally {
     loading.value = false
   }
@@ -217,51 +280,84 @@ const handleSearch = () => {
 }
 
 const handleSortChange = ({ prop, order }: any) => {
-  sortInfo.sort = prop
+  sortInfo.sortBy = prop
-  sortInfo.order = order === 'ascending' ? 'asc' : 'desc'
+  sortInfo.sortOrder = order === 'ascending' ? 'asc' : 'desc'
   fetchData()
 }
 
 const handleAdd = () => {
   modalTitle.value = '新增用户'
-  Object.assign(formState, { id: null, username: '', email: '', phone: '', status: '0' })
+  Object.assign(formState, {
+    id: undefined,
+    username: '',
+    password: '',
+    nickname: '',
+    email: '',
+    phone: '',
+    roles: [],
+    status: 'ACTIVE'
+  })
   modalVisible.value = true
 }
 
-const handleEdit = (row: any) => {
+const handleEdit = (row: User) => {
   modalTitle.value = '编辑用户'
-  Object.assign(formState, row)
+  Object.assign(formState, {
+    id: row.id,
+    username: row.username,
+    nickname: row.nickname,
+    email: row.email,
+    phone: row.phone,
+    status: row.status,
+    roles: []
+  })
   modalVisible.value = true
 }
 
-const handleDelete = async (row: any) => {
+const handleDelete = async (row: User) => {
   try {
     await ElMessageBox.confirm('确定要删除该用户吗？', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
     })
-    await request.delete(`/users/${row.id}`)
+    await userApi.delete(row.id)
     ElMessage.success('删除成功')
     fetchData()
-  } catch {
+  } catch (error) {
-    // 用户取消或删除失败
+    if (error !== 'cancel') {
+      handleApiError(error)
+    }
   }
 }
 
 const handleModalOk = async () => {
   try {
     if (formState.id) {
-      await request.put(`/users/${formState.id}`, formState)
+      const updateData: UpdateUserRequest = {
+        nickname: formState.nickname,
+        email: formState.email,
+        phone: formState.phone,
+        status: formState.status as 'ACTIVE' | 'INACTIVE'
+      }
+      await userApi.update(formState.id, updateData)
       ElMessage.success('更新成功')
     } else {
-      await request.post('/users', formState)
+      const createData: CreateUserRequest = {
+        username: formState.username,
+        password: formState.password,
+        nickname: formState.nickname,
+        email: formState.email,
+        phone: formState.phone,
+        roles: formState.roles
+      }
+      await userApi.create(createData)
       ElMessage.success('创建成功')
     }
     modalVisible.value = false
     fetchData()
-  } catch {
+  } catch (error) {
-    ElMessage.error('操作失败')
+    handleApiError(error)
   }
 }
 
@@ -269,6 +365,37 @@ const handleModalCancel = () => {
   modalVisible.value = false
 }
 
+const handleAssignRoles = async (row: User) => {
+  currentUserId.value = row.id
+  try {
+    const roles = await roleApi.getAll()
+    allRoles.value = roles.map((role: Role) => ({
+      key: role.id,
+      label: role.name
+    }))
+    selectedRoles.value = row.roles.map((roleName: string) => {
+      const role = roles.find((r: Role) => r.name === roleName)
+      return role ? role.id : 0
+    }).filter((id: number) => id > 0)
+    roleDialogVisible.value = true
+  } catch (error) {
+    handleApiError(error)
+  }
+}
+
+const handleAssignRolesOk = async () => {
+  if (!currentUserId.value) return
+  
+  try {
+    await userApi.assignRoles(currentUserId.value, selectedRoles.value)
+    ElMessage.success('角色分配成功')
+    roleDialogVisible.value = false
+    fetchData()
+  } catch (error) {
+    handleApiError(error)
+  }
+}
+
 onMounted(() => {
   fetchData()
 })