71 lines
2.2 KiB
Vue
71 lines
2.2 KiB
Vue
<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="created_at" label="创建时间" width="180">
|
|
<template #default="scope">
|
|
{{ new Date(scope.row.created_at).toLocaleString() }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="updated_at" label="更新时间" width="180">
|
|
<template #default="scope">
|
|
{{ new Date(scope.row.updated_at).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 {
|
|
const data = await userService.getUsers();
|
|
console.log('获取用户列表成功:', data);
|
|
users.value = data;
|
|
} catch (error) {
|
|
console.error('获取用户列表失败:', error);
|
|
}
|
|
};
|
|
|
|
const editDialogRef = ref<InstanceType<typeof EditUserDialog>>();
|
|
|
|
const handleEdit = (user: UserResponse) => {
|
|
editDialogRef.value?.open({
|
|
userId: user.id,
|
|
mode: 'edit',
|
|
onConfirm: () => fetchUsers()
|
|
});
|
|
};
|
|
|
|
const handleDelete = async (user: UserResponse) => {
|
|
try {
|
|
await userService.deleteUser(user.id);
|
|
await fetchUsers();
|
|
} catch (error) {
|
|
console.error('删除用户失败:', error);
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
fetchUsers();
|
|
});
|
|
</script>
|