296 lines
7.7 KiB
Vue
296 lines
7.7 KiB
Vue
<template>
|
|
<div class="users">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>所有用户</h3>
|
|
<button class="btn-primary" @click="openAddModal">
|
|
<i class="fa-solid fa-plus"></i> 新增用户
|
|
</button>
|
|
</div>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>姓名</th>
|
|
<th>邮箱</th>
|
|
<th>角色</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="user in paginatedUsers" :key="user.id">
|
|
<td>#{{ user.id }}</td>
|
|
<td>
|
|
<span class="username-text">{{ user.name }}</span>
|
|
</td>
|
|
<td>{{ user.email }}</td>
|
|
<td><span class="badge role">{{ user.role }}</span></td>
|
|
<td><span class="badge status" :class="getStatusClass(user.status)">{{ getStatusText(user.status) }}</span></td>
|
|
<td>
|
|
<div class="actions">
|
|
<button class="action-btn edit" @click="openEditModal(user)" title="编辑">
|
|
<i class="fa-solid fa-pen-to-square"></i>
|
|
</button>
|
|
<button class="action-btn delete" @click="deleteUser(user.id)" title="删除">
|
|
<i class="fa-solid fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<Pagination
|
|
:total="users.length"
|
|
v-model:page-size="pageSize"
|
|
v-model:current-page="currentPage"
|
|
/>
|
|
</div>
|
|
|
|
<!-- User Modal -->
|
|
<Modal
|
|
v-model:visible="modalVisible"
|
|
:title="isEdit ? '编辑用户' : '新增用户'"
|
|
@confirm="handleSave"
|
|
>
|
|
<form class="modal-form">
|
|
<div class="form-group">
|
|
<label>姓名</label>
|
|
<input type="text" v-model="form.name" placeholder="请输入姓名" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>邮箱</label>
|
|
<input type="email" v-model="form.email" placeholder="请输入邮箱" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>角色</label>
|
|
<select v-model="form.role">
|
|
<option value="管理员">管理员</option>
|
|
<option value="编辑">编辑</option>
|
|
<option value="访客">访客</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>状态</label>
|
|
<select v-model="form.status">
|
|
<option value="active">正常</option>
|
|
<option value="inactive">停用</option>
|
|
<option value="pending">待审核</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
|
|
<!-- Confirm Delete Modal -->
|
|
<ConfirmModal
|
|
v-model:visible="confirmVisible"
|
|
title="确认删除"
|
|
message="确定要删除该用户吗？此操作无法撤销。"
|
|
@confirm="confirmDelete"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, computed } from 'vue'
|
|
import Modal from '../components/Modal.vue'
|
|
import ConfirmModal from '../components/ConfirmModal.vue'
|
|
import Pagination from '../components/Pagination.vue'
|
|
|
|
const users = ref([
|
|
{ id: 1, name: 'John Doe', email: 'john@example.com', role: '管理员', status: 'active' },
|
|
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', role: '编辑', status: 'active' },
|
|
{ id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: '访客', status: 'inactive' },
|
|
{ id: 4, name: 'Alice Williams', email: 'alice@example.com', role: '编辑', status: 'active' },
|
|
{ id: 5, name: 'Charlie Brown', email: 'charlie@example.com', role: '访客', status: 'pending' },
|
|
{ id: 6, name: 'David Lee', email: 'david@example.com', role: '访客', status: 'active' },
|
|
{ id: 7, name: 'Eva Green', email: 'eva@example.com', role: '编辑', status: 'inactive' },
|
|
{ id: 8, name: 'Frank White', email: 'frank@example.com', role: '管理员', status: 'active' },
|
|
{ id: 9, name: 'Grace Black', email: 'grace@example.com', role: '访客', status: 'pending' },
|
|
{ id: 10, name: 'Henry Ford', email: 'henry@example.com', role: '编辑', status: 'active' },
|
|
{ id: 11, name: 'Ivy Wilson', email: 'ivy@example.com', role: '访客', status: 'inactive' },
|
|
{ id: 12, name: 'Jack Brown', email: 'jack@example.com', role: '管理员', status: 'active' },
|
|
])
|
|
|
|
const currentPage = ref(1)
|
|
const pageSize = ref(7)
|
|
|
|
const paginatedUsers = computed(() => {
|
|
const start = (currentPage.value - 1) * pageSize.value
|
|
const end = start + pageSize.value
|
|
return users.value.slice(start, end)
|
|
})
|
|
|
|
const modalVisible = ref(false)
|
|
const isEdit = ref(false)
|
|
const confirmVisible = ref(false)
|
|
const deleteId = ref(null)
|
|
const form = reactive({
|
|
id: null,
|
|
name: '',
|
|
email: '',
|
|
role: '访客',
|
|
status: 'active'
|
|
})
|
|
|
|
const getStatusText = (status) => {
|
|
const map = {
|
|
active: '正常',
|
|
inactive: '停用',
|
|
pending: '待审核'
|
|
}
|
|
return map[status] || status
|
|
}
|
|
|
|
const getStatusClass = (status) => {
|
|
const map = {
|
|
active: 'bg-light-success',
|
|
inactive: 'bg-light-danger',
|
|
pending: 'bg-light-warning'
|
|
}
|
|
return map[status] || 'bg-light-dark'
|
|
}
|
|
|
|
const openAddModal = () => {
|
|
isEdit.value = false
|
|
Object.assign(form, { id: null, name: '', email: '', role: '访客', status: 'active' })
|
|
modalVisible.value = true
|
|
}
|
|
|
|
const openEditModal = (user) => {
|
|
isEdit.value = true
|
|
Object.assign(form, user)
|
|
modalVisible.value = true
|
|
}
|
|
|
|
const handleSave = () => {
|
|
if (isEdit.value) {
|
|
const index = users.value.findIndex(u => u.id === form.id)
|
|
if (index !== -1) {
|
|
users.value[index] = { ...form }
|
|
}
|
|
} else {
|
|
const newId = Math.max(...users.value.map(u => u.id)) + 1
|
|
users.value.push({ ...form, id: newId })
|
|
const totalPages = Math.ceil(users.value.length / pageSize.value)
|
|
currentPage.value = totalPages
|
|
}
|
|
modalVisible.value = false
|
|
}
|
|
|
|
const deleteUser = (id) => {
|
|
deleteId.value = id
|
|
confirmVisible.value = true
|
|
}
|
|
|
|
const confirmDelete = () => {
|
|
users.value = users.value.filter(u => u.id !== deleteId.value)
|
|
deleteId.value = null
|
|
const totalPages = Math.ceil(users.value.length / pageSize.value)
|
|
if (currentPage.value > totalPages && totalPages > 0) {
|
|
currentPage.value = totalPages
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card-header {
|
|
padding: 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px dashed #eff2f5;
|
|
}
|
|
|
|
.card-header h3 {
|
|
font-size: 18px;
|
|
color: #181c32;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.username-text {
|
|
font-weight: 600;
|
|
color: #181c32;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.badge.role {
|
|
background-color: #f5f8fa;
|
|
color: #5e6278;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.action-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
background: transparent;
|
|
color: #b5b5c3;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
background-color: #f5f8fa;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.action-btn.delete:hover {
|
|
background-color: #ffe2e5;
|
|
color: #f64e60;
|
|
}
|
|
|
|
/* Form Styles */
|
|
.modal-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.form-group label {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #3f4254;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select {
|
|
padding: 12px;
|
|
border: 1px solid #e4e6ef;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
color: #5e6278;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus {
|
|
border-color: #07C160;
|
|
}
|
|
</style>
|