197 lines
7.7 KiB
Vue
197 lines
7.7 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
invItem: Object,
|
|
});
|
|
|
|
const { $dayjs, $numtoString } = useNuxtApp();
|
|
const emit = defineEmits("unselect");
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="invItem"
|
|
class="cell relative fs-14"
|
|
>
|
|
<div class="card">
|
|
<button
|
|
@click="emit('unselect')"
|
|
class="button is-white rounded-full has-text-grey absolute size-8 is-flex is-justify-content-center is-align-items-center"
|
|
style="z-index: 1; right: 0.5rem; top: 0.5rem"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:close-rounded"
|
|
:size="22"
|
|
/>
|
|
</span>
|
|
</button>
|
|
<div class="card-content is-clipped">
|
|
<div class="py-3 sticky top-0">
|
|
<p class="fs-17 font-semibold">Chi tiết sản phẩm</p>
|
|
</div>
|
|
<hr class="m-0" />
|
|
<div style="max-height: 600px; overflow-y: scroll">
|
|
<div>
|
|
<div class="is-flex is-gap-2 is-align-items-center">
|
|
<div class="is-flex is-gap-2">
|
|
<div
|
|
class="has-background-purple size-12 rounded-md is-flex is-justify-content-center is-align-items-center"
|
|
>
|
|
<Icon
|
|
name="material-symbols:deployed-code-outline"
|
|
:size="24"
|
|
class="has-text-white"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold mb-1">{{ invItem.name }}</p>
|
|
<p class="has-text-grey-dark">SKU: {{ invItem.sku }}</p>
|
|
<p class="fs-12 has-text-grey">{{ invItem.category }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="is-flex is-gap-1 mt-4">
|
|
<div class="px-4 py-3 is-flex-grow-1 rounded-md has-background-blue-95 has-text-blue-40">
|
|
<p class="fs-13">Giá đơn vị</p>
|
|
<p class="fs-16 font-semibold">
|
|
{{ $numtoString(invItem.unit_price, { hasUnit: true }) }}
|
|
</p>
|
|
</div>
|
|
<div class="px-4 py-3 is-flex-grow-1 rounded-md has-background-purple-90 has-text-purple-40">
|
|
<p class="fs-13">Tổng giá trị</p>
|
|
<p class="fs-16 font-semibold">
|
|
{{ $numtoString(invItem.total, { hasUnit: true }) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6">
|
|
<p class="fs-15 font-semibold mb-4">Tóm tắt tồn kho</p>
|
|
<div class="is-flex is-flex-direction-column">
|
|
<div class="py-2 is-flex is-justify-content-space-between">
|
|
<p class="has-text-grey">Tồn hiện tại</p>
|
|
<p class="fs-14 font-semibold">{{ invItem.stock }}</p>
|
|
</div>
|
|
<hr class="my-1" />
|
|
<div class="py-2 is-flex is-justify-content-space-between">
|
|
<p class="has-text-grey">Đặt trước</p>
|
|
<p class="fs-14 font-semibold has-text-orange">
|
|
{{ invItem.preorder }}
|
|
</p>
|
|
</div>
|
|
<hr class="my-1" />
|
|
<div class="py-2 is-flex is-justify-content-space-between">
|
|
<p class="has-text-grey">Khả dụng</p>
|
|
<p class="fs-14 font-semibold has-text-green">
|
|
{{ invItem.available }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6">
|
|
<p class="fs-15 font-semibold mb-4">Vị trí lưu kho</p>
|
|
<div class="p-4 rounded-md has-background-white-bis">
|
|
<div class="is-flex is-gap-1">
|
|
<Icon
|
|
name="material-symbols:location-on-outline-rounded"
|
|
:size="20"
|
|
/>
|
|
<div>
|
|
<p>{{ invItem.storage }}</p>
|
|
<p class="mt-1 fs-13 is-family-monospace">
|
|
{{ invItem.storage__position }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6">
|
|
<p class="fs-15 font-semibold mb-4">Thông tin lô hàng</p>
|
|
<div class="p-4 rounded-md has-background-white-bis">
|
|
<p class="fs-13 has-text-grey">Mã lô</p>
|
|
<p class="mt-1 is-family-monospace">{{ invItem.batch }}</p>
|
|
</div>
|
|
<div class="p-4 mt-4 rounded-md has-background-white-bis">
|
|
<div class="is-flex is-gap-1 is-align-items-center">
|
|
<Icon
|
|
name="material-symbols:calendar-today-outline-rounded"
|
|
:size="18"
|
|
class="has-text-grey"
|
|
/>
|
|
<p class="fs-13 has-text-grey">Hạn sử dụng</p>
|
|
</div>
|
|
<p class="mt-1">{{ $dayjs(invItem.expired).format("LL") }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6">
|
|
<p class="fs-15 font-semibold mb-4">Lịch sử di chuyển</p>
|
|
<div
|
|
v-for="move in invItem.moveHistory"
|
|
:key="move.id"
|
|
class="p-4 mb-4 rounded-md has-background-white-bis has-text-grey fs-12"
|
|
>
|
|
<div class="is-flex is-justify-content-space-between mb-1">
|
|
<div class="is-flex is-gap-1 is-align-items-center">
|
|
<div
|
|
:class="[
|
|
'p-1 rounded-sm is-flex is-align-items-center',
|
|
`has-background-${move.delta > 0 ? 'success' : 'danger'}-soft`,
|
|
]"
|
|
>
|
|
<Icon
|
|
:name="move.delta > 0 ? 'ph:chart-line-up' : 'ph:chart-line-down'"
|
|
:size="18"
|
|
:class="`has-text-${move.delta > 0 ? 'success' : 'danger'}-40`"
|
|
/>
|
|
</div>
|
|
<p :class="`has-text-${move.delta > 0 ? 'success' : 'danger'}-40`">
|
|
{{ move.type__name }}
|
|
</p>
|
|
</div>
|
|
<p :class="['fs-14 font-semibold', `has-text-${move.delta > 0 ? 'success' : 'danger'}-40`]">
|
|
{{
|
|
new Intl.NumberFormat("en-US", {
|
|
signDisplay: "exceptZero",
|
|
}).format(move.delta)
|
|
}}
|
|
</p>
|
|
</div>
|
|
<p class="is-flex is-gap-0.5 is-align-items-center">
|
|
<span>{{ $dayjs(move.date).format("L") }}</span>
|
|
<span>•</span>
|
|
<span class="is-family-monospace">{{ move.code }}</span>
|
|
</p>
|
|
<p>
|
|
<span>{{ move.from__code ? "Từ" : "Đến" }}</span>
|
|
<span>: </span>
|
|
<span>{{ move.from__code || move.to__code }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="mt-6">
|
|
<p class="fs-15 font-semibold mb-4">Thao tác nhanh</p>
|
|
<div class="fixed-grid">
|
|
<div class="grid">
|
|
<button class="button fs-13 is-primary">Điều chỉnh</button>
|
|
<button class="button fs-13">Chuyển kho</button>
|
|
<button class="button fs-13">Xem báo cáo</button>
|
|
<button class="button fs-13">In nhãn</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.card-content {
|
|
padding: 0; /* 1.5rem */
|
|
|
|
> div {
|
|
padding: var(--bulma-card-content-padding);
|
|
}
|
|
}
|
|
</style>
|