whm/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 权限列表JSON字段与角色可编辑; 前台site_id与SPA; 首页积木扩展区

Browse Source 
Made-with: Cursor
This commit is contained in:
whm
2026-03-19 17:31:18 +08:00
parent e1fc257435
commit 0360ee5261
10 changed files with 210 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
admin/src/views/settings/RolePermissions.vue
View File

@@ -10,27 +10,28 @@
</div>
</div>
</template>
<p class="tip">超级管理员(9527)拥有全部权限且不可修改。为其他角色勾选其可用的后台权限；可创建自定义角色并赋权。</p>
<p class="tip">
超级管理员(9527)拥有全部权限且不可改权限勾选（防误操作）。<strong>超级用户(0)、普通用户(1)</strong>可修改权限与显示名称；自定义角色可删除。
</p>
<el-table v-loading="loading" :data="list" border stripe>
<el-table-column prop="role_name" label="角色" width="160">
<el-table-column prop="role_name" label="角色" width="200">
<template #default="{ row }">
<el-input v-if="row.is_custom" v-model="row.role_name" size="small" placeholder="角色名" style="width: 120px" />
<el-input v-if="row.role_id !== 9527" v-model="row.role_name" size="small" placeholder="显示名称" style="width: 160px" />
<span v-else>{{ row.role_name }}</span>
</template>
</el-table-column>
<el-table-column prop="role_id" label="role_id" width="100" />
<el-table-column label="权限" min-width="400">
<el-table-column label="权限" min-width="480">
<template #default="{ row }">
<span v-if="row.role_id === 9527" class="perm-all">（全部权限，不可修改）</span>
<div v-else class="perm-checkboxes">
<el-checkbox
v-for="p in allPermissions"
:key="p.key"
v-model="row._checked[p.key]"
style="margin-right: 16px; margin-bottom: 8px"
>
{{ p.name }}
</el-checkbox>
<div v-else class="perm-grid">
<label v-for="p in allPermissions" :key="permKey(p)" class="perm-item">
<el-checkbox v-model="row._checked[permKey(p)]" />
<span class="perm-text">
<span class="perm-name">{{ permLabel(p) }}</span>
<span class="perm-key">{{ permKey(p) }}</span>
</span>
</label>
</div>
</template>
</el-table-column>
@@ -43,16 +44,21 @@
</el-table>
</el-card>
<el-dialog v-model="showCreate" title="创建角色" width="500px">
<el-dialog v-model="showCreate" title="创建角色" width="560px">
<el-form label-width="90px">
<el-form-item label="角色名称" required>
<el-input v-model="createForm.role_name" placeholder="请输入角色名称" />
</el-form-item>
<el-form-item label="权限">
<div class="perm-checkboxes">
<el-checkbox v-for="p in allPermissions" :key="p.key" v-model="createForm._checked[p.key]">
{{ p.name }}
</el-checkbox>
<p class="dialog-perm-hint">勾选该角色可访问的后台能力：</p>
<div class="perm-grid dialog-perm-grid">
<label v-for="p in allPermissions" :key="permKey(p)" class="perm-item">
<el-checkbox v-model="createForm._checked[permKey(p)]" />
<span class="perm-text">
<span class="perm-name">{{ permLabel(p) }}</span>
<span class="perm-key">{{ permKey(p) }}</span>
</span>
</label>
</div>
</el-form-item>
</el-form>
@@ -77,10 +83,20 @@ const showCreate = ref(false)
const creating = ref(false)
const createForm = reactive({ role_name: '', _checked: {} })
/** 兼容旧接口大写字段 Key/Name */
function permKey(p) {
return p?.key || p?.Key || ''
}
function permLabel(p) {
const k = permKey(p)
return p?.name || p?.Name || k || '权限'
}
function buildChecked(permissions) {
const o = {}
allPermissions.value.forEach((p) => {
o[p.key] = permissions.includes(p.key)
const k = permKey(p)
if (k) o[k] = (permissions || []).includes(k)
})
return o
}
@@ -106,9 +122,10 @@ const handleSave = async () => {
try {
for (const row of list.value) {
if (row.role_id === 9527) continue
const permissions = allPermissions.value.filter((p) => row._checked[p.key]).map((p) => p.key)
const permissions = allPermissions.value.filter((p) => row._checked[permKey(p)]).map((p) => permKey(p))
const payload = { permissions }
if (row.is_custom && row.role_name) payload.role_name = row.role_name
const name = (row.role_name || '').trim()
if (name) payload.role_name = name
await updateRolePermissions(row.role_id, payload)
}
ElMessage.success('保存成功')
@@ -123,7 +140,8 @@ const resetCreateForm = () => {
createForm.role_name = ''
createForm._checked = {}
allPermissions.value.forEach((p) => {
createForm._checked[p.key] = false
const k = permKey(p)
if (k) createForm._checked[k] = false
})
}
@@ -135,7 +153,7 @@ const handleCreate = async () => {
}
creating.value = true
try {
const permissions = allPermissions.value.filter((p) => createForm._checked[p.key]).map((p) => p.key)
const permissions = allPermissions.value.filter((p) => createForm._checked[permKey(p)]).map((p) => permKey(p))
await createRole({ role_name: name, permissions })
ElMessage.success('创建成功')
showCreate.value = false
@@ -176,9 +194,50 @@ onMounted(fetchList)
color: #666;
font-size: 13px;
margin-bottom: 16px;
line-height: 1.6;
}
.perm-checkboxes {
.perm-all {
color: #909399;
font-size: 13px;
}
.perm-grid {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
align-items: flex-start;
}
.dialog-perm-grid {
max-height: 360px;
overflow-y: auto;
padding: 8px 0;
}
.perm-item {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
min-width: 200px;
max-width: 240px;
}
.perm-text {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.35;
}
.perm-name {
font-size: 13px;
color: #303133;
}
.perm-key {
font-size: 11px;
color: #909399;
font-family: ui-monospace, monospace;
word-break: break-all;
}
.dialog-perm-hint {
margin: 0 0 8px;
font-size: 12px;
color: #909399;
}
</style>