109 lines
3.1 KiB
Vue
109 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { ref } from 'vue'
|
|
|
|
import { fetchRoles, deleteRole, type Role } from '@/features/admin/api/adminRoles'
|
|
import { useAdminTable } from '@/features/admin/composables/useAdminTable'
|
|
|
|
import AssignPermissionsDialog from '../components/AssignPermissionsDialog.vue'
|
|
import RoleDialog from '../components/RoleDialog.vue'
|
|
|
|
const showDialog = ref(false)
|
|
const editingRole = ref<Role | null>(null)
|
|
const showPermsDialog = ref(false)
|
|
const permsRole = ref<Role | null>(null)
|
|
|
|
const {
|
|
loading,
|
|
data: roles,
|
|
load: loadRoles,
|
|
} = useAdminTable<Role[]>({
|
|
fetchFn: fetchRoles,
|
|
})
|
|
|
|
function openCreate() {
|
|
editingRole.value = null
|
|
showDialog.value = true
|
|
}
|
|
|
|
function openEdit(row: Role) {
|
|
editingRole.value = row
|
|
showDialog.value = true
|
|
}
|
|
|
|
function openPerms(row: Role) {
|
|
permsRole.value = row
|
|
showPermsDialog.value = true
|
|
}
|
|
|
|
async function handleDelete(row: Role) {
|
|
try {
|
|
await ElMessageBox.confirm(
|
|
`确定要删除角色「${row.name}」吗？已分配该角色的管理员将失去对应权限。`,
|
|
'删除确认',
|
|
{
|
|
confirmButtonText: '确认删除',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}
|
|
)
|
|
await deleteRole(row.id)
|
|
ElMessage.success('角色已删除')
|
|
await loadRoles()
|
|
} catch {
|
|
// 用户取消
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="page">
|
|
<div class="page-header-row">
|
|
<div class="page-header">
|
|
<p class="eyebrow">Roles</p>
|
|
<h1>角色管理</h1>
|
|
<p>管理系统角色及其权限配置。</p>
|
|
</div>
|
|
<div class="toolbar-actions">
|
|
<el-button @click="loadRoles">刷新</el-button>
|
|
<el-button type="primary" @click="openCreate">新建角色</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<el-table v-loading="loading" class="table-panel" :data="roles">
|
|
<el-table-column prop="id" label="ID" width="70" />
|
|
<el-table-column prop="code" label="编码" min-width="120" />
|
|
<el-table-column prop="name" label="名称" min-width="120" />
|
|
<el-table-column prop="description" label="描述" min-width="200" />
|
|
<el-table-column prop="perm_count" label="权限数" width="90" align="center" />
|
|
<el-table-column label="操作" width="240" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button size="small" @click="openEdit(row)">编辑</el-button>
|
|
<el-button size="small" type="primary" @click="openPerms(row)">权限</el-button>
|
|
<el-button
|
|
v-if="row.code !== 'super_admin'"
|
|
size="small"
|
|
type="danger"
|
|
@click="handleDelete(row)"
|
|
>
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 新建/编辑对话框 -->
|
|
<RoleDialog v-model="showDialog" :role="editingRole" @saved="loadRoles" />
|
|
|
|
<!-- 权限分配对话框 -->
|
|
<AssignPermissionsDialog v-model="showPermsDialog" :role="permsRole" @saved="loadRoles" />
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.toolbar-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
</style>
|