feat(vben5): 增加部分页面权限管控

10 months ago · 274477745d
5 changed files with 147 additions and 13 deletions
--- a/apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryTable.vue
+++ b/apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryTable.vue
@ -10,7 +10,7 @@ import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';

-import { listToTree } from '@abp/core';
+import { listToTree, useAuthorization } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
 import {
  DeleteOutlined,
@ -21,6 +21,7 @@ import {
 import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue';

 import { useDataDictionariesApi } from '../../api/useDataDictionariesApi';
+import { DataDictionaryPermissions } from '../../constants/permissions';

 defineOptions({
  name: 'DataDictionaryTable',
@ -29,6 +30,7 @@ defineOptions({
 const MenuItem = Menu.Item;
 const ItemsIcon = createIconifyIcon('material-symbols:align-items-stretch');

+const { isGranted } = useAuthorization();
 const { deleteApi, getAllApi } = useDataDictionariesApi();

 const expandRowKeys = ref<string[]>([]);
@ -71,6 +73,11 @@ const gridOptions: VxeGridProps<DataDto> = {
      fixed: 'right',
      slots: { default: 'action' },
      title: $t('AbpUi.Actions'),
+      visible: isGranted([
+        DataDictionaryPermissions.Default,
+        DataDictionaryPermissions.Update,
+        DataDictionaryPermissions.Delete,
+      ]),
      width: 220,
    },
  ],
@ -226,7 +233,12 @@ onMounted(onGet);
 <template>
  <Grid :table-title="$t('AppPlatform.DisplayName:DataDictionary')">
    <template #toolbar-tools>
-      <Button :icon="h(PlusOutlined)" type="primary" @click="onCreate">
+      <Button
+        v-if="isGranted([DataDictionaryPermissions.Create])"
+        :icon="h(PlusOutlined)"
+        type="primary"
+        @click="onCreate"
+      >
        {{ $t('AppPlatform.Data:AddNew') }}
      </Button>
    </template>
@ -236,6 +248,12 @@ onMounted(onGet);
    <template #action="{ row }">
      <div class="flex flex-row">
        <Button
+          v-if="
+            isGranted([
+              DataDictionaryPermissions.Default,
+              DataDictionaryPermissions.Update,
+            ])
+          "
          :icon="h(EditOutlined)"
          block
          type="link"
@ -244,6 +262,7 @@ onMounted(onGet);
          {{ $t('AbpUi.Edit') }}
        </Button>
        <Button
+          v-if="isGranted([DataDictionaryPermissions.Delete])"
          :icon="h(DeleteOutlined)"
          block
          danger
@ -252,16 +271,29 @@ onMounted(onGet);
        >
          {{ $t('AbpUi.Delete') }}
        </Button>
-        <Dropdown>
+        <Dropdown
+          v-if="
+            isGranted([
+              DataDictionaryPermissions.Create,
+              DataDictionaryPermissions.ManageItems,
+            ])
+          "
+        >
          <template #overlay>
            <Menu @click="(info) => onMenuClick(row, info)">
-              <MenuItem key="children">
+              <MenuItem
+                v-if="isGranted([DataDictionaryPermissions.Create])"
+                key="children"
+              >
                <div class="flex flex-row items-center gap-[4px]">
                  <PlusOutlined />
                  {{ $t('AppPlatform.Data:AddChildren') }}
                </div>
              </MenuItem>
-              <MenuItem key="items">
+              <MenuItem
+                v-if="isGranted([DataDictionaryPermissions.ManageItems])"
+                key="items"
+              >
                <div class="flex flex-row items-center gap-[4px]">
                  <ItemsIcon />
                  {{ $t('AppPlatform.Data:Items') }}
--- a/apps/vben5/packages/@abp/platform/src/components/layouts/LayoutTable.vue
+++ b/apps/vben5/packages/@abp/platform/src/components/layouts/LayoutTable.vue
@ -10,6 +10,7 @@ import { defineAsyncComponent, h } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';

+import { useAuthorization } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
 import {
  DeleteOutlined,
@ -19,11 +20,13 @@ import {
 import { Button, message, Modal } from 'ant-design-vue';

 import { useLayoutsApi } from '../../api/useLayoutsApi';
+import { LayoutPermissions } from '../../constants/permissions';

 defineOptions({
  name: 'LayoutTable',
 });

+const { isGranted } = useAuthorization();
 const { deleteApi, getPagedListApi } = useLayoutsApi();

 const formOptions: VbenFormProps = {
@ -102,6 +105,11 @@ const gridOptions: VxeGridProps<LayoutDto> = {
      fixed: 'right',
      slots: { default: 'action' },
      title: $t('AbpUi.Actions'),
+      visible: isGranted([
+        LayoutPermissions.Default,
+        LayoutPermissions.Update,
+        LayoutPermissions.Delete,
+      ]),
      width: 220,
    },
  ],
@ -174,13 +182,21 @@ function onDelete(row: LayoutDto) {
 <template>
  <Grid :table-title="$t('AppPlatform.DisplayName:Layout')">
    <template #toolbar-tools>
-      <Button :icon="h(PlusOutlined)" type="primary" @click="onCreate">
+      <Button
+        v-if="isGranted([LayoutPermissions.Create])"
+        :icon="h(PlusOutlined)"
+        type="primary"
+        @click="onCreate"
+      >
        {{ $t('AppPlatform.Layout:AddNew') }}
      </Button>
    </template>
    <template #action="{ row }">
      <div class="flex flex-row">
        <Button
+          v-if="
+            isGranted([LayoutPermissions.Default, LayoutPermissions.Update])
+          "
          :icon="h(EditOutlined)"
          block
          type="link"
@ -189,6 +205,7 @@ function onDelete(row: LayoutDto) {
          {{ $t('AbpUi.Edit') }}
        </Button>
        <Button
+          v-if="isGranted([LayoutPermissions.Delete])"
          :icon="h(DeleteOutlined)"
          block
          danger
--- a/apps/vben5/packages/@abp/platform/src/components/menus/MenuDrawer.vue
+++ b/apps/vben5/packages/@abp/platform/src/components/menus/MenuDrawer.vue
@ -300,9 +300,20 @@ function onInitMetaFormSchemas() {
          break;
        }
        case ValueType.String: {
-          componentProps = {
-            autocomplete: 'off',
-          };
+          // 约定名称包含icon时使用IconPicker组件
+          const itemNameLowerCase = dataItem.name.toLocaleLowerCase();
+          if (itemNameLowerCase.includes('icon')) {
+            component = 'IconPicker';
+            componentProps = {
+              style: {
+                width: '100%',
+              },
+            };
+          } else {
+            componentProps = {
+              autocomplete: 'off',
+            };
+          }
          defaultValue = dataItem.defaultValue;
          break;
        }
@ -456,4 +467,14 @@ async function onSubmit() {
  </Drawer>
 </template>

-<style scoped></style>
+<style scoped lang="scss">
+:deep(.grid-cols-1) {
+  .flex-shrink-0 {
+    .relative {
+      button {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>
--- a/apps/vben5/packages/@abp/platform/src/components/menus/MenuTable.vue
+++ b/apps/vben5/packages/@abp/platform/src/components/menus/MenuTable.vue
@ -11,7 +11,7 @@ import { useVbenDrawer } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';

-import { listToTree } from '@abp/core';
+import { listToTree, useAuthorization } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
 import {
  DeleteOutlined,
@ -22,11 +22,13 @@ import { Button, message, Modal } from 'ant-design-vue';

 import { useLayoutsApi } from '../../api';
 import { useMenusApi } from '../../api/useMenusApi';
+import { MenuPermissions } from '../../constants/permissions';

 defineOptions({
  name: 'MenuTable',
 });

+const { isGranted } = useAuthorization();
 const { deleteApi, getAllApi } = useMenusApi();
 const { getPagedListApi: getLayoutsApi } = useLayoutsApi();

@ -112,7 +114,16 @@ const gridOptions: VxeGridProps<MenuDto> = {
      fixed: 'right',
      slots: { default: 'action' },
      title: $t('AbpUi.Actions'),
-      width: 350,
+      visible: isGranted(
+        [
+          MenuPermissions.Default,
+          MenuPermissions.Create,
+          MenuPermissions.Update,
+          MenuPermissions.Delete,
+        ],
+        false,
+      ),
+      width: 300,
    },
  ],
  exportConfig: {},
@ -244,7 +255,12 @@ onMounted(onGet);
 <template>
  <Grid :table-title="$t('AppPlatform.DisplayName:DataDictionary')">
    <template #toolbar-tools>
-      <Button :icon="h(PlusOutlined)" type="primary" @click="onCreate()">
+      <Button
+        v-if="isGranted([MenuPermissions.Create])"
+        :icon="h(PlusOutlined)"
+        type="primary"
+        @click="onCreate()"
+      >
        {{ $t('AppPlatform.Menu:AddNew') }}
      </Button>
    </template>
@ -257,6 +273,7 @@ onMounted(onGet);
    <template #action="{ row }">
      <div class="flex flex-row">
        <Button
+          v-if="isGranted([MenuPermissions.Create])"
          :icon="h(PlusOutlined)"
          block
          type="link"
@ -265,6 +282,9 @@ onMounted(onGet);
          {{ $t('AppPlatform.Menu:AddChildren') }}
        </Button>
        <Button
+          v-if="
+            isGranted([MenuPermissions.Default, MenuPermissions.Update], false)
+          "
          :icon="h(EditOutlined)"
          block
          type="link"
@ -273,6 +293,7 @@ onMounted(onGet);
          {{ $t('AbpUi.Edit') }}
        </Button>
        <Button
+          v-if="isGranted([MenuPermissions.Delete])"
          :icon="h(DeleteOutlined)"
          block
          danger
--- a/apps/vben5/packages/@abp/platform/src/constants/permissions.ts
+++ b/apps/vben5/packages/@abp/platform/src/constants/permissions.ts
@ -14,3 +14,46 @@ export const SmsMessagesPermissions = {
  /** 发送消息 */
  SendMessage: 'Platform.SmsMessage.SendMessage',
 };
+/** 数据字典权限 */
+export const DataDictionaryPermissions = {
+  /** 新增 */
+  Create: 'Platform.DataDictionary.Create',
+  /** 默认 */
+  Default: 'Platform.DataDictionary',
+  /** 删除 */
+  Delete: 'Platform.DataDictionary.Delete',
+  /** 管理项目 */
+  ManageItems: 'Platform.DataDictionary.ManageItems',
+  /** 移动 */
+  Move: 'Platform.DataDictionary.Move',
+  /** 更新 */
+  Update: 'Platform.DataDictionary.Update',
+};
+/** 布局权限 */
+export const LayoutPermissions = {
+  /** 新增 */
+  Create: 'Platform.Layout.Create',
+  /** 默认 */
+  Default: 'Platform.Layout',
+  /** 删除 */
+  Delete: 'Platform.Layout.Delete',
+  /** 更新 */
+  Update: 'Platform.Layout.Update',
+};
+/** 菜单权限 */
+export const MenuPermissions = {
+  /** 新增 */
+  Create: 'Platform.Menu.Create',
+  /** 默认 */
+  Default: 'Platform.Menu',
+  /** 删除 */
+  Delete: 'Platform.Menu.Delete',
+  /** 管理角色菜单 */
+  ManageRoles: 'Platform.Menu.ManageRoles',
+  /** 管理用户收藏菜单 */
+  ManageUserFavorites: 'Platform.Menu.ManageUserFavorites',
+  /** 管理用户菜单 */
+  ManageUsers: 'Platform.Menu.ManageUsers',
+  /** 更新 */
+  Update: 'Platform.Menu.Update',
+};