|
|
|
@ -353,6 +353,22 @@ const roleLoading = ref(false); |
|
|
|
const roleList = ref<RoleVO[]>([]); |
|
|
|
const roleTableRef = ref<InstanceType<typeof import('element-plus')['ElTable']>>(); |
|
|
|
const currentRoleUser = ref<{ userId: number; fullname: string }>({ userId: 0, fullname: '' }); |
|
|
|
const roleSearchKeyword = ref(''); |
|
|
|
|
|
|
|
/** 根据搜索关键词过滤角色列表 */ |
|
|
|
const filteredRoleList = computed(() => { |
|
|
|
const keyword = roleSearchKeyword.value.trim(); |
|
|
|
if (!keyword) return roleList.value; |
|
|
|
return roleList.value.filter((role) => role.roleName?.includes(keyword) || role.roleKey?.includes(keyword)); |
|
|
|
}); |
|
|
|
|
|
|
|
/** 高亮角色名称中匹配的文字 */ |
|
|
|
const highlightRoleName = (name: string | undefined) => { |
|
|
|
if (!name) return ''; |
|
|
|
const keyword = roleSearchKeyword.value.trim(); |
|
|
|
if (!keyword) return name; |
|
|
|
return name.replace(new RegExp(`(${keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'g'), '<span class="search-match">$1</span>'); |
|
|
|
}; |
|
|
|
|
|
|
|
/** 打开分配角色对话框 */ |
|
|
|
const handleAuthRole = async (row: UnitUserVo) => { |
|
|
|
@ -537,21 +553,32 @@ const submitResetPwd = async () => { |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 分配角色对话框 --> |
|
|
|
<el-dialog v-model="roleDialogVisible" title="分配角色" width="600px" append-to-body> |
|
|
|
<div style="margin-bottom: 12px;"> |
|
|
|
<el-dialog v-model="roleDialogVisible" title="分配角色" width="860px" append-to-body @close="roleSearchKeyword = ''"> |
|
|
|
<div style="margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between;"> |
|
|
|
<span>当前用户:<strong>{{ currentRoleUser.fullname }}</strong></span> |
|
|
|
<el-input |
|
|
|
v-model="roleSearchKeyword" |
|
|
|
placeholder="搜索角色名称" |
|
|
|
:prefix-icon="Search" |
|
|
|
clearable |
|
|
|
style="width: 220px;" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<el-table |
|
|
|
ref="roleTableRef" |
|
|
|
v-loading="roleLoading" |
|
|
|
:data="roleList" |
|
|
|
:data="filteredRoleList" |
|
|
|
border |
|
|
|
row-key="roleId" |
|
|
|
max-height="400px" |
|
|
|
@row-click="(row: RoleVO) => { if (row.status === '0') roleTableRef?.toggleRowSelection(row) }" |
|
|
|
> |
|
|
|
<el-table-column type="selection" width="55" :selectable="(row: RoleVO) => row.status === '0'" /> |
|
|
|
<el-table-column label="角色名称" align="center" prop="roleName" /> |
|
|
|
<el-table-column label="角色名称" align="center"> |
|
|
|
<template #default="{ row }"> |
|
|
|
<span v-html="highlightRoleName(row.roleName)"></span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="权限字符" align="center" prop="roleKey" /> |
|
|
|
<el-table-column label="状态" align="center" width="80"> |
|
|
|
<template #default="{ row }"> |
|
|
|
|