chore: install prettier
This commit is contained in:
Viet An
@@ -1,39 +1,47 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
invItem: Object
|
||||
invItem: Object,
|
||||
});
|
||||
|
||||
const { $dayjs, $numtoString } = useNuxtApp();
|
||||
const emit = defineEmits('unselect');
|
||||
const emit = defineEmits("unselect");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="invItem" class="cell relative fs-14">
|
||||
<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;"
|
||||
style="z-index: 1; right: 0.5rem; top: 0.5rem"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon name="material-symbols:close-rounded" :size="22" />
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
@@ -45,11 +53,15 @@ const emit = defineEmits('unselect');
|
||||
<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>
|
||||
<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>
|
||||
<p class="fs-16 font-semibold">
|
||||
{{ $numtoString(invItem.total, { hasUnit: true }) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
@@ -62,12 +74,16 @@ const emit = defineEmits('unselect');
|
||||
<hr class="my-1 has-background-grey-95" />
|
||||
<div class="py-2 is-flex is-justify-content-space-between">
|
||||
<p class="has-text-grey-40">Đặt trước</p>
|
||||
<p class="fs-14 font-semibold has-text-orange">{{ invItem.preorder }}</p>
|
||||
<p class="fs-14 font-semibold has-text-orange">
|
||||
{{ invItem.preorder }}
|
||||
</p>
|
||||
</div>
|
||||
<hr class="my-1 has-background-grey-95" />
|
||||
<div class="py-2 is-flex is-justify-content-space-between">
|
||||
<p class="has-text-grey-40">Khả dụng</p>
|
||||
<p class="fs-14 font-semibold has-text-green">{{ invItem.available }}</p>
|
||||
<p class="fs-14 font-semibold has-text-green">
|
||||
{{ invItem.available }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -75,10 +91,15 @@ const emit = defineEmits('unselect');
|
||||
<p class="fs-15 font-semibold mb-4">Vị trí lưu kho</p>
|
||||
<div class="p-4 rounded-md has-background-grey-95">
|
||||
<div class="is-flex is-gap-1">
|
||||
<Icon name="material-symbols:location-on-outline-rounded" :size="20" />
|
||||
<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>
|
||||
<p class="mt-1 fs-13 is-family-monospace">
|
||||
{{ invItem.storage__position }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,12 +112,14 @@ const emit = defineEmits('unselect');
|
||||
</div>
|
||||
<div class="p-4 mt-4 rounded-md has-background-grey-95">
|
||||
<div class="is-flex is-gap-1 is-align-items-center">
|
||||
<Icon name="material-symbols:calendar-today-outline-rounded" :size="18"
|
||||
<Icon
|
||||
name="material-symbols:calendar-today-outline-rounded"
|
||||
:size="18"
|
||||
class="has-text-grey-50"
|
||||
/>
|
||||
/>
|
||||
<p class="fs-13 has-text-grey">Hạn sử dụng</p>
|
||||
</div>
|
||||
<p class="mt-1">{{ $dayjs(invItem.expired).format('LL') }}</p>
|
||||
<p class="mt-1">{{ $dayjs(invItem.expired).format("LL") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
@@ -108,29 +131,37 @@ const emit = defineEmits('unselect');
|
||||
>
|
||||
<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`
|
||||
]">
|
||||
<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>
|
||||
<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>
|
||||
<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>{{ $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>{{ move.from__code ? "Từ" : "Đến" }}</span>
|
||||
<span>: </span>
|
||||
<span>{{ move.from__code || move.to__code }}</span>
|
||||
</p>
|
||||
@@ -152,7 +183,7 @@ const emit = defineEmits('unselect');
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.card-content {
|
||||
@@ -162,4 +193,4 @@ const emit = defineEmits('unselect');
|
||||
padding: var(--bulma-card-content-padding);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user