feat(users): 增加用户权限

apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue

@@ -237,9 +237,4 @@ const handleMenuClick = async (row: IdentityRoleDto, info: MenuInfo) => {
   <RolePermissionModal />
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.checkbox-box {
-  display: flex;
-  justify-content: center;
-}
-</style>

apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue

@@ -1,18 +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 { IdentityUserDto } from '../../types/users';
 
 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 { formatToDateTime } from '@abp/core';
+import { formatToDateTime, useAbpStore } from '@abp/core';
+import { PermissionModal } from '@abp/permission';
 import { useVbenVxeGrid } from '@abp/ui';
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
+import {
-import { Button, Modal } from 'ant-design-vue';
+  DeleteOutlined,
+  EditOutlined,
+  EllipsisOutlined,
+} from '@ant-design/icons-vue';
+import { Button, Dropdown, Menu, Modal } from 'ant-design-vue';
 
 import { deleteApi, getPagedListApi } from '../../api/users';
 
@@ -21,8 +28,19 @@ defineOptions({
 });
 
 const UserModal = defineAsyncComponent(() => import('./UserModal.vue'));
+
+const MenuItem = Menu.Item;
 const CheckIcon = createIconifyIcon('ant-design:check-outlined');
 const CloseIcon = createIconifyIcon('ant-design:close-outlined');
+const MenuOutlined = createIconifyIcon('heroicons-outline:menu-alt-3');
+const ClaimOutlined = createIconifyIcon('la:id-card-solid');
+const PermissionsOutlined = createIconifyIcon('icon-park-outline:permissions');
+const [UserPermissionModal, permissionModalApi] = useVbenModal({
+  connectedComponent: PermissionModal,
+});
+
+const abpStore = useAbpStore();
+const { hasAccessByCodes } = useAccess();
 
 const formOptions: VbenFormProps = {
   // 默认展开
@@ -73,7 +91,7 @@ const gridOptions: VxeGridProps<IdentityUserDto> = {
       fixed: 'right',
       slots: { default: 'action' },
       title: $t('AbpUi.Actions'),
-      width: 180,
+      width: 220,
     },
   ],
   exportConfig: {},
@@ -136,6 +154,22 @@ const handleDelete = (row: IdentityUserDto) => {
     title: $t('AbpUi.AreYouSure'),
   });
 };
+
+const handleMenuClick = async (row: IdentityUserDto, info: MenuInfo) => {
+  switch (info.key) {
+    case 'permissions': {
+      const userId = abpStore.application?.currentUser.id;
+      permissionModalApi.setData({
+        displayName: row.userName,
+        providerKey: row.id,
+        providerName: 'U',
+        readonly: userId === row.id,
+      });
+      permissionModalApi.open();
+      break;
+    }
+  }
+};
 </script>
 
 <template>
@@ -150,14 +184,16 @@ const handleDelete = (row: IdentityUserDto) => {
       </Button>
     </template>
     <template #active="{ row }">
-      <div class="active-box">
+      <div class="flex flex-row justify-center">
-        <CheckIcon v-if="row.isActive" class="actived" />
+        <div :class="row.isActive ? 'text-green-600' : 'text-red-600'">
-        <CloseIcon v-else />
+          <CheckIcon v-if="row.isActive" />
+          <CloseIcon v-else />
+        </div>
       </div>
     </template>
     <template #action="{ row }">
       <div class="flex flex-row">
-        <div class="basis-1/2">
+        <div class="basis-1/3">
           <Button
             :icon="h(EditOutlined)"
             block
@@ -168,7 +204,7 @@ const handleDelete = (row: IdentityUserDto) => {
             {{ $t('AbpUi.Edit') }}
           </Button>
         </div>
-        <div class="basis-1/2">
+        <div class="basis-1/3">
           <Button
             :icon="h(DeleteOutlined)"
             block
@@ -180,20 +216,43 @@ const handleDelete = (row: IdentityUserDto) => {
             {{ $t('AbpUi.Delete') }}
           </Button>
         </div>
+        <div class="basis-1/3">
+          <Dropdown>
+            <template #overlay>
+              <Menu @click="(info) => handleMenuClick(row, info)">
+                <MenuItem
+                  v-if="
+                    hasAccessByCodes(['AbpIdentity.Users.ManagePermissions'])
+                  "
+                  key="permissions"
+                  :icon="h(PermissionsOutlined)"
+                >
+                  {{ $t('AbpPermissionManagement.Permissions') }}
+                </MenuItem>
+                <MenuItem
+                  v-if="hasAccessByCodes(['AbpIdentity.Users.ManageClaims'])"
+                  key="claims"
+                  :icon="h(ClaimOutlined)"
+                >
+                  {{ $t('AbpIdentity.ManageClaim') }}
+                </MenuItem>
+                <MenuItem
+                  v-if="hasAccessByCodes(['Platform.Menu.ManageUsers'])"
+                  key="menus"
+                  :icon="h(MenuOutlined)"
+                >
+                  {{ $t('AppPlatform.Menu:Manage') }}
+                </MenuItem>
+              </Menu>
+            </template>
+            <Button :icon="h(EllipsisOutlined)" type="link" />
+          </Dropdown>
+        </div>
       </div>
     </template>
   </Grid>
   <UserEditModal @change="() => query()" />
+  <UserPermissionModal />
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.active-box {
-  display: flex;
-  justify-content: center;
-  color: red;
-
-  .actived {
-    color: green;
-  }
-}
-</style>

apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue

@@ -74,6 +74,7 @@ const getPermissionNodeState = computed(() => {
 });
 
 const [Modal, modalApi] = useVbenModal({
+  centered: true,
   class: 'w-1/2',
   closeOnClickModal: false,
   closeOnPressEscape: false,
@@ -307,10 +308,10 @@ function getChildren(permissions: PermissionTree[]): PermissionTree[] {
 
 <style lang="scss" scoped>
 :deep(.ant-tabs) {
-  max-height: 34rem;
+  height: 34rem;
 
   .ant-tabs-nav {
-    max-width: 14rem;
+    width: 14rem;
   }
 
   .ant-tabs-content-holder {