80 lines
2.1 KiB
Vue
80 lines
2.1 KiB
Vue
<script setup>
|
|
import InventoryHighlightCard from '@/components/inventory/InventoryHighlightCard.vue';
|
|
import InventoryTable from '@/components/inventory/InventoryTable.vue';
|
|
|
|
const { $store } = useNuxtApp();
|
|
const inventoryHighlights = [
|
|
{
|
|
name: 'Tổng số SKU',
|
|
value: 12,
|
|
icon: 'material-symbols:deployed-code-outline',
|
|
color: 'blue',
|
|
},
|
|
{
|
|
name: 'Tổng tồn kho',
|
|
value: '1,120',
|
|
icon: 'material-symbols:box-outline-rounded',
|
|
color: 'green',
|
|
unit: 'đơn vị'
|
|
},
|
|
{
|
|
name: 'Giá trị tồn kho',
|
|
value: '294.5M',
|
|
icon: 'material-symbols:attach-money-rounded',
|
|
color: 'purple',
|
|
},
|
|
{
|
|
name: 'Sắp hết hàng',
|
|
value: 3,
|
|
icon: 'material-symbols:warning-outline-rounded',
|
|
color: 'red',
|
|
unit: 'sản phẩm'
|
|
},
|
|
];
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<Teleport
|
|
defer
|
|
to="#header-right-slot"
|
|
v-if="$store.tabinfo.tab.code === 'inventory'"
|
|
>
|
|
<div class="content buttons is-justify-content-flex-end">
|
|
<button class="button fs-14">
|
|
<span class="icon">
|
|
<Icon :size="18" name="material-symbols:download-rounded" />
|
|
</span>
|
|
<span>Export</span>
|
|
</button>
|
|
<button class="button fs-14">
|
|
<span class="icon">
|
|
<Icon :size="18" name="material-symbols:upload-rounded" />
|
|
</span>
|
|
<span>Import</span>
|
|
</button>
|
|
<button class="button fs-14">
|
|
<span class="icon">
|
|
<Icon :size="18" name="material-symbols:sync" />
|
|
</span>
|
|
<span>Chuyển kho</span>
|
|
</button>
|
|
<button class="button fs-14 is-primary">
|
|
<span class="icon">
|
|
<Icon :size="18" name="material-symbols:add-2-rounded" />
|
|
</span>
|
|
<span>Điều chỉnh</span>
|
|
</button>
|
|
</div>
|
|
</Teleport>
|
|
<div class="fixed-grid has-2-cols-mobile has-4-cols">
|
|
<div class="grid">
|
|
<InventoryHighlightCard
|
|
v-for="highlight in inventoryHighlights"
|
|
:key="highlight.name"
|
|
v-bind="highlight"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<InventoryTable />
|
|
</div>
|
|
</template> |