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 11:21:10 +07:00
parent 87397be8bf
commit ac9a651ae2
2 changed files with 57 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/components/orders/OrderDeliveryTab.vue
View File

@@ -1,4 +1,6 @@
<script setup> <script setup>
import { capitalize } from "es-toolkit";
const props = defineProps({ const props = defineProps({
invoice: Object, invoice: Object,
}); });
@@ -6,16 +8,40 @@ const props = defineProps({
<template> <template>
<div class="is-flex is-flex-direction-column is-gap-2"> <div class="is-flex is-flex-direction-column is-gap-2">
<div class="p-4 rounded-md has-background-primary-95"> <div
<p class="has-text-grey">Trạng thái</p> class="p-4 rounded-md has-background-primary-95 is-flex is-justify-content-space-between is-align-items-center"
<p class="fs-17 mt-1 font-semibold has-text-primary-50"> >
{{ invoice.delivery_status__name }} <div>
<p class="fs-14 has-text-grey-40">Mã giao hàng</p>
<p class="is-flex is-gap-1 is-align-items-center">
<span class="font-semibold">{{ invoice.delivery__tracking_code }}</span>
<button
class="button is-ghost is-small size-6 p-0 rounded-full"
@click="$copyToClipboard(invoice.delivery__tracking_code)"
>
<span class="icon">
<Icon
name="material-symbols:content-copy-outline-rounded"
:size="17"
/>
</span>
</button>
</p>
</div>
<p class="fs-16 font-medium has-text-primary-50">
{{ capitalize(invoice.delivery__status) }}
</p> </p>
</div> </div>
<div class="p-4 rounded-md has-background-white-bis"> <div class="rounded-md has-background-white-bis">
<p class="has-text-grey">Địa chỉ giao hàng</p> <div class="p-4">
<p class="mt-1 has-text-grey-darker">{{ invoice.customer__name }}</p> <p class="fs-14 has-text-grey-40">Người nhận</p>
<p class="has-text-grey-darker">{{ invoice.customer__phone }}</p> <p class="font-medium">{{ invoice.delivery__receiver_name }}</p>
</div>
<hr class="m-0" />
<div class="p-4">
<p class="fs-14 has-text-grey-40">Địa chỉ</p>
<p class="font-medium">{{ invoice.delivery__receiver_phone }}</p>
</div>
</div> </div>
</div> </div>
</template> </template>

38
app/components/orders/OrderProductTab.vue
View File

@@ -1,4 +1,6 @@
<script setup> <script setup>
import { groupBy } from "es-toolkit";
const props = defineProps({ const props = defineProps({
invoice: Object, invoice: Object,
}); });
@@ -8,29 +10,35 @@ const invoiceDetails = ref([]);
onMounted(async () => { onMounted(async () => {
invoiceDetails.value = await $getdata("Invoice_Detail", { filter: { invoice: props.invoice.id } }); invoiceDetails.value = await $getdata("Invoice_Detail", { filter: { invoice: props.invoice.id } });
}); });
const invoiceProducts = computed(() => {
const grouped = groupBy(invoiceDetails.value, (item) => item.variant__product__name);
return Object.values(grouped).map((group) => ({
...group[0],
amount: group.length,
subtotal: group.length * group[0].price,
}));
});
</script> </script>
<template> <template>
<div> <div>
<pre class="fs-12 max-h-40 mb-2">{{ invoiceDetails }}</pre> <div class="is-flex is-flex-direction-column is-gap-1">
<div class="is-flex is-flex-direction-column is-gap-2">
<div <div
v-for="invoiceDetail in invoiceDetails" v-for="product in invoiceProducts"
:key="invoiceDetail.id" :key="product.id"
class="p-3 has-background-white-ter rounded-md" class="p-3 has-background-white-ter rounded-md"
> >
<div class="fs-15 is-flex is-justify-content-space-between"> <div class="is-flex is-justify-content-space-between is-align-items-flex-end">
<p>{{ invoiceDetail.variant__product__name }}</p> <div>
<p class="font-semibold">{{ product.variant__product__name }}</p>
<div class="is-flex is-gap-8 fs-13 has-text-grey-dark mt-1">
<p>SL: {{ product.amount }}</p>
<p>Đơn giá: {{ $formatNum(product.price, { hasUnit: true }) }}</p>
</div>
</div>
<p class="font-semibold"> <p class="font-semibold">
{{ $formatNum(invoiceDetail.price, { hasUnit: true }) }} {{ $formatNum(product.subtotal, { hasUnit: true }) }}
</p>
</div>
<div class="is-flex is-gap-8 fs-13 has-text-grey-dark mt-1">
<p>SL: {{ invoiceDetail.quantity }}</p>
<p>Đơn giá: {{ $formatNum(invoiceDetail.price, { hasUnit: true }) }}</p>
<p>
Giảm:
{{ new Intl.NumberFormat("vi-VN", { style: "percent" }).format(invoiceDetail.discount) }}
</p> </p>
</div> </div>
</div> </div>