78 lines
1.8 KiB
Vue
78 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
defineOptions({
|
|
name: 'TableHeaderOperation'
|
|
});
|
|
|
|
interface Props {
|
|
itemAlign?: NaiveUI.Align;
|
|
disabledDelete?: boolean;
|
|
loading?: boolean;
|
|
showDelete?: boolean;
|
|
showAdd?: boolean;
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
showDelete: true,
|
|
showAdd: true
|
|
});
|
|
|
|
interface Emits {
|
|
(e: 'add'): void;
|
|
(e: 'delete'): void;
|
|
(e: 'refresh'): void;
|
|
}
|
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
|
|
default: () => []
|
|
});
|
|
|
|
function add() {
|
|
emit('add');
|
|
}
|
|
|
|
function batchDelete() {
|
|
emit('delete');
|
|
}
|
|
|
|
function refresh() {
|
|
emit('refresh');
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<NSpace :align="itemAlign" wrap justify="end" class="lt-sm:w-200px">
|
|
<slot name="prefix"></slot>
|
|
<slot name="default">
|
|
<NButton v-if="showAdd" size="small" ghost type="primary" @click="add">
|
|
<template #icon>
|
|
<icon-ic-round-plus class="text-icon" />
|
|
</template>
|
|
{{ $t('common.add') }}
|
|
</NButton>
|
|
<NPopconfirm v-if="showDelete" @positive-click="batchDelete">
|
|
<template #trigger>
|
|
<NButton size="small" ghost type="error" :disabled="disabledDelete">
|
|
<template #icon>
|
|
<icon-ic-round-delete class="text-icon" />
|
|
</template>
|
|
{{ $t('common.batchDelete') }}
|
|
</NButton>
|
|
</template>
|
|
{{ $t('common.confirmDelete') }}
|
|
</NPopconfirm>
|
|
</slot>
|
|
<NButton size="small" @click="refresh">
|
|
<template #icon>
|
|
<icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
|
|
</template>
|
|
{{ $t('common.refresh') }}
|
|
</NButton>
|
|
<TableColumnSetting v-model:columns="columns" />
|
|
<slot name="suffix"></slot>
|
|
</NSpace>
|
|
</template>
|
|
|
|
<style scoped></style>
|