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-07-01 16:54:21 +07:00
parent c2c695cbe4
commit 8d620b8bce
16 changed files with 155 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
app/components/orders/OrderKanbanCard.vue
View File

@@ -1,20 +1,17 @@
<script setup>
const props = defineProps({
order: Object,
invoice: Object,
});
const { $dayjs, $shortenCurrency } = useNuxtApp();
const emit = defineEmits(["selectOrder", "unselect"]);
const showModal = ref();
function openModal() {
showModal.value = {
component: "orders/SelectedOrder",
title: "SelectedOrder",
width: "75%",
height: "500px",
title: "Chi tiết đơn hàng",
width: "min(700px, 75%)",
vbind: {
order: props.order,
invoice: props.invoice,
},
};
}
@@ -22,32 +19,32 @@ function openModal() {
<template>
<div
:class="['card fs-14 is-clickable', `has-background-${order.status__color}-95`]"
:style="{ border: `1px solid var(--bulma-${order.status__color}-60)` }"
@click="selected ? emit('unselect') : emit('selectOrder', order.id)"
:class="['card fs-14 is-clickable', `has-background-${invoice.invoice_status__color}-100`]"
:style="{ border: `1px solid var(--bulma-${invoice.invoice_status__color}-80)` }"
@click="openModal"
>
<div class="card-content p-4">
<div class="mb-4 is-flex is-justify-content-space-between is-gap-1">
<p class="fs-15 font-bold">{{ order.code }}</p>
<span :class="['fs-13', `has-text-${order.payment_status__color}-40`]">
{{ order.payment_status__name }}
<p class="fs-15 font-bold">{{ invoice.code }}</p>
<span :class="['fs-13', `has-text-${invoice.payment_status__color}-40`]">
{{ invoice.payment_status__name }}
</span>
</div>
<div class="is-flex is-flex-direction-column is-gap-2">
<!-- customer info -->
<div>
<p class="has-text-grey-20">{{ order.customer__name }}</p>
<p class="has-text-grey-20">{{ invoice.customer_name }}</p>
<div class="has-text-grey fs-13 mt-1 is-flex is-gap-1 is-align-items-center">
<Icon name="material-symbols:call-outline-rounded" />
<p>{{ order.customer__phone }}</p>
<p>{{ invoice.customer_phone }}</p>
</div>
</div>
<!-- product info -->
<div>
<p class="fs-24 has-text-grey-20 font-bold">
{{ $shortenCurrency(order.total) }}
{{ $shortenCurrency(invoice.final_amount) }}
</p>
<p class="fs-13 has-text-grey">{{ order.order__products.length }} sản phẩm</p>
<p class="fs-13 has-text-grey">{{ invoice.product_amount }} sản phẩm</p>
</div>
<hr class="m-0 has-background-grey-85" />
<div class="is-flex is-flex-direction-column is-gap-0.5 fs-13 has-text-grey">
@@ -56,29 +53,29 @@ function openModal() {
name="material-symbols:calendar-today-outline-rounded"
:size="16"
/>
<span>{{ $dayjs(order.create_time).format("L") }}</span>
<span>{{ $dayjs(invoice.create_time).format("L") }}</span>
<span>•</span>
<span>{{ $dayjs(order.create_time).format("HH:mm") }}</span>
<span>{{ $dayjs(invoice.create_time).format("HH:mm") }}</span>
</p>
<p>
NV: <span>{{ order.employee__name }}</span>
NV: <span>{{ invoice.staff__fullname }}</span>
</p>
</div>
<button
v-if="order.status__name !== 'Hoàn thành'"
v-if="invoice.invoice_status__code !== 'COMPLETED'"
:class="[
'button fs-14 has-text-white',
order.status__name === 'Nháp'
invoice.invoice_status__code === 'DRAFT'
? 'is-primary'
: order.status__name === 'Đã xác nhận'
: invoice.invoice_status__code === 'CONFIRMED'
? 'is-orange'
: 'is-success',
]"
>
{{
order.status__name === "Nháp"
invoice.invoice_status__code === "DRAFT"
? "Xác nhận"
: order.status__name === "Đã xác nhận"
: invoice.invoice_status__code === "CONFIRMED"
? "Giao hàng"
: "Hoàn thành"
}}