From d6973a4c9d277992f3005b808b7e0072ee84a2cb Mon Sep 17 00:00:00 2001
From: Azir <2075125282@qq.com>
Date: Wed, 7 Aug 2024 15:58:21 +0800
Subject: [PATCH] feat(components): support displaying and hiding permission
 buttons in table-header-operation

---
 .../advanced/table-header-operation.vue       | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/advanced/table-header-operation.vue b/src/components/advanced/table-header-operation.vue
index 7ca287fd..a0c2a7fc 100644
--- a/src/components/advanced/table-header-operation.vue
+++ b/src/components/advanced/table-header-operation.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+import { useAuth } from '@/hooks/business/auth';
 import { $t } from '@/locales';
 
 defineOptions({
@@ -9,9 +11,21 @@ interface Props {
   itemAlign?: NaiveUI.Align;
   disabledDelete?: 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 {
   (e: 'add'): void;
@@ -19,6 +33,17 @@ interface Emits {
   (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 columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
@@ -42,13 +67,13 @@ function refresh() {
   <NSpace :align="itemAlign" wrap justify="end" class="lt-sm:w-200px">
     <slot name="prefix"></slot>
     <slot name="default">
-      <NButton size="small" ghost type="primary" @click="add">
+      <NButton v-if="showAddButton" size="small" ghost type="primary" @click="add">
         <template #icon>
           <icon-ic-round-plus class="text-icon" />
         </template>
         {{ $t('common.add') }}
       </NButton>
-      <NPopconfirm @positive-click="batchDelete">
+      <NPopconfirm v-if="showDeleteButton" @positive-click="batchDelete">
         <template #trigger>
           <NButton size="small" ghost type="error" :disabled="disabledDelete">
             <template #icon>