149 lines
4.3 KiB
Vue
149 lines
4.3 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import EditPictureForm from 'components/EditPictureForm.vue';
|
|
import VnImg from 'src/components/ui/VnImg.vue';
|
|
import axios from 'axios';
|
|
|
|
const $props = defineProps({
|
|
visible: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
available: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
entityId: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
showEditButton: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
});
|
|
|
|
const { t } = useI18n();
|
|
|
|
const image = ref(null);
|
|
const editPhotoFormDialog = ref(null);
|
|
const showEditPhotoForm = ref(false);
|
|
const warehouseName = ref(null);
|
|
|
|
onMounted(async () => {
|
|
getItemConfigs();
|
|
});
|
|
|
|
const toggleEditPictureForm = () => {
|
|
showEditPhotoForm.value = !showEditPhotoForm.value;
|
|
};
|
|
|
|
const getItemConfigs = async () => {
|
|
const { data } = await axios.get('ItemConfigs/findOne');
|
|
if (!data) return;
|
|
await getWarehouseName(data.warehouseFk);
|
|
return data;
|
|
};
|
|
|
|
const getWarehouseName = async (warehouseFk) => {
|
|
const filter = {
|
|
where: { id: warehouseFk },
|
|
};
|
|
const { data } = await axios.get('Warehouses/findOne', {
|
|
params: {
|
|
filter: JSON.stringify(filter),
|
|
},
|
|
});
|
|
if (!data) return;
|
|
warehouseName.value = data.name;
|
|
};
|
|
|
|
const handlePhotoUpdated = (evt = false) => {
|
|
image.value.reload(evt);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative-position">
|
|
<VnImg ref="image" :id="$props.entityId" zoom-resolution="1600x900">
|
|
<template #error>
|
|
<div class="absolute-full picture text-center q-pa-md flex flex-center">
|
|
<div>
|
|
<div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
|
|
<QIcon name="vn:item" />
|
|
</div>
|
|
<div class="text-grey-5" style="opacity: 0.4">
|
|
{{ t('item.descriptor.item') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</VnImg>
|
|
<QBtn
|
|
v-if="showEditButton"
|
|
color="primary"
|
|
size="lg"
|
|
round
|
|
class="edit-photo-btn"
|
|
@click="toggleEditPictureForm()"
|
|
>
|
|
<QIcon name="edit" size="sm" />
|
|
<QDialog ref="editPhotoFormDialog" v-model="showEditPhotoForm">
|
|
<EditPictureForm
|
|
collection="catalog"
|
|
:id="entityId"
|
|
@close-form="toggleEditPictureForm()"
|
|
@on-photo-uploaded="handlePhotoUpdated"
|
|
/>
|
|
</QDialog>
|
|
</QBtn>
|
|
</div>
|
|
|
|
<div
|
|
class="row justify-between items-center full-width bg-primary"
|
|
style="height: 54px"
|
|
>
|
|
<div class="col column items-center">
|
|
<span class="text-uppercase color-vn-white" style="font-size: 11px">
|
|
{{ t('item.descriptor.visible') }}
|
|
</span>
|
|
<span class="text-weight-bold text-h5 color-vn-white">{{ visible }}</span>
|
|
</div>
|
|
<div class="col column items-center separation-borders" style="font-size: 11px">
|
|
<span class="text-uppercase color-vn-white">
|
|
{{ t('item.descriptor.available') }}
|
|
</span>
|
|
<span class="text-weight-bold text-h5 color-vn-white">{{ available }}</span>
|
|
</div>
|
|
<div class="col column items-center justify-center">
|
|
<QIcon name="info" class="cursor-pointer color-vn-white" size="md">
|
|
<QTooltip>{{
|
|
t('warehouseText', {
|
|
warehouseName: warehouseName,
|
|
})
|
|
}}</QTooltip>
|
|
</QIcon>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<i18n>
|
|
es:
|
|
Regularize stock: Regularizar stock
|
|
All it's properties will be copied: Todas sus propiedades serán copiadas
|
|
Do you want to clone this item?: ¿Desea clonar este artículo?
|
|
warehouseText: Calculated on the warehouse of { warehouseName }
|
|
|
|
en:
|
|
warehouseText: Calculado sobre el almacén de { warehouseName }
|
|
</i18n>
|
|
|
|
<style lang="scss" scoped>
|
|
.separation-borders {
|
|
border-left: 1px solid $white;
|
|
border-right: 1px solid $white;
|
|
}
|
|
</style>
|