|
|
|
@ -15,6 +15,8 @@ const tooManyCharsForBarcode = computed(() => barcodeValue.value.length > maxNum
|
|
|
|
|
|
|
|
|
|
const modalVisible = ref(false) |
|
|
|
|
|
|
|
|
|
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false)) |
|
|
|
|
|
|
|
|
|
const showBarcodeModal = () => { |
|
|
|
|
modalVisible.value = true |
|
|
|
|
} |
|
|
|
@ -46,31 +48,39 @@ const rowHeight = inject(RowHeightInj, ref(undefined))
|
|
|
|
|
> |
|
|
|
|
<JsBarcodeWrapper v-if="showBarcode" :barcode-value="barcodeValue" :barcode-format="barcodeMeta.barcodeFormat" /> |
|
|
|
|
</a-modal> |
|
|
|
|
<JsBarcodeWrapper |
|
|
|
|
v-if="showBarcode && rowHeight" |
|
|
|
|
:barcode-value="barcodeValue" |
|
|
|
|
:barcode-format="barcodeMeta.barcodeFormat" |
|
|
|
|
:custom-style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }" |
|
|
|
|
@on-click-barcode="showBarcodeModal" |
|
|
|
|
> |
|
|
|
|
<template #barcodeRenderError> |
|
|
|
|
<div class="text-left text-wrap mt-2 text-[#e65100] text-xs" data-testid="barcode-invalid-input-message"> |
|
|
|
|
{{ $t('msg.warning.barcode.renderError') }} |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</JsBarcodeWrapper> |
|
|
|
|
<JsBarcodeWrapper |
|
|
|
|
v-else-if="showBarcode" |
|
|
|
|
:barcode-value="barcodeValue" |
|
|
|
|
:barcode-format="barcodeMeta.barcodeFormat" |
|
|
|
|
@on-click-barcode="showBarcodeModal" |
|
|
|
|
<div |
|
|
|
|
class="flex ml-2 w-full items-center" |
|
|
|
|
:class="{ |
|
|
|
|
'justify-start': isExpandedFormOpen, |
|
|
|
|
'justify-center': !isExpandedFormOpen, |
|
|
|
|
}" |
|
|
|
|
> |
|
|
|
|
<template #barcodeRenderError> |
|
|
|
|
<div class="text-left text-wrap mt-2 text-[#e65100] text-xs" data-testid="barcode-invalid-input-message"> |
|
|
|
|
{{ $t('msg.warning.barcode.renderError') }} |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</JsBarcodeWrapper> |
|
|
|
|
<JsBarcodeWrapper |
|
|
|
|
v-if="showBarcode && rowHeight" |
|
|
|
|
:barcode-value="barcodeValue" |
|
|
|
|
:barcode-format="barcodeMeta.barcodeFormat" |
|
|
|
|
:custom-style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem`, width: 40 }" |
|
|
|
|
@on-click-barcode="showBarcodeModal" |
|
|
|
|
> |
|
|
|
|
<template #barcodeRenderError> |
|
|
|
|
<div class="text-left text-wrap mt-2 text-[#e65100] text-xs" data-testid="barcode-invalid-input-message"> |
|
|
|
|
{{ $t('msg.warning.barcode.renderError') }} |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</JsBarcodeWrapper> |
|
|
|
|
<JsBarcodeWrapper |
|
|
|
|
v-else-if="showBarcode" |
|
|
|
|
:barcode-value="barcodeValue" |
|
|
|
|
:barcode-format="barcodeMeta.barcodeFormat" |
|
|
|
|
@on-click-barcode="showBarcodeModal" |
|
|
|
|
> |
|
|
|
|
<template #barcodeRenderError> |
|
|
|
|
<div class="text-left text-wrap mt-2 text-[#e65100] text-xs" data-testid="barcode-invalid-input-message"> |
|
|
|
|
{{ $t('msg.warning.barcode.renderError') }} |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</JsBarcodeWrapper> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div v-if="tooManyCharsForBarcode" class="text-left text-wrap mt-2 text-[#e65100] text-xs"> |
|
|
|
|
{{ $t('labels.barcodeValueTooLong') }} |
|
|
|
|