15308555518/ MaxKB
1
0
Fork 0
mirror of https://github.com/1Panel-dev/MaxKB.git synced 2025-12-26 10:12:51 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: role

This commit is contained in:
wangdan-fit2cloud 2025-06-26 14:32:03 +08:00
parent bf4e98b7fc
commit 683b0bcf18
9 changed files with 306 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
ui/src/components/app-icon/icons/menu.ts
View File

@ -142,4 +142,72 @@ export default {
])
},
},
'app-role': {
iconReader: () => {
return h('i', [
h(
'svg',
{
viewBox: '0 0 20 20',
version: '1.1',
xmlns: 'http://www.w3.org/2000/svg',
},
[
h('path', {
d: 'M12.5 4.16667C11.35 4.16667 10.4167 5.09958 10.4167 6.25C10.4167 7.40042 11.35 8.33333 12.5 8.33333C13.65 8.33333 14.5833 7.40042 14.5833 6.25C14.5833 5.09958 13.65 4.16667 12.5 4.16667ZM8.75 6.25C8.75 4.17875 10.4292 2.5 12.5 2.5C14.5708 2.5 16.25 4.17875 16.25 6.25C16.25 8.32125 14.5708 10 12.5 10C10.4292 10 8.75 8.32125 8.75 6.25ZM10.2792 12.5C8.7625 12.5 7.5 13.7488 7.5 15.3333V16.6667H17.5V15.3333C17.5 13.7488 16.2375 12.5 14.7208 12.5H10.2792ZM5.83333 15.3333C5.83333 12.8479 7.825 10.8333 10.2792 10.8333H14.7208C17.175 10.8333 19.1667 12.8479 19.1667 15.3333V17.5833C19.1667 17.9975 18.8333 18.3333 18.425 18.3333H6.575C6.16667 18.3333 5.83333 17.9975 5.83333 17.5833V15.3333Z',
fill: 'currentColor',
}),
h('path', {
d: 'M7.08333 4.99998H2.5V16.6666H3.75C3.98012 16.6666 4.16667 16.8532 4.16667 17.0833V17.9166C4.16667 18.1468 3.98012 18.3333 3.75 18.3333H1.94036C1.25 18.3333 0.833334 17.9166 0.833334 17.0833V4.44034C0.833334 3.74998 1.25 3.33331 1.94036 3.33331H7.08333C7.31345 3.33331 7.5 3.51986 7.5 3.74998V4.58331C7.5 4.81343 7.31345 4.99998 7.08333 4.99998Z',
fill: 'currentColor',
}),
h('path', {
d: 'M3.66667 7.49998H7.16667C7.25507 7.49998 7.33986 7.54388 7.40237 7.62202C7.46488 7.70016 7.5 7.80614 7.5 7.91665V8.74998C7.5 8.86049 7.46488 8.96647 7.40237 9.04461C7.33986 9.12275 7.25507 9.16665 7.16667 9.16665H3.66667C3.57826 9.16665 3.49348 9.12275 3.43097 9.04461C3.36845 8.96647 3.33333 8.86049 3.33333 8.74998V7.91665C3.33333 7.80614 3.36845 7.70016 3.43097 7.62202C3.49348 7.54388 3.57826 7.49998 3.66667 7.49998Z',
fill: 'currentColor',
}),
h('path', {
d: 'M3.58333 9.99998H5.58333C5.64964 9.99998 5.71323 10.0439 5.76011 10.122C5.80699 10.2002 5.83333 10.3061 5.83333 10.4166V11.25C5.83333 11.3605 5.80699 11.4665 5.76011 11.5446C5.71323 11.6227 5.64964 11.6666 5.58333 11.6666H3.58333C3.51703 11.6666 3.45344 11.6227 3.40656 11.5446C3.35967 11.4665 3.33333 11.3605 3.33333 11.25V10.4166C3.33333 10.3061 3.35967 10.2002 3.40656 10.122C3.45344 10.0439 3.51703 9.99998 3.58333 9.99998Z',
fill: 'currentColor',
}),
],
),
])
},
},
'app-role-active': {
iconReader: () => {
return h('i', [
h(
'svg',
{
viewBox: '0 0 20 20',
version: '1.1',
xmlns: 'http://www.w3.org/2000/svg',
},
[
h('path', {
d: 'M12.5 2.5C10.4292 2.5 8.75 4.17875 8.75 6.25C8.75 8.32125 10.4292 10 12.5 10C14.5708 10 16.25 8.32125 16.25 6.25C16.25 4.17875 14.5708 2.5 12.5 2.5Z',
fill: 'currentColor',
}),
h('path', {
d: 'M10.2792 10.8333C7.825 10.8333 5.83333 12.8479 5.83333 15.3333V17.5833C5.83333 17.9975 6.16667 18.3333 6.575 18.3333H18.425C18.8333 18.3333 19.1667 17.9975 19.1667 17.5833V15.3333C19.1667 12.8479 17.175 10.8333 14.7208 10.8333H10.2792Z',
fill: 'currentColor',
}),
h('path', {
d: 'M7.08333 4.99998H2.5V16.6666H3.75C3.98012 16.6666 4.16667 16.8532 4.16667 17.0833V17.9166C4.16667 18.1468 3.98012 18.3333 3.75 18.3333H1.94036C1.25 18.3333 0.833334 17.9166 0.833334 17.0833V4.44034C0.833334 3.74998 1.25 3.33331 1.94036 3.33331H7.08333C7.31345 3.33331 7.5 3.51986 7.5 3.74998V4.58331C7.5 4.81343 7.31345 4.99998 7.08333 4.99998Z',
fill: 'currentColor',
}),
h('path', {
d: 'M3.66667 7.49998H7.16667C7.25507 7.49998 7.33986 7.54388 7.40237 7.62202C7.46488 7.70016 7.5 7.80614 7.5 7.91665V8.74998C7.5 8.86049 7.46488 8.96647 7.40237 9.04461C7.33986 9.12275 7.25507 9.16665 7.16667 9.16665H3.66667C3.57826 9.16665 3.49348 9.12275 3.43097 9.04461C3.36845 8.96647 3.33333 8.86049 3.33333 8.74998V7.91665C3.33333 7.80614 3.36845 7.70016 3.43097 7.62202C3.49348 7.54388 3.57826 7.49998 3.66667 7.49998Z',
fill: 'currentColor',
}),
h('path', {
d: 'M3.58333 9.99998H5.58333C5.64964 9.99998 5.71323 10.0439 5.76011 10.122C5.80699 10.2002 5.83333 10.3061 5.83333 10.4166V11.25C5.83333 11.3605 5.80699 11.4665 5.76011 11.5446C5.71323 11.6227 5.64964 11.6666 5.58333 11.6666H3.58333C3.51703 11.6666 3.45344 11.6227 3.40656 11.5446C3.35967 11.4665 3.33333 11.3605 3.33333 11.25V10.4166C3.33333 10.3061 3.35967 10.2002 3.40656 10.122C3.45344 10.0439 3.51703 9.99998 3.58333 9.99998Z',
fill: 'currentColor',
}),
],
),
])
},
},
}

5
ui/src/components/common-list/index.vue
View File

@ -71,11 +71,12 @@ defineExpose({
/* 通用 ui li样式 */
.common-list {
li {
padding: 8px 16px;
padding: 8px;
font-weight: 400;
color: var(--el-text-color-regular);
font-size: 14px;
margin-bottom: 4px;
min-height: 24px;
line-height: 24px;
&.active {
background: var(--el-color-primary-light-9);
border-radius: 4px;

20
ui/src/router/modules/system.ts
View File

@ -18,10 +18,7 @@ const systemRouter = {
activeMenu: '/system',
parentPath: '/system',
parentName: 'system',
permission: [
RoleConst.ADMIN,
PermissionConst.USER_READ
],
permission: [RoleConst.ADMIN, PermissionConst.USER_READ],
},
component: () => import('@/views/system/user-manage/index.vue'),
},
@ -29,8 +26,8 @@ const systemRouter = {
path: '/system/role',
name: 'role',
meta: {
icon: 'app-resource-authorization', // TODO
iconActive: 'app-resource-authorization-active', // TODO
icon: 'app-role',
iconActive: 'app-role-active',
title: 'views.role.title',
activeMenu: '/system',
parentPath: '/system',
@ -59,8 +56,9 @@ const systemRouter = {
permission: [
new ComplexPermission(
[RoleConst.WORKSPACE_MANAGE, RoleConst.ADMIN],
[PermissionConst.WORKSPACE_READ.getWorkspacePermissionWorkspaceManageRole,
PermissionConst.WORKSPACE_READ
[
PermissionConst.WORKSPACE_READ.getWorkspacePermissionWorkspaceManageRole,
PermissionConst.WORKSPACE_READ,
],
[EditionConst.IS_EE],
'OR',
@ -144,9 +142,9 @@ const systemRouter = {
[RoleConst.ADMIN],
[PermissionConst.SHARED_KNOWLEDGE_READ],
[EditionConst.IS_EE],
'OR'
)
]
'OR',
),
],
},
component: () => import('@/views/system-shared/KnowLedgeSharedIndex.vue'),
},

1
ui/src/styles/app.scss
View File

@ -399,7 +399,6 @@ h5 {
.color-secondary {
color: var(--app-text-color-secondary);
}
.color-input-placeholder {
color: var(--app-input-color-placeholder);
}

10
ui/src/views/system/role/component/AddMemberDrawer.vue
View File

@ -12,12 +12,10 @@
/>
</template>
<template #footer>
<div style="flex: auto">
<el-button @click="handleCancel">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" @click="handleAdd()" :loading="loading">
{{ $t('common.add') }}
</el-button>
</div>
<el-button @click="handleCancel">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" @click="handleAdd()" :loading="loading">
{{ $t('common.add') }}
</el-button>
</template>
</el-drawer>
</template>

30
ui/src/views/system/role/component/Member.vue
View File

@ -1,9 +1,17 @@
<template>
<div class="p-24 pt-0">
<div class="flex-between mb-16">
<el-button type="primary" @click="handleAdd"
v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
[PermissionConst.ROLE_ADD_MEMBER.getWorkspacePermission],[], 'OR')"
<el-button
type="primary"
@click="handleAdd"
v-hasPermission="
new ComplexPermission(
[RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
[PermissionConst.ROLE_ADD_MEMBER.getWorkspacePermission],
[],
'OR',
)
"
>
{{ $t('views.role.member.add') }}
</el-button>
@ -43,10 +51,20 @@
:content="`${$t('views.role.member.delete.button')}`"
placement="top"
>
<el-button type="primary" text @click.stop="handleDelete(row)"
v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
[PermissionConst.ROLE_REMOVE_MEMBER.getWorkspacePermission],[], 'OR')"
<el-button
type="primary"
text
@click.stop="handleDelete(row)"
v-hasPermission="
new ComplexPermission(
[RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
[PermissionConst.ROLE_REMOVE_MEMBER.getWorkspacePermission],
[],
'OR',
)
"
>
<!-- TODO: 删除图标需要换 -->
<el-icon>
<Delete />
</el-icon>

2
ui/src/views/system/role/component/MemberFormContent.vue
View File

@ -12,7 +12,7 @@
</el-select>
</el-form-item>
<!-- 删除按钮 -->
<el-button @click="handleDelete(index)"
<el-button @click="handleDelete(index)" text
:style="{ 'margin-top': index === 0 && props.models.some((item) => item.label) ? '30px' : '' }">
<el-icon>
<Delete />

111
ui/src/views/system/role/component/PermissionConfiguration.vue
View File

@ -1,13 +1,29 @@
<template>
<el-scrollbar v-loading="loading">
<div class="p-24 pt-0">
<el-table :data="tableData" border :span-method="objectSpanMethod">
<el-table-column prop="module" :width="130" :label="$t('views.role.permission.moduleName')" />
<el-table-column prop="name" :width="150" :label="$t('views.role.permission.operationTarget')" />
<el-table-column prop="permission" :label="$t('views.model.modelForm.permissionType.label')">
<app-table :data="tableData" border :span-method="objectSpanMethod">
<el-table-column
prop="module"
:width="130"
:label="$t('views.role.permission.moduleName')"
/>
<el-table-column
prop="name"
:width="150"
:label="$t('views.role.permission.operationTarget')"
/>
<el-table-column
prop="permission"
:label="$t('views.model.modelForm.permissionType.label')"
>
<template #default="{ row }">
<el-checkbox-group v-model="row.perChecked" @change="handleCellChange($event, row)">
<el-checkbox v-for="item in row.permission" :key="item.id" :value="item.id" :disabled="disabled">
<el-checkbox
v-for="item in row.permission"
:key="item.id"
:value="item.id"
:disabled="disabled"
>
<div class="ellipsis" style="width: 96px">{{ item.name }}</div>
</el-checkbox>
</el-checkbox-group>
@ -15,19 +31,27 @@
</el-table-column>
<el-table-column :width="40">
<template #header>
<el-checkbox :model-value="allChecked" :indeterminate="allIndeterminate" :disabled="disabled"
@change="handleCheckAll" />
<el-checkbox
:model-value="allChecked"
:indeterminate="allIndeterminate"
:disabled="disabled"
@change="handleCheckAll"
/>
</template>
<template #default="{ row }">
<el-checkbox v-model="row.enable" :indeterminate="row.indeterminate" :disabled="disabled"
@change="(value: boolean) => handleRowChange(value, row)" />
<el-checkbox
v-model="row.enable"
:indeterminate="row.indeterminate"
:disabled="disabled"
@change="(value: boolean) => handleRowChange(value, row)"
/>
</template>
</el-table-column>
</el-table>
</app-table>
</div>
</el-scrollbar>
<div v-if="!disabled" class="footer border-t">
<el-button type="primary" style="width: 80px;" :loading="loading" @click="handleSave">
<el-button type="primary" style="width: 80px" :loading="loading" @click="handleSave">
{{ $t('common.save') }}
</el-button>
</div>
@ -35,7 +59,12 @@
<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import type { RoleItem, RolePermissionItem, RoleTableDataItem, ChildrenPermissionItem } from '@/api/type/role'
import type {
RoleItem,
RolePermissionItem,
RoleTableDataItem,
ChildrenPermissionItem,
} from '@/api/type/role'
import RoleApi from '@/api/system/role'
import { MsgSuccess } from '@/utils/message'
import { t } from '@/locales'
@ -50,11 +79,9 @@ const disabled = computed(() => props.currentRole?.internal) // TODO 权限
function transformData(data: RolePermissionItem[]) {
const transformedData: RoleTableDataItem[] = []
data.forEach(module => {
module.children.forEach(feature => {
const perChecked = feature.permission
.filter(p => p.enable)
.map(p => p.id)
data.forEach((module) => {
module.children.forEach((feature) => {
const perChecked = feature.permission.filter((p) => p.enable).map((p) => p.id)
transformedData.push({
module: module.name,
@ -62,19 +89,19 @@ function transformData(data: RolePermissionItem[]) {
permission: feature.permission,
enable: feature.enable,
perChecked,
indeterminate: perChecked.length > 0 && perChecked.length < feature.permission.length
indeterminate: perChecked.length > 0 && perChecked.length < feature.permission.length,
})
})
})
return transformedData;
};
return transformedData
}
async function getRolePermission() {
if (!props.currentRole?.id) return
try {
tableData.value = [];
tableData.value = []
const res = await RoleApi.getRolePermissionList(props.currentRole.id, loading)
tableData.value = transformData(res.data);
tableData.value = transformData(res.data)
} catch (error) {
console.error(error)
}
@ -84,52 +111,52 @@ function handleCellChange(checkedValues: string[], row: RoleTableDataItem) {
row.enable = checkedValues.length === row.permission.length
row.indeterminate = checkedValues.length > 0 && checkedValues.length < row.permission.length
row.permission.forEach(p => {
row.permission.forEach((p) => {
p.enable = checkedValues.includes(p.id)
})
}
function handleRowChange(checked: boolean, row: RoleTableDataItem) {
if (checked) {
row.perChecked = row.permission.map(p => p.id)
row.permission.forEach(p => p.enable = true)
row.perChecked = row.permission.map((p) => p.id)
row.permission.forEach((p) => (p.enable = true))
} else {
row.perChecked = []
row.permission.forEach(p => p.enable = false)
row.permission.forEach((p) => (p.enable = false))
}
row.indeterminate = false
}
const allChecked = computed(() => {
return tableData.value.length > 0 && tableData.value.every(item => item.enable)
return tableData.value.length > 0 && tableData.value.every((item) => item.enable)
})
const allIndeterminate = computed(() => {
return !allChecked.value && tableData.value.some(item => item.enable)
return !allChecked.value && tableData.value.some((item) => item.enable)
})
function handleCheckAll(checked: boolean) {
tableData.value.forEach(item => {
tableData.value.forEach((item) => {
item.enable = checked
item.perChecked = checked ? item.permission.map(p => p.id) : []
item.perChecked = checked ? item.permission.map((p) => p.id) : []
item.indeterminate = false
item.permission.forEach(p => p.enable = checked)
item.permission.forEach((p) => (p.enable = checked))
})
}
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
if (columnIndex === 0) {
const sameModuleRows = tableData.value.filter(item => item.module === row.module)
const firstRowIndex = tableData.value.findIndex(item => item.module === row.module)
const sameModuleRows = tableData.value.filter((item) => item.module === row.module)
const firstRowIndex = tableData.value.findIndex((item) => item.module === row.module)
if (rowIndex === firstRowIndex) {
return {
rowspan: sameModuleRows.length,
colspan: 1
colspan: 1,
}
} else {
return {
rowspan: 0,
colspan: 0
colspan: 0,
}
}
}
@ -139,19 +166,19 @@ watch(() => props.currentRole?.id, getRolePermission, { immediate: true })
async function handleSave() {
try {
const permissions: { id: string, enable: boolean }[] = [];
const permissions: { id: string; enable: boolean }[] = []
tableData.value.forEach((e) => {
e.permission?.forEach((ele: ChildrenPermissionItem) => {
permissions.push({
id: ele.id,
enable: ele.enable,
});
});
});
await RoleApi.saveRolePermission(props.currentRole?.id as string, permissions, loading);
})
})
})
await RoleApi.saveRolePermission(props.currentRole?.id as string, permissions, loading)
MsgSuccess(t('common.saveSuccess'))
} catch (error) {
console.log(error);
console.log(error)
}
}
</script>
@ -170,4 +197,4 @@ async function handleSave() {
padding: 16px 24px;
box-sizing: border-box;
}
</style>
</style>

269
ui/src/views/system/role/index.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="role">
<div class="role-manage p-16-24">
<h2 class="mb-16">{{ $t('views.role.title') }}</h2>
<el-card style="--el-card-padding: 0" body-class="role-card">
<el-card style="--el-card-padding: 0">
<div class="flex h-full">
<div class="role-left border-r p-16">
<div class="p-8 pb-0">
<div class="role-left border-r">
<div class="p-24 pb-0">
<el-input
v-model="filterText"
:placeholder="$t('common.search')"
@ -12,127 +12,141 @@
clearable
/>
</div>
<div class="list-height-left mt-8">
<div class="list-height-left">
<el-scrollbar v-loading="loading">
<div class="role-left_title color-secondary lighter">
<span>{{ $t('views.role.internalRole') }}</span>
</div>
<common-list
:data="filterInternalRole"
@click="clickRole"
:default-active="currentRole?.id"
>
<template #default="{ row }">
<div class="flex-between">
<span class="mr-8">{{ row.role_name }}</span>
<el-dropdown :teleported="false">
<el-button text>
<el-icon class="color-secondary">
<MoreFilled />
</el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu style="min-width: 80px">
<el-dropdown-item @click.stop="createOrUpdateRole(row)" class="p-8">
<AppIcon iconName="app-copy"></AppIcon>
{{ $t('common.rename') }}
</el-dropdown-item>
<el-dropdown-item @click.stop="deleteRole(row)" class="border-t p-8">
<AppIcon iconName="app-copy"></AppIcon>
{{ $t('common.delete') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<template #empty>
<span></span>
</template>
</common-list>
<div class="role-left_divider">
<el-divider />
</div>
<div class="role-left_title">
<span class="color-secondary lighter">{{ $t('views.role.customRole') }}</span>
<el-tooltip
effect="dark"
:content="`${$t('common.create')}${$t('views.role.customRole')}`"
placement="top"
<div class="p-16">
<div class="color-secondary lighter ml-8 mb-8">
<span>{{ $t('views.role.internalRole') }}</span>
</div>
<common-list
:data="filterInternalRole"
@click="clickRole"
:default-active="currentRole?.id"
@mouseenter="mouseenter"
@mouseleave="mouseId = ''"
>
<el-button type="primary" text @click="createOrUpdateRole()"
v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
[PermissionConst.ROLE_CREATE.getWorkspacePermission],[], 'OR')"
<template #default="{ row }">
<div class="flex-between">
<span class="mr-8">{{ row.role_name }}</span>
<div @click.stop v-show="mouseId === row.id">
<el-dropdown :teleported="false">
<el-button text>
<el-icon class="color-secondary">
<MoreFilled />
</el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu style="min-width: 80px">
<el-dropdown-item @click.stop="createOrUpdateRole(row)" class="p-8">
<AppIcon iconName="app-copy"></AppIcon>
{{ $t('common.rename') }}
</el-dropdown-item>
<el-dropdown-item @click.stop="deleteRole(row)" class="border-t p-8">
<AppIcon iconName="app-copy"></AppIcon>
{{ $t('common.delete') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
<template #empty>
<span></span>
</template>
</common-list>
<div class="ml-8 border-t flex-between mb-12" style="padding-top: 12px">
<span class="color-secondary lighter">{{ $t('views.role.customRole') }}</span>
<el-tooltip
effect="dark"
:content="`${$t('common.create')}${$t('views.role.customRole')}`"
placement="top"
>
<AppIcon iconName="app-copy"></AppIcon>
</el-button>
</el-tooltip>
<el-button
type="primary"
text
@click="createOrUpdateRole()"
v-hasPermission="
new ComplexPermission(
[RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
[PermissionConst.ROLE_CREATE.getWorkspacePermission],
[],
'OR',
)
"
>
<el-icon :size="18"><Plus /></el-icon>
</el-button>
</el-tooltip>
</div>
<common-list
:data="filterCustomRole"
@click="clickRole"
:default-active="currentRole?.id"
@mouseenter="mouseenter"
@mouseleave="mouseId = ''"
>
<template #default="{ row }">
<div class="flex-between">
<span>
{{ row.role_name }}
<span class="color-input-placeholder ml-4"
>({{ roleTypeMap[row.type as RoleTypeEnum] }})</span
>
</span>
<div @click.stop v-show="mouseId === row.id">
<el-dropdown :teleported="false">
<el-button text>
<el-icon class="color-secondary">
<MoreFilled />
</el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu style="min-width: 80px">
<el-dropdown-item @click.stop="createOrUpdateRole(row)" class="p-8">
<AppIcon iconName="app-copy"></AppIcon>
{{ $t('common.rename') }}
</el-dropdown-item>
<el-dropdown-item @click.stop="deleteRole(row)" class="border-t p-8">
<AppIcon iconName="app-copy"></AppIcon>
{{ $t('common.delete') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
<template #empty>
<span></span>
</template>
</common-list>
</div>
<common-list
:data="filterCustomRole"
@click="clickRole"
:default-active="currentRole?.id"
>
<template #default="{ row }">
<div class="flex-between">
<span>
{{ row.role_name }}
<span class="color-input-placeholder ml-4"
>({{ roleTypeMap[row.type as RoleTypeEnum] }})</span
>
</span>
<el-dropdown :teleported="false">
<el-button text>
<el-icon class="color-secondary">
<MoreFilled />
</el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu style="min-width: 80px">
<el-dropdown-item @click.stop="createOrUpdateRole(row)" class="p-8">
<AppIcon iconName="app-copy"></AppIcon>
{{ $t('common.rename') }}
</el-dropdown-item>
<el-dropdown-item @click.stop="deleteRole(row)" class="border-t p-8">
<AppIcon iconName="app-copy"></AppIcon>
{{ $t('common.delete') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<template #empty>
<span></span>
</template>
</common-list>
</el-scrollbar>
</div>
</div>
<!-- 右边 -->
<div class="role-right" v-loading="loading">
<div class="role-right w-full" v-loading="loading">
<div class="flex-between mb-16 p-24 pb-0">
<div class="flex align-center">
<span>
<h4>
{{ currentRole?.role_name }}
<span
v-if="currentRole?.type && !currentRole.internal"
class="color-input-placeholder ml-4"
>({{ roleTypeMap[currentRole?.type as RoleTypeEnum] }})
</span>
</h4>
<span
v-if="currentRole?.type && !currentRole.internal"
class="color-input-placeholder ml-4"
>({{ roleTypeMap[currentRole?.type as RoleTypeEnum] }})
</span>
<el-divider direction="vertical" class="mr-8 ml-8" />
<AppIcon
iconName="app-wordspace"
style="font-size: 16px"
class="color-input-placeholder"
></AppIcon>
<el-divider direction="vertical" />
<el-icon class="color-input-placeholder"><UserFilled /></el-icon>
<span class="color-input-placeholder ml-4">
{{ currentRole?.user_count }}
</span>
</div>
<el-radio-group v-model="currentTab">
<el-radio-group v-model="currentTab" class="app-radio-button-group">
<el-radio-button
v-for="item in tabList"
:key="item.value"
@ -250,51 +264,24 @@ const tabList = [
label: t('views.role.member.title'),
},
]
const mouseId = ref('')
function mouseenter(row: any) {
mouseId.value = row.id
}
</script>
<style lang="scss" scoped>
.role {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
box-sizing: border-box;
padding: 16px 24px;
:deep(.role-card) {
height: 100%;
overflow: hidden;
}
.role-manage {
.role-left {
box-sizing: border-box;
width: var(--setting-left-width);
min-width: var(--setting-left-width);
.role-left_title {
padding: 8px;
display: flex;
justify-content: space-between;
}
.list-height-left {
height: calc(100vh - 213px);
:deep(.common-list li) {
padding-right: 4px;
padding-left: 8px;
}
}
.role-left_divider {
padding: 0 8px;
:deep(.el-divider) {
margin: 4px 0;
}
}
}
.role-right {
flex: 1;
overflow: hidden;