281 lines
7.9 KiB
Vue
281 lines
7.9 KiB
Vue
<template>
|
|
<DefaultLayout>
|
|
<div class="role-management-page">
|
|
<div class="container">
|
|
<div class="header-actions">
|
|
<a-button type="primary" @click="showRoleModal()">
|
|
<template #icon><Icon name="plus" size="sm" /></template>
|
|
添加角色
|
|
</a-button>
|
|
</div>
|
|
|
|
<!-- 角色表格 -->
|
|
<div class="table-card">
|
|
<a-table
|
|
:columns="columns"
|
|
:data-source="roles"
|
|
:loading="loading"
|
|
row-key="id"
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'builtIn'">
|
|
<a-tag :color="record.builtIn === 1 ? 'blue' : 'default'">
|
|
{{ record.builtIn === 1 ? '内置' : '自定义' }}
|
|
</a-tag>
|
|
</template>
|
|
<template v-else-if="column.key === 'status'">
|
|
<a-switch
|
|
:checked="record.status === 1"
|
|
:disabled="record.builtIn === 1"
|
|
@change="(checked: boolean) => toggleStatus(record.id, checked)"
|
|
/>
|
|
</template>
|
|
<template v-else-if="column.key === 'actions'">
|
|
<a-space>
|
|
<a-button type="link" size="small" @click="showRoleModal(record)">编辑</a-button>
|
|
<a-button type="link" size="small" @click="showPermissionModal(record)">配置权限</a-button>
|
|
<a-popconfirm
|
|
v-if="record.builtIn !== 1"
|
|
title="确定删除此角色？"
|
|
@confirm="deleteRoleItem(record.id)"
|
|
>
|
|
<a-button type="link" danger size="small">删除</a-button>
|
|
</a-popconfirm>
|
|
</a-space>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
</div>
|
|
|
|
<!-- 角色编辑弹窗 -->
|
|
<a-modal
|
|
v-model:open="roleModalVisible"
|
|
:title="editingRole ? '编辑角色' : '添加角色'"
|
|
@ok="saveRole"
|
|
>
|
|
<a-form :model="roleForm" layout="vertical">
|
|
<a-form-item label="角色编码" required>
|
|
<a-input
|
|
v-model:value="roleForm.roleCode"
|
|
:disabled="editingRole?.builtIn === 1"
|
|
placeholder="请输入角色编码"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="角色名称" required>
|
|
<a-input v-model:value="roleForm.roleName" placeholder="请输入角色名称" />
|
|
</a-form-item>
|
|
<a-form-item label="数据范围">
|
|
<a-select v-model:value="roleForm.dataScope">
|
|
<a-select-option value="all">全部数据</a-select-option>
|
|
<a-select-option value="dept">本部门数据</a-select-option>
|
|
<a-select-option value="self">本人数据</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item label="描述">
|
|
<a-textarea v-model:value="roleForm.description" :rows="3" />
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
|
|
<!-- 权限配置弹窗 -->
|
|
<a-modal
|
|
v-model:open="permissionModalVisible"
|
|
title="配置权限"
|
|
width="600px"
|
|
@ok="savePermissions"
|
|
>
|
|
<a-tree
|
|
v-model:checkedKeys="selectedPermissionIds"
|
|
:tree-data="permissionTreeData"
|
|
checkable
|
|
:field-names="{ children: 'children', title: 'permissionName', key: 'id' }"
|
|
/>
|
|
</a-modal>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import DefaultLayout from '@/layouts/DefaultLayout.vue'
|
|
import { message } from 'ant-design-vue'
|
|
import Icon from '@/components/Icon.vue'
|
|
import {
|
|
getAllRoles,
|
|
createRole,
|
|
updateRole,
|
|
deleteRole,
|
|
toggleRoleStatus,
|
|
assignRolePermissions,
|
|
getRolePermissionIds,
|
|
type Role
|
|
} from '@/api/role'
|
|
import { getPermissionTree, type Permission } from '@/api/permission'
|
|
|
|
const loading = ref(false)
|
|
const roles = ref<Role[]>([])
|
|
const permissionTreeData = ref<Permission[]>([])
|
|
|
|
const roleModalVisible = ref(false)
|
|
const permissionModalVisible = ref(false)
|
|
const editingRole = ref<Role | null>(null)
|
|
const currentRoleId = ref<number>()
|
|
|
|
const roleForm = reactive<Partial<Role>>({
|
|
roleCode: '',
|
|
roleName: '',
|
|
description: '',
|
|
dataScope: 'self',
|
|
sortOrder: 0,
|
|
status: 1
|
|
})
|
|
|
|
const selectedPermissionIds = ref<number[]>([])
|
|
|
|
const columns = [
|
|
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
|
{ title: '角色编码', dataIndex: 'roleCode', key: 'roleCode' },
|
|
{ title: '角色名称', dataIndex: 'roleName', key: 'roleName' },
|
|
{ title: '数据范围', dataIndex: 'dataScope', key: 'dataScope' },
|
|
{ title: '描述', dataIndex: 'description', key: 'description', ellipsis: true },
|
|
{ title: '类型', key: 'builtIn', width: 100 },
|
|
{ title: '状态', key: 'status', width: 100 },
|
|
{ title: '操作', key: 'actions', width: 260, fixed: 'right' }
|
|
]
|
|
|
|
const loadRoles = async () => {
|
|
loading.value = true
|
|
try {
|
|
roles.value = await getAllRoles()
|
|
} catch (error) {
|
|
message.error('加载角色列表失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const loadPermissionTree = async () => {
|
|
try {
|
|
permissionTreeData.value = await getPermissionTree()
|
|
} catch (error) {
|
|
message.error('加载权限树失败')
|
|
}
|
|
}
|
|
|
|
const showRoleModal = (role?: Role) => {
|
|
editingRole.value = role || null
|
|
if (role) {
|
|
Object.assign(roleForm, role)
|
|
} else {
|
|
Object.keys(roleForm).forEach(key => {
|
|
roleForm[key as keyof typeof roleForm] = key === 'status' ? 1 : key === 'dataScope' ? 'self' : ''
|
|
})
|
|
}
|
|
roleModalVisible.value = true
|
|
}
|
|
|
|
const saveRole = async () => {
|
|
try {
|
|
if (editingRole.value) {
|
|
await updateRole(editingRole.value.id!, roleForm)
|
|
message.success('更新成功')
|
|
} else {
|
|
await createRole(roleForm as Role)
|
|
message.success('创建成功')
|
|
}
|
|
roleModalVisible.value = false
|
|
await loadRoles()
|
|
} catch (error) {
|
|
message.error('保存失败')
|
|
}
|
|
}
|
|
|
|
const showPermissionModal = async (role: Role) => {
|
|
currentRoleId.value = role.id
|
|
try {
|
|
selectedPermissionIds.value = await getRolePermissionIds(role.id!)
|
|
permissionModalVisible.value = true
|
|
} catch (error) {
|
|
message.error('加载角色权限失败')
|
|
}
|
|
}
|
|
|
|
const savePermissions = async () => {
|
|
if (!currentRoleId.value) return
|
|
try {
|
|
await assignRolePermissions(currentRoleId.value, selectedPermissionIds.value)
|
|
message.success('权限配置成功')
|
|
permissionModalVisible.value = false
|
|
} catch (error) {
|
|
message.error('权限配置失败')
|
|
}
|
|
}
|
|
|
|
const toggleStatus = async (id: number, checked: boolean) => {
|
|
try {
|
|
await toggleRoleStatus(id, checked ? 1 : 0)
|
|
message.success('状态更新成功')
|
|
await loadRoles()
|
|
} catch (error) {
|
|
message.error('状态更新失败')
|
|
}
|
|
}
|
|
|
|
const deleteRoleItem = async (id: number) => {
|
|
try {
|
|
await deleteRole(id)
|
|
message.success('删除成功')
|
|
await loadRoles()
|
|
} catch (error) {
|
|
message.error('删除失败')
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadRoles()
|
|
loadPermissionTree()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.role-management-page {
|
|
min-height: 100vh;
|
|
padding: $space-xl 0;
|
|
background: $bg-primary;
|
|
}
|
|
|
|
.container {
|
|
max-width: $container-max-width;
|
|
margin: 0 auto;
|
|
padding: 0 $space-xl;
|
|
|
|
@media (max-width: $breakpoint-tablet) {
|
|
padding: 0 $space-lg;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-mobile) {
|
|
padding: 0 $space-md;
|
|
}
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: $space-2xl;
|
|
}
|
|
|
|
.table-card {
|
|
background: $bg-card;
|
|
border: 1px solid $border-primary;
|
|
border-radius: $radius-lg;
|
|
overflow: hidden;
|
|
transition: all $transition-base $ease-out;
|
|
|
|
&:hover {
|
|
border-color: $border-color;
|
|
}
|
|
}
|
|
</style>
|
|
|