|
|
@@ -0,0 +1,330 @@
|
|
|
+<template>
|
|
|
+ <div class="admin-user-container">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>管理员列表</span>
|
|
|
+ <el-button type="primary" @click="handleAdd">
|
|
|
+ <el-icon><Plus /></el-icon>
|
|
|
+ 添加管理员
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 搜索栏 -->
|
|
|
+ <el-form :inline="true" :model="searchForm" class="search-form">
|
|
|
+ <el-form-item label="用户名">
|
|
|
+ <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态">
|
|
|
+ <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
|
|
|
+ <el-option label="启用" :value="1" />
|
|
|
+ <el-option label="禁用" :value="0" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleSearch">搜索</el-button>
|
|
|
+ <el-button @click="handleReset">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table :data="tableData" v-loading="loading" stripe>
|
|
|
+ <el-table-column prop="id" label="ID" width="80" />
|
|
|
+ <el-table-column prop="username" label="用户名" width="150" />
|
|
|
+ <el-table-column prop="nickname" label="昵称" width="150" />
|
|
|
+ <el-table-column prop="role" label="角色" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="row.role === 'super' ? 'danger' : 'primary'">
|
|
|
+ {{ row.role === 'super' ? '超级管理员' : '普通管理员' }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态" width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="row.status === 1 ? 'success' : 'danger'">
|
|
|
+ {{ row.status === 1 ? '启用' : '禁用' }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="createTime" label="创建时间" width="180" />
|
|
|
+ <el-table-column prop="lastLoginTime" label="最后登录" width="180" />
|
|
|
+ <el-table-column label="操作" fixed="right" width="200">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
|
|
|
+ <el-button
|
|
|
+ :type="row.status === 1 ? 'warning' : 'success'"
|
|
|
+ size="small"
|
|
|
+ @click="handleToggleStatus(row)"
|
|
|
+ >
|
|
|
+ {{ row.status === 1 ? '禁用' : '启用' }}
|
|
|
+ </el-button>
|
|
|
+ <el-button type="danger" size="small" @click="handleDelete(row)" :disabled="row.role === 'super'">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="pagination.page"
|
|
|
+ v-model:page-size="pagination.pageSize"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :total="pagination.total"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ class="pagination"
|
|
|
+ />
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 添加/编辑对话框 -->
|
|
|
+ <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
|
|
|
+ <el-form :model="formData" :rules="formRules" ref="formRef" label-width="100px">
|
|
|
+ <el-form-item label="用户名" prop="username">
|
|
|
+ <el-input v-model="formData.username" placeholder="请输入用户名" :disabled="isEdit" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="昵称" prop="nickname">
|
|
|
+ <el-input v-model="formData.nickname" placeholder="请输入昵称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密码" prop="password" v-if="!isEdit">
|
|
|
+ <el-input v-model="formData.password" type="password" placeholder="请输入密码" show-password />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="角色" prop="role">
|
|
|
+ <el-select v-model="formData.role" placeholder="请选择角色">
|
|
|
+ <el-option label="普通管理员" value="admin" />
|
|
|
+ <el-option label="超级管理员" value="super" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, reactive, onMounted } from 'vue'
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import { Plus } from '@element-plus/icons-vue'
|
|
|
+
|
|
|
+// 搜索表单
|
|
|
+const searchForm = reactive({
|
|
|
+ username: '',
|
|
|
+ status: null
|
|
|
+})
|
|
|
+
|
|
|
+// 表格数据
|
|
|
+const tableData = ref([])
|
|
|
+const loading = ref(false)
|
|
|
+
|
|
|
+// 分页
|
|
|
+const pagination = reactive({
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0
|
|
|
+})
|
|
|
+
|
|
|
+// 对话框
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const dialogTitle = ref('添加管理员')
|
|
|
+const isEdit = ref(false)
|
|
|
+const formRef = ref(null)
|
|
|
+const submitLoading = ref(false)
|
|
|
+
|
|
|
+// 表单数据
|
|
|
+const formData = reactive({
|
|
|
+ id: null,
|
|
|
+ username: '',
|
|
|
+ nickname: '',
|
|
|
+ password: '',
|
|
|
+ role: 'admin',
|
|
|
+ status: 1
|
|
|
+})
|
|
|
+
|
|
|
+// 表单验证规则
|
|
|
+const formRules = {
|
|
|
+ username: [
|
|
|
+ { required: true, message: '请输入用户名', trigger: 'blur' },
|
|
|
+ { min: 3, max: 20, message: '用户名长度在3-20个字符', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ nickname: [
|
|
|
+ { required: true, message: '请输入昵称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ { required: true, message: '请输入密码', trigger: 'blur' },
|
|
|
+ { min: 6, max: 20, message: '密码长度在6-20个字符', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ role: [
|
|
|
+ { required: true, message: '请选择角色', trigger: 'change' }
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+// 获取列表数据
|
|
|
+const fetchData = async () => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ // 模拟数据，实际应调用API
|
|
|
+ tableData.value = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ username: 'admin',
|
|
|
+ nickname: '超级管理员',
|
|
|
+ role: 'super',
|
|
|
+ status: 1,
|
|
|
+ createTime: '2024-01-01 00:00:00',
|
|
|
+ lastLoginTime: '2024-12-11 19:00:00'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ username: 'manager',
|
|
|
+ nickname: '运营管理员',
|
|
|
+ role: 'admin',
|
|
|
+ status: 1,
|
|
|
+ createTime: '2024-06-01 10:00:00',
|
|
|
+ lastLoginTime: '2024-12-11 18:30:00'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ pagination.total = tableData.value.length
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error('获取数据失败')
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 搜索
|
|
|
+const handleSearch = () => {
|
|
|
+ pagination.page = 1
|
|
|
+ fetchData()
|
|
|
+}
|
|
|
+
|
|
|
+// 重置
|
|
|
+const handleReset = () => {
|
|
|
+ searchForm.username = ''
|
|
|
+ searchForm.status = null
|
|
|
+ handleSearch()
|
|
|
+}
|
|
|
+
|
|
|
+// 添加
|
|
|
+const handleAdd = () => {
|
|
|
+ isEdit.value = false
|
|
|
+ dialogTitle.value = '添加管理员'
|
|
|
+ Object.assign(formData, {
|
|
|
+ id: null,
|
|
|
+ username: '',
|
|
|
+ nickname: '',
|
|
|
+ password: '',
|
|
|
+ role: 'admin',
|
|
|
+ status: 1
|
|
|
+ })
|
|
|
+ dialogVisible.value = true
|
|
|
+}
|
|
|
+
|
|
|
+// 编辑
|
|
|
+const handleEdit = (row) => {
|
|
|
+ isEdit.value = true
|
|
|
+ dialogTitle.value = '编辑管理员'
|
|
|
+ Object.assign(formData, {
|
|
|
+ id: row.id,
|
|
|
+ username: row.username,
|
|
|
+ nickname: row.nickname,
|
|
|
+ password: '',
|
|
|
+ role: row.role,
|
|
|
+ status: row.status
|
|
|
+ })
|
|
|
+ dialogVisible.value = true
|
|
|
+}
|
|
|
+
|
|
|
+// 切换状态
|
|
|
+const handleToggleStatus = async (row) => {
|
|
|
+ const action = row.status === 1 ? '禁用' : '启用'
|
|
|
+ try {
|
|
|
+ await ElMessageBox.confirm(`确定要${action}该管理员吗？`, '提示', {
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ // 调用API
|
|
|
+ row.status = row.status === 1 ? 0 : 1
|
|
|
+ ElMessage.success(`${action}成功`)
|
|
|
+ } catch {
|
|
|
+ // 取消操作
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 删除
|
|
|
+const handleDelete = async (row) => {
|
|
|
+ try {
|
|
|
+ await ElMessageBox.confirm('确定要删除该管理员吗？', '警告', {
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ // 调用API
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ fetchData()
|
|
|
+ } catch {
|
|
|
+ // 取消操作
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 提交表单
|
|
|
+const handleSubmit = async () => {
|
|
|
+ if (!formRef.value) return
|
|
|
+ await formRef.value.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ submitLoading.value = true
|
|
|
+ try {
|
|
|
+ // 调用API
|
|
|
+ ElMessage.success(isEdit.value ? '编辑成功' : '添加成功')
|
|
|
+ dialogVisible.value = false
|
|
|
+ fetchData()
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error('操作失败')
|
|
|
+ } finally {
|
|
|
+ submitLoading.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 分页
|
|
|
+const handleSizeChange = (val) => {
|
|
|
+ pagination.pageSize = val
|
|
|
+ fetchData()
|
|
|
+}
|
|
|
+
|
|
|
+const handleCurrentChange = (val) => {
|
|
|
+ pagination.page = val
|
|
|
+ fetchData()
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ fetchData()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.admin-user-container {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.search-form {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.pagination {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+</style>
|
YH_0525