<template>
|
<div class="matnr-print-toolbar">
|
<ElSpace wrap>
|
<ElButton
|
v-for="item in items"
|
:key="item.type"
|
size="small"
|
@click="$emit('add-element', item.type)"
|
>
|
{{ item.label }}
|
</ElButton>
|
</ElSpace>
|
|
<ElSpace wrap>
|
<ElButton size="small" :disabled="!canZoomOut" @click="$emit('zoom-out')">
|
{{ t('pages.basicInfo.whMat.printTemplate.toolbar.zoomOut') }}
|
</ElButton>
|
<ElButton size="small" @click="$emit('zoom-reset')">{{ zoomPercent }}%</ElButton>
|
<ElButton size="small" :disabled="!canZoomIn" @click="$emit('zoom-in')">
|
{{ t('pages.basicInfo.whMat.printTemplate.toolbar.zoomIn') }}
|
</ElButton>
|
<ElButton
|
size="small"
|
:type="autoFitActive ? 'primary' : 'default'"
|
@click="$emit('zoom-fit')"
|
>
|
{{ t('pages.basicInfo.whMat.printTemplate.toolbar.zoomFit') }}
|
</ElButton>
|
</ElSpace>
|
</div>
|
</template>
|
|
<script setup>
|
import { computed } from 'vue'
|
import { useI18n } from 'vue-i18n'
|
|
defineOptions({ name: 'MatnrPrintToolbar' })
|
|
defineProps({
|
zoomPercent: {
|
type: Number,
|
default: 100
|
},
|
canZoomIn: {
|
type: Boolean,
|
default: true
|
},
|
canZoomOut: {
|
type: Boolean,
|
default: true
|
},
|
autoFitActive: {
|
type: Boolean,
|
default: false
|
}
|
})
|
|
defineEmits(['add-element', 'zoom-in', 'zoom-out', 'zoom-reset', 'zoom-fit'])
|
|
const { t, locale } = useI18n()
|
|
const items = computed(() => {
|
locale.value
|
return [
|
{ type: 'text', label: t('pages.basicInfo.whMat.printTemplate.toolbar.elements.text') },
|
{ type: 'barcode', label: t('pages.basicInfo.whMat.printTemplate.toolbar.elements.barcode') },
|
{ type: 'qrcode', label: t('pages.basicInfo.whMat.printTemplate.toolbar.elements.qrcode') },
|
{ type: 'image', label: t('pages.basicInfo.whMat.printTemplate.toolbar.elements.image') },
|
{ type: 'line', label: t('pages.basicInfo.whMat.printTemplate.toolbar.elements.line') },
|
{ type: 'rect', label: t('pages.basicInfo.whMat.printTemplate.toolbar.elements.rect') },
|
{ type: 'table', label: t('pages.basicInfo.whMat.printTemplate.toolbar.elements.table') }
|
]
|
})
|
</script>
|
|
<style scoped>
|
.matnr-print-toolbar {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 12px;
|
flex-wrap: wrap;
|
padding: 12px 16px;
|
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
|
background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.9));
|
}
|
</style>
|
