feat: implement Authorization control

ww
1 parent ad8907e8
Showing 3 changed files with 67 additions and 35 deletions
src/views/data/board/components/WidgetHeader/BaseWidgetHeader.vue
src/views/data/board/detail/index.vue
src/views/data/board/index.vue
--- a/src/views/data/board/components/WidgetHeader/BaseWidgetHeader.vue
View file @2141ddd
+++ b/src/views/data/board/components/WidgetHeader/BaseWidgetHeader.vue
View file @2141ddd
@@ -5,29 +5,39 @@
   import { Tooltip } from 'ant-design-vue';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
   import { MoreActionEvent } from '../../config/config';
+  import { computed } from '@vue/reactivity';
+  import { usePermission } from '/@/hooks/web/usePermission';
   const emit = defineEmits(['action']);
   const props = defineProps<{
     id: string;
   }>();
-
-  const dropMenuList: DropMenu[] = [
-    {
-      text: '编辑组件',
-      event: MoreActionEvent.EDIT,
-      icon: 'ant-design:edit-outlined',
-    },
-    {
-      text: '复制组件',
-      event: MoreActionEvent.COPY,
-      icon: 'ant-design:copy-outlined',
-    },
-    {
-      text: '删除组件',
-      event: MoreActionEvent.DELETE,
-      icon: 'ant-design:delete-outlined',
-    },
-  ];
+  const { hasPermission } = usePermission();
+  const dropMenuList = computed<DropMenu[]>(() => {
+    const basicMenu: DropMenu[] = [];
+    const hasUpdatePermission = hasPermission('api:yt:dataBoardDetail:update');
+    const hasDeletePermission = hasPermission('api:yt:dataBoardDetail:delete');
+    const hasCopyPermission = hasPermission('api:yt:dataBoardDetail:copy');
+    if (hasUpdatePermission)
+      basicMenu.push({
+        text: '编辑组件',
+        event: MoreActionEvent.EDIT,
+        icon: 'ant-design:edit-outlined',
+      });
+    if (hasDeletePermission)
+      basicMenu.push({
+        text: '删除组件',
+        event: MoreActionEvent.DELETE,
+        icon: 'ant-design:delete-outlined',
+      });
+    if (hasCopyPermission)
+      basicMenu.push({
+        text: '复制组件',
+        event: MoreActionEvent.COPY,
+        icon: 'ant-design:copy-outlined',
+      });
+    return basicMenu;
+  });
   const handleMenuEvent = (event: DropMenu) => {
     emit('action', event, props.id);
@@ -50,7 +60,12 @@
       <Tooltip title="趋势">
         <LineChartOutlined class="cursor-pointer mx-2" />
       </Tooltip>
-      <Dropdown :drop-menu-list="dropMenuList" :trigger="['click']" @menu-event="handleMenuEvent">
+      <Dropdown
+        v-if="dropMenuList.length"
+        :drop-menu-list="dropMenuList"
+        :trigger="['click']"
+        @menu-event="handleMenuEvent"
+      >
         <Tooltip title="更多">
           <MoreOutlined class="transform rotate-90 cursor-pointer" />
         </Tooltip>
--- a/src/views/data/board/detail/index.vue
View file @2141ddd
+++ b/src/views/data/board/detail/index.vue
View file @2141ddd
@@ -22,6 +22,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { DataBoardLayoutInfo } from '../types/type';
   import { WidgetComponentType } from './config/visualOptions';
+  import Authority from '/@/components/Authority/src/Authority.vue';
   const ROUTE = useRoute();
@@ -246,7 +247,9 @@
   <section class="bg-light-50 flex flex-col overflow-hidden h-full w-full">
     <PageHeader title="水电表看板" @back="handleBack">
       <template #extra>
-        <Button type="primary" @click="handleOpenCreatePanel">创建组件</Button>
+        <Authority value="api:yt:dataBoardDetail:post">
+          <Button type="primary" @click="handleOpenCreatePanel">创建组件</Button>
+        </Authority>
       </template>
       <div>
         <span class="mr-3 text-gray-400">已创建组件:</span>
--- a/src/views/data/board/index.vue
View file @2141ddd
+++ b/src/views/data/board/index.vue
View file @2141ddd
@@ -15,6 +15,9 @@
   import { ViewType } from './config/panelDetail';
   import { useRouter } from 'vue-router';
   import { getBoundingClientRect } from '/@/utils/domUtils';
+  import Authority from '/@/components/Authority/src/Authority.vue';
+  import { computed } from '@vue/reactivity';
+  import { usePermission } from '/@/hooks/web/usePermission';
   const ListItem = List.Item;
   const router = useRouter();
@@ -50,21 +53,28 @@
   const { clipboardRef } = useCopyToClipboard();
   const handleCopyShareUrl = (record: DataBoardRecord) => {
     clipboardRef.value = record.openUrl;
-    unref(clipboardRef) && createMessage.success('复制成功');
+    unref(clipboardRef) ? createMessage.success('复制成功') : createMessage.error('未找到分享链接');
   };
-  const dropMenuList: DropMenu[] = [
-    {
-      text: '编辑',
-      event: MoreActionEvent.EDIT,
-      icon: 'ant-design:edit-outlined',
-    },
-    {
-      text: '删除',
-      event: MoreActionEvent.DELETE,
-      icon: 'ant-design:delete-outlined',
-    },
-  ];
+  const { hasPermission } = usePermission();
+  const dropMenuList = computed<DropMenu[]>(() => {
+    const hasUpdatePermission = hasPermission('api:yt:dataBoard:update');
+    const hasDeletePermission = hasPermission('api:yt:dataBoard:delete');
+    const basicMenu: DropMenu[] = [];
+    if (hasUpdatePermission)
+      basicMenu.push({
+        text: '编辑',
+        event: MoreActionEvent.EDIT,
+        icon: 'ant-design:edit-outlined',
+      });
+    if (hasDeletePermission)
+      basicMenu.push({
+        text: '删除',
+        event: MoreActionEvent.DELETE,
+        icon: 'ant-design:delete-outlined',
+      });
+    return basicMenu;
+  });
   const getDatasource = async () => {
     try {
@@ -117,7 +127,8 @@
   const [registerModal, { openModal }] = useModal();
   const handleViewBoard = (record: DataBoardRecord) => {
-    router.push(`/data/board/detail/${record.id}`);
+    const hasDetailPermission = hasPermission('api:yt:dataBoard:detail');
+    if (hasDetailPermission) router.push(`/data/board/detail/${record.id}`);
   };
   const handlePagenationPosition = () => {
@@ -143,7 +154,9 @@
   <PageWrapper>
     <div class="flex mb-6 items-center">
       <div class="text-lg mr-6 font-bold">自定义看板</div>
-      <Button type="primary" @click="handleOpenDetailModal">创建看板</Button>
+      <Authority value="api:yt:dataBoard:post">
+        <Button type="primary" @click="handleOpenDetailModal">创建看板</Button>
+      </Authority>
     </div>
     <Spin :spinning="loading">
       <List
@@ -157,6 +170,7 @@
             <Card class="data-card cursor-pointer">
               <template #extra>
                 <Dropdown
+                  v-if="dropMenuList.length"
                   :trigger="['click']"
                   @menu-event="(event) => handleMenuEvent(event, item)"
                   :drop-menu-list="dropMenuList"