erp/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Viet An
2026-06-18 08:41:33 +07:00
parent a8aa9a3dce
commit b7c82e944d
17 changed files with 531 additions and 775 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
app/components/orders/SelectedOrder.vue
View File

@@ -6,7 +6,7 @@ import OrderProductTab from "~/components/orders/OrderProductTab.vue";
import OrderReceiptTab from "~/components/orders/OrderReceiptTab.vue";
const props = defineProps({
order: Object,
invoice: Object,
});
const { $dayjs, $numtoString } = useNuxtApp();
@@ -44,131 +44,112 @@ const activeTab = ref(tabs[0]);
</script>
<template>
<div
v-if="order"
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="right: 0.5rem; top: 0.5rem"
>
<span class="icon">
<Icon
name="material-symbols:close-rounded"
:size="22"
/>
<div v-if="invoice">
<div>
<div class="is-flex is-gap-1.5 is-align-items-center">
<span class="fs-17 font-bold">{{ invoice.code }}</span>
<span
:class="[
'tag rounded-full',
`has-background-${invoice.status__color}-80 has-text-${invoice.status__color}-25`,
]"
>
{{ invoice.status }}
</span>
</button>
<div class="card-content">
<div>
<div class="is-flex is-gap-2 is-align-items-center">
<span class="fs-17 font-bold">{{ order.code }}</span>
<span
:class="[
'tag rounded-full',
`has-background-${order.status__color}-80 has-text-${order.status__color}-25`,
]"
>
{{ order.status__name }}
</span>
</div>
<div class="is-flex is-gap-0.5 is-flex-direction-column mt-2">
<div class="is-flex is-gap-1 is-align-items-center">
<Icon
name="material-symbols:person-outline-rounded"
:size="18"
/>
<p>{{ order.customer__name }}</p>
</div>
<div class="is-flex is-gap-1 is-align-items-center">
<Icon
name="material-symbols:call-outline-rounded"
:size="18"
/>
<p>{{ order.customer__phone }}</p>
</div>
<div class="is-flex is-gap-1 is-align-items-center">
<Icon
name="material-symbols:calendar-today-outline-rounded"
:size="18"
/>
<p>{{ $dayjs(order.create_time).format("LL") }}</p>
</div>
</div>
<div class="p-4 has-background-primary-95 rounded-lg mt-6">
<p>Tổng giá trị đơn hàng</p>
<p class="font-bold fs-28">
{{ $numtoString(order.total, { hasUnit: true }) }}
</p>
</div>
</div>
<hr class="m-0" />
<div class="buttons m-0">
<button class="button fs-14 is-flex-grow-1 is-primary">Xác nhận đơn</button>
<button class="button fs-14 is-flex-grow-1">Ghi thanh toán</button>
</div>
<hr class="m-0" />
<div class="tabs is-toggle m-0 fs-13">
<ul>
<li
v-for="tab in tabs"
:key="tab.name"
:class="activeTab.name === tab.name && 'is-active'"
@click="activeTab = tab"
>
<a>{{ tab.name }}</a>
</li>
</ul>
</div>
<hr class="m-0" />
<div id="tab-content">
<div class="is-flex is-gap-1 mb-4">
</div>
<div class="is-flex is-gap-0.5 is-flex-direction-column mt-4">
<p class="icon-text">
<span class="icon">
<Icon
:name="activeTab.icon"
:size="21"
name="material-symbols:person-outline-rounded"
:size="18"
/>
<span class="fs-15 font-semibold">{{ activeTab.heading }}</span>
</div>
<div>
<OrderProductTab
v-if="activeTab.name === 'Chi tiết đơn'"
:order="order"
</span>
<span>{{ invoice.customer_name }}</span>
</p>
<p class="icon-text">
<span class="icon">
<Icon
name="material-symbols:call-outline-rounded"
:size="18"
/>
<OrderDeliveryTab
v-else-if="activeTab.name === 'Giao hàng'"
:order="order"
</span>
<span>{{ invoice.customer_phone }}</span>
</p>
<p class="icon-text">
<span class="icon">
<Icon
name="material-symbols:calendar-today-outline-rounded"
:size="18"
/>
<OrderReceiptTab
v-else-if="activeTab.name === 'Hoá đơn'"
:order="order"
/>
<OrderPaymentTab
v-else-if="activeTab.name === 'Thanh toán'"
:order="order"
/>
<OrderHistoryTab
v-else-if="activeTab.name === 'Lịch sử'"
:order="order"
/>
</div>
</div>
</span>
<span>{{ $dayjs(invoice.create_time).format("LL") }}</span>
</p>
</div>
<div class="px-6 py-4 has-background-primary-95 rounded-lg mt-6">
<p>Tổng giá trị đơn hàng</p>
<p class="font-bold fs-25">
{{ $numtoString(invoice.total_amount, { hasUnit: true }) }}
</p>
</div>
</div>
<hr />
<div class="buttons m-0">
<button class="button fs-14 is-flex-grow-1 is-primary">Xác nhận đơn</button>
<button class="button fs-14 is-flex-grow-1">Ghi thanh toán</button>
</div>
<hr />
<div class="tabs is-toggle m-0 fs-13">
<ul>
<li
v-for="tab in tabs"
:key="tab.name"
:class="activeTab.name === tab.name && 'is-active'"
@click="activeTab = tab"
>
<a>{{ tab.name }}</a>
</li>
</ul>
</div>
<div
id="tab-content"
class="mt-4"
>
<div class="is-flex is-gap-1 mb-4">
<Icon
:name="activeTab.icon"
:size="21"
/>
<span class="fs-15 font-semibold">{{ activeTab.heading }}</span>
</div>
<div>
<OrderProductTab
v-if="activeTab.name === 'Chi tiết đơn'"
:invoice="invoice"
/>
<OrderDeliveryTab
v-else-if="activeTab.name === 'Giao hàng'"
:invoice="invoice"
/>
<OrderReceiptTab
v-else-if="activeTab.name === 'Hoá đơn'"
:invoice="invoice"
/>
<OrderPaymentTab
v-else-if="activeTab.name === 'Thanh toán'"
:invoice="invoice"
/>
<OrderHistoryTab
v-else-if="activeTab.name === 'Lịch sử'"
:invoice="invoice"
/>
</div>
</div>
</div>
</template>
<style scoped>
.card-content {
padding: 0; /* 1.5rem */
> div {
padding: var(--bulma-card-content-padding);
}
}
.tabs {
--bulma-tabs-toggle-link-active-background-color: var(--bulma-link-90);
--bulma-tabs-toggle-link-active-background-color: var(--bulma-link-95);
--bulma-tabs-toggle-link-active-border-color: var(--bulma-link-90);
--bulma-tabs-toggle-link-active-color: var(--bulma-link-40);
}