132 lines
3.2 KiB
Vue
132 lines
3.2 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
invoice: Object,
|
|
});
|
|
|
|
const { $getdata } = useNuxtApp();
|
|
const paymentRecords = ref([]);
|
|
onMounted(async () => {
|
|
paymentRecords.value = await $getdata("Payment_Record", {
|
|
filter: { invoice: props.invoice.id },
|
|
});
|
|
});
|
|
|
|
/*
|
|
|
|
*/
|
|
/* invoice.total_amount */
|
|
const showModal = ref();
|
|
|
|
function openModal() {
|
|
showModal.value = {
|
|
component: "orders/SelectedOrder",
|
|
title: "Chi tiết đơn hàng",
|
|
width: "min(700px, 75%)",
|
|
vbind: {
|
|
invoice: props.invoice,
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
<template>
|
|
<tr
|
|
class="is-clickable"
|
|
@click="openModal"
|
|
>
|
|
<td>
|
|
<div>
|
|
<p class="fs-15 font-semibold">{{ invoice.code }}</p>
|
|
<p class="has-text-grey">{{ invoice.staff__fullname }}</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<p>{{ invoice.customer_name }}</p>
|
|
<div class="is-flex is-gap-0.5 is-align-items-center mt-1 has-text-grey">
|
|
<Icon
|
|
name="material-symbols:call-outline-rounded"
|
|
:size="15"
|
|
/>
|
|
<span class="fs-12">{{ invoice.customer_phone }}</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="has-text-right">
|
|
<div>
|
|
<p class="fs-14 font-semibold">{{ $shortenCurrency(invoice.total_amount) }}</p>
|
|
<p class="has-text-grey">{{ invoice.product_amount }} SP</p>
|
|
</div>
|
|
</td>
|
|
<td class="has-text-centered">
|
|
<span
|
|
:class="[
|
|
'tag rounded-full',
|
|
`has-background-${invoice.invoice_status__color}-90 has-text-${invoice.invoice_status__color}-25`,
|
|
]"
|
|
>
|
|
{{ invoice.invoice_status__name }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<p :class="`has-text-${invoice.payment_status__color}-40`">
|
|
{{ invoice.payment_status__name }}
|
|
</p>
|
|
</td>
|
|
<td>
|
|
<p :class="`has-text-${invoice.delivery__delivery_status__color}-40`">
|
|
{{ invoice.delivery__delivery_status__name }}
|
|
</p>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<div class="is-flex is-gap-0.5">
|
|
<Icon
|
|
:size="18"
|
|
name="material-symbols:calendar-today-outline-rounded"
|
|
/>
|
|
<span>{{ $dayjs(invoice.create_time).format("L") }}</span>
|
|
</div>
|
|
<p class="has-text-grey fs-12">
|
|
{{ $dayjs(invoice.create_time).format("HH:mm") }}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<button
|
|
v-if="invoice.status__name !== 'Hoàn thành'"
|
|
:class="[
|
|
'button fs-12 has-text-white rounded-lg',
|
|
invoice.status__name === 'Nháp'
|
|
? 'is-primary'
|
|
: invoice.status__name === 'Đã xác nhận'
|
|
? 'is-orange'
|
|
: 'is-success',
|
|
]"
|
|
>
|
|
{{
|
|
invoice.status__name === "Nháp"
|
|
? "Xác nhận"
|
|
: invoice.status__name === "Đã xác nhận"
|
|
? "Giao hàng"
|
|
: "Hoàn thành"
|
|
}}
|
|
</button>
|
|
</td>
|
|
<Modal
|
|
v-if="showModal"
|
|
v-bind="showModal"
|
|
@close="showModal = null"
|
|
/>
|
|
</tr>
|
|
</template>
|
|
<style scoped>
|
|
tr.is-selected {
|
|
--bulma-table-row-active-background-color: var(--bulma-primary-95);
|
|
color: unset;
|
|
}
|
|
td {
|
|
vertical-align: middle;
|
|
--bulma-table-cell-padding: 0.75em;
|
|
}
|
|
</style>
|