|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<title>权限管理</title>
|
|
|
|
|
</head>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sub-header {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dialog {
|
|
|
|
|
height: 60vh;
|
|
|
|
|
width: 60vw;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
|
|
|
padding: 2rem;
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div class="header">应用权限管理</div>
|
|
|
|
|
<div class="sub-header">资源表</div>
|
|
|
|
|
<v-table :axios='$axios' :onerr="onerr" :keys="keys" :api='resource_url'></v-table>
|
|
|
|
|
<div class="sub-header">角色表</div>
|
|
|
|
|
<v-table :axios='$axios' :onerr="onerr" :keys="role_keys" :api='role_url'>
|
|
|
|
|
<v-btn vslot='_addon' size='sm' @click='show_user(row)' color='#2c9'>权限表</v-btn>
|
|
|
|
|
</v-table>
|
|
|
|
|
<v-dialog v:show='show'>
|
|
|
|
|
<div class="dialog">
|
|
|
|
|
<div class="text-2xl">{{selected_role.name}}角色权限表</div>
|
|
|
|
|
<v-table :querys='{role_id: selected_role?.id}' :axios='$axios' :onerr="onerr" :keys="access_keys"
|
|
|
|
|
:api='access_url' :data="accessData"></v-table>
|
|
|
|
|
</div>
|
|
|
|
|
</v-dialog>
|
|
|
|
|
</body>
|
|
|
|
|
<script setup>
|
|
|
|
|
id = $router.params.id
|
|
|
|
|
rows = []
|
|
|
|
|
keys = [
|
|
|
|
|
{name: 'id', label: 'ID', disabled: true, style: {width: '2rem'}},
|
|
|
|
|
{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: '2rem'}},
|
|
|
|
|
{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: '2rem'}},
|
|
|
|
|
{name: 'name', required: true, label: '资源名'},
|
|
|
|
|
{name: 'tid', label: '限制域', editable: true},
|
|
|
|
|
{name: 'level', 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()},
|
|
|
|
|
]
|
|
|
|
|
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}`
|
|
|
|
|
onerr = (e) => {
|
|
|
|
|
console.warn(e)
|
|
|
|
|
// history.back()
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</html>
|
