363 lines
9.2 KiB
Vue
363 lines
9.2 KiB
Vue
<template>
|
||
<GiPageLayout>
|
||
<GiTable
|
||
row-key="id"
|
||
title="管理员权限管理"
|
||
:data="dataList"
|
||
:columns="tableColumns"
|
||
:loading="loading"
|
||
:scroll="{ x: '100%', y: '100%', minWidth: 1400 }"
|
||
:pagination="pagination"
|
||
@page-change="onPageChange"
|
||
@page-size-change="onPageSizeChange"
|
||
@refresh="search"
|
||
>
|
||
<template #top>
|
||
<GiForm
|
||
v-model="searchForm"
|
||
search
|
||
:columns="queryFormColumns"
|
||
size="medium"
|
||
@search="search"
|
||
@reset="reset"
|
||
/>
|
||
</template>
|
||
|
||
<template #toolbar-left>
|
||
<a-space>
|
||
<a-button type="primary" @click="openAddModal">
|
||
<template #icon><icon-plus /></template>
|
||
<template #default>新增管理员</template>
|
||
</a-button>
|
||
<a-button @click="batchOperation">
|
||
<template #icon><icon-settings /></template>
|
||
<template #default>批量操作</template>
|
||
</a-button>
|
||
</a-space>
|
||
</template>
|
||
|
||
<!-- 管理员类型 -->
|
||
<template #adminType="{ record }">
|
||
<a-tag :color="getAdminTypeColor(record.adminType)">
|
||
{{ record.adminType }}
|
||
</a-tag>
|
||
</template>
|
||
|
||
<!-- 状态显示 -->
|
||
<template #status="{ record }">
|
||
<a-tag :color="getStatusColor(record.status)">
|
||
{{ getStatusText(record.status) }}
|
||
</a-tag>
|
||
</template>
|
||
|
||
<!-- 权限范围 -->
|
||
<template #permissions="{ record }">
|
||
<a-space>
|
||
<a-tag
|
||
v-for="permission in record.permissions.slice(0, 3)"
|
||
:key="permission"
|
||
size="small"
|
||
>
|
||
{{ permission }}
|
||
</a-tag>
|
||
<a-tag v-if="record.permissions.length > 3" size="small">
|
||
+{{ record.permissions.length - 3 }}
|
||
</a-tag>
|
||
</a-space>
|
||
</template>
|
||
|
||
<!-- 在线状态 -->
|
||
<template #onlineStatus="{ record }">
|
||
<a-space>
|
||
<div
|
||
:class="record.isOnline ? 'online-dot' : 'offline-dot'"
|
||
class="status-dot"
|
||
></div>
|
||
{{ record.isOnline ? '在线' : '离线' }}
|
||
</a-space>
|
||
</template>
|
||
|
||
<!-- 操作列 -->
|
||
<template #action="{ record }">
|
||
<a-space>
|
||
<a-link @click="viewDetail(record)">详情</a-link>
|
||
<a-link @click="editRecord(record)">编辑</a-link>
|
||
<a-link @click="resetPassword(record)">重置密码</a-link>
|
||
<a-link
|
||
@click="toggleStatus(record)"
|
||
:class="record.status === 'active' ? 'text-red-500' : 'text-green-500'"
|
||
>
|
||
{{ record.status === 'active' ? '禁用' : '启用' }}
|
||
</a-link>
|
||
</a-space>
|
||
</template>
|
||
</GiTable>
|
||
</GiPageLayout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
import { Message } from '@arco-design/web-vue'
|
||
import type { TableColumnData } from '@arco-design/web-vue'
|
||
|
||
// 搜索表单
|
||
let searchForm = reactive({
|
||
username: '',
|
||
adminType: '',
|
||
status: '',
|
||
createTime: '',
|
||
page: 1,
|
||
size: 10
|
||
})
|
||
|
||
// 查询条件配置
|
||
const queryFormColumns = [
|
||
{
|
||
field: 'username',
|
||
label: '用户名',
|
||
type: 'input' as const,
|
||
props: {
|
||
placeholder: '请输入用户名'
|
||
}
|
||
},
|
||
{
|
||
field: 'adminType',
|
||
label: '管理员类型',
|
||
type: 'select' as const,
|
||
props: {
|
||
placeholder: '请选择管理员类型',
|
||
options: [
|
||
{ label: '超级管理员', value: '超级管理员' },
|
||
{ label: '系统管理员', value: '系统管理员' },
|
||
{ label: '业务管理员', value: '业务管理员' },
|
||
{ label: '财务管理员', value: '财务管理员' }
|
||
]
|
||
}
|
||
},
|
||
{
|
||
field: 'status',
|
||
label: '状态',
|
||
type: 'select' as const,
|
||
props: {
|
||
placeholder: '请选择状态',
|
||
options: [
|
||
{ label: '正常', value: 'active' },
|
||
{ label: '禁用', value: 'disabled' },
|
||
{ label: '锁定', value: 'locked' }
|
||
]
|
||
}
|
||
}
|
||
]
|
||
|
||
// 表格列配置
|
||
const tableColumns: TableColumnData[] = [
|
||
{ title: '用户名', dataIndex: 'username', width: 120 },
|
||
{ title: '真实姓名', dataIndex: 'realName', width: 100 },
|
||
{ title: '管理员类型', dataIndex: 'adminType', slotName: 'adminType', width: 120 },
|
||
{ title: '联系电话', dataIndex: 'phone', width: 120 },
|
||
{ title: '邮箱', dataIndex: 'email', width: 200 },
|
||
{ title: '权限范围', dataIndex: 'permissions', slotName: 'permissions', width: 250 },
|
||
{ title: '创建时间', dataIndex: 'createTime', width: 160 },
|
||
{ title: '最后登录', dataIndex: 'lastLoginTime', width: 160 },
|
||
{ title: '登录次数', dataIndex: 'loginCount', width: 100 },
|
||
{ title: '在线状态', dataIndex: 'onlineStatus', slotName: 'onlineStatus', width: 100 },
|
||
{ title: '状态', dataIndex: 'status', slotName: 'status', width: 80 },
|
||
{ title: '备注', dataIndex: 'remark', width: 200, ellipsis: true, tooltip: true },
|
||
{ title: '操作', slotName: 'action', width: 250, fixed: 'right' }
|
||
]
|
||
|
||
// 数据状态
|
||
const loading = ref(false)
|
||
const dataList = ref([
|
||
{
|
||
id: 1,
|
||
username: 'superadmin',
|
||
realName: '系统管理员',
|
||
adminType: '超级管理员',
|
||
phone: '13800138001',
|
||
email: 'admin@windtech.com',
|
||
permissions: ['用户管理', '系统设置', '数据管理', '权限管理', '日志查看'],
|
||
createTime: '2023-01-01 10:00:00',
|
||
lastLoginTime: '2024-03-15 09:30:00',
|
||
loginCount: 1256,
|
||
isOnline: true,
|
||
status: 'active',
|
||
remark: '系统超级管理员，拥有所有权限'
|
||
},
|
||
{
|
||
id: 2,
|
||
username: 'projectadmin',
|
||
realName: '张项目经理',
|
||
adminType: '业务管理员',
|
||
phone: '13800138002',
|
||
email: 'zhang@windtech.com',
|
||
permissions: ['项目管理', '合同管理', '团队管理'],
|
||
createTime: '2023-02-15 14:20:00',
|
||
lastLoginTime: '2024-03-14 16:45:00',
|
||
loginCount: 892,
|
||
isOnline: false,
|
||
status: 'active',
|
||
remark: '负责项目相关业务管理'
|
||
},
|
||
{
|
||
id: 3,
|
||
username: 'financeadmin',
|
||
realName: '李财务经理',
|
||
adminType: '财务管理员',
|
||
phone: '13800138003',
|
||
email: 'li@windtech.com',
|
||
permissions: ['财务管理', '预算管理', '成本控制'],
|
||
createTime: '2023-03-01 11:10:00',
|
||
lastLoginTime: '2024-03-13 10:20:00',
|
||
loginCount: 654,
|
||
isOnline: true,
|
||
status: 'active',
|
||
remark: '负责财务相关业务管理'
|
||
},
|
||
{
|
||
id: 4,
|
||
username: 'techsupport',
|
||
realName: '王技术支持',
|
||
adminType: '系统管理员',
|
||
phone: '13800138004',
|
||
email: 'wang@windtech.com',
|
||
permissions: ['系统维护', '数据备份', '技术支持'],
|
||
createTime: '2023-04-10 15:30:00',
|
||
lastLoginTime: '2024-03-10 14:15:00',
|
||
loginCount: 432,
|
||
isOnline: false,
|
||
status: 'disabled',
|
||
remark: '技术支持人员，目前停用中'
|
||
}
|
||
])
|
||
|
||
const pagination = reactive({
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 4,
|
||
showTotal: true,
|
||
showPageSize: true
|
||
})
|
||
|
||
// 获取管理员类型颜色
|
||
const getAdminTypeColor = (type: string) => {
|
||
const colorMap: Record<string, string> = {
|
||
'超级管理员': 'red',
|
||
'系统管理员': 'blue',
|
||
'业务管理员': 'green',
|
||
'财务管理员': 'orange'
|
||
}
|
||
return colorMap[type] || 'gray'
|
||
}
|
||
|
||
// 获取状态颜色
|
||
const getStatusColor = (status: string) => {
|
||
const colorMap: Record<string, string> = {
|
||
'active': 'green',
|
||
'disabled': 'red',
|
||
'locked': 'orange'
|
||
}
|
||
return colorMap[status] || 'gray'
|
||
}
|
||
|
||
// 获取状态文本
|
||
const getStatusText = (status: string) => {
|
||
const textMap: Record<string, string> = {
|
||
'active': '正常',
|
||
'disabled': '禁用',
|
||
'locked': '锁定'
|
||
}
|
||
return textMap[status] || status
|
||
}
|
||
|
||
// 搜索和重置
|
||
const search = async () => {
|
||
loading.value = true
|
||
setTimeout(() => {
|
||
loading.value = false
|
||
}, 1000)
|
||
}
|
||
|
||
const reset = () => {
|
||
Object.assign(searchForm, {
|
||
username: '',
|
||
adminType: '',
|
||
status: '',
|
||
createTime: '',
|
||
page: 1,
|
||
size: 10
|
||
})
|
||
pagination.current = 1
|
||
search()
|
||
}
|
||
|
||
// 分页处理
|
||
const onPageChange = (page: number) => {
|
||
searchForm.page = page
|
||
pagination.current = page
|
||
search()
|
||
}
|
||
|
||
const onPageSizeChange = (size: number) => {
|
||
searchForm.size = size
|
||
searchForm.page = 1
|
||
pagination.pageSize = size
|
||
pagination.current = 1
|
||
search()
|
||
}
|
||
|
||
// 操作方法
|
||
const openAddModal = () => {
|
||
Message.info('新增管理员功能开发中...')
|
||
}
|
||
|
||
const batchOperation = () => {
|
||
Message.info('批量操作功能开发中...')
|
||
}
|
||
|
||
const viewDetail = (record: any) => {
|
||
Message.info(`查看管理员详情: ${record.realName}`)
|
||
}
|
||
|
||
const editRecord = (record: any) => {
|
||
Message.info(`编辑管理员: ${record.realName}`)
|
||
}
|
||
|
||
const resetPassword = (record: any) => {
|
||
Message.info(`重置密码: ${record.realName}`)
|
||
}
|
||
|
||
const toggleStatus = (record: any) => {
|
||
const action = record.status === 'active' ? '禁用' : '启用'
|
||
Message.info(`${action}管理员: ${record.realName}`)
|
||
}
|
||
|
||
onMounted(() => {
|
||
search()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.status-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
}
|
||
|
||
.online-dot {
|
||
background-color: #52c41a;
|
||
}
|
||
|
||
.offline-dot {
|
||
background-color: #d9d9d9;
|
||
}
|
||
|
||
.text-red-500 {
|
||
color: #ef4444;
|
||
}
|
||
|
||
.text-green-500 {
|
||
color: #22c55e;
|
||
}
|
||
</style> |