From 57e9745fbaf63df8641678a778087c11ad9321af Mon Sep 17 00:00:00 2001
From: carry <2641257231@qq.com>
Date: Sun, 16 Feb 2025 15:25:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UserTable.vue | 67 ++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 src/components/UserTable.vue

diff --git a/src/components/UserTable.vue b/src/components/UserTable.vue
new file mode 100644
index 0000000..5f6fb54
--- /dev/null
+++ b/src/components/UserTable.vue
@@ -0,0 +1,67 @@
+<template>
+  <el-table :data="users" style="width: 100%">
+    <el-table-column prop="id" label="ID" width="100" />
+    <el-table-column prop="username" label="用户名" />
+    <el-table-column prop="role" label="角色" />
+    <el-table-column prop="description" label="描述" />
+    <el-table-column prop="createdAt" label="创建时间" width="180">
+      <template #default="scope">
+        {{ new Date(scope.row.createdAt).toLocaleString() }}
+      </template>
+    </el-table-column>
+    <el-table-column prop="updatedAt" label="更新时间" width="180">
+      <template #default="scope">
+        {{ new Date(scope.row.updatedAt).toLocaleString() }}
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" width="150" v-if="isAdmin">
+      <template #default="scope">
+        <el-button type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
+        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <EditUserDialog ref="editDialogRef" mode="edit" />
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { userService } from '../api/userService';
+import { userStore } from '../store/userStore';
+import type { UserResponse } from '../api/types';
+import EditUserDialog from './EditUserDialog.vue';
+
+const store = userStore();
+const users = ref<UserResponse[]>([]);
+const isAdmin = store.isAdmin;
+
+const fetchUsers = async () => {
+  try {
+    users.value = await userService.getUsers();
+  } catch (error) {
+    console.error('获取用户列表失败:', error);
+  }
+};
+
+const editDialogRef = ref<InstanceType<typeof EditUserDialog>>();
+
+const handleEdit = (user: UserResponse) => {
+  editDialogRef.value?.open();
+  editDialogRef.value?.$emit('confirm', () => {
+    fetchUsers();
+  });
+};
+
+const handleDelete = async (user: UserResponse) => {
+  try {
+    await userService.deleteUser(user.id);
+    await fetchUsers();
+  } catch (error) {
+    console.error('删除用户失败:', error);
+  }
+};
+
+onMounted(() => {
+  fetchUsers();
+});
+</script>