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-04-13 21:58:04 +07:00
parent 631527225e
commit 0011c3ced9
25 changed files with 1956 additions and 686 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/components/orders/OrderRow.vue
View File

@@ -1,75 +1,61 @@
<script setup>
const props = defineProps({
id: Number,
code: String,
employee: Number,
employee__name: String,
customer: Number,
customer__name: String,
customer__phone: String,
total: String,
status: Number,
status__name: String,
status__color: String,
payment_status: Number,
payment_status__name: String,
payment_status__color: String,
delivery_status: Number,
delivery_status__name: String,
delivery_status__color: String,
order__products: Array,
create_time: String
order: Object,
selected: Boolean
});
const { $dayjs, $shortenCurrency } = useNuxtApp();
const emit = defineEmits(['selectOrder', 'unselect'])
</script>
<template>
<tr>
<tr
:class="['is-clickable', selected && 'is-selected']"
@click="selected ? emit('unselect') : emit('selectOrder', order.id) "
>
<td>
<div>
<p class="fs-15 font-semibold">{{ code }}</p>
<p class="fs-13 has-text-grey">{{ employee__name }}</p>
<p class="fs-15 font-semibold">{{ order.code }}</p>
<p class="has-text-grey">{{ order.employee__name }}</p>
</div>
</td>
<td>
<div>
<p>{{ customer__name }}</p>
<div class="is-flex is-gap-0.5 is-align-items-center mt-1 fs-13 has-text-grey">
<p>{{ order.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">{{ customer__phone }}</span>
<span class="fs-12">{{ order.customer__phone }}</span>
</div>
</div>
</td>
<td class="has-text-right">
<div>
<p class="font-semibold">{{ $shortenCurrency(total) }}</p>
<p class="fs-13 has-text-grey">{{ order__products.length }} SP</p>
<p class="fs-14 font-semibold">{{ $shortenCurrency(order.total) }}</p>
<p class="has-text-grey">{{ order.order__products.length }} SP</p>
</div>
</td>
<td class="has-text-centered">
<span :class="[
'tag rounded-full',
`has-background-${status__color}-80 has-text-${status__color}-25`
`has-background-${order.status__color}-80 has-text-${order.status__color}-25`
]">
{{ status__name }}
{{ order.status__name }}
</span>
</td>
<td>
<p :class="`has-text-${payment_status__color}-40`">{{ payment_status__name }}</p>
<p :class="`has-text-${order.payment_status__color}-40`">{{ order.payment_status__name }}</p>
</td>
<td>
<p :class="`has-text-${delivery_status__color}-40`">{{ delivery_status__name }}</p>
<p :class="`has-text-${order.delivery_status__color}-40`">{{ order.delivery_status__name }}</p>
</td>
<td>
<div>
<div class="is-flex is-gap-0.5">
<Icon :size="18" name="material-symbols:calendar-month-outline-rounded" />
<span class="fs-13">{{ $dayjs(create_time).format('L') }}</span>
<span>{{ $dayjs(order.create_time).format('L') }}</span>
</div>
<p class="has-text-grey fs-12">{{ $dayjs(create_time).format('HH:mm') }}</p>
<p class="has-text-grey fs-12">{{ $dayjs(order.create_time).format('HH:mm') }}</p>
</div>
</td>
<td>
@@ -78,6 +64,10 @@ const { $dayjs, $shortenCurrency } = useNuxtApp();
</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;