feat: 新增用户管理页面

src/tools/internal/user/userManager.vue

@@ -1,9 +1,107 @@
 <script setup lang="ts">
+import { getUserTableColumns } from './userTableColumns'
+import $axios from '@/plugins/Axios'
+import config from '@/config'
+import type { User } from '@/types/auth'
 
+const userList = reactive<User[]>([])
+const page = reactive({
+  index: 1,
+  size: 10,
+})
+
+const columns = getUserTableColumns(operation)
+
+onMounted(() => {
+  getUsers(1, page.size)
+})
+
+async function getUsers(pageIndex: number, pageSize: number) {
+  try {
+    const data = (await $axios.get(`${config.apiOrigin}/user/list`, {
+      params: {
+        pageIndex,
+        pageSize,
+      },
+    })).data
+    if (data.success) {
+      userList.splice(0, userList.length, ...data.data)
+    }
+    else {
+      throw new Error(data.message)
+    }
+  }
+  catch (e) {
+    ElMessage.error((e as Error).message)
+  }
+}
+
+function operation(row: User, operation: string) {
+  switch (operation) {
+    case 'disable':
+      disableUser(row)
+      break
+    case 'activate':
+      activateUser(row)
+      break
+  }
+}
+
+async function disableUser(row: User) {
+  try {
+    const data = (await $axios.post(`${config.apiOrigin}/user/ban`, null, {
+      params: {
+        id: row.userId,
+      },
+    })).data
+    if (data.success) {
+      ElMessage.success(data.message)
+      await getUsers(page.index, page.size)
+    }
+    else {
+      throw new Error(data.message)
+    }
+  }
+  catch (e) {
+    ElMessage.error((e as Error).message)
+  }
+}
+
+async function activateUser(row: User) {
+  try {
+    const data = (await $axios.post(`${config.apiOrigin}/user/activate`, null, {
+      params: {
+        id: row.userId,
+      },
+    })).data
+    if (data.success) {
+      ElMessage.success(data.message)
+      await getUsers(page.index, page.size)
+    }
+    else {
+      throw new Error(data.message)
+    }
+  }
+  catch (e) {
+    ElMessage.error((e as Error).message)
+  }
+}
 </script>
 
 <template>
-  <div />
+  <div h-full w-full>
+    <el-auto-resizer>
+      <template #default="{ width, height }">
+        <el-table-v2
+          :columns="columns"
+          :data="userList"
+          :width="width"
+          :height="height"
+          fixed
+        />
+      </template>
+    </el-auto-resizer>
+  </div>
 </template>
 
 <style scoped lang="scss">

src/tools/internal/user/userTableColumns.tsx

@@ -0,0 +1,123 @@
+import dayjs from 'dayjs'
+import type { Columns } from 'element-plus'
+import { ElButton, ElTag } from 'element-plus'
+import 'element-plus/es/components/tag/style/css'
+import 'element-plus/es/components/button/style/css'
+import { FixedDir } from 'element-plus/es/components/table-v2/src/constants'
+import type { User } from '@/types/auth'
+
+enum UserStatus {
+  DELETED = -1,
+  DEACTIVATED = 0,
+  ENABLED = 1,
+  DISABLED = 2,
+}
+
+export function getUserTableColumns(onClick: (row: User, operation: string) => void): Columns<any> {
+  return [
+    {
+      key: 'userId',
+      dataKey: 'userId',
+      width: 150,
+      hidden: true,
+    },
+    {
+      key: 'userName',
+      dataKey: 'userName',
+      title: '用户名',
+      width: 150,
+      align: 'center',
+    },
+    {
+      key: 'nickName',
+      dataKey: 'nickName',
+      title: '昵称',
+      width: 150,
+      align: 'center',
+    },
+    {
+      key: 'email',
+      dataKey: 'email',
+      title: '邮箱',
+      width: 150,
+      align: 'center',
+    },
+    {
+      key: 'roles',
+      title: '角色',
+      width: 150,
+      align: 'center',
+      cellRenderer: ({ rowData }: { rowData: User }) => {
+        const data = rowData.roles?.map((item) => {
+          return item.name
+        }).join(', ') || ''
+        return <span>{data}</span>
+      },
+    },
+    {
+      key: 'status',
+      title: '状态',
+      width: 100,
+      align: 'center',
+      cellRenderer: ({ rowData }: { rowData: User }) => {
+        switch (rowData.status) {
+          case UserStatus.ENABLED:
+            return <ElTag type="success">正常</ElTag>
+          case UserStatus.DISABLED:
+            return <ElTag type="info">禁用</ElTag>
+          case UserStatus.DEACTIVATED:
+            return <ElTag type="info">待激活</ElTag>
+          default:
+            return <ElTag type="warning">未知</ElTag>
+        }
+      },
+    },
+    {
+      key: 'createdAt',
+      title: '创建时间',
+      width: 200,
+      align: 'center',
+      cellRenderer: ({ rowData }: { rowData: User }) => {
+        return <span>{dayjs(rowData.createdAt).format('YYYY-MM-DD HH:mm:ss')}</span>
+      },
+    },
+    {
+      key: 'updatedAt',
+      title: '更新时间',
+      width: 200,
+      align: 'center',
+      cellRenderer: ({ rowData }: { rowData: User }) => {
+        return <span>{dayjs(rowData.updatedAt).format('YYYY-MM-DD HH:mm:ss')}</span>
+      },
+    },
+    {
+      key: 'operations',
+      title: '操作',
+      width: 150,
+      fixed: FixedDir.RIGHT,
+      cellRenderer: ({ rowData }: { rowData: User }) => {
+        return (
+          rowData.status === UserStatus.DEACTIVATED || rowData.status === UserStatus.DISABLED
+            ? (
+              <ElButton
+                size="small"
+                plain
+                onClick={() => onClick(rowData, 'activate')}
+              >
+                启用
+              </ElButton>
+              )
+            : (
+              <ElButton
+                size="small"
+                plain
+                onClick={() => onClick(rowData, 'disable')}
+              >
+                禁用
+              </ElButton>
+              )
+        )
+      },
+    },
+  ]
+}

src/types/auth.d.ts

@@ -14,6 +14,9 @@ export interface User {
   email: string | null
   userId: number | null
   roles: Role[] | null
+  createdAt?: string
+  updatedAt?: string
+  status?: UserStatus
 }
 
 export type AuthOption = boolean | {