mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
161 lines
5.1 KiB
HTML
161 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>权限管理</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="权限管理" details="管理应用资源、角色及权限分配">
|
|
</head>
|
|
<style>
|
|
body {
|
|
padding: var(--spacing-lg);
|
|
background-color: var(--bg-color-secondary);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.header {
|
|
font-size: 1.5rem;
|
|
line-height: 1.5;
|
|
margin-bottom: var(--spacing-lg);
|
|
font-weight: 600;
|
|
color: var(--text-color);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.sub-header {
|
|
font-size: 1.25rem;
|
|
line-height: 1.5;
|
|
margin-bottom: var(--spacing-lg);
|
|
font-weight: 600;
|
|
color: var(--text-color);
|
|
border-left: 4px solid var(--color-primary);
|
|
padding-left: var(--spacing-md);
|
|
}
|
|
|
|
.dialog {
|
|
height: 60vh;
|
|
width: 60vw;
|
|
background-color: var(--bg-color);
|
|
box-shadow: var(--shadow-lg);
|
|
padding: var(--spacing-xl);
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dialog-title {
|
|
font-size: 1.5rem;
|
|
margin-bottom: var(--spacing-lg);
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Responsive dialog */
|
|
@media (max-width: 768px) {
|
|
.dialog {
|
|
width: 90vw;
|
|
height: 80vh;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<div class="header">
|
|
<i class="fa-solid fa-shield-halved"></i> 应用权限管理
|
|
</div>
|
|
|
|
<div class="sub-header">资源管理</div>
|
|
<v-table :axios='$axios' :onerr="onerr" :keys="keys" :api='resource_url'></v-table>
|
|
|
|
<div class="sub-header" style="margin-top: var(--spacing-xl);">角色管理</div>
|
|
<v-table :axios='$axios' :onerr="onerr" :keys="role_keys" :api='role_url'>
|
|
<v-btn vslot='_addon' size='sm' @click='show_user(row)' variant="primary" style="margin-right: 5px;">
|
|
<i class="fa-solid fa-list-check"></i> 权限表
|
|
</v-btn>
|
|
<v-btn v-if='row.id!==$G.app.init_role_id' vslot='_addon' size='sm' @click='update_app({init_role_id: row.id})'
|
|
variant="warning">
|
|
<i class="fa-solid fa-star"></i> 设为初始角色
|
|
</v-btn>
|
|
<v-btn v-else vslot='_addon' size='sm' disabled variant="success">
|
|
<i class="fa-solid fa-check"></i> 初始角色
|
|
</v-btn>
|
|
</v-table>
|
|
|
|
<v-dialog v:show='show'>
|
|
<div class="dialog">
|
|
<div class="dialog-title">
|
|
<i class="fa-solid fa-user-tag"></i> {{selected_role.name}} 权限配置
|
|
</div>
|
|
<div style="flex: 1; overflow: hidden;">
|
|
<v-table :querys='{role_id: selected_role?.id}' :axios='$axios' :onerr="onerr" :keys="access_keys"
|
|
:api='access_url' :data="accessData" height="100%"></v-table>
|
|
</div>
|
|
<div style="margin-top: var(--spacing-md); text-align: right;">
|
|
<v-btn @click="show = false">关闭</v-btn>
|
|
</div>
|
|
</div>
|
|
</v-dialog>
|
|
</body>
|
|
<script setup>
|
|
id = $router.params.id
|
|
rows = []
|
|
|
|
// 错误处理函数
|
|
onerr = (e) => {
|
|
$message.error(e.message || '操作失败');
|
|
}
|
|
|
|
keys = [
|
|
{name: 'id', label: 'ID', disabled: true, style: {width: '4rem'}},
|
|
{name: 'name', required: true, label: '资源名称'},
|
|
{name: 'des', label: '资源描述', editable: true},
|
|
{name: 'created_at', label: '创建时间', disabled: true, field: (r) => new Date(r.created_at).toLocaleString()},
|
|
{name: 'updated_at', label: '更新时间', disabled: true, field: (r) => new Date(r.updated_at).toLocaleString()},
|
|
]
|
|
role_keys = [
|
|
{name: 'id', label: 'ID', disabled: true, style: {width: '4rem'}},
|
|
{name: 'name', required: true, label: '角色名称'},
|
|
{name: 'des', required: true, label: '角色描述', editable: true},
|
|
{name: 'user_count', label: '用户数量', disabled: true},
|
|
{name: 'created_at', label: '创建时间', disabled: true, field: (r) => new Date(r.created_at).toLocaleString()},
|
|
{name: 'updated_at', label: '更新时间', disabled: true, field: (r) => new Date(r.updated_at).toLocaleString()},
|
|
]
|
|
access_keys = [
|
|
{name: 'id', label: 'ID', disabled: true, style: {width: '4rem'}},
|
|
{name: 'name', required: true, label: '资源名'},
|
|
{name: 'tid', label: '限制域', editable: true},
|
|
{name: 'level', label: '权限等级', type: 'number', editable: true},
|
|
{name: 'created_at', label: '创建时间', disabled: true, field: (r) => new Date(r.created_at).toLocaleString()},
|
|
{name: 'updated_at', label: '更新时间', disabled: true, field: (r) => new Date(r.updated_at).toLocaleString()},
|
|
]
|
|
show = false
|
|
role_user_keys = []
|
|
selected_role = {}
|
|
accessData = []
|
|
user_role_data = []
|
|
show_user = async (row) => {
|
|
selected_role = row
|
|
access_url = `/api/app/${id}/access`
|
|
show = true
|
|
}
|
|
|
|
resource_url = `/api/app/${id}/resource`
|
|
access_url = ``
|
|
role_url = `/api/app/${id}/role`
|
|
user_role_url = `/api/user/_/user_role/${selected_role.id}`
|
|
update_app = (props) => {
|
|
$axios.patch(`/api/app/${id}`, props).then((res) => {
|
|
if (res) {
|
|
Object.assign($G.app, res)
|
|
$message.success('更新成功');
|
|
}
|
|
}).catch(onerr)
|
|
}
|
|
</script>
|
|
|
|
</html> |