From 779518ee7d658c01f04689575afb526a4db109ca Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Fri, 6 Dec 2024 15:25:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(roles):=20=E5=A2=9E=E5=8A=A0=E8=A7=92?=
 =?UTF-8?q?=E8=89=B2=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vben5/packages/@abp/identity/package.json |  1 +
 .../src/components/roles/RoleTable.vue        | 78 +++++++++++++++++--
 .../permissions/PermissionModal.vue           | 33 ++++++--
 3 files changed, 100 insertions(+), 12 deletions(-)

diff --git a/apps/vben5/packages/@abp/identity/package.json b/apps/vben5/packages/@abp/identity/package.json
index 237482ec3..0a1fad4a5 100644
--- a/apps/vben5/packages/@abp/identity/package.json
+++ b/apps/vben5/packages/@abp/identity/package.json
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@abp/core": "workspace:*",
+    "@abp/permission": "workspace:*",
     "@abp/request": "workspace:*",
     "@abp/ui": "workspace:*",
     "@ant-design/icons-vue": "catalog:",
diff --git a/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue b/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue
index 6be353eb4..5c8eb2a96 100644
--- a/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue
@@ -1,16 +1,25 @@
 <script setup lang="ts">
 import type { VbenFormProps, VxeGridListeners, VxeGridProps } from '@abp/ui';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 
 import type { IdentityRoleDto } from '../../types/roles';
 
 import { defineAsyncComponent, h } from 'vue';
 
+import { useAccess } from '@vben/access';
 import { useVbenModal } from '@vben/common-ui';
+import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
+import { useAbpStore } from '@abp/core';
+import { PermissionModal } from '@abp/permission';
 import { useVbenVxeGrid } from '@abp/ui';
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
-import { Button, Modal, Tag } from 'ant-design-vue';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  EllipsisOutlined,
+} from '@ant-design/icons-vue';
+import { Button, Dropdown, Menu, Modal, Tag } from 'ant-design-vue';
 
 import { deleteApi, getPagedListApi } from '../../api/roles';
 
@@ -18,8 +27,18 @@ defineOptions({
   name: 'RoleTable',
 });
 
+const MenuItem = Menu.Item;
+const MenuOutlined = createIconifyIcon('heroicons-outline:menu-alt-3');
+const ClaimOutlined = createIconifyIcon('la:id-card-solid');
+const PermissionsOutlined = createIconifyIcon('icon-park-outline:permissions');
 const RoleModal = defineAsyncComponent(() => import('./RoleModal.vue'));
 
+const abpStore = useAbpStore();
+const { hasAccessByCodes } = useAccess();
+const [RolePermissionModal, permissionModalApi] = useVbenModal({
+  connectedComponent: PermissionModal,
+});
+
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: false,
@@ -50,7 +69,7 @@ const gridOptions: VxeGridProps<IdentityRoleDto> = {
       fixed: 'right',
       slots: { default: 'action' },
       title: $t('AbpUi.Actions'),
-      width: 180,
+      width: 220,
     },
   ],
   exportConfig: {},
@@ -113,6 +132,22 @@ const handleDelete = (row: IdentityRoleDto) => {
     title: $t('AbpUi.AreYouSure'),
   });
 };
+
+const handleMenuClick = async (row: IdentityRoleDto, info: MenuInfo) => {
+  switch (info.key) {
+    case 'permissions': {
+      const roles = abpStore.application?.currentUser.roles ?? [];
+      permissionModalApi.setData({
+        displayName: row.name,
+        providerKey: row.name,
+        providerName: 'R',
+        readonly: roles.includes(row.name),
+      });
+      permissionModalApi.open();
+      break;
+    }
+  }
+};
 </script>
 
 <template>
@@ -140,7 +175,7 @@ const handleDelete = (row: IdentityRoleDto) => {
     </template>
     <template #action="{ row }">
       <div class="flex flex-row">
-        <div class="basis-1/2">
+        <div class="basis-1/3">
           <Button
             :icon="h(EditOutlined)"
             block
@@ -151,7 +186,7 @@ const handleDelete = (row: IdentityRoleDto) => {
             {{ $t('AbpUi.Edit') }}
           </Button>
         </div>
-        <div class="basis-1/2">
+        <div class="basis-1/3">
           <Button
             :icon="h(DeleteOutlined)"
             block
@@ -163,10 +198,43 @@ const handleDelete = (row: IdentityRoleDto) => {
             {{ $t('AbpUi.Delete') }}
           </Button>
         </div>
+        <div class="basis-1/3">
+          <Dropdown>
+            <template #overlay>
+              <Menu @click="(info) => handleMenuClick(row, info)">
+                <MenuItem
+                  v-if="
+                    hasAccessByCodes(['AbpIdentity.Roles.ManagePermissions'])
+                  "
+                  key="permissions"
+                  :icon="h(PermissionsOutlined)"
+                >
+                  {{ $t('AbpPermissionManagement.Permissions') }}
+                </MenuItem>
+                <MenuItem
+                  v-if="hasAccessByCodes(['AbpIdentity.Roles.ManageClaims'])"
+                  key="claims"
+                  :icon="h(ClaimOutlined)"
+                >
+                  {{ $t('AbpIdentity.ManageClaim') }}
+                </MenuItem>
+                <MenuItem
+                  v-if="hasAccessByCodes(['Platform.Menu.ManageRoles'])"
+                  key="menus"
+                  :icon="h(MenuOutlined)"
+                >
+                  {{ $t('AppPlatform.Menu:Manage') }}
+                </MenuItem>
+              </Menu>
+            </template>
+            <Button :icon="h(EllipsisOutlined)" type="link" />
+          </Dropdown>
+        </div>
       </div>
     </template>
   </Grid>
   <RoleEditModal @change="() => query()" />
+  <RolePermissionModal />
 </template>
 
 <style lang="scss" scoped>
diff --git a/apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue b/apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue
index f6c969593..014d2cbae 100644
--- a/apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue
+++ b/apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue
@@ -113,15 +113,24 @@ const [Modal, modalApi] = useVbenModal({
     if (isOpen) {
       const state = modalApi.getData<ModalState>();
       modelState.value = state;
-      const dto = await getApi({
-        providerKey: state.providerKey,
-        providerName: state.providerName,
-      });
       modalApi.setState({
-        title: `${$t('AbpPermissionManagement.Permissions')} - ${state.displayName ?? dto.entityDisplayName}`,
+        loading: true,
       });
-      permissionTree.value = generatePermissionTree(dto.groups);
-      checkedNodeKeys.value = getGrantedPermissionKeys(permissionTree.value);
+      try {
+        const dto = await getApi({
+          providerKey: state.providerKey,
+          providerName: state.providerName,
+        });
+        modalApi.setState({
+          title: `${$t('AbpPermissionManagement.Permissions')} - ${state.displayName ?? dto.entityDisplayName}`,
+        });
+        permissionTree.value = generatePermissionTree(dto.groups);
+        checkedNodeKeys.value = getGrantedPermissionKeys(permissionTree.value);
+      } finally {
+        modalApi.setState({
+          loading: false,
+        });
+      }
     }
   },
   title: $t('AbpPermissionManagement.Permissions'),
@@ -155,6 +164,15 @@ function onCheckNodeAll(e: CheckboxChangeEvent, permission: PermissionTree) {
   permission.isGranted = e.target.checked;
 }
 
+function onExpandNode(_keys: any, info: { node: EventDataNode }) {
+  const nodeKey = String(info.node.key);
+  const index = expandNodeKeys.value.indexOf(nodeKey);
+  expandNodeKeys.value =
+    index === -1
+      ? [...expandNodeKeys.value, nodeKey]
+      : expandNodeKeys.value.filter((key) => key !== nodeKey);
+}
+
 function onSelectNode(
   _: any,
   info: {
@@ -275,6 +293,7 @@ function getChildren(permissions: PermissionTree[]): PermissionTree[] {
                   }"
                   :tree-data="permission.children"
                   @check="(keys, info) => onCheckNode(permission, keys, info)"
+                  @expand="onExpandNode"
                   @select="onSelectNode"
                 />
               </div>