xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-29 06:36:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(components): support displaying and hiding permission buttons in table-header-operation

Browse Source
This commit is contained in:
Azir 2024-08-07 15:58:21 +08:00
parent e6aa25e9f8
commit d6973a4c9d
1 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/advanced/table-header-operation.vue
View File

@ -1,4 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watchEffect } from 'vue';
import { useAuth } from '@/hooks/business/auth';
import { $t } from '@/locales'; import { $t } from '@/locales';
defineOptions({ defineOptions({
@ -9,9 +11,21 @@ interface Props {
itemAlign?: NaiveUI.Align; itemAlign?: NaiveUI.Align;
disabledDelete?: boolean; disabledDelete?: boolean;
loading?: boolean; loading?: boolean;
showAdd?: boolean;
addCode?: string; // Button Add Permission Code
showDelete?: boolean;
deleteCode?: string; // Button Delete Permission Code
} }
defineProps<Props>(); const props = withDefaults(defineProps<Props>(), {
itemAlign: 'center',
disabledDelete: false,
loading: false,
showAdd: true,
addCode: '',
showDelete: true,
deleteCode: ''
});
interface Emits { interface Emits {
(e: 'add'): void; (e: 'add'): void;
@ -19,6 +33,17 @@ interface Emits {
(e: 'refresh'): void; (e: 'refresh'): void;
} }
const { hasAuth } = useAuth();
const showAddButton = ref(false);
const showDeleteButton = ref(false);
// Monitor changes in permission codes and update the display status of buttons
watchEffect(() => {
showAddButton.value = props.showAdd && (!props.addCode || hasAuth(props.addCode));
showDeleteButton.value = props.showDelete && (!props.deleteCode || hasAuth(props.deleteCode));
});
const emit = defineEmits<Emits>(); const emit = defineEmits<Emits>();
const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', { const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
@ -42,13 +67,13 @@ function refresh() {
<NSpace :align="itemAlign" wrap justify="end" class="lt-sm:w-200px"> <NSpace :align="itemAlign" wrap justify="end" class="lt-sm:w-200px">
<slot name="prefix"></slot> <slot name="prefix"></slot>
<slot name="default"> <slot name="default">
<NButton size="small" ghost type="primary" @click="add"> <NButton v-if="showAddButton" size="small" ghost type="primary" @click="add">
<template #icon> <template #icon>
<icon-ic-round-plus class="text-icon" /> <icon-ic-round-plus class="text-icon" />
</template> </template>
{{ $t('common.add') }} {{ $t('common.add') }}
</NButton> </NButton>
<NPopconfirm @positive-click="batchDelete"> <NPopconfirm v-if="showDeleteButton" @positive-click="batchDelete">
<template #trigger> <template #trigger>
<NButton size="small" ghost type="error" :disabled="disabledDelete"> <NButton size="small" ghost type="error" :disabled="disabledDelete">
<template #icon> <template #icon>