From 598921eb3618601364b8d8b8c339d33012050a0e Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Sat, 9 Apr 2022 14:21:42 +0800
Subject: [PATCH] Improve user permission readability

---
 .../components/Permission/src/PermissionModal.vue    | 12 ++++++++++--
 .../components/Permission/src/types/permission.ts    |  1 +
 .../src/views/identity/user/components/UserTable.vue |  2 +-
 .../src/views/identity/user/hooks/usePermission.ts   |  3 ++-
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/vue/src/components/Permission/src/PermissionModal.vue b/apps/vue/src/components/Permission/src/PermissionModal.vue
index 44d3fd3d1..434b9e34c 100644
--- a/apps/vue/src/components/Permission/src/PermissionModal.vue
+++ b/apps/vue/src/components/Permission/src/PermissionModal.vue
@@ -2,7 +2,7 @@
   <BasicModal
     v-bind="$attrs"
     @register="registerModal"
-    :title="title"
+    :title="getIdentity"
     :width="800"
     :min-height="600"
     @ok="handleSubmit"
@@ -57,7 +57,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { computed, defineComponent, ref } from 'vue';
   import { message } from 'ant-design-vue';
   import { Card, Checkbox, Col, Divider, Row, Tabs } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
@@ -70,6 +70,7 @@
     providerName: 'G',
     providerKey: '',
     readonly: false,
+    identity: '',
   };
 
   export default defineComponent({
@@ -107,6 +108,12 @@
       const [registerModal, { closeModal, changeOkLoading }] = useModalInner((val) => {
         model.value = val;
       });
+      const getIdentity = computed(() => {
+        if (model.value.identity) {
+          return `${L('Permissions')} - ${model.value.identity}`;
+        }
+        return title.value;
+      })
 
       function handleVisibleChange(visible: boolean) {
         if (!visible) {
@@ -130,6 +137,7 @@
         L,
         activeKey,
         title,
+        getIdentity,
         permissionTab,
         permissionTree,
         permissionGrantKeys,
diff --git a/apps/vue/src/components/Permission/src/types/permission.ts b/apps/vue/src/components/Permission/src/types/permission.ts
index c07d5d0c3..a44a8b398 100644
--- a/apps/vue/src/components/Permission/src/types/permission.ts
+++ b/apps/vue/src/components/Permission/src/types/permission.ts
@@ -2,6 +2,7 @@ export interface PermissionProps {
   providerName: string;
   providerKey?: string;
   readonly: boolean;
+  identity?: string;
 }
 
 export interface PermissionTree {
diff --git a/apps/vue/src/views/identity/user/components/UserTable.vue b/apps/vue/src/views/identity/user/components/UserTable.vue
index 80b6c40bc..7b91a3d40 100644
--- a/apps/vue/src/views/identity/user/components/UserTable.vue
+++ b/apps/vue/src/views/identity/user/components/UserTable.vue
@@ -58,7 +58,7 @@
             {
               auth: 'AbpIdentity.Users.ManagePermissions',
               label: L('Permissions'),
-              onClick: showPermissionModal.bind(null, record.id),
+              onClick: showPermissionModal.bind(null, record.id, record.userName),
             },
             {
               auth: 'AbpIdentity.Users.ManageClaims',
diff --git a/apps/vue/src/views/identity/user/hooks/usePermission.ts b/apps/vue/src/views/identity/user/hooks/usePermission.ts
index 2903c0bb6..ce1599a34 100644
--- a/apps/vue/src/views/identity/user/hooks/usePermission.ts
+++ b/apps/vue/src/views/identity/user/hooks/usePermission.ts
@@ -4,12 +4,13 @@ import { useUserStoreWithOut } from '/@/store/modules/user';
 export function usePermission() {
   const [registerModel, { openModal }] = useModal();
 
-  function showPermissionModal(userId: string) {
+  function showPermissionModal(userId: string, userName: string) {
     const userStore = useUserStoreWithOut();
     const props = {
       providerName: 'U',
       providerKey: userId,
       readonly: userStore.getUserInfo.userId === userId,
+      identity: userName,
     };
     openModal(true, props, true);
   }