129 lines
3.7 KiB
Vue
129 lines
3.7 KiB
Vue
<script setup>
|
|
import DataView from "~/components/datatable/DataView.vue";
|
|
import InventoryHighlightCard from "~/components/inventory/InventoryHighlightCard.vue";
|
|
|
|
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-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>
|
|
<div class="card is-clipped">
|
|
<div class="card-content p-0">
|
|
<p class="p-5 icon-text fs-16 font-semibold w-full">
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:deployed-code-outline"
|
|
:size="20"
|
|
/>
|
|
</span>
|
|
<span>Danh sách tồn kho</span>
|
|
</p>
|
|
<div class="px-4 pb-4">
|
|
<DataView
|
|
v-bind="{
|
|
api: 'Product_Variant',
|
|
setting: 'inventory',
|
|
pagename: 'inventory',
|
|
params: {
|
|
values:
|
|
'imeis__warehouse,imeis__warehouse__name,imeis__warehouse__address,id,code,product,product__name,product__os__name,product__external_storage__max_capacity,color,color__code,color__name,color__hex_code,ram,ram__code,ram__capacity,internal_storage,internal_storage__code,internal_storage__capacity,image,image__path,price,note,create_time,update_time',
|
|
distinct_values: {
|
|
imei_count: { type: 'Count', field: 'imeis' },
|
|
},
|
|
summary: 'annotate',
|
|
sort: 'id',
|
|
},
|
|
timeopt: { time: 36000 },
|
|
modal: {
|
|
component: 'imports/AddProduct',
|
|
title: 'Tạo sản phẩm',
|
|
width: '90%',
|
|
height: 'auto',
|
|
},
|
|
}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|