Commit 2141ddd645db7cec14005e74e2a6e332ff19e6d7
1 parent
ad8907e8
feat: implement Authorization control
Showing
3 changed files
with
67 additions
and
35 deletions
| ... | ... | @@ -5,29 +5,39 @@ |
| 5 | 5 | import { Tooltip } from 'ant-design-vue'; |
| 6 | 6 | import SvgIcon from '/@/components/Icon/src/SvgIcon.vue'; |
| 7 | 7 | import { MoreActionEvent } from '../../config/config'; |
| 8 | + import { computed } from '@vue/reactivity'; | |
| 9 | + import { usePermission } from '/@/hooks/web/usePermission'; | |
| 8 | 10 | |
| 9 | 11 | const emit = defineEmits(['action']); |
| 10 | 12 | const props = defineProps<{ |
| 11 | 13 | id: string; |
| 12 | 14 | }>(); |
| 13 | - | |
| 14 | - const dropMenuList: DropMenu[] = [ | |
| 15 | - { | |
| 16 | - text: '编辑组件', | |
| 17 | - event: MoreActionEvent.EDIT, | |
| 18 | - icon: 'ant-design:edit-outlined', | |
| 19 | - }, | |
| 20 | - { | |
| 21 | - text: '复制组件', | |
| 22 | - event: MoreActionEvent.COPY, | |
| 23 | - icon: 'ant-design:copy-outlined', | |
| 24 | - }, | |
| 25 | - { | |
| 26 | - text: '删除组件', | |
| 27 | - event: MoreActionEvent.DELETE, | |
| 28 | - icon: 'ant-design:delete-outlined', | |
| 29 | - }, | |
| 30 | - ]; | |
| 15 | + const { hasPermission } = usePermission(); | |
| 16 | + const dropMenuList = computed<DropMenu[]>(() => { | |
| 17 | + const basicMenu: DropMenu[] = []; | |
| 18 | + const hasUpdatePermission = hasPermission('api:yt:dataBoardDetail:update'); | |
| 19 | + const hasDeletePermission = hasPermission('api:yt:dataBoardDetail:delete'); | |
| 20 | + const hasCopyPermission = hasPermission('api:yt:dataBoardDetail:copy'); | |
| 21 | + if (hasUpdatePermission) | |
| 22 | + basicMenu.push({ | |
| 23 | + text: '编辑组件', | |
| 24 | + event: MoreActionEvent.EDIT, | |
| 25 | + icon: 'ant-design:edit-outlined', | |
| 26 | + }); | |
| 27 | + if (hasDeletePermission) | |
| 28 | + basicMenu.push({ | |
| 29 | + text: '删除组件', | |
| 30 | + event: MoreActionEvent.DELETE, | |
| 31 | + icon: 'ant-design:delete-outlined', | |
| 32 | + }); | |
| 33 | + if (hasCopyPermission) | |
| 34 | + basicMenu.push({ | |
| 35 | + text: '复制组件', | |
| 36 | + event: MoreActionEvent.COPY, | |
| 37 | + icon: 'ant-design:copy-outlined', | |
| 38 | + }); | |
| 39 | + return basicMenu; | |
| 40 | + }); | |
| 31 | 41 | |
| 32 | 42 | const handleMenuEvent = (event: DropMenu) => { |
| 33 | 43 | emit('action', event, props.id); |
| ... | ... | @@ -50,7 +60,12 @@ |
| 50 | 60 | <Tooltip title="趋势"> |
| 51 | 61 | <LineChartOutlined class="cursor-pointer mx-2" /> |
| 52 | 62 | </Tooltip> |
| 53 | - <Dropdown :drop-menu-list="dropMenuList" :trigger="['click']" @menu-event="handleMenuEvent"> | |
| 63 | + <Dropdown | |
| 64 | + v-if="dropMenuList.length" | |
| 65 | + :drop-menu-list="dropMenuList" | |
| 66 | + :trigger="['click']" | |
| 67 | + @menu-event="handleMenuEvent" | |
| 68 | + > | |
| 54 | 69 | <Tooltip title="更多"> |
| 55 | 70 | <MoreOutlined class="transform rotate-90 cursor-pointer" /> |
| 56 | 71 | </Tooltip> | ... | ... |
| ... | ... | @@ -22,6 +22,7 @@ |
| 22 | 22 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 23 | 23 | import { DataBoardLayoutInfo } from '../types/type'; |
| 24 | 24 | import { WidgetComponentType } from './config/visualOptions'; |
| 25 | + import Authority from '/@/components/Authority/src/Authority.vue'; | |
| 25 | 26 | |
| 26 | 27 | const ROUTE = useRoute(); |
| 27 | 28 | |
| ... | ... | @@ -246,7 +247,9 @@ |
| 246 | 247 | <section class="bg-light-50 flex flex-col overflow-hidden h-full w-full"> |
| 247 | 248 | <PageHeader title="水电表看板" @back="handleBack"> |
| 248 | 249 | <template #extra> |
| 249 | - <Button type="primary" @click="handleOpenCreatePanel">创建组件</Button> | |
| 250 | + <Authority value="api:yt:dataBoardDetail:post"> | |
| 251 | + <Button type="primary" @click="handleOpenCreatePanel">创建组件</Button> | |
| 252 | + </Authority> | |
| 250 | 253 | </template> |
| 251 | 254 | <div> |
| 252 | 255 | <span class="mr-3 text-gray-400">已创建组件:</span> | ... | ... |
| ... | ... | @@ -15,6 +15,9 @@ |
| 15 | 15 | import { ViewType } from './config/panelDetail'; |
| 16 | 16 | import { useRouter } from 'vue-router'; |
| 17 | 17 | import { getBoundingClientRect } from '/@/utils/domUtils'; |
| 18 | + import Authority from '/@/components/Authority/src/Authority.vue'; | |
| 19 | + import { computed } from '@vue/reactivity'; | |
| 20 | + import { usePermission } from '/@/hooks/web/usePermission'; | |
| 18 | 21 | |
| 19 | 22 | const ListItem = List.Item; |
| 20 | 23 | const router = useRouter(); |
| ... | ... | @@ -50,21 +53,28 @@ |
| 50 | 53 | const { clipboardRef } = useCopyToClipboard(); |
| 51 | 54 | const handleCopyShareUrl = (record: DataBoardRecord) => { |
| 52 | 55 | clipboardRef.value = record.openUrl; |
| 53 | - unref(clipboardRef) && createMessage.success('复制成功'); | |
| 56 | + unref(clipboardRef) ? createMessage.success('复制成功') : createMessage.error('未找到分享链接'); | |
| 54 | 57 | }; |
| 55 | 58 | |
| 56 | - const dropMenuList: DropMenu[] = [ | |
| 57 | - { | |
| 58 | - text: '编辑', | |
| 59 | - event: MoreActionEvent.EDIT, | |
| 60 | - icon: 'ant-design:edit-outlined', | |
| 61 | - }, | |
| 62 | - { | |
| 63 | - text: '删除', | |
| 64 | - event: MoreActionEvent.DELETE, | |
| 65 | - icon: 'ant-design:delete-outlined', | |
| 66 | - }, | |
| 67 | - ]; | |
| 59 | + const { hasPermission } = usePermission(); | |
| 60 | + const dropMenuList = computed<DropMenu[]>(() => { | |
| 61 | + const hasUpdatePermission = hasPermission('api:yt:dataBoard:update'); | |
| 62 | + const hasDeletePermission = hasPermission('api:yt:dataBoard:delete'); | |
| 63 | + const basicMenu: DropMenu[] = []; | |
| 64 | + if (hasUpdatePermission) | |
| 65 | + basicMenu.push({ | |
| 66 | + text: '编辑', | |
| 67 | + event: MoreActionEvent.EDIT, | |
| 68 | + icon: 'ant-design:edit-outlined', | |
| 69 | + }); | |
| 70 | + if (hasDeletePermission) | |
| 71 | + basicMenu.push({ | |
| 72 | + text: '删除', | |
| 73 | + event: MoreActionEvent.DELETE, | |
| 74 | + icon: 'ant-design:delete-outlined', | |
| 75 | + }); | |
| 76 | + return basicMenu; | |
| 77 | + }); | |
| 68 | 78 | |
| 69 | 79 | const getDatasource = async () => { |
| 70 | 80 | try { |
| ... | ... | @@ -117,7 +127,8 @@ |
| 117 | 127 | const [registerModal, { openModal }] = useModal(); |
| 118 | 128 | |
| 119 | 129 | const handleViewBoard = (record: DataBoardRecord) => { |
| 120 | - router.push(`/data/board/detail/${record.id}`); | |
| 130 | + const hasDetailPermission = hasPermission('api:yt:dataBoard:detail'); | |
| 131 | + if (hasDetailPermission) router.push(`/data/board/detail/${record.id}`); | |
| 121 | 132 | }; |
| 122 | 133 | |
| 123 | 134 | const handlePagenationPosition = () => { |
| ... | ... | @@ -143,7 +154,9 @@ |
| 143 | 154 | <PageWrapper> |
| 144 | 155 | <div class="flex mb-6 items-center"> |
| 145 | 156 | <div class="text-lg mr-6 font-bold">自定义看板</div> |
| 146 | - <Button type="primary" @click="handleOpenDetailModal">创建看板</Button> | |
| 157 | + <Authority value="api:yt:dataBoard:post"> | |
| 158 | + <Button type="primary" @click="handleOpenDetailModal">创建看板</Button> | |
| 159 | + </Authority> | |
| 147 | 160 | </div> |
| 148 | 161 | <Spin :spinning="loading"> |
| 149 | 162 | <List |
| ... | ... | @@ -157,6 +170,7 @@ |
| 157 | 170 | <Card class="data-card cursor-pointer"> |
| 158 | 171 | <template #extra> |
| 159 | 172 | <Dropdown |
| 173 | + v-if="dropMenuList.length" | |
| 160 | 174 | :trigger="['click']" |
| 161 | 175 | @menu-event="(event) => handleMenuEvent(event, item)" |
| 162 | 176 | :drop-menu-list="dropMenuList" | ... | ... |