105 lines
2.7 KiB
Vue
105 lines
2.7 KiB
Vue
<script setup>
|
|
import OrderHighlightCard from "@/components/orders/OrderHighlightCard.vue";
|
|
import OrderPipeline from "@/components/orders/OrderPipeline.vue";
|
|
import OrdersTable from "@/components/orders/OrdersTable.vue";
|
|
|
|
const { $store } = useNuxtApp();
|
|
const highlights = [
|
|
{
|
|
name: "Nháp",
|
|
value: 2,
|
|
icon: "material-symbols:assignment-outline-rounded",
|
|
color: "yellow",
|
|
},
|
|
{
|
|
name: "Đã xác nhận",
|
|
value: 3,
|
|
icon: "material-symbols:check-circle-outline-rounded",
|
|
color: "blue",
|
|
},
|
|
{
|
|
name: "Đang giao",
|
|
value: 2,
|
|
icon: "material-symbols:delivery-truck-speed-outline-rounded",
|
|
color: "orange",
|
|
},
|
|
{
|
|
name: "Hoàn thành",
|
|
value: 1,
|
|
icon: "material-symbols:box-outline-rounded",
|
|
color: "green",
|
|
},
|
|
{
|
|
name: "Doanh thu",
|
|
value: "6.8M",
|
|
icon: "material-symbols:attach-money-rounded",
|
|
color: "purple",
|
|
unit: "VNĐ",
|
|
},
|
|
];
|
|
|
|
const viewModes = [
|
|
{ name: "list", icon: "material-symbols:format-list-bulleted-rounded" },
|
|
{ name: "grid", icon: "material-symbols:grid-view-outline-rounded" },
|
|
];
|
|
const viewMode = ref("list");
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<Teleport
|
|
defer
|
|
to="#header-right-slot"
|
|
v-if="$store.tabinfo.tab.code === 'orders'"
|
|
>
|
|
<div class="is-flex is-gap-2 is-justify-content-flex-end is-align-items-center">
|
|
<div class="tabs is-toggle m-0">
|
|
<ul class="is-flex-grow-0 ml-auto">
|
|
<li
|
|
v-for="mode in viewModes"
|
|
:key="mode.name"
|
|
:class="[mode.name === viewMode && 'is-active']"
|
|
@click="viewMode = mode.name"
|
|
>
|
|
<a class="px-3 py-1">
|
|
<span class="icon m-0">
|
|
<Icon
|
|
:name="mode.icon"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button class="button fs-14 is-primary">
|
|
<span class="icon">
|
|
<Icon
|
|
:size="18"
|
|
name="material-symbols:add-rounded"
|
|
/>
|
|
</span>
|
|
<span>Tạo đơn hàng</span>
|
|
</button>
|
|
</div>
|
|
</Teleport>
|
|
<div class="fixed-grid has-2-cols-mobile has-5-cols">
|
|
<div class="grid">
|
|
<OrderHighlightCard
|
|
v-for="highlight in highlights"
|
|
:key="highlight.name"
|
|
v-bind="highlight"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<OrderPipeline />
|
|
<OrdersTable :viewMode="viewMode" />
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.tabs {
|
|
--bulma-tabs-toggle-link-active-background-color: var(--bulma-link-90);
|
|
--bulma-tabs-toggle-link-active-border-color: var(--bulma-link-90);
|
|
--bulma-tabs-toggle-link-active-color: var(--bulma-link-40);
|
|
}
|
|
</style>
|