skytek_xinliang
174 lines
3.3 KiB
Vue
174 lines
3.3 KiB
Vue
<template>
|
|
<div v-if="mobile" class="d-flex align-center flex-wrap ga-2 w-100">
|
|
<div class="d-flex align-center ga-1">
|
|
<v-btn
|
|
v-if="isViewMode || isEditMode"
|
|
:disabled="!hasPrevRecord"
|
|
:icon="mdiChevronLeft"
|
|
size="small"
|
|
variant="text"
|
|
@click="$emit('prev')"
|
|
/>
|
|
<v-btn
|
|
v-if="isViewMode || isEditMode"
|
|
:disabled="!hasNextRecord"
|
|
:icon="mdiChevronRight"
|
|
size="small"
|
|
variant="text"
|
|
@click="$emit('next')"
|
|
/>
|
|
</div>
|
|
<v-spacer />
|
|
<v-btn
|
|
v-if="isViewMode"
|
|
color="primary"
|
|
:prepend-icon="mdiPencil"
|
|
size="small"
|
|
variant="tonal"
|
|
@click="$emit('switch-to-edit')"
|
|
>
|
|
{{ editLabel }}
|
|
</v-btn>
|
|
<v-btn
|
|
v-if="isEditMode"
|
|
color="primary"
|
|
:prepend-icon="mdiEye"
|
|
size="small"
|
|
variant="tonal"
|
|
@click="$emit('switch-to-view')"
|
|
>
|
|
{{ viewLabel }}
|
|
</v-btn>
|
|
</div>
|
|
|
|
<template v-else>
|
|
<v-btn
|
|
v-if="isViewMode || isEditMode"
|
|
:disabled="!hasPrevRecord"
|
|
:prepend-icon="mdiSkipPrevious"
|
|
size="small"
|
|
variant="text"
|
|
@click="$emit('first')"
|
|
>
|
|
{{ firstLabel }}
|
|
</v-btn>
|
|
<v-btn
|
|
v-if="isViewMode || isEditMode"
|
|
:disabled="!hasPrevRecord"
|
|
:prepend-icon="mdiChevronLeft"
|
|
size="small"
|
|
variant="text"
|
|
@click="$emit('prev')"
|
|
>
|
|
{{ prevLabel }}
|
|
</v-btn>
|
|
<v-btn
|
|
v-if="isViewMode || isEditMode"
|
|
:append-icon="mdiChevronRight"
|
|
:disabled="!hasNextRecord"
|
|
size="small"
|
|
variant="text"
|
|
@click="$emit('next')"
|
|
>
|
|
{{ nextLabel }}
|
|
</v-btn>
|
|
<v-btn
|
|
v-if="isViewMode || isEditMode"
|
|
:append-icon="mdiSkipNext"
|
|
:disabled="!hasNextRecord"
|
|
size="small"
|
|
variant="text"
|
|
@click="$emit('last')"
|
|
>
|
|
{{ lastLabel }}
|
|
</v-btn>
|
|
<v-spacer />
|
|
<v-btn
|
|
v-if="isViewMode"
|
|
color="primary"
|
|
:prepend-icon="mdiPencil"
|
|
size="small"
|
|
variant="tonal"
|
|
@click="$emit('switch-to-edit')"
|
|
>
|
|
{{ editLabel }}
|
|
</v-btn>
|
|
<v-btn
|
|
v-if="isEditMode"
|
|
color="primary"
|
|
:prepend-icon="mdiEye"
|
|
size="small"
|
|
variant="tonal"
|
|
@click="$emit('switch-to-view')"
|
|
>
|
|
{{ viewLabel }}
|
|
</v-btn>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
mdiChevronLeft,
|
|
mdiChevronRight,
|
|
mdiEye,
|
|
mdiPencil,
|
|
mdiSkipNext,
|
|
mdiSkipPrevious,
|
|
} from '@mdi/js'
|
|
defineProps({
|
|
isViewMode: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
isEditMode: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
hasPrevRecord: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
hasNextRecord: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
mobile: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
firstLabel: {
|
|
type: String,
|
|
default: '首筆',
|
|
},
|
|
prevLabel: {
|
|
type: String,
|
|
default: '上一筆',
|
|
},
|
|
nextLabel: {
|
|
type: String,
|
|
default: '下一筆',
|
|
},
|
|
lastLabel: {
|
|
type: String,
|
|
default: '末筆',
|
|
},
|
|
editLabel: {
|
|
type: String,
|
|
default: '編輯',
|
|
},
|
|
viewLabel: {
|
|
type: String,
|
|
default: '檢視',
|
|
},
|
|
})
|
|
|
|
defineEmits<{
|
|
(event: 'first'): void
|
|
(event: 'prev'): void
|
|
(event: 'next'): void
|
|
(event: 'last'): void
|
|
(event: 'switch-to-edit'): void
|
|
(event: 'switch-to-view'): void
|
|
}>()
|
|
</script>
|