<template>
|
<div class="matnr-print-field-panel">
|
<div class="matnr-print-field-panel__title">{{
|
t('pages.basicInfo.whMat.printTemplate.fieldPanel.title')
|
}}</div>
|
<ElScrollbar max-height="220px">
|
<div class="matnr-print-field-panel__list">
|
<button
|
v-for="field in fields"
|
:key="field.path"
|
type="button"
|
class="matnr-print-field-panel__item"
|
@click="$emit('insert-field', field.placeholder)"
|
>
|
<span>{{ field.label }}</span>
|
<small>{{ field.placeholder }}</small>
|
</button>
|
</div>
|
</ElScrollbar>
|
</div>
|
</template>
|
|
<script setup>
|
import { useI18n } from 'vue-i18n'
|
|
defineOptions({ name: 'MatnrPrintFieldPanel' })
|
|
const { t } = useI18n()
|
|
defineProps({
|
fields: {
|
type: Array,
|
default: () => []
|
}
|
})
|
|
defineEmits(['insert-field'])
|
</script>
|
|
<style scoped>
|
.matnr-print-field-panel {
|
display: flex;
|
flex-direction: column;
|
flex-shrink: 0;
|
gap: 10px;
|
padding: 12px;
|
border-top: 1px solid rgba(148, 163, 184, 0.18);
|
}
|
|
.matnr-print-field-panel__title {
|
font-size: 13px;
|
font-weight: 600;
|
color: var(--art-text-primary);
|
}
|
|
.matnr-print-field-panel__list {
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
}
|
|
.matnr-print-field-panel__item {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
gap: 4px;
|
width: 100%;
|
padding: 8px 10px;
|
border: 1px solid rgba(148, 163, 184, 0.24);
|
border-radius: 10px;
|
background: #ffffff;
|
color: var(--art-text-primary);
|
cursor: pointer;
|
transition:
|
border-color 0.2s ease,
|
transform 0.2s ease;
|
}
|
|
.matnr-print-field-panel__item:hover {
|
border-color: rgba(37, 99, 235, 0.45);
|
transform: translateY(-1px);
|
}
|
|
.matnr-print-field-panel__item small {
|
color: var(--art-text-secondary);
|
font-size: 12px;
|
}
|
</style>
|
