feat(系统&组织): 系统组织用户组优化

This commit is contained in:
xinxin.wu 2024-10-18 14:06:39 +08:00 committed by Craftsman
parent 83fb392680
commit 629d402915
5 changed files with 77 additions and 60 deletions

View File

@ -11,7 +11,12 @@
:pagination="false"
>
<template #columns>
<a-table-column :width="100" :title="t('system.userGroup.function')" data-index="ability" />
<a-table-column
cell-class="auth-type-class"
:width="100"
:title="t('system.userGroup.function')"
data-index="ability"
/>
<a-table-column :width="150" :title="t('system.userGroup.operationObject')" data-index="operationObject" />
<a-table-column>
<template #title>
@ -56,7 +61,11 @@
</template>
</a-table>
</div>
<div v-if="props.showBottom" v-permission="props.savePermission || []" class="footer">
<div
v-if="props.showBottom && props.current.id !== 'admin'"
v-permission="props.savePermission || []"
class="footer"
>
<ms-button :disabled="!canSave" @click="handleReset">{{ t('system.userGroup.reset') }}</ms-button>
<a-button v-permission="props.savePermission || []" :disabled="!canSave" type="primary" @click="handleSave">
{{ t('system.userGroup.save') }}
@ -407,7 +416,7 @@
.group-auth-table {
@apply flex-1 overflow-hidden;
padding: 0 16px;
padding: 0 16px 16px;
:deep(.arco-table-container) {
border-top: 1px solid var(--color-text-n8) !important;
border-left: 1px solid var(--color-text-n8) !important;
@ -420,6 +429,9 @@
line-height: normal;
}
}
:deep(.auth-type-class) {
background-color: var(--color-text-n9);
}
.footer {
display: flex;
justify-content: flex-end;

View File

@ -69,8 +69,9 @@
<div
class="list-item-name one-line-text text-[var(--color-text-1)]"
:class="{ '!text-[rgb(var(--primary-5))]': element.id === currentId }"
>{{ element.name }}</div
>
{{ element.name }}
</div>
</a-tooltip>
<div
v-if="
@ -167,11 +168,35 @@
@cancel="handleRenameCancel(element)"
@submit="handleRenameCancel(element, element.id)"
>
<div class="flex max-w-[100%] grow flex-row items-center justify-between">
<a-tooltip
:content="
systemType === AuthScopeEnum.ORGANIZATION
? element.name +
<div class="flex w-full grow flex-row items-center justify-between">
<div class="flex w-[calc(100%-56px)] items-center gap-[4px]">
<a-tooltip
:content="
systemType === AuthScopeEnum.ORGANIZATION
? element.name +
`(${
element.internal
? t('common.internal')
: element.scopeId === 'global'
? t('common.system.custom')
: t('common.custom')
})`
: element.name
"
>
<div
:class="`list-item-name one-line-text text-[var(--color-text-1)] ${
systemType === AuthScopeEnum.ORGANIZATION ? 'max-w-[calc(100%-86px)]' : 'w-full'
} ${element.id === currentId ? 'text-[rgb(var(--primary-5))]' : ''}`"
>
{{ element.name }}
</div>
<!-- 系统内置 -->
<div
v-if="systemType === AuthScopeEnum.ORGANIZATION"
class="one-line-text ml-1 text-[var(--color-text-4)]"
>
{{
`(${
element.internal
? t('common.internal')
@ -179,28 +204,11 @@
? t('common.system.custom')
: t('common.custom')
})`
: element.name
"
>
<div
class="list-item-name one-line-text text-[var(--color-text-1)]"
:class="{ '!text-[rgb(var(--primary-5))]': element.id === currentId }"
>{{ element.name }}</div
>
<div
v-if="systemType === AuthScopeEnum.ORGANIZATION"
class="one-line-text ml-1 text-[var(--color-text-4)]"
>{{
`(${
element.internal
? t('common.internal')
: element.scopeId === 'global'
? t('common.system.custom')
: t('common.custom')
})`
}}</div
>
</a-tooltip>
}}
</div>
</a-tooltip>
</div>
<!-- 操作 -->
<div
v-if="
element.type === systemType ||

View File

@ -47,7 +47,7 @@
item.apiShareNum ? 'cursor-pointer hover:text-[rgb(var(--primary-5))]' : ''
}`"
:size="16"
@click="copyShareLink(item.id as string)"
@click="copyShareLink(item)"
/>
</a-tooltip>
</div>
@ -127,11 +127,14 @@
}
//
function copyShareLink(value: string) {
function copyShareLink(item: shareItem) {
if (!item.apiShareNum) {
return;
}
if (isSupported) {
// dId
const url = window.location.href;
const dIdParam = `&docShareId=${value}`;
const dIdParam = `&docShareId=${item.id}`;
copy(`${url}${dIdParam}`);
Message.success(t('apiTestManagement.shareUrlCopied'));
} else {

View File

@ -14,11 +14,15 @@
</div>
</template>
<template #second>
<div class="p-[16px]">
<div class="flex flex-row items-center justify-between">
<a-radio-group v-if="couldShowUser && couldShowAuth" v-model="currentTable" class="ml-[14px]" type="button">
<a-radio v-if="couldShowAuth" value="auth">{{ t('system.userGroup.auth') }}</a-radio>
<a-radio v-if="couldShowUser" value="user">{{ t('system.userGroup.user') }}</a-radio>
<div>
<div class="flex flex-row items-center justify-between p-[16px]">
<a-radio-group v-if="couldShowUser && couldShowAuth" v-model="currentTable" size="medium" type="button">
<a-radio v-if="couldShowAuth" value="auth" class="show-type-icon p-[2px]">
{{ t('system.userGroup.auth') }}
</a-radio>
<a-radio v-if="couldShowUser" value="user" class="show-type-icon p-[2px]">
{{ t('system.userGroup.user') }}
</a-radio>
</a-radio-group>
<div class="flex items-center">
<a-input-search
@ -32,7 +36,7 @@
></a-input-search>
</div>
</div>
<div class="mt-[16px]">
<div>
<UserTable
v-if="currentTable === 'user' && couldShowUser"
ref="userRef"

View File

@ -13,10 +13,11 @@
</template>
<template #second>
<div class="flex h-full flex-col overflow-hidden pt-[16px]">
<div class="mb-4 flex flex-row items-center justify-between px-[16px]">
<a-tooltip :content="currentUserGroupItem.name">
<div class="one-line-text max-w-[300px] font-medium">{{ currentUserGroupItem.name }}</div>
</a-tooltip>
<div class="flex flex-row items-center justify-between px-[16px]">
<a-radio-group v-if="couldShowUser" v-model="currentTable" class="mb-[16px]" type="button" size="medium">
<a-radio value="auth" class="show-type-icon p-[2px]">{{ t('system.userGroup.auth') }}</a-radio>
<a-radio value="user" class="show-type-icon p-[2px]">{{ t('system.userGroup.user') }}</a-radio>
</a-radio-group>
<div class="flex items-center">
<a-input-search
v-if="currentTable === 'user'"
@ -26,21 +27,12 @@
@press-enter="handleEnter"
@search="handleSearch"
@clear="handleSearch('')"
></a-input-search>
<a-radio-group
v-if="couldShowUser && couldShowAuth"
v-model="currentTable"
class="ml-[14px]"
type="button"
>
<a-radio v-if="couldShowAuth" value="auth">{{ t('system.userGroup.auth') }}</a-radio>
<a-radio v-if="couldShowUser" value="user">{{ t('system.userGroup.user') }}</a-radio>
</a-radio-group>
/>
</div>
</div>
<div class="flex-1 overflow-hidden">
<UserTable
v-if="currentTable === 'user' && couldShowUser"
v-if="currentTable === 'user'"
ref="userRef"
:keyword="currentKeyword"
:current="currentUserGroupItem"
@ -49,7 +41,7 @@
:update-permission="['SYSTEM_USER_ROLE:READ+UPDATE']"
/>
<AuthTable
v-if="currentTable === 'auth' && couldShowAuth"
v-if="currentTable === 'auth'"
:current="currentUserGroupItem"
:save-permission="['SYSTEM_USER_ROLE:READ+UPDATE']"
:disabled="!hasAnyPermission(['SYSTEM_USER_ROLE:READ+UPDATE'])"
@ -127,7 +119,6 @@
};
const couldShowUser = computed(() => currentUserGroupItem.value.type === AuthScopeEnum.SYSTEM);
const couldShowAuth = computed(() => currentUserGroupItem.value.id !== 'admin');
const handleCollapse = (collapse: boolean) => {
leftCollapse.value = collapse;
if (collapse) {
@ -138,14 +129,13 @@
}
};
watchEffect(() => {
if (!couldShowAuth.value) {
currentTable.value = 'user';
} else if (!couldShowUser.value) {
if (!couldShowUser.value) {
currentTable.value = 'auth';
} else {
currentTable.value = 'auth';
}
});
onMounted(() => {
ugLeftRef.value?.initData(router.currentRoute.value.query.id as string, true);
});