add entrance transition
This commit is contained in:
Timi
@@ -7,24 +7,25 @@
|
||||
@refresh="refresh"
|
||||
>
|
||||
<div class="content">
|
||||
<t-cell-group class="header" theme="card">
|
||||
<t-cell title="当前账号角色聚合权限 P">
|
||||
<template #description>
|
||||
<div>你拥有以下权限，可执行权限对应的功能，这些权限来自上级角色直接授权或子角色继承。</div>
|
||||
<permission-legend />
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<t-cell-group v-entrance-transition class="header" theme="card">
|
||||
<t-cell title="当前账号角色聚合权限 P">
|
||||
<template #description>
|
||||
<div>你拥有以下权限，可执行权限对应的功能，这些权限来自上级角色直接授权或子角色继承。</div>
|
||||
<permission-legend />
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<t-cell-group v-if="sortedPermissions.length" theme="card">
|
||||
<t-swipe-cell
|
||||
v-for="item in sortedPermissions"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
>
|
||||
<permission-cell :permission="item" :source="item.source" />
|
||||
</t-swipe-cell>
|
||||
<t-swipe-cell
|
||||
v-entrance-transition="index * 30"
|
||||
v-for="(item, index) in sortedPermissions"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
>
|
||||
<permission-cell :permission="item" :source="item.source" />
|
||||
</t-swipe-cell>
|
||||
</t-cell-group>
|
||||
<t-empty v-else-if="!permissionStore.loading && !isSourceLoading" description="暂无权限" />
|
||||
<t-empty v-if="!permissionStore.loading && !isSourceLoading" description="暂无权限" />
|
||||
</div>
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
|
||||
@@ -57,20 +57,20 @@
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<t-cell-group title="当前角色结构" theme="card">
|
||||
<t-cell
|
||||
v-can="{ value: [corePermissionCodes.role.read, corePermissionCodes.permission.read], mode: 'and' }"
|
||||
v-for="item in visibleRoleTree"
|
||||
:key="item.id"
|
||||
:arrow="canAssignRole(item)"
|
||||
:hover="canAssignRole(item)"
|
||||
@click="canAssignRole(item) && toAssign(item.id)"
|
||||
>
|
||||
<template #title>
|
||||
<div class="title" v-text="item.name" :style="{ paddingLeft: `${item.level * 1.25}rem` }" />
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<t-cell-group v-entrance-transition title="当前角色结构" theme="card">
|
||||
<t-cell
|
||||
v-can="{ value: [corePermissionCodes.role.read, corePermissionCodes.permission.read], mode: 'and' }"
|
||||
v-for="item in visibleRoleTree"
|
||||
:key="item.id"
|
||||
:arrow="canAssignRole(item)"
|
||||
:hover="canAssignRole(item)"
|
||||
@click="canAssignRole(item) && toAssign(item.id)"
|
||||
>
|
||||
<template #title>
|
||||
<div class="title" v-text="item.name" :style="{ paddingLeft: `${item.level * 1.25}rem` }" />
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -181,4 +181,3 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -19,22 +19,23 @@
|
||||
title="允许该角色可继续往下级角色转授权限"
|
||||
theme="card"
|
||||
>
|
||||
<t-cell
|
||||
v-for="item in grantablePermissionList"
|
||||
:key="item.id"
|
||||
:title="item.name || item.code"
|
||||
>
|
||||
<template #description>
|
||||
<span class="code" v-text="item.code"></span>
|
||||
</template>
|
||||
<template #right-icon>
|
||||
<t-switch
|
||||
:disabled="!canUpdateRolePermission || !canEditActiveRole"
|
||||
:model-value="isPermissionChecked(item.id)"
|
||||
@change="value => setPermissionChecked(item.id, value === true)"
|
||||
/>
|
||||
</template>
|
||||
</t-cell>
|
||||
<t-cell
|
||||
v-entrance-transition="index * 30"
|
||||
v-for="(item, index) in grantablePermissionList"
|
||||
:key="item.id"
|
||||
:title="item.name || item.code"
|
||||
>
|
||||
<template #description>
|
||||
<span class="code" v-text="item.code"></span>
|
||||
</template>
|
||||
<template #right-icon>
|
||||
<t-switch
|
||||
:disabled="!canUpdateRolePermission || !canEditActiveRole"
|
||||
:model-value="isPermissionChecked(item.id)"
|
||||
@change="value => setPermissionChecked(item.id, value === true)"
|
||||
/>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<t-empty v-else-if="!permissionStore.loading" description="暂无可配置的转授权限 D" />
|
||||
</div>
|
||||
|
||||
@@ -1,57 +1,56 @@
|
||||
<template>
|
||||
<div v-can="pageAccess" class="role-edit">
|
||||
<t-form class="form" label-align="left">
|
||||
<t-form-item label="名称">
|
||||
<t-input v-model.trim="formModel.name" placeholder="角色名称" borderless :disabled="!canEditRoleInfo" />
|
||||
</t-form-item>
|
||||
<t-form-item label="代码" :help="isBuiltinRole ? '内建角色代码不可修改' : ''">
|
||||
<t-input v-model.trim="formModel.code" placeholder="如 front-desk" borderless :disabled="!canEditRoleCode" />
|
||||
</t-form-item>
|
||||
<t-form-item label="模块">
|
||||
<t-input v-model.trim="formModel.moduleCode" placeholder="模块代码" borderless disabled />
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="上级"
|
||||
:arrow="canEditParentRole"
|
||||
@click.stop="openParentRolePicker"
|
||||
>
|
||||
<div class="picker-text" v-text="selectedParentRoleName" />
|
||||
</t-form-item>
|
||||
<t-form-item label="说明">
|
||||
<t-textarea v-model.trim="formModel.description" class="textarea" placeholder="角色说明" autosize borderless :disabled="!canEditRoleInfo" />
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="继承角色"
|
||||
:arrow="canEditRoleRelation"
|
||||
@click.stop="openChildRolePicker"
|
||||
>
|
||||
<div class="picker-text" v-text="selectedChildRoleName" />
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<t-cell-group v-if="!isCreateMode" title="权限授权" theme="card">
|
||||
<t-cell
|
||||
v-can="rolePermissionReadAccess"
|
||||
title="直接授权权限 P"
|
||||
arrow
|
||||
@click="toRolePermissionPage"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<t-icon name="secured" size="1.5rem" />
|
||||
</template>
|
||||
</t-cell>
|
||||
<t-cell
|
||||
v-can="rolePermissionReadAccess"
|
||||
title="可转授权限 D"
|
||||
arrow
|
||||
@click="toRoleDelegationPage"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<t-icon name="user-checked" size="1.5rem" />
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<template v-if="aggregatePermissionList.length">
|
||||
<card-container title="聚合权限 P">
|
||||
<t-form v-entrance-transition class="form" label-align="left">
|
||||
<t-form-item label="名称">
|
||||
<t-input v-model.trim="formModel.name" placeholder="角色名称" borderless :disabled="!canEditRoleInfo" />
|
||||
</t-form-item>
|
||||
<t-form-item label="代码" :help="isBuiltinRole ? '内建角色代码不可修改' : ''">
|
||||
<t-input v-model.trim="formModel.code" placeholder="如 front-desk" borderless :disabled="!canEditRoleCode" />
|
||||
</t-form-item>
|
||||
<t-form-item label="模块">
|
||||
<t-input v-model.trim="formModel.moduleCode" placeholder="模块代码" borderless disabled />
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="上级"
|
||||
:arrow="canEditParentRole"
|
||||
@click.stop="openParentRolePicker"
|
||||
>
|
||||
<div class="picker-text" v-text="selectedParentRoleName" />
|
||||
</t-form-item>
|
||||
<t-form-item label="说明">
|
||||
<t-textarea v-model.trim="formModel.description" class="textarea" placeholder="角色说明" autosize borderless :disabled="!canEditRoleInfo" />
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="继承角色"
|
||||
:arrow="canEditRoleRelation"
|
||||
@click.stop="openChildRolePicker"
|
||||
>
|
||||
<div class="picker-text" v-text="selectedChildRoleName" />
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<t-cell-group v-entrance-transition="70" v-if="!isCreateMode" title="权限授权" theme="card">
|
||||
<t-cell
|
||||
v-can="rolePermissionReadAccess"
|
||||
title="直接授权权限 P"
|
||||
arrow
|
||||
@click="toRolePermissionPage"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<t-icon name="secured" size="1.5rem" />
|
||||
</template>
|
||||
</t-cell>
|
||||
<t-cell
|
||||
v-can="rolePermissionReadAccess"
|
||||
title="可转授权限 D"
|
||||
arrow
|
||||
@click="toRoleDelegationPage"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<t-icon name="user-checked" size="1.5rem" />
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<card-container v-entrance-transition="140" v-if="aggregatePermissionList.length" title="聚合权限 P">
|
||||
<template #description>
|
||||
<div>该角色拥有以下权限，可执行权限对应的功能，这些权限来自上级角色直接授权或子角色继承。</div>
|
||||
<permission-legend />
|
||||
@@ -65,7 +64,6 @@
|
||||
/>
|
||||
</t-cell-group>
|
||||
</card-container>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<t-popup v-model="parentRolePickerVisible" placement="bottom">
|
||||
|
||||
@@ -7,26 +7,27 @@
|
||||
@refresh="refresh"
|
||||
>
|
||||
<t-cell-group v-if="sortedRoles.length" theme="card">
|
||||
<t-swipe-cell
|
||||
v-for="item in sortedRoles"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
>
|
||||
<t-cell
|
||||
:title="item.name"
|
||||
:note="item.code"
|
||||
arrow
|
||||
hover
|
||||
@click="router.push(`/management/permissions/roles/${item.id}`)"
|
||||
<t-swipe-cell
|
||||
v-entrance-transition="index * 30"
|
||||
v-for="(item, index) in sortedRoles"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
>
|
||||
<template #title>
|
||||
<div class="title" v-text="item.name" :style="{ paddingLeft: `${item.level * 1.25}rem` }" />
|
||||
<t-cell
|
||||
:title="item.name"
|
||||
:note="item.code"
|
||||
arrow
|
||||
hover
|
||||
@click="router.push(`/management/permissions/roles/${item.id}`)"
|
||||
>
|
||||
<template #title>
|
||||
<div class="title" v-text="item.name" :style="{ paddingLeft: `${item.level * 1.25}rem` }" />
|
||||
</template>
|
||||
</t-cell>
|
||||
<template #right>
|
||||
<t-button v-if="canDeleteRole(item)" v-can="corePermissionCodes.role.delete" class="delete" theme="danger" @click="removeRole(item.id)">删除</t-button>
|
||||
</template>
|
||||
</t-cell>
|
||||
<template #right>
|
||||
<t-button v-if="canDeleteRole(item)" v-can="corePermissionCodes.role.delete" class="delete" theme="danger" @click="removeRole(item.id)">删除</t-button>
|
||||
</template>
|
||||
</t-swipe-cell>
|
||||
</t-swipe-cell>
|
||||
</t-cell-group>
|
||||
<t-empty v-else-if="!permissionStore.loading" description="暂无角色" />
|
||||
</t-pull-down-refresh>
|
||||
|
||||
@@ -24,21 +24,22 @@
|
||||
class="list"
|
||||
theme="card"
|
||||
>
|
||||
<t-cell
|
||||
:class="{ inherited: isPermissionInherited(item.id) }"
|
||||
v-for="item in grantablePermissionList"
|
||||
:key="item.id"
|
||||
:title="item.name"
|
||||
:description="item.code"
|
||||
>
|
||||
<template #right-icon>
|
||||
<t-switch
|
||||
:disabled="!canUpdateRolePermission || !canEditActiveRole || isPermissionInherited(item.id)"
|
||||
:model-value="isPermissionEnabled(item.id)"
|
||||
@change="value => setPermissionChecked(item.id, value === true)"
|
||||
/>
|
||||
</template>
|
||||
</t-cell>
|
||||
<t-cell
|
||||
v-entrance-transition="index * 30"
|
||||
v-for="(item, index) in grantablePermissionList"
|
||||
:key="item.id"
|
||||
:class="{ inherited: isPermissionInherited(item.id) }"
|
||||
:title="item.name"
|
||||
:description="item.code"
|
||||
>
|
||||
<template #right-icon>
|
||||
<t-switch
|
||||
:disabled="!canUpdateRolePermission || !canEditActiveRole || isPermissionInherited(item.id)"
|
||||
:model-value="isPermissionEnabled(item.id)"
|
||||
@change="value => setPermissionChecked(item.id, value === true)"
|
||||
/>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<t-empty v-else-if="!permissionStore.loading" description="暂无可配置的直接权限 P" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user